/* ============================================================================
   exotic — story kit · css/kit/story-kit.css
   ----------------------------------------------------------------------------
   The standing component library (the keepers from the talking-history
   round, 2026-07-17). Pure components — no page layout in here. Builders
   live in js/kit/story-kit.js; live gallery in kit.html; usage guidance
   in .claude/skills/story-kit. Requires tokens.css (+ ../base.css for the
   ramp custom props).

   Inventory:
     .ths-title    chapter/section card (kicker · display name · lit rule)
     .ths-big      one oversized counting numeral + caption
     .ths-rows     staggered event cards (glyph · label/sub · value ·
                   ghost/dashed voice · dim state · weight bars)
     .ths-duo      two facing stat cells
     .ths-spine    commit dots on one thread (me solid · exchange dashed)
     .ths-path     price path (wipe-in line, liq/alt dashed levels, pills)
     .th-ev        ledger rail row (commit thread timeline, done/now)
     .th-line      word-stream prose (.w spans, .n mono numbers)
     .th-qtag      "you asked" tag
     .th-chip(s)   suggestion chips (+ .cont emphasis arrow)
     .th-form      the talk composer (pill input + send)
     .th-prog      story progress segments (meridian fill)
   ========================================================================== */

/* ============================ stage frame ============================ */
/* a .ths is one stage's content; hosts absolutely-position them so two can
   crossfade. Standalone use (gallery, inline): add .ths-flow for normal flow */
.ths{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0; text-align:center;
  overflow:hidden; opacity:0; transform:translateY(12px);
  transition:opacity .38s var(--ease-out), transform .38s var(--ease-emph); }
.ths.in{ opacity:1; transform:none; }
.ths.out{ opacity:0; transform:translateY(-8px); transition-duration:.22s; }
.ths.ths-flow{ position:relative; inset:auto; }

/* ============================ title card ============================ */
.ths-title .k{ font-family:var(--font-num); font-size:11px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--muted); }
.ths-title .n{ font-family:var(--font-display); font-size:clamp(30px,5vw,44px); font-weight:600;
  letter-spacing:-0.02em; color:var(--ink); margin-top:10px; line-height:1.08; text-wrap:balance; }
.ths-title .rule{ width:64px; height:2px; margin:18px auto 0; border-radius:1px;
  background:linear-gradient(90deg,var(--g2),var(--g4),var(--g6));
  transform:scaleX(0); transition:transform .7s var(--ease-emph) .25s; }
.ths.in.ths-title .rule, .ths.in .ths-title .rule{ transform:none; }

/* ============================ big numeral ============================ */
.ths-big .v{ font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:clamp(48px,9vw,78px); font-weight:600; letter-spacing:-0.04em; color:var(--ink); line-height:1; }
.ths-big .v.up{ color:var(--up); } .ths-big .v.down{ color:var(--down); }
.ths-big .c{ font-size:13px; color:var(--muted); margin-top:12px; letter-spacing:.01em; }

/* ============================ row cards ============================ */
.ths-rows{ align-items:stretch; justify-content:safe center; overflow-y:auto;
  padding:8px; scrollbar-width:none; }
.ths-rows::-webkit-scrollbar{ display:none; }
.ths-rows .rw{ display:flex; align-items:center; gap:12px; text-align:left;
  padding:10px 14px; margin:3px auto; width:100%; max-width:440px;
  background:var(--surface); border:1px solid var(--hairline); border-radius:14px;
  box-shadow:var(--crisp); opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-emph); }
.ths-rows .rw.on{ opacity:1; transform:none; }
.ths-rows .rw.dim{ opacity:.45; }
.ths-rows .rw.ghost{ background:var(--bg-sunken); border-style:dashed; box-shadow:none; }
.ths-rows .rw .g{ flex:0 0 26px; height:26px; display:grid; place-items:center;
  font-family:var(--font-num); font-size:12px; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--hairline-2); border-radius:50%; }
.ths-rows .rw.ghost .g{ border-style:dashed; background:none; color:var(--muted); }
.ths-rows .rw .l{ flex:1; min-width:0; font-size:13px; font-weight:500; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ths-rows .rw .l small{ display:block; font-family:var(--font-num); font-size:10px;
  color:var(--muted); font-weight:400; margin-top:1px; letter-spacing:.03em; }
.ths-rows .rw .v{ font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:13px; color:var(--ink); white-space:nowrap; }
.ths-rows .rw .v.up{ color:var(--up); } .ths-rows .rw .v.down{ color:var(--down); }
.ths-rows .rw .v.mut{ color:var(--muted); }
.ths-rows .rw .wb{ position:absolute; left:14px; right:14px; bottom:5px; height:2px;
  border-radius:1px; background:var(--hairline-2); overflow:hidden; }
.ths-rows .rw .wb i{ display:block; height:100%; width:calc(var(--w) * 100%);
  background:linear-gradient(90deg,var(--g3),var(--g4)); transform:scaleX(0);
  transform-origin:left; transition:transform .6s var(--ease-out) .2s; }
.ths-rows .rw.bar{ position:relative; padding-bottom:14px; }
.ths-rows .rw.on .wb i{ transform:none; }
.ths-rows .cap{ font-size:12px; color:var(--muted); margin-top:10px; }

/* ============================ facing stats ============================ */
.ths-duo{ flex-direction:row; gap:14px; align-items:center; justify-content:center; }
.ths-duo .cell{ flex:0 1 220px; min-height:150px; display:flex; flex-direction:column;
  justify-content:center; padding:22px 18px; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--rad-3); box-shadow:var(--crisp);
  opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-emph); }
.ths-duo .cell.on{ opacity:1; transform:none; }
.ths-duo .cell:nth-child(2){ transition-delay:.08s; }
.ths-duo .cell .v{ font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:clamp(26px,4.5vw,36px); font-weight:600; letter-spacing:-0.03em; color:var(--ink); line-height:1.05; }
.ths-duo .cell .v.up{ color:var(--up); } .ths-duo .cell .v.down{ color:var(--down); }
.ths-duo .cell .l{ font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.45; text-wrap:balance; }
@media (max-width:400px){ .ths-duo{ flex-direction:column; align-items:center; }
  .ths-duo .cell{ flex-basis:auto; width:100%; max-width:260px; min-height:0; padding:14px; } }

/* ============================ price path ============================ */
.ths-path{ width:100%; }
.ths-path .plot{ position:relative; width:100%; max-width:520px; height:min(240px,32vh);
  margin:0 auto; }
.ths-path svg{ width:100%; height:100%; display:block; overflow:visible; }
/* dash-based draws fight non-scaling-stroke on stretched viewBoxes (see
   motion.css) — the line WIPES in via clip-path instead, left to right */
.ths-path .px{ fill:none; stroke:url(#thRamp); stroke-width:2;
  stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke;
  clip-path:inset(-6px 100% -6px -6px); }
.ths-path .px.s1{ transition:clip-path 1.6s var(--ease-inout) .2s; }
.ths-path .px.s2{ transition:clip-path .9s var(--ease-inout) .1s; }
.ths-path .px.vis{ clip-path:inset(-6px -6px -6px -6px); }
.ths-path .gapline{ stroke:var(--muted); stroke-width:1; stroke-dasharray:3 4;
  vector-effect:non-scaling-stroke; opacity:0; transition:opacity .4s ease; }
.ths-path .liq{ stroke:var(--down); stroke-width:1; stroke-dasharray:4 4;
  vector-effect:non-scaling-stroke; opacity:0; transition:opacity .5s ease; }
.ths-path .alt{ stroke:var(--up); stroke-width:1; stroke-dasharray:4 4;
  vector-effect:non-scaling-stroke; opacity:0; transition:opacity .5s ease; }
.ths-path .lb{ position:absolute; font-family:var(--font-num); font-size:10px;
  white-space:nowrap; pointer-events:none; padding:2px 8px; border-radius:var(--rad-pill);
  background:color-mix(in oklab,var(--bg) 88%,transparent); border:1px solid var(--hairline-2);
  color:var(--muted); opacity:0; transform:translateY(calc(-50% + 5px));
  transition:opacity .4s ease, transform .4s var(--ease-out); }
.ths-path .lb.liq-lb{ color:var(--down); border-color:color-mix(in oklab,var(--down) 30%,transparent); }
.ths-path .lb.alt-lb{ color:var(--up); border-color:color-mix(in oklab,var(--up) 30%,transparent); }
.ths-path .pt{ position:absolute; width:9px; height:9px; border-radius:50%;
  transform:translate(-50%,-50%) scale(.4); background:var(--ink-2);
  border:2px solid var(--bg); transition:transform .4s var(--ease-emph); }
.ths-path .pt.end{ background:var(--down); }
.ths-path .pt.up{ background:var(--up); }
.ths-path .lb.vis, .ths-path .liq.vis, .ths-path .alt.vis, .ths-path .gapline.vis{ opacity:1; }
.ths-path .lb.vis{ transform:translateY(-50%); }
.ths-path .pt.vis{ transform:translate(-50%,-50%) scale(1); }
.ths-path .xd{ display:flex; justify-content:space-between; width:100%; max-width:520px;
  margin:10px auto 0; font-family:var(--font-num); font-size:10px; color:var(--muted); }
.ths-path .xd span{ min-width:40px; }
.ths-path .xd span:last-child{ text-align:right; }

/* ============================ commit spine ============================ */
.ths-spine{ width:100%; }
.ths-spine .th-thread{ position:relative; display:flex; justify-content:space-between;
  align-items:center; width:100%; max-width:520px; margin:0 auto; padding:26px 4px; }
.ths-spine .th-thread::before{ content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--hairline); }
.ths-spine .cm{ position:relative; z-index:1; width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--ink-2);
  transform:scale(.4); transition:transform .35s var(--ease-emph); }
.ths-spine .cm.ex{ border-style:dashed; border-color:var(--muted); }
.ths-spine .cm.on{ transform:scale(1); }
.ths-spine .cm.hot{ border-color:var(--down); background:var(--down-bg); }
.ths-spine .cm.win{ border-color:var(--up); background:var(--up-bg); }
.ths-spine .cm .tip{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-family:var(--font-num); font-size:9.5px; white-space:nowrap; color:var(--muted);
  opacity:0; transition:opacity .4s ease .15s; }
.ths-spine .cm.hot .tip{ color:var(--down); } .ths-spine .cm.win .tip{ color:var(--up); }
.ths-spine.marks .cm .tip{ opacity:1; }
.ths-spine .xd{ display:flex; justify-content:space-between; width:100%; max-width:520px;
  margin:2px auto 0; font-family:var(--font-num); font-size:10px; color:var(--muted); }

/* ============================ ledger rail rows ============================ */
/* optional .amt cell (mono, signed, direction-colored) carries the classic
   timeline's collapsed detail — the rail reads as the table of contents AND
   the unexpanded ledger at once */
.th-ev{ position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) auto;
  gap:0 9px; align-items:baseline;
  padding:8px 8px; border-radius:10px; cursor:pointer; border:0; background:none;
  width:100%; text-align:left; transition:background var(--t1); }
.th-ev:hover{ background:var(--surface); }
.th-ev::before{ content:""; position:absolute; left:18.5px; top:0; bottom:0; width:1px;
  background:var(--hairline); }
.th-ev:first-child::before{ top:15px; } .th-ev:last-child::before{ bottom:auto; height:15px; }
.th-ev .dot{ position:relative; z-index:1; width:9px; height:9px; margin:4px auto 0;
  align-self:start; border-radius:50%; background:var(--bg); border:1.5px solid var(--muted);
  transition:border-color var(--t1), background var(--t1), box-shadow .3s ease; }
.th-ev.ex .dot{ border-style:dashed; }
.th-ev .t{ font-size:12px; font-weight:500; color:var(--muted); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color var(--t1); }
.th-ev .amt{ grid-column:3; font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:11.5px; color:var(--ink-2); white-space:nowrap; transition:color var(--t1); }
.th-ev .amt.up{ color:var(--up); } .th-ev .amt.down{ color:var(--down); }
.th-ev .amt.mut{ color:var(--muted); opacity:.8; }
.th-ev .d{ grid-column:2 / -1; font-family:var(--font-num); font-size:9.5px; color:var(--muted);
  opacity:.75; letter-spacing:.04em; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.th-ev.done .dot{ background:var(--ink-2); border-color:var(--ink-2); }
.th-ev.done.ex .dot{ background:var(--bg); }
.th-ev.done .t{ color:var(--ink-2); }
.th-ev.now .dot{ background:var(--g4); border-color:var(--g4);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--g4) 22%,transparent); }
.th-ev.now .t{ color:var(--ink); font-weight:600; }

/* ============================ word-stream prose ============================ */
.th-line{ font-family:var(--font-display); font-size:clamp(16.5px,2.2vw,19px);
  line-height:1.5; letter-spacing:-0.005em; color:var(--ink); text-wrap:pretty;
  transition:opacity .5s ease, filter .5s ease; }
.th-line.past{ opacity:.34; filter:blur(0.2px); font-size:clamp(14px,1.9vw,16px); }
.th-line .w{ opacity:0; filter:blur(4px); display:inline;
  transition:opacity .24s ease, filter .3s ease; }
.th-line .w.on{ opacity:1; filter:blur(0); }
.th-line b{ font-weight:650; }
.th-line .n{ font-family:var(--font-num); font-size:.92em; font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em; }
.th-line .n.up{ color:var(--up); } .th-line .n.down{ color:var(--down); }

/* ============================ you-asked tag ============================ */
.th-qtag{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  font-size:12px; color:var(--ink-2); background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--rad-pill); padding:6px 13px;
  box-shadow:var(--crisp); }
.th-qtag::before{ content:"you asked"; font-family:var(--font-num); font-size:9px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }

/* ============================ chips + composer ============================ */
.th-chips{ display:flex; gap:7px; overflow-x:auto; padding:4px 2px 9px;
  scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
.th-chips::-webkit-scrollbar{ display:none; }
.th-chip{ flex:0 0 auto; font-size:12px; color:var(--ink-2); background:var(--surface);
  border:1px solid var(--hairline-2); border-radius:var(--rad-pill); padding:8px 14px;
  cursor:pointer; box-shadow:var(--crisp); white-space:nowrap; touch-action:manipulation;
  transition:color var(--t1), border-color var(--t1), transform .15s var(--ease-out); }
.th-chip:hover{ color:var(--ink); border-color:var(--hairline); }
.th-chip:active{ transform:scale(.96); }
.th-chip.cont{ color:var(--ink); font-weight:600; border-color:var(--hairline);
  padding-right:16px; }
.th-chip.cont::after{ content:"→"; margin-left:6px; color:var(--muted); }
.th-form{ display:flex; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--hairline); border-radius:var(--rad-pill);
  padding:5px 5px 5px 18px; box-shadow:var(--elev-1);
  transition:border-color var(--t1), box-shadow var(--t1); }
.th-form:focus-within{ border-color:color-mix(in oklab,var(--g3) 45%,var(--hairline));
  box-shadow:0 0 0 3px color-mix(in oklab,var(--g3) 14%,transparent); }
.th-form input{ flex:1; min-width:0; border:0; background:none; outline:none;
  font-family:var(--font-display); font-size:14px; color:var(--ink); padding:9px 0; }
.th-form input::placeholder{ color:var(--muted); }
.th-send{ flex:0 0 38px; height:38px; display:grid; place-items:center; border:0;
  border-radius:50%; cursor:pointer; background:var(--ink); color:var(--bg);
  touch-action:manipulation; transition:transform .15s var(--ease-out), opacity var(--t1); }
.th-send:active{ transform:scale(.92); }
.th-send svg{ width:16px; height:16px; }
/* the quiet play: an icon-only sibling of send — narrate is a peer of ask,
   not a page-level shout */
.th-playic{ flex:0 0 38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--hairline-2); border-radius:50%; cursor:pointer;
  background:none; color:var(--ink-2); touch-action:manipulation;
  transition:color var(--t1), border-color var(--t1), background var(--t1),
    transform .15s var(--ease-out); }
.th-playic:hover{ color:var(--ink); border-color:var(--hairline); background:var(--surface); }
.th-playic:active{ transform:scale(.92); }
.th-playic svg{ width:17px; height:17px; }

/* ============================ progress segments ============================ */
.th-prog{ display:flex; gap:5px; }
.th-prog .seg{ flex:1; height:14px; border:0; padding:5px 0; background:none; cursor:pointer; }
/* width:100% + font-style: buttons shrink-to-fit block children in Chrome,
   and the track is an <i> */
.th-prog .seg i{ display:block; width:100%; height:4px; border-radius:2px;
  font-style:normal; background:color-mix(in oklab,var(--ink) 11%,transparent);
  overflow:hidden; position:relative; }
.th-prog .seg i::after{ content:""; position:absolute; inset:0; transform:scaleX(var(--p,0));
  transform-origin:left; border-radius:2px;
  background:linear-gradient(90deg,var(--g2),var(--g3),var(--g4));
  transition:transform .45s var(--ease-out); }
.th-prog .seg.done i::after{ --p:1; }

/* ============================ reduced motion ============================ */
@media (prefers-reduced-motion:reduce){
  .ths, .ths.in, .ths.out{ transition:opacity .2s ease; transform:none; }
  .th-line .w{ transition:none; filter:none; }
  .ths-rows .rw, .ths-duo .cell, .ths-spine .cm{ transition:opacity .2s ease; transform:none; }
  .ths-path .px{ transition:none; clip-path:none; }
  .th-prog .seg i::after{ transition:none; }
}