/* ── NAOMS design tokens — light + dark, both NAOMS's own ─────────────────
   The DARK values are lifted verbatim from the shipping product
   (src/packages/chat/ui/chat-tab-v2.js on origin/main) — the app's own dark
   system. The LIGHT values below are NOT that palette inverted: each accent
   was independently re-tuned (same hue family, deepened in lightness/
   saturation) so it holds AA contrast on a near-white ground, and the
   grounds/inks are a fresh light scale, not "dark tokens with light and
   dark swapped". Legacy aliases (--ink/--muted/--line/--bg/--card/--panel/
   --pos/--neg/--dcimgbg) keep every existing selector repainting without
   being individually rewritten. Colour is semantic, not decorative: --ok =
   landed/good, --err = wrong direction, --accent-warm = needs a human's
   attention, --ink-3 = quiet/no activity, --accent/--accent-3 = category.

   Three states, per the spec: :root carries the LIGHT default (so a reader
   with no stored preference and no OS signal still gets a complete, correct
   theme); prefers-color-scheme:dark repaints to the dark scale UNLESS an
   explicit light choice is stamped; an explicit [data-theme] always wins.
   Nothing below has its only definition inside a media/attribute block. ── */
:root{
  /* ---- light (default) ---- */
  --bg-0:#eef1f6;--bg-1:#ffffff;--bg-2:#f2f4f9;--bg-3:#e6eaf2;--bg-hov:#eef2f8;
  --ink-0:#12151c;--ink-1:#333949;--ink-2:#5b6376;--ink-3:#8891a1;
  --line:#d9dee7;--line-soft:#e8ebf1;
  --accent:#1c5aad;--accent-warm:#8a5b00;--accent-3:#6a4fc2;--accent-ink:#ffffff;
  --ok:#0f8a52;--err:#c53030;
  --accent-bg:rgba(28,90,173,.10);--accent-warm-bg:rgba(138,91,0,.10);
  --accent-3-bg:rgba(106,79,194,.10);--ok-bg:rgba(15,138,82,.10);--err-bg:rgba(197,48,48,.10);
  --backdrop:rgba(18,21,28,.84);
  --focus-ring:#1c5aad;
  /* Hero is a deliberate brand-constant surface — a dark, colour-carrying
     panel that stays the same in both themes (like a masthead), so "the top
     third is a designed hero" reads identically whether the reader is in
     light or dark mode. It is NOT the dark theme's body tokens reused —
     it's its own three-stop navy/indigo gradient, built from the product's
     own --accent/--accent-3 hues at low lightness, never the reference's
     indigo/purple/teal. */
  --hero-a:#0c2a4d;--hero-b:#161b3a;--hero-c:#241a3f;
  --hero-ink-0:#f5f6f8;--hero-ink-1:rgba(245,246,248,.82);
  --hero-eyebrow:#8fc4ff;
  --hero-card-bg:rgba(255,255,255,.09);--hero-card-line:rgba(255,255,255,.18);
  --hero-line:rgba(255,255,255,.14);
  --ink:var(--ink-0);--muted:var(--ink-2);--bg:var(--bg-0);--card:var(--bg-1);
  --dcimgbg:var(--bg-2);--panel:var(--bg-2);--pos:var(--ok);--neg:var(--err);
}
/* OS default: dark, only when no explicit choice is stamped on the root. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg-0:#0b0c10;--bg-1:#101319;--bg-2:#1b2230;--bg-3:#26303f;--bg-hov:#161b24;
    --ink-0:#f5f6f8;--ink-1:#d5dae3;--ink-2:#9aa3b2;--ink-3:#5b6373;
    --line:#36404f;--line-soft:#262d39;
    --accent:#7ab8ff;--accent-warm:#ffd166;--accent-3:#b69cff;--accent-ink:#06223f;
    --ok:#6bd49d;--err:#ff7a7a;
    --accent-bg:rgba(122,184,255,.12);--accent-warm-bg:rgba(255,209,102,.12);
    --accent-3-bg:rgba(182,156,255,.12);--ok-bg:rgba(107,212,157,.12);--err-bg:rgba(255,122,122,.12);
    --backdrop:rgba(4,5,8,.82);
    --focus-ring:#7ab8ff;
  }
}
/* Explicit toggle: [data-theme="dark"] wins regardless of OS. */
:root[data-theme="dark"]{
  --bg-0:#0b0c10;--bg-1:#101319;--bg-2:#1b2230;--bg-3:#26303f;--bg-hov:#161b24;
  --ink-0:#f5f6f8;--ink-1:#d5dae3;--ink-2:#9aa3b2;--ink-3:#5b6373;
  --line:#36404f;--line-soft:#262d39;
  --accent:#7ab8ff;--accent-warm:#ffd166;--accent-3:#b69cff;--accent-ink:#06223f;
  --ok:#6bd49d;--err:#ff7a7a;
  --accent-bg:rgba(122,184,255,.12);--accent-warm-bg:rgba(255,209,102,.12);
  --accent-3-bg:rgba(182,156,255,.12);--ok-bg:rgba(107,212,157,.12);--err-bg:rgba(255,122,122,.12);
  --backdrop:rgba(4,5,8,.82);
  --focus-ring:#7ab8ff;
}
/* Explicit [data-theme="light"] needs no re-declaration — it IS the :root
   default above; its only job is to out-rank the dark media query, which
   the :not([data-theme="light"]) guard on that block already does. */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Section eyebrow + heading — the same pairing used above every named
   section: a small caps accent label, then a bold heading below it. */
.eyebrow{color:var(--accent);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.sec-h{font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-.01em;margin:6px 0 6px;color:var(--ink-0)}
.sec-sub{color:var(--ink-2);max-width:780px;font-size:15px;margin:0 0 4px}
*{box-sizing:border-box}
body{margin:0;font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
html{scroll-behavior:smooth}[id]{scroll-margin-top:16px}
.layout{display:flex;gap:34px;max-width:1180px;margin:0 auto;padding:0 22px}
.content{flex:1 1 auto;min-width:0;max-width:880px}
.sidebar{flex:0 0 192px;position:sticky;top:18px;align-self:flex-start;font-size:13px;max-height:calc(100vh - 36px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:20px}
.sidebar::-webkit-scrollbar{width:0;height:0;background:transparent}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:8px}.sidebar:hover,.sidebar:focus-within{scrollbar-width:thin;scrollbar-color:var(--line) transparent}.sidebar:hover::-webkit-scrollbar,.sidebar:focus-within::-webkit-scrollbar{width:8px}.sidebar:hover::-webkit-scrollbar-thumb,.sidebar:focus-within::-webkit-scrollbar-thumb{background:var(--line)}@media (hover:none){.sidebar{scrollbar-width:none}.sidebar::-webkit-scrollbar{width:0}}
.snav{margin-bottom:18px}
.snav h4{margin:0 0 7px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.snav a{display:flex;justify-content:flex-start;align-items:center;gap:8px;padding:3px 0;color:var(--ink);line-height:1.3;text-align:left;cursor:pointer}
.snav a:hover{color:var(--accent);text-decoration:none}
.snav a .n{color:var(--muted);font-size:11px;white-space:nowrap;margin-left:auto}
.snav a.facet{border-radius:7px;padding:3px 7px;margin:1px -7px}
.snav a.facet:hover{background:var(--bg)}
.snav a.facet.active{background:var(--accent);color:#fff;font-weight:600}
.snav a.facet.active .n{color:rgba(255,255,255,.78)}
.snav a.facet.active .sdot{box-shadow:0 0 0 2px #fff}
.filterbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 8px;font-size:13px;color:var(--muted)}
.filterbar b{color:var(--ink)}
a.clearf{color:var(--accent);cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px;font-size:12.5px;color:var(--ink)}
.chip .ck{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.chip .x{cursor:pointer;color:var(--muted);font-weight:700;line-height:1;padding:1px 6px;border-radius:50%}
.chip .x:hover{color:var(--accent-ink);background:var(--accent)}
.chips .clearall{color:var(--accent);cursor:pointer;font-size:13px}
.fcard.hidden{display:none}
/* A tag is a resolved/landed marker (currently just "Bug fixed"), so it takes
   the good/landed hue rather than the neutral voice-badge treatment. */
.badge.b-tag{background:rgba(107,212,157,.12);color:var(--ok);border:1px solid rgba(107,212,157,.4)}
.fnone{color:var(--muted);padding:26px 2px;display:none}
.weekhead{font-size:13px;color:var(--muted);font-weight:700;margin:20px 0 2px;letter-spacing:.02em}
@media(max-width:840px){.sidebar{display:none}.layout{display:block}.content{max-width:880px;margin:0 auto}}
header.site{border-bottom:1px solid var(--line);background:var(--card)}
header.site .wrap{padding:22px}
header.site h1{margin:0;font-size:22px;letter-spacing:-.01em}
header.site p{margin:4px 0 0;color:var(--muted);font-size:14px}
nav{margin-top:14px;display:flex;flex-wrap:wrap;gap:9px 18px;font-size:14px;font-weight:600}
nav a{color:var(--ink)}
main{padding:30px 0 70px}
h2.section{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:34px 0 6px;border-bottom:1px solid var(--line);padding-bottom:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:14px 0;box-shadow:0 10px 30px rgba(0,0,0,.18);display:flex;gap:16px;align-items:flex-start}
.card-body{flex:1 1 auto;min-width:0}
/* Landscape box, consistent for every card, and object-fit:contain (never
   cover) -- owner, 2026-09-27: a 640x240 thumbnail center-cropped under
   object-fit:cover cut its own title text mid-word ("ello-world"). contain
   letterboxes on --bg-2 instead of ever slicing content, for any image
   shape, with no per-image special-casing needed. */
.card-thumb{flex:0 0 160px;width:160px;height:100px;border-radius:10px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center}
.card-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.card h3{margin:.1em 0 .3em;font-size:20px;line-height:1.25}
/* Clamped to 3 lines -- owner, 2026-09-27: "so that it stays relatively
   small"; one full paragraph was still 5-8 lines for a long summary. The
   article page itself is untouched; only the list-card excerpt is clamped. */
.card .sum{color:var(--ink-2);font-size:15px;margin:.4em 0 0;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:480px){.card{flex-direction:column}.card-thumb{width:100%;height:auto;aspect-ratio:12/5}}
.meta{font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* Voice (architect/confession/journal/…) is a facet, not a status — one
   neutral outline chip for all seven, so colour stays reserved for things
   that actually mean something (stream category, landed/quiet/attention). */
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 9px;border-radius:999px;text-transform:uppercase;background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line)}
.paid{background:rgba(255,209,102,.12);color:var(--accent-warm);border:1px solid rgba(255,209,102,.4)}
.free{background:rgba(107,212,157,.12);color:var(--ok);border:1px solid rgba(107,212,157,.4)}
.fieldnote{position:relative;margin:30px 0;padding:18px 22px 8px;background:var(--bg-2);border:1px solid var(--line);border-left:5px solid var(--accent-3);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.fieldnote .fn-eyebrow{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-3);margin-bottom:7px}
.fieldnote .fn-eyebrow:before{content:"✎ "}
.fieldnote .fn-title{margin:.1em 0 .55em;font-size:18px;line-height:1.3;color:var(--ink-0)}
.fieldnote .fn-body{font-size:15.5px;color:var(--ink-1)}
.fieldnote .fn-body>:first-child{margin-top:0}.fieldnote .fn-body>:last-child{margin-bottom:0}
article.post{background:transparent;border:0;border-radius:0;padding:0;margin-top:18px}
article.post h1{font-size:30px;line-height:1.2;letter-spacing:-.015em;margin:.2em 0 .3em}
article.post .meta{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.markdown-body{font-size:17.5px;line-height:1.72}
/* The closing card: a coda, set smaller than the body it follows. */
.closer{display:block;margin:2.4em 0 1.2em;padding:20px 22px 6px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px}
.closer-t{margin:0 0 4px!important;padding-top:0!important;border-top:0!important;font-size:16px!important;font-weight:750;letter-spacing:.005em;color:var(--ink-1)}
.closer-b>p{font-size:13.4px;line-height:1.6;color:var(--ink-2);margin:0 0 11px}
.closer-b>ul{margin:10px 0 12px;padding-left:19px}
.closer-b>ul>li{font-size:13.4px;line-height:1.6;color:var(--ink-2);margin:0 0 9px}
.closer-b strong{color:var(--ink-1)}
.closer-b>p:last-child,.closer-b>ul:last-child{margin-bottom:12px}
/* Four things: a 2x2 board. The week readable without reading. */
.fourgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0 6px}
.fcard{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px 18px 4px}
.fcard-n{font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);letter-spacing:.1em;margin-bottom:8px}
.fcard-t{margin:0 0 6px!important;font-size:16.5px!important;line-height:1.32;letter-spacing:-.01em;color:var(--ink-0)}
.fcard-b>p{font-size:15px;line-height:1.6;color:var(--ink-1)}
.fcard-b>p:first-child{margin-top:0}
/* Every area, as a card with its count. The shape of the week at a glance. */
.areagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:16px 0}
.acard{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:13px 14px 3px;display:flex;flex-direction:column}
.acard-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
.acard-name{font-weight:700;font-size:14px;color:var(--ink-0);letter-spacing:-.005em}
.acard-n{font:800 17px/1 var(--font-body,inherit);color:var(--accent);font-variant-numeric:tabular-nums;flex:0 0 auto}
.acard-sum{font-size:13.8px;line-height:1.55;color:var(--ink-0);font-weight:600;margin:0 0 8px}
.acard-d{font-size:13px;line-height:1.6;color:var(--ink-2);margin:0 0 11px}
.acard-b>p{font-size:13.6px;line-height:1.55;color:var(--ink-2);margin:0 0 10px}
@media(max-width:720px){.fourgrid{grid-template-columns:1fr}.areagrid{grid-template-columns:1fr}}
.markdown-body h2{margin-top:2.1em;margin-bottom:.5em;font-size:26px;letter-spacing:-.018em;line-height:1.2}
.markdown-body h3{margin-top:1.9em;margin-bottom:.45em;font-size:19.5px;font-weight:750;letter-spacing:-.012em;line-height:1.28;color:var(--ink-0)}
/* A hairline over each h2 makes the sections countable while scrolling. */
.markdown-body.dispatch h2{padding-top:.55em;border-top:1px solid var(--line-soft)}
.markdown-body.dispatch h2:first-child{border-top:0;padding-top:0}
.markdown-body pre{background:var(--bg-2);padding:14px;border-radius:8px;overflow:auto;font-size:14px;border:1px solid var(--line)}
.markdown-body code{background:var(--bg-2);color:var(--ink-1);padding:.1em .35em;border-radius:4px;font-size:.9em}
.markdown-body pre code{background:none;padding:0}
.markdown-body blockquote{border-left:3px solid var(--line);margin:1em 0;padding:.2em 1em;color:var(--ink-2)}
.markdown-body img{max-width:100%;border-radius:8px;border:1px solid var(--line);margin:.6em 0}
.markdown-body .figcap{color:var(--muted);font-size:14px;font-style:italic}
/* Needs a human's action (payment) before it continues — the attention hue. */
hr.paywall{border:none;border-top:2px dashed var(--accent-warm);margin:30px 0;position:relative}
hr.paywall:after{content:"⎯ paid subscribers ⎯";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--bg);padding:0 10px;font-size:11px;color:var(--accent-warm);letter-spacing:.06em;text-transform:uppercase}
.backlink{display:inline-block;margin:26px 0 0;font-size:14px}
footer.site{border-top:1px solid var(--line);color:var(--muted);font-size:13px;text-align:center;padding:26px}
.lead{font-size:16px;color:var(--ink-2);margin:.4em 0 1.4em}
.count{color:var(--muted);font-weight:400;font-size:13px}
.subtitle{font-size:20px;line-height:1.35;color:var(--ink-1);font-weight:400;margin:-.1em 0 .7em}
.tldr{background:var(--bg-2);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:13px 16px;margin:0 0 24px;font-size:16px;line-height:1.55;color:var(--ink-1)}
.tldr .tldr-k{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--accent);margin-right:8px;text-transform:uppercase}
/* everyone = welcoming/open (ok green); builders = neutral/specialised. */
.tier-everyone{background:rgba(107,212,157,.12);color:var(--ok);border:1px solid rgba(107,212,157,.4)}
.tier-builders{background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line)}
.markdown-body pre.mermaid{background:transparent;border:1px solid var(--line);padding:16px;text-align:center;overflow:auto}
.cl-new,.cl-improved,.cl-fixed{display:inline-block;font:700 11px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-right:6px;border:1px solid var(--line)}
.cl-new{background:rgba(182,156,255,.12);color:var(--accent-3)}
.cl-improved{background:rgba(122,184,255,.12);color:var(--accent)}
.cl-fixed{background:rgba(107,212,157,.12);color:var(--ok)}
.str-vision{background:var(--accent-warm-bg);color:var(--accent-warm)}.str-product{background:var(--ok-bg);color:var(--ok)}.str-technology{background:var(--accent-bg);color:var(--accent)}.str-process{background:var(--accent-3-bg);color:var(--accent-3)}
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle}
/* ── Dispatch cards: the home page. Photo on top, lede below. ──────────── */
.dcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:24px 0 8px}
.dcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);color:inherit}
.dcard:hover{text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.4);border-color:var(--accent);transform:translateY(-2px)}
.dcard .dcimg{aspect-ratio:12/5;overflow:hidden;background:var(--dcimgbg);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.dcard .dcimg img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
/* A chart is information, not a photo: show it whole rather than cropping it. */
.dcard .dcimg img[src$="-commits.svg"]{object-fit:contain;padding:6px 8px;background:var(--dcimgbg)}
.dcard .dcnoimg{aspect-ratio:12/5}
.dcard .dcbody{padding:16px 18px 20px}
.dcard .dcdate{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.dcard h3{margin:.3em 0 .4em;font-size:20px;line-height:1.25;text-wrap:balance}
.dcard p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
@media(prefers-reduced-motion:reduce){.dcard:hover{transform:none}}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
@media(max-width:680px){.doors{grid-template-columns:1fr}}
.door{display:block;border:1px solid var(--line);border-top:5px solid var(--dc);border-radius:12px;padding:20px 22px;background:var(--card)}
.door:hover{text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.4);transform:translateY(-1px)}
.door .dn{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:flex;gap:8px;align-items:center}
.door h3{margin:.15em 0 .35em;font-size:23px;color:var(--dc)}
.door p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.streamhead{border-left:5px solid var(--dc);background:var(--dbg);border-radius:0 10px 10px 0;padding:16px 20px;margin:4px 0 20px}
.streamhead h2{margin:0;font-size:25px;color:var(--dc)}
.streamhead p{margin:.4em 0 0;color:var(--ink-1);font-size:15px}
.streamhead .streamgoal{font-size:13.5px;color:var(--ink-2);margin-top:9px}
.seqchip{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:9px 13px;margin:0 0 22px;font-size:13.5px;color:var(--ink-2)}
.seqchip b{color:var(--ink-0);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.05em;margin-right:4px}
/* Stalled-work marker — a stream with no post in 3+ weeks. Muted, not
   alarming: quiet is a state, not a failure. */
.badge.b-quiet{background:rgba(91,99,115,.18);color:var(--ink-3);border:1px solid var(--line)}
/* ── WEEKLY DISPATCH — report furniture ───────────────────────────────────
   Emitted by dressDispatch(). Every selector here is scoped to markup that
   only a dispatch produces, so an older dispatch that matches no detector
   simply never sees these rules. Single-theme light, tokens only. ───────── */
/* Section rule + a short accent mark: our marker, in place of the reference's
   emoji. Sober and typographic, which is the devlog's voice. */
.markdown-body.dispatch h2{border-top:1px solid var(--line);margin-top:2.2em;padding-top:1.15em;font-size:23px;letter-spacing:-.012em}
/* The unstyled gfm anchor octicon reads as clutter beside a dressed heading;
   the h2 keeps its id, so #deep-links still resolve. */
.markdown-body .anchor{display:none}
.markdown-body.dispatch p.dintro{color:var(--ink-1);font-size:16.5px;line-height:1.65}
.markdown-body.dispatch p.dsub{margin-top:1.5em}
/* ── Tables, every voice — owner, 2026-09-27 voice: "the tables render really
   ugly... render the table beautifully with a smaller font and the headings
   [with] a different background and borders around it in our styling."
   Wrapped by wrapTables() in a .table-wrap so wide content scrolls inside its
   own box at phone width instead of breaking the page; the table itself keeps
   its natural width rather than being squeezed to 100%. ───────────────────── */
.table-wrap{overflow-x:auto;margin:1.2em 0;-webkit-overflow-scrolling:touch}
.table-wrap table{border-collapse:collapse;font-size:.9em;font-variant-numeric:tabular-nums}
.table-wrap th,.table-wrap td{border:1px solid var(--line);padding:7px 11px;text-align:left;vertical-align:top}
.table-wrap th{background:var(--panel);font-weight:700;font-size:.85em;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.table-wrap tbody tr:nth-child(even){background:var(--bg-2)}
/* Headline figures — read before any prose. */
.dstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;margin:26px 0 30px}
.dstat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:15px 16px 16px}
.dstat-k{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);line-height:1.4;min-height:2.8em}
.dstat-n{font-size:30px;line-height:1.08;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin-top:9px;white-space:nowrap}
.dstat-n.long{font-size:23px}
.dstat-d{margin-top:8px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.35}
.dstat-n{overflow-wrap:anywhere}
.dstat-n.text{font-size:14px!important;line-height:1.35;font-weight:600;white-space:normal!important}
.dstat{min-width:0}
.dstat-n{min-width:0;overflow-wrap:anywhere}
.dstat-q{white-space:normal}
.dstat-q{margin-top:2px;font-size:12px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.dstats-hero .dstat-q{color:var(--hero-ink-1)}
.dstat-f{margin-top:3px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:520px){.dstats{gap:10px}.dstat{padding:12px 13px 13px}.dstat-k{font-size:10.5px;letter-spacing:.06em}.dstat-n{font-size:24px}.dstat-n.long{font-size:17px}.dstat-d{font-size:12px}.dstat-f{font-size:11.5px}}
.dstat-d.pos,.dm-d.pos{color:var(--pos)}
.dstat-d.neg,.dm-d.neg{color:var(--neg)}
.dstat-d.flat,.dm-d.flat{color:var(--muted)}
/* Instrument panel: before -> after, direction, and what it measures. */
.dmetrics{border:1px solid var(--line);border-radius:10px;background:var(--card);margin:24px 0;overflow:hidden}
.dmetric{display:grid;grid-template-columns:1fr 200px 168px;gap:8px 22px;align-items:baseline;padding:15px 18px;border-top:1px solid var(--line)}
.dmetric:first-child{border-top:none}
.dm-name{display:block;font-weight:700;font-size:16px;line-height:1.3}
.dm-gloss{display:block;color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:3px}
.dm-v{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px;color:var(--muted);text-align:right}
.dm-arr{margin:0 8px;color:var(--muted)}
.dm-b{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.dm-d{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;line-height:1.4}
@media(max-width:660px){.dmetric{grid-template-columns:1fr;gap:5px;padding:14px 15px}.dm-d,.dm-v{text-align:left}}
/* The one-line summary, set apart from body prose. */
.doneline{border-left:3px solid var(--accent);background:var(--panel);border-radius:0 10px 10px 0;padding:15px 20px;margin:28px 0}
.dol-k{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.doneline p{margin:0;font-size:17px;line-height:1.6}
/* Honest notes — numbered, and visibly not body prose. */
.dnotes{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:17px 22px 4px;margin:26px 0}
.dn-t{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dn-l{margin:0;padding:0;list-style:none;counter-reset:dn}
.dn-l li{counter-increment:dn;position:relative;padding:14px 0 14px 38px;border-top:1px solid var(--line);font-size:16px;line-height:1.6}
.dn-l li:before{content:counter(dn);position:absolute;left:0;top:14px;width:24px;text-align:right;font-weight:700;font-size:15px;color:var(--accent);font-variant-numeric:tabular-nums}
/* Per-area detail: one labelled row each, including the areas that shipped nothing. */
.dareas{margin:22px 0;border-top:1px solid var(--line)}
.darea{display:grid;grid-template-columns:212px 1fr;gap:5px 24px;padding:13px 2px;border-bottom:1px solid var(--line)}
.da-k{display:flex;flex-wrap:wrap;gap:3px 14px;align-content:flex-start}
.da-p{display:inline-flex;align-items:baseline;gap:7px}
.da-n{font-weight:700;font-size:15.5px}
.da-c{font-weight:700;font-size:15.5px;color:var(--accent);font-variant-numeric:tabular-nums}
.da-c.zero{color:var(--muted);font-weight:600}
.da-s{color:var(--muted);font-weight:600;font-size:12.5px;margin-left:5px}
.da-d{color:var(--ink-1);font-size:15.5px;line-height:1.55}
@media(max-width:660px){.darea{grid-template-columns:1fr;gap:4px}}

/* ── DISPATCH HERO — the top third is a designed hero, not a header ───────
   Eyebrow states what the document IS ("Build report · Week NN"); the DEK
   (the article's subtitle) is the display headline, not grey subtext under
   a small title — the title is demoted INTO the eyebrow. A lede at a
   comfortable measure, a scope pill naming the covered window, and the
   week's stat cards sit ON the same coloured ground, translucent panels
   over the hero gradient rather than a table row. ─────────────────────── */
/* Bleeds to the article card's own edges (the card's fixed 30px/34px padding,
   negated) so the hero reads as a coloured ground the card sits ON, not an
   inset panel floating inside the card's whitespace. */
.dhero{background:linear-gradient(155deg,var(--hero-a) 0%,var(--hero-b) 55%,var(--hero-c) 100%);
  border-radius:14px;padding:40px 40px 34px;margin:0 0 26px;position:relative;overflow:hidden}
.dhero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% 12%,rgba(122,184,255,.20),transparent 46%),
             radial-gradient(circle at 8% 96%,rgba(182,156,255,.16),transparent 42%)}
.dhero-in{position:relative;z-index:1}
.dhero-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--hero-eyebrow)}
.dhero-dek{color:var(--hero-ink-0);font-size:clamp(26px,4vw,42px);font-weight:800;
  letter-spacing:-.015em;line-height:1.18;margin:12px 0 12px;max-width:900px}
.dhero-lede{color:var(--hero-ink-1);font-size:clamp(15px,1.7vw,17.5px);line-height:1.6;max-width:680px;margin:0 0 22px}
.dhero-scope{display:inline-flex;gap:9px;align-items:center;background:var(--hero-card-bg);
  border:1px solid var(--hero-card-line);color:var(--hero-ink-0);border-radius:999px;
  padding:7px 16px;font-size:13.5px;font-weight:600}
.dstats.dstats-hero{margin:26px 0 4px}
.dstats.dstats-hero .dstat{background:var(--hero-card-bg);border:1px solid var(--hero-card-line)}
.dstats.dstats-hero .dstat-k{color:var(--hero-ink-1)}
.dstats.dstats-hero .dstat-n{color:var(--hero-ink-0)}
.dstats.dstats-hero .dstat-f{color:var(--hero-ink-1)}
@media(max-width:600px){.dhero{padding:28px 22px 26px;border-radius:12px}}
.post-dispatch .post-meta{margin:0 0 6px}
.post-dispatch .post-body{padding-top:2px}

/* ── THEME TOGGLE — System (default) / Light / Dark ────────────────────────
   Cycles three states; only an explicit Light/Dark choice stamps
   [data-theme] and persists — "System" clears it so prefers-color-scheme
   drives the page live, including a reader flipping their OS theme with the
   page still open. */
.themebtn{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--line);color:var(--ink-1);border-radius:999px;
  padding:6px 13px 6px 11px;font-size:12.5px;font-weight:700;cursor:pointer;
  line-height:1.3}
.themebtn:hover{border-color:var(--accent)}
.themebtn .ti{font-size:14px;line-height:1}

/* ── LIGHTBOX — a content image opens full-size, dimmed backdrop, tokenised ── */
.markdown-body img{cursor:zoom-in}
.lbox-backdrop{position:fixed;inset:0;background:var(--backdrop);display:flex;
  align-items:center;justify-content:center;flex-direction:column;gap:14px;
  padding:5vh 4vw;z-index:1000}
.lbox-backdrop[hidden]{display:none}
.lbox-backdrop img{max-width:100%;max-height:80vh;border-radius:8px;cursor:zoom-out;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lbox-cap{color:var(--hero-ink-0);font-size:14px;max-width:900px;text-align:center;line-height:1.5}
.lbox-close{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);color:#fff;width:38px;height:38px;border-radius:50%;
  font-size:18px;cursor:pointer;line-height:1}
.lbox-close:hover{background:rgba(255,255,255,.22)}
@media(prefers-reduced-motion:no-preference){.lbox-backdrop img{animation:lbox-in .15s ease}}
@keyframes lbox-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}