/* Fabricate Pro console. Tokens and components lifted from the approved
   mockup, docs/proposals/admin_console/index.html (itself frozen from
   docs/design/BOOK/book.css, 2026-09-25). The generated tokens
   (WEB_CONSOLE §7.1, export_tokens_test.dart) replace the colour block when
   they land; until then change colours in bore_theme.dart, book.css and here.
   Review-page chrome from the mockup (.sheet, .window, .urlbar, .annot) is
   left in and unused. */
/* ── tokens and components: copied (frozen) from docs/design/BOOK/book.css, 2026-09-25 ──
   lines 1-153 (colour, type, space, layout, motion, focus, state), 203-377 (components),
   411-447 (web-only components, WEB_GUIDE §7) and 583-640 (the book's measured corrections).
   Do not edit here; regenerate from book.css. */
/* ── colour: hand-copied from app/lib/theme/bore_theme.dart ─────────────── */
:root{
  color-scheme:light;
  --page:#E3E2DE; --card:#EEEDEA; --well:#F5F4F1; --raised:#F7F6F3; --hero:#D8D7D3;
  --heroWell:#E9E8E4; --ink:#2A2A29; --ink2:#3C3C3B; --muted:#5D5D5B;
  --pill:#464644; --pillInk:#F5F4F1; --hairline:#D3D2CE; --tint:#DDDCD8;
  --control:#5D5D5B; --knob:#F5F4F1;
  --verified:#D2DDD0; --caution:#E8DABF; --derived:#DCDBD7; --onPastel:#2A2A29;
  --verifiedInk:#3F6B4B; --warnInk:#7E5A22; --danger:#8E3F36;
  --grid:#ECEBE7; --drawDim:#4A4A48;
  --on-primary:var(--pillInk);
  /* BoreElevation.card, exactly: 3.9% blur 2 y1 + 5.9% blur 16 spread -2 y3 */
  --shadow-card:0 1px 2px rgba(42,44,47,.039),0 3px 16px -2px rgba(42,44,47,.059);
  --shadow-ctl:0 2px 6px -1px rgba(17,17,19,.06);
  /* state overlays — WEB_GUIDE §5.1 */
  --state:transparent;
  --hover:rgba(42,42,41,.06); --press:rgba(42,42,41,.12); --drag:rgba(42,42,41,.16);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#1C1C1D; --card:#252526; --well:#1F1F20; --raised:#2F2F30; --hero:#333334;
  --heroWell:#262627; --ink:#E6E6E3; --ink2:#CDCDCA; --muted:#9D9D9A;
  --pill:#CFCFCC; --pillInk:#1C1C1D; --hairline:#3A3A3B; --tint:#3A3A3B;
  --control:#727270; --knob:#1F1F20;
  --verified:#A9C2A8; --caution:#CDB58D; --derived:#B9B9B6; --onPastel:#1C1C1D;
  --verifiedInk:#9CC7A3; --warnInk:#D8B77F; --danger:#DC9C92;
  --grid:#262627; --drawDim:#BDBDBA;
  --shadow-card:0 -1px 0 rgba(208,208,205,.14);
  --shadow-ctl:none;
  --hover:rgba(230,230,227,.08); --press:rgba(230,230,227,.12); --drag:rgba(230,230,227,.16);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#1C1C1D; --card:#252526; --well:#1F1F20; --raised:#2F2F30; --hero:#333334;
    --heroWell:#262627; --ink:#E6E6E3; --ink2:#CDCDCA; --muted:#9D9D9A;
    --pill:#CFCFCC; --pillInk:#1C1C1D; --hairline:#3A3A3B; --tint:#3A3A3B;
    --control:#727270; --knob:#1F1F20;
    --verified:#A9C2A8; --caution:#CDB58D; --derived:#B9B9B6; --onPastel:#1C1C1D;
    --verifiedInk:#9CC7A3; --warnInk:#D8B77F; --danger:#DC9C92;
    --grid:#262627; --drawDim:#BDBDBA;
    --shadow-card:0 -1px 0 rgba(208,208,205,.14);
    --shadow-ctl:none;
    --hover:rgba(230,230,227,.08); --press:rgba(230,230,227,.12); --drag:rgba(230,230,227,.16);
  }
}

/* ── type, space, layout and motion tokens — WEB_GUIDE §2 §3 §4 §5.5 ────── */
:root{
  --fs-display:1.875rem; --lh-display:36px; --tk-display:-.0213em; --fw-display:700;
  --fs-answer:1.5rem;    --lh-answer:30px;  --tk-answer:-.0195em;  --fw-answer:700;
  --fs-value:1.1875rem;  --lh-value:24px;   --tk-value:-.0156em;   --fw-value:600;
  --fs-label:1rem;       --lh-label:24px;   --tk-label:-.0110em;   --fw-label:500;
  --fs-prose:1rem;       --lh-prose:26px;   --tk-prose:-.0110em;   --fw-prose:400;
  --fs-meta:.875rem;     --lh-meta:20px;    --tk-meta:-.0062em;    --fw-meta:500;
  --fs-caption:.75rem;   --lh-caption:16px; --tk-caption:0;        --fw-caption:600;
  --measure:68ch;
  --sp-3xs:2px; --sp-2xs:4px; --sp-xs:8px;  --sp-sm:12px;
  --sp-md:16px; --sp-lg:24px; --sp-xl:32px;
  --sp-2xl:48px; --sp-3xl:64px; --sp-4xl:96px;
  --s1:var(--sp-2xs); --s2:var(--sp-xs); --s3:var(--sp-sm);
  --s4:var(--sp-md);  --s5:var(--sp-lg); --s6:var(--sp-xl);
  --r-sm:12px; --r-md:16px; --r-xl:24px;
  --shell-max:1440px; --content-max:1200px; --column-max:680px;
  --card-max:720px;   --pane-min:320px;     --rail:88px;
  --gutter:16px; --card-pad:16px;
  --toc-h:64px;
  /* control and row heights, and the pill corner — tokens so the book's
     editor can move them; values are the app's (DESIGN_GUIDE §4). */
  --r-pill:999px;
  --h-primary:56px; --h-compact:48px; --h-chip:40px;
  --h-row:64px; --h-row-lead:72px; --h-row-art:88px;
  --w-tile:168px; --h-tile:132px;
  --dur-instant:0ms; --dur-fast:90ms; --dur-out:140ms; --dur-base:160ms;
  --dur-chevron:180ms; --dur-enter:220ms;
  --ease-out:cubic-bezier(.2,0,0,1);
}
@media (min-width:600px){:root{--gutter:24px}}
@media (min-width:1200px){:root{--gutter:32px;--card-pad:24px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-variant-numeric:normal;line-height:1.45}

/* the seven steps. six come from BoreText; `prose` is web-only (D4). */
.display{font-size:var(--fs-display);line-height:var(--lh-display);
  font-weight:var(--fw-display);letter-spacing:var(--tk-display)}
.answer {font-size:var(--fs-answer);line-height:var(--lh-answer);
  font-weight:var(--fw-answer);letter-spacing:var(--tk-answer)}
.value  {font-size:var(--fs-value);line-height:var(--lh-value);
  font-weight:var(--fw-value);letter-spacing:var(--tk-value)}
.label  {font-size:var(--fs-label);line-height:var(--lh-label);
  font-weight:var(--fw-label);letter-spacing:var(--tk-label)}
.prose  {font-size:var(--fs-prose);line-height:var(--lh-prose);
  font-weight:var(--fw-prose);letter-spacing:var(--tk-prose)}
.meta   {font-size:var(--fs-meta);line-height:var(--lh-meta);
  font-weight:var(--fw-meta);letter-spacing:var(--tk-meta)}
.caption{font-size:var(--fs-caption);line-height:var(--lh-caption);
  font-weight:var(--fw-caption);letter-spacing:var(--tk-caption)}
/* tabular on the number steps only — never on titles or labels, where it
   widens the hyphen in "1/2-13" and "DIN 125-A". */
.answer,.value,.meta,.caption,.num{font-variant-numeric:tabular-nums}
.ident{font-variant-numeric:tabular-nums slashed-zero}
.b600{font-weight:600}.b700{font-weight:700}
.muted{color:var(--muted)}.ink2{color:var(--ink2)}
/* §6: inkMuted is never used below 14 px. 12 px uses inkSecondary. */
.caption.muted{color:var(--ink2)}
/* a unit is one step below its value, on the same baseline */
.u{font-size:var(--fs-value);line-height:var(--lh-value);font-weight:600;
  letter-spacing:var(--tk-value);color:var(--muted);font-variant-numeric:tabular-nums}
.u.sm{font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--tk-label)}

/* ── focus, verbatim from WEB_GUIDE §5.2 ────────────────────────────────── */
:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
:where([aria-pressed="true"],[aria-selected="true"]):focus-visible{
  box-shadow: inset 0 0 0 2px var(--on-primary);
}
:focus:not(:focus-visible){ outline: none; }

/* ── the one state mechanism ────────────────────────────────────────────── */
.pill,.act,.orow,.frow,.krow,.srow,.crow2,.tile,.field,.toc a,.round,.dropzone,
.data-table tbody tr td{
  background-image:linear-gradient(var(--state),var(--state));
  transition:background-image var(--dur-out) var(--ease-out),
             color var(--dur-out) var(--ease-out);
}
@media (hover:hover){
  .pill:hover,.act:hover,.tile:hover,.orow:hover,.frow:hover,.toc a:hover,
  .round:hover{--state:var(--hover);transition-duration:var(--dur-fast);cursor:pointer}
  .orow:hover .muted,.frow:hover .muted{color:var(--ink2)}
}
.pill:active,.act:active,.tile:active,.orow:active,.frow:active,
.toc a:active,.round:active{--state:var(--press)}
/* the whole matrix comes from here: one attribute sets one custom property */
[data-state="hover"]{--state:var(--hover)}
[data-state="hover"] .muted{color:var(--ink2)}
[data-state="active"]{--state:var(--press)}
[data-state="drag-over"]{--state:var(--drag)}
[data-state="focus-visible"]{outline:2px solid var(--ink);outline-offset:2px}
[data-state="disabled"]{opacity:.32;cursor:default}
[data-state="read-only"]{background-color:var(--well);color:var(--ink);cursor:default}

@media (prefers-reduced-motion: reduce){
  :root{--dur-fast:1ms;--dur-out:1ms;--dur-base:1ms;--dur-chevron:1ms;--dur-enter:1ms}
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ── the real components ────────────────────────────────────────────────── */
/* WCAG 1.4.12: a fixed height on anything holding text does not survive a
   user stylesheet at line-height 1.5. The documented height is the minimum. */
.pill{border:0;background-color:var(--raised);color:var(--ink);border-radius:var(--r-pill);
  min-height:var(--h-primary);padding:0 var(--sp-lg);font-family:inherit;
  font-size:var(--fs-label);line-height:var(--lh-label);font-weight:600;
  letter-spacing:var(--tk-label);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:var(--sp-xs);
  box-shadow:var(--shadow-ctl)}
.pill.compact{min-height:var(--h-compact);padding:0 var(--sp-md)}
.pill.on{background-color:var(--pill);color:var(--pillInk);box-shadow:none}
.pill.ghosted{opacity:.32}
.pill.intrack{box-shadow:none}
.track{background:var(--well);border-radius:var(--r-pill);padding:0;display:inline-flex;gap:0}
.track .pill{box-shadow:none}
/* A segment scales down, it never wraps (the app: FittedBox + maxLines 1). */
.track .pill,.pill{white-space:nowrap}
.act{border:0;background-color:var(--pill);color:var(--pillInk);border-radius:var(--r-pill);
  min-height:var(--h-primary);width:100%;font-family:inherit;font-size:var(--fs-label);
  line-height:var(--lh-label);font-weight:600;letter-spacing:var(--tk-label);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-xs)}
.act.ghosted{opacity:.32}
.quiet{background-color:var(--raised);color:var(--ink)}

.tile{background-color:var(--raised);border-radius:var(--r-md);width:var(--w-tile);
  min-height:var(--h-tile);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--sp-2xs);box-shadow:var(--shadow-ctl);
  cursor:pointer;padding:var(--sp-sm)}
.tile.texted{min-height:var(--h-row-art)}
.tile.on{background-color:var(--pill);color:var(--pillInk);box-shadow:none}
.tile .slot{width:72px;height:56px;display:grid;place-items:center;color:inherit}
.tile .slot svg{width:100%;height:100%}

/* Padding-left is 24 with no leading pictogram and 16 with one — the app's own
   `EdgeInsets.fromLTRB(24|16, 0, 16, 0)`. On a fully rounded 64-tall row the
   corner radius is 32, so a 16 inset puts the first letter against the widest
   part of the curve. 24 is the answer to that, and it is what ships. */
.orow{background-color:var(--raised);border-radius:var(--r-pill);min-height:var(--h-row);
  padding:var(--sp-xs) var(--sp-md) var(--sp-xs) var(--sp-lg);
  display:flex;align-items:center;
  gap:var(--sp-sm);box-shadow:var(--shadow-ctl)}
.orow.withlead{min-height:var(--h-row-lead);padding-left:var(--sp-md)}
.orow .leadslot{width:48px;height:40px;flex:0 0 48px;display:grid;place-items:center}
.orow+.orow{margin-top:var(--sp-xs)}

.frow{background-color:var(--raised);border-radius:var(--r-md);min-height:var(--h-row-art);
  padding:var(--sp-sm);display:flex;align-items:center;gap:var(--sp-sm);
  box-shadow:var(--shadow-ctl)}
.frow.sel{background-color:var(--pill);color:var(--pillInk);box-shadow:none}
.frow.sel .artslot{color:var(--pillInk)}
.frow .artslot{width:72px;height:56px;flex:0 0 72px;display:grid;place-items:center;
  color:var(--ink)}
.frow .artslot svg{width:100%;height:100%;display:block}
.frow+.frow{margin-top:var(--sp-xs)}

.krow{background-color:var(--raised);border-radius:var(--r-md);min-height:var(--h-row-art);
  padding:var(--sp-xs) var(--sp-md);display:flex;align-items:center;
  gap:var(--sp-md);box-shadow:var(--shadow-ctl)}
.krow .tip{width:56px;height:44px;flex:0 0 56px;display:grid;place-items:center}
.srow{background-color:var(--raised);border-radius:var(--r-md);min-height:var(--h-row-lead);
  padding:var(--sp-xs) var(--sp-md);display:flex;align-items:center;
  gap:var(--sp-md);box-shadow:var(--shadow-ctl)}
.crow2{background-color:var(--raised);border-radius:var(--r-md);min-height:84px;
  padding:var(--sp-xs) var(--sp-md);display:flex;align-items:center;
  gap:var(--sp-md);box-shadow:var(--shadow-ctl)}

/* the off state is `control` over the page and the knob `inCard`:
   hairline was 1.17 / 1.50 against the page, a measured 1.4.11 failure. */
.switch{width:52px;height:32px;border-radius:999px;background:var(--control);
  position:relative;flex:0 0 52px}
.switch.on{background:var(--pill)}
.switch i{position:absolute;top:4px;left:4px;width:24px;height:24px;
  border-radius:999px;background:var(--knob);
  transition:left var(--dur-base) var(--ease-out)}
.switch.on i{background:var(--pillInk);left:24px}

.owned{width:64px;height:64px;display:grid;place-items:center;flex:0 0 64px}
.owned span{min-width:52px;min-height:36px;padding:0 var(--sp-xs);border-radius:var(--r-pill);
  background:var(--hairline);display:grid;place-items:center;
  font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums}
.owned.on span{background:var(--pill);color:var(--pillInk)}

.field{background-color:var(--raised);border:0;border-radius:var(--r-md);
  min-height:var(--h-primary);width:100%;padding:var(--sp-md);color:var(--ink);
  font-family:inherit;font-size:var(--fs-label);line-height:var(--lh-label);
  font-weight:600;letter-spacing:var(--tk-label)}
.field::placeholder{color:var(--muted);font-weight:500}

.card{background:var(--card);border-radius:var(--r-xl);padding:var(--card-pad)}
.hero{background:var(--hero);border-radius:var(--r-xl);padding:var(--card-pad)}
.well{background:var(--well);border-radius:var(--r-md);padding:var(--sp-sm)}
.card .well{background:var(--well)}
.hero .well{background:var(--heroWell)}
.drawwell{background:var(--well);border-radius:var(--r-md);min-height:140px;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:16px 16px;display:grid;place-items:center;color:var(--ink)}
.drawwell svg{width:76%;height:76%}

/* trust marks: shape AND glyph, drawn rather than typed. In light the three
   pastels are 1.00–1.01 against each other, so the glyph carries all of the
   identifying information — which is why it may never be shrunk or simplified. */
.mark{width:20px;height:20px;flex:0 0 20px;display:block}
.mark svg{width:100%;height:100%;display:block}
.mark.big{width:24px;height:24px;flex:0 0 24px}
.mark .gl{fill:none;stroke:var(--onPastel);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.mark .gl.dot{fill:var(--onPastel);stroke:none}
.mark.v .sh{fill:var(--verified)}
.mark.d .sh{fill:var(--derived)}
.mark.c .sh{fill:var(--caution);stroke:var(--caution);stroke-width:2.2;
  stroke-linejoin:round}
/* There is no danger MARK. `danger` is a status colour for a real error — a
   wrong tool angle, a strip risk — and it is unused today. It was drawn here as
   a red rounded square with a cross, which is the VERIFIED shape in another
   colour: exactly what the rule below this specimen forbids. A colour chip says
   what it is without pretending to be a fourth member of a three-mark set. */
.dangerchip{width:24px;height:24px;border-radius:var(--r-mark);
  background:var(--danger);display:block}
/* on an amber surface the mark is drawn inverse: dark shape, light glyph */
.mark.inv .sh{fill:var(--onPastel);stroke:var(--onPastel)}
.mark.inv .gl{stroke:var(--caution)}
.mark.inv .gl.dot{fill:var(--caution)}

.badge{background:var(--well);border-radius:var(--r-pill);padding:var(--sp-xs) var(--sp-sm);
  font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;
  letter-spacing:var(--tk-meta);display:inline-block}
.badge.lg{padding:var(--sp-xs) var(--sp-md);font-size:var(--fs-label);
  line-height:var(--lh-label);letter-spacing:var(--tk-label)}
.badge s{text-decoration:none;color:var(--muted);margin-right:var(--sp-2xs)}
.speccell{background:var(--well);border-radius:var(--r-md);padding:var(--sp-sm);
  min-width:110px}
.note{background:var(--caution);color:var(--onPastel);border-radius:var(--r-md);
  padding:var(--sp-sm) var(--sp-md);font-size:var(--fs-label);
  line-height:var(--lh-label);font-weight:var(--fw-label);letter-spacing:var(--tk-label)}
.legend{display:flex;gap:var(--sp-md);font-size:var(--fs-meta);
  line-height:var(--lh-meta);font-weight:var(--fw-meta);color:var(--muted)}

.chev{color:var(--ink2);flex:0 0 20px;width:20px;height:20px;display:block}
.chev.lg{flex:0 0 26px;width:26px;height:26px}
.chev svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.navbar{background:var(--card);min-height:var(--h-row-lead);border-radius:var(--r-md);display:flex;
  align-items:center;justify-content:space-around;padding:0 var(--sp-sm)}
.navbar .it{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2xs);
  color:var(--ink2);font-size:var(--fs-caption);line-height:var(--lh-caption);
  font-weight:var(--fw-caption)}
.navbar .it .cap{width:64px;min-height:32px;border-radius:999px;display:grid;
  place-items:center}
.navbar .it.on{color:var(--ink)}
.navbar .it.on .cap{background:var(--pill);color:var(--pillInk)}
.rail{width:var(--rail);background:var(--card);border-radius:var(--r-xl);
  padding:var(--sp-sm) 0;display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-2xs)}
.rail .it{width:64px;min-height:80px;border-radius:var(--r-md);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2xs);
  color:var(--ink2);font-size:var(--fs-caption);line-height:var(--lh-caption);
  font-weight:var(--fw-caption)}
.rail .it .cap{width:64px;min-height:32px;border-radius:999px;display:grid;
  place-items:center}
.rail .it.on .cap{background:var(--pill);color:var(--pillInk)}
.rail .it.on{color:var(--ink)}
.flowbar{background:var(--card);min-height:var(--h-row-lead);border-radius:var(--r-md);display:flex;
  align-items:center;gap:var(--sp-sm);padding:var(--sp-xs) var(--sp-md)}
.topbar{min-height:52px;display:flex;align-items:center;gap:var(--sp-sm)}
.round{width:var(--h-compact);min-height:var(--h-compact);height:var(--h-compact);border-radius:var(--r-pill);
  background-color:var(--raised);border:0;color:var(--ink);display:grid;
  place-items:center;font-size:18px;cursor:pointer}
.crumbs{font-size:var(--fs-answer);line-height:var(--lh-answer);
  font-weight:var(--fw-answer);letter-spacing:var(--tk-answer);color:var(--muted)}
.crumbs b{color:var(--ink)}

/* ── web-only components — WEB_GUIDE §7 ─────────────────────────────────── */
/* the banded data table: raised rows on 2 px of the page tone. Still no lines,
   and no zebra — inCard against surface is 1.06, which is a rumour, not a stripe. */
.data-table{width:100%;border-collapse:separate;border-spacing:0 2px;
  font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:var(--fw-meta);
  letter-spacing:var(--tk-meta)}
.data-table th{font-size:var(--fs-caption);line-height:var(--lh-caption);
  font-weight:var(--fw-caption);letter-spacing:var(--tk-caption);color:var(--ink2);
  text-align:left;padding:var(--sp-xs) var(--sp-md)}
.data-table td{background-color:var(--raised);padding:var(--sp-md);
  vertical-align:middle;color:var(--ink)}
.data-table td.sub{color:var(--ink2)}
.data-table tr td:first-child{border-top-left-radius:var(--r-sm);
  border-bottom-left-radius:var(--r-sm)}
.data-table tr td:last-child{border-top-right-radius:var(--r-sm);
  border-bottom-right-radius:var(--r-sm)}
.data-table td.num{text-align:right;font-variant-numeric:tabular-nums;min-width:6ch}
/* D6, exception one of two: a 3 px leading edge on a selected row. primaryTint
   measures 1.06 against the row, which is invisible; ink measures 9.09+. */
.data-table tr[aria-selected="true"] td:first-child{box-shadow:inset 3px 0 0 var(--ink)}
.data-table.compact td{padding:var(--sp-sm) var(--sp-md)}
.tablewrap{overflow-x:auto;max-width:100%;padding-bottom:var(--sp-2xs)}

/* D6, exception two of two: a drop zone with no boundary is not a drop zone. */
.dropzone{border:2px dashed var(--control);border-radius:var(--r-md);
  padding:var(--sp-lg);text-align:center;color:var(--ink2);
  background-color:var(--well)}
.dropzone[data-state="drag-over"]{border-color:var(--ink)}
/* a skeleton never shimmers, because a shimmer is a looping animation */
.skel{background:var(--well);border-radius:var(--r-sm);height:20px;width:120px;
  display:inline-block}
.kbd{background:var(--well);border-radius:var(--sp-xs);padding:2px var(--sp-xs);
  font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:600;
  color:var(--ink2);font-variant-numeric:tabular-nums}
.errtext{color:var(--danger);display:flex;gap:var(--sp-xs);align-items:flex-start;
  font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:var(--fw-meta)}

/* ── corrections, so that what is measured here is what ships ────────────
   Each of these replaces a value earlier in this file that did not match the
   Flutter source. They are listed here rather than edited in place so the
   change is visible. */

/* SelectorPill: padding is 8 horizontal; the width comes from the carousel's
   minItemWidth (64 metric, 72 inch), not from the text. */
.pill{padding:0 var(--sp-xs);min-width:64px}
.pill.compact{padding:0 var(--sp-xs);min-width:0}
/* the two page-chrome buttons are this book's own furniture, not a specimen */
#dimtoggle,#themebtn,#edbtn{padding:0 16px}
/* SegmentedPills: the track is a well with 4 of padding; a segment is compact
   48, equal width, and TRANSPARENT when unselected — the track shows through. */
.track{padding:var(--sp-2xs)}
.track .pill{min-height:var(--h-compact);min-width:0;flex:1 1 0;padding:0 var(--sp-xs)}
.track .pill:not(.on){background-color:transparent}
.dimbox>.track{display:flex}
/* ActionPill: 24 horizontal. */
.act{padding:0 var(--sp-lg)}
/* OptionRow: fromLTRB(24, 0, 16, 0) — no vertical padding; the height is the
   height. 16 on the left with a pictogram, which is already inset by its slot. */
.orow{padding:0 var(--sp-md) 0 var(--sp-lg)}
.orow.withlead{padding-left:var(--sp-md)}
/* KitRow / SetRow: _TwoTargetRow insets the body by 16 and leaves 4 before the
   trailing toggle, which sits flush at the row's own edge. */
.krow{padding:0 0 0 var(--sp-md);gap:var(--sp-sm)}
.srow{padding:0 0 0 var(--sp-md)}
/* ChoiceRow: 64, and 84 only when the title wraps. 16 horizontal. */
.crow2{min-height:var(--h-row);padding:0 var(--sp-md);gap:var(--sp-sm)}
.crow2.tall{min-height:84px}
/* NameField: BoreSpace.md is 12, not 16. */
.field{padding:0 var(--sp-sm)}
/* SpecCell: fromLTRB(8, 8, 4, 8). */
.speccell{padding:var(--sp-xs) var(--sp-2xs) var(--sp-xs) var(--sp-xs)}
/* CautionNote: EdgeInsets.all(12). */
.note{padding:var(--sp-sm)}
/* StandardBadge: 8 × 4, and 12 × 8 at large. */
.badge{padding:var(--sp-2xs) var(--sp-xs)}
.badge.lg{padding:var(--sp-xs) var(--sp-sm)}
/* Ghosting is kGhostOpacity = 0.65 in the source, not the 32 % the guides
   still print: 0.32 measures 1.97 / 2.40 for the label against its own tile,
   and a ghost is an ACTIVE control, so 1.4.3's disabled exemption misses it. */
.pill.ghosted,.act.ghosted,.tile.ghosted{opacity:.65}
/* Nav label is BoreText.meta (14), not caption. */
.navbar .it,.rail .it{font-size:var(--fs-meta);line-height:var(--lh-meta);
  font-weight:var(--fw-meta);letter-spacing:var(--tk-meta)}
.navbar .it.on,.rail .it.on{font-weight:600}
/* The rail item is the rail's own width, 88; only the pill behind the icon
   is 64. The 68 at the top is the source's own inset. */
.rail{padding:68px 0 0}
.rail .it,.rail button.it{width:var(--rail)}
/* TopBar / BackBar: the BAR is 52 and is inset 16 left / 12 right; the 8 above
   it is page padding rather than part of the bar, so it is not drawn here —
   otherwise the measured height reports 56 for a 52 pt bar. */
.topbar{padding:0 var(--sp-sm) 0 var(--sp-md)}
/* FlowBar: BoreSpace.sm is 8. */
.flowbar{gap:var(--sp-xs)}
.flowcancel{width:112px;flex:0 0 112px;justify-content:center}

/* ── admin console: this proposal only ─────────────────────────────────── */
body{font-variant-numeric:normal}
.tnum{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.row{display:flex;align-items:center;gap:var(--sp-xs)}
.row.top{align-items:flex-start} .row.end{align-items:flex-end} .wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column}
.grow{flex:1 1 0;min-width:0}
.gap2{gap:var(--sp-xs)}.gap3{gap:var(--sp-sm)}.gap4{gap:var(--sp-md)}
.mt2{margin-top:var(--sp-xs)}.mt3{margin-top:var(--sp-sm)}.mt4{margin-top:var(--sp-md)}.mt5{margin-top:var(--sp-lg)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
p{margin:0}
h3{margin:0}
.full{width:100%}

/* review-page chrome: quiet, and not a screen */
main{max-width:var(--shell-max);margin:0 auto;
  padding:var(--sp-xl) var(--gutter) calc(var(--sp-4xl) + env(safe-area-inset-bottom))}
.themebtn{position:fixed;right:var(--sp-lg);top:var(--sp-lg);z-index:30}
.toc{display:flex;flex-wrap:wrap;gap:var(--sp-xs);margin-top:var(--sp-lg)}
.toc a{text-decoration:none;color:var(--ink);background-color:var(--raised);border-radius:var(--r-pill);
  min-height:var(--h-chip);padding:var(--sp-xs) var(--sp-md);display:inline-flex;align-items:center;
  font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:var(--fw-caption)}
.sheet{margin:var(--sp-3xl) 0 0;scroll-margin-top:var(--sp-md)}
.sheet>h2{margin:0;font-size:var(--fs-answer);line-height:var(--lh-answer);
  font-weight:var(--fw-answer);letter-spacing:var(--tk-answer)}
.sheet>.cap{color:var(--muted);margin:var(--sp-xs) 0 var(--sp-lg);font-size:var(--fs-prose);
  line-height:var(--lh-prose);font-weight:var(--fw-prose);letter-spacing:var(--tk-prose);max-width:var(--measure)}
.stack{display:flex;gap:var(--sp-lg);flex-wrap:wrap;align-items:flex-start}
.statecap{margin-bottom:var(--sp-xs)}

/* a browser window: the page tone, one card-edge, and the address */
.window{background:var(--page);border-radius:var(--r-xl);box-shadow:var(--shadow-card);
  padding:0 var(--sp-md) var(--sp-md);min-width:0;max-width:100%}
.window.grow{flex:1 1 640px}
.urlbar{display:flex;justify-content:center;padding:var(--sp-sm) 0 var(--sp-md)}
.url{background:var(--well);border-radius:var(--r-pill);padding:var(--sp-2xs) var(--sp-md);color:var(--ink2);
  display:inline-flex;align-items:center;gap:var(--sp-xs);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lock{width:8px;height:10px;border-radius:2px;background:var(--ink2);position:relative;top:1px;flex:0 0 8px}
.lock::before{content:"";position:absolute;left:1px;top:-5px;width:6px;height:6px;border:1.5px solid var(--ink2);
  border-bottom:0;border-radius:4px 4px 0 0;box-sizing:border-box}

/* the shell: rail 88, gutter 24, one pane */
.shell{display:flex;gap:var(--sp-lg);align-items:flex-start}
.shell>.main{flex:1 1 0;min-width:0}
.rail{padding:var(--sp-sm) 0;flex:0 0 var(--rail);position:sticky;top:var(--sp-md)}
.rail .it{text-decoration:none;cursor:pointer;min-height:72px;background:none;border:0;font-family:inherit;padding:0}
.rail .it .cap{background-image:linear-gradient(var(--state),var(--state));
  transition:background-image var(--dur-out) var(--ease-out)}
@media (hover:hover){.rail .it:hover .cap{--state:var(--hover);transition-duration:var(--dur-fast)}
  .rail .it:hover{color:var(--ink)}}
.rail .it:focus-visible{outline:none}
.rail .it:focus-visible .cap{outline:2px solid var(--ink);outline-offset:2px}
.ico{width:22px;height:22px;display:block}
.hdr{min-height:52px;display:flex;align-items:center;gap:var(--sp-sm);margin-bottom:var(--sp-md);flex-wrap:wrap}
.crumbs{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumblink{color:inherit;text-decoration:none}
.crumblink:hover{color:var(--ink2)}
.round{flex:0 0 var(--h-compact)}
.round[disabled]{opacity:.32;cursor:default}
.act.compact{width:auto;min-height:var(--h-compact);padding:0 var(--sp-lg)}
.act[disabled]{opacity:.32;cursor:default}
.pill.compact{padding:0 var(--sp-md)}
.pill[disabled]{opacity:.32;cursor:default}
.chips .pill.compact{min-height:var(--h-chip);font-size:var(--fs-meta)}
.annot{display:grid;gap:var(--sp-md);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
dl.spec,dl.keys{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-xs) var(--sp-md);margin:0;
  font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:var(--fw-meta)}
dl.spec dt{color:var(--muted);font-weight:600} dl dd{margin:0}
dl.keys dt{white-space:nowrap}

/* the gate specimen */
.phoneframe{width:390px;max-width:100%;flex:0 0 auto;background:var(--page);border-radius:40px;
  box-shadow:var(--shadow-card);padding:48px var(--sp-md);min-height:640px;display:grid;align-content:center}
.divert{background:var(--card);border-radius:var(--r-xl);padding:var(--sp-lg)}
.divert p{margin-top:var(--sp-sm)}
.out{background:none;border:0;color:var(--ink2);cursor:pointer;min-height:48px;display:inline-flex;
  align-items:center;gap:var(--sp-xs);padding:0;font-family:inherit;font-size:var(--fs-label);
  line-height:var(--lh-label);font-weight:600;letter-spacing:var(--tk-label)}
.out:hover{color:var(--ink)}

/* auth: one card on the page tone, no rail */
.authwrap{flex:0 1 400px;min-width:0}
.authcard{background:var(--card);border-radius:var(--r-xl);padding:var(--card-pad)}
.authwrap:has(.wide2){flex-basis:520px}
.brand{display:flex;align-items:baseline;gap:var(--sp-xs);margin-bottom:var(--sp-lg)}
.flabel{display:block;margin-bottom:var(--sp-xs)}
.field[aria-invalid="true"]{box-shadow:inset 0 -2px 0 var(--danger)}
.field[disabled]{opacity:.32}
.field.sel{min-height:var(--h-compact);width:auto;padding:0 var(--sp-sm)}
.note .mark.inv{margin-top:2px}
.qr{width:168px;height:168px;flex:0 0 168px;border-radius:var(--r-sm);display:block}
.keytext{word-spacing:.2em}
.codes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xs) var(--sp-lg)}
.codes li{display:flex;align-items:baseline;gap:var(--sp-sm)}
.ident{font-variant-numeric:tabular-nums slashed-zero}
.orow.slim{min-height:var(--h-compact);gap:var(--sp-md)}
button.orow{width:100%;text-align:left;font:inherit;color:inherit;border:0;cursor:pointer}
.orow.slim{width:auto}
a.orow{text-decoration:none;color:inherit}
.orow.tall{min-height:88px;border-radius:var(--r-md);padding:var(--sp-sm) var(--sp-md) var(--sp-sm) var(--sp-lg)}
.switch{flex:0 0 52px}

/* overview */
.ovgrid{display:grid;gap:var(--sp-sm);grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));align-items:start}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:var(--sp-xl) 0 var(--sp-sm)}
.sec .t{font-size:var(--fs-label);line-height:var(--lh-label);font-weight:600;letter-spacing:var(--tk-label)}
.sec .n{font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:var(--fw-meta);color:var(--muted);
  font-variant-numeric:tabular-nums;text-decoration:none}
a.n:hover{color:var(--ink2)}
.cmd{display:flex;align-items:center;gap:var(--sp-sm);background:var(--well);border-radius:var(--r-md);
  padding:var(--sp-2xs) var(--sp-2xs) var(--sp-2xs) var(--sp-md);font-size:var(--fs-meta);line-height:var(--lh-meta)}
.cmd code{background:none;padding:0;flex:1;min-width:0;overflow-wrap:anywhere}
.card .data-table td{background-color:var(--raised)}
.data-table tbody tr:hover td{--state:var(--hover)}
.data-table tbody tr:hover td.sub,.data-table tr[data-state="hover"] td.sub{color:var(--ink)}
.data-table td .mark{display:inline-block}
.data-table th.num{text-align:right}
.insp .data-table td,.insp .data-table th{padding:var(--sp-xs)}
.track .pill{flex:0 0 auto;padding:0 var(--sp-md);min-width:64px}
.data-table td.tcell{padding:var(--sp-xs) var(--sp-sm);width:1%}
.rowlink{color:inherit;text-decoration:none}
.rowlink::after{content:"";position:absolute;inset:0}
.data-table tr{position:relative}
.thumb{display:block;width:131px;height:56px;border-radius:var(--sp-xs);overflow:hidden}
.thumb img{display:block}
.json{margin:var(--sp-xs) 0 0;white-space:pre-wrap;font-family:inherit;font-variant-numeric:tabular-nums slashed-zero}

/* the editor */
.toolbar{display:flex;align-items:center;gap:var(--sp-sm);flex-wrap:wrap}
.status{display:flex;flex-wrap:wrap;gap:var(--sp-2xs) var(--sp-xs);margin:var(--sp-sm) 0 var(--sp-lg)}
.ed{display:flex;gap:var(--sp-lg);align-items:flex-start}
.cards{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-content:flex-start}
.insp{flex:0 0 320px;width:320px;position:sticky;top:var(--sp-md)}
.insp.static{position:static}
.sz{background:var(--hero);border-radius:var(--r-xl);padding:var(--sp-sm);max-width:100%}
.cards[data-mode="both"] .sz{flex:1 1 100%}
.cards[data-mode="phone"] .sz{flex:0 0 auto;width:calc(327px + 2 * var(--sp-sm))}
.cards[data-mode="ipad"] .sz{flex:0 0 auto;width:calc(520px + 2 * var(--sp-sm))}
.cards[data-zoom="2"] .sz{width:auto!important;flex:1 1 100%}
.szh{flex-wrap:wrap;row-gap:var(--sp-2xs)}
.cards[data-zoom="2"] .dw{zoom:2}
.cards[data-zoom="2"] .dcap{max-width:none}
.szh{display:flex;align-items:center;gap:var(--sp-sm);margin-bottom:var(--sp-sm);min-height:32px}
.szl{font-size:var(--fs-value);line-height:var(--lh-value);font-weight:700;letter-spacing:var(--tk-value);
  border-radius:var(--r-pill);padding:var(--sp-2xs) var(--sp-sm);margin-left:calc(-1 * var(--sp-sm))}
.szl.on{background:var(--pill);color:var(--pillInk);margin-left:0}
.sz .badge{background:var(--heroWell)}
.devs{display:flex;flex-wrap:wrap;gap:var(--sp-sm)}
.dev{min-width:0;max-width:100%}
.dcap{margin-bottom:var(--sp-2xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.dev.phone .dcap{max-width:327px}
.cards[data-mode="phone"] .dev.ipad,.cards[data-mode="ipad"] .dev.phone{display:none}
.dw{position:relative;border-radius:var(--r-md);overflow:hidden;flex:0 0 auto}
.dw img{display:block;position:absolute;inset:0}
.th-d{display:none!important}
:root[data-theme="dark"] .th-l{display:none!important}
:root[data-theme="dark"] .th-d{display:block!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .th-l{display:none!important}
  :root:not([data-theme="light"]) .th-d{display:block!important}
}
/* a dimension: one button over the painter's own rects */
.dim{position:absolute;border:0;padding:0;margin:0;background-color:transparent;border-radius:var(--sp-xs);
  cursor:pointer;background-image:linear-gradient(var(--state),var(--state));
  transition:background-image var(--dur-out) var(--ease-out)}
@media (hover:hover){.dim:hover{--state:var(--hover);transition-duration:var(--dur-fast)}}
.dim.drag{--state:var(--drag)}
.dim>span{position:absolute;display:block}
.dim .selline,.dim .selend,.dim .selfig{visibility:hidden}
.dim.sel .selline,.dim.sel .selend,.dim.sel .selfig{visibility:visible}
.selline{background:var(--ink)}
.selend{width:8px;height:8px;border-radius:999px;background:var(--ink)}
.selfig{background:var(--pill);color:var(--pillInk);border-radius:4px;display:grid!important;place-items:center;
  font-size:12px;line-height:1;font-weight:600;white-space:nowrap;pointer-events:none}
.selfig.v{writing-mode:vertical-rl;transform:rotate(180deg)}
.ghost{width:2px;background:var(--drag)}
.readout{background:var(--raised);box-shadow:var(--shadow-card);border-radius:var(--r-sm);
  padding:var(--sp-2xs) var(--sp-xs);white-space:nowrap;color:var(--ink);width:auto}
.dim .zline,.dim .zfig{z-index:1}
.numrow{display:flex;align-items:center;gap:var(--sp-xs)}
.numfield{position:relative;flex:1;min-width:0}
.numfield .field{text-align:right;padding-right:44px}
.numfield .unit{position:absolute;right:var(--sp-sm);top:50%;transform:translateY(-50%);color:var(--muted);
  font-size:var(--fs-label);font-weight:600;pointer-events:none}
.keys .kbd{display:inline-block;margin:1px 0}
.toast{position:fixed;left:50%;bottom:var(--sp-xl);transform:translateX(-50%);background:var(--pill);color:var(--pillInk);
  border-radius:var(--r-md);padding:var(--sp-sm) var(--sp-md);font-size:var(--fs-meta);line-height:var(--lh-meta);
  font-weight:600;z-index:40}
.toast.static{position:static;transform:none;display:inline-block}

/* states grid */
.stgrid{display:grid;gap:var(--sp-sm);grid-template-columns:repeat(auto-fill,minmax(min(359px,100%),1fr))}
.stcell{margin:0;background:var(--hero);border-radius:var(--r-xl);padding:var(--sp-md);display:flex;flex-direction:column;gap:var(--sp-xs);min-width:0}
.stcell .dw{max-width:100%}
.stcell .readout{left:-128px!important}

/* dialog specimen */
.dlgback{background:rgba(28,28,29,.32);border-radius:var(--r-xl);padding:var(--sp-xl);flex:1 1 520px;display:grid;place-items:center}
.dialog{background:var(--card);border-radius:var(--r-xl);padding:var(--card-pad);max-width:520px;box-shadow:var(--shadow-card)}
.stack>.card{flex:1 1 320px;border-radius:var(--r-xl)}

@media (max-width:1279px){.insp{position:static}}
@media (max-width:1100px){.ed{flex-direction:column}.insp{width:100%;flex-basis:auto}}
@media (max-width:599px){
  .shell{flex-direction:column}
  .rail{position:static;flex-direction:row;width:100%;justify-content:space-around;padding:var(--sp-xs)}
  .rail .it{width:auto;flex:1}
  .window{padding:0 var(--sp-sm) var(--sp-sm)}
  .dev,.stcell .dw{overflow-x:auto}
  .codes{grid-template-columns:1fr}
  .themebtn{right:var(--sp-md);top:var(--sp-md)}
}

/* the live gate (WEB_GUIDE §8) */
.gate{display:none}
:root[data-gate="on"] .gate{display:grid;position:fixed;inset:0;z-index:100;background:var(--page);
  padding:var(--gutter);overflow:auto;align-content:center;justify-items:center}
:root[data-gate="on"] main,:root[data-gate="on"] .themebtn{display:none}
.gate .divert{max-width:var(--column-max);width:100%}

/* ── the live console: what the mockup did with inline styles ─────────── */
.sec.first{margin-top:0}
.row.between{justify-content:space-between}
.field.find{max-width:360px}
.console-body{min-height:100vh}
.authpage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--gutter)}
.shell.live{max-width:var(--shell-max);margin:0 auto;padding:var(--gutter);min-height:100vh}
.inline{display:inline}
form.inline{margin:0}
.hidden{display:none!important}
.qrbox svg{display:block;width:176px;height:176px}
.gate-overlay{position:fixed;inset:0;z-index:50;background:var(--page);display:flex;align-items:center;justify-content:center;padding:var(--gutter)}

/* ── the 6-digit code: six large boxes, a gap after the third ──────────── */
.otp{border:0;margin:0;padding:0;min-width:0}
.otp-row{display:flex;align-items:center;gap:var(--sp-xs)}
.otp-gap{flex:0 0 var(--sp-xs)}
.field.otp-digit{flex:1 1 0;min-width:0;min-height:72px;padding:0;
  text-align:center;font-size:var(--fs-display);line-height:var(--lh-display);
  font-weight:var(--fw-display);letter-spacing:0;font-variant-numeric:tabular-nums;
  caret-color:var(--ink)}

/* ── the theme switch: one icon at a time, the one it switches to ──────── */
.themeswitch .ico{width:24px;height:24px}
:root[data-theme="dark"] .themeswitch .ico-moon,
:root:not([data-theme="dark"]) .themeswitch .ico-sun{display:none}
.auththeme{position:fixed;top:var(--sp-md);right:var(--gutter);z-index:5}

/* ── the drawing editor's host: Flutter needs a sized box to draw in ───── */
.crumbtrail a{color:inherit}
.editor-host{position:relative;height:calc(100vh - 150px);min-height:560px;border-radius:var(--r-xl);overflow:hidden;background:var(--card)}

/* ── Tools, as the app's Tools tab: type tiles with the app's art ─────── */
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--sp-sm);margin-top:var(--sp-xs)}
.tooltile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2xs);min-height:132px;padding:var(--sp-md);
  border-radius:var(--r-md);background-color:var(--card);color:var(--ink);text-decoration:none;
  background-image:linear-gradient(var(--state),var(--state));transition:background-image var(--dur-out) var(--ease-out)}
@media (hover:hover){.tooltile:hover{--state:var(--hover)}.tooltile:hover .muted{color:var(--ink2)}}
.tooltile:active{--state:var(--press)}
.tileart{display:block;width:72px;height:56px;color:var(--ink)}
.tileart svg{display:block;width:100%;height:100%}
.tileart.lg{width:108px;height:84px}
.chips .pill[data-state="disabled"]{pointer-events:none}

/* Links styled as controls read as controls: no underline. */
a.pill,a.act,a.round,a.out,a.orow,a.tooltile,.track a{text-decoration:none;color:inherit}
a.pill.on{color:var(--pillInk)}
.editor-host.browser{height:calc(100vh - 110px);min-height:620px}
/* Drawings uses the whole window: the iPad drawings need the width. */
.shell.live.wide{max-width:none}

/* Data quality (/quality): the verified share as a bar, sources by tier, register statuses.
   Hue stays with trust, as in the app: verified green, web / unverified amber, derived grey. */
progress.q{appearance:none;-webkit-appearance:none;width:100%;max-width:320px;height:10px;border:0;
  border-radius:var(--r-pill);background:var(--well);overflow:hidden;vertical-align:middle}
progress.q.sm{width:64px;height:6px}
progress.q::-webkit-progress-bar{background:var(--well);border-radius:var(--r-pill)}
progress.q::-webkit-progress-value{background:var(--verifiedInk);border-radius:var(--r-pill)}
progress.q::-moz-progress-bar{background:var(--verifiedInk);border-radius:var(--r-pill)}
.badge.tier-standard,.badge.tier-catalogue{background:var(--verified);color:var(--onPastel)}
.badge.tier-web,.badge.status-suspect,.badge.status-weak_source,.badge.status-no_source{background:var(--caution);color:var(--onPastel)}
.badge.tier-derived,.badge.tier-none,.badge.status-needs_decision{background:var(--derived);color:var(--onPastel)}
.badge.status-incorrect,.badge.status-conflict{background:var(--danger);color:var(--card)}
details.card>summary{cursor:pointer;list-style:none;align-items:center}
details.card>summary::-webkit-details-marker{display:none}
fieldset{border:0;margin:0;padding:0;min-width:0}