/* ═══════════════════════════════════════════════════════════════════════
   KOI POND — FUNNEL DESIGN SYSTEM (quiz.html; checkout adopts via paywall)
   Source of truth: redesign/03-BRANDBOOK.md. If a screen needs a value that
   isn't here, the brandbook is wrong — change it there first, then here.
   Physics: one accent (CTA · selected · progress), 3 type levels, headline
   top / answers vertically centered (Headway) / CTA slot pinned, fixed chrome.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* type */
  --fn-font-h:'Inter',sans-serif;           /* headlines — matches Headway (one family) */
  --fn-font-b:'Inter',sans-serif;           /* everything else, 400/600 */
  --fn-h-size:clamp(24px,6.6vw,28px);
  /* color — light (surface) */
  --fn-page:#FAF7EE;
  --fn-ink:#171410;
  --fn-accent:#FF6B1E;
  --fn-accent-down:#E85A10;
  --fn-tint:#FFF1E8;
  /* surface vars — flipped by .th-deep so components auto-adapt */
  --s-card:#FFFFFF;
  --s-ink:var(--fn-ink);
  --s-ink2:rgba(23,20,16,.60);
  --s-ink3:rgba(23,20,16,.42);
  --s-line:rgba(23,20,16,.12);
  /* color — dark (depth); matches --pw-abyss so quiz dark = paywall dark */
  --fn-deep:#05100E;
  --fn-deep-2:#0E241E;
  /* geometry */
  --fn-r:12px;            /* the ONE radius (cards, buttons, inputs) */
  --fn-side:20px;         /* the ONE side margin */
  --fn-gap:10px;
  --fn-chrome:56px;
  --fn-col:440px;         /* content column */
  /* motion */
  --fn-dur:200ms;
  --fn-ease:cubic-bezier(.2,0,0,1);
  --fn-slide:28px;
}
.th-deep{
  --s-card:rgba(255,255,255,.06);
  --s-ink:#FFFFFF;
  --s-ink2:rgba(255,255,255,.64);
  --s-ink3:rgba(255,255,255,.42);
  --s-line:rgba(255,255,255,.14);
  background:var(--fn-deep);
}

/* ── type levels ── */
.fn-h{font:700 var(--fn-h-size)/1.22 var(--fn-font-h);letter-spacing:-.02em;color:var(--s-ink);margin:0;text-wrap:balance}
.fn-h em{font-style:normal;color:var(--fn-accent)}   /* ONE aspiration word max */
.fn-body{font:400 16px/1.5 var(--fn-font-b);color:var(--s-ink2);margin:0}
.fn-small{font:400 13px/1.45 var(--fn-font-b);color:var(--s-ink3);margin:0}
.fn-small a{color:inherit;text-decoration:underline}
.fn-micro{font:600 11px/1 var(--fn-font-b);letter-spacing:.1em;text-transform:uppercase;color:var(--s-ink3);margin:0}

/* ── screen shell: top-anchored CENTERED headline (same layout every screen),
   CENTERED answers (Headway), bottom-anchored actions ── */
/* The headline block (.sh-head) sits INSIDE the centered body: headline +
   answers travel as one composition — no dead gap between them on tall
   viewports. 30px body top padding clears the 3px bar + fixed section-label
   line under the chrome. */
.sh-head{text-align:center;margin-bottom:20px}
.sh-body .inner,.sh-foot .inner{max-width:var(--fn-col);margin:0 auto;width:100%}
.sh-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:safe center;
  overflow-y:auto;padding:30px var(--fn-side) 0;scrollbar-width:thin;scrollbar-color:rgba(23,20,16,.18) transparent}
.sh-body.top{justify-content:flex-start}          /* loader: stage list pins under the headline */
.sh-body::-webkit-scrollbar{width:5px}
.sh-foot{flex-shrink:0;padding:12px var(--fn-side) max(16px,env(safe-area-inset-bottom))}

/* ── primary CTA: identical on every screen; slot never moves ── */
.fn-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;
  background:var(--fn-accent);color:var(--fn-ink);font:600 16px/1 var(--fn-font-b);
  border:none;border-radius:var(--fn-r);cursor:pointer;text-decoration:none;
  transition:background 80ms,transform 80ms;-webkit-tap-highlight-color:transparent}
.fn-cta:hover{background:var(--fn-accent-down)}
.fn-cta:active{transform:scale(.98);background:var(--fn-accent-down)}
.fn-cta:disabled{background:var(--fn-tint);color:var(--s-ink3);cursor:not-allowed;transform:none}
.th-deep .fn-cta:disabled{background:rgba(255,255,255,.08);color:rgba(255,255,255,.35)}

/* ── answer card (single-select) — tap advances, no radios, no chips ── */
.fn-opt{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 18px;
  background:var(--s-card);border:1.5px solid var(--s-line);border-radius:var(--fn-r);
  font:600 15px/1.35 var(--fn-font-b);color:var(--s-ink);text-align:left;cursor:pointer;
  transition:border-color 80ms,background 80ms,transform 80ms;-webkit-tap-highlight-color:transparent}
.fn-opt+.fn-opt{margin-top:var(--fn-gap)}
.fn-opt:active{transform:scale(.98)}
.fn-opt .fn-ico{flex-shrink:0;width:22px;height:22px;color:var(--s-ink);display:flex;align-items:center;justify-content:center}
.fn-opt .fn-ico svg,.fn-opt .fn-ico [data-lucide]{width:22px;height:22px;stroke-width:1.9}
.fn-opt.sel{border-color:var(--fn-accent);background:var(--fn-tint)}
.th-deep .fn-opt.sel{background:rgba(255,107,30,.16)}
.fn-opt.sel .fn-ico{color:var(--fn-accent)}

/* ── multi-select chip: same card + square checkbox on the right ── */
.fn-chip-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--fn-gap)}
.fn-chip-grid.cols-1{grid-template-columns:1fr}
.fn-chip-grid .fn-opt+.fn-opt{margin-top:0}
.fn-chip{position:relative;display:flex;align-items:center;gap:10px;min-width:0;min-height:56px;padding:10px 14px;
  background:var(--s-card);border:1.5px solid var(--s-line);border-radius:var(--fn-r);
  font:600 15px/1.3 var(--fn-font-b);color:var(--s-ink);text-align:left;cursor:pointer;
  transition:border-color 80ms,background 80ms,transform 80ms;-webkit-tap-highlight-color:transparent}
.fn-chip:active{transform:scale(.98)}
.fn-chip .fn-ico{flex-shrink:0;width:20px;height:20px;color:var(--s-ink)}
.fn-chip .fn-ico svg,.fn-chip .fn-ico [data-lucide]{width:20px;height:20px;stroke-width:1.9}
.fn-chip .fn-chip-label{flex:1;min-width:0}
.fn-check{flex-shrink:0;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--s-line);
  display:flex;align-items:center;justify-content:center;transition:background 80ms,border-color 80ms}
.fn-check svg{display:none;width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fn-chip.sel{border-color:var(--fn-accent);background:var(--fn-tint)}
.fn-chip.sel .fn-check{background:var(--fn-accent);border-color:var(--fn-accent)}
.fn-chip.sel .fn-check svg{display:block}
.fn-chip.sel .fn-ico{color:var(--fn-accent)}

/* ── likert: ONE joined 5-cell segmented control, bottom-anchored ── */
.fn-likert{display:flex;width:100%;background:var(--s-card);border:1.5px solid var(--s-line);
  border-radius:var(--fn-r);overflow:hidden}
.fn-likert button{flex:1;min-height:68px;background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--s-ink);padding:0;
  transition:background 80ms,color 80ms;-webkit-tap-highlight-color:transparent}
.fn-likert button+button{border-left:1.5px solid var(--s-line)}
.fn-likert button:active{background:var(--fn-tint)}
.fn-likert button.sel{background:var(--fn-accent);color:#fff}
.fn-likert-ends{display:flex;justify-content:space-between;margin-top:8px}

/* ── chrome: back · logo · section stepper — identical every screen ──
   Height GROWS by the safe-area inset (padding-top inside a fixed 56px box
   collapsed the content strip on notched phones). The stepper row carries
   dashes ONLY — the caps section label sits in its own fixed line UNDER the
   chrome (Headway anatomy), so label width can never shift the dashes into
   the centered logo. */
#chrome{position:fixed;top:0;left:0;right:0;height:calc(var(--fn-chrome) + env(safe-area-inset-top));
  display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--fn-side);padding-top:env(safe-area-inset-top);z-index:50;pointer-events:none}
#chrome>*{pointer-events:auto}
#back-btn{display:flex;align-items:center;gap:6px;font:600 13px/1 var(--fn-font-b);color:rgba(23,20,16,.55);
  background:rgba(23,20,16,.05);border:none;cursor:pointer;padding:8px 12px;border-radius:999px;
  opacity:0;pointer-events:none;transition:opacity 150ms,background 80ms;min-height:44px}
#back-btn.show{opacity:1;pointer-events:auto}
#back-btn:hover{background:rgba(23,20,16,.09)}
#chrome-logo{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + var(--fn-chrome)/2);transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center;gap:7px}
#chrome-logo img{height:22px;width:22px;display:block}
#chrome-logo span{font:700 14px/1 var(--fn-font-h);letter-spacing:-.01em;color:var(--fn-ink);display:none}
body.at-start #chrome-logo span{display:inline}
body.on-deep #chrome-logo span{color:#fff}
#sec-step{display:flex;align-items:center;gap:8px;opacity:0;transition:opacity 150ms;pointer-events:none;white-space:nowrap}
#sec-step.show{opacity:1}
.sec-dots{display:flex;gap:5px}
.sec-dot{width:16px;height:4px;border-radius:2px;background:rgba(23,20,16,.13);transition:background 250ms}
.sec-dot.done{background:rgba(255,107,30,.6)}
.sec-dot.active{background:var(--fn-accent)}
/* Caps section label: its own fixed line under the chrome + progress bar,
   right-aligned beneath the dashes. Inherits #sec-step's opacity via
   visibility only — position is independent of the flex row. */
#sec-label{position:fixed;top:calc(env(safe-area-inset-top) + var(--fn-chrome) + 9px);right:var(--fn-side);
  font:600 11px/1 var(--fn-font-b);letter-spacing:.1em;text-transform:uppercase;color:rgba(23,20,16,.42);z-index:50}
/* chrome on the depth (dark) screens */
body.on-deep #back-btn{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65)}
body.on-deep #sec-label{color:rgba(255,255,255,.5)}
body.on-deep .sec-dot{background:rgba(255,255,255,.16)}
body.on-deep .sec-dot.done{background:rgba(255,107,30,.55)}
body.on-deep .sec-dot.active{background:var(--fn-accent)}
body.on-deep #prog-track{background:rgba(255,255,255,.1)}

/* ── progress: one thin bar, endowed start, no surges. Sits directly UNDER
   the chrome row (Headway) — not at the viewport's top edge, where it read
   as a stalled page-load bar. Hidden on the post-quiz surfaces. ── */
#prog-track{position:absolute;top:calc(env(safe-area-inset-top) + var(--fn-chrome));left:0;right:0;height:3px;
  background:rgba(23,20,16,.08);z-index:60;transition:opacity 200ms}
body.post-quiz #prog-track{opacity:0}
#prog-fill{height:100%;background:var(--fn-accent);border-radius:0 999px 999px 0;
  transition:width 250ms var(--fn-ease);width:0%}

/* ── inputs + consent ── */
.fn-input{width:100%;min-height:56px;padding:0 16px;font:400 16px/1.3 var(--fn-font-b);color:var(--s-ink);
  background:var(--s-card);border:1.5px solid var(--s-line);border-radius:var(--fn-r);outline:none;
  transition:border-color 80ms}
.fn-input:focus{border-color:var(--fn-accent)}
/* leading icon inside the input (email gate) */
.fn-input-wrap{position:relative}
.fn-input-wrap svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none}
.fn-input-wrap .fn-input{padding-left:44px}
.consent-row{display:flex;align-items:flex-start;gap:10px;margin-top:12px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.consent-box{flex-shrink:0;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--s-line);
  display:flex;align-items:center;justify-content:center;margin-top:1px;transition:background 80ms,border-color 80ms}
.consent-row.on .consent-box{background:var(--fn-accent);border-color:var(--fn-accent)}
.consent-chk{display:none}
.consent-row.on .consent-chk{display:block}
.consent-text{font:400 13px/1.45 var(--fn-font-b);color:var(--s-ink3)}
.consent-text a{color:var(--s-ink2);text-decoration:underline}

/* ── koi (mascot) — small, still, sparing ── */
.koi{display:block;flex-shrink:0;background-repeat:no-repeat;background-size:contain;background-position:center}
.koi-sm{width:72px;height:72px}.koi-md{width:96px;height:96px}.koi-lg{width:120px;height:120px}
.koi-curious{background-image:url('./koi/curious.png')}
.koi-shocked{background-image:url('./koi/shocked.png')}
.koi-sad{background-image:url('./koi/sad.png')}
.koi-angry{background-image:url('./koi/angry.png')}
.koi-dizzy{background-image:url('./koi/dizzy.png')}
.koi-happy{background-image:url('./koi/happy.png')}
.koi-sleepy{background-image:url('./koi/sleepy.png')}
.koi-neutral{background-image:url('./koi/neutral.png')}
.koi-amazed{background-image:url('./koi/amazed.png')}
@keyframes kFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.koi-float{animation:kFloat 3s ease-in-out infinite}
/* one quiet ripple behind the koi — the pond, not a light show */
.fn-ripple{position:relative}
.fn-ripple::before{content:'';position:absolute;left:50%;top:50%;width:150px;height:150px;
  transform:translate(-50%,-50%);border:1.5px solid var(--s-line);border-radius:50%;pointer-events:none}
.fn-ripple::after{content:'';position:absolute;left:50%;top:50%;width:210px;height:210px;
  transform:translate(-50%,-50%);border:1.5px solid rgba(23,20,16,.06);border-radius:50%;pointer-events:none}
/* tap the koi → a ripple rings out of the pond + a gentle bob (koiRipple wires
   this on every breather). User-initiated; the pond reacts to you, still not a
   light show — the ripple borrows the same neutral ring vocabulary, no accent. */
.koi-hop{cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:0}
@keyframes kBob{0%{transform:scale(1)}35%{transform:scale(1.09)}70%{transform:scale(.97)}100%{transform:scale(1)}}
.koi-bob{animation:kBob 440ms var(--fn-ease)}
.koi-ping{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1.5px solid rgba(23,20,16,.22);pointer-events:none;animation:kPing 640ms var(--fn-ease) forwards}
.th-deep .koi-ping{border-color:rgba(255,255,255,.28)}
@keyframes kPing{from{width:56px;height:56px;opacity:.55}to{width:236px;height:236px;opacity:0}}

/* ── entrance stagger (subtle, fast) ── */
@keyframes fnRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.rise{animation:fnRise 320ms var(--fn-ease) both}
.r1{animation-delay:0ms}.r2{animation-delay:40ms}.r3{animation-delay:90ms}.r4{animation-delay:140ms}.r5{animation-delay:180ms}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}