/* Chicago console — Round 1b shared tokens + primitives only.
   Tokens are the diamond-equity brand kit verbatim (Paper Register minus red).
   Radius 0 by Marcel's decision, 2026-09-28. No box-shadow, no blur, no
   gradient glow anywhere in this file: depth is hairline, occlusion, and type. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Archivo:wght@500;600&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#0B0B10; --stone:#4A4A46; --mut:#9B9686;
  --paper:#F6F3EC; --bone:#F5F2EB; --cork:#EFEAE0; --slip:#FFFFFF;
  --line:#C9C4B6; --line-soft:#DCD5C5;
  --navy:#2E4A78; --navy-soft:#7E96BC; --accent:#1863DC; --accent-soft:#6FA0EA;
  --radius:0;
  --display:'Fraunces',Georgia,serif; --headline:'Archivo',Inter,sans-serif;
  --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease-enter:cubic-bezier(.16,1,.3,1); --ease-draw:cubic-bezier(.45,0,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--body);font-size:13px;line-height:1.45;color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(rgba(11,11,16,.028) .6px,transparent .6px),
    radial-gradient(rgba(255,255,255,.5) .5px,transparent .5px);
  background-size:5px 5px,7px 7px;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--navy);color:var(--slip)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:inherit;text-decoration:none}

/* paper tooth — texture, not ambience */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}

/* No shared shell. Each direction owns its chrome — that is the point of Round 1b. */

/* ── primitives ────────────────────────────────────────────────────── */
.kicker{font:500 9.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.h1{font:400 26px/1.05 var(--display);letter-spacing:-.015em;color:var(--ink);margin:0}
.hl{font:600 11px/1 var(--headline);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.num{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;line-height:.9}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.panel{background:var(--slip);border:1px solid var(--line-soft)}
.marks{position:relative}
.marks::before,.marks::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--line);pointer-events:none}
.marks::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
.marks::after{right:-7px;bottom:-7px;border-left:0;border-top:0}
.stack{position:relative;isolation:isolate}
.stack>*{position:relative;z-index:2}
.stack::before,.stack::after{content:"";position:absolute;inset:0;background:var(--paper);border:1px solid var(--line-soft);z-index:0;pointer-events:none}
.stack::before{translate:8px 9px;rotate:.5deg}
.stack::after{translate:16px 18px;rotate:-.35deg;z-index:-1;opacity:.72}
.stack--tight::before{translate:5px 6px;rotate:.3deg}
.stack--tight::after{translate:10px 12px;rotate:-.2deg}
.rule{border:0;border-top:1px solid var(--line-soft);margin:0}
.rule--double{border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:3px}
.stamp{display:inline-block;font:500 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
  border:1px solid var(--navy);outline:1px solid var(--navy);outline-offset:2px;padding:5px 8px;rotate:-4deg}
.stamp.acc{color:var(--accent);border-color:var(--accent);outline-color:var(--accent)}
.meter{height:3px;background:var(--line-soft);position:relative}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--navy)}
table{border-collapse:collapse;width:100%}
th{font:500 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);text-align:left;padding:0 16px 8px 0;border-bottom:1px solid var(--line)}
th:last-child,td:last-child{padding-right:0}
td{padding:9px 16px 9px 0;border-bottom:1px solid var(--line-soft);vertical-align:baseline}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
tr:hover td{background:var(--cork)}
.btn{display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1 var(--body);padding:9px 12px;border:1px solid var(--line);color:var(--ink);background:var(--slip)}
.btn:hover{border-color:var(--navy);color:var(--navy)}
.btn.solid{background:var(--navy);border-color:var(--navy);color:var(--slip)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent)}
.tone-acc{color:var(--accent)}
.tone-navy{color:var(--navy)}
.tone-mut{color:var(--mut)}
.empty{font-size:12px;color:var(--stone)}

/* ── choreography: staggered assembly, one named easing, no opacity-from-0 between views ── */
.step{--s:0;animation:enter .62s var(--ease-enter) both;animation-delay:calc(var(--s)*70ms)}
@keyframes enter{from{transform:translateY(8px);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){.step{animation:none}.draw{animation:none;clip-path:none}}