/* Research publication: /ru/ww3/ and the two pages behind it.
 *
 * Loaded IN ADDITION to main.css, never instead of it. The tokens, the font faces, the
 * topbar and the skip link all live there and are shared; this file adds the long-form
 * reading column, the claim labels, the data typography and the six figures.
 *
 * FOUR SEMANTIC COLOURS, and each one means one thing on every figure:
 *   --sem-violence   active violence, and an edge that is carrying something now
 *   --sem-commit     a security obligation, and an edge that is latent
 *   --sem-transmit   a physical or economic transmission channel
 *   --sem-deesc      de-escalation: a weakened or removed path, a working mechanism
 * Copper stays what it is everywhere else on this site — the brand accent, used for
 * interface affordances — and is never given a data meaning, because a reader who has
 * learned that copper means "link" on two other pages should not have to unlearn it here.
 *
 * Every one of the four is ALSO distinguishable without colour. Luminance alone would not
 * carry it (brick and green land within a few percent of each other in greyscale), so
 * each carries a border style as well: solid, dashed, dotted, double. That is what makes
 * the printed page and the colour-blind reading of it say the same thing as the screen.
 */

:root{
  --sem-violence:#9E2B14; --sem-violence-bg:#FAEDE9;
  --sem-commit:#1F4A5C;   --sem-commit-bg:#E8F0F3;
  --sem-transmit:#8A5A00; --sem-transmit-bg:#FAF2E2;
  --sem-deesc:#2F5D3A;    --sem-deesc-bg:#EAF2EC;
  --rail-w:220px;
  --col:70ch;
}

/* ===== shell ===== */
/* §22 forbids glassmorphism, and the shared bar is translucent with a 6px backdrop blur.
   The landing keeps its look; on a page arguing that precision should not be manufactured,
   a bar that smears the text under it is exactly the wrong signal. */
.ww3 .topbar{background:var(--paper);backdrop-filter:none}
.ww3{font-size:17.5px}
.ww3-body{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.ww3 .sec{padding-block:clamp(40px,6vh,72px);border-top:1px solid var(--hair)}
.ww3 .sec:first-child{border-top:0}
.sec-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.1rem}
.sec-num{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--muted);flex:none;min-width:2.4em}
.sec-title{font-weight:700;font-size:clamp(1.45rem,3vw,2.05rem);line-height:1.15;letter-spacing:-.02em;max-width:24ch}
.sec-lead{max-width:var(--col);font-size:clamp(1.06rem,1.6vw,1.22rem);color:var(--ink-2);margin-bottom:1.4rem;font-family:var(--serif);font-style:italic}
.sec-body{max-width:var(--col)}
.sec-body>p{margin-bottom:1.05em}
.sec-body>h3{font-size:1.06rem;font-weight:600;letter-spacing:.01em;margin:2.1em 0 .7em}
.arche-i h3{font-size:.95rem;font-weight:600;margin-bottom:.4em}

/* The pivot is the one place the page changes gear, so it is the one place the shell
 * changes with it: full-bleed rule above, heavier type, no number. */
.sec-pivot{border-top:3px solid var(--ink)}
.sec-pivot .sec-title{font-size:clamp(1.8rem,4.4vw,2.9rem)}
.sec-quiet .sec-body{max-width:var(--col)}

/* ===== hero ===== */
.ww3-hero{max-width:var(--maxw);margin-inline:auto;padding:clamp(48px,9vh,120px) var(--pad) clamp(32px,5vh,64px)}
.hero-eye{display:flex;flex-wrap:wrap;gap:.9em;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero-ser{color:var(--copper)}
.hero-h1{margin:.8em 0 0;font-weight:700;font-size:clamp(2rem,5.6vw,4rem);line-height:1.04;letter-spacing:-.03em;max-width:19ch}
.hero-sub{margin-top:.8em;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--ink-2)}
.hero-thesis{margin-top:1.6em;max-width:var(--col);font-size:clamp(1.02rem,1.5vw,1.14rem);border-left:3px solid var(--ink);padding-left:1em}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.6em 2.4em;margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--hair);font-size:.82rem}
.hero-meta dt{color:var(--muted);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.25em}
.hero-meta a{border-bottom:1px solid var(--hair)}
.hero-meta a:hover{border-color:var(--copper);color:var(--copper)}
.hero-sm .hero-h1{font-size:clamp(1.8rem,4vw,2.8rem)}

/* ===== conceptual rail ===== */
.rail{position:sticky;top:60px;z-index:5;max-width:var(--maxw);margin-inline:auto;padding:.5rem var(--pad);background:var(--paper);border-block:1px solid var(--hair)}
.rail ol{display:flex;gap:1.4em;list-style:none;padding:0;margin:0;overflow-x:auto;scrollbar-width:thin;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rail li{flex:none;padding-block:.45em}
.rail a{white-space:nowrap;border-bottom:1px solid transparent}
.rail a:hover,.rail a:focus-visible{color:var(--ink);border-color:var(--copper)}
.rail a[aria-current="true"]{color:var(--ink);border-color:var(--ink)}

/* ===== claims ===== */
.claim{margin:1.6em 0;padding:.9em 1.1em;border-left:3px solid var(--hair);background:#FAFAFA}
.claim-k{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.45em;color:var(--muted)}
.claim-t{font-size:.96rem;color:var(--ink-2)}
.k-observed{border-left-color:var(--ink)}            .k-observed .claim-k{color:var(--ink)}
.k-interpretation{border-left-style:dashed;border-left-color:var(--sem-commit)} .k-interpretation .claim-k{color:var(--sem-commit)}
.k-scenario{border-left-style:dotted;border-left-color:var(--sem-transmit)}     .k-scenario .claim-k{color:var(--sem-transmit)}
.k-limitation{border-left-style:double;border-left-width:4px;border-left-color:var(--muted)}

/* ===== citations ===== */
.cite{color:var(--copper)}
.cite sup{font-size:.62em;font-weight:600;padding-inline:.12em;vertical-align:super;line-height:0}
.cite:hover sup,.cite:focus-visible sup{background:var(--copper-fill)}
.cites{display:inline-flex;flex-wrap:wrap;gap:8px .3em;font-size:.74rem;color:var(--muted)}
.cites .cite{border-bottom:1px solid var(--hair)}
.cites .cite:hover{color:var(--copper);border-color:var(--copper)}
.cite-sep{color:var(--hair)}
.verified{display:block;font-size:.7rem;color:var(--muted);margin-top:.2em;font-variant-numeric:tabular-nums}

/* ===== editorial data ===== */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.6em 2em;margin:1.8em 0;padding-block:1.2em;border-block:1px solid var(--hair)}
.fig-v{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.fig-l{margin-top:.35em;font-size:.88rem;color:var(--ink-2)}
.fig-n{margin-top:.5em;font-size:.74rem;color:var(--muted);line-height:1.45}

.pull{margin:2em 0;padding-left:1.1em;border-left:3px solid var(--ink);font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.35}
.question{margin:2.4em 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.35;max-width:34ch}
.def{margin:1.6em 0;padding:1em 1.2em;border:1px solid var(--hair)}
.def dt{font-weight:600;margin-bottom:.4em}
.def dd{margin:0;color:var(--ink-2);font-size:.96rem}
.formula{margin:1.8em 0}
.formula-t{font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.36rem);padding:.7em 0;border-block:1px solid var(--hair);text-align:center}

/* The final lines get the page's only large block of nothing. */
.end{margin:5rem 0 1rem;font-size:clamp(1.4rem,3.4vw,2.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.5}
.sec-quiet{padding-bottom:clamp(96px,18vh,220px)}
.after{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) clamp(56px,9vh,110px)}
.after ul{display:flex;flex-wrap:wrap;gap:1.6em;list-style:none;padding:0;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.after a{border-bottom:1px solid var(--hair)}
.after a:hover{color:var(--copper);border-color:var(--copper)}

/* ===== diagrams ===== */
.diagram{margin:1.9em 0}
.diagram-t{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.8em}
.flow{display:flex;flex-wrap:wrap;gap:.4em;list-style:none;padding:0;counter-reset:s}
.flow li{display:flex;align-items:center;gap:.4em;font-size:.84rem}
.flow li::after{content:"→";color:var(--hair)}
.flow li:last-child::after{content:""}
.flow li span{border:1px solid var(--hair);padding:.42em .7em}
.flow.loop li:last-child::after{content:"↩";color:var(--copper)}
.flow-cap{margin-top:.8em;font-size:.76rem;color:var(--muted);line-height:1.5}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.4em;border-block:1px solid var(--hair);padding-block:1.2em}
.two-col h3{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.two-col ul{list-style:none;padding:0;font-size:.9rem;color:var(--ink-2)}
.two-col li{padding:.35em 0;border-bottom:1px solid #EEE}
.two-state .col-right h3{color:var(--sem-violence)}
.arche{display:grid;gap:1em;margin:1.6em 0}
.arche-i{border-left:3px solid var(--hair);padding-left:1em}
.a-centre{border-left-color:var(--sem-violence)}
.a-bridge{border-left-color:var(--sem-transmit)}
.a-cluster{border-left-color:var(--sem-commit)}
.arche-i p{font-size:.92rem;color:var(--ink-2)}

.gens{margin:2em 0}
.gen-line{position:relative;height:74px;margin-inline:4.5em;list-style:none;padding:0;border-bottom:1px solid var(--ink)}
.gen-line li{position:absolute;left:var(--at);bottom:0;transform:translateX(-50%);text-align:center;width:9em}
.gen-line li::after{content:"";display:block;width:1px;height:12px;background:var(--ink);margin:.3em auto 0}
.gen-y{display:block;font-weight:700;font-variant-numeric:tabular-nums}
.gen-l{display:block;font-size:.68rem;color:var(--muted)}

/* Habituation: each line smaller than the last. The device IS the argument, so it is
 * marked as decorative for a screen reader only in the sense that the sizes carry nothing
 * a reader of the text loses — the sentences say it too. */
.habit{margin:1.8em 0}
.habit p{color:var(--ink-2);line-height:1.4}
.habit .h-0{font-size:1.32rem;color:var(--ink)} .habit .h-1{font-size:1.1rem}
.habit .h-2{font-size:.96rem} .habit .h-3{font-size:.84rem} .habit .h-4{font-size:.76rem;color:var(--muted)}

/* ===== figures (shared) ===== */
.fig{margin:2.4em 0;border:1px solid var(--hair)}
.fig-wide{max-width:none;width:min(100vw - 2*var(--pad),var(--maxw))}
.fig-cap{padding:.9em 1.1em;border-bottom:1px solid var(--hair);background:#FAFAFA}
.fig-cap-t{display:block;font-weight:600;font-size:.94rem}
.fig-cap-n{display:block;margin-top:.25em;font-size:.78rem;color:var(--muted)}
.fig>div,.fig>p{padding-inline:1.1em}
.fig>div{padding-block:1.1em}
.fig-asof{padding:.7em 1.1em;border-top:1px solid var(--hair);font-size:.72rem;color:var(--muted)}
.fig-warn{margin:1em 0;padding:.75em .9em;border-left:3px solid var(--muted);background:#FAFAFA;font-size:.8rem;color:var(--ink-2);line-height:1.5}
.legend{display:flex;flex-wrap:wrap;gap:.4em 1.2em;list-style:none;padding:0;margin-bottom:1em;font-size:.76rem;color:var(--ink-2)}
.legend li{display:flex;align-items:center;gap:.45em}
.swatch{width:16px;height:0;border-top-width:3px;border-top-style:solid}
.s-v{border-top-color:var(--sem-violence)}
.s-c{border-top-color:var(--sem-commit);border-top-style:dashed}
.s-t{border-top-color:var(--sem-transmit);border-top-style:dotted}
.s-4{border-top-color:var(--sem-deesc);border-top-style:double;border-top-width:4px}
.s-x{border-top-color:var(--hair)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.fig table{width:100%;border-collapse:collapse;font-size:.84rem}
.fig th,.fig td,.comp-table th,.comp-table td{text-align:left;vertical-align:top;padding:.55em .6em;border-bottom:1px solid #EEE}
.fig thead th,.comp-table thead th{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair);font-weight:600}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.small{font-size:.92em;color:var(--ink-2)}
.dim{color:var(--muted)}
.fig details summary,.topo-table details summary{cursor:pointer;color:var(--copper);font-size:.8rem}
.fig-table{margin-top:1.4em;border-top:1px solid var(--hair);padding-top:.9em}
.fig-table>summary{font-weight:600;font-size:.84rem}
.fig-table table{margin-top:.8em}
.topo-count{font-variant-numeric:tabular-nums;font-weight:400;color:var(--muted);font-size:.8em}

.pill{display:inline-block;padding:.1em .5em;font-size:.7rem;border:1px solid var(--hair);white-space:nowrap}
.p-active,.p-yes,.p-observed{border-color:var(--sem-violence);color:var(--sem-violence)}
.p-latent,.p-hypo{border-color:var(--sem-commit);color:var(--sem-commit);border-style:dashed}
.p-weakened,.p-removed,.p-restored{border-color:var(--sem-deesc);color:var(--sem-deesc);border-style:double;border-width:3px}
.p-contested,.p-no{border-color:var(--muted);color:var(--muted);border-style:dotted}
.conf{display:inline-block;font-size:.7rem;padding:.1em .45em;border:1px solid var(--hair)}
.conf-high{border-color:var(--ink);color:var(--ink)}
.conf-medium{border-style:dashed}
.conf-analytical{border-style:dotted;color:var(--muted)}
.s-working{border-color:var(--sem-deesc);color:var(--sem-deesc)}
.s-degraded{border-style:dashed}
.s-suspended{border-color:var(--sem-transmit);color:var(--sem-transmit);border-style:dotted}
.s-lapsed{border-color:var(--sem-violence);color:var(--sem-violence)}
.s-not_yet{color:var(--muted)}

/* ===== 01 layers ===== */
.lyr-ctl{border:1px solid var(--hair);padding:.7em .9em;margin-bottom:1em}
.lyr-ctl legend{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-inline:.4em}
.lyr-ctl label{display:inline-flex;align-items:center;gap:.4em;margin-right:1.4em;font-size:.84rem;min-height:24px}
.lyr-table th[scope="row"]{width:26%}
.th-name{display:block;font-weight:600}
.th-region{display:block;font-size:.72rem;color:var(--muted)}
.lyr-cell{text-align:center}
.mark{display:inline-block;width:11px;height:11px;border:2px solid currentColor}
.c-v,.lyr-table td.lyr-cell:nth-of-type(1) .mark{color:var(--sem-violence)}
.c-c,.lyr-table td.lyr-cell:nth-of-type(2) .mark{color:var(--sem-commit)}
.c-t,.lyr-table td.lyr-cell:nth-of-type(3) .mark{color:var(--sem-transmit)}
.lyr-table td.lyr-cell:nth-of-type(2) .mark{border-radius:50%}
.lyr-table td.lyr-cell:nth-of-type(3) .mark{transform:rotate(45deg)}
.lyr-detail dl{margin-top:.6em;display:grid;grid-template-columns:auto 1fr;gap:.3em .9em;font-size:.8rem}
.lyr-detail dt{color:var(--muted)} .lyr-detail dd{margin:0}
/* Layer toggles, in CSS. See tools/ww3/figures.mjs for why this is not a script. */
.lyr:has(#lyr-v:not(:checked)) .lyr-table td.lyr-cell:nth-of-type(1) .mark,
.lyr:has(#lyr-c:not(:checked)) .lyr-table td.lyr-cell:nth-of-type(2) .mark,
.lyr:has(#lyr-t:not(:checked)) .lyr-table td.lyr-cell:nth-of-type(3) .mark{opacity:.12}

/* ===== 02 arc diagram ===== */
.graph-scroll{overflow-x:auto;position:relative}
.graph-scroll:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.arcs{width:100%;min-width:820px;height:auto}
.arcs .axis{stroke:var(--ink);stroke-width:1}
.arcs .edge{fill:none;stroke-width:1.6}
.arcs .e-active{stroke:var(--sem-violence)}
.arcs .e-latent{stroke:var(--sem-commit);stroke-dasharray:5 4}
.arcs .e-weakened{stroke:var(--sem-deesc);stroke-dasharray:2 3}
.arcs .e-removed{stroke:var(--hair);stroke-dasharray:1 5}
.arcs .c-analytical{stroke-width:1;opacity:.75}
.arcs .node line{stroke:var(--hair)}
.arcs .node circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.arcs .node.on circle{fill:var(--sem-violence);stroke:var(--sem-violence)}
.arcs text{font-family:var(--sans);font-size:12px;fill:var(--ink-2)}
.arcs .node.on text{fill:var(--ink);font-weight:600}
.e-removed th[scope="row"]{color:var(--muted)}

/* ===== 03 topology ===== */
.topo-defs{font-size:.86rem;color:var(--ink-2);margin-bottom:1em}
.topo-layer{margin-top:1.8em;padding-top:1.2em;border-top:1px solid var(--hair)}
.topo-layer h3{font-size:.95rem}
.topo-note{font-weight:400;color:var(--muted);font-size:.78rem}
.topo-group{margin-top:1.2em}
.topo-group h4{font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.topo-def{font-size:.78rem;color:var(--muted);margin:.2em 0 .5em}
.topo-quiet{margin-top:1em;font-size:.76rem;color:var(--muted)}
.nuc{margin-left:.4em;font-size:.6rem;letter-spacing:.08em;border:1px solid var(--hair);padding:.05em .3em;color:var(--muted)}
.topo-detail dl{display:grid;grid-template-columns:auto 1fr;gap:.25em .9em;font-size:.78rem;margin-top:.5em}
.topo-detail dt{color:var(--muted)} .topo-detail dd{margin:0}
.uncounted{font-size:.7rem;color:var(--muted);border:1px dotted var(--hair);padding:0 .3em}

/* ===== 04 timeline ===== */
.chart-wrap{margin-bottom:1.4em}
.chart{width:100%;height:auto;min-width:640px}
.chart .grid line{stroke:#EEE}
.chart .years line{stroke:#F4F4F4}
.chart .tick{font-family:var(--sans);font-size:10px;fill:var(--muted)}
.chart .series{fill:none;stroke-width:2}
.c-gcci .series{stroke:var(--sem-violence)} .c-gcci .marks circle{fill:var(--sem-violence)}
.c-gdc .series{stroke:var(--sem-deesc)}     .c-gdc .marks circle{fill:var(--sem-deesc)}
.chart-label{font-size:.82rem;color:var(--ink-2);margin-top:.3em}
.tl>.chart-wrap:first-child{margin-top:.2em}
.tl-h{margin-top:1.6em;font-size:.95rem}
.tl-note{font-size:.78rem;color:var(--muted);margin:.3em 0 .8em}
.ev-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--hair)}
.ev{border-bottom:1px solid #EEE}
.ev>details>summary{display:grid;grid-template-columns:9.5em 1fr auto;gap:.8em;align-items:baseline;padding:.55em 0;color:inherit;font-size:.86rem}
.ev-date{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.78rem}
.ev-title{font-weight:500}
.ev-deltas{display:flex;gap:.35em;align-items:baseline;font-size:.72rem;font-variant-numeric:tabular-nums}
.ev-k{color:var(--muted);letter-spacing:.06em}
.dup{color:var(--sem-violence);font-weight:600} .ddn{color:var(--sem-deesc);font-weight:600} .d0{color:var(--muted)}
.c-gdc .dup{color:var(--sem-deesc)}
.ev-body{padding:.2em 0 .9em 10.3em;font-size:.86rem;color:var(--ink-2);max-width:72ch}
.ev-cat{font-size:.72rem;color:var(--muted);margin-bottom:.4em}
.ev-null{margin-top:.5em;padding-left:.8em;border-left:2px solid var(--hair)}
.ev-meta{margin-top:.5em}

/* ===== paths ===== */
.path-list{list-style:none;padding:0;margin:0}
.path{padding:1em 0 1em 1em;border-left:3px solid var(--hair);border-bottom:1px solid #EEE}
.path.p-removed,.path.p-restored{border-left-color:var(--sem-deesc);border-left-style:double;border-left-width:4px}
.path.p-weakened{border-left-color:var(--sem-commit);border-left-style:dashed}
.path.p-contested{border-left-color:var(--sem-violence);border-left-style:dotted}
.path-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6em;margin-bottom:.5em}
.path-head h3{font-size:.98rem;flex:1 1 18ch}
.path-date{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.path p{font-size:.88rem;color:var(--ink-2);margin-bottom:.4em}
.path-meta{font-size:.74rem;color:var(--muted)}

/* ===== 05 cascade ===== */
.shock{margin-top:1.8em;padding-top:1.2em;border-top:1px solid var(--hair)}
.shock h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6em;font-size:1rem}
.shock-sum{font-size:.88rem;color:var(--ink-2);margin:.4em 0}
.shock-observed{font-size:.82rem;padding:.6em .8em;border-left:3px solid var(--sem-transmit);background:var(--sem-transmit-bg);margin-bottom:.8em}
.as-ctl{border:1px solid var(--hair);padding:.7em .9em;margin:.8em 0}
.as-ctl label.as{min-height:24px}
.as-ctl legend{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-inline:.4em}
.as{display:grid;grid-template-columns:auto 1fr;gap:.2em .5em;margin-bottom:.5em;font-size:.84rem}
.as input{margin-top:.25em}
.as-note{grid-column:2;font-size:.74rem;color:var(--muted)}
.order{margin-top:1em}
.order h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.4em}
.node-list{list-style:none;padding:0;margin:0}
.cnode{border-left:2px solid var(--hair);padding-left:.8em;margin-bottom:.35em}
.cnode>details>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em;color:inherit;font-size:.88rem}
.cnode-label{flex:1 1 20ch}
.cnode-off{display:none;font-size:.7rem;color:var(--muted)}
.obs{font-size:.7rem;padding:.05em .4em;border:1px solid var(--hair)}
.o-true{border-color:var(--sem-violence);color:var(--sem-violence)}
.o-false{border-color:var(--sem-deesc);color:var(--sem-deesc);border-style:double;border-width:3px}
.o-null{color:var(--muted);border-style:dotted}
.cnode-body{padding:.5em 0 .9em;font-size:.84rem;color:var(--ink-2);max-width:70ch}
.cnode-body p{margin-bottom:.45em}
.cnode-req{color:var(--muted)}
.brakes ul{list-style:none;padding:0;margin-top:.3em}
.brakes li{padding:.2em 0}
.brake-n{border-bottom:1px solid var(--hair)}
.brake-n:hover{color:var(--copper);border-color:var(--copper)}
.brake-c{font-size:.72rem;color:var(--muted);margin-left:.4em}
.conf-key{font-size:.78rem;color:var(--ink-2);margin-bottom:1em}
.conf-key p{margin-bottom:.3em}
/* Four rules cover every shock: assumptions are numbered 1..4 within their own shock. */
.shock:has(.as-1:not(:checked)) [data-req~="1"],
.shock:has(.as-2:not(:checked)) [data-req~="2"],
.shock:has(.as-3:not(:checked)) [data-req~="3"],
.shock:has(.as-4:not(:checked)) [data-req~="4"]{opacity:.42;border-left-style:dotted}
.shock:has(.as-1:not(:checked)) [data-req~="1"] .cnode-label,
.shock:has(.as-2:not(:checked)) [data-req~="2"] .cnode-label,
.shock:has(.as-3:not(:checked)) [data-req~="3"] .cnode-label,
.shock:has(.as-4:not(:checked)) [data-req~="4"] .cnode-label{text-decoration:line-through}
.shock:has(.as-1:not(:checked)) [data-req~="1"] .cnode-off,
.shock:has(.as-2:not(:checked)) [data-req~="2"] .cnode-off,
.shock:has(.as-3:not(:checked)) [data-req~="3"] .cnode-off,
.shock:has(.as-4:not(:checked)) [data-req~="4"] .cnode-off{display:inline}

/* ===== methodology & sources pages ===== */
.comp-table{width:100%;border-collapse:collapse;font-size:.84rem;margin:1em 0}
.comp-table caption{text-align:left;font-size:.76rem;color:var(--muted);padding-bottom:.5em}
.comp-code{font-weight:700;font-size:1rem}
.comp-name{display:block;font-weight:500}
.comp-def{display:block;font-size:.92em;color:var(--ink-2);margin-top:.15em}
.inputs{display:block;font-size:.9em;color:var(--muted);margin-top:.2em}
.derived{font-size:.72rem;color:var(--muted)}
.assessed{display:inline-block;font-size:.66rem;letter-spacing:.06em;color:var(--sem-transmit);border:1px solid var(--sem-transmit);padding:0 .3em;margin-left:.3em}
.comp-total th,.comp-total td{border-top:1px solid var(--ink);border-bottom:0;font-weight:600}
.comp-note,.note p{font-size:.84rem;color:var(--ink-2)}
.note{margin:1.4em 0;padding:.9em 1.1em;border:1px solid var(--hair)}
.note h3{margin-top:0;font-size:.88rem}
.note ul,.rules{padding-left:1.1em;font-size:.88rem;color:var(--ink-2)}
.note li,.rules li{margin-bottom:.4em}
.changelog{list-style:none;padding:0}
.mech-table th[scope="row"]{width:30%}
.src-group{margin-top:1.6em}
.src-group h3{font-size:.84rem;letter-spacing:.1em;text-transform:uppercase}
.src-list{list-style:none;padding:0;margin-top:.6em}
.src{padding:.7em 0;border-bottom:1px solid #EEE;scroll-margin-top:90px}
.src:target{background:var(--copper-fill);padding-inline:.6em}
.src-t a{border-bottom:1px solid var(--hair)}
.src-t a:hover{color:var(--copper);border-color:var(--copper)}
.src-m{display:flex;flex-wrap:wrap;gap:.3em 1em;font-size:.74rem;color:var(--muted);margin-top:.2em}
.src-pub{color:var(--ink-2)}
.src-n{font-size:.8rem;color:var(--ink-2);margin-top:.3em;max-width:80ch}
.dl{border-bottom:1px solid var(--copper);color:var(--copper)}
.ww3-foot{max-width:var(--maxw);margin-inline:auto;padding:1.4em var(--pad) 3em;border-top:1px solid var(--hair);font-size:.78rem;color:var(--muted)}
.ww3-foot a{border-bottom:1px solid var(--hair)}

/* ===== mobile ===== */
@media (max-width:760px){
  .ww3{font-size:17px}
  .two-col{grid-template-columns:1fr}
  .fig>div,.fig>p,.fig-cap,.fig-asof{padding-inline:.8em}
  .fig table{font-size:.8rem}
  .lyr-table th[scope="row"]{width:auto}
  .ev>details>summary{grid-template-columns:1fr;gap:.15em}
  .ev-body{padding-left:0}
  .ev-deltas{justify-content:flex-start}
  .gen-line{margin-inline:3em}
  .gen-line li{width:6em;font-size:.9em}
  .hero-meta{gap:1em 1.6em}
  .rail{top:56px}
}
@media (min-width:1180px){
  /* The rail moves out of the flow only when there is room for it beside the column. */
  .ww3-body,.ww3-hero,.after{padding-left:calc(var(--pad) + var(--rail-w))}
  .rail{position:fixed;top:120px;left:max(var(--pad),calc(50vw - var(--maxw)/2 + var(--pad)));width:var(--rail-w);
        padding:0;border:0;background:none;max-width:none;margin:0}
  .rail ol{flex-direction:column;gap:.1em;overflow:visible}
  /* SC 2.5.8: the stacked rail entries are closer together than the spacing exception
     allows, so each one has to be a full-height target rather than a line of text. */
  .rail li{padding-block:0}
  .rail a{display:flex;align-items:center;min-height:26px;white-space:normal}
  .fig-wide{width:calc(100% + var(--rail-w)/2)}
}

/* ===== print ===== */
@media print{
  .topbar,.rail,.after,.lyr-ctl,.as-ctl{display:none}
  .ww3-body{padding-left:var(--pad)}
  .fig,.note,.claim{break-inside:avoid}
  details{display:block}
  details>summary{list-style:none}
  details>*:not(summary){display:block}
  .cnode-off{display:none}
  a{color:inherit}
  .cite sup::after{content:""}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== citation card (only ever shown by public/js/ww3.js) ===== */
.cite-card{position:absolute;z-index:30;width:min(340px,calc(100vw - 24px));background:var(--paper);
  border:1px solid var(--ink);padding:.85em 1em;font-size:.82rem;box-shadow:0 2px 0 var(--hair)}
.cite-card[hidden]{display:none}
.cc-t{font-weight:600;line-height:1.35}
.cc-m{font-size:.74rem;color:var(--muted);margin-top:.25em}
.cc-n{margin-top:.5em;color:var(--ink-2);line-height:1.45}
.cc-l{margin-top:.6em;font-size:.78rem}
.cc-l a{color:var(--copper);border-bottom:1px solid var(--copper)}
.cite-x{position:absolute;top:.3em;right:.4em;border:0;background:none;font-size:1.1rem;line-height:1;
  cursor:pointer;color:var(--muted);padding:.2em}
.cite-x:hover{color:var(--ink)}
@media (max-width:600px){
  /* The drawer §36 asks for on mobile: same element, pinned to the bottom edge. */
  .cite-card{position:fixed;top:auto!important;left:0!important;right:0;bottom:0;width:100%;
    border-width:1px 0 0;padding:1.1em 1.2em 1.4em;box-shadow:0 -4px 16px rgb(0 0 0/.08)}
}