/* ============================================================
   DESIGN TOKENS AND THE SHARED COMPONENT LAYER
   ------------------------------------------------------------
   Loaded first, before style.css / evidence.css / tools.css, so a
   later sheet can still override a component deliberately.

   Two rules govern this file, and both come out of defects that
   have already shipped here:

   1. A THEME-DEPENDENT TOKEN IS DECLARED ON `body`, NEVER ON
      `:root`. The day palette is an attribute on <body>, so a
      token declared at :root resolves against the night values in
      day mode and the failure is invisible in the theme you happen
      to be developing in. Only theme-independent tokens — the
      scales — live at :root.

   2. STATUS IS NEVER CARRIED BY HUE ALONE. Every status token
      comes with a glyph and a border style. The three pigments
      (lapis / cinnabar / gold) are already spent on the reading
      lenses and the reader's own position; a fourth and fifth hue
      would not be readable anyway, and would not survive a
      monochrome print or a red-green deficiency.
   ============================================================ */

:root{

  /* Print ink. Not theme-dependent — paper is white in either theme — so it
     is declared here rather than on body. Used only inside @media print. */
  --print-ink:#000;

  /* ---------------------------------------------------------- type scale
     Eleven roles, each with a size and a line-height. Nothing on any
     page sets a font-size that is not one of these, unless it is a
     deliberate one-off documented at the point of use.

     The scale is not geometric. It is tuned to three typefaces with
     very different x-heights: Fraunces sets large and needs tight
     leading, Literata sets small and needs loose, Plex Mono sets
     wide and is only ever used below 13px. */

  --t-display:clamp(38px,7vw,72px);   --lh-display:1.02;   /* front-door statement */
  --t-h1:clamp(32px,5.6vw,56px);      --lh-h1:1.05;        /* page title */
  --t-h2:clamp(22px,3vw,30px);        --lh-h2:1.18;        /* section */
  --t-h3:19px;                        --lh-h3:1.3;         /* subsection */
  --t-h4:15.5px;                      --lh-h4:1.35;        /* run-in heading */
  --t-lede:17.5px;                    --lh-lede:1.6;       /* standfirst under a title */
  --t-body:17px;                      --lh-body:1.68;      /* reading column */
  --t-body-sm:14.5px;                 --lh-body-sm:1.6;    /* dense prose, table cells */
  --t-support:13px;                   --lh-support:1.55;   /* notes, captions in prose */
  --t-meta:11px;                      --lh-meta:1.5;       /* mono metadata */
  --t-micro:9.5px;                    --lh-micro:1.45;     /* mono kickers, uppercase labels */
  --t-data:12.5px;                    --lh-data:1.5;       /* mono identifiers, references */
  --t-numeral:clamp(26px,4vw,40px);   --lh-numeral:1;      /* an orienting number */

  --tr-micro:.13em;   /* letter-spacing for uppercase micro labels */
  --tr-meta:.06em;

  /* ---------------------------------------------------------- spacing
     One scale. A margin that is not on it is a mistake, not a nuance. */
  --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;  --s-5:24px;
  --s-6:32px;  --s-7:48px;  --s-8:64px;  --s-9:96px;

  /* ---------------------------------------------------------- layout */
  --w-reading:76ch;      /* the brief's measure, unchanged */
  --w-text:74ch;         /* prose outside the brief */
  --w-page:1120px;       /* standard page */
  --w-wide:1320px;       /* comparative data that earns the width */
  --gutter:32px;
  --gutter-md:24px;
  --gutter-sm:18px;
  --chrome-h:52px;

  /* ---------------------------------------------------------- radii, motion
     Radius is 0 nearly everywhere: this is a document, and rounded
     corners are the fastest way to make one look like a dashboard.
     2px exists only for things that must read as pressable pills. */
  --r-0:0; --r-1:2px; --r-pill:999px;

  --dur-1:120ms;   /* state change on a control */
  --dur-2:220ms;   /* disclosure, filter repaint */
  --dur-3:340ms;   /* dialog */
  --ease:cubic-bezier(.2,.6,.25,1);

  --z-chrome:90; --z-sticky:60; --z-dialog:200; --z-scrim:190;

  /* target sizes: 24px is the AA minimum, 32 is the coarse-pointer floor */
  --hit:24px; --hit-coarse:32px;
}

/* ============================================================
   THEME-DEPENDENT TOKENS — declared on body, both themes.
   These are derived from the existing palette, which is not being
   restyled. They give the derived values names so a component does
   not have to reach for a raw --ink-2 and guess.
   ============================================================ */

body{
  --surface-page:var(--ink-0);
  --surface-raised:var(--ink-1);
  --surface-high:var(--ink-2);
  --surface-inset:color-mix(in srgb, var(--ink-0) 72%, #000);
  --surface-interactive:var(--ink-1);
  --surface-interactive-hover:var(--ink-2);

  --border-hair:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  --border-std:1px solid var(--line);
  --border-strong:1px solid var(--ink-3);
  --border-accent:2px solid var(--mech);

  --text-1:var(--paper);        /* primary */
  --text-2:var(--paper-dim);    /* secondary prose */
  --text-3:var(--paper-faint);  /* metadata — AA-corrected token */

  --focus-ring:2px solid var(--live);
  --focus-offset:2px;

  /* ---- semantic status ----------------------------------------------
     Each status has a hue AND a glyph AND a border treatment. The glyph
     is emitted by ::before on .badge, so the meaning survives greyscale.

       verified        ◆ solid       carried by a primary or official source
       provisional     ◈ dashed      real, but not settled — preliminary, proposed
       interpretation  ✎ italic      the author's reading, not a finding
       secondary       ○ hollow      carried by press / research / advocacy only
       unresolved      ? dotted      no directly supporting external source
       historical      ⌫ muted       superseded, annulled, withdrawn
       warning         △             needs attention
       error           ✕             failed
     ------------------------------------------------------------------ */
  /* Two of the three pigments do not clear AA at 9.5px on the raised
     surfaces these badges sit on, measured: gold is 3.47 in day mode and
     cinnabar 3.86. Both therefore have a text-weight variant, and the
     status tokens use the variant rather than the pigment. The pigment is
     still what fills a node or draws a rule — this is about type only. */
  --live-text:var(--live);
  /* the night cinnabar measures 4.20 on a raised surface and 3.97 on a
     status pill; lifted until it clears 4.5 everywhere it carries type */
  --crit-text:#DE7059;

  --st-verified:var(--mech);
  --st-provisional:var(--live-text);
  --st-interpretation:var(--crit-text);
  --st-secondary:var(--paper-dim);
  --st-unresolved:var(--crit-text);
  --st-historical:var(--paper-dim);
  --st-warning:var(--live-text);
  --st-error:var(--crit-text);
}

body[data-theme="light"]{
  --surface-inset:color-mix(in srgb, var(--ink-0) 82%, #6B5A3A);
  /* 5.60 and 5.60 on the darkest day surface in use, against 3.47 and 3.86
     for the pigments themselves */
  --live-text:#6E540E;
  --crit-text:#8E2F19;
}

/* ============================================================
   ACCESSIBILITY PRIMITIVES
   ============================================================ */

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
}

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================================
   THE CHROME — one header, rendered by js/shell.js on every page.
   It replaced five hand-written headers that had drifted apart:
   different link labels for the same page, no current-page state,
   no search, and a skip link pointing at an id that existed on one
   page out of six.
   ============================================================ */

.chrome{
  position:sticky;top:0;z-index:var(--z-chrome);
  display:flex;align-items:stretch;gap:0;
  min-height:var(--chrome-h);
  background:color-mix(in srgb, var(--ink-0) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:var(--border-std);
}
.chrome-inner{
  width:100%;max-width:var(--w-wide);margin:0 auto;
  padding:0 var(--gutter);
  display:flex;align-items:center;gap:var(--s-4);
}
.chrome-brand{
  display:flex;align-items:center;gap:var(--s-2);
  text-decoration:none;color:var(--text-1);flex:none;
  padding:var(--s-2) 0;
}
.chrome-brand .mark{width:9px;height:9px;background:var(--mech);transform:rotate(45deg);flex:none}
.chrome-brand b{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:-.01em;white-space:nowrap}
.chrome-brand:hover .mark{background:var(--live)}

.chrome-nav{display:flex;align-items:stretch;gap:0;min-width:0;overflow-x:auto;scrollbar-width:none}
.chrome-nav::-webkit-scrollbar{display:none}
.chrome-nav a{
  display:flex;align-items:center;white-space:nowrap;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;text-decoration:none;color:var(--text-3);
  padding:var(--s-4) var(--s-3);border-bottom:2px solid transparent;
  min-height:var(--hit-coarse);
}
.chrome-nav a:hover{color:var(--text-1)}
.chrome-nav a[aria-current="page"]{color:var(--text-1);border-bottom-color:var(--live)}
.chrome-sp{margin-left:auto}
.chrome-tools{display:flex;align-items:center;gap:var(--s-2);flex:none}

.chrome-btn{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:var(--hit-coarse);padding:var(--s-2) var(--s-3);
  background:var(--surface-interactive);border:var(--border-std);color:var(--text-2);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);
  cursor:pointer;
}
.chrome-btn:hover{border-color:var(--mech);color:var(--text-1)}
.chrome-btn kbd{
  font-family:var(--mono);font-size:9px;background:var(--ink-3);
  /* On the --ink-3 chip, --text-3 measured 3.83 night / 3.59 day and
     --text-2 4.34 day — both under AA. A shortcut hint is small, but it is
     information, not decoration, so it takes the primary text colour. */
  color:var(--text-1);padding:2px 4px;border:var(--border-std);
}
.chrome-btn svg{width:14px;height:14px;flex:none}

@media (max-width:820px){
  .chrome-inner{padding:0 var(--gutter-sm);gap:var(--s-2)}
  .chrome-brand b{display:none}
  .chrome-btn .chrome-btn-word,.chrome-btn kbd{display:none}
  .chrome-btn{padding:var(--s-2)}
}

/* ---------------------------------------------------------- breadcrumbs */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  padding:var(--s-5) 0 0;margin:0;list-style:none;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-3);
}
.crumbs li{display:flex;align-items:center;gap:var(--s-2)}
.crumbs li+li::before{content:"/";color:var(--ink-3)}
.crumbs a{
  color:var(--mech);text-decoration:none;
  display:inline-flex;align-items:center;min-height:var(--hit);
}
.crumbs a:hover{color:var(--live)}
.crumbs [aria-current="page"]{color:var(--text-2);display:inline-flex;align-items:center;min-height:var(--hit)}

/* ---------------------------------------------------------- section nav (detail pages) */
.subnav{
  position:sticky;top:var(--chrome-h);z-index:var(--z-sticky);
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  border-bottom:var(--border-std);
  background:color-mix(in srgb, var(--ink-0) 92%, transparent);
  backdrop-filter:blur(10px);
  margin:var(--s-6) 0 0;
}
.subnav::-webkit-scrollbar{display:none}
.subnav a{
  white-space:nowrap;text-decoration:none;color:var(--text-3);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;padding:var(--s-3) var(--s-4);
  border-bottom:2px solid transparent;min-height:var(--hit-coarse);
  display:flex;align-items:center;
}
.subnav a:hover{color:var(--text-1)}
.subnav a[aria-current="true"]{color:var(--text-1);border-bottom-color:var(--live)}

/* ============================================================
   STATUS BADGE — hue + glyph + border. Never hue alone.
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;padding:2px 7px;
  border:1px solid currentColor;color:var(--text-3);white-space:nowrap;
}
/* A badge is normally two or three words and must not break across lines.
   The provision-level verification notes are whole sentences wearing the
   same class, and at 390px one of them was 448px wide and pushed the
   document 93px sideways — pre-existing on instrument.html, which is the
   page the overflow harness had not yet been pointed at. Long badges wrap;
   short ones behave exactly as before. */
/* Short badges keep nowrap so a two-word state never breaks. A badge whose
   text is a sentence gets to wrap: at 390px the provisions table's
   "article number not confirmed against the consolidated text" measured
   448px and pushed the document sideways. Length decides, not a new class,
   so a future long badge is covered without anyone remembering to opt in. */
.badge{max-width:100%}
.badge-long{white-space:normal;text-transform:none;letter-spacing:0;align-items:flex-start}
.badge::before{font-size:1.05em;line-height:1;flex:none}
.badge[data-st="verified"]{color:var(--st-verified);border-style:solid}
.badge[data-st="verified"]::before{content:"◆"}
.badge[data-st="provisional"]{color:var(--st-provisional);border-style:dashed}
.badge[data-st="provisional"]::before{content:"◈"}
.badge[data-st="interpretation"]{color:var(--st-interpretation);font-style:italic}
.badge[data-st="interpretation"]::before{content:"✎";font-style:normal}
.badge[data-st="secondary"]{color:var(--st-secondary)}
.badge[data-st="secondary"]::before{content:"○"}
.badge[data-st="unresolved"]{color:var(--st-unresolved);border-style:dotted}
.badge[data-st="unresolved"]::before{content:"?"}
.badge[data-st="historical"]{color:var(--st-historical);opacity:.85}
.badge[data-st="historical"]::before{content:"⌫"}
.badge[data-st="warning"]{color:var(--st-warning)}
.badge[data-st="warning"]::before{content:"△"}
.badge[data-st="error"]{color:var(--st-error)}
.badge[data-st="error"]::before{content:"✕"}
.badge[data-st="neutral"]{color:var(--text-3);border-color:var(--ink-3)}

/* ============================================================
   FRESHNESS — how old is this record, said in words as well as hue.
   ============================================================ */
.fresh{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);
  color:var(--text-3);
}
.fresh b{color:var(--text-2);font-weight:500}
.fresh .fresh-flag{color:var(--st-warning)}
.fresh .fresh-flag::before{content:"△ ";}

/* ============================================================
   EVIDENCE — the site's defining primitive, one component.
   Answers, in fixed order: what is claimed · what carries it ·
   what kind of source that is · when it was last checked.
   ============================================================ */
.ev{
  display:grid;gap:var(--s-2);
  padding:var(--s-3) var(--s-4);
  border:var(--border-std);border-left:3px solid var(--text-3);
  background:var(--surface-raised);
}
.ev[data-grade="primary"]{border-left-color:var(--st-verified)}
.ev[data-grade="official"]{border-left-color:var(--st-verified)}
.ev[data-grade="secondary"]{border-left-color:var(--st-secondary)}
.ev[data-grade="interpretation"]{border-left-color:var(--st-interpretation)}
.ev[data-grade="unresolved"]{border-left-color:var(--st-unresolved);border-left-style:dotted}
.ev-kicker{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-3);
  display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;
}
.ev-claim{font-family:var(--body);font-size:var(--t-body-sm);line-height:var(--lh-body-sm);color:var(--text-1);margin:0}
.ev-src{display:grid;gap:var(--s-1);font-size:var(--t-support);line-height:var(--lh-support);color:var(--text-2)}
.ev-src a{color:var(--mech);text-decoration:underline;text-underline-offset:2px}
.ev-src a:hover{color:var(--live)}
.ev-foot{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center}

/* external links, marked once, everywhere */
a.ext::after{
  content:"↗";font-family:var(--mono);font-size:.8em;
  margin-left:.28em;color:var(--text-3);vertical-align:baseline;
}
a.ext:hover::after{color:var(--live)}

/* ============================================================
   FILTERS — one system: labelled control, selected chips, live
   count, clear-all, and a sheet instead of a squeeze on mobile.
   ============================================================ */
.filters{
  border-top:var(--border-std);border-bottom:var(--border-std);
  margin:var(--s-6) 0 var(--s-5);
}
.filters-row{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);align-items:end;
  padding:var(--s-3) 0;
}
.field{display:grid;gap:var(--s-1);min-width:0}
.field>span{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-3);
}
.field select,.field input{
  font-family:var(--mono);font-size:var(--t-meta);color:var(--text-1);
  background:var(--surface-high);border:var(--border-std);
  padding:6px var(--s-2);min-height:var(--hit-coarse);max-width:100%;
}
.filters-state{
  display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;
  padding:0 0 var(--s-3);
}
.filters-state:empty{display:none}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);
  padding:4px var(--s-2);min-height:var(--hit);
  border:1px solid var(--mech);color:var(--mech);background:var(--mech-dim);
}
.chip button{
  all:unset;cursor:pointer;line-height:1;padding:2px 3px;
  min-width:var(--hit);min-height:var(--hit);
  display:inline-flex;align-items:center;justify-content:center;
}
.chip button:hover{color:var(--live)}
.result-count{
  font-family:var(--mono);font-size:var(--t-meta);color:var(--text-3);
  margin-left:auto;
}
.link-btn{
  all:unset;cursor:pointer;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--crit);
  min-height:var(--hit);display:inline-flex;align-items:center;
}
.link-btn:hover{color:var(--live)}
.link-btn:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* ============================================================
   STATES — empty, loading, error. A blank area is a bug.
   ============================================================ */
.state{
  display:grid;gap:var(--s-3);justify-items:start;
  padding:var(--s-7) var(--s-5);
  border:1px dashed var(--ink-3);background:var(--surface-raised);
}
.state h3{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-3);margin:0;font-weight:500;
}
.state p{font-family:var(--body);font-size:var(--t-body-sm);line-height:var(--lh-body-sm);color:var(--text-2);margin:0;max-width:56ch}
.state[data-kind="error"]{border-style:solid;border-color:var(--crit)}
.state[data-kind="loading"]{border-color:var(--line)}
.state .state-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}

.skeleton{
  display:block;height:1em;background:var(--surface-high);
  animation:sk 1.4s var(--ease) infinite;
}
@keyframes sk{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){ .skeleton{animation:none;opacity:.6} }

/* ============================================================
   AN ORIENTING NUMBER — used sparingly, never as a dashboard KPI.
   ============================================================ */
.numstat{display:grid;gap:var(--s-1)}
.numstat b{
  font-family:var(--mono);font-weight:500;font-size:var(--t-numeral);
  line-height:var(--lh-numeral);color:var(--text-1);font-variant-numeric:tabular-nums;
}
.numstat span{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-2);
}
.numstat[data-tone="unknown"] b{color:var(--text-2);font-size:var(--t-h3)}

/* ============================================================
   TABLE → RECORD. The responsive rule for every dense table on
   the site: full table on desktop, structured records below 720px.
   Horizontal scroll is the fallback, not the plan.

   Markup contract: <table class="t-rec"> with <td data-label="…">.
   ============================================================ */
@media (max-width:720px){
  table.t-rec,
  table.t-rec thead,
  table.t-rec tbody,
  table.t-rec tr,
  table.t-rec th,
  table.t-rec td{display:block;width:auto}
  table.t-rec{min-width:0!important}
  table.t-rec thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  table.t-rec tbody tr{
    border:var(--border-std);background:var(--surface-raised);
    padding:var(--s-3) var(--s-4);margin:0 0 var(--s-3);
  }
  table.t-rec tbody td,table.t-rec tbody th{
    border:0;padding:var(--s-2) 0;text-align:left;width:auto!important;
  }
  table.t-rec tbody td+td,table.t-rec tbody th+td{border-top:var(--border-hair)}
  table.t-rec tbody td[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:var(--s-1);
    font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
    text-transform:uppercase;color:var(--text-3);
  }
  .t-scroll{overflow:visible!important;border:0!important}
}

/* ============================================================
   PAGE SCAFFOLD used by the tool and detail pages.
   ============================================================ */
.page-shell{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter) var(--s-9)}
.page-shell[data-width="wide"]{max-width:var(--w-wide)}
.page-head{padding:var(--s-6) 0 0;border-bottom:var(--border-std);margin-bottom:var(--s-6)}
.page-head h1{
  font-family:var(--display);font-weight:400;font-size:var(--t-h1);line-height:var(--lh-h1);
  letter-spacing:-.015em;margin:var(--s-4) 0 0;color:var(--text-1);text-wrap:balance;max-width:22ch;
}
.page-head .lede{
  font-family:var(--body);font-size:var(--t-lede);line-height:var(--lh-lede);
  color:var(--text-2);max-width:64ch;margin:var(--s-4) 0 var(--s-6);
}
.section{margin:var(--s-8) 0 0;scroll-margin-top:calc(var(--chrome-h) + 56px)}
.section>h2{
  font-family:var(--display);font-weight:400;font-size:var(--t-h2);line-height:var(--lh-h2);
  margin:0 0 var(--s-2);color:var(--text-1);
}
.section-kicker{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-3);margin:0 0 var(--s-2);
}
.section>p{font-family:var(--body);font-size:var(--t-body-sm);line-height:1.65;color:var(--text-2);max-width:var(--w-text)}
.rule{border:0;border-top:var(--border-std);margin:var(--s-7) 0}

@media (max-width:820px){
  .page-shell{padding:0 var(--gutter-sm) var(--s-8)}
}

/* ============================================================
   METADATA ROW — label above value, mono label, wraps on its own.
   Replaces the label-and-control-on-different-lines failure mode.
   ============================================================ */
.meta-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-4) var(--s-5);margin:var(--s-5) 0 0;
}
.meta-item{display:grid;gap:var(--s-1);align-content:start}
.meta-item>dt,.meta-item .k{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-3);margin:0;
}
.meta-item>dd,.meta-item .v{
  margin:0;font-family:var(--body);font-size:var(--t-body-sm);line-height:1.5;color:var(--text-1);
}
.meta-item .v.mono{font-family:var(--mono);font-size:var(--t-data)}

/* ============================================================
   RELATED ENTITIES — the knowledge graph, made walkable.
   ============================================================ */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-5);margin:var(--s-5) 0 0}
.rel-col{display:grid;gap:var(--s-2);align-content:start}
.rel-col h3{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-3);margin:0;font-weight:500;
}
.rel-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.rel-col a{
  display:flex;align-items:center;gap:var(--s-2);min-height:var(--hit);
  font-family:var(--body);font-size:var(--t-body-sm);color:var(--mech);text-decoration:none;
  border-bottom:var(--border-hair);padding:var(--s-1) 0;
}
.rel-col a:hover{color:var(--live)}
.rel-col a .n{font-family:var(--mono);font-size:var(--t-micro);color:var(--text-3);margin-left:auto}
.rel-col .none{font-family:var(--mono);font-size:var(--t-micro);color:var(--text-3);font-style:italic}

/* ============================================================
   PRINT — the apparatus should survive paper.
   ============================================================ */
@media print{
  .chrome,.subnav,.filters{position:static;background:none;backdrop-filter:none}
  .chrome-tools{display:none}
}

/* ============================================================
   PALETTE ADDITIONS — the type filter, the scope readout, and the
   destinations block the brief exposes in its overlays. The rest of
   the palette's styling stays in style.css, where it already was.
   ============================================================ */
.cmdk-filters{
  display:flex;flex-wrap:wrap;gap:var(--s-1);
  padding:var(--s-2) var(--s-3);border-bottom:var(--border-std);
}
.cmdk-filters[hidden]{display:none}
.cmdk-filter{
  all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--text-3);
  padding:4px var(--s-2);min-height:var(--hit);border:1px solid transparent;
}
.cmdk-filter i{font-style:normal;opacity:.7;font-size:.9em}
.cmdk-filter:hover{color:var(--text-1)}
.cmdk-filter[aria-pressed="true"]{color:var(--live);border-color:var(--live)}
.cmdk-filter:focus-visible{outline:var(--focus-ring);outline-offset:1px}
.cmdk-scope{margin-left:auto;opacity:.8}
.cmdk-results .state{border:0;background:none;padding:var(--s-6) var(--s-4);justify-items:start}

.chrome-lang{text-decoration:none}
.chrome-lang b{color:var(--text-1);font-weight:500}

/* destinations, shown inside the brief's contents overlay and controls sheet */
.dest{border-top:var(--border-std);margin:var(--s-5) 0 0;padding:var(--s-4) 0 0}
.dest-label{
  display:block;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--text-3);
  margin-bottom:var(--s-2);
}
.dest ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}
.dest a{
  display:inline-flex;align-items:center;min-height:var(--hit);
  font-family:var(--body);font-size:var(--t-body-sm);color:var(--mech);text-decoration:none;
  border-bottom:1px solid transparent;
}
.dest a:hover{color:var(--live);border-bottom-color:var(--live)}

/* ============================================================
   ONE FORM OR THE OTHER. Used where a component has a genuinely
   different shape on a narrow screen rather than a squeezed one —
   the comparison table being the case that forced it.
   ============================================================ */
.only-narrow{display:none}
@media (max-width:720px){
  .only-wide{display:none}
  .only-narrow{display:block}
}
.dna-records{gap:var(--s-4)}
@media (max-width:720px){ .dna-records{display:grid} }
.dna-rec{border:var(--border-std);background:var(--surface-raised);padding:var(--s-4)}
.dna-rec h3,.dna-rec h2,.dna-rec h4{
  font-family:var(--display);font-weight:600;font-size:var(--t-h3);line-height:var(--lh-h3);
  margin:0 0 var(--s-3);padding-bottom:var(--s-2);border-bottom:var(--border-strong);color:var(--text-1);
}
.dna-rec dl{margin:0;display:grid;gap:var(--s-3)}
.dna-rec-row{display:grid;gap:var(--s-1)}
.dna-rec-row dt{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-3);
}
.dna-rec-row dd{margin:0;font-size:var(--t-body-sm);line-height:var(--lh-body-sm);color:var(--text-2)}

/* The theme control keeps the site's existing dot convention. Below 820px its
   word is hidden, and without this the button rendered as an empty box: the
   dot was styled only under .themebtn in style.css. */
.chrome-btn .dot{width:9px;height:9px;border-radius:50%;background:var(--paper);flex:none}
body[data-theme="light"] .chrome-btn .dot{background:var(--ink-0);box-shadow:0 0 0 1px var(--ink-3)}

/* ============================================================
   THE FRONT DOOR — "what you can do here".
   Deliberately not a card grid: a rule, a label, and five lines of
   type. Cards would say "five equivalent products"; this says
   "five ways into one body of work", which is what it is.
   ============================================================ */
.portal-doors{margin:var(--s-7) 0 0;border-top:var(--border-std);padding-top:var(--s-5)}
.doors-label{
  font-family:var(--mono);font-weight:500;font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-3);margin:0 0 var(--s-4);
}
.portal-doors ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:var(--s-4) var(--s-6);
}
/* Three columns at most. Wider than that and each blurb becomes two short
   lines with a long ragged gap, which reads as a card grid without the
   cards. There are no dividers between the items: the block already sits
   under a rule, and ruling every cell of a grid is how a list of five
   destinations starts to look like a dashboard. */
@media (min-width:640px){ .portal-doors ul{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .portal-doors ul{grid-template-columns:repeat(3,1fr)} }
.portal-doors a{
  display:grid;gap:var(--s-1);padding:var(--s-1) 0;text-decoration:none;color:var(--text-1);
}
.portal-doors b{
  font-family:var(--display);font-weight:600;font-size:var(--t-h4);line-height:var(--lh-h4);
}
.portal-doors b::after{content:" \2192";font-family:var(--mono);font-size:.75em;color:var(--text-3)}
.portal-doors a:hover b,.portal-doors a:focus-visible b{color:var(--live)}
.portal-doors a:hover b::after{color:var(--live)}
.portal-doors span{font-family:var(--body);font-size:var(--t-support);line-height:var(--lh-support);color:var(--text-2)}
  .portal-doors li:nth-child(2){border-top:var(--border-hair)}
}