/* Fair Cache Explorer — plain CSS, no build step. */
:root {
  --ink: #1a2226;
  --muted: #586469;
  --paper: #f5f2eb;
  --paper-2: #faf8f2;
  --card: #fffdfa;
  --line: #d7d3ca;
  --accent: #2c7369;
  --accent-soft: #dcece7;
  --dark: #213236;
  /* policy colours: the only definition; app.js reads them for the SVG plots.
     Fairness-optimal teal darkened in v0.8 for >= 3:1 contrast on every background
     (4.2:1 on white, 3.5:1 on the experiment band #e3eee9). */
  --effOpt: #9a982e;
  --effLru: #b548a5;
  --fairOpt: #2a8a7f;
  /* Fairness-TTL is not computed or plotted: a neutral colour for its step 4 card and its
     reported Table 1 row in step 5 (paper cases only). */
  --fairTtl: #6d7f86;
  /* darker variants for text */
  --effOpt-ink: #66650f;
  --effLru-ink: #8e3482;
  --fairOpt-ink: #22695f;
  --fairTtl-ink: #4a5a60;
  /* providers in the A/B/C example */
  --pA: #327f75;
  --pA-soft: #e3f1ec;
  --pB: #b9561c; /* white text on it: 4.8:1 */
  --pB-soft: #fcede3;
  --pC: #7061bd;
  --pC-soft: #eeebfa;
  --title-red: #d0312d;
  --math: "STIX Two Text", "Cambria Math", Cambria, "Times New Roman", serif;
  --mono: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 Manrope, system-ui, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin-top: 0; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid #1d6fd1; outline-offset: 2px; }
code { font: 0.9em var(--mono); }

.shell { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.skip-link { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 10; }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- math (no MathJax: proper sub/sup in a serif face) ---------- */
.m, .m var, var.m { font-family: var(--math); letter-spacing: 0; }
var { font-style: italic; }
.m sub, .m sup, sub.m, sup.m { font-size: 0.72em; line-height: 0; font-style: normal; }
.m sub var, .m sup var { font-style: italic; }
.m sub sub { font-size: 0.85em; }
.sum { font-style: normal; font-size: 1.15em; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 0.15em; line-height: 1.15; }
.frac > span:first-child { border-bottom: 1px solid currentColor; padding: 0 0.2em; }
.frac > span:last-child { padding: 0 0.2em; }
.nowrap { white-space: nowrap; }
.eq { margin: 12px 0 14px; padding: 10px 14px; background: #f3f1ea; border-left: 3px solid var(--accent); font-size: 19px; line-height: 1.7; overflow-x: auto; }

/* ---------- header ---------- */
.hero { padding-top: 44px; padding-bottom: 28px; }
/* The paper's title and authors, as on its first page (∗ = equal contribution). */
.paper-ref { margin-bottom: 22px; }
.paper-ref p { margin: 0; }
.paper-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.paper-authors { margin-top: 2px !important; color: #34424a; font-size: 15px; }
.paper-note { margin-top: 2px !important; color: var(--muted); font-size: 12.5px; }
.paper-ref sup { font-size: 0.75em; line-height: 0; }
h1 { max-width: 860px; margin-bottom: 18px; font-size: clamp(2.3rem, 5.5vw, 4.4rem); line-height: 1.02; letter-spacing: -0.055em; }
/* Red for "fair" and "efficient": 4.5:1 on the page background, 3.2:1 on a dark #1a2226
   (the heading is large text, so 3:1 suffices there). */
h1 em { color: var(--title-red); font-style: normal; }

.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 700 11.5px/1.6 Manrope, sans-serif; letter-spacing: 0.01em; white-space: nowrap; vertical-align: 1px; border: 1px solid transparent; }
.tag-paper { background: #fde8d7; color: #8a3a08; border-color: #f0b48a; }
.tag-model { background: var(--accent-soft); color: #1d5b53; border-color: #a9cfc6; }
.tag-example { background: #ece9f7; color: #4a3f8f; border-color: #c9c1ec; }

/* ---------- step navigation ---------- */
.steps { position: sticky; top: 0; z-index: 5; background: rgba(245, 242, 235, 0.95); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); backdrop-filter: blur(4px); }
.steps ol { display: flex; gap: 4px 22px; margin-top: 0; margin-bottom: 0; padding-top: 10px; padding-bottom: 10px; list-style: none; overflow-x: auto; }
.steps a { display: inline-flex; align-items: center; gap: 7px; color: #44575a; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.steps a b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e4e1d8; font: 500 11px var(--mono); }
.steps a:hover, .steps a.current { color: var(--accent); }
.steps a.current b { background: var(--accent); color: #fff; }

/* ---------- generic step sections ---------- */
.step { padding-top: 50px; padding-bottom: 28px; }
.step + .step { border-top: 1px solid var(--line); }
.step-label { margin-bottom: 10px; color: #3c6e67; font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
h2 { margin-bottom: 16px; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.06; letter-spacing: -0.05em; }
.prose { max-width: 760px; color: #34424a; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 4px; }
/* A short note on its own line, smaller than the text around it (step 1's request rates). */
.prose .note { margin-top: -8px; color: var(--muted); font-size: 14px; }
dfn { font-style: normal; font-weight: 700; color: var(--ink); }

.figure { margin: 18px 0 20px; padding: 18px; background: var(--card); border: 1px solid var(--line); }
.figure-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.caption { margin: 14px 0 0; color: #4e5b60; font-size: 14px; line-height: 1.55; }
.btn { padding: 9px 14px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; }
.btn:hover { background: #235e56; }
.btn-quiet { background: transparent; color: var(--accent); }
.btn-quiet:hover { background: var(--accent-soft); }

/* ---------- A/B/C toy ---------- */
.toy { display: grid; grid-template-columns: 1fr; gap: 12px; }
.catalogues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.catalogue { padding: 12px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--pc); }
.catalogue header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin-bottom: 10px; }
.catalogue header b { font-size: 14px; }
.catalogue header span { color: var(--muted); font: 12px var(--mono); }
.objects { display: flex; gap: 6px; }
.obj { flex: 1; min-width: 0; padding: 8px 4px 7px; border: 1px solid transparent; background: var(--pc-soft); color: var(--ink); text-align: center; font: 500 13px var(--mono); position: relative; }
.obj small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.obj:hover { border-color: var(--pc); }
.obj.cached { border-color: var(--pc); box-shadow: inset 0 -4px 0 var(--pc); }
.obj.partial { box-shadow: inset 0 -4px 0 var(--pc); border-style: dashed; border-color: var(--pc); }
.obj.flash-hit { animation: flashHit 0.5s; }
.obj.flash-miss { animation: flashMiss 0.5s; }
@keyframes flashHit { 0% { background: #bfe5c9; } 100% { background: var(--pc-soft); } }
@keyframes flashMiss { 0% { background: #f6c6bd; } 100% { background: var(--pc-soft); } }
.pA { --pc: var(--pA); --pc-soft: var(--pA-soft); }
.pB { --pc: var(--pB); --pc-soft: var(--pB-soft); }
.pC { --pc: var(--pC); --pc-soft: var(--pC-soft); }

.cache-box { padding: 12px 14px; background: var(--dark); color: #fff; }
.cache-title { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: #dbe6e3; }
.cache-title span { font-weight: 500; color: #b8c9c5; }
.residency { position: relative; display: flex; height: 44px; background: repeating-linear-gradient(90deg, #3d5154 0 calc(25% - 3px), var(--dark) calc(25% - 3px) 25%); }
.res-seg { flex: none; display: grid; place-items: center; overflow: hidden; background: var(--pc); border-right: 2px solid var(--dark); color: #fff; font: 500 12px/1.2 var(--mono); text-align: center; white-space: nowrap; }
.res-seg small { display: block; font-size: 10px; opacity: 0.9; }
.cache-note { margin: 8px 0 0; color: #b8c9c5; font-size: 13px; }
@media (max-width: 760px) { .res-seg .res-time { display: none; } }
.cache-msg { min-height: 1.4em; margin: 8px 0 0; color: #f6d3a8; font-size: 13px; }
/* No reserved line while empty: step 2's cache box is then as tall as step 1's. */
.cache-msg:empty { min-height: 0; margin: 0; }

.fill-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Step 1: the send button, then the last request's outcome beside it (below it on narrow screens). */
.request-result { flex: 1 1 260px; margin: 0; padding: 9px 12px; background: #f1f0e8; font-size: 14px; }
.request-result.hit { background: #e1f2e5; }
.request-result.miss { background: #fbe4df; }
.toy-metrics { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 16px; }
.provider-bars { display: grid; gap: 8px; }
.pbar { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: 8px; font-size: 14px; }
.pbar-track { height: 16px; background: #ece9e1; position: relative; }
.pbar-fill { height: 100%; background: var(--pc); transition: width 0.25s; }
.pbar b { font: 500 14px var(--mono); text-align: right; }
.toy-numbers { display: grid; gap: 10px; align-content: start; }
.toy-numbers > div { padding: 10px 12px; background: #f3f1ea; }
.toy-numbers span, .toy-numbers small { display: block; color: var(--muted); font-size: 12px; }
.toy-numbers strong { display: block; margin: 2px 0; font: 500 24px var(--mono); }


/* ---------- step 3: two slides (headline, formula or figure, a line or two) ---------- */
.slide { margin-top: 20px; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.slide h3 { margin-bottom: 6px; font-size: 24px; letter-spacing: -0.03em; }
.slide p { font-size: 15px; color: #34424a; }
.card-num { margin-bottom: 4px; color: #3c6e67; font: 500 12px var(--mono); }
.informal { margin-bottom: 16px; font-size: 19px !important; color: var(--ink) !important; }
.eq-label { margin: 0 0 -6px; color: #3c6e67; font: 500 11px var(--mono) !important; letter-spacing: 0.08em; text-transform: uppercase; }
.eq .st { display: block; font-size: 0.86em; }
/* A superscript stacked over a subscript (H*_eff), as in the paper. */
.ss { display: inline-flex; flex-direction: column; vertical-align: 0.42em; line-height: 1; margin-right: 0.08em; }
.m .ss sup, .m .ss sub { font-size: 0.66em; line-height: 1.05; vertical-align: baseline; }
/* Fair problem: the fairness constraint on its own line, under "subject to". */
.eq .st-cont { padding-left: 5.2em; }
/* 3.1: the efficient problem >= the fair problem, side by side; in words, then formally.
   Each side is a two-column grid: "max" and "s.t." on the left, objective and constraints on the right. */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 0 22px; max-width: 840px; margin: 0 0 14px; }
.prob { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-content: start; gap: 4px 14px; padding: 14px 22px; background: #f3f1ea; border-top: 3px solid var(--accent); font-size: 19px; line-height: 1.45; overflow-x: auto; }
.prob .op { color: #3c6e67; }
.prob-words { font-size: 17px; }
.geq { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 26px; line-height: 1; background: var(--card); }
/* Symbol legend under the problems: two symbol/meaning pairs per row on wide screens. */
.legend-list.legend-wide { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); }
.factor-eq { display: inline-block; margin: 2px 0 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; }
/* Symbol legend next to the formulas: symbol, then a few words. */
.legend-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 14px; align-content: start; align-items: baseline; margin: 0; padding: 12px 14px; background: #f3f1ea; font-size: 14px; line-height: 1.45; }
.legend-list > div { display: contents; }
.legend-list dt { font-size: 16px; white-space: nowrap; }
.legend-list dd { margin: 0; color: #34424a; }
.factors { display: grid; gap: 12px; }
.factor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.factor-row .eq { margin: 4px 0; }
.factor-row p:last-child { margin: 0; }
.bx-panel { min-width: 0; }
.factor { min-width: 0; padding: 16px; background: #f8f6f0; border: 1px solid var(--line); }
.factor h4, .tradeoff-line h4 { margin-bottom: 6px; font-size: 16px; letter-spacing: -0.01em; }
.factor .eq { background: #efece3; }
.bx-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bx-readout { margin: 6px 0 0; padding: 10px 12px; background: var(--accent-soft); font-size: 15px; }
.tradeoff-line { margin-top: 12px; padding: 16px; background: #f8f6f0; border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.tradeoff-line p:last-child { margin-bottom: 0; }
/* The chain fairness rule => ... => H_fair, as wrapping chips. */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.chain li { padding: 3px 10px; background: #efece3; border: 1px solid var(--line); }
.chain li + li { position: relative; margin-left: 28px; }
.chain li + li::before { content: "⇒"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: var(--accent); font-family: var(--math); }
/* The full problem: each term with a brace and a name under it. */
.eq6 { line-height: 1.5; }
.eq6 .st { margin-top: 8px; }
/* Terms on one row, each brace and its name on the row below, so the two braces line up
   whatever the height of the term above them. */
.eq6-grid { display: grid; grid-template-columns: repeat(4, auto); grid-template-areas: "max t1 plus t2" ". b1 . b2"; justify-content: start; align-items: center; column-gap: 0.4em; }
.g-max { grid-area: max; } .g-t1 { grid-area: t1; } .g-plus { grid-area: plus; } .g-t2 { grid-area: t2; }
.g-b1 { grid-area: b1; } .g-b2 { grid-area: b2; }
.under { align-self: start; display: flex; flex-direction: column; }
/* The name may be wider than its term: negative margins keep it from widening the column. */
.ub-label { margin: 1px -4em 0; color: #3c6e67; font: 600 11.5px/1.3 Manrope, sans-serif; letter-spacing: 0.02em; text-align: center; white-space: nowrap; }
/* An under-brace from borders: two long arms with curled ends and a pointed middle. */
.brace { --bw: 1.4px; --r: 6px; display: flex; height: 11px; color: #3c6e67; }
.brace i { display: block; border: 0 solid currentColor; }
.brace i:nth-child(1), .brace i:nth-child(4) { flex: 1; align-self: flex-start; height: calc(50% + var(--bw) / 2); border-bottom-width: var(--bw); }
.brace i:nth-child(2), .brace i:nth-child(3) { flex: none; width: var(--r); align-self: flex-end; height: calc(50% + var(--bw) / 2); border-top-width: var(--bw); }
.brace i:nth-child(1) { border-left-width: var(--bw); border-bottom-left-radius: var(--r); }
.brace i:nth-child(2) { border-right-width: var(--bw); border-top-right-radius: var(--r); }
.brace i:nth-child(3) { border-left-width: var(--bw); border-top-left-radius: var(--r); }
.brace i:nth-child(4) { border-right-width: var(--bw); border-bottom-right-radius: var(--r); }
.full-opt .legend-list { margin: 4px 0 10px; background: #efece3; }
.full-opt .slide-line { margin: 0; }

/* ---------- policies ---------- */
.pol-effOpt { --pol: var(--effOpt); --pol-ink: var(--effOpt-ink); }
.pol-effLru { --pol: var(--effLru); --pol-ink: var(--effLru-ink); }
.pol-fairOpt { --pol: var(--fairOpt); --pol-ink: var(--fairOpt-ink); }
.pol-fairTtl { --pol: var(--fairTtl); --pol-ink: var(--fairTtl-ink); }
.dot { display: inline-block; width: 11px; height: 11px; margin-right: 7px; border-radius: 50%; background: var(--pol); vertical-align: 0; }
.policy-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.policy-card { padding: 18px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--pol); }
.policy-card h3 { margin-bottom: 10px; font-size: 18px; letter-spacing: -0.02em; }
.policy-card p { font-size: 14.5px; color: #34424a; }

/* ---------- experiment ---------- */
.experiment { margin-top: 20px; padding: 50px 0 56px; background: #e3eee9; border-top: 1px solid #c3d8d1; }
.experiment h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.lab { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 18px; margin-top: 22px; align-items: start; }
.controls { position: sticky; top: 60px; max-height: calc(100vh - 72px); overflow-y: auto; padding: 18px 18px 0; background: var(--card); border: 1px solid #c3d8d1; }
.plot2-panel { margin-top: 18px; }
.plot2-panel .chart { margin-top: 0; }
.controls h3, .results-head h3 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.presets { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 14px; }
.preset { padding: 4px 8px; border: 1px solid var(--line); background: #fff; color: #3a474c; font-size: 12.5px; font-weight: 700; line-height: 1.4; text-align: left; }
.preset:hover { border-color: var(--accent); }
.preset[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.control { display: block; margin-bottom: 14px; }
.control.size { margin-bottom: 4px; }
.control-top label { cursor: pointer; }
.control .num { width: 5.6em; padding: 1px 6px; border: 1px solid var(--line); background: #fff; color: var(--accent); font: 500 14px var(--mono); text-align: right; }
.control .num[aria-invalid="true"] { border-color: #c24a2c; color: #a23b1d; }
.size-help { margin: 2px 0 14px; }
.size-help.bad { color: #a23b1d; font-weight: 700; }
.dist { padding-top: 10px; border-top: 1px solid #e6e2d9; }
.dist select { padding: 2px 4px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 700 13px Manrope, sans-serif; }
.param { display: block; margin-top: 4px; }
.param .control-top { font-size: 13px; font-weight: 500; }
.dist-help { display: flex; align-items: flex-start; gap: 8px; margin-top: 2px; }
.spark { flex: none; width: 76px; height: 24px; margin-top: 2px; fill: var(--accent); }
.control-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; }
.control output { color: var(--accent); font: 500 14px var(--mono); white-space: nowrap; }
.control input[type="range"] { width: 100%; margin: 6px 0 2px; accent-color: var(--accent); }
.help { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.help .derived { display: block; color: #2f5d57; font-family: var(--mono); font-size: 12px; }
.dists { display: grid; gap: 6px; margin: 0 0 16px; padding: 10px 14px; background: rgba(255, 253, 250, 0.7); border-left: 3px solid var(--accent); }
.dists > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; }
.dists dt { font-weight: 700; }
.dists dd { margin: 0; }
.now .now-head { margin-bottom: 6px; }
.now .dot { width: 9px; height: 9px; margin-right: 4px; }
.now span[class^="pol-"] { margin-right: 6px; }
/* Live result summary: pinned to the bottom of the scrolling Workload panel on wide screens. */
.now { position: sticky; bottom: 0; z-index: 1; margin: 6px -18px 0; padding: 9px 18px 10px; background: #f3f1ea; border-top: 3px solid var(--fairOpt); font-size: 12.5px; line-height: 1.45; box-shadow: 0 -6px 10px rgba(255, 253, 250, 0.9); }
.now p { margin: 0; }
.now.loading > * { opacity: 0.5; }
.now.loading::before { content: "Computing…"; display: block; margin-bottom: 4px; font-weight: 700; color: var(--accent); }
.now p + p { margin-top: 4px; }
.now b { font: 500 14px var(--mono); }
.now a { font-weight: 700; }

.results { min-width: 0; padding: 22px; background: var(--card); border: 1px solid #c3d8d1; }
.results-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.results-head .tag { white-space: normal; border-radius: 12px; }
.status { color: var(--muted); font: 500 12px var(--mono); }
.results-body { transition: opacity 0.15s; }
.results.loading .results-body { opacity: 0.55; }
.results.stale .results-body { opacity: 0.35; filter: grayscale(0.6); }
.error { margin-bottom: 14px; padding: 12px 14px; background: #fbe4df; border-left: 4px solid #c24a2c; color: #5c1d0d; font-size: 14px; }
.error code { background: #fff; padding: 1px 5px; }
.table-wrap { overflow-x: auto; }
.policy-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.policy-table caption { margin-bottom: 6px; text-align: left; font-weight: 700; }
.policy-table th, .policy-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.policy-table th { color: var(--muted); font-size: 12px; }
.policy-table td.num { font: 500 15px var(--mono); white-space: nowrap; }
.policy-table td.pname { font-weight: 700; color: var(--pol-ink); white-space: nowrap; }
.hitbar { display: block; width: 100%; max-width: 120px; height: 5px; margin-top: 5px; background: #ece9e1; }
.hitbar i { display: block; height: 100%; background: var(--pol); }
.table-note { margin: 8px 0 0; color: #4e5b60; font-size: 13px; }

.chart { margin: 22px 0 0; }
.chart h4 { margin-bottom: 4px; font-size: 17px; letter-spacing: -0.02em; }
.plot-tag { margin-bottom: 6px; color: #4e5b60; font-size: 13px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0; font-size: 13px; font-weight: 700; }
.legend span { color: var(--pol-ink); }
/* Fairness-TTL is in the table only: its legend entry says so, with a hollow dot (no curve). */
.legend .legend-off { font-weight: 500; }
.legend .legend-off .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--pol); }
.plot-wrap { position: relative; }
.plot { display: block; width: 100%; overflow: visible; }
.plot:focus-visible { outline-offset: 4px; }
.plot text { font-family: Manrope, sans-serif; fill: #4e5b60; }
.plot .svg-math { font-family: var(--math); font-style: italic; font-size: 14px; font-weight: 400; }
.plot .svg-math-sub { font-family: var(--math); font-style: italic; font-weight: 400; }
.plot .tick { font-size: 11px; }
.plot .axis-title { font-size: 12px; font-weight: 700; fill: #3a474c; }
.plot .grid { stroke: #e6e2d9; }
.plot .axis { stroke: #8f9693; }
.plot .series { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.plot .guide { stroke: #26383a; stroke-dasharray: 3 3; }
.tip { position: absolute; z-index: 3; min-width: 180px; max-width: 280px; padding: 8px 10px; background: #1f2d30; color: #f2f5f4; font-size: 12.5px; line-height: 1.5; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.tip b { color: #fff; }
.tip .t-row { display: flex; justify-content: space-between; gap: 12px; }
.tip .t-row i { font-style: normal; font-family: var(--mono); }
.readout { min-height: 1.5em; margin: 6px 0 0; color: #2f4a4d; font-size: 13px; }
.chart .caption { margin-top: 6px; }
.zoom { margin-top: 16px; padding: 14px 14px 12px; background: #f6f4ee; border: 1px solid var(--line); }
.zoom h5 { margin: 0 0 6px; font-size: 15px; letter-spacing: -0.01em; }
.zoom-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.zoom-one { min-width: 0; }
.zoom-pair.single { grid-template-columns: 1fr; }
.zoom-sub { margin: 0 0 2px; min-height: 26px; font-size: 13px; font-weight: 700; color: #3a474c; }
.zoom label { font-size: 13px; font-weight: 700; color: #3a474c; }
.zoom input.num { width: 7.5em; margin: 0 4px; padding: 2px 6px; font: 500 13px var(--mono); border: 1px solid var(--line); background: #fff; }
.zoom #zoomBNote { color: var(--muted); font-weight: 500; }
.zoom .caption { margin-top: 4px; }
.plot .prefix-mark { stroke: var(--fairOpt-ink); stroke-width: 1.5; fill: none; }
.plot .prefix-label { font-size: 11.5px; font-weight: 700; fill: var(--fairOpt-ink); }
.zoom .plot .row-title { paint-order: stroke; stroke: #f6f4ee; stroke-width: 4px; stroke-linejoin: round; }

footer { padding-top: 26px; padding-bottom: 40px; color: var(--muted); font-size: 13px; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .lab { grid-template-columns: 1fr; }
  .controls { position: static; max-height: none; padding-bottom: 18px; }
  .now { position: static; margin: 4px 0 0; padding: 10px 12px; border-top: 0; border-left: 3px solid var(--fairOpt); box-shadow: none; }
  .policy-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .shell { padding-left: 16px; padding-right: 16px; }
  .hero { padding-top: 34px; }
  .step { padding-top: 38px; }
  .figure { padding: 14px; }
  .catalogues { grid-template-columns: 1fr; }
  .toy-metrics { grid-template-columns: 1fr; }
  .policy-cards { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .compare { grid-template-columns: minmax(0, 1fr); gap: 8px 0; }
  .prob { padding: 12px 14px; font-size: 17px; }
  .prob-words { font-size: 15.5px; }
  .geq { justify-self: center; width: 34px; height: 34px; font-size: 20px; }
  .legend-list.legend-wide { grid-template-columns: max-content minmax(0, 1fr); }
  .slide { padding: 16px 14px; }
  .factor, .tradeoff-line { padding: 12px; }
  .legend-list { gap: 6px 10px; padding: 10px; font-size: 13.5px; }
  .legend-list dt { font-size: 15px; }
  .dists > div { grid-template-columns: 1fr; gap: 0; }
  .bx-controls { grid-template-columns: 1fr; }
  .eq { font-size: 17px; padding: 8px 10px; }
  .eq6-grid { grid-template-columns: repeat(3, auto); grid-template-areas: "max max max" "t1 plus t2" "b1 . b2"; }
  .results { padding: 14px; }
  .controls { padding: 16px; }
  .policy-table thead { display: none; }
  .policy-table tr { display: grid; grid-template-columns: 1fr 5em 3.8em; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .policy-table td { padding: 2px 0; border-bottom: 0; }
  .policy-table td.num::before { display: block; color: var(--muted); font: 600 10.5px Manrope, sans-serif; }
  .policy-table td.num:nth-child(2)::before { content: "hit rate"; }
  .policy-table td.num:nth-child(3)::before { content: "CoV"; }
  .zoom-pair { grid-template-columns: 1fr; }
  .experiment { padding-top: 38px; }
}