/* HINDSIGHT app.css — shell: tokens, scale, page frame, atmosphere, nav, footer, border classes, motion.
   Build width 1920: 1 unit = 1 CSS px at 1920 = 100vw/1920 (1280–2560 scale in proportion). */
:root{
  --u: calc(100vw / 1920);
  /* colour (DESIGN.md §3) */
  --paper:#4B223C; --plum:#523249; --mauve:#6B4560; --plum-dark:#3D2437;
  --parchment:#EBD7C8; --parchment-warm:#EBCDBB; --ink:#3D1835; --on-dark:#FFF3F6;
  --lime:#88D81B; --gold:#FDC94E; --hairline:#895975; --selected-ring:#F7FF5E;
  --bg:var(--paper); --font-display:'Libertinus Serif Display','Libertinus Serif','Source Serif 4',Georgia,serif;
  --font-body:'Ysabeau Infant','Segoe UI',system-ui,sans-serif;
  --font-num:'Reddit Sans Condensed','Arial Narrow',sans-serif;
  --font-code:ui-monospace,'DejaVu Sans Mono',monospace;
  /* radii */
  --r-card:calc(16*var(--u)); --r-panel:calc(24*var(--u)); --r-pill:999px;
  /* BORDER TOKENS (BORDER_TABLE.md): width + colour per rule kind */
  --rule-hair-w:max(1px,calc(1*var(--u))); --rule-hair-c:var(--hairline);
  --rule-card-w:max(1px,calc(2*var(--u))); --rule-card-c:#774A66;
  --rule-select-w:max(2px,calc(3.3*var(--u))); --rule-select-c:var(--selected-ring);
  --rule-row-w:max(1px,calc(1*var(--u))); --rule-row-c:#C9AE9C;
  --rule-json-w:max(1px,calc(2.3*var(--u))); --rule-json-c:#996380; --rule-json-in-c:#764860;
  --rule-tool-w:max(1px,calc(2.3*var(--u))); --rule-tool-c:#6D425C;
  --rule-code-w:max(1px,calc(1.5*var(--u)));
  --rule-foot-w:max(1px,calc(1*var(--u))); --rule-foot-c:#efd9c8; --rule-cell-c:#8c667e;
  --rule-chip-w:max(1px,calc(1*var(--u)));
  --rule-rim-w:max(1px,calc(1.5*var(--u))); --rule-rim-c:#d19baf; --rule-nav-c:#f4f1f3;
  /* page frame (frame.json): gutters 64 @1920 */
  --gutter:calc(64*var(--u));
  /* motion family: archive / paper — one easing, one duration scale */
  --ease:cubic-bezier(.2,0,0,1); --dur-s:200ms; --dur-m:260ms; --dur-l:800ms;
  --fs-nav:max(12px,calc(15*var(--u)));
  --nav-h:calc(88*var(--u));
}
@media (max-width:1023px){:root{--u:calc(1024px/1920);--gutter:16px;--nav-h:auto}}
@media (max-width:767px){:root{--u:calc(390px/1920*2.4);--gutter:16px}}

html{background:var(--paper)}
body{position:relative;color:var(--on-dark);font-family:var(--font-body);font-size:max(12px,calc(17*var(--u)));background:var(--paper);overflow-x:hidden}
@media (max-width:1023px){body{font-size:15px}}
:where(button,input,select,textarea){border:0;outline:0;font:inherit;color:inherit;background:none;margin:0}
:where(a){text-decoration:none}
:where(button,[role=button],a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* ---------- PAGE ATMOSPHERE (DESIGN §3b) — one stack, every route ---------- */
body::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse calc(650*var(--u)) calc(400*var(--u)) at 50% calc(520*var(--u)),rgba(107,69,96,.55) 0%,rgba(107,69,96,0) 100%),
    linear-gradient(180deg,rgba(61,36,55,0) 0%,rgba(61,36,55,0) 50%,rgba(61,36,55,.4) 100%) 0 0/100% calc(1080*var(--u)) repeat-y,
    var(--paper)}
body::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .4  0 0 0 0 .45  0 0 0 .5 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>")}
.atm-lines{position:absolute;left:0;right:0;top:0;height:calc(900*var(--u));z-index:0;pointer-events:none;opacity:0;transition:opacity var(--dur-m) var(--ease);
  background:
    repeating-conic-gradient(from 200deg at 38% 42%,rgba(137,89,117,.20) 0 .35deg,transparent .35deg 4deg);
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 38% 45%,#000 0%,transparent 100%);mask-image:radial-gradient(ellipse 60% 70% at 38% 45%,#000 0%,transparent 100%)}
body[data-route="home"] .atm-lines,body[data-route="mcp"] .atm-lines{opacity:1}
.nav,main,.foot{position:relative;z-index:1}

/* ---------- NAV (chrome/nav.html, N4 — no CA control) ---------- */
.nav{height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 calc(64*var(--u));
  background:linear-gradient(180deg,#523249 0%,#523249f2 72%,#52324900 100%);color:#fff7ed;font-size:var(--fs-nav);letter-spacing:.01em;z-index:5}
.nav a{color:inherit;position:relative;transition:color var(--dur-s) var(--ease)}
.nav-side{display:flex;align-items:center}
.nav-left{gap:calc(34*var(--u))}.nav-right{justify-content:flex-end;gap:calc(28*var(--u))}
.nav-side a[href]::after{content:"";position:absolute;left:0;right:0;bottom:-.3em;height:max(2px,calc(2*var(--u)));background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-m) var(--ease)}
.nav-side a.is-active::after,.nav-side a[href]:hover::after{transform:scaleX(1)}
.nav a.is-active{color:#fff}
.nav a.is-soon{opacity:.8;cursor:default}
.nav-brand{display:flex;align-items:center;gap:calc(12*var(--u));font-family:var(--font-display);font-size:max(20px,calc(27*var(--u)));letter-spacing:.035em}
.nav-mark{width:max(46px,calc(48*var(--u)));height:max(46px,calc(48*var(--u)));object-fit:contain}
.nav-mobile{display:none}
@media (max-width:767px){
  .nav{height:auto;grid-template-columns:1fr;justify-items:center;padding:10px 0 0;background:#523249}
  .nav-brand{font-size:22px}.nav-mark{width:46px;height:46px}
  .nav-mobile{display:flex;width:100%;gap:22px;padding:10px 16px;font-size:15px;overflow-x:auto;white-space:nowrap}
}

/* ---------- PAGE FRAME: one container, shared by every route ---------- */
.page{width:100%;padding-inline:var(--gutter);min-height:60vh}
.page>*{max-width:none}

/* ---------- FOOTER (chrome/footer.html, F7) ---------- */
.foot{height:calc(78*var(--u));min-height:max(56px,calc(78*var(--u)));margin:calc(40*var(--u)) calc(24*var(--u)) calc(18*var(--u));display:grid;
  grid-template-columns:calc(220*var(--u)) calc(180*var(--u)) calc(150*var(--u)) calc(270*var(--u)) 1fr calc(130*var(--u)) calc(190*var(--u));
  align-items:stretch;border-radius:calc(18*var(--u));color:#fff7ed;background:#4a293f;font-size:max(12px,calc(13*var(--u)));overflow:hidden}
.foot-cell{display:flex;align-items:center;padding:0 calc(20*var(--u))}
.foot-title{padding:0 calc(26*var(--u));gap:calc(10*var(--u));font:400 max(18px,calc(25*var(--u))) var(--font-display)}
.foot-mark{width:max(46px,calc(48*var(--u)));height:max(46px,calc(48*var(--u)));object-fit:contain}
.foot b{font-weight:600;margin-left:.3em}
.foot-title span{margin:0}
.foot-social{justify-content:center;gap:calc(24*var(--u))}
.foot-social a{color:inherit}.foot a.is-soon{cursor:default}
@media (max-width:1023px){
  .foot{height:auto;grid-template-columns:1fr 1fr;margin:24px 12px 12px}
  .foot-cell{padding:12px 14px}
  .foot-src{grid-column:1/-1}
}

/* ---------- BORDER CLASSES (the only place border/outline is declared) ---------- */
.rule-foot{border:var(--rule-foot-w) solid var(--rule-foot-c)}
.rule-cell{border-right:var(--rule-foot-w) solid var(--rule-cell-c)}
@media (max-width:1023px){.rule-cell{border-bottom:var(--rule-foot-w) solid var(--rule-cell-c)}}
.rule-card{border:var(--rule-card-w) solid var(--rule-card-c);border-radius:var(--r-card)}
.rule-card.is-selected,.rule-card[aria-selected=true]{border:var(--rule-select-w) solid var(--rule-select-c)}
.rule-panel{border:var(--rule-hair-w) solid var(--rule-hair-c);border-radius:var(--r-card)}
.rule-input{border:var(--rule-hair-w) solid var(--rule-hair-c);border-radius:var(--r-pill)}
.rule-chip{border:var(--rule-chip-w) solid var(--rule-cell-c);border-radius:var(--r-pill)}
.rule-tab{border:var(--rule-hair-w) solid var(--rule-hair-c);border-radius:var(--r-pill)}
.rule-row{border-bottom:var(--rule-row-w) solid var(--rule-row-c)}
.rule-row:last-child:not(.tk-line):not(.ev-item){border-bottom:0} /* ledger/ticker rows: every row keeps its rule (mockup draws one under each row) */
.rule-divider-l{border-left:var(--rule-hair-w) solid var(--rule-hair-c)}
.rule-divider-b{border-bottom:var(--rule-hair-w) solid var(--rule-hair-c)}
.rule-json{border:var(--rule-json-w) solid var(--rule-json-c);border-radius:var(--r-panel)}
.rule-json-in{border:var(--rule-json-w) solid var(--rule-json-in-c);border-radius:var(--r-card)}
.rule-tool{border:var(--rule-tool-w) solid var(--rule-tool-c);border-radius:var(--r-card)}
/* nav-rule (DESIGN 4b): soft light fade under the nav, full width, 4.6 px @1920 */
.rule-nav::after{content:"";position:absolute;left:0;right:0;bottom:calc(-2*var(--u));height:max(3px,calc(4.6*var(--u)));pointer-events:none;
  background:linear-gradient(180deg,rgba(206,197,203,.55) 0%,rgba(228,224,227,.85) 50%,var(--rule-nav-c) 100%)}
@media (max-width:767px){.rule-nav::after{display:none}}
/* panel rim: light edge the mockup draws on plum/lime panels (tickers story, depth, compare) */
.rule-rim{border:var(--rule-rim-w) solid var(--rule-rim-c)}
.rule-rim.rim-lime{--rule-rim-c:#eee67a}
.rule-code{border:var(--rule-code-w) solid var(--rule-hair-c);border-radius:calc(14*var(--u))}

/* ---------- MOTION: "paper laid on the desk" ---------- */
/* signature 1: pencil trace — strokes draw outward from t0 (SVG [data-draw]); signature 2: ribbon pull — time axis pulled left→right (.hs-pull) */
main.is-leaving{opacity:0;transform:translateY(8px);transition:opacity var(--dur-s) var(--ease),transform var(--dur-s) var(--ease)}
main{transition:opacity var(--dur-s) var(--ease),transform var(--dur-s) var(--ease)}
.hs-sheet{opacity:0;transform:translateY(10px) rotate(-.35deg);box-shadow:0 0 0 rgba(20,6,16,0)}
.hs-sheet.hs-in{opacity:1;transform:none;transition:opacity var(--dur-l) var(--ease),transform var(--dur-l) var(--ease)}
.hs-pull{clip-path:inset(0 100% 0 0)}
.hs-pull.hs-in{clip-path:inset(0 0 0 0);transition:clip-path var(--dur-l) var(--ease)}
[data-grow]{transform-origin:50% 100%;transform:scaleY(0)}
[data-grow].hs-in{transform:scaleY(1);transition:transform 240ms var(--ease);transition-delay:calc(var(--i,0)*30ms)}
.hs-stamp{opacity:0;transform:scale(1.18) rotate(-6deg)}
.hs-stamp.hs-in{opacity:1;transform:none;transition:opacity var(--dur-m) var(--ease),transform 320ms cubic-bezier(.3,1.4,.5,1)}
[data-draw] path,[data-draw] line,[data-draw] polyline{stroke-dasharray:var(--len,1);stroke-dashoffset:var(--len,1)}
[data-draw].hs-in path,[data-draw].hs-in line,[data-draw].hs-in polyline{stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--ease);transition-delay:calc(var(--i,0)*20ms)}
.lift{transition:transform var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease)}
.lift:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,6,16,.35)}
[data-num]{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hs-sheet,.hs-pull,[data-grow],.hs-stamp{opacity:1!important;transform:none!important;clip-path:none!important}
  [data-draw] path,[data-draw] line,[data-draw] polyline{stroke-dashoffset:0!important}
}
@media (max-width:1023px){.page{overflow-x:clip}}