/* ════════════════════════════════════════════════════════════════════
   WASIYAT — VOL. I · MMXXVI
   Heritage manuscript fused with cryptographic precision.
   Muted indigo on parchment. Tiro Devanagari Hindi + EB Garamond.
   The banyan root, the lotus seal, the wax-on-cord binding.
   oklch · container queries · view transitions · :has() · @property · anchor()
   ════════════════════════════════════════════════════════════════════ */

@layer reset, tokens, base, typography, ledger, layout, components, ornament, motion;

@property --ink-bleed { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --seal-rotate { syntax: '<angle>'; inherits: false; initial-value: -3deg; }
@property --ribbon-x { syntax: '<percentage>'; inherits: false; initial-value: -100%; }
@property --tally { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

@view-transition { navigation: auto; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; }
  body { min-height: 100dvh; overflow-x: hidden; }
  img, svg, canvas { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  input, textarea, select { font: inherit; color: inherit; }
  :focus-visible { outline: 1.5px solid var(--indigo); outline-offset: 3px; border-radius: 1px; }
  ::selection { background: var(--indigo); color: var(--parchment); }
}

@layer tokens {
  :root {
    /* parchment — pre-Independence ledger stock, age-warmed, sealed */
    --parchment:        oklch(94% 0.026 84);
    --parchment-warm:   oklch(91% 0.034 80);
    --parchment-deep:   oklch(87% 0.042 76);
    --parchment-edge:   oklch(80% 0.050 72);
    --parchment-fold:   oklch(74% 0.060 68);

    /* indigo — heirloom Nilgiri ink, muted enough to feel inherited */
    --indigo:           oklch(34% 0.110 268);
    --indigo-deep:      oklch(26% 0.100 270);
    --indigo-glow:      oklch(46% 0.135 264);
    --indigo-wash:      oklch(34% 0.110 268 / 0.10);

    /* sandalwood — body ink */
    --ink:              oklch(28% 0.020 50);
    --ink-dim:          oklch(42% 0.025 50 / 0.85);
    --ink-faint:        oklch(55% 0.030 50 / 0.62);
    --ink-ghost:        oklch(70% 0.025 55 / 0.40);

    /* saffron — used sparingly, the family seal */
    --saffron:          oklch(70% 0.150 78);
    --saffron-deep:     oklch(58% 0.140 72);

    /* crimson — only for must-priority wishes and overdue DMS */
    --crimson:          oklch(48% 0.180 25);
    --crimson-deep:     oklch(40% 0.170 22);

    /* leaf — confirmation green */
    --leaf:             oklch(48% 0.110 145);

    /* rules */
    --rule:             oklch(60% 0.040 50 / 0.40);
    --rule-strong:      oklch(48% 0.060 45 / 0.55);
    --rule-hair:        oklch(60% 0.030 50 / 0.22);
    --rule-indigo:      oklch(34% 0.110 268 / 0.32);

    /* typefaces */
    --display:  'EB Garamond', 'Cormorant Garamond', Georgia, serif;
    --hindi:    'Tiro Devanagari Hindi', 'Mukta', serif;
    --mono:     'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
    --body:     'EB Garamond', Georgia, serif;

    /* motion */
    --ease-snap:    cubic-bezier(0.32, 0.72, 0, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-stately: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-edge:    cubic-bezier(0.85, 0, 0.15, 1);

    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --num-feat: 'tnum' 1, 'lnum' 1, 'ss01' 1, 'cv11' 1, 'frac' 1, 'kern' 1;

    --gauge: clamp(280px, 78vw, 480px);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --parchment:        oklch(20% 0.024 280);
      --parchment-warm:   oklch(24% 0.028 278);
      --parchment-deep:   oklch(28% 0.030 274);
      --parchment-edge:   oklch(32% 0.034 272);
      --parchment-fold:   oklch(36% 0.038 270);
      --ink:              oklch(92% 0.020 80);
      --ink-dim:          oklch(82% 0.020 78 / 0.85);
      --ink-faint:        oklch(68% 0.022 75 / 0.65);
      --ink-ghost:        oklch(50% 0.020 70 / 0.45);
      --indigo:           oklch(72% 0.135 264);
      --indigo-deep:      oklch(60% 0.130 268);
      --indigo-glow:      oklch(82% 0.140 260);
      --indigo-wash:      oklch(72% 0.135 264 / 0.12);
      --rule:             oklch(45% 0.040 50 / 0.45);
      --rule-strong:      oklch(60% 0.060 45 / 0.60);
      color-scheme: dark;
    }
  }
}

@layer base {
  body {
    background:
      radial-gradient(ellipse 70% 50% at 50% -10%, oklch(96% 0.020 80), transparent 65%),
      radial-gradient(ellipse 120% 80% at 50% 110%, oklch(82% 0.045 70 / 0.45), transparent 60%),
      repeating-linear-gradient(
        to bottom,
        transparent 0 27px,
        oklch(60% 0.040 50 / 0.04) 27px 28px
      ),
      var(--parchment);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: var(--num-feat);
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
  }

  /* noise grain */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.46  0 0 0 0 0.34  0 0 0 0 0.18  0 0 0 0.38 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    z-index: 0;
  }

  main, wasiyat-gate, wasiyat-onboarding { position: relative; z-index: 1; }
}

@layer typography {
  .deva { font-family: var(--hindi); font-weight: 400; }
  .display-xl {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(48px, 12vw, 92px);
    line-height: 0.96;
    letter-spacing: -0.02em;
  }
  .display { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 6vw, 42px); line-height: 1.1; letter-spacing: -0.01em; }
  .display-italic { font-style: italic; font-weight: 500; }
  .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--ink-faint); }
  .number { font-family: var(--mono); font-feature-settings: 'tnum' 1, 'lnum' 1; letter-spacing: -0.01em; }
}

@layer layout {
  main {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 22px 64px;
    display: grid;
    gap: 28px;
  }

  .masthead-rule {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding: 28px 0 16px;
    border-bottom: 1px solid var(--ink);
    position: relative;
  }
  .masthead-rule::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--indigo);
    opacity: 0.4;
  }
  .masthead-rule .center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .masthead-rule .dot {
    width: 4px;
    height: 4px;
    background: var(--indigo);
    border-radius: 50%;
    display: inline-block;
  }

  .colophon {
    text-align: center;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: 36px 0 0;
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--rule);
  }
  .colophon .seal-mini {
    color: var(--indigo);
    font-weight: 700;
  }
}

@layer components {
  /* section card frame, used by every panel */
  .frame {
    background: var(--parchment-warm);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    padding: 22px 20px;
    position: relative;
    box-shadow:
      0 1px 0 oklch(50% 0.040 50 / 0.06),
      inset 0 1px 0 oklch(100% 0.012 80 / 0.6);
  }
  .frame::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 0.5px solid var(--rule-hair);
    border-radius: 1px;
    pointer-events: none;
  }
  .frame h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 22px;
    color: var(--indigo);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .frame h2 .deva {
    color: var(--ink);
    font-size: 22px;
    font-weight: 400;
    opacity: 0.85;
  }
  .frame .kicker {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 14px;
  }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--rule-strong);
    border-radius: 99px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--parchment);
    color: var(--ink-dim);
  }
  .pill.indigo { color: var(--indigo); border-color: var(--rule-indigo); background: var(--indigo-wash); }
  .pill.crimson { color: var(--crimson); border-color: oklch(48% 0.180 25 / 0.34); background: oklch(48% 0.180 25 / 0.08); }
  .pill.leaf { color: var(--leaf); border-color: oklch(48% 0.110 145 / 0.35); background: oklch(48% 0.110 145 / 0.08); }

  .btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    padding: 14px 18px;
    background: var(--indigo);
    color: var(--parchment);
    border-radius: 2px;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    transition: transform 120ms var(--ease-snap), filter 120ms, box-shadow 200ms;
  }
  .btn::before {
    content: '';
    position: absolute;
    inset: 1px;
    border: 1px solid oklch(94% 0.022 78 / 0.35);
    border-radius: inherit;
    pointer-events: none;
  }
  .btn:hover { filter: brightness(1.08); box-shadow: 0 6px 22px -8px var(--indigo-wash); }
  .btn:active { transform: scale(0.97); filter: brightness(0.94); }
  .btn.ghost {
    background: transparent;
    color: var(--indigo);
    border: 1px solid var(--rule-indigo);
  }
  .btn.ghost::before { display: none; }
  .btn.danger { background: var(--crimson); }
  .btn.tiny { font-size: 9.5px; padding: 9px 12px; letter-spacing: 0.32em; }

  input[type='text'], input[type='password'], input[type='number'], input[type='url'], textarea, select {
    font-family: var(--body);
    font-size: 15px;
    padding: 11px 13px;
    background: oklch(96% 0.018 78);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    color: var(--ink);
    width: 100%;
    transition: border-color 200ms var(--ease-snap), background 200ms;
  }
  input:focus, textarea:focus, select:focus {
    border-color: var(--indigo);
    background: oklch(98% 0.015 78);
  }
  label.field {
    display: grid;
    gap: 4px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }

  .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .list { display: grid; gap: 10px; }
  .list-empty {
    font-family: var(--display);
    font-style: italic;
    color: var(--ink-faint);
    padding: 12px 0;
    text-align: center;
    font-size: 15px;
  }
  .list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 12px 14px;
    background: var(--parchment);
    border: 1px solid var(--rule-hair);
    border-left: 2px solid var(--indigo);
    border-radius: 2px;
  }
  .list-row .title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 16px;
  }
  .list-row .sub {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.06em;
  }
  .list-row .meta {
    text-align: right;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--indigo);
  }
}

@layer ornament {
  /* lotus + banyan SVG seal at masthead */
  .seal {
    width: 96px;
    height: 96px;
    transform: rotate(var(--seal-rotate));
    filter: drop-shadow(0 1px 0 oklch(40% 0.040 50 / 0.10));
    margin-inline: auto;
  }
  .seal-ring { stroke: var(--indigo); fill: none; stroke-width: 1; opacity: 0.7; }
  .seal-text { font-family: var(--mono); font-size: 6px; letter-spacing: 0.28em; fill: var(--indigo); }
  .seal-glyph { font-family: var(--hindi); font-size: 28px; fill: var(--indigo); }

  .ribbon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: var(--indigo);
    color: var(--parchment);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    position: relative;
  }
  .ribbon::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-left-color: var(--indigo);
    border-right: 0;
  }

  hr.rule {
    border: 0;
    border-top: 1px solid var(--rule-strong);
    margin: 4px 0;
  }
  hr.rule.indigo { border-top-color: var(--rule-indigo); }
  hr.rule.crimson { border-top-color: oklch(48% 0.180 25 / 0.32); }
}

@layer motion {
  @keyframes ink-bleed {
    0% { --ink-bleed: 0%; opacity: 0; transform: translateY(8px); }
    100% { --ink-bleed: 100%; opacity: 1; transform: translateY(0); }
  }
  .reveal {
    animation: ink-bleed 600ms var(--ease-stately) both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; transform: none; }
  }
}