/* The article's own parts: its figures, charts, run explorer, footage gallery and the transcript pages (runs/*.html).
   Tokens: /tokens.css. Headings, body text, links, code, tables and captions: /prose.css. Buttons, inputs, the listbox,
   focus and empty states: /ui.css. This file adds layout and the outcome palette only. */
:root{
  /* outcome colours: buyer-alignment ok/cand/defect hues, re-stepped to pass the dataviz validator on white.
     The amber is 2.93:1 on white, so every segment carries a count and every figure has a table.
     -bg is a tag's fill, -ink its text (AA on the fill); --seg-ink is the count printed on a solid segment. */
  --harm:#1e7a45;--harm-bg:#e6f3ea;--harm-ink:#15532f;
  --other:#c28e12;--other-bg:#fbf2dc;--other-ink:#6f4c08;
  --attempt:#a8391f;--attempt-bg:#f9e6e1;--attempt-ink:#7d2e1c;
  --seg-ink:#fff;--seg-ink-other:#2b1f02;
  --reg:color-mix(in srgb,var(--ink) 38%,transparent);
  --col:calc(var(--measure) + 2 * var(--gutter));--wide-fig:1000px;
  --r-mark:calc(var(--r-xs) / 2);   /* data marks: swatches, waffle squares, TOC dashes */
}
html[data-theme="dark"]{
  --harm:#3fae6b;--harm-bg:#11301e;--harm-ink:#a7e6be;
  --other:#d9a53a;--other-bg:#33280e;--other-ink:#f2d58f;
  --attempt:#e2694c;--attempt-bg:#3a1a12;--attempt-ink:#f5b09f;
  --seg-ink:#0b0b0c;--seg-ink-other:#1c1405;
}
@media (prefers-color-scheme: dark){html:not([data-theme]){
  --harm:#3fae6b;--harm-bg:#11301e;--harm-ink:#a7e6be;
  --other:#d9a53a;--other-bg:#33280e;--other-ink:#f2d58f;
  --attempt:#e2694c;--attempt-bg:#3a1a12;--attempt-ink:#f5b09f;
  --seg-ink:#0b0b0c;--seg-ink-other:#1c1405;
}}
html{scroll-behavior:smooth;scroll-padding-top:var(--sp-24)}
h4{margin:0}
p{margin:0 0 var(--sp-16)}
ul,ol{margin:0 0 var(--sp-16);padding-left:1.3em}
li{margin:var(--sp-4) 0}
/* numbers line up wherever they are data */
.fig,.t,.count,.gcard .meta,.rt,.meta{font-variant-numeric:tabular-nums}

/* article column and breakouts */
.col{max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}
.wide{max-width:var(--wide-fig);margin:var(--sp-28) auto;padding:0 var(--gutter)}
.intro{color:var(--ink2);max-width:var(--col)}

/* header: the shared title block (.page-head, .lede) */
header.post{padding:var(--sp-72) 0 var(--sp-8);margin:0}
header.post .lede{margin:0 0 var(--sp-20)}
header.post h1.run code{font-size:.6em;vertical-align:.08em}
header.post .meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4) 0;margin:0 0 var(--sp-8);font:400 var(--fs-small)/1.5 var(--sans);color:var(--muted)}
/* a dot before every item; clip-path hides the dot that would start a wrapped line */
header.post .meta{margin-left:calc(-1 * var(--sp-20));clip-path:inset(-4px -4px -4px var(--sp-20))}
header.post .meta > *{position:relative;margin-left:var(--sp-20)}
header.post .meta > *::before{content:"·";position:absolute;left:calc(-1 * var(--sp-12));top:50%;transform:translateY(-50%);color:var(--faint)}
/* transcript pages: a quiet way back */
header.post a.home{display:inline-flex;align-items:center;gap:var(--sp-6);min-height:var(--ctl-sm);margin:0 0 var(--sp-12);font:400 var(--fs-small)/1 var(--sans);color:var(--muted);text-decoration:none;transition:color var(--t-fast)}
header.post a.home:hover{color:var(--ink)}

/* section headings: the shared h2 and h3 */
.wide h2.sec{margin:var(--sp-56) 0 var(--sp-8)}

/* the short version sits on a plate with registration marks at its corners, as on the landing page */
.tldr{position:relative;border:var(--hairline);border-radius:var(--r-lg);padding:var(--sp-24) var(--sp-28) var(--sp-12);margin:var(--sp-36) 0 var(--sp-8);background:var(--sunk)}
.tldr::before{content:"";position:absolute;inset:-7px;pointer-events:none;--h:linear-gradient(var(--reg),var(--reg));
  background:var(--h) 0 5px/11px 1px no-repeat,var(--h) 5px 0/1px 11px no-repeat,
    var(--h) 100% 5px/11px 1px no-repeat,var(--h) calc(100% - 5px) 0/1px 11px no-repeat,
    var(--h) 0 calc(100% - 5px)/11px 1px no-repeat,var(--h) 5px 100%/1px 11px no-repeat,
    var(--h) 100% calc(100% - 5px)/11px 1px no-repeat,var(--h) calc(100% - 5px) 100%/1px 11px no-repeat}
.tldr .lab{font:500 var(--fs-meta)/1 var(--sans);color:var(--muted);margin-bottom:var(--sp-14)}
.tldr li{margin:var(--sp-8) 0}

/* figures */
figure{margin:0}
.fig{border:var(--hairline);border-radius:var(--r-lg);background:var(--panel);padding:var(--sp-20) var(--sp-24) var(--sp-16)}
.fig .ft{font:600 var(--fs-ui)/1.3 var(--sans);margin:0 0 var(--sp-4)}
.fig .fs{font:400 var(--fs-meta)/1.5 var(--sans);color:var(--muted);margin:0 0 var(--sp-14)}
.wide > figcaption{margin:var(--sp-12) var(--sp-2) 0}
.legend{display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-16);font:400 var(--fs-meta)/1.4 var(--sans);color:var(--ink2);margin:0 0 var(--sp-14)}
.legend > span{display:inline-flex;align-items:center;gap:var(--sp-6)}
.k{display:inline-block;width:11px;height:11px;border-radius:var(--r-mark);flex:none}
.k.harm{background:var(--harm)}.k.other{background:var(--other)}.k.attempt{background:var(--attempt)}

/* stack bars and square waffles */
.stack{display:flex;height:26px;border-radius:var(--r-xs);overflow:hidden;gap:var(--sp-2)}
.seg{display:flex;align-items:center;justify-content:center;color:var(--seg-ink);font:600 var(--fs-caption)/1 var(--sans);min-width:22px}
.seg.harm{background:var(--harm)}.seg.other{background:var(--other);color:var(--seg-ink-other)}.seg.attempt{background:var(--attempt)}
.bar{display:grid;grid-template-columns:130px 1fr 170px;gap:var(--sp-16);align-items:center;padding:var(--sp-12) 0;border-top:var(--hairline)}
.bar:first-child{border-top:0;padding-top:var(--sp-2)}
.bar .nm{font:600 var(--fs-ui)/1.3 var(--sans)}
.bar .nm small{display:block;font:400 var(--fs-caption)/1.4 var(--sans);color:var(--muted)}
.bar .ci{font:400 var(--fs-meta)/1.35 var(--sans);color:var(--muted);text-align:right}
.bar .ci b{font:500 var(--fs-h4)/1.2 var(--serif);color:var(--ink)}
.waffle{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-16) var(--sp-24)}
/* the policy names are h2 in the outline (the waffle sits between the h1 and the first section) but set small */
.wf h2{font:600 var(--fs-meta)/1.3 var(--sans);letter-spacing:0;margin:0 0 var(--sp-8);display:flex;justify-content:space-between;align-items:baseline}
.wf h2 small{font:400 var(--fs-caption)/1.3 var(--sans);color:var(--muted)}
.sq{display:grid;grid-template-columns:repeat(18,1fr);gap:var(--sp-2)}
.sq a{display:block;line-height:0;border-radius:var(--r-mark)}
.sq i{aspect-ratio:1;border-radius:var(--r-mark);display:block;transition:box-shadow var(--t-fast)}
.sq a:hover i{box-shadow:0 0 0 1px var(--paper),0 0 0 2px var(--ink)}
.sq a:active i{opacity:.8}
.sq a:focus-visible{outline-offset:1px}
.sq i.harm{background:var(--harm)}.sq i.other{background:var(--other)}.sq i.attempt{background:var(--attempt)}
/* touch screens: each link is a cell of at least 24 x 24 px, the painted square inset by padding; three columns of 12
   cells need 3 x 288 px, so below that the policies stack and a row holds 18 (12 on phones, 9 at 379 px) */
@media (pointer:coarse){
  .waffle{gap:var(--sp-16)}
  .sq{grid-template-columns:repeat(12,minmax(24px,1fr));gap:0}
  .sq a{padding:var(--sp-4);border-radius:var(--r-xs)}
}
@media (pointer:coarse) and (max-width:1000px){.waffle{grid-template-columns:1fr}.sq{grid-template-columns:repeat(18,minmax(24px,1fr))}}
.sqrow{font:400 var(--fs-caption)/1.4 var(--sans);color:var(--muted);margin:var(--sp-10) 0 var(--sp-4)}

/* wording grid */
.wgrid{display:grid;grid-template-columns:190px repeat(3,minmax(0,1fr));column-gap:var(--sp-16)}
.wgrid > div{padding:var(--sp-12) 0;border-top:var(--hairline);min-width:0}
.wgrid .wh{font:500 var(--fs-meta)/1.4 var(--sans);color:var(--muted);border-top:0;padding-top:0}
.wgrid .wn{font:600 var(--fs-small)/1.3 var(--sans)}
.wgrid .wn small{display:block;font:400 var(--fs-caption)/1.4 var(--sans);color:var(--muted);margin-top:var(--sp-2)}
.wgrid .cell .stack{height:22px}
.wgrid .cell small{display:block;font:400 var(--fs-caption)/1.4 var(--sans);color:var(--muted);margin-top:var(--sp-4)}

/* tables */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tw.gap{margin-top:var(--sp-14)}
table.t{width:100%}
.t tbody tr:last-child td,.t tbody tr:last-child th{border-bottom:0}
.t tbody th{white-space:nowrap}
.t td.n{white-space:nowrap}
.t .q{color:var(--ink2)}
.tag{display:inline-block;font:600 var(--fs-caption)/1.4 var(--sans);padding:var(--sp-2) var(--sp-6);border-radius:var(--r-xs);white-space:nowrap}
.tag.harm{background:var(--harm-bg);color:var(--harm-ink)}.tag.other{background:var(--other-bg);color:var(--other-ink)}.tag.attempt{background:var(--attempt-bg);color:var(--attempt-ink)}
.codes{font:400 var(--fs-caption)/1.4 var(--mono);color:var(--ink2);letter-spacing:.02em}

/* word-for-word disclosure */
details.words{margin:var(--sp-8) 0 0}
details.words > summary{display:inline-flex;align-items:center;gap:var(--sp-8);min-height:var(--ctl-sm);font:600 var(--fs-ui)/1.3 var(--sans);color:var(--accent);cursor:pointer;list-style:none;border-radius:var(--r-xs)}
details.words > summary::-webkit-details-marker{display:none}
details.words > summary::before{content:"";width:7px;height:7px;margin:0 var(--sp-2) 0 var(--sp-2);border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease);flex:none}
details.words[open] > summary::before{transform:rotate(45deg)}
details.words > summary:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
details.words .tw{margin-top:var(--sp-12)}

/* quotes */
.canon{border:var(--hairline);border-radius:var(--r-md);padding:var(--sp-16) var(--sp-20);background:var(--panel);font:400 var(--fs-h3)/1.6 var(--serif);color:var(--ink);margin:0 0 var(--sp-12);overflow-wrap:break-word}
.canon .src{display:block;font:500 var(--fs-meta)/1.4 var(--sans);color:var(--muted);margin-bottom:var(--sp-6)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-14)}
.pair .canon{margin:0}
.callout{border-left:2px solid var(--line-strong);padding:var(--sp-2) 0 var(--sp-2) var(--sp-16);margin:var(--sp-24) 0;color:var(--ink2)}

/* filters above the gallery and the run explorer: a label over each control, controls from /ui.css */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-12);align-items:flex-end;margin:0 0 var(--sp-12)}
.filters label{display:flex;flex-direction:column;gap:var(--sp-6);font:500 var(--fs-meta)/1.2 var(--sans);color:var(--muted)}
.filters label.grow{flex:1;min-width:200px}
.count{font:400 var(--fs-meta)/1.4 var(--sans);color:var(--muted);margin:0 0 var(--sp-10)}
.empty-state{margin:var(--sp-8) 0}

/* run explorer: a header row, then one disclosure row per run */
.rt{border:var(--hairline);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
#runlist{max-height:760px;overflow-y:auto;overscroll-behavior:contain}
#runlist .empty-state{margin:var(--sp-16);border-radius:var(--r-md)}
.rcols{display:grid;grid-template-columns:minmax(96px,.8fr) 64px minmax(150px,1.1fr) 110px 150px 100px 52px;gap:0 var(--sp-10);padding:0 var(--sp-16);font:400 var(--fs-small)/1.4 var(--sans)}
.rcols > span{min-width:0}
.rh{border-bottom:var(--border);background:var(--sunk)}
.rh span{font:500 var(--fs-meta)/1.4 var(--sans);color:var(--muted);padding:var(--sp-10) 0}
.rcols > span:last-child{text-align:right}
details.trk{border-top:var(--hairline)}
details.trk:first-of-type{border-top:0}
details.trk > summary{list-style:none;cursor:pointer}
details.trk > summary::-webkit-details-marker{display:none}
details.trk > summary:focus-visible{outline-offset:-2px;border-radius:0}
.row{padding-top:var(--sp-10);padding-bottom:var(--sp-10);align-items:center;transition:background var(--t-fast)}
.row:hover{background:var(--hover)}
.row:active{background:var(--press)}
details.trk[open] > .row{background:var(--press)}
.row .pol{font-weight:600;display:flex;align-items:center;gap:var(--sp-8)}
.row .pol::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease);flex:none}
details[open] > .row .pol::before{transform:rotate(45deg)}
.row code{font-size:.92em}
.detail{display:grid;grid-template-columns:1.25fr 1fr .9fr;border-top:var(--hairline);background:var(--sunk)}
.detail > section{padding:var(--sp-16) var(--sp-20) var(--sp-20);border-left:var(--hairline);min-width:0}
.detail > section:first-child{border-left:0}
.detail h3{font:500 var(--fs-meta)/1.4 var(--sans);letter-spacing:0;text-wrap:wrap;color:var(--muted);margin:0 0 var(--sp-8)}
.detail h3.next{margin-top:var(--sp-14)}
.detail p{font-size:var(--fs-small);line-height:1.6;margin:0 0 var(--sp-8)}
.detail video,.detail img{width:100%;max-width:340px;height:auto;aspect-ratio:4/3;object-fit:cover;border:var(--hairline);border-radius:var(--r-md);display:block;background:var(--media-bg)}
.cl{list-style:none;padding:0;margin:0}
.cl li{font:400 var(--fs-meta)/1.5 var(--sans);margin:var(--sp-4) 0;color:var(--ink2)}
.cl .codes{display:inline-block;min-width:3ch;margin-right:var(--sp-6)}

.colophon{max-width:var(--col);margin:var(--sp-72) auto 0;padding:var(--sp-24) var(--gutter) 0;border-top:var(--hairline);font:400 var(--fs-small)/1.6 var(--sans);color:var(--muted);box-sizing:border-box}

/* footage gallery: posters that turn into players */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:var(--sp-14);margin-top:var(--sp-8)}
.gallery > .empty-state{grid-column:1/-1}
.gcard{border:var(--hairline);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);transition:border-color var(--t-fast)}
.gcard:hover{border-color:var(--line-strong)}
.gcard .media{position:relative;aspect-ratio:4/3;background:var(--media-bg);line-height:0;cursor:pointer}
.gcard .media.on{cursor:default}
.gcard .media:focus-visible{outline-offset:-2px;border-radius:0}
.gcard .media img,.gcard .media video{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.gcard .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.gcard .play::after{content:"";width:44px;height:44px;border-radius:50%;background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform var(--t) var(--ease),background var(--t-fast)}
.gcard .play span{position:absolute;z-index:1;width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--media-ink,#fff);margin-left:3px;transition:transform var(--t) var(--ease)}
.gcard .media:hover .play::after{transform:scale(1.08)}
.gcard .media:active .play::after{transform:scale(.96)}
.gcard.mv .media::before{content:"Moved";position:absolute;top:var(--sp-8);left:var(--sp-8);z-index:2;font:600 var(--fs-micro)/1.4 var(--sans);
  color:var(--seg-ink);background:var(--attempt);padding:var(--sp-2) var(--sp-6);border-radius:var(--r-xs)}
.gcard.mv .media.on::before{display:none}
.gcard .cap{margin:0;padding:var(--sp-10) var(--sp-12) var(--sp-12)}
.gcard .cap .top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-6);margin-bottom:var(--sp-4)}
.gcard .cap .nm{font:600 var(--fs-meta)/1.4 var(--sans);color:var(--ink)}
.gcard .cap .meta{color:var(--muted);font:400 var(--fs-caption)/1.5 var(--sans)}
.gcard .cap .foot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-8);margin-top:var(--sp-2)}
.gcard .cap .foot a{font:500 var(--fs-caption)/1.5 var(--sans)}
.more{display:flex;justify-content:center;margin:var(--sp-20) 0 0}
.more:has(> [hidden]){display:none}
.gcard .cap .meta code{font-size:.95em}
.gcard .cap a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--link-line);text-underline-offset:2px;transition:color var(--t-fast),text-decoration-color var(--t-fast)}
.gcard .cap a:hover{color:var(--accent);text-decoration-color:currentColor}

/* side table of contents: one dash per section, labels on hover or keyboard focus */
.toc{position:fixed;left:var(--sp-24);top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:flex-start;
  padding:var(--sp-8) var(--sp-10) var(--sp-8) var(--sp-6);border-radius:var(--r-lg);transition:background var(--t-fast),box-shadow var(--t-fast)}
.toc:hover,.toc:focus-within{background:color-mix(in srgb,var(--paper) 96%,transparent);box-shadow:var(--shadow-2),0 0 0 1px var(--line)}
.toc .up{width:var(--ctl);height:var(--ctl);margin:0 0 var(--sp-8) var(--sp-2);padding:0;border:0;border-radius:var(--r-md);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink2);cursor:pointer;
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity var(--t),color var(--t-fast),box-shadow var(--t-fast)}
.toc .up.show{opacity:1;pointer-events:auto}
.toc .up:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--faint)}
.toc .up:active{transform:translateY(1px)}
.toc .up svg{width:14px;height:14px}
.toc a{display:flex;align-items:center;height:16px;padding:0 var(--sp-4);text-decoration:none;color:var(--muted)}
.toc a i{flex:none;width:17px;height:2px;border-radius:var(--r-mark);background:var(--ghost);transform:scaleX(.76);transform-origin:left;transition:background var(--t-fast),transform var(--t-fast)}
.toc a:hover i{background:var(--ink2)}
.toc a.on i{background:var(--ink);transform:none}
.toc a span{font:400 var(--fs-caption)/16px var(--sans);white-space:nowrap;margin-left:var(--sp-10);max-width:0;overflow:hidden;opacity:0;transition:opacity var(--t-fast)}
.toc:hover a span,.toc:focus-within a span{max-width:260px;opacity:1}
.toc a:hover span,.toc a.on span{color:var(--ink)}
/* hidden above the first section, so the ticks never float beside the title with none active */
.toc{opacity:0;pointer-events:none;transition:opacity var(--t-slow) var(--ease)}
.toc.live,.toc:focus-within{opacity:1;pointer-events:auto}
@media (max-width:1180px){.toc{display:none}}

/* transcript pages (runs/*.html) */
.turn{margin:var(--sp-8) 0;padding:var(--sp-10) var(--sp-14);border:var(--hairline);border-radius:var(--r-md);background:var(--panel);font:400 var(--fs-small)/1.55 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere}
.turn .who{display:block;font:500 var(--fs-caption)/1.4 var(--sans);color:var(--muted);margin-bottom:var(--sp-4);white-space:normal}
.turn.move{font:400 var(--fs-caption)/1.6 var(--mono);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.turn.result{font:400 var(--fs-caption)/1.6 var(--mono);color:var(--muted);background:var(--sunk)}
.turn.end{border-left:2px solid var(--ink2)}
.turn.move .who,.turn.result .who,.turn.end .who{font-family:var(--mono)}
article.col > video,img.fr{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:var(--hairline);border-radius:var(--r-md);display:block;background:var(--media-bg)}
.run-foot{margin-top:var(--sp-32);display:flex;justify-content:space-between;align-items:center}

@media (max-width:860px){
  .pair,.waffle{grid-template-columns:1fr}
  .bar{grid-template-columns:96px 1fr}.bar .ci{grid-column:1/-1;text-align:left}
  .wgrid{grid-template-columns:110px repeat(3,minmax(0,1fr));column-gap:var(--sp-10)}
  .detail{grid-template-columns:1fr}.detail > section{border-left:0;border-top:var(--hairline)}.detail > section:first-child{border-top:0}
  .rcols{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.3fr)}.rcols > span:nth-child(n+4){display:none}
  .rcols > span:nth-child(3){text-align:right}
}
@media (max-width:560px){
  header.post{padding-top:var(--sp-40)}
  .fig{padding:var(--sp-16) var(--sp-16) var(--sp-14)}
  .tldr{padding:var(--sp-20) var(--sp-20) var(--sp-8)}
  .wgrid{grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,1fr));column-gap:var(--sp-8)}
  .wgrid .wn code{overflow-wrap:anywhere}
  .filters label{flex:1 1 calc(50% - var(--sp-12))}
  .filters label .lb{width:100%}
}
@media (pointer:coarse) and (max-width:560px){.sq{grid-template-columns:repeat(12,minmax(24px,1fr))}}
@media (pointer:coarse) and (max-width:379px){.sq{grid-template-columns:repeat(9,minmax(24px,1fr))}}
@media (pointer:coarse){
  .row{min-height:var(--touch)}
  details.words > summary{min-height:var(--touch)}
  header.post a.home{min-height:var(--touch)}
  .gcard .cap a{display:inline-block;padding:var(--sp-10) 0;margin:calc(-1 * var(--sp-10)) 0}
}