/* Commons page (docs/commons/). Tokens only. Page-level status tokens below were validated with the
   dataviz palette checker in both themes (CVD and normal-vision separation, lightness band, 3:1 contrast):
   good/verified = blue, approaching/vendor claim = gold, under = rose. Always paired with a text label and a shape. */
:root { --nk-good: #2a6fb0; --nk-near: #a8730f; --nk-under: #b8344a; --nk-none: #857c6d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nk-good: #2b93b8; --nk-near: #b8861a; --nk-under: #d4606f; --nk-none: #56707a; } }
:root[data-theme="dark"] { --nk-good: #2b93b8; --nk-near: #b8861a; --nk-under: #d4606f; --nk-none: #56707a; }

/* ---------- shared bits ---------- */
.prose.narrow { max-width: var(--measure); margin-top: var(--s-5); }
.wide-fig { margin-top: var(--s-6); }
.links-row { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: var(--s-5); font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .02em; }
.links-row a { padding: 8px 0; overflow-wrap: anywhere; }
.sec-head .badges .badge, .meta-row .badge { white-space: normal; }
.fig .label { display: block; }

/* ---------- hero: eight promises ---------- */
.cm-hero .h1 { max-width: 14ch; }
.pm-wrap { margin-top: 14px; border: 1px solid var(--line); background: var(--bg-1); }
.pm-tbl { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--f-sans); table-layout: fixed; }
.pm-tbl th, .pm-tbl td { text-align: left; vertical-align: top; padding: 9px 12px; border-top: 1px solid var(--line); }
.pm-tbl thead th { border-top: 0; font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); position: relative; }
.pm-tbl thead th[style]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--acc); }
.pm-tbl thead th:first-child { width: 36%; }
.pm-tbl tbody th { font: 500 13.5px/1.35 var(--f-sans); color: var(--ink); }
.pm-tbl td { color: var(--ink-2); }
.pm-v { display: flex; align-items: center; gap: 7px; font: 600 12.5px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--ink); }
.pm-v::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
td[data-s="yes"] .pm-v::before { background: var(--ink-2); }
td[data-s="part"] .pm-v::before { border: 1.5px solid var(--ink-2); background: linear-gradient(90deg, var(--ink-2) 50%, transparent 50%); }
td[data-s="no"] .pm-v::before { border: 1.5px solid var(--st-contested); background: linear-gradient(45deg, transparent 45%, var(--st-contested) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--st-contested) 45% 55%, transparent 55%); }
.pm-n { display: block; margin-top: 3px; font: 400 12.5px/1.45 var(--f-sans); color: var(--ink-2); }
.pm-tbl tbody tr:hover { background: var(--bg-2); }
.pm.gaps tbody tr[data-gap="0"] { display: none; }
.pm-count { font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); }
@media (max-width: 520px) { .pm-tbl th, .pm-tbl td { padding: 8px 8px; } .pm-tbl thead th:first-child { width: 32%; } .pm-n { font-size: 12px; } }

/* ---------- 00 why ---------- */
.why-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); margin-top: var(--s-5); align-items: start; }
.why-grid .prose { max-width: none; }
.cm-rules { margin-top: 10px; }
.cm-rules li { background: var(--bg-2); }
@media (max-width: 960px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- screenshots ---------- */
.shots { margin: 0; min-width: 0; display: grid; gap: 14px; align-content: start; }
.shot { display: block; position: relative; padding: 8px; text-decoration: none; background: var(--bg-2); }
.shot img { width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
.shot-cap { display: block; margin-top: 8px; font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); }
.shot:hover .shot-cap { color: var(--link); text-decoration: underline; }
.shots .fig-foot { margin-top: 0; }
.nk-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nk-pair .shot img { aspect-ratio: 540 / 1169; object-fit: cover; }
.mc-split, .nk-split { align-items: start; }
.mc-split .prose .callout, .nk-split .prose .callout { max-width: none; }
.nk-rules { padding-left: 1.3em; }
.nk-rules b { color: var(--ink); }
.nk-kv { font-size: var(--fs-sm); }
.nk-kv dt { padding-right: 18px; }

/* ---------- 00b weak connection ---------- */
.wc { margin-top: var(--s-7); }
.wc-bars { list-style: none; margin: 14px 0 0; padding: 14px 16px; display: grid; gap: 14px; background: var(--bg-1); border: 1px solid var(--line); }
.wc-bars li { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 6px 16px; align-items: center; }
.wc-n { font: 400 13.5px/1.4 var(--f-sans); color: var(--ink-2); }
.wc-n b { color: var(--ink); font-weight: 600; }
.wc-track { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wc-bar { display: block; height: 14px; border-radius: 2px; min-width: 3px; transition: width var(--t-ui) var(--ease-out); }
.wc-t { flex: none; font: 600 13px/1 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .wc-bars li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 02b keywords ---------- */
.kw-intro { margin-top: var(--s-7); }
.kw-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kw-ctrl { flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.kw-field { display: flex; align-items: center; gap: 10px; flex: 1 1 300px; }
.kw-field > span { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.kw-input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-ui); border-radius: var(--r-btn); background: var(--bg-2); color: var(--ink); font: 400 16px/1.2 var(--f-sans); }
.kw-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kw-presets { flex-wrap: wrap; }
.kw-list { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--line); background: var(--bg-1); }
.kw-list li { display: grid; grid-template-columns: 38px 84px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 9px 12px; border-top: 1px solid var(--line); }
.kw-list li:first-child { border-top: 0; }
.kw-r { font: 600 13px/1.4 var(--f-mono); color: var(--ink-3); }
.kw-c { font: 600 13.5px/1.4 var(--f-mono); color: var(--ink); }
.kw-d { font: 400 14.5px/1.45 var(--f-sans); color: var(--ink-2); }
.kw-d mark { background: color-mix(in srgb, var(--acc-medcode) 22%, transparent); color: var(--ink); padding: 0 2px; border-radius: 2px; }
.kw-s { font: 500 11px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); text-align: right; white-space: nowrap; }
.kw-s b { display: block; font-weight: 600; color: var(--acc-medcode); letter-spacing: .1em; text-transform: uppercase; }
.kw-list li.right { background: color-mix(in srgb, var(--acc-medcode) 9%, transparent); box-shadow: inset 3px 0 0 var(--acc-medcode); }
.kw-list li.kw-none { display: block; font: 400 14px/1.5 var(--f-sans); color: var(--ink-3); }
.kw-read { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); background: var(--bg-2); font: 400 14px/1.55 var(--f-sans); color: var(--ink-2); min-height: 4.8em; }
.kw-read b { color: var(--ink); font-weight: 600; }
.kw-rules { margin: 10px 0 0; padding-left: 1.3em; font: 400 var(--fs-sm)/1.55 var(--f-sans); color: var(--ink-2); }
@media (max-width: 640px) { .kw-list li { grid-template-columns: 30px minmax(0, 1fr) auto; } .kw-s { grid-row: 1; grid-column: 3; } .kw-d { grid-column: 2 / -1; } }
html:not(.js) .kw-list, html:not(.js) .kw-read { display: none; }

/* ---------- 02 code anatomy ---------- */
.ca-pick { margin-top: 14px; }
.ca-seg, .ev-seg { flex-wrap: wrap; }
@media (max-width: 640px) { .ca-seg, .ev-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .ca-seg button, .ev-seg button { border-left: 0; border-top: 1px solid var(--line-ui); padding: 0 6px; } .ca-seg button:nth-child(-n+3), .ev-seg button:nth-child(-n+3) { border-top: 0; } .ca-seg button:not(:nth-child(3n+1)), .ev-seg button:not(:nth-child(3n+1)) { border-left: 1px solid var(--line-ui); } }
.ca-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; margin-top: 14px; align-items: start; }
.ca-main { min-width: 0; border: 1px solid var(--line); background: var(--bg-1); padding: 18px 16px 10px; }
.ca-code { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 6px; }
.ca-grp { display: grid; gap: 6px; }
.ca-grp.dotg .ca-gl { border-bottom-color: transparent; }
.ca-gl { font: 500 11px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 0 2px 4px; border-bottom: 1px solid var(--line-ui); white-space: nowrap; }
.ca-chars { display: flex; gap: 4px; }
.ca-ch { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: clamp(34px, 5.4vw, 52px); height: clamp(48px, 7vw, 68px); border: 1px solid var(--line-ui); background: var(--bg-2); font: 600 clamp(24px, 3.6vw, 38px)/1 var(--f-mono); color: var(--ink); }
.ca-ch.dot { width: 18px; border-color: transparent; background: transparent; color: var(--ink-3); }
.ca-ch.ph { color: var(--ink-3); border-style: dashed; }
.ca-ch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ca-ch.on { border-color: var(--acc-medcode); box-shadow: inset 0 -3px 0 var(--acc-medcode); }
.ca-desc { margin-top: 14px; font: 400 var(--fs-lede)/1.4 var(--f-serif); color: var(--ink); }
.ca-desc .lbl { display: block; font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.ca-list { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.ca-list li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); font: 400 14px/1.5 var(--f-sans); color: var(--ink-2); }
.ca-list li .c { font: 600 15px/1.4 var(--f-mono); color: var(--ink); }
.ca-list li .t { font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: block; }
.ca-list li.on { background: color-mix(in srgb, var(--acc-medcode) 10%, transparent); box-shadow: inset 2px 0 0 var(--acc-medcode); }
.ca-side { min-width: 0; display: grid; gap: 12px; }
.ca-build { margin-top: 0; flex-direction: column; align-items: stretch; }
.ca-build .ctrl { justify-content: space-between; }
.ca-grid { width: 100%; border-collapse: collapse; font: 400 13px/1.3 var(--f-mono); background: var(--bg-1); border: 1px solid var(--line); }
.ca-grid caption { text-align: left; padding: 10px 10px 6px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ca-grid th { font: 500 11px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 6px; text-align: left; }
.ca-grid td { padding: 3px; }
.ca-grid button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 8px 6px; text-align: center; cursor: pointer; border: 1px solid var(--line); background: var(--bg-2); font: 500 12.5px/1.2 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ca-grid button:hover { border-color: var(--line-ui); color: var(--ink); }
.ca-grid button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ca-grid button[aria-pressed="true"] { border-color: var(--acc-medcode); color: var(--ink); background: color-mix(in srgb, var(--acc-medcode) 12%, var(--bg-2)); }
.ca-grid button b { color: var(--ink); font-weight: 700; }
.ca-near { border: 1px solid var(--line); background: var(--bg-1); padding: 10px 12px; }
.ca-near ul { list-style: none; margin: 6px 0 0; padding: 0; }
.ca-near li { padding: 8px 0; border-top: 1px solid var(--line); font: 400 13.5px/1.45 var(--f-sans); color: var(--ink-2); }
.ca-near li code { display: block; font: 600 14px/1.4 var(--f-mono); color: var(--ink); }
.ca-near li code mark { background: color-mix(in srgb, var(--acc-medcode) 22%, transparent); color: var(--ink); padding: 0 1px; }
@media (max-width: 860px) { .ca-body { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1100px) { .ca-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } }
.ca-note { font: 400 13px/1.5 var(--f-sans); color: var(--ink-2); padding: 10px 12px; border: 1px dashed var(--line-ui); }
.ca-note a { white-space: nowrap; }
@media (max-width: 420px) { .ca-code { gap: 8px 4px; } .ca-chars { gap: 3px; } .ca-gl { font-size: 11px; letter-spacing: .04em; } .ca-ch { width: 31px; } .ca-ch.dot { width: 12px; } }

.ca2-stage { background: var(--bg-1); padding: 10px 0 4px; margin-top: 14px; }
.ca2-stage svg { display: block; width: 100%; height: auto; }
.ca2-stage svg text { font-family: var(--f-mono); }
.ca2-stage .bar { cursor: crosshair; }
.ca2-stats { margin-top: 12px; }

/* ---------- 03 evidence ---------- */
.ev-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 18px; margin-top: 14px; align-items: start; }
.ev-summary { display: grid; gap: 14px; position: sticky; top: 84px; }
.ev-zero { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line-ui); background: var(--bg-1); }
.ev-zero .v { font: 600 clamp(56px, 6vw, 84px)/.95 var(--f-sans); letter-spacing: -.04em; color: var(--ink); }
.ev-zero .k { font: 400 14px/1.5 var(--f-sans); color: var(--ink-2); }
.ev-bar svg { display: block; width: 100%; height: auto; }
.ev-bar svg text { font-family: var(--f-mono); }
.ev-legend { margin-top: 0; }
.ev-legend li { font-size: 13px; }
.ev-quote { margin: 0; padding: 12px 14px; border-left: 2px solid var(--dig); background: var(--bg-1); font: 400 15px/1.5 var(--f-serif); color: var(--ink); }
.ev-quote footer { margin-top: 6px; font: 400 12.5px/1.45 var(--f-sans); color: var(--ink-2); }
.ev-rows { display: grid; gap: 14px; min-width: 0; }
.ev-grp { border: 1px solid var(--line); background: var(--bg-1); }
.ev-grp h3 { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ev-grp h3 span { color: var(--ink-3); letter-spacing: .04em; }
.ev-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 12px; border-top: 1px solid var(--line); min-height: 36px; }
.ev-row:first-of-type { border-top: 0; }
.ev-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ev-row:hover { background: var(--bg-2); }
.ev-name { font: 500 12.5px/1.3 var(--f-mono); color: var(--ink); }
.ev-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-dots svg { width: 18px; height: 18px; flex: none; transition: opacity var(--t-ui) linear; }
.ev-dots .none { font: 400 12.5px/1.3 var(--f-sans); color: var(--ink-3); }
.ev-n { font: 500 11.5px/1.3 var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.ev.only .ev-dots svg:not(.v) { opacity: .16; }
@media (max-width: 960px) { .ev-body { grid-template-columns: minmax(0, 1fr); } .ev-summary { position: static; } }
@media (max-width: 420px) { .ev-row { grid-template-columns: 76px minmax(0, 1fr) auto; padding: 6px 10px; } }

/* ---------- 05 week ---------- */
.wk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.wk-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border: 1.5px solid var(--c, var(--line-ui)); background: color-mix(in srgb, var(--c, transparent) 12%, var(--bg-2)); border-radius: 999px; font: 600 15px/1.25 var(--f-sans); color: var(--ink); }
.wk-pill .g { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--c) 28%, var(--bg-2)); border: 2px solid var(--c); color: var(--ink); font: 700 13px/1 var(--f-mono); box-sizing: border-box; }
.wk-pill small { font: 400 13px/1.3 var(--f-sans); color: var(--ink-2); }
.wk-flips { font: 400 14px/1.45 var(--f-sans); color: var(--ink-2); }
.wk-flips b { font: 600 20px/1 var(--f-mono); color: var(--ink); margin-right: 4px; }
.wk-stage { background: var(--bg-1); padding: 8px 0 4px; margin-top: 12px; }
.wk-stage svg { display: block; width: 100%; height: auto; }
.wk-stage svg text { font-family: var(--f-mono); }
.wk-range { flex: 1 1 240px; }
.wk-range .range { flex: 1 1 120px; width: auto; }
.wk-note { margin-top: var(--s-5); }

/* ---------- 06 RDA curve ---------- */
.rc-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: center; margin-top: 14px; }
.rc-big { display: grid; gap: 4px; }
.rc-big .v { font: 600 clamp(44px, 5vw, 64px)/1 var(--f-sans); letter-spacing: -.03em; color: var(--ink); }
.rc-big .k { font: 400 14.5px/1.45 var(--f-sans); color: var(--ink-2); max-width: 42ch; }
.rc-dots { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 5px; max-width: 420px; justify-self: end; width: 100%; }
.rc-dots i { display: block; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--line-ui); background: transparent; transition: background-color var(--t-micro) linear, border-color var(--t-micro) linear; }
.rc-dots i.on { background: var(--mark-dig); border-color: var(--mark-dig); }
.rc-stage { background: var(--bg-1); padding: 8px 0 4px; margin-top: 12px; }
.rc-stage svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.rc-stage svg text { font-family: var(--f-mono); }
.rc-range { flex: 1 1 280px; }
.rc-range .range { flex: 1 1 140px; width: auto; }
@media (max-width: 760px) { .rc-top { grid-template-columns: minmax(0, 1fr); } .rc-dots { justify-self: start; } }

/* ---------- 07 the bar ---------- */
.next-list { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.next-list li { position: relative; padding: 16px 18px 18px; background: var(--bg-2); border: 1px solid var(--line); }
.next-list li::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--acc); }
.next-list h3 { font: 600 18px/1.3 var(--f-sans); margin-top: 6px; }
.next-list p:not(.label) { font: 400 14px/1.55 var(--f-sans); color: var(--ink-2); margin-top: 8px; }
@media (max-width: 1100px) { .next-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .next-list { grid-template-columns: minmax(0, 1fr); } }

@media print { .fig-ctrl { display: none !important; } .pm.gaps tbody tr { display: table-row !important; } }
@media (forced-colors: active) { .pm-v::before, .rc-dots i, .wk-pill .g { forced-color-adjust: none; } }
@media (max-width: 480px) {
  .ca-build .seg button { padding: 0 9px; }
  .ca-grid { table-layout: fixed; }
  .ca-grid th[scope="row"] { width: 74px; font-size: 11px; letter-spacing: 0; overflow-wrap: anywhere; }
  .ca-grid thead th { font-size: 11px; letter-spacing: 0; }
  .ca-grid button { font-size: 11.5px; padding: 8px 2px; }
}

.ca-grid .ls { display: none; }
@media (max-width: 480px) { .ca-grid .lf { display: none; } .ca-grid .ls { display: inline; } }

.ca-gl .ls { display: none; }
@media (max-width: 480px) { .ca-gl .lf { display: none; } .ca-gl .ls { display: inline; } .ca-ch { width: 29px; } .ca-chars { gap: 3px; } .ca-code { gap: 8px 4px; } }