/* v89 DESIGN SYSTEM (2026-09-30): the last layer. One type scale, one spacing scale, one set of cards, tables and page headers,
   applied over every page. Built from the design research and two independent design reviews (DESIGN-V89.md, and the
   evidence in proof/out/design-v89/). Everything here is unlayered, so it beats every rule in the legacy layer whatever its
   specificity. Tokens only: a rule sets type, colour, radius, shadow and spacing through the tokens below.
   Sections: 1 tokens · 2 base · 3 frame · 4 components · 5 legacy classes mapped onto the scale · 6 phone · 7 motion. */

/* The global button reset sits in a layer BELOW legacy (next-legacy.css declares the order "v89-base, legacy"), so it only
   reaches a button no stylesheet styled: the Issue passports dialog showed browser bevels. */
@layer v89-base {
  button { font: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; color: inherit; }
  b, strong { font-weight: 600; }
  /* a field no stylesheet styled gets the v89 field; a legacy-styled one (search boxes inside a wrapper) keeps its own */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea {
    font-family: var(--font); font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-900);
    border: 1px solid var(--gray-300); border-radius: var(--r-ctl); background-color: var(--gray-0);
  }
}

/* =============================================================== 1. TOKENS */
:root {
  /* v89 (Joey, 2026-09-30): the system face first. On a Mac, iPhone or iPad this is Apple's San Francisco (SF Pro Text and
     Display, chosen by size), the face Joey liked on the reference site; Apple's licence allows using it as the system font,
     never shipping it as a file. Everywhere else the self-hosted Inter carries the same scale, so no platform falls to Arial. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter V", "Inter", "Segoe UI", ui-sans-serif, system-ui, Helvetica, Arial, sans-serif;
  /* v92 (decision 8, one monospace face): the workspace and public stacks are identical, with no Plex Mono. Headless Chrome
     could not resolve ui-monospace and fell to the self-hosted Plex, so the transcript drew a different face from the API docs. */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* type: six styles, three weights, a 4px line-height grid */
  --t-title-size: 24px; --t-title-lh: 32px; --t-title-track: -0.02em;
  --t-num-size: 24px; --t-num-lh: 32px; --t-num-track: -0.02em;
  --t-heading-size: 16px; --t-heading-lh: 24px; --t-heading-track: -0.01em;
  --t-body-size: 14px; --t-body-lh: 20px;
  --t-small-size: 13px; --t-small-lh: 20px;
  --t-label-size: 12px; --t-label-lh: 16px;
  --w-regular: 400; --w-medium: 500; --w-semibold: 600;
  /* the same six as one value each, for `font:` (a shorthand resets font-variant; set tabular-nums after it) */
  --t-title: 600 var(--t-title-size)/var(--t-title-lh) var(--font);
  --t-num: 600 var(--t-num-size)/var(--t-num-lh) var(--font);
  --t-heading: 600 var(--t-heading-size)/var(--t-heading-lh) var(--font);
  --t-body: 400 var(--t-body-size)/var(--t-body-lh) var(--font);
  --t-small: 400 var(--t-small-size)/var(--t-small-lh) var(--font);
  --t-label: 500 var(--t-label-size)/var(--t-label-lh) var(--font);

  /* greys: text uses 900, 700 and 500 only */
  --gray-0: #FFFFFF; --gray-25: #F8F9FA; --gray-50: #F3F4F6; --gray-100: #EBEDF0; --gray-200: #E1E4E8;
  --gray-300: #CBD0D6; --gray-400: #9AA1AA; --gray-500: #5D656D; --gray-700: #343A3F; --gray-900: #121619;
  --accent: #2457F5; --accent-hover: #1F4FE0; --accent-tint: #EEF3FF; --on-accent: #FFFFFF;

  /* status tones: text, fill, border, dot */
  --positive-fg: #15803D; --positive-bg: #ECFDF3; --positive-bd: #B7E4C7; --positive-dot: #16A34A;
  --attention-fg: #8A5A00; --attention-bg: #FFF7E0; --attention-bd: #F2D98C; --attention-dot: #D9A300;
  --critical-fg: #B42318; --critical-bg: #FEF3F2; --critical-bd: #FECDCA; --critical-dot: #D92D20;
  --neutral-fg: #4B535C; --neutral-bg: #F2F4F7; --neutral-bd: #E1E4E8; --neutral-dot: #9AA1AA;

  /* spacing, radius, elevation, motion */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px;
  --gutter: 32px;
  --r-chip: 999px; --r-ctl: 8px; --r-card: 12px; --r-dialog: 16px;
  --shadow-overlay: 0 8px 24px rgba(18, 22, 25, .12), 0 1px 2px rgba(18, 22, 25, .06);
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --d-hover: 120ms; --d-open: 160ms; --d-close: 120ms; --d-fade: 600ms;
  --focus-ring: 0 0 0 2px var(--accent);

  /* the legacy palette, pointed at the tokens: every older rule that reads these now draws in the v89 greys and tones */
  --sans: var(--font); --mono: var(--font-mono);
  --canvas: var(--gray-25); --card: var(--gray-0); --layer: var(--gray-50); --hover: var(--gray-50); --tray: var(--gray-50);
  --ink: var(--gray-900); --ink-2: var(--gray-700); --ink-3: var(--gray-500); --muted: var(--gray-500); --faint: var(--gray-500);
  --line: var(--gray-200); --line-2: var(--gray-100); --rule: var(--gray-300); --grey-bg: var(--gray-100); --selected: var(--accent-tint);
  --blue: var(--accent); --blue-ink: var(--accent); --blue-bg: var(--accent-tint);
  --green: var(--positive-dot); --green-bg: var(--positive-bg); --green-ink: var(--positive-fg);
  --amber: var(--attention-fg); --amber-bg: var(--attention-bg); --amber-line: var(--attention-bd);
  --red: var(--critical-dot); --red-bg: var(--critical-bg); --red-ink: var(--critical-fg);
  --v73-canvas: var(--gray-25); --v73-canvas-hi: var(--gray-25); --v73-card: var(--gray-0); --v73-tray: var(--gray-50); --v73-tray-2: var(--gray-50);
  --v73-anchor: var(--gray-900); --v73-anchor-ink: var(--gray-0); --v73-ring: var(--gray-200);
  --v73-ok: var(--positive-fg); --v73-ok-bg: var(--positive-bg); --v73-warn: var(--attention-fg); --v73-warn-bg: var(--attention-bg);
  --v73-bad: var(--critical-fg); --v73-bad-bg: var(--critical-bg); --v73-off: var(--neutral-fg); --v73-off-bg: var(--neutral-bg);
  --r: var(--r-card); --r-s: var(--r-ctl); --v73-r: var(--r-card); --v73-r-in: var(--r-ctl); --v73-r-ctl: var(--r-ctl);
  --v84-r: var(--r-card); --v84-r-ctl: var(--r-ctl);
  --shadow: 0 0 0 1px var(--gray-200); --v73-shadow: 0 0 0 1px var(--gray-200); --v73-shadow-hi: 0 0 0 1px var(--gray-300);
  --v84-shadow: 0 0 0 1px var(--gray-200); --v84-shadow-hi: 0 0 0 1px var(--gray-300);
}
/* dark: the same roles on the dark palette the workspace already had */
:root[data-theme="dark"] {
  --gray-0: #111A2B; --gray-25: #0A0F1A; --gray-50: #162033; --gray-100: #1C2841; --gray-200: #24324D;
  --gray-300: #34435F; --gray-400: #6D788C; --gray-500: #98A2B4; --gray-700: #C9D0DC; --gray-900: #EEF1F6;
  --accent: #4A76FF; --accent-hover: #5B85FF; --accent-tint: #16264D; --on-accent: #FFFFFF;
  --positive-fg: #7FE09A; --positive-bg: rgba(34, 197, 94, .14); --positive-bd: rgba(34, 197, 94, .32); --positive-dot: #4CC472;
  --attention-fg: #F0C431; --attention-bg: rgba(245, 158, 11, .15); --attention-bd: rgba(245, 158, 11, .36); --attention-dot: #F0C431;
  --critical-fg: #FFB5BA; --critical-bg: rgba(239, 68, 68, .15); --critical-bd: rgba(239, 68, 68, .36); --critical-dot: #FF8A90;
  --neutral-fg: #C9D0DC; --neutral-bg: rgba(148, 163, 184, .12); --neutral-bd: #24324D; --neutral-dot: #6D788C;
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 1px #24324D;
}

/* =============================================================== 2. BASE */
body {
  font-family: var(--font); font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular);
  color: var(--gray-900); background: var(--gray-25); letter-spacing: 0;
  font-optical-sizing: auto; font-feature-settings: "cv11", "ss03";
}
button, input, select, textarea { font-family: var(--font); letter-spacing: 0; }
#view { font-size: var(--t-body-size); line-height: var(--t-body-lh); }
/* weights by role, not by tag: names and emphasis inside text */
p b, p strong, li b, .notice b, .v89-note b { font-weight: var(--w-semibold); }
td b, td strong, .tx > b, .slrow b, dd b { font-weight: var(--w-medium); }
/* no bold mono: Plex Mono has one face, 400; anything heavier was synthesized */
b .mono, .mono b, b.mono, strong .mono, .mono strong, strong.mono { font-weight: var(--w-regular); }
/* numbers line up: tables, figures, dates and counts */
table, .num, time, .count, .n, dd, .v89-strip, .v89-id, .mono, kbd { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, h5, h6 { text-transform: none; }
h1 { font-size: var(--t-title-size); line-height: var(--t-title-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-title-track); color: var(--gray-900); }
h1 b { font-weight: var(--w-semibold); }
h2 { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-heading-track); }
h3 { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); letter-spacing: 0; }
h4 { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-semibold); letter-spacing: 0; }
small { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
a { color: inherit; }
a.link, .link { color: var(--accent); font-weight: var(--w-medium); font-size: inherit; }
a.link:hover, .link:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: 0; }
svg.i { stroke-width: 1.5; }
kbd { font-family: var(--font); font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--gray-500); background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 4px; padding: 0 4px; box-shadow: none; }

/* identifiers: lot numbers, record ids, file names, serials, FEI, NDC. Inter 500, tabular, slashed zero; never mono */
.v89-id, .mono, .bc-id, .v88fn, .v82fn {
  font-family: var(--font); font-weight: var(--w-medium); font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0; font-size: inherit; font-synthesis: none;
}
/* citations, timestamps, references and line numbers were set in mono; they are sentences and dates, so Inter */
.cite, .vcite, .vcite q, .tl .when, .refline, .docitem span, .spec-row .sn span, .vstd span, .qeq, .basis.conflict .cv,
.v80q li i, .v80nc li i, .v80ln, .v80t td.l, .v80unread li .n, .v77p-chip b, .hh-chip b, .v73src .vs-c.ln, .smwhere q,
.vrc .vrc-checks small q, .sbar .tk, .finding code, .vmath code, .cvlink .cmath, .vrc .vrc-checks code, dd.mono, td.mono {
  font-family: var(--font); font-weight: var(--w-regular); letter-spacing: 0; font-variant-numeric: tabular-nums slashed-zero;
}
/* the only mono left: text shown as printed (the certificate transcript and "Values as read") and keys and hashes */
.origtext ol, .rt-paper ol, .hp-sheet ol, .v77p-lines ol, .vp-pdf li, .vp-doc, .v80r dd b.mono, .v80unread li .mono, .v80nc li .mono,
table.vx-rt td.mono, .v89-mono, .linkbox input, code.key, .apikey, .hash {
  font-family: var(--font-mono); font-weight: var(--w-regular); font-size: var(--t-small-size); line-height: var(--t-small-lh); letter-spacing: 0;
}

/* =============================================================== 3. FRAME */
@media (min-width: 700px) {
  .shell { grid-template-columns: 240px minmax(0, 1fr); background: var(--gray-25); }
  .shell.mini { grid-template-columns: 72px minmax(0, 1fr); }
  .shell > .nav {
    background: var(--gray-25); border: 0; border-radius: 0; box-shadow: none; margin: 0;
    padding: var(--s-4) var(--s-3) var(--s-3); gap: 0;
  }
}
body, .shell, .shell .main { background: var(--gray-25); }
.shell .main { box-shadow: none; border: 0; border-radius: 0; }
.shell > .nav .brand { padding: var(--s-1) var(--s-2); margin: 0 0 var(--s-3); border-radius: var(--r-ctl); background: none; border: 0; box-shadow: none; }
.shell > .nav .brand .bws { background: none; border: 0; box-shadow: none; padding: 0; }
.shell > .nav .brand b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); color: var(--gray-900); letter-spacing: 0; }
.shell > .nav .brand #wsNav { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-regular); color: var(--gray-500); }
.shell > .nav .brand img { width: 28px; height: 28px; border-radius: var(--r-ctl); }
.shell > .nav .navsearch { height: 32px; border-radius: var(--r-ctl); font-size: var(--t-body-size); color: var(--gray-500); background: var(--gray-0); border: 1px solid var(--gray-200); box-shadow: none; }
#nav .navgroup { margin: 0; padding: 0; border: 0; }
#nav .navgroup + .navgroup { margin-top: var(--s-4); }
#nav .navhead {
  height: 24px; min-height: 0; padding: 0 var(--s-2); margin: 0 0 var(--s-1); border: 0; background: none;
  font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--gray-500);
  text-transform: none; letter-spacing: 0;
}
#nav .navhead span { text-transform: none; letter-spacing: 0; font-size: var(--t-label-size); font-weight: var(--w-medium); color: var(--gray-500); }
#nav .navhead svg.i { width: 12px; height: 12px; color: var(--gray-400); }
#nav .navitems { gap: 0; }
#nav .navitems a {
  height: 32px; min-height: 32px; padding: 0 var(--s-2); gap: var(--s-2); border-radius: var(--r-ctl); border: 0; box-shadow: none;
  font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular); color: var(--gray-700); background: transparent;
}
#nav .navitems a:hover { background: var(--gray-50); color: var(--gray-900); }
#nav .navitems a[aria-current="page"] { background: var(--gray-100); color: var(--gray-900); font-weight: var(--w-medium); box-shadow: none; }
#nav .navitems a[aria-current="page"]::before, #nav .navitems a[aria-current="page"]::after { display: none; }
#nav .navitems a svg.i { width: 16px; height: 16px; color: var(--gray-500); flex: none; }
#nav .navitems a[aria-current="page"] svg.i { color: var(--gray-900); }
#nav .navitems a .nl { font-size: inherit; font-weight: inherit; letter-spacing: 0; }
#nav .navitems a .count {
  margin-left: auto; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--gray-500);
}
#nav .navitems a .count.hot { color: var(--critical-fg); background: none; }
#nav .navitems a .v87dot { width: 6px; height: 6px; border-radius: 50%; background: var(--critical-dot); box-shadow: none; }
/* the setup card and Vera's card: one compact group at the foot of the nav */
#navSetup { margin-top: auto; padding: 0; }
#navSetup .setup { margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--gray-200); border-bottom: 0; border-radius: var(--r-ctl) var(--r-ctl) 0 0; background: var(--gray-0); box-shadow: none; display: grid; gap: 2px; position: relative; }
#navSetup .setup-h { display: flex; align-items: center; gap: var(--s-2); margin: 0; }
#navSetup .setup-h b { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-900); }
#navSetup .setup-h span:last-child { margin-left: auto; font-size: var(--t-label-size); line-height: var(--t-label-lh); color: var(--gray-500); font-weight: var(--w-medium); }
#navSetup .setup p { margin: 0; font-size: var(--t-label-size); line-height: var(--t-label-lh); color: var(--gray-500); }
#navSetup .setup .setup-go { position: absolute; inset: 0; font-size: 0; color: transparent; background: none; border: 0; box-shadow: none; padding: 0; height: auto; border-radius: inherit; }
#navSetup .setup .setup-go svg { display: none; }
#navSetup .setup:hover { background: var(--gray-50); }
.shell > .nav .v73vera {
  margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--gray-200); border-radius: var(--r-ctl); background: var(--gray-0); color: var(--gray-900);
  box-shadow: none; display: flex; align-items: center; gap: var(--s-2); cursor: pointer;
}
#navSetup:not(:empty) + .v73vera { border-radius: 0 0 var(--r-ctl) var(--r-ctl); }
#navSetup:empty + .v73vera { margin-top: auto; }
.shell > .nav .v73vera:hover { background: var(--gray-50); }
.shell > .nav .v73vera::before, .shell > .nav .v73vera::after { display: none; }
.shell > .nav .v73vera .vv-top { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 auto; min-width: 0; }
.shell > .nav .v73vera .vv-top > div span, .shell > .nav .v73vera .vv-dot { display: none; }
.shell > .nav .v73vera .vv-top b { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-900); }
.shell > .nav .v73vera .vv-go {
  position: static; display: flex; align-items: center; gap: var(--s-1); margin: 0; padding: 0; height: auto; flex: none; background: none; box-shadow: none; border: 0;
  font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--gray-500); white-space: nowrap;
}
.shell > .nav .v73vera .vv-go svg.i { width: 12px; height: 12px; }
.vv-av { width: 20px; height: 20px; border-radius: 6px; background: var(--gray-100); color: var(--gray-700); font-size: var(--t-label-size); line-height: 20px; font-weight: var(--w-semibold); display: inline-grid; place-items: center; flex: none; box-shadow: none; }
.shell > .nav .navfoot { display: none; }
/* v90 (reviewers C and D): the foot of the nav is one quiet row, not two stacked widgets in a floating card. "Finish setup"
   becomes a nav row under the last group (a ring, its name, "2 of 4"; the next step is its tooltip), and Vera is the one row
   at the foot (her mark, her name, what needs you now), both drawn like nav items: no border, no fill until hover. */
@media (min-width: 700px) {
  .shell > .nav .navlist { flex: 0 1 auto; min-height: 0; }
  #navSetup { margin: var(--s-4) var(--s-3) 0; padding: 0; }   /* on the nav items' own 12px inset, so the ring sits in the icon column */
  #navSetup .setup { position: relative; display: flex; align-items: center; gap: var(--s-2); height: 32px; margin: 0; padding: 0 var(--s-2); border: 0; border-radius: var(--r-ctl); background: transparent; box-shadow: none; }
  #navSetup .setup:hover { background: var(--gray-50); }
  #navSetup .setup-h { display: contents; }
  #navSetup .setup-h b { flex: 1 1 auto; min-width: 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular); color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #navSetup .setup-h span:last-child { flex: none; margin-left: auto; font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--gray-500); }
  #navSetup .setup p { display: none; }
  #navSetup .setup .ringmini { width: 16px; height: 16px; flex: none; background: conic-gradient(var(--accent) calc(var(--p) * 360deg), var(--gray-200) 0); }
  .shell > .nav .v73vera, #navSetup:not(:empty) + .v73vera, #navSetup:empty + .v73vera {
    margin: auto var(--s-3) 0; height: 36px; min-height: 36px; padding: 0 var(--s-2) 0 6px; border: 0; border-radius: var(--r-ctl); background: transparent; box-shadow: none; gap: var(--s-2);
  }
  .shell > .nav .v73vera .vv-top { gap: 6px; }   /* her 20px mark centred on the 16px icon column, her name on the labels' edge */
  .shell > .nav .v73vera:hover { background: var(--gray-50); }
  .shell > .nav .v73vera .vv-top b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular); color: var(--gray-700); }
  .shell > .nav .v73vera .vv-go { margin: 0; padding: 0; font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--gray-500); background: none; }
  .shell > .nav .v73vera .vv-go svg.i { display: none; }
  .shell.mini #navSetup .setup { justify-content: center; padding: 0; }
  .shell.mini > .nav .v73vera, .shell.mini > .nav #navSetup + .v73vera { margin: auto 0 0 var(--s-3); width: 40px; padding: 0; justify-content: center; }   /* on the rail items' own 12px inset, centred on their icons */
  .shell.mini > .nav .v73vera .vv-top { flex: none; justify-content: center; }
  .shell.mini #navSetup .setup-h b, .shell.mini #navSetup .setup-h span:last-child { display: none; }
  /* the workspace's name is shown whole, on two lines at most; its full text is the tooltip (next-v89.js) */
  .shell > .nav .brand .bws > div { min-width: 0; }
  .shell > .nav .brand #wsNav { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; }
}

/* the top bar: search, one quiet status, Ask Vera, the person */
.shell .main > header.top {
  height: 56px; min-height: 56px; padding: 0 var(--gutter); gap: var(--s-3); background: var(--gray-25); border: 0; box-shadow: none;
}
header.top .crumb, header.top .wsel, header.top .topsep, header.top .v85sbx, header.top .v73live { display: none; }
header.top .v89-status {
  display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap;
  font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-regular); color: var(--gray-500); cursor: help;
}
header.top .v89-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-dot); flex: none; }
header.top .v89-status.fresh::before { background: var(--positive-dot); }
header.top .navtoggle { width: 32px; height: 32px; border-radius: var(--r-ctl); color: var(--gray-500); background: none; border: 0; box-shadow: none; }
header.top .navtoggle:hover, header.top .bell:hover { background: var(--gray-100); color: var(--gray-900); }
header.top .bell { width: 32px; height: 32px; border-radius: var(--r-ctl); color: var(--gray-500); background: none; border: 0; box-shadow: none; }
header.top .topsearch {
  height: 32px; min-width: 280px; padding: 0 var(--s-3); gap: var(--s-2); border-radius: var(--r-ctl); border: 1px solid var(--gray-200);
  background: var(--gray-0); box-shadow: none; color: var(--gray-500); font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular);
}
header.top .topsearch svg.i { width: 16px; height: 16px; color: var(--gray-400); }
header.top .topsearch kbd { margin-left: auto; }
header.top .v87vbtn { height: 32px; padding: 0 var(--s-3); gap: var(--s-2); border: 0; background: none; color: var(--gray-700); box-shadow: none; }
header.top .v87vbtn:hover { background: var(--gray-100); color: var(--gray-900); }
header.top .me { gap: var(--s-2); padding: 0; background: none; border: 0; box-shadow: none; }
header.top .me b { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-900); }
header.top .me #role { font-size: var(--t-label-size); line-height: var(--t-label-lh); color: var(--gray-500); font-weight: var(--w-regular); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gray-100); color: var(--gray-700); font-size: var(--t-label-size); line-height: 32px; font-weight: var(--w-semibold); box-shadow: none; border: 0; }
.shell .main > .readonly { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); background: var(--gray-50); border: 0; }

/* content: max width 1280, the page gutter, and 24px between sections */
#view .page { max-width: calc(1280px + 2 * var(--gutter)); padding: var(--s-2) var(--gutter) var(--s-12); margin: 0 auto; }
@media (max-width: 1279px) { :root { --gutter: 24px; } }

/* =============================================================== 4. COMPONENTS */

/* ---- page header: title, purpose line, at most one primary and one secondary action, then 24px ---- */
.phead, .v89-head { display: flex; align-items: flex-start; gap: var(--s-4) var(--s-6); margin: 0 0 var(--s-6); padding: 0; flex-wrap: nowrap; }
.phead > div:first-child, .v89-head > div:first-child { min-width: 0; flex: 1 1 auto; }
.phead h1, .v89-head h1, #view h1 {
  font-size: var(--t-title-size); line-height: var(--t-title-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-title-track);
  color: var(--gray-900); margin: 0; text-wrap: balance;
}
.phead h1 b, .v89-head h1 b, #view h1 b { font-weight: var(--w-semibold); }
.phead p, .v89-purpose {
  margin: var(--s-1) 0 0; max-width: 80ch; font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular);
  color: var(--gray-500); letter-spacing: 0;
}
.phead p b, .v89-purpose b { font-weight: var(--w-medium); color: var(--gray-700); }
.v89-product { margin: var(--s-2) 0 0; max-width: 80ch; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.phead .acts, .v89-head .acts { margin-left: auto; display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); align-items: center; padding-top: 0; }
/* the small section links above titles are gone (the nav names every place); any left in old markup stay hidden */
nav.v87sec { display: none; }
/* breadcrumb: detail pages only */
.crumbs, .v89-crumbs { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; margin: 0 0 var(--s-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.crumbs a { color: var(--gray-500); font-weight: var(--w-regular); text-decoration: none; }
.crumbs a:hover { color: var(--gray-900); }
.crumbs svg.i { width: 12px; height: 12px; color: var(--gray-400); }
.crumbs span { color: var(--gray-700); }
.crumbs .mono { font-weight: var(--w-medium); }

/* object headers (lot, supplier, pharmacy): no cover band, no black tile; the header is the page's head, not a card */
.pcover, .vp-cover { display: none; }
section.card.rhead, section.card.prof, section.card.lhero, section.card.vprof { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 var(--s-6); overflow: visible; }
.lhero .lh-mark, .v77lh .lh-mark { display: none; }
section.card.rhead > .top2 { display: flex; align-items: flex-start; gap: var(--s-4); padding: 0; margin: 0; background: none; border: 0; }
section.card.rhead > .top2 > div:first-child { flex: 1 1 auto; min-width: 0; }
section.card.rhead .v88sup, section.card.rhead .v87prov { margin: var(--s-2) 0 0; max-width: 80ch; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v77pf-cover { display: none; }
.v77prof .v77pf-b { margin: 0; padding: var(--s-5); padding-top: var(--s-5); }
.v77prof .v77pf-logo { margin: 0; padding: 0; position: static; width: auto; height: auto; background: none; box-shadow: none; border: 0; }
.v77prof .v77pf-logo .av, .v77prof .av.xl { width: 40px; height: 40px; min-width: 40px; border-radius: var(--r-ctl); background: var(--gray-100); color: var(--gray-700); font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-semibold); box-shadow: none; border: 0; display: inline-grid; place-items: center; }
.v77prof .v77pf-id h2 { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); }
.v77lh, .v77lh-main, .v77lh-main > .top2 { padding: 0; margin: 0; background: none; border: 0; box-shadow: none; }
.v77lh-main > .top2 { display: flex; align-items: flex-start; gap: var(--s-4); flex-wrap: nowrap; }
.v77lh-main > .top2 > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.titleline { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: 0; }
.titleline h1, .v77lh-main > .top2 .titleline h1, .lhero h1, .prof .titleline h1 {
  font-size: var(--t-title-size); line-height: var(--t-title-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-title-track); margin: 0;
}
.titleline h1 b { font-weight: var(--w-semibold); }
.idline { margin: var(--s-1) 0 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.idline .mono { color: var(--gray-700); }
.prof .phero, .vprof .phero { display: flex; align-items: flex-start; gap: var(--s-4); padding: 0; margin: 0; background: none; border: 0; }
.prof .pid { flex: 1 1 auto; min-width: 0; padding: 0; margin: 0; }
.prof .phero .acts, .v77lh .acts, .lhero .acts { margin-left: auto; display: flex; gap: var(--s-2); flex: none; align-items: center; padding: 0; }
.prof .vbadges, .prof .chiprow { margin-top: var(--s-2); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.prof .facts, .vprof .facts { margin: var(--s-5) 0 0; }

/* ---- monogram: 32px, or 40px in object headers; initials on a grey square, never a black block ---- */
span.logo, .vp-logo, .plogo, .bcn, .v89-mono-gram {
  width: 32px; height: 32px; min-width: 32px; border-radius: var(--r-ctl); background: var(--gray-100); color: var(--gray-700);
  font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-semibold); letter-spacing: 0;
  display: inline-grid; place-items: center; flex: none; box-shadow: none; border: 0; filter: none; margin: 0; padding: 0; text-transform: none;
}
span.logo.xl, .vp-logo.xl, .phero span.logo, .phero .vp-logo, .v89-mono-gram.lg { width: 40px; height: 40px; min-width: 40px; border-radius: var(--r-ctl); font-size: var(--t-label-size); }

/* ---- status strip: one bordered box, at most four cells, a label, a numeral, context ---- */
.v89-strip, #view .v84strip, #view .v75kpis.v84strip, #view .v84fts, #view .card.stats, .prof .facts, .vprof .facts {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 0;
  background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: var(--r-card); box-shadow: none; padding: 0; margin: 0 0 var(--s-6); overflow: hidden;
}
.v89-strip > *, #view .v84strip > .v75k, #view .v84fts > .v84ft, #view .card.stats > .stat, .prof .facts > div, .vprof .facts > div {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; min-width: 0; min-height: 0; height: auto;
  padding: var(--s-4) var(--s-5); margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: left; color: var(--gray-900);
}
.v89-strip > * + *, #view .v84strip > .v75k + .v75k, #view .v84fts > .v84ft + .v84ft, #view .card.stats > .stat + .stat, .prof .facts > div + div, .vprof .facts > div + div { border-left: 1px solid var(--gray-200); }
/* the label first, then the numeral, then its context */
.v89-strip .lab, #view .v84strip .v75k-h, #view .v84strip .v75k-l, #view .v84fts .v84ft span, #view .stats .stat .lab, .prof .facts small, .vprof .facts small {
  order: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-500); letter-spacing: 0; text-transform: none; margin: 0;
  white-space: normal; overflow: visible; max-width: 100%;
}
/* a strip label wraps rather than being cut ("Destinatio"); no icon tiles in a strip */
#view .stats .stat .tile, #view .stats .stat .lab .tile, #view .stats .stat .lab > svg, .v89-strip .tile { display: none; }
#view .stats .stat .lab { display: block; }
#view .stats .stat .subl { order: 2; margin: 0; text-align: left; }
.v89-strip .num, #view .v84strip .v75k-v, #view .v84fts .v84ft b, #view .stats .stat .val, .prof .facts .num, .vprof .facts .num { order: 1; margin: 0; }
.v89-strip .num, #view .v84strip .v75k-v b, #view .v84fts .v84ft b, #view .stats .stat .val, .prof .facts .num, .vprof .facts .num {
  font-size: var(--t-num-size); line-height: var(--t-num-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-num-track); font-variant-numeric: tabular-nums; color: var(--gray-900);
}
.prof .facts > div > span:not(.num), .vprof .facts > div > span:not(.num) { order: 1; font-size: var(--t-body-size); line-height: var(--t-body-lh); margin: 6px 0; font-weight: var(--w-medium); color: var(--gray-900); }
#view .v84strip .v75k-v b.word, #view .stats .stat .val.word { font-size: var(--t-body-size); line-height: var(--t-body-lh); margin: 6px 0; font-weight: var(--w-medium); letter-spacing: 0; }
.v89-strip .ctx, #view .v84strip .v75k-v span, #view .v84strip .v75k-f, #view .stats .stat .sub { order: 2; font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-regular); color: var(--gray-500); letter-spacing: 0; }
#view .v84strip .v75k-v { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
#view .v84strip .v75k-ic, #view .stats .stat .sic, #view .stats .stat > svg { display: none; }
#view .v84strip .v75k .v75chip, .v89-strip .chip { margin: var(--s-1) 0 0; }
#view .v84fts .v84ft { cursor: pointer; }
#view a.v75k:hover, #view button.v75k:hover, #view .v84fts .v84ft:hover, #view .card.stats > button.stat:not(.static):hover { background: var(--gray-50); box-shadow: none; }
#view .v84fts .v84ft.on, #view .card.stats > .stat.on { box-shadow: inset 0 -2px 0 var(--accent); background: none; }
#view .v84fts .v84ft.bad b, #view .card.stats > .stat.r .val { color: var(--critical-fg); }

/* ---- card: white, a 1px border, radius 12, no shadow; header 16/20, body 20; never a card in a card ---- */
.card, section.card, aside.card {
  background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: var(--r-card); box-shadow: none; color: var(--gray-900);
}
.card .card, .card section.card, .card aside.card { background: var(--gray-50); border: 0; border-radius: var(--r-ctl); box-shadow: none; }
.card-h {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s-3); min-height: 0; padding: var(--s-4) var(--s-5); margin: 0;
  border: 0; background: none; box-shadow: none;
}
.card-h h2, .card-h h3, .card h2, .card-h .ttl {
  font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-heading-track);
  color: var(--gray-900); margin: 0; min-width: 0; flex: 0 1 auto; text-transform: none;
}
.card-h h2 b { font-weight: var(--w-semibold); }
.card-h h2 small { display: block; font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-regular); color: var(--gray-500); letter-spacing: 0; }
/* the description sits under the title on the same left edge (the 8px .sub indent is gone) */
.card-h .sub { order: 10; flex: 1 0 100%; margin: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-regular); color: var(--gray-500); letter-spacing: 0; }
.card-h .n { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--gray-500); margin: 0; }
.card-h .sp, .card-h .link.sp, .card-h > .acts, .card-h > .btn:last-child, .card-h > a.link:last-child { margin-left: auto; }
.card-h .btn, .card-h .acts { flex: none; margin-top: 0; margin-bottom: 0; }
.card-h .link { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); }
/* v90: THE CARD HEADER RULE (DESIGN-V89 section 3; reviewer D). The title, then the subtitle on its own line under it on the
   same left edge, never a 12px line beside a 16px title; the action or the fold chevron vertically centred on both lines.
   A header with a subtitle is a small grid: row 1 is the title and what sits beside it (a count, a chip); a word-count
   (.n holding words, marked .v89-subn by next-v89.js) is row 2; the subtitle (.sub, small, .v85sub) is row 3; the action
   (.acts, a button, a text link, a More menu, a filled .sp, the fold chevron) is the last column across all three rows.
   A header with no subtitle stays one centred line. */
.card-h:has(> :is(.sub, small, .v85sub, .v89-subn)) {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) minmax(0, auto) auto; grid-template-rows: auto auto auto; column-gap: var(--s-3); row-gap: 0; align-items: center;
}
.card-h:has(> :is(.sub, small, .v85sub, .v89-subn)) > * { grid-row: 1; min-width: 0; }
.card-h:has(> :is(.sub, small, .v85sub, .v89-subn)) > .v89-subn { grid-row: 2; grid-column: 1 / -3; }
.card-h:has(> :is(.sub, small, .v85sub, .v89-subn)) > :is(.sub, small, .v85sub) { grid-row: 3; grid-column: 1 / -3; }
.card-h:has(> .tile:first-child):has(> :is(.sub, small, .v85sub, .v89-subn)) > :is(.sub, small, .v85sub, .v89-subn) { grid-column: 2 / -3; }
/* a status chip held in the header's right-hand .sp sits beside the action, centred on both lines; it gives way (ellipsis) in a narrow card */
.card-h:has(> :is(.sub, small, .v85sub, .v89-subn)) > .sp:not(:empty):not(:has(:is(.btn, a, button, .seg, details))) { grid-row: 1 / -1; grid-column: -3 / -2; justify-self: end; align-self: center; display: flex; justify-content: flex-end; max-width: 100%; }
.card-h:has(> :is(.sub, small, .v85sub, .v89-subn)) > :is(.acts, .btn, a.link, button.link, details, .seg, .sp:has(:is(.btn, a, button, .seg, details))),
.card-h:has(> :is(.sub, small, .v85sub, .v89-subn))::after { grid-row: 1 / -1; grid-column: -2 / -1; justify-self: end; align-self: center; margin: 0; }
.card-h:has(> :is(.sub, small, .v85sub, .v89-subn)) > .sp:empty { display: none; }
.card-h:has(> :is(.sub, small, .v85sub, .v89-subn)) > .sp > :is(.tag, .chip, .v75chip, .v73pill) { flex: 0 1 auto; min-width: 0; }
.card-h > :is(small, .v85sub, .v89-subn) { display: block; margin: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-regular); color: var(--gray-500); letter-spacing: 0; }
/* v90 (reviewer D #14): one text action in a card header, everywhere: accent, 13/500, no box ("Open" on Today, "Edit" and
   "All 15" on a supplier, "Show the items" were three styles). A filled button in a header stays a button. */
.card-h > :is(a.link, button.link, .btn.ghost, .btn.link, .btn.quiet), .card-h > .sp > :is(a.link, button.link, .btn.ghost, .btn.link, .btn.quiet) {
  display: inline-flex; align-items: center; gap: var(--s-1); height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--accent); font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.card-h > :is(a.link, button.link, .btn.ghost, .btn.link, .btn.quiet):hover, .card-h > .sp > :is(a.link, button.link, .btn.ghost, .btn.link, .btn.quiet):hover { color: var(--accent-hover); background: none; text-decoration: underline; text-underline-offset: 2px; }
.card-h > :is(a.link, button.link, .btn.ghost, .btn.link, .btn.quiet) svg.i, .card-h > .sp > :is(a.link, button.link, .btn.ghost, .btn.link, .btn.quiet) svg.i { width: 14px; height: 14px; color: currentColor; }
.card-b { padding: var(--s-5); margin: 0; }
.card-h + .card-b { padding-top: 0; }
/* a divider only above a table or a list */
.card-h + .tablewrap, .card-h + table, .card-h + .slist, .card-h + .list, .card-h + ul { border-top: 1px solid var(--gray-200); }
.card > .tablewrap:last-child, .card > table:last-child { border-bottom-left-radius: var(--r-card); border-bottom-right-radius: var(--r-card); }
#view .grid, #view .g-main, #view .g-2 { gap: var(--s-4); }
#view .stack { gap: var(--s-4); }
#view .page > * + .card, #view .page > * + section, #view .page > * + .grid, #view .page > .card + *, #view .page > section + * { margin-top: var(--s-6); }
#view .page > .phead + *, #view .page > .rhead + *, #view .page > .crumbs + * { margin-top: 0; }

/* ---- callout: one style; a tone fill with tone text; no side or top rules ---- */
.v89-note, .notice {
  display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin: 0; border: 0; border-radius: var(--r-ctl);
  background: var(--neutral-bg); color: var(--neutral-fg); box-shadow: none;
  font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular);
}
.notice::before, .notice::after, .v89-note::before, section.card.verdict::before { display: none; }
/* a next step box drawn with a coloured side rule is a callout like every other */
.nextbar { border: 0; border-radius: var(--r-ctl); background: var(--neutral-bg); box-shadow: none; padding: var(--s-3) var(--s-4); }
.nextbar.a { background: var(--attention-bg); } .nextbar.r { background: var(--critical-bg); } .nextbar.g { background: var(--positive-bg); }
.notice > svg.i, .v89-note > svg.i { width: 16px; height: 16px; flex: none; margin-top: 2px; color: currentColor; }
.notice > div, .v89-note > div { min-width: 0; }
.notice p, .v89-note p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.notice.g, .v89-note[data-tone="positive"] { background: var(--positive-bg); color: var(--positive-fg); }
.notice.a, .v89-note[data-tone="attention"] { background: var(--attention-bg); color: var(--attention-fg); }
.notice.r, .v89-note[data-tone="critical"] { background: var(--critical-bg); color: var(--critical-fg); }
.notice.b, .notice.n, .v89-note[data-tone="neutral"] { background: var(--neutral-bg); color: var(--neutral-fg); }
.notice .btn, .v89-note .btn { margin-left: auto; flex: none; }
p.note { margin: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }

/* ---- table: 36px head on grey, 48px rows, 12/16 cells, grey dividers, numbers right and tabular, never clipped ---- */
.tablewrap { overflow-x: auto; overflow-y: visible; border: 0; border-radius: 0; margin: 0; box-shadow: none; background: none; }
table { border-collapse: collapse; border-spacing: 0; }
.tablewrap > table, .card > table, .v89-table { width: 100%; }
table th, .v89-table th {
  height: 36px; padding: var(--s-2) var(--s-4); background: var(--gray-50); color: var(--gray-500); border: 0; border-bottom: 1px solid var(--gray-200);
  font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); letter-spacing: 0; text-transform: none;
  text-align: left; vertical-align: middle; white-space: nowrap; position: static;
}
table td, .v89-table td {
  padding: var(--s-3) var(--s-4); border: 0; border-bottom: 1px solid var(--gray-100); background: none; color: var(--gray-900);
  font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular); letter-spacing: 0; vertical-align: middle; height: 48px;
}
table tbody tr:last-child td, .v89-table tbody tr:last-child td { border-bottom: 0; }
table tbody tr:hover td, .v89-table tbody tr:hover td { background: var(--gray-50); }
table tr.static:hover td { background: none; }
table th.r, table td.r, table th.num, table td.num, .v89-table .r, .v89-table .num { text-align: right; font-variant-numeric: tabular-nums; }
table td b, .v89-table td b { font-weight: var(--w-medium); color: var(--gray-900); }
/* a second line under the primary text */
:is(table td.two > span, table td .two > span, table td.nm > span, table td.why > span, table td > span.sub2, table td .subl, table td small, .v89-table td .l2):not(.tag):not(.chip):not(.v75chip):not(.vx-chip):not(.v73pill):not(.vbadge):not(.dpill):not(.bage):not(.vx-out):not(.v96-l) /* v97 (M18): a kit label keeps its own size and colour */ {
  display: block; font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-regular); color: var(--gray-500); margin: 0;
}
/* v90 (reviewer D, top defect): cells wrap. next.css:171 set every td to nowrap, so in a fixed-layout table a long cell drew
   its text over the next column (the lot's History tab: "Automatic, on its compounding record" ran into Event). That one
   global default is lowered INSIDE the legacy layer, so every targeted legacy nowrap (td.r, .ltable td, .agt td, ellipsis
   cells) still wins over it by specificity; only the cells that were nowrap by accident now wrap. What must stay on one
   line is said here, unlayered: chips, ids, dates, numbers and the action cell. */
@layer legacy { table td { white-space: normal; overflow-wrap: break-word; } }
table :is(td.r, td.num, td.age, td.when, td.date, td.ac, td.ck),
table td :is(.v89-id, .mono, time, .when, .date, .tag, .chip, .v75chip, .vx-chip, .v73pill, .btn, kbd) { white-space: nowrap; }
table td.two > span .mono, table td.nm > span .mono { color: var(--gray-700); }
table td.muted, table td .muted { color: var(--gray-500); }
table td.ac, table td:last-child .btn { white-space: nowrap; }
table .btn { height: 28px; }
/* no three-line clamps: one line; the detail sits on the row's page */
table td .clamp { display: block; -webkit-line-clamp: unset; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr:nth-child(even) td { background-color: transparent; }
tr:nth-child(even):hover td { background: var(--gray-50); }
/* Today's queue: the table fits its card (the last column was clipped by an overflow-hidden wrapper) */
@media (min-width: 700px) {
#view .v84qcard { overflow: visible; }
#view .v84qcard .tablewrap { overflow-x: auto; }
#view table.v84q { width: 100%; table-layout: fixed; }
#view table.v84q td.why, #view table.v84q td.nm { max-width: 0; }
#view table.v84q td.why > span, #view table.v84q td.nm > span, #view table.v84q td.nm > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; display: block; }
#view table.v84q th:nth-child(1) { width: 176px; } #view table.v84q th:nth-child(2) { width: 28%; } #view table.v84q th:nth-child(4) { width: 80px; } #view table.v84q th:nth-child(5) { width: 128px; }
#view table.v84q td { height: 60px; padding-top: var(--s-2); padding-bottom: var(--s-2); }
#view table.v84q td:last-child .btn { min-width: 0; }
}

/* ---- chip: 22px, 12/16 500, pill, a 1px tone border, a tone fill and a 6px tone dot; all legacy chip classes ---- */
.chip[data-tone], .tag, .v75chip, .vx-chip, .vchip, .bage, .v73pill, .vbadge, .cs-s, .vx-rule, .dpill, .kbadge, .vx-out, .v87chip {
  --chip-fg: var(--neutral-fg); --chip-bg: var(--neutral-bg); --chip-bd: var(--neutral-bd); --chip-dot: var(--neutral-dot);
  display: inline-flex; align-items: center; gap: var(--s-1); height: 22px; min-height: 22px; max-width: 100%; padding: 0 var(--s-2); margin: 0;
  border: 1px solid var(--chip-bd); border-radius: var(--r-chip); background: var(--chip-bg); color: var(--chip-fg); box-shadow: none;
  font-family: var(--font); font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); font-style: normal;
  letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; flex: none; opacity: 1; text-decoration: none;
}
.chip[data-tone]::before, .tag::before, .v75chip::before, .vx-chip::before, .vchip::before, .bage::before, .v73pill::before, .vbadge::before, .cs-s::before, .dpill::before, .vx-out::before, .v87chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--chip-dot); flex: none; display: block; margin: 0;
}
:is(.tag, .v75chip, .vx-chip, .vchip, .bage, .v73pill, .vbadge, .cs-s, .dpill, .vx-out, .v87chip, .chip[data-tone]):has(> svg)::before { display: none; }
:is(.chip[data-tone], .tag, .v75chip, .vx-chip, .vchip, .bage, .v73pill, .vbadge, .cs-s, .vx-rule, .dpill, .kbadge, .vx-out, .v87chip) svg { width: 12px; height: 12px; flex: none; opacity: 1; }
:is(.chip[data-tone], .tag, .v75chip, .vx-chip, .vchip, .bage, .v73pill, .vbadge, .cs-s, .dpill, .kbadge, .vx-out, .v87chip) :is(small, b, span) { font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; }
/* tones, from the classes each legacy chip already carried */
.chip[data-tone="positive"], .tag.g, .v75chip.ok, .v75chip.up, .vx-chip.g, .v73pill.ok, .vbadge.g, .vbadge.ok, .dpill.g, .bage.g, .vx-out.g, .cs-pass .cs-s, .kbadge.up {
  --chip-fg: var(--positive-fg); --chip-bg: var(--positive-bg); --chip-bd: var(--positive-bd); --chip-dot: var(--positive-dot);
}
.chip[data-tone="attention"], .tag.a, .v75chip.warn, .vx-chip.a, .v73pill.warn, .vbadge.a, .vbadge.warn, .bage.a, .dpill.a, .vx-out.a, .cs-warn .cs-s, .cs-attention .cs-s {
  --chip-fg: var(--attention-fg); --chip-bg: var(--attention-bg); --chip-bd: var(--attention-bd); --chip-dot: var(--attention-dot);
}
.chip[data-tone="critical"], .tag.r, .v75chip.bad, .vx-chip.r, .v73pill.bad, .vbadge.r, .vbadge.bad, .bage.r, .dpill.r, .vx-out.r, .cs-fail .cs-s, .kbadge.down {
  --chip-fg: var(--critical-fg); --chip-bg: var(--critical-bg); --chip-bd: var(--critical-bd); --chip-dot: var(--critical-dot);
}
.v73pill.solid, .v73pill.solid.bad { --chip-bg: var(--critical-bg); }
.vbadge.score { --chip-fg: var(--neutral-fg); --chip-bg: var(--neutral-bg); --chip-bd: var(--neutral-bd); }
/* a rule citation is a quiet link, not a status */
.vx-rule { --chip-bg: var(--gray-0); --chip-fg: var(--gray-700); --chip-bd: var(--gray-200); gap: var(--s-1); }
a.vx-rule:hover { --chip-bd: var(--gray-300); --chip-fg: var(--gray-900); }
.vx-rule.off { --chip-bg: transparent; border-style: dashed; }
/* in a table or a list a chip stays one line */
table .tag, table .v75chip, table .vx-chip, table .v73pill, .slist .tag { height: 22px; white-space: nowrap; }

/* filter chips (toolbars, Vera's suggestions): 28px outlined pills; the pressed one takes the accent tint */
button.chip, .chipbtn, .v88chip, .stool .chip {
  display: inline-flex; align-items: center; gap: var(--s-2); height: 28px; padding: 0 var(--s-3); border: 1px solid var(--gray-300); border-radius: var(--r-chip);
  background: var(--gray-0); color: var(--gray-700); box-shadow: none; cursor: pointer; white-space: nowrap;
  font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); letter-spacing: 0;
}
button.chip:hover, .chipbtn:hover, .v88chip:hover, .stool .chip:hover { background: var(--gray-50); border-color: var(--gray-400); }
button.chip[aria-pressed="true"], .chipbtn[aria-pressed="true"], .v88chip[aria-pressed="true"], .v88chip.on, .stool .chip.on, .stool .chip[aria-pressed="true"] {
  background: var(--accent-tint); border-color: var(--accent); color: var(--accent);
}
button.chip span, .v88chip span { color: var(--gray-500); font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); }

/* ---- button: 32px (28 in tables), 12px sides, 14/500, radius 8; primary, secondary, ghost, danger ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 32px; min-height: 0; padding: 0 var(--s-3); margin: 0;
  border: 1px solid var(--gray-300); border-radius: var(--r-ctl); background: var(--gray-0); color: var(--gray-900); box-shadow: none;
  font-family: var(--font); font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); letter-spacing: 0;
  white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--d-hover), border-color var(--d-hover), color var(--d-hover);
}
.btn:hover { background: var(--gray-50); border-color: var(--gray-300); color: var(--gray-900); }
.btn svg.i { width: 16px; height: 16px; flex: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn.sec, .btn.dark, .btn.v85demoted, #navSetup .setup-go { background: var(--gray-0); border-color: var(--gray-300); color: var(--gray-900); }
.btn.ghost, .btn.link, .btn.quiet { background: transparent; border-color: transparent; color: var(--gray-700); }
.btn.ghost:hover, .btn.link:hover, .btn.quiet:hover { background: var(--gray-100); color: var(--gray-900); }
.btn.danger, .btn.bad { background: var(--gray-0); border-color: var(--gray-300); color: var(--critical-fg); }
.btn.danger:hover, .btn.bad:hover { background: var(--critical-bg); border-color: var(--critical-bd); color: var(--critical-fg); }
.btn.sm { height: 28px; padding: 0 var(--s-3); font-size: var(--t-body-size); }
.btn.lg { height: 40px; padding: 0 var(--s-4); }
.btn.block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary[aria-disabled="true"]:hover, .btn.primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
/* the More menu: its entries are rows, not buttons */
details.v84more { position: relative; }
details.v84more > summary.btn { list-style: none; }
details.v84more > summary.btn::-webkit-details-marker { display: none; }
.v84menu { border: 1px solid var(--gray-200); border-radius: var(--r-ctl); background: var(--gray-0); box-shadow: var(--shadow-overlay); padding: var(--s-1); min-width: 200px; }
.v84menu .btn.mi, .btn.mi { width: 100%; height: 32px; justify-content: flex-start; border: 0; border-radius: 6px; background: none; color: var(--gray-900); font-weight: var(--w-regular); padding: 0 var(--s-2); }
.v84menu .btn.mi:hover, .btn.mi:hover { background: var(--gray-50); }
.v84menu .btn.mi svg.i { color: var(--gray-500); }

/* "I looked": a small secondary toggle; pressed, it takes the positive tint */
.v81mk, .vx-mk { display: inline-flex; align-items: center; gap: var(--s-1); height: 28px; padding: 0 var(--s-3); border: 1px solid var(--gray-300); border-radius: var(--r-ctl); background: var(--gray-0); color: var(--gray-700); box-shadow: none; font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); cursor: pointer; }
.v81mk:hover, .vx-mk:hover { background: var(--gray-50); }
.v81mk[aria-pressed="true"], .vx-mk[aria-pressed="true"] { background: var(--positive-bg); border-color: var(--positive-bd); color: var(--positive-fg); }
.v81mk svg.i, .vx-mk svg.i { width: 16px; height: 16px; }

/* ---- tabs: one underline system under the title; the lot page's grey band is gone ---- */
.ptabs, .ptabs.v84tabs, #view .page > .ptabs { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 var(--s-6); position: static; }
.tabs, .v89-tabs, .tabs.v83sub {
  display: flex; align-items: stretch; gap: var(--s-6); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  background: none; border: 0; border-bottom: 1px solid var(--gray-200); border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 var(--s-6); height: auto;
}
.tabs::-webkit-scrollbar { display: none; }
.ptabs > .tabs { margin-bottom: 0; }
.tabs button, .tabs a, .v89-tabs > * {
  display: inline-flex; align-items: center; gap: var(--s-1); height: 40px; padding: 0; margin: 0 0 -1px; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-500); letter-spacing: 0; white-space: nowrap; cursor: pointer; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tabs button:hover, .tabs a:hover, .v89-tabs > *:hover { color: var(--gray-900); background: none; }
.tabs button[aria-selected="true"], .tabs a[aria-selected="true"], .tabs a[aria-current="page"], .tabs .on, .v89-tabs > [aria-selected="true"] {
  color: var(--gray-900); background: none; box-shadow: none; border-bottom-color: var(--accent);
}
.tabs .n, .v89-tabs .n { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--gray-500); background: none; padding: 0; min-width: 0; height: auto; border-radius: 0; }
.tabs [aria-selected="true"] .n { color: var(--gray-700); }
/* a segmented control stays only as a small view switch inside a card */
.seg, .sb-modes, .vx-tabs {
  display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 2px; border: 0; border-radius: var(--r-ctl); background: var(--gray-50); box-shadow: none;
}
.seg button, .seg a, .sb-modes button, .vx-tabs button {
  height: 24px; padding: 0 var(--s-2); border: 0; border-radius: 6px; background: none; box-shadow: none; color: var(--gray-500);
  font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); letter-spacing: 0;
}
.seg button[aria-pressed="true"], .seg button[aria-selected="true"], .seg .on, .sb-modes button[aria-pressed="true"], .sb-modes button[aria-selected="true"], .sb-modes .on, .vx-tabs button[aria-selected="true"] {
  background: var(--gray-0); color: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-200);
}

/* ---- field: label above, 36px input (40 in dialogs), a 2px accent focus ring; "(required)" is quiet ---- */
.fg label, .field > label, label.field > span:first-child, .form label, .v89-field > label {
  display: block; margin: 0 0 var(--s-1); font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-700); letter-spacing: 0; text-transform: none;
}
.fg label em, .form label em, .fg label small, .form label small { font-style: normal; font-weight: var(--w-regular); color: var(--gray-500); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea { font-family: var(--font); letter-spacing: 0; }
/* v90: the field look carries no weight of its own (:where), so a component that draws its own box around an input, the
   toolbar search, wins with a plain selector. Before, five :not()s gave it (0,7,1) and every toolbar search drew a box in a box. */
:where(.fg, .form, .field, .v89-field, .dialog .db) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea), #view select {
  font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-900);
  border: 1px solid var(--gray-300); border-radius: var(--r-ctl); background-color: var(--gray-0); box-shadow: none;
}
.fg input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), .fg select, .form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), .form select, .v89-field input, .v89-field select { height: 36px; padding: 0 var(--s-3); }
textarea { padding: var(--s-2) var(--s-3); min-height: 80px; }
.dialog .fg input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), .dialog .fg select, .dialog .form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), .dialog .form select { height: 40px; }
input::placeholder, textarea::placeholder { color: var(--gray-400); opacity: 1; }
:where(.fg, .form, .field, .v89-field, .dialog .db) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus, #view select:focus { outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }
#view select { height: 36px; padding: 0 var(--s-8) 0 var(--s-3); }
input[readonly] { background-color: var(--gray-50); color: var(--gray-700); }
.help, .fg .help, .form .help, .v89-field .help { margin: var(--s-1) 0 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); font-weight: var(--w-regular); }
.fg .err, .form .err, .v89-field .err, .fielderr { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--critical-fg); }
.form { gap: var(--s-4); }
/* "Required" is a quiet "(required)" after the label, never an amber pill */
.v88req { display: inline; height: auto; padding: 0; margin: 0 0 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--gray-500); font-size: inherit; line-height: inherit; font-weight: var(--w-regular); text-transform: lowercase; letter-spacing: 0; }
.v88req::before { content: "("; } .v88req::after { content: ")"; }
.req, .fg .req, label .req { background: none; border: 0; padding: 0; height: auto; border-radius: 0; color: var(--gray-500); font-size: var(--t-small-size); font-weight: var(--w-regular); text-transform: none; letter-spacing: 0; }

/* ---- dialog: radius 16, heading title, body text, footer actions right with one primary ---- */
.scrim { background: rgba(18, 22, 25, .32); }
.dialog { border: 0; border-radius: var(--r-dialog); background: var(--gray-0); box-shadow: var(--shadow-overlay); color: var(--gray-900); }
.dialog.side { border-radius: var(--r-dialog) 0 0 var(--r-dialog); }
.dialog > header { padding: var(--s-5) var(--s-6) var(--s-2); border: 0; background: none; }
.dialog > header h2 { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-heading-track); margin: 0; color: var(--gray-900); }
.dialog > header small { display: block; margin: 0 0 2px; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); font-weight: var(--w-regular); text-transform: none; letter-spacing: 0; }
.dialog .db { padding: var(--s-3) var(--s-6) var(--s-5); font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.dialog .db > p { margin: 0 0 var(--s-4); color: var(--gray-700); }
.dialog > footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-6); border-top: 1px solid var(--gray-200); background: none; }
.dialog > footer .btn { height: 32px; }
/* a list of rows in a dialog: real rows, never browser buttons */
.slist { display: flex; flex-direction: column; gap: 0; }
.slist > .slrow, button.slrow, a.slrow {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 48px; padding: var(--s-2) var(--s-3); margin: 0; border: 0; border-bottom: 1px solid var(--gray-100);
  border-radius: 0; background: none; box-shadow: none; text-align: left; color: var(--gray-900); font-size: var(--t-body-size); line-height: var(--t-body-lh); cursor: pointer;
}
.slist > .slrow:last-child { border-bottom: 0; }
.slist > .slrow:hover { background: var(--gray-50); }
.slrow .tx { min-width: 0; flex: 1 1 auto; }
.slrow .tx b { display: block; font-weight: var(--w-medium); font-size: var(--t-body-size); line-height: var(--t-body-lh); }
/* v90: a second line is a direct child span; a chip inside it stays a chip ("Your call" was stretched to 870px on the lot's
   Chain tab, and every chip in a row took the grey 13px of the line around it) */
.slrow .tx span:not(:is(.tag, .chip, .v75chip, .vx-chip, .vchip, .bage, .v73pill, .vbadge, .cs-s, .dpill, .kbadge, .vx-out, .v87chip)) { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.slrow .tx > span:not(:is(.tag, .chip, .v75chip, .vx-chip, .vchip, .bage, .v73pill, .vbadge, .cs-s, .dpill, .kbadge, .vx-out, .v87chip)) { display: block; }
/* the palette and toasts share the overlay elevation */
.cmdk .box, .pal .pal-box { border: 0; border-radius: var(--r-dialog); box-shadow: var(--shadow-overlay); background: var(--gray-0); }
/* v90: the palette's own input draws no focus ring (the palette is the focus); the global :focus-visible outline drew a box in it */
.pal-in input:focus, .pal-in input:focus-visible, #cmdkInput:focus, #cmdkInput:focus-visible { outline: 0; box-shadow: none; }
.toast, .v88toast { border-radius: var(--r-ctl); box-shadow: var(--shadow-overlay); font-size: var(--t-body-size); line-height: var(--t-body-lh); }

/* the typed signature: Inter italic 20px, not a 40px script face */
.sb-typed, .sigmark.typed { font-family: var(--font); font-style: italic; font-weight: var(--w-regular); font-size: 20px; line-height: 28px; letter-spacing: 0; color: var(--gray-900); }
.sb-modes { vertical-align: middle; }

/* ---- empty state: a 20px icon, one heading line, one small line, one action ---- */
.empty, .v89-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-8) var(--s-5); text-align: center;
  font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); background: none; border: 0; box-shadow: none;
}
.empty > svg.i, .v89-empty > svg.i { width: 20px; height: 20px; color: var(--gray-500); margin: 0 0 var(--s-2); }
.empty > b, .empty > h3, .v89-empty > b { display: block; font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); color: var(--gray-900); letter-spacing: var(--t-heading-track); }
.empty .btn, .v89-empty .btn { margin-top: var(--s-3); }
.empty br { display: none; }

/* ---- lists of label and value (details rails) ---- */
dl.kv dt, .kv dt { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-regular); color: var(--gray-500); letter-spacing: 0; text-transform: none; }
dl.kv dd, .kv dd { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular); color: var(--gray-900); }

/* ---- new markup: the classes the page layers write (V.v89 helpers in next-v89.js return this markup) ---- */
.v89-head { margin-bottom: var(--s-6); }
.v89-head .v89-titlerow { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.v89-strip { margin-bottom: var(--s-6); }
.v89-strip > a, .v89-strip > button { cursor: pointer; text-decoration: none; }
.v89-strip > a:hover, .v89-strip > button:hover { background: var(--gray-50); }
.v89-strip .lab { display: flex; align-items: center; gap: var(--s-2); }
.v89-strip .num.critical { color: var(--critical-fg); }
.v89-table { border-collapse: collapse; table-layout: fixed; }
.v89-table td .l1 { display: block; font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v89-table td .l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v89-check { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--gray-700); font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.v89-check svg { width: 16px; height: 16px; color: var(--positive-dot); flex: none; }
.v89-muted { color: var(--gray-500); }
/* utilities for markup that used inline type and spacing (the JS templates' style="font-size…" and margins became these).
   They carry an id in :is() so they win over component rules, as the inline style did. */
:is(body, #view, #dialog) .v89-t-body { font-size: var(--t-body-size); line-height: var(--t-body-lh); }
:is(body, #view, #dialog) .v89-t-small { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
:is(body, #view, #dialog) .v89-t-label { font-size: var(--t-label-size); line-height: var(--t-label-lh); }
:is(body, #view, #dialog) .v89-t-heading { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-heading-track); }
:is(body, #view, #dialog) .v89-w4 { font-weight: var(--w-regular); } :is(body, #view, #dialog) .v89-w5 { font-weight: var(--w-medium); } :is(body, #view, #dialog) .v89-w6 { font-weight: var(--w-semibold); }
:is(body, #view, #dialog) .v89-m0 { margin: 0; } :is(body, #view, #dialog) .v89-p0 { padding: 0; }
:is(body, #view, #dialog) .v89-p1 { padding: var(--s-1); } :is(body, #view, #dialog) .v89-p2 { padding: var(--s-2); } :is(body, #view, #dialog) .v89-p3 { padding: var(--s-3); } :is(body, #view, #dialog) .v89-p4 { padding: var(--s-4); } :is(body, #view, #dialog) .v89-p5 { padding: var(--s-5); } :is(body, #view, #dialog) .v89-p6 { padding: var(--s-6); } :is(body, #view, #dialog) .v89-p8 { padding: var(--s-8); }
:is(body, #view, #dialog) .v89-ml-auto { margin-left: auto; } :is(body, #view, #dialog) .v89-mr-auto { margin-right: auto; }
:is(body, #view, #dialog) .v89-mt0 { margin-top: 0; } :is(body, #view, #dialog) .v89-mt1 { margin-top: var(--s-1); } :is(body, #view, #dialog) .v89-mt2 { margin-top: var(--s-2); } :is(body, #view, #dialog) .v89-mt3 { margin-top: var(--s-3); } :is(body, #view, #dialog) .v89-mt4 { margin-top: var(--s-4); } :is(body, #view, #dialog) .v89-mt5 { margin-top: var(--s-5); } :is(body, #view, #dialog) .v89-mt6 { margin-top: var(--s-6); } :is(body, #view, #dialog) .v89-mt8 { margin-top: var(--s-8); }
:is(body, #view, #dialog) .v89-mr0 { margin-right: 0; } :is(body, #view, #dialog) .v89-mr1 { margin-right: var(--s-1); } :is(body, #view, #dialog) .v89-mr2 { margin-right: var(--s-2); } :is(body, #view, #dialog) .v89-mr3 { margin-right: var(--s-3); } :is(body, #view, #dialog) .v89-mr4 { margin-right: var(--s-4); } :is(body, #view, #dialog) .v89-mr5 { margin-right: var(--s-5); } :is(body, #view, #dialog) .v89-mr6 { margin-right: var(--s-6); } :is(body, #view, #dialog) .v89-mr8 { margin-right: var(--s-8); }
:is(body, #view, #dialog) .v89-mb0 { margin-bottom: 0; } :is(body, #view, #dialog) .v89-mb1 { margin-bottom: var(--s-1); } :is(body, #view, #dialog) .v89-mb2 { margin-bottom: var(--s-2); } :is(body, #view, #dialog) .v89-mb3 { margin-bottom: var(--s-3); } :is(body, #view, #dialog) .v89-mb4 { margin-bottom: var(--s-4); } :is(body, #view, #dialog) .v89-mb5 { margin-bottom: var(--s-5); } :is(body, #view, #dialog) .v89-mb6 { margin-bottom: var(--s-6); } :is(body, #view, #dialog) .v89-mb8 { margin-bottom: var(--s-8); }
:is(body, #view, #dialog) .v89-ml0 { margin-left: 0; } :is(body, #view, #dialog) .v89-ml1 { margin-left: var(--s-1); } :is(body, #view, #dialog) .v89-ml2 { margin-left: var(--s-2); } :is(body, #view, #dialog) .v89-ml3 { margin-left: var(--s-3); } :is(body, #view, #dialog) .v89-ml4 { margin-left: var(--s-4); } :is(body, #view, #dialog) .v89-ml5 { margin-left: var(--s-5); } :is(body, #view, #dialog) .v89-ml6 { margin-left: var(--s-6); } :is(body, #view, #dialog) .v89-ml8 { margin-left: var(--s-8); }
:is(body, #view, #dialog) .v89-pt0 { padding-top: 0; } :is(body, #view, #dialog) .v89-pt1 { padding-top: var(--s-1); } :is(body, #view, #dialog) .v89-pt2 { padding-top: var(--s-2); } :is(body, #view, #dialog) .v89-pt3 { padding-top: var(--s-3); } :is(body, #view, #dialog) .v89-pt4 { padding-top: var(--s-4); } :is(body, #view, #dialog) .v89-pt5 { padding-top: var(--s-5); } :is(body, #view, #dialog) .v89-pt6 { padding-top: var(--s-6); } :is(body, #view, #dialog) .v89-pt8 { padding-top: var(--s-8); }
:is(body, #view, #dialog) .v89-pr0 { padding-right: 0; } :is(body, #view, #dialog) .v89-pr1 { padding-right: var(--s-1); } :is(body, #view, #dialog) .v89-pr2 { padding-right: var(--s-2); } :is(body, #view, #dialog) .v89-pr3 { padding-right: var(--s-3); } :is(body, #view, #dialog) .v89-pr4 { padding-right: var(--s-4); } :is(body, #view, #dialog) .v89-pr5 { padding-right: var(--s-5); } :is(body, #view, #dialog) .v89-pr6 { padding-right: var(--s-6); } :is(body, #view, #dialog) .v89-pr8 { padding-right: var(--s-8); }
:is(body, #view, #dialog) .v89-pb0 { padding-bottom: 0; } :is(body, #view, #dialog) .v89-pb1 { padding-bottom: var(--s-1); } :is(body, #view, #dialog) .v89-pb2 { padding-bottom: var(--s-2); } :is(body, #view, #dialog) .v89-pb3 { padding-bottom: var(--s-3); } :is(body, #view, #dialog) .v89-pb4 { padding-bottom: var(--s-4); } :is(body, #view, #dialog) .v89-pb5 { padding-bottom: var(--s-5); } :is(body, #view, #dialog) .v89-pb6 { padding-bottom: var(--s-6); } :is(body, #view, #dialog) .v89-pb8 { padding-bottom: var(--s-8); }
:is(body, #view, #dialog) .v89-pl0 { padding-left: 0; } :is(body, #view, #dialog) .v89-pl1 { padding-left: var(--s-1); } :is(body, #view, #dialog) .v89-pl2 { padding-left: var(--s-2); } :is(body, #view, #dialog) .v89-pl3 { padding-left: var(--s-3); } :is(body, #view, #dialog) .v89-pl4 { padding-left: var(--s-4); } :is(body, #view, #dialog) .v89-pl5 { padding-left: var(--s-5); } :is(body, #view, #dialog) .v89-pl6 { padding-left: var(--s-6); } :is(body, #view, #dialog) .v89-pl8 { padding-left: var(--s-8); }
:root { --card-pad: var(--s-5); }
:is(body, #view, #dialog) .v89-bleed { margin-left: calc(-1 * var(--card-pad)); margin-right: calc(-1 * var(--card-pad)); }

/* =============================================================== 5. LEGACY CLASSES MAPPED ONTO THE SCALE
   v89: the type census found 56 sizes, half pixels on a quarter of the text and five weights. Each rule below takes a
   group of legacy classes onto one of the six styles. Grouped by the style they land on; page layers may restyle further. */

/* sentence case everywhere: the uppercase, letter-spaced micro labels go */
.rstage, .nm-cols span, .v75date em, .bcn, .vfl-h, .v73steps li > span, .v81log li > span, .eyebrow, .kicker, .v78e-kicker, .v78e-kicker em, .navhead, .th-s,
.v84chain .eyebrow, .v84chain h2 small, .smlegend span, .v77r-s, .v77pf-st span, .vs-h span, .umatrix .um-h, .sn-grp, .setnav .sn-h { text-transform: none; letter-spacing: 0; }

/* --t-label, 12/16 */
.vv-av, .avatar, .av, .bcn, .bc-foot .bc-m, .bc-sup > span, .bc-d, .bc-top .bc-d, svg text.ax, .vx-mk span, .v81mk span, .vx-nol, .vx-ref, .v75date em, .nm-cols span,
.rstage, .v78e-kicker em, .v78g-tag, .when, .nm-key span, .bhint, .vx-against > span, .vx-fix > b, .vx-req > b, .prep .ph, .prep > .ph, .lh > span, .smlegend span,
h3 > span.sp, .v73steps li > span, .v81log li > span, .nn-t b, .nn-t small, .nn small, .nmap b > a, .nmap .nn b, .kbadge, .v84ft small, .legend span, .v75k-f, .count, .th-s {
  font-size: var(--t-label-size); line-height: var(--t-label-lh);
}
.rstage, .v75date em, .nm-cols span, .v73steps li > span, .v81log li > span, .vx-fix > b, .vx-req > b, .prep .ph, .vx-against > span, .vs-c, .vs-l { font-weight: var(--w-medium); }

/* --t-small, 13/20 */
q.law, .vx-why, .vx-law p, .vx-fix > span, .vx-req > span, .vx-na, .vx-note, .vx-boundary, .vx-where, .subl, .stat .subl, a.link.sp, .v86nw, .vcite.none > span, .vcite,
.tx > span, .slrow .when, .bc-why, .rt-none span, .v87prov span, .bnote, .bnote span, .jn, .jh .jn, .card-b > p.muted, .card-b > .muted, .cfbar-t span, .vs-cap, .v87auto, .vs-line,
.vs-h span, .qdec p.muted, .v77pf-note span, .v77pf-file em, .vp-sum span, .v88note, .v75cal-none span, .thero-n span, .v75legend span, .v75legend a, a.v84watch span, .v87fetch-h span,
.stamp, .stamp b, .askfoot, .plast, .v88need-r .when, .v75cal-l .tx span, .v87link > label, .vx-side, .muted, p.muted, small, .d, .help, .v85none, .v85foot, .v80foot, .spec-f, .pnote,
.vs-n span, .v77pf-st span, button > span.l, .vx-stated h4, .vp-head span, .rs-card .muted, .setnav .sn-d, .v88sup, .v87prov, .v84watch, .dim, .note, .vflow p, .v73src .vs-l {
  font-size: var(--t-small-size); line-height: var(--t-small-lh);
}
.vs-g b, .v88need-r b { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); }

/* --t-body, 14/20 */
.bc-t, .bc-id, .tx > b, .slrow .tx b, .rtitle, .pb > b, .prep .pb b, .st-tx b, .st-tx p, .v85line, .pv-verdict p, .v85lead, .v85lead b, .v77pf-id p.hl, .v77pf-file b, .v88name, .v88name b,
.vx-head p, .ce-l p, details.v85how > summary, .v78e-tx p, .bcol-h b, .setnav span > b, .setnav .sn-t, .copyli b, .v84basis span, .v84basis b, .v84basis, .sig .who,
.v75k-v b.word, .prof .facts > div > span:not(.num), li > b, .ptabs .n, .v80r dd, .v80t td, .v84next p, .nb-l p, .jh b, .vp-tabs button, .v73src .vs-c {
  font-size: var(--t-body-size); line-height: var(--t-body-lh);
}
.bc-t, .bcol-h b { font-weight: var(--w-semibold); }
.tx > b, .rtitle, .v88name b, .setnav span > b, .sig .who, .pb > b, .vp-tabs button, .v73src .vs-c, .v73src .vs-l { font-weight: var(--w-medium); }
.v75k-v b.word, .prof .facts > div > span:not(.num) { margin: 6px 0; }

/* --t-heading, 16/24 */
.vx-q, .nb-l b, .nextbar b:first-of-type, .v84next b, .ptitle b, .vs-h b, .lh > b, .v75date b, .pbody .num, .pbody b.num, .card-h h2.mono, .rs-card .card-h h2, h2.v82fn, .rphd h2,
.v75big b, .v75metric b, .thero-n b i, .v78e-tx h3, .v88empty b, .empty-h, .vx-lot b {
  font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-heading-track);
}

/* --t-num, 24/32: every strip and KPI numeral */
.v75k-v b:not(.word), span.v > b, .v84ft b, .stat .val, .v77pf-st b, .v77pf-n b, .vs-n b, .thero-n b, .c-r b, .c-a b, .c-g b, .c-n b, div.v81vh-c > div b, .v81vh-c b, .jcell b, .ministats b, .rmeter-h b, .cr-in b {
  font-size: var(--t-num-size); line-height: var(--t-num-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-num-track); font-variant-numeric: tabular-nums;
}
.thero-n b i { letter-spacing: 0; color: var(--gray-500); }

/* second pass: the classless text the census still found, by its container */
.ptitle > span, .ministats span, ul.plain li, ul.plain li > span, dl dt, .vx-todo li, .vx-todo li em, .vflow li, .v87way span, .rdrop span, #intakeChosen span, .v83more summary span,
.v78e-pts li span, .v75act-sub span, .v84facts .facts span, .v84facts .facts .num, .v84facts .facts small, .elig3 span, .setnav .sn-who span {
  font-size: var(--t-small-size); line-height: var(--t-small-lh);
}
.ptitle > span { font-weight: var(--w-regular); color: var(--gray-500); }
.v81vh-t p, .ce-r li, .ce-r li span, .rdrop b, #intakeChosen b, .v83more summary b, .v87fetch-h b, .setnav .sn-who b, .elig3 b.num, .v87way b { font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.rdrop b, #intakeChosen b, .v83more summary b, .v87fetch-h b, .setnav .sn-who b { font-weight: var(--w-semibold); }
.v75act-sub b { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); }
.v78e-kicker span { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); }
.pfacts span, .v81sec > summary > span, .vx-secs summary .n, .rs-tabs button span { font-size: var(--t-label-size); line-height: var(--t-label-lh); }
.pfacts b { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); }

/* third pass: text inside tabs (the lot's Supply chain and Decision, the supplier's Verified file, Receive a lot, the supply map) */
.vi-meta span, .vi-meta .link, .vi-meta button, .v88qty, .v85cks li p, .cfix, .vs-more, .vs-empty, .vs-b, .vnote span, .vs-col li span, .vd-boundary, .fitem p > span,
.pchain span, .smwhere span, .smd-b span, .v85steps button > span:not(.t), .v83help summary span, .rhelp summary span, .vd-nums span, h3 > span, .stepno {
  font-size: var(--t-small-size); line-height: var(--t-small-lh);
}
.vd-nums span, h3 > span, .stepno, .v85steps button > span:not(.t) { font-size: var(--t-label-size); line-height: var(--t-label-lh); }
.vi-top b, .vi-sum, .v85cks li b, .vs-col li b, .fitem p, .brief-h .tx p, .sigempty span, .pchain b, .post-f a, .vd-text p, .vkind span, .v85steps button > span.t, .smtabs button, .smf button, .smseg button, .smstats span, :where(details > summary > b) {
  font-size: var(--t-body-size); line-height: var(--t-body-lh);
}
.vi-top b, .v85cks li b, .vs-col li b, .pchain b, :where(details > summary > b) { font-weight: var(--w-semibold); }
.vkind span, .smtabs button, .smf button, .smseg button, .v85steps button > span.t { font-weight: var(--w-medium); }
.smf button, .smseg button { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.vd-nums b, .smstats b, .smgrid .smstat b { font-size: var(--t-num-size); line-height: var(--t-num-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-num-track); }
.smstats span > b { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); letter-spacing: 0; }
.meta .cite, .cite.none, .rs-tabs button span, .seg button .n { font-size: var(--t-label-size); line-height: var(--t-label-lh); }
.smfacts b { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); }
.smd-h span, .smfacts span, :where(details > summary > span:not(.tag, .chip, .n, .vx-q, .vx-chips, .vx-chev)) { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v77day span, .vd-text small { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); text-transform: none; letter-spacing: 0; }

/* weights 550, 650 and 700 were never on the scale */
.vs-c, .vs-l, .v73pill, .v88chip, .vp-tabs button, .v85sbx { font-weight: var(--w-medium); }
.phead h1 b, .titleline h1 b, .v78ring text, .v75date em { font-weight: var(--w-semibold); }
.v78ring text { font-size: var(--t-body-size); }

/* =============================================================== 6. PHONE (up to 699px) */
@media (max-width: 699px) {
  :root { --gutter: 16px; --t-title-size: 22px; --t-title-lh: 28px; --t-num-size: 22px; --t-num-lh: 28px; }
  /* iOS zooms into any field under 16px on focus. v90: Receive and the Certificates and Release searches stayed at 14px, because
     page and field rules outranked this one; an id in the selector puts it above every page rule (inputs, selects, textareas
     in the page, in a dialog, in the palette and in the top bar). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px; }
  :is(#view, #dialog, #cmdk, .pal, .shell) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) { font-size: 16px; }
  #view .page { padding: var(--s-2) var(--gutter) 96px; }
  .phead, .v89-head { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .phead .acts, .v89-head .acts { margin-left: 0; justify-content: flex-start; }
  .v77lh-main > .top2, .prof .phero { flex-wrap: wrap; }
  .prof .phero .acts, .v77lh .acts, .lhero .acts { margin-left: 0; width: 100%; justify-content: flex-start; }
  /* the strip: two by two, never a sideways scroll */
  .v89-strip, #view .v84strip, #view .v75kpis.v84strip, #view .v84fts, #view .card.stats, .prof .facts, .vprof .facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
  .v89-strip > *, #view .v84strip > .v75k, #view .v84fts > .v84ft, #view .card.stats > .stat, .prof .facts > div, .vprof .facts > div { padding: var(--s-3) var(--s-4); border-left: 0; border-top: 1px solid var(--gray-200); }
  .v89-strip > :nth-child(-n+2), #view .v84strip > .v75k:nth-child(-n+2), #view .v84fts > .v84ft:nth-child(-n+2), #view .card.stats > .stat:nth-child(-n+2), .prof .facts > div:nth-child(-n+2), .vprof .facts > div:nth-child(-n+2) { border-top: 0; }
  .v89-strip > :nth-child(even), #view .v84strip > .v75k:nth-child(even), #view .v84fts > .v84ft:nth-child(even), #view .card.stats > .stat:nth-child(even), .prof .facts > div:nth-child(even), .vprof .facts > div:nth-child(even) { border-left: 1px solid var(--gray-200); }
  .card-h { padding: var(--s-3) var(--s-4); }
  .card-b { padding: var(--s-4); }
  :root { --card-pad: var(--s-4); }
  /* rows become stacked cards: the cell's label on the left, its lines on the right (v85's layout, now on the tokens) */
  #view .tablewrap > table:not(.v84q):not(.vx-rt) tr { display: block; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--gray-100); height: auto; }
  #view .tablewrap > table:not(.v84q):not(.vx-rt) tbody tr:last-child { border-bottom: 0; }
  #view .tablewrap > table:not(.v84q):not(.vx-rt) td { display: flex; gap: var(--s-2); align-items: baseline; padding: 2px 0; border: 0; height: auto; background: none; min-height: 0; }
  #view .tablewrap > table:not(.v84q):not(.vx-rt) td[data-label]:not(:first-child) { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; padding: var(--s-1) 0; }
  #view .tablewrap > table:not(.v84q):not(.vx-rt) td[data-label]:not(:first-child)::before { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); font-weight: var(--w-regular); }
  #view .tablewrap > table:not(.v84q):not(.vx-rt) td:first-child, #view .tablewrap > table:not(.v84q):not(.vx-rt) td.ck + td { font-weight: var(--w-medium); padding-bottom: var(--s-1); }
  #view .tablewrap > table:not(.v84q):not(.vx-rt) tbody tr:hover td { background: none; }
  /* Today's queue keeps its own phone grid (v84): cells carry no table padding */
  #view table.v84q tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--gray-100); }
  #view table.v84q td { height: auto; padding: 0; border: 0; background: none; max-width: none; }
  #view table.v84q tbody tr:hover td { background: none; }
  /* the bottom bar: labels and counts on the scale (they were 11px and 10px) */
  nav.v84tab { background: var(--gray-0); border-top: 1px solid var(--gray-200); box-shadow: none; }
  nav.v84tab a, nav.v84tab button { color: var(--gray-500); }
  nav.v84tab a[aria-current="page"] { color: var(--gray-900); }
  nav.v84tab a > span, nav.v84tab button > span { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); letter-spacing: 0; }
  nav.v84tab a > i { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); font-style: normal; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-chip); background: var(--gray-100); color: var(--gray-700); }
  nav.v84tab a > i.hot { background: var(--critical-bg); color: var(--critical-fg); }
  /* the phone header: Vera's card is the way to her (it opens her panel), so the top bar's second Vera button goes */
  header.top .v87vbtn { display: none; }
  .shell > .nav .v73vera { padding: 0 var(--s-2) 0 var(--s-1); height: 32px; border-radius: var(--r-chip); -webkit-mask-image: none; mask-image: none; background: var(--gray-0); overflow: visible; }
  .shell > .nav .v73vera .vv-top > div b { display: none; }
  .shell > .nav .v73vera .vv-go { color: var(--gray-700); }
  .dialog > header { padding: var(--s-4) var(--s-4) var(--s-2); }
  .dialog .db { padding: var(--s-2) var(--s-4) var(--s-4); }
  .dialog > footer { padding: var(--s-3) var(--s-4); }
  .tabs { gap: var(--s-5); }
  .shell .main > header.top { padding: 0 var(--gutter); height: 56px; }
  /* v90: one top bar. On a phone the header (search, the person) is laid over the right of the nav bar; it drew its own
     canvas colour over the nav's and cut the nav's bottom border at x 266. The nav carries the one background and the one
     border, full width; the header over it is transparent. Light and dark read the same tokens. */
  .shell > .nav { background: var(--gray-0); border: 0; border-bottom: 1px solid var(--gray-200); box-shadow: none; }
  .shell .main > header.top { background: transparent; border: 0; box-shadow: none; }
  header.top .topsearch { min-width: 0; }
  header.top .v89-status { display: none; }
}

/* =============================================================== 7. MOTION */
.dialog, .cmdk .box, .v84menu { transition: opacity var(--d-open) var(--ease), transform var(--d-open) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}


/* ---- v89 lead fixes after the release fixer (2026-09-30) ---- */
/* the product line under a purpose line is small text; .phead p outranked it, so every page drew it at body size */
.phead p.v89-product { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
/* a toolbar search field drew two borders: the label's and the input's */
.toolbar label.field > input { border: 0; box-shadow: none; background: transparent; height: auto; padding: 0; }
/* v90: one search field everywhere (Certificates, Release, All lots, the chain list, the Review board): the label is the
   box (36px, the field border, radius 8, the accent ring while typing) and the input inside draws nothing, at body size */
label.field:has(> input), .sq { display: flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-3); border: 1px solid var(--gray-300); border-radius: var(--r-ctl); background: var(--gray-0); box-shadow: none; color: var(--gray-500); }
label.field:has(> input) > input, .sq > input { flex: 1 1 auto; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-900); }
label.field:has(> input) > input:focus-visible, .sq > input:focus-visible { outline: 0; }
label.field:has(> input):focus-within, .sq:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
label.field:has(> input) > svg.i, .sq > svg.i { width: 16px; height: 16px; flex: none; color: var(--gray-400); }
/* the More menu's chevron points down: it opens a menu, it does not go anywhere */
details.v84more > summary.btn svg.i:last-child, .v84more > summary svg:last-child { transform: rotate(90deg); }
details.v84more[open] > summary.btn svg.i:last-child, .v84more[open] > summary svg:last-child { transform: rotate(-90deg); }
/* two legacy 13.5px styles the census found outside the page layers */
.v88say, label.v82chk { font-size: var(--t-small-size); line-height: var(--t-small-lh); }

/* v89 (lead): an empty page never shows a skeleton preview of charts or tables it does not have (DESIGN-V89 section 3, empty state) */
.v78g { display: none; }

/* Day one is not a wall of zeros: a strip whose every figure is 0, and a zero tab count, are not drawn (next-v89.js quietZeros) */
#view .v89-zero-strip { display: none !important; }
#view .v89-zero-n { display: none; }

/* ---- v90 Settings (reviewers C and D): one line per menu item, one column of cards, the label name's action on its own row ---- */
@media (min-width: 900px) {
  .setgrid { grid-template-columns: 232px minmax(0, 1fr); gap: var(--s-6); }
  .setnav { padding: var(--s-2); gap: 0; border: 1px solid var(--gray-200); border-radius: var(--r-card); background: var(--gray-0); box-shadow: none; }
  .setnav .sn-who { padding: var(--s-2) var(--s-2) var(--s-3); margin: 0 0 var(--s-2); gap: var(--s-3); border-bottom: 1px solid var(--gray-100); }
  .setnav button[role=tab] { align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-2); border-radius: var(--r-ctl); box-shadow: none; }
  .setnav button[role=tab] small { display: none; }
  .setnav button[role=tab] svg.i { margin: 0; width: 16px; height: 16px; color: var(--gray-500); }
  .setnav button[role=tab] b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular); color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .setnav button[role=tab] > span { min-width: 0; }
  .setnav button[role=tab]:hover { background: var(--gray-50); }
  .setnav button[role=tab][aria-selected="true"] { background: var(--gray-100); box-shadow: none; }
  .setnav button[role=tab][aria-selected="true"] b { font-weight: var(--w-medium); color: var(--gray-900); }
  .setnav button[role=tab][aria-selected="true"] svg.i { color: var(--gray-900); }
}
/* the workspace and sign-in tabs were two ragged columns of cards; Settings reads as one column, each card at full width */
#view .setbody > .grid.g-2 { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
#view .setbody > .grid.g-2 > * { margin: 0; }
#view .setbody > [data-v87intake] { margin-top: 0; }   /* one 16px gap between Settings cards, like the rest */
/* "Name on labels": the reason in one plain line, the button on its own row under it */
#view .setbody dd .v90-lbn { display: block; color: var(--gray-700); }
#view .setbody dd .v90-lbn-act { display: flex; margin: var(--s-2) 0 0; }

/* ---- v90 day one (Today with nothing on file, next-v78.js): its four leftovers onto the scale (the empty-base census found
   15px, 14.5px, 12.5px and weights 550 and 650) ---- */
.fr-drop > b { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-heading-track); }
.fr-drop > em { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); font-style: normal; }
.v78s .v78s-n { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-semibold); }
.v78s .v78s-tx > b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); }
/* a legacy class the empty-base census found on Receive's delivery form (next-v66.css .rknown, 13.5px and 12.5px) */
.rknown b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); }
.rknown span { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
@media (max-width: 699px) { .v78fr .fr-tx > p { font-size: var(--t-body-size); line-height: var(--t-body-lh); } }   /* it was 15px on a phone */

/* v90: the page's children keep an entrance transform, so each is its own stacking context and a header's More menu opened
   underneath the tabs and the first card (fixer E found it on Inspection). Every page head sits above the content below it. */
#view .page > .phead, #view .page > .v89-head, #view .page > .lhero, #view .page > .rhead, #view .page > .v77lh, #view .page > .prof, #view .page > .vprof { position: relative; z-index: 20; }

/* v90 (proof/run.cjs red): a long header action ("Complete the batch record", "Record the qualification decision") squeezed the
   title and its count line into a sliver and drew over them at 768 and 390. Below 901px the action takes its own row, under
   the subtitle, on the same left edge; the title wraps instead of running under the action. */
.card-h:has(> :is(.sub, small, .v85sub, .v89-subn)) > :is(h2, h3) { white-space: normal; overflow-wrap: break-word; }
@media (max-width: 900px) {
  .card-h:has(> :is(.sub, small, .v85sub, .v89-subn)) > :is(.acts, .btn, a.link, button.link, details, .seg, .sp:has(:is(.btn, a, button, .seg, details))) { grid-row: 4; grid-column: 1 / -1; justify-self: start; align-self: start; margin-top: var(--s-2); }
}
@media (max-width: 699px) {
  /* on a phone a status chip stays on the title row, and the lines under it take the card's full width */
  .card-h:has(> :is(.sub, small, .v85sub, .v89-subn)) > .sp:not(:empty):not(:has(:is(.btn, a, button, .seg, details))) { grid-row: 1; }
  .card-h:has(> :is(.sub, small, .v85sub, .v89-subn)) > :is(.v89-subn, .sub, small, .v85sub) { grid-column: 1 / -1; }
}


/* =============================================================== 8. v92 SYSTEM RULES (fixer G1) */
/* decision 8: every mono declaration in the old sheets resolves to the one token (the nav's search key read "IBM Plex Mono") */
.navsearch kbd, .v88copy input, .v87link input, .v87ln, #view .v81need .prep > .pcite .vcite q { font-family: var(--font-mono); }

/* decision 1: a header's purpose line sits 4px under its title on every page (Inspection's touched its H1) */
.phead h1 + p, .v89-head .v89-titlerow + p, .v89-head .v89-titlerow + .v89-purpose, .phead > div:first-child > h1 + p { margin-top: var(--s-1); }

/* decision 5: done is quiet. A finished state is a check and text (V.v89.check); next-v89.js turns the old green chips for
   Issued, Active, Retained, Original, Cleared at the pharmacy, On record, Received and Reviewed into it */
.v89-check { white-space: nowrap; }
td .v89-check, dd .v89-check { font-size: inherit; line-height: inherit; }
.v92quiet { color: var(--gray-500); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v92quiet + .chip { margin-left: var(--s-2); }

/* Settings promises "Original documents … always show on white, as paper". In dark mode a transcript drew dark navy. Each
   sheet that shows a document as printed takes the light palette inside it (the tokens cascade), so its lines, marks and
   numbers draw as they do on paper, whatever the page's own rules say. */
:root[data-theme="dark"] :is(.origtext, .rs-doc .viewer .orig, .rs-doc .viewer .sheet, .rt-paper, .v89l-print, .vp-doc, .vp-pdf, .hp-sheet, .v77p-lines, .v92-paper) {
  --gray-0: #FFFFFF; --gray-25: #F8F9FA; --gray-50: #F3F4F6; --gray-100: #EBEDF0; --gray-200: #E1E4E8;
  --gray-300: #CBD0D6; --gray-400: #9AA1AA; --gray-500: #5D656D; --gray-700: #343A3F; --gray-900: #121619;
  --accent: #2457F5; --accent-hover: #1F4FE0; --accent-tint: #EEF3FF;
  --positive-fg: #15803D; --positive-bg: #ECFDF3; --positive-bd: #B7E4C7; --positive-dot: #16A34A;
  --attention-fg: #8A5A00; --attention-bg: #FFF7E0; --attention-bd: #F2D98C; --attention-dot: #D9A300;
  --critical-fg: #B42318; --critical-bg: #FEF3F2; --critical-bd: #FECDCA; --critical-dot: #D92D20;
  --neutral-fg: #4B535C; --neutral-bg: #F2F4F7; --neutral-bd: #E1E4E8; --neutral-dot: #9AA1AA;
  --ink: #121619; --ink-2: #343A3F; --muted: #5D656D; --line: #E1E4E8; --line-2: #EBEDF0; --card: #FFFFFF; --layer: #F3F4F6;
  --v73-card: #FFFFFF; --v73-tray: #F3F4F6; --v73-ring: #E1E4E8;
  background-color: #FFFFFF; color: #121619; color-scheme: light;
}

@media (max-width: 699px) {
  /* decision 12: one header-action pattern on every page: the primary at full width, then More under it at the same width;
     every other action is inside More (next-v89.js moves them). Today paired its primary with a second full button; the
     certificate page used natural widths, left-aligned. */
  #view .acts.v92-pacts, #view .lhero .acts.v92-pacts { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; margin-left: 0; gap: var(--s-2); }
  #view .acts.v92-pacts > .btn, #view .acts.v92-pacts > details.v84more { width: 100%; flex: none; }
  #view .acts.v92-pacts > .btn { justify-content: center; }
  #view .acts.v92-pacts > details.v84more > summary { width: 100%; justify-content: center; }
  .phead:has(> .acts.v92-pacts), .v89-head:has(> .acts.v92-pacts) { flex-wrap: wrap; }

  /* the bottom bar: its items share the bar evenly (the clinic's three sat in the left 55%), and a count sits after its label in
     the label's own size, not raised over it like a superscript ("Review⁹") */
  nav.v84tab { display: flex; justify-content: space-around; }
  nav.v84tab > a, nav.v84tab > button { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: var(--s-1); row-gap: 2px; }
  nav.v84tab > a > svg, nav.v84tab > button > svg { grid-column: 1 / -1; justify-self: center; }
  nav.v84tab > a > span, nav.v84tab > button > span { grid-column: 1; }
  nav.v84tab > a > i { position: static; grid-column: 2; grid-row: 2; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--gray-500); font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); font-style: normal; }
  nav.v84tab > a > i.hot { background: none; color: var(--critical-fg); }
  nav.v84tab > a[aria-current="page"] > i { color: inherit; }

  /* segmented controls: each label is centred in its segment (the certificate page's "Checks" sat flush left) */
  .seg > button, .seg > a, .sb-modes > button, .vx-tabs > button, .seg > *, .vx-tabs > * { justify-content: center; text-align: center; }
}

/* Settings (fixer G1, v92): the side menu's header is two lines, the workspace's name and its type (it wrapped to four beside a
   monogram; the name is the page's own subtitle, so the monogram goes). The plan's rows sit on the card's 20px inset with inset
   dividers, like the Workspace card; the plan row names what the plan leaves out. */
/* (the legacy sheet sets the monogram's display with !important, which an unlayered !important cannot beat, so it is taken out of
   the flow instead) */
.setnav .sn-who > .av, .setnav .sn-who > .avatar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); visibility: hidden; }
.setnav { min-width: 0; max-width: 100%; }
.setnav .sn-who, .setnav .sn-who > div { min-width: 0; max-width: 100%; }
.setnav .sn-who > div { flex: 1 1 auto; overflow: hidden; }
.setnav .sn-who b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; }
.setnav .sn-who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v92plancard > .tablewrap { padding: 0 var(--s-5) var(--s-2); }
.v92plancard > .tablewrap table td { padding-left: 0; padding-right: 0; }
.v92plancard > .tablewrap table tr:first-child td { border-top: 0; }
dd small.v92plan { display: block; margin-top: 2px; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }

/* =============================================================== 9. v93 SYSTEM RULES (fixer H1, final round) */
/* decision 13, one row-action and link style: a row action is a ghost button with accent text, app-wide (it was gray-700 here,
   so actions read as body text); an inline link in running text is accent, never grey or dark underlined text */
.btn.ghost, .btn.link { color: var(--accent); }
.btn.ghost:hover, .btn.link:hover { background: var(--accent-tint); color: var(--accent-hover); }
.btn.ghost svg.i, .btn.link svg.i { color: currentColor; }
.v84menu .btn.ghost, .btn.mi.ghost { color: var(--gray-900); }
:is(#view, #dialog) :is(p, dd, li > span, .help, .sub, small, .v89-note > div, .notice > div, .v89-purpose, .v89-product, .tfoot span, .askfoot, .v90quiet, .v89t-meta) a:not(.btn):not(.chip):not(.tag):not(.v89-cell) {
  color: var(--accent); font-weight: inherit; text-decoration: none;
}
:is(#view, #dialog) :is(p, dd, li > span, .help, .sub, small, .v89-note > div, .notice > div, .v89-purpose, .v89-product, .tfoot span, .askfoot, .v90quiet, .v89t-meta) a:not(.btn):not(.chip):not(.tag):not(.v89-cell):hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

/* decision 15, one segmented control: 28px, a grey track, the pressed segment white. Every mode switch (Certificates' Documents and
   By lot, the Settings theme, the certificate pane's tabs, Vera's source tabs, the release rules' presets) draws this one. The
   :not(#v93-seg) only lifts the rule over a page's own toolbar rule (Certificates drew a 32px white box with 26px segments). */
:is(#view, #dialog) :is(.seg, .sb-modes, .vx-tabs, .vp-tabs):not(#v93-seg) {
  display: inline-flex; align-items: center; gap: 2px; height: 28px; min-height: 28px; padding: 2px; margin: 0; border: 0; border-radius: var(--r-ctl);
  background: var(--gray-50); box-shadow: none; flex: none; width: auto;
}
:is(#view, #dialog) :is(.seg, .sb-modes, .vx-tabs, .vp-tabs):not(#v93-seg) > :is(button, a) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); height: 24px; min-height: 0; padding: 0 var(--s-2); margin: 0;
  border: 0; border-radius: 6px; background: none; box-shadow: none; color: var(--gray-500);
  font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); letter-spacing: 0; white-space: nowrap; text-decoration: none;
}
:is(#view, #dialog) :is(.seg, .sb-modes, .vx-tabs, .vp-tabs):not(#v93-seg) > :is(button, a) svg.i { width: 14px; height: 14px; }
:is(#view, #dialog) :is(.seg, .sb-modes, .vx-tabs, .vp-tabs):not(#v93-seg) > :is(button, a):hover { color: var(--gray-900); background: none; }
:is(#view, #dialog) :is(.seg, .sb-modes, .vx-tabs, .vp-tabs):not(#v93-seg) > :is([aria-pressed="true"], [aria-selected="true"], .on) {
  background: var(--gray-0); color: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-200);
}

/* decision 16, one field height per row: a search box, a select and a button in a toolbar row are all 32px (Review's search was
   36, page selects 36 beside 32px buttons). A stacked form's fields keep 36 (40 in a dialog). */
label.field:has(> input), .sq { height: 32px; }
#view select { height: 32px; }
#view :is(.fg, .form, .v89-field) select { height: 36px; }
#view :is(.toolbar, .btool, .v89-toolbar) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select):not(#v93-seg) { height: 32px; }
#view :is(.toolbar, .btool, .v89-toolbar) details.v84more > summary.btn { height: 32px; }

/* the table-row focus ring is drawn inside the row (the card clipped its sides) */
#view tbody tr:focus-visible, #dialog tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#view tbody tr:focus-visible td { background: var(--gray-50); }

/* one scrim: the command palette and every dialog dim and blur the page the same way (the palette did not blur; dialogs did) */
:root { --scrim: rgba(18, 22, 25, .32); --scrim-blur: 2px; }
:root[data-theme="dark"] { --scrim: rgba(0, 0, 0, .5); }
.scrim, .pal, .cmdk { background: var(--scrim); -webkit-backdrop-filter: blur(var(--scrim-blur)); backdrop-filter: blur(var(--scrim-blur)); }

/* the dialog eyebrow (next-v89.js eyebrows): what the dialog acts on, or the page it came from */
.dialog > header small.v93eyebrow { display: block; }

/* Settings (v93): the plan list's first row sits on the card's inset like its other rows (the rule under the header ran edge to edge
   while the Workspace card's are inset); the side menu's header is two lines: the name on one (whole on hover), the type under it */
.v92plancard > .card-h + .tablewrap { border-top: 0; }
@media (min-width: 900px) { .setgrid { grid-template-columns: 248px minmax(0, 1fr); } }
.setnav .sn-who b { display: block; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v93 (lead, final sweep): phone tap targets. The 28px switch's segments were 24px and a card header's text links 20px; on a phone
   both reach 28px. The switch grows to 32px, the same height as the fields beside it; desk sizes are unchanged. */
@media (max-width: 699px) {
  :is(#view, #dialog) :is(.seg, .sb-modes, .vx-tabs, .vp-tabs):not(#v93-seg) { height: 32px; min-height: 32px; }
  :is(#view, #dialog) :is(.seg, .sb-modes, .vx-tabs, .vp-tabs):not(#v93-seg) > :is(button, a) { height: 28px; }
  #view .card-h > button.link { min-height: 28px; display: inline-flex; align-items: center; }
  #view td > button.v89s-own { min-height: 28px; display: flex; align-items: center; }
}
/* v93 (lead, final sweep): a strip cell's context line ends in "…" inside its own cell. In a column flex box a nowrap line sized itself
   to its full text, so at about 1024px Today's "1 held, 2 waiting for a certificate" ran under the next tile. The full line stays in
   the cell's title. */
#view .v89-strip .v89-cell > .ctx { max-width: 100%; min-width: 0; align-self: stretch; }