/* Shared styles for index.html and tracers.html. */
/* Tokens follow mockups/v4-polished.html. Spacing uses 4, 8, 12, 16, 24, 32, 48, 64 and 96 only.
   Archivo Narrow is for the H1 and chapter H2s, Archivo for everything else, IBM Plex Mono for code and file:line. */
:root{
  --bg:#f7f6f2; --ink:#121212; --ink2:#4b4b48; --ink3:#86847d; /* large decorative text only (the "or" in the H1) */ --rule:#e2dfd6; --rule2:#121212;
  --a:#d9662a; --b:#2b54d0;
  --fs-xs:13px; --fs-s:15px; --fs-base:17px; --fs-l:19px; --fs-xl:22px; --fs-2xl:32px;
  --fs-h1:clamp(56px,8.5vw,112px); --fs-h2:clamp(36px,5vw,60px);
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Archivo Narrow","Arial Narrow",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-base)/1.6 var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga"}
a{color:inherit}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
h1,h2,h3,h4{margin:0}
img{display:block;max-width:100%;height:auto}
code{font:var(--fs-xs) var(--mono)}
.wrap{max-width:1200px;margin:0 auto;padding-inline:48px}
@media (max-width:600px){.wrap{padding-inline:16px}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Parked off the left edge: a wide data table inside .sr-only would otherwise widen the page. */
table.sr-only{left:-10000px}

/* top bar */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 32px;min-height:64px;padding-block:12px;border-bottom:2px solid var(--rule2)}
.brand{font:700 var(--fs-s) var(--sans);letter-spacing:-.005em;text-decoration:none}
.top-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px}
.top nav{display:flex;flex-wrap:wrap;gap:8px 32px;font-size:var(--fs-s);color:var(--ink2)}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.top nav a[aria-current="page"]{color:var(--ink);font-weight:600}
#picker{display:flex;gap:8px}
#picker:empty{display:none}
#picker select{font:500 var(--fs-s) var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--rule);border-radius:2px;padding:4px 8px}
#picker select:hover{border-color:var(--ink)}
@media (max-width:600px){.top nav{gap:8px 16px}.top-r{gap:8px 16px}}

/* hero */
.hero{padding-block:64px 48px}
.hero h1{font:700 var(--fs-h1)/.88 var(--display);letter-spacing:-.02em;overflow-wrap:anywhere}
.hero h1 .a{color:var(--a)}
.hero h1 .b{color:var(--b)}
.hero h1 small{font:inherit;color:var(--ink3)}
.headline{margin:24px 0 0;max-width:24em;font:600 var(--fs-2xl)/1.25 var(--sans);letter-spacing:-.01em}
.headline:empty{display:none}
@media (max-width:600px){.headline{font-size:var(--fs-xl)}}
.dek{margin:16px 0 0;font-size:var(--fs-l);line-height:1.5;color:var(--ink2);max-width:36em}
.hero-chart{max-width:760px;margin-top:48px}
.hero-chart:empty{display:none}
.verdict{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:24px}
@media (max-width:600px){.verdict{grid-template-columns:minmax(0,1fr)}}
.verdict h3{font:700 var(--fs-s) var(--sans);padding-bottom:8px;border-bottom:2px solid var(--rule2)}
.verdict ul{list-style:none;margin:0;padding:0}
.verdict li{max-width:32em;padding:12px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-base)}
.which{border-top:2px solid var(--rule2);padding-block:48px 64px}
.which h2{font:700 var(--fs-2xl)/1.1 var(--sans);letter-spacing:-.01em}
/* question list: each question's number to remember, what it counts, the question and a one-line answer */
.qs{list-style:none;max-width:960px;margin:64px 0 0;padding:0;border-top:2px solid var(--rule2)}
.qs li{border-bottom:1px solid var(--rule)}
.qs a{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start;padding:24px 0;text-decoration:none}
.qs .stat{display:block;font:700 48px/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.qs .unit{display:block;margin-top:8px;font:500 var(--fs-s)/1.35 var(--sans);color:var(--ink2)}
.qs .q{padding-top:6px}
.qs b{display:block;font:600 var(--fs-l)/1.35 var(--sans)}
.qs .tt{display:block;margin-top:4px;font-size:var(--fs-base);line-height:1.5;color:var(--ink2)}
.qs a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:760px){.qs a{grid-template-columns:minmax(0,1fr);gap:8px}.qs .stat{font-size:40px}}
.qs.no-stats a{grid-template-columns:minmax(0,1fr);padding:16px 0}
.qs.no-stats .sw{display:none}
.qs.no-stats .q{padding-top:0}
.qs b{font-weight:600}

/* chapters */
.chapter{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-block:48px 64px;border-top:2px solid var(--rule2)}
/* one column, as wide as a chart, so a 760-unit chart draws at about its own size */
.chapter>div{min-width:0;max-width:760px}
@media (min-width:1100px){.chapter{padding-block:64px 96px}}
.num{font:700 var(--fs-s) var(--sans);color:var(--ink2);font-variant-numeric:tabular-nums}
.chapter h2{margin:12px 0 24px;font:700 var(--fs-h2)/.95 var(--display);letter-spacing:-.02em;text-transform:uppercase;max-width:13em;overflow-wrap:anywhere}
.ans{margin:0 0 48px;font-size:var(--fs-xl);line-height:1.5;max-width:32em;color:var(--ink)}
@media (max-width:600px){.ans{font-size:var(--fs-l)}}
.chapter h2 + figure{margin-top:48px}
.chapter h2 + .ans + figure{margin-top:0}

figure{margin:0}
.fig-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px}
.fig-h h3{font:600 var(--fs-base) var(--sans)}
.fig-h p{margin:0;font-size:var(--fs-s);color:var(--ink2)}
figcaption{max-width:32em;margin-top:12px;font-size:var(--fs-s);color:var(--ink2)}
figure svg{margin-top:12px}

.empty{margin:0;padding:24px 0;font-size:var(--fs-s);color:var(--ink2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
figure .empty{margin-top:12px}
.stagebar + .empty,.fig-h + .empty{margin-top:48px}
.sums + .empty{margin-top:32px}
figure:has(.empty) + .empty{display:none}
.none{color:var(--ink2)}

.stagebar{display:grid;grid-template-columns:110px minmax(0,1fr) 72px;gap:8px 16px;align-items:center;margin-top:48px;padding-top:24px;border-top:1px solid var(--rule);font-size:var(--fs-s)}
.stagebar + .stagebar{margin-top:24px}
.stagebar .lbl{font-weight:600}
.stagebar .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2)}
.stagebar .track{height:10px;background:#ebe8df;border-radius:2px;overflow:hidden}
.stagebar .track i{display:block;height:100%}
.stagebar .hd{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;font-size:var(--fs-s);color:var(--ink2);margin-bottom:4px}
.stagebar .note{grid-column:2/-1;font-size:var(--fs-s);color:var(--ink2)}
.stagebar .gap{grid-column:1/-1;margin-top:4px;font-size:var(--fs-s);font-weight:600}
@media (max-width:600px){.stagebar{grid-template-columns:88px minmax(0,1fr) 64px}}

.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:64px}
@media (max-width:760px){.paths{grid-template-columns:minmax(0,1fr);gap:32px}}
.path{min-width:0}
.path h4,.sum h4{margin:0 0 8px;font:700 var(--fs-s) var(--sans)}
.path h4 em,.sum h4 em{font-style:normal;font-weight:400;color:var(--ink2)}
.step{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 0;border-top:1px solid var(--rule)}
.step b{font-weight:600;font-size:var(--fs-base)}
.step code,.step .fn{grid-column:1/-1;color:var(--ink2);overflow-wrap:anywhere}
.step .fn{font-size:var(--fs-s)}
.src{font:var(--fs-xs) var(--mono);color:var(--ink2);text-decoration:none;white-space:nowrap}
.step .src{text-align:right}
.src:hover{color:var(--ink);text-decoration:underline}
.cross{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:var(--fs-s);color:var(--ink2);border-top:1px solid var(--rule)}
.cross::before{content:"";flex:none;width:16px;border-top:2px dashed currentColor}
.path details{margin-top:8px}
summary{cursor:pointer;font-size:var(--fs-s);font-weight:600;padding:8px 0}
summary:hover{text-decoration:underline;text-underline-offset:4px}

.facts{margin-top:64px;border-top:2px solid var(--rule2)}
.facts .r{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:32px;padding:16px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-base)}
.facts .r b{font-weight:600}
.facts .h{font-size:var(--fs-s);color:var(--ink2);padding:12px 0}
.facts .src{display:block;margin-top:4px;white-space:normal;overflow-wrap:anywhere}
@media (max-width:700px){
  .facts .r{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
  .facts .r b{grid-column:1/-1}
  .facts .r.h span:first-child{display:none}
}
.links{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:32px;font-size:var(--fs-s)}
.links a{font-weight:600;text-decoration-thickness:1px;text-underline-offset:4px}
.links a:hover{text-decoration-thickness:2px}

/* stage track on tracers.html: one column per stage, click to open its code path */
.stage-track{max-width:560px;margin:0 0 32px}

/* every stage */
.sec{border-top:2px solid var(--rule2);padding-block:48px 64px}
@media (min-width:900px){.sec{padding-block:64px 96px}}
.sec h2{font:700 var(--fs-2xl)/1.1 var(--sans);letter-spacing:-.01em}
.sec .lede{margin:12px 0 48px;font-size:var(--fs-l);line-height:1.5;color:var(--ink2);max-width:32em}
.stage-row{padding:32px 0;border-bottom:1px solid var(--rule);scroll-margin-top:24px}
.every-stage{border-top:2px solid var(--rule2)}
.stage-row:focus{outline:none}
.sums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:24px}
@media (max-width:760px){.sums{grid-template-columns:minmax(0,1fr);gap:24px}}
.sum p{margin:0;font-size:var(--fs-base);color:var(--ink2);max-width:32em}
.stage-row .stagebar{margin-top:32px}
.stage-row>details{margin-top:24px}
.stage-row .paths,.stage-row .facts{margin-top:24px}
.stage-row .paths + .facts{margin-top:48px}

/* tracers */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px;margin-top:48px}
@media (max-width:760px){.tools{grid-template-columns:minmax(0,1fr)}}
.tool{display:block;text-decoration:none}
.tool img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule)}
.tool h3{margin:16px 0 0;font:600 var(--fs-l)/1.35 var(--sans)}
.tool:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.tool p{max-width:32em;margin:8px 0 0;font-size:var(--fs-base);color:var(--ink2)}
.tool .go{display:block;margin-top:12px;font-size:var(--fs-s);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.how{max-width:32em;margin:32px 0 0;font-size:var(--fs-s);color:var(--ink2)}

/* method */
.spec{margin:0;border-top:2px solid var(--rule2)}
.spec>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:32px;padding:16px 0;border-bottom:1px solid var(--rule)}
@media (max-width:600px){.spec>div{grid-template-columns:minmax(0,1fr);gap:4px}}
.spec dt{font-weight:600;font-size:var(--fs-base)}
.spec dd{max-width:32em;margin:0;font-size:var(--fs-base);color:var(--ink2)}
.spec dd a{text-underline-offset:4px;text-decoration-thickness:1px}
.spec dd a:hover{text-decoration-thickness:2px}
.spec dd details{margin-top:4px}
.spec dd details p{margin:4px 0 0}

/* tracers.html heading */
.page-head{padding-block:64px 48px}
.page-head h1{font:700 var(--fs-h2)/.95 var(--display);letter-spacing:-.02em;overflow-wrap:anywhere}
.page-head p{margin:16px 0 0;max-width:36em;font-size:var(--fs-l);line-height:1.5;color:var(--ink2)}
.more{margin:32px 0 0;font-size:var(--fs-base);color:var(--ink2);max-width:32em}

footer{border-top:2px solid var(--rule2);padding-block:32px 64px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 48px;font-size:var(--fs-s);color:var(--ink2)}
@media (max-width:760px){footer{grid-template-columns:minmax(0,1fr)}}
footer p{margin:0;max-width:32em}

/* tooltip: shown on hover and on keyboard focus (page.js) */
.tip{position:fixed;z-index:10;max-width:min(24em,calc(100vw - 32px));padding:8px 12px;background:var(--ink);color:var(--bg);font:500 var(--fs-s)/1.4 var(--sans);border-radius:2px;pointer-events:none;overflow-wrap:anywhere}
.tip[hidden]{display:none}