<template>
  <div class="app-layout grid grid-cols-1 min-h-dvh">
    <LayoutTheHeader />
    <main class="app-main">
      <slot />

      <!-- 益 Yì (Increase, #42) — sceau hexagramme -->
      <svg class="app-seal" viewBox="0 0 130 100" fill="currentColor" aria-hidden="true">
        <!-- Line 6 (top) — yang -->
        <rect x="5" y="5" width="120" height="5" rx="1"/>
        <!-- Line 5 — yang -->
        <rect x="5" y="22" width="120" height="5" rx="1"/>
        <!-- Line 4 — yin -->
        <rect x="5" y="39" width="49" height="5" rx="1"/>
        <rect x="76" y="39" width="49" height="5" rx="1"/>
        <!-- Line 3 — yin -->
        <rect x="5" y="56" width="49" height="5" rx="1"/>
        <rect x="76" y="56" width="49" height="5" rx="1"/>
        <!-- Line 2 — yin -->
        <rect x="5" y="73" width="49" height="5" rx="1"/>
        <rect x="76" y="73" width="49" height="5" rx="1"/>
        <!-- Line 1 (bottom) — yang -->
        <rect x="5" y="90" width="120" height="5" rx="1"/>
      </svg>
    </main>
    <LayoutTheFooter />
  </div>
</template>

<script setup lang="ts">
useScrollTracking()
</script>

<style scoped>
.app-layout {
  grid-template-rows: auto 1fr auto;
}

/* === Seal — 益 Yì (Increase) === */
.app-seal {
  display: block;
  width: 44px;
  margin: 2rem 1.5rem 1rem auto;
  color: hsl(var(--color-accent));
  opacity: 0.28;
  filter: drop-shadow(1px 1px 0.5px rgba(0,0,0,0.25))
          drop-shadow(-0.5px -0.5px 0.5px rgba(255,255,255,0.15));
}
</style>
