/* 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); } }

/* ---------- 02 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); }

/* ---------- 03 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; } }

/* ---------- 04 the bar ---------- */
.next-list { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 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: 860px) { .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; } }