/* ══════════════════════════════════════════════════════════════════════════
   Stock-CMS — THE DESIGN SYSTEM'S PORT (lane INJECT, 2026-09-04)

   `DesignSystem/` is the root of every visual decision in this product
   (CLAUDE.md, founder's word 2026-09-03). This file is that system's port
   into the product's own vanilla CSS: the token layer lifted 1:1 under the
   system's own names, then the system's 21 components rebuilt as the
   product's own classes under the same names and the same contracts. The
   product does not run React — nothing here is lifted from the system's JSX,
   it is recreated from it, which is what `DesignSystem/SKILL.md` asks for.

   Order of this file:
     1. @font-face — Archivo variable, self-hosted from /fonts/ (the two
        woff2 in app/public/fonts/ are byte-identical to
        DesignSystem/assets/fonts/ — checked, sha256, 2026-09-04).
     2. THE TOKEN LAYER — tokens/colors.css, typography.css, spacing.css,
        ported verbatim in names and values. The system's own legacy aliases
        (--gray-*, --navy-*, --orange-*, --blue-*, --green-*, --amber-*,
        --red-*) are declared for parity so a component copied out of the
        system keeps resolving, and are consumed by NOTHING in app/public.
        verify-system.js §1 checks both halves.
     2b. TWO RECONCILIATIONS, where a ratified product rule and the design
        system disagree and the pixel can satisfy both (verify-redesign.js
        §11's exit grep is the ratified rule's instrument):
        · The overlay ring. `--shadow-lg` is `0 0 0 1px var(--rule)` — the
          system's "hairline ring, not a glow" on an overlay. DESIGN.md's Flat
          World Rule forbids the `box-shadow` PROPERTY outright, "no 'it is
          only 1px' exception." The ring here is therefore drawn as
          `outline:1px solid var(--rule); outline-offset:-1px` — the identical
          pixel, on a property the flat rule does not forbid, with no shadow
          anywhere in the product. `--shadow-lg` stays declared for parity and
          is consumed by nothing.
        · The dialog scrim. The system's Dialog screens a near-black to 45%.
          DESIGN.md screens ink to exactly ONE alpha, .28 — the same value
          `--rule-minor` carries — and to no other. The scrim is that value.
          It is a lighter scrim than the system draws; listed for the founder.
     3. tokens/base.css — scoped to `.ds-base` rather than bare `body`/`a`,
        because the four shipped pages already set their own body ground and
        link colour and this lane may not move them. system.html carries the
        class; wave 1a's shell lane puts it on the surfaces it rebuilds.
     4. THE COMPONENTS — .btn, .icon-btn, .field/.input/.select/.textarea,
        .checkbox/.radio/.switch, .badge, .status-pill, .tooltip, .toast,
        .tabs, .breadcrumb, .card, .table, .dialog, .sidecar, .sidebar-nav
        (+ .nav-item, the account button and its popover). Every one of them
        is written under `.ds-base` for the same reason the base is: the four
        shipped pages already own `.btn`, `.card`, `.field`, `.tabs`, `.tab`,
        `.switch` and `.mark` as their OWN local classes, and a bare rule here
        would silently restyle surfaces this lane is forbidden to move. The
        class NAMES are the system's, unchanged; the surface that opts in
        wears `class="ds-base"` on its body. Wave 1a's shell lane opts the
        four pages in as it rebuilds them, and the scope can drop away then.
     5. LEGACY — the 08-21 identity layer's tokens and classes, re-expressed
        on the system's tokens, kept alive for the four shipped pages and
        share.js until wave 1a's shell lane rebuilds them. No new use.

   The ten rules (DesignSystem/SKILL.md) are law here: paper/ink/Brand Red at
   full strength, red is never a button and never below headline size, flat
   (no radius, no shadow, no gradient — structure is 1px rules), status reads
   as value not hue, marks are filled squares, the white ladder only on ink
   fields, Archivo only, the wordmark drawn from the live font, sentence case
   for prose, and no page scrolling.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("/fonts/archivo-var.woff2") format("woff2-variations"),
       url("/fonts/archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("/fonts/archivo-var-italic.woff2") format("woff2-variations"),
       url("/fonts/archivo-var-italic.woff2") format("woff2");
}

/* ══════════════════════════ 2. THE TOKEN LAYER ══════════════════════════
   DesignSystem/tokens/colors.css — the six brand values, ported 1:1. */
:root{
--paper:#FFFFFF;
--ink:#0A0A0A;
--red:#FF0604;                        /* field/band red — never a button, never screened */
--red-press:#D40503;                  /* the one action's fill, and red's pressed state */
--dim:#F5F5F3;                        /* the reserved recessed ground */
--ink-muted:#595959;                  /* the only de-emphasis on paper */
--rule-minor:rgba(10,10,10,0.28);     /* subdivision inside a unit — never the frame */
--rule:rgba(10,10,10,0.14);

/* the sanctioned white ladder on ink fields */
--white-85:rgba(255,255,255,0.85);--white-75:rgba(255,255,255,0.75);--white-65:rgba(255,255,255,0.65);
--white-55:rgba(255,255,255,0.55);--white-35:rgba(255,255,255,0.35);--white-25:rgba(255,255,255,0.25);

/* legacy aliases kept so every component keeps resolving.
   PARITY ONLY — nothing in app/public may read one of these; verify-system.js §1 enforces it. */
--white:var(--paper);
--gray-000:var(--paper);--gray-050:var(--dim);--gray-100:var(--dim);--gray-200:var(--rule);
--gray-300:var(--rule-minor);--gray-400:var(--ink-muted);--gray-500:var(--ink-muted);
--gray-600:var(--ink-muted);--gray-700:var(--ink);--gray-800:var(--ink);--gray-900:var(--ink);
--navy-900:var(--ink);--navy-800:var(--ink);--navy-700:var(--ink);--navy-600:var(--ink);--navy-500:var(--ink-muted);
--orange-700:var(--ink);--orange-600:var(--red-press);--orange-500:var(--red);--orange-100:var(--dim);
--blue-600:var(--ink);--blue-500:var(--ink-muted);--blue-400:var(--rule-minor);--blue-100:var(--dim);
--green-700:var(--ink);--green-600:var(--ink);--green-100:var(--dim);
--amber-700:var(--red-press);--amber-600:var(--red);--amber-100:var(--dim);
--red-700:var(--red-press);--red-600:var(--red);--red-100:var(--dim);

--color-bg-app:var(--dim);
--color-bg-surface:var(--paper);
--color-bg-sunken:var(--dim);
--color-bg-inset:var(--paper);
--color-bg-ink:var(--ink);

--color-border-default:var(--rule);
--color-border-strong:var(--rule-minor);
--color-border-focus:var(--red);

--color-text-primary:var(--ink);
--color-text-secondary:var(--ink-muted);
--color-text-tertiary:var(--ink-muted);
--color-text-inverse:var(--paper);
--color-text-link:var(--red-press);
--color-text-link-hover:var(--ink);

--color-accent:var(--ink);
--color-accent-strong:#000000;
--color-accent-soft:var(--dim);
--color-accent-on:var(--paper);

--color-action:var(--red-press);
--color-action-strong:#B00402;
--color-action-soft:var(--dim);

/* Status reads as value, not hue: progress in ink, exceptions in red. */
--color-status-success-fg:var(--ink);
--color-status-success-bg:var(--dim);
--color-status-warning-fg:var(--red-press);
--color-status-warning-bg:var(--dim);
--color-status-danger-fg:var(--paper);
--color-status-danger-bg:var(--red-press);
--color-status-info-fg:var(--ink-muted);
--color-status-info-bg:var(--dim);
--color-status-neutral-fg:var(--ink-muted);
--color-status-neutral-bg:var(--dim);
}

/* DesignSystem/tokens/typography.css — ported 1:1 (its own @font-face pair is
   above, on the product's /fonts/ paths). */
:root{
--font-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
--font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
--font-mono:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

--text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:16px;
--text-lg:18px;--text-xl:22px;--text-2xl:28px;--text-3xl:36px;

--leading-tight:1.05;--leading-normal:1.45;--leading-relaxed:1.6;

--weight-regular:400;--weight-medium:600;--weight-semibold:700;--weight-bold:800;

/* Display and titles ride Archivo expanded (125% / 118%), per the type voices. */
--text-display:800 expanded var(--text-3xl)/var(--leading-tight) var(--font-display);
--text-h1:800 expanded var(--text-2xl)/var(--leading-tight) var(--font-display);
--text-h2:800 expanded var(--text-xl)/var(--leading-tight) var(--font-display);
--text-h3:800 semi-expanded var(--text-lg)/1.2 var(--font-display);
--text-label:700 var(--text-sm)/var(--leading-normal) var(--font-sans);
--text-body:400 var(--text-base)/var(--leading-normal) var(--font-sans);
--text-body-sm:400 var(--text-sm)/var(--leading-normal) var(--font-sans);
--text-caption:400 var(--text-xs)/var(--leading-normal) var(--font-sans);
--text-code:600 var(--text-sm)/var(--leading-normal) var(--font-mono);
}

/* DesignSystem/tokens/spacing.css — ported 1:1. All radii are 0; --shadow-lg
   is the one sanctioned 1px ring, on overlays only. */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;

/* Flat: structure is drawn with 1px rules, not corners or shadows. */
--radius-sm:0;--radius-md:0;--radius-lg:0;--radius-pill:0;

--shadow-sm:none;
--shadow-md:none;
--shadow-lg:0 0 0 1px var(--rule);
--shadow-focus:0 0 0 2px var(--red);

--border-width-hairline:1px;--border-width-strong:2px;

--target:44px;
}

/* ══════════════════════ 3. BASE — tokens/base.css ═══════════════════════
   The system's base.css sets bare `body` and `a` rules. The four shipped
   pages (index/docs/contractors/guide) already declare their own ground,
   type and link colour and this lane may not move a pixel of them, so the
   system's base is scoped to `.ds-base` and put on the body of any surface
   built from the system. ::selection is global — it is already the system's
   value in this product and has been since 08-21. */
.ds-base *{box-sizing:border-box}
.ds-base{margin:0;font:var(--text-body);color:var(--color-text-primary);background:var(--color-bg-app);-webkit-font-smoothing:antialiased}
.ds-base a{color:var(--color-text-link);text-decoration:none}
.ds-base a:hover{color:var(--color-text-link-hover);text-decoration:underline}
.ds-base :focus-visible{outline:2px solid var(--red);outline-offset:1px}
::selection{background:var(--red);color:var(--paper)}

/* ═════════════════════════ 4. THE COMPONENTS ════════════════════════════
   Class names are the system's component names in kebab case; variants are
   BEM modifiers. Contracts follow the .d.ts files one for one. */

/* ── Button (forms/Button) ────────────────────────────────────────────────
   variant primary · action · secondary · ghost · danger; size sm/md/lg;
   hover darkens one step. Rule 9 (44px on every surface) wins over the
   system's JSX, whose sm padding lands near 32px: every size holds
   --target. Disabled is ink text on paper with an ink rule and a stated
   reason beside it (.inert-reason) — never screened opacity. */
.ds-base .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--target);
  border:1px solid transparent;border-radius:0;box-shadow:none;
  background:transparent;color:var(--color-text-primary);
  font-family:var(--font-sans);font-weight:var(--weight-medium);
  white-space:nowrap;flex-shrink:0;cursor:pointer;text-decoration:none;
  transition:background-color 120ms ease,color 120ms ease,border-color 120ms ease;
}
.ds-base .btn--sm{padding:6px 12px;font-size:var(--text-sm)}
.ds-base .btn--md{padding:9px 16px;font-size:var(--text-base)}
.ds-base .btn--lg{padding:12px 22px;font-size:var(--text-md)}
.ds-base .btn--full{width:100%}
.ds-base .btn--primary{background:var(--color-accent);color:var(--color-accent-on);border-color:var(--color-accent)}
.ds-base .btn--primary:hover{background:var(--color-accent-strong);border-color:var(--color-accent-strong)}
.ds-base .btn--action{background:var(--color-action);color:var(--color-text-inverse);border-color:var(--color-action)}
.ds-base .btn--action:hover{background:var(--color-action-strong);border-color:var(--color-action-strong)}
.ds-base .btn--secondary{background:var(--color-bg-surface);color:var(--color-text-primary);border-color:var(--color-border-strong)}
.ds-base .btn--secondary:hover{background:var(--dim)}
.ds-base .btn--ghost{background:transparent;border-color:transparent;color:var(--color-text-primary)}
.ds-base .btn--ghost:hover{background:var(--dim)}
/* danger is red TEXT on a red rule. The system's own JSX draws it in
   --color-status-danger-fg, which is PAPER — white on white on a transparent
   ground. That is a defect in the reference, not the brand; recorded for the
   founder and not copied. */
.ds-base .btn--danger{background:transparent;color:var(--red-press);border-color:var(--red-press)}
.ds-base .btn--danger:hover{background:var(--dim);color:var(--red-press)}
.ds-base .btn:disabled,.ds-base .btn[aria-disabled="true"]{
  background:var(--paper);color:var(--ink);border-color:var(--ink);
  cursor:default;opacity:1;
}
.ds-base .btn:disabled:hover,.ds-base .btn[aria-disabled="true"]:hover{background:var(--paper);color:var(--ink)}
.ds-base .btn__icon{display:inline-flex;width:16px;height:16px;flex-shrink:0}
.ds-base .btn__icon svg{width:16px;height:16px;display:block}

/* ── IconButton (forms/IconButton) — square, 44px, aria-label required ─── */
.ds-base .icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-sans);font-size:var(--text-body);
  width:var(--target);height:var(--target);min-height:var(--target);flex-shrink:0;
  border:1px solid transparent;border-radius:0;box-shadow:none;
  background:transparent;color:var(--color-text-secondary);cursor:pointer;
  transition:background-color 120ms ease,color 120ms ease;
}
.ds-base .icon-btn:hover{background:var(--dim);color:var(--color-text-primary)}
.ds-base .icon-btn[aria-pressed="true"],.ds-base .icon-btn.is-active{border-color:var(--color-border-focus);background:var(--color-accent-soft);color:var(--color-accent)}
.ds-base .icon-btn svg{width:16px;height:16px;display:block}
.ds-base .icon-btn.on-ink{color:var(--white-75)}
.ds-base .icon-btn.on-ink:hover{background:rgba(255,255,255,0.10);color:var(--paper)}

/* ── Input · Select · Textarea (forms/) ──────────────────────────────────
   .field is the wrapper: a label in the label voice, the control, then one
   caption — the error if there is one, otherwise the hint. */
.ds-base .field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-sans)}
.ds-base .field__label{font:var(--text-label);color:var(--color-text-primary)}
.ds-base .field__hint{font:var(--text-caption);color:var(--color-text-tertiary)}
.ds-base .field__error{font:var(--text-caption);color:var(--color-status-warning-fg)}
.ds-base .input,.ds-base .select,.ds-base .textarea{
  font:var(--text-body);font-family:var(--font-sans);
  min-height:var(--target);padding:9px 12px;
  border:1px solid var(--color-border-strong);border-radius:0;box-shadow:none;
  background:var(--color-bg-surface);color:var(--color-text-primary);
  width:100%;
}
.ds-base .textarea{resize:vertical;padding:10px 12px;line-height:var(--leading-normal)}
.ds-base .select{padding-right:var(--space-7)}
.ds-base .field--error .input,.ds-base .field--error .select,.ds-base .field--error .textarea{border-color:var(--color-status-warning-fg)}
.ds-base .input:disabled,.ds-base .select:disabled,.ds-base .textarea:disabled{background:var(--color-bg-sunken);color:var(--color-text-primary);opacity:1;cursor:default}
.ds-base .input::placeholder,.ds-base .textarea::placeholder{color:var(--color-text-tertiary)}

/* ── Checkbox · Radio (forms/) — a 16px box, ink accent, in a 44px row ─── */
.ds-base .checkbox,.ds-base .radio{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:var(--target);font-family:var(--font-sans);cursor:pointer;
}
.ds-base .checkbox input,.ds-base .radio input{width:16px;height:16px;flex-shrink:0;accent-color:var(--color-accent);margin:0;font-family:var(--font-sans)}
.ds-base .checkbox__label,.ds-base .radio__label{font:var(--text-body-sm);color:var(--color-text-primary)}
.ds-base .checkbox.is-disabled,.ds-base .radio.is-disabled{cursor:default}
.ds-base .checkbox.is-disabled .checkbox__label,.ds-base .radio.is-disabled .radio__label{color:var(--color-text-secondary)}

/* ── Switch (forms/Switch) — a 36×20 track and a square thumb, no radius ─ */
.ds-base .switch{
  display:inline-flex;align-items:center;gap:10px;
  min-height:var(--target);font-family:var(--font-sans);cursor:pointer;
  background:none;border:0;padding:0;text-align:left;
}
.ds-base .switch__track{
  position:relative;width:36px;height:20px;flex-shrink:0;border-radius:0;
  background:var(--rule-minor);transition:background-color 120ms ease;
}
.ds-base .switch__thumb{
  position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:0;
  background:var(--paper);box-shadow:none;transition:left 120ms ease;
}
.ds-base .switch[aria-checked="true"] .switch__track{background:var(--color-accent)}
.ds-base .switch[aria-checked="true"] .switch__thumb{left:18px}
.ds-base .switch__label{font:var(--text-body-sm);color:var(--color-text-primary)}
.ds-base .switch:disabled,.ds-base .switch[aria-disabled="true"]{cursor:default}

/* ── Badge (feedback/Badge) — uppercase 11px, square ────────────────────── */
.ds-base .badge{
  display:inline-flex;align-items:center;white-space:nowrap;flex-shrink:0;
  padding:2px 9px;border-radius:0;
  font:var(--weight-medium) var(--text-2xs)/1 var(--font-sans);
  text-transform:uppercase;letter-spacing:0.03em;
  background:var(--color-status-neutral-bg);color:var(--color-status-neutral-fg);
}
.ds-base .badge--neutral{background:var(--color-status-neutral-bg);color:var(--color-status-neutral-fg)}
.ds-base .badge--success{background:var(--color-status-success-bg);color:var(--color-status-success-fg)}
.ds-base .badge--warning{background:var(--color-status-warning-bg);color:var(--color-status-warning-fg)}
.ds-base .badge--danger{background:var(--color-status-danger-bg);color:var(--color-status-danger-fg)}
.ds-base .badge--info{background:var(--color-status-info-bg);color:var(--color-status-info-fg)}

/* ── StatusPill (feedback/StatusPill) — where one trade sits in the run ── */
.ds-base .status-pill{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:4px 10px;border-radius:0;
  font:var(--weight-medium) var(--text-xs)/1 var(--font-sans);
  background:var(--color-status-neutral-bg);color:var(--color-status-neutral-fg);
}
.ds-base .status-pill[data-stage="not-sent"]{background:var(--color-status-neutral-bg);color:var(--color-status-neutral-fg)}
.ds-base .status-pill[data-stage="out-for-bid"]{background:var(--color-status-info-bg);color:var(--color-status-info-fg)}
.ds-base .status-pill[data-stage="awarded"]{background:var(--color-status-success-bg);color:var(--color-status-success-fg)}
.ds-base .status-pill[data-stage="questions-open"]{background:var(--color-status-warning-bg);color:var(--color-status-warning-fg)}
.ds-base .status-pill[data-stage="ready"]{background:var(--color-status-success-bg);color:var(--color-status-success-fg)}

/* ── KPI · StageBar · StageLegend (wave 1c · lane DASH, 2026-09-05) ──────
   The rules for BRAND.ui.kpi / .stageBar / .stageLegend — the three parts
   the Dashboard pane is made of. Flat, 1px rules, no radius, no shadow; the
   number is tabular; the label is the label voice (uppercase, rule 9); the
   only red anywhere in here is the `questions-open` segment and swatch,
   which is the one stage that means STUCK (rule 4). */
.ds-base .kpi{
  flex:1;min-width:0;display:flex;align-items:center;gap:12px;
  min-height:var(--target);padding:10px 14px;text-align:left;
  border:1px solid var(--color-border-default);border-radius:0;box-shadow:none;
  background:var(--color-status-neutral-bg);color:var(--color-text-primary);
  font-family:var(--font-sans);cursor:pointer;
}
.ds-base .kpi:hover{background:var(--paper)}
.ds-base .kpi--success{background:var(--color-status-success-bg)}
.ds-base .kpi--warning{background:var(--color-status-warning-bg)}
.ds-base .kpi--info{background:var(--color-status-info-bg)}
.ds-base .kpi--neutral{background:var(--color-status-neutral-bg)}
.ds-base .kpi__icon{
  width:32px;height:32px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  background:var(--color-bg-surface);border:1px solid var(--color-border-default);
  color:var(--color-text-secondary);
}
.ds-base .kpi--warning .kpi__icon{color:var(--color-status-warning-fg)}
.ds-base .kpi__icon svg{width:16px;height:16px;display:block}
.ds-base .kpi__body{min-width:0;display:flex;flex-direction:column;gap:2px}
.ds-base .kpi__line{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.ds-base .kpi__value{
  font:var(--text-h2);font-variant-numeric:tabular-nums;line-height:1;flex-shrink:0;
  color:var(--color-text-primary);
}
.ds-base .kpi--warning .kpi__value{color:var(--color-status-warning-fg)}
/* the label WRAPS rather than clipping. The system's own tile sets it nowrap with an
   ellipsis, and at three tiles across 1280px that renders the middle one as
   "REQUESTS FOR INFORMA…" — a label voice that has lost its own word. Two lines cost
   nothing here and the tile still holds one line of note beneath. Listed as a deviation. */
.ds-base .kpi__label{
  font:var(--weight-semibold) var(--text-2xs)/1.15 var(--font-sans);
  text-transform:uppercase;letter-spacing:0.04em;color:var(--color-text-primary);
  min-width:0;
}
.ds-base .kpi__note{
  font:var(--text-caption);color:var(--color-text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.ds-base .stagebar{display:flex;align-items:center;gap:10px;min-width:0}
.ds-base .stagebar__track{
  flex:1;min-width:0;display:flex;height:8px;overflow:hidden;
  background:var(--dim);border:1px solid var(--rule);
}
.ds-base .stagebar__seg{display:block;height:100%}
.ds-base .stagebar__seg--edged{box-shadow:none;outline:1px solid var(--rule-minor);outline-offset:-1px}
.ds-base .stagebar__count{
  font:var(--text-caption);font-variant-numeric:tabular-nums;
  color:var(--color-text-secondary);white-space:nowrap;flex-shrink:0;
}

.ds-base .stagelegend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.ds-base .stagelegend__item{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font:var(--text-caption);color:var(--color-text-secondary);
}
.ds-base .stagelegend__swatch{width:8px;height:8px;flex-shrink:0;display:block}
.ds-base .stagelegend__swatch--edged{outline:1px solid var(--rule-minor);outline-offset:-1px}
.ds-base .stagelegend__n{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}

/* ── Tooltip (feedback/Tooltip) — an ink field, white type, a 1px ring ─── */
.ds-base .tooltip{position:relative;display:inline-flex}
.ds-base .tooltip__label{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--color-bg-ink);color:var(--color-text-inverse);
  font:var(--text-caption);font-family:var(--font-sans);
  padding:5px 9px;border-radius:0;outline:1px solid var(--rule);outline-offset:-1px;
  white-space:nowrap;z-index:10;visibility:hidden;
}
.ds-base .tooltip:hover .tooltip__label,.ds-base .tooltip:focus-within .tooltip__label{visibility:visible}

/* ── Toast (feedback/Toast) — one sentence, an optional Dismiss ────────── */
.ds-base .toast{
  display:flex;align-items:center;gap:var(--space-3);
  padding:12px 16px;border-radius:0;outline:1px solid var(--rule);outline-offset:-1px;
  font:var(--text-body-sm);font-family:var(--font-sans);max-width:420px;
  background:var(--ink);color:var(--color-text-inverse);
}
.ds-base .toast--neutral{background:var(--ink);color:var(--color-text-inverse)}
.ds-base .toast--success{background:var(--ink);color:var(--color-text-inverse)}
.ds-base .toast--danger{background:var(--red-press);color:var(--color-text-inverse)}
.ds-base .toast__text{flex:1}
.ds-base .toast__dismiss{
  background:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;
  font:var(--text-body-sm);font-family:var(--font-sans);
  min-height:var(--target);padding:0 var(--space-2);
}
.ds-base .toast__dismiss:hover{text-decoration:underline}
.ds-base .toast-rail{position:fixed;left:var(--space-6);bottom:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);z-index:300}

/* ── Working (feedback/Working) — the system's ONE indeterminate state (the founder's
      ruling 2026-09-12 (5); lanes KIT-5 ∥ TRAY-5). For work already under way whose end cannot
      be counted — a delivery being read after its last file lands, a filing being written — one
      short line in the office's own voice, changing every few seconds, with the one small mark
      beside it: a hammer that taps. Never a spinner, never a bar that fakes a number; where the
      number is real, Progress draws it. Ink only — no colour, no radius, no shadow, and nothing
      else in the row moves. `stockTap` is the FIRST @keyframes in this file and the first the
      office app declares — `brand.css`, `brand.js`, `docs.html`, `index.html` and
      `contractors.html` declare none. The guide's own surface has two of its own
      (`guide.css` `sg-pulse-anim`, `guide.html` `stepIn`), and the kit's `stockPulse` — the blocked
      milestone's — has no counterpart in the product at all. (Corrected at the fold, SHOULD-5: the
      first draft of this comment said the product declared no @keyframes anywhere.) ─────── */
.ds-base .working{display:flex;align-items:center;gap:10px;min-height:var(--target)}
.ds-base .working__mark{
  width:16px;height:16px;flex:none;display:block;color:var(--ink);
  transform-origin:100% 100%;                 /* the handle end, bottom-right of the 16px box */
  animation:stockTap 1.8s ease-out infinite;  /* the tap is 0.9s of it; the rest is the other half */
}
.ds-base .working__mark svg{display:block;width:16px;height:16px}
.ds-base .working__line{font:var(--text-body);font-family:var(--font-sans);color:var(--color-text-primary)}
@keyframes stockTap{
  0%   { transform:rotate(-18deg) }   /* lifted */
  50%  { transform:rotate(0deg) }     /* struck — 0.9s, ease-out */
  75%  { transform:rotate(0deg) }     /* and a rest on the work */
  100% { transform:rotate(-18deg) }
}
/* The mark holds still; the lines still turn — what is happening is the WORDS, not the motion. */
@media (prefers-reduced-motion: reduce){
  .ds-base .working__mark{animation:none;transform:none}
}

/* ── Tabs (navigation/Tabs) — a 2px ink underline on the active tab ────── */
.ds-base .tabs{display:flex;gap:var(--space-6);border-bottom:1px solid var(--color-border-default);font-family:var(--font-sans)}
.ds-base .tab{
  display:inline-flex;align-items:center;min-height:var(--target);
  padding:0 2px;margin-bottom:-1px;
  border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;
  color:var(--color-text-secondary);font:var(--text-body);font-family:var(--font-sans);
  cursor:pointer;
}
.ds-base .tab[aria-selected="true"]{border-bottom-color:var(--color-accent);color:var(--color-text-primary);font-weight:var(--weight-medium)}
.ds-base .tab:hover{color:var(--color-text-primary)}

/* ── Breadcrumb (navigation/Breadcrumb) ─────────────────────────────────── */
.ds-base .breadcrumb{display:flex;align-items:center;gap:6px;font:var(--text-body-sm);font-family:var(--font-sans);color:var(--color-text-secondary)}
.ds-base .breadcrumb__item{display:inline-flex;align-items:center;min-height:var(--target)}
.ds-base .breadcrumb a.breadcrumb__item{color:var(--color-text-link);text-decoration:none}
.ds-base .breadcrumb a.breadcrumb__item:hover{color:var(--color-text-link-hover);text-decoration:underline}
.ds-base .breadcrumb__item--current{color:var(--color-text-primary)}
.ds-base .breadcrumb__sep{color:var(--color-text-tertiary)}

/* ── Card (data/Card) — paper, a 1px rule, an optional head + action slot ─ */
.ds-base .card{
  background:var(--color-bg-surface);border:1px solid var(--color-border-default);
  border-radius:0;box-shadow:none;font-family:var(--font-sans);overflow:hidden;
}
.ds-base .card__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:14px 16px;border-bottom:1px solid var(--color-border-default);
}
.ds-base .card__title{font:var(--text-h3);color:var(--color-text-primary)}
.ds-base .card__body{padding:var(--space-4)}
.ds-base .card__body--flush{padding:0}

/* ── Table (data/Table) — hairline rows, uppercase heads, no zebra ─────── */
.ds-base .table{width:100%;border-collapse:collapse;font:var(--text-body-sm);font-family:var(--font-sans)}
.ds-base .table th{
  text-align:left;padding:8px 12px;border-bottom:1px solid var(--color-border-strong);
  color:var(--color-text-tertiary);
  font:var(--weight-medium) var(--text-2xs)/1 var(--font-sans);
  text-transform:uppercase;letter-spacing:0.03em;white-space:nowrap;
}
.ds-base .table td{text-align:left;padding:10px 12px;color:var(--color-text-primary);border-bottom:1px solid var(--color-border-default)}
.ds-base .table [data-align="right"]{text-align:right}
.ds-base .table [data-align="center"]{text-align:center}
.ds-base .table tr[data-row-click]{cursor:pointer}
.ds-base .table tr[data-row-click]:hover td{background:var(--dim)}
/* the Table's own empty line (Table.jsx `empty`; lane SCREEN-7's fold, S3) */
.ds-base .table tr[data-table-empty] td{padding:16px 12px;font:var(--text-body-sm);font-family:var(--font-sans);color:var(--color-text-tertiary);border-bottom:0}

/* ── Dialog (overlays/Dialog) — the one sanctioned overlay scrim ───────── */
.ds-base .dialog-scrim[hidden]{display:none}
.ds-base .dialog-scrim{
  position:fixed;inset:0;background:rgba(10,10,10,0.28);
  display:flex;align-items:center;justify-content:center;z-index:100;
}
.ds-base .dialog{
  background:var(--color-bg-surface);border-radius:0;outline:1px solid var(--rule);outline-offset:-1px;
  width:440px;max-width:calc(100vw - 40px);font-family:var(--font-sans);
  display:flex;flex-direction:column;max-height:calc(100vh - 40px);
}
.ds-base .dialog__head{padding:18px 20px;border-bottom:1px solid var(--color-border-default);font:var(--text-h3);color:var(--color-text-primary)}
.ds-base .dialog__body{padding:20px;color:var(--color-text-primary);font:var(--text-body);overflow:auto}
.ds-base .dialog__foot{padding:14px 20px;border-top:1px solid var(--color-border-default);display:flex;align-items:center;justify-content:flex-end;gap:10px}

/* ── Sidecar (overlays/Sidecar) — the right-docked detail panel ──────────
   Absolute inside a position:relative working pane, so it never covers the
   sidebar. Default width 420. A second panel opens at width 380 offset 420
   and folds out CLEAR of the first. Closed, it is parked fully off-screen at
   translateX(100% + offset) — not merely hidden. 200ms slide. */
.ds-base .sidecar{
  position:absolute;top:0;bottom:0;right:var(--sidecar-offset,0px);
  width:var(--sidecar-width,420px);max-width:100%;
  background:var(--color-bg-surface);border-left:1px solid var(--color-border-default);
  outline:1px solid var(--rule);outline-offset:-1px;border-radius:0;
  display:flex;flex-direction:column;font-family:var(--font-sans);
  transform:translateX(calc(100% + var(--sidecar-offset,0px)));
  transition:transform 200ms ease;
  visibility:hidden;pointer-events:none;
  z-index:var(--sidecar-z,50);
}
.ds-base .sidecar.is-open{transform:translateX(0);visibility:visible;pointer-events:auto}
.ds-base .sidecar__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding:18px 20px;border-bottom:1px solid var(--color-border-default)}
.ds-base .sidecar__title{font:var(--text-h3);color:var(--color-text-primary)}
.ds-base .sidecar__subtitle{font:var(--text-body-sm);color:var(--color-text-secondary);margin-top:2px}
.ds-base .sidecar__body{flex:1;overflow:auto;padding:20px;font:var(--text-body);color:var(--color-text-primary)}
.ds-base .sidecar__foot{padding:14px 20px;border-top:1px solid var(--color-border-default);display:flex;align-items:center;justify-content:space-between;gap:10px}
.ds-base .sidecar__foot-left,.ds-base .sidecar__foot-right{display:flex;align-items:center;gap:10px}

/* ── SidebarNav (navigation/SidebarNav + NavItem) ────────────────────────
   A fixed 220px ink rail. It never scrolls and never collapses: the drawn
   wordmark over a 4px Brand Red rule, the rows, then the account button at
   the foot with its popover above it. */
.ds-base .sidebar-nav{
  width:220px;flex-shrink:0;height:100%;
  /* deliberately NOT overflow:hidden — the account popover is 264px wide and
     opens over the working pane, exactly as the office kit draws it. The rail
     still never scrolls: it holds its rows and its account button and nothing
     more, and verify-system.js §7 fails the whole shell frame the moment
     anything inside it overflows. */
  background:var(--ink);display:flex;flex-direction:column;gap:2px;
  /* 10px, not the reference's 16: the rail has to hold seven rows (since SCREEN-7), the
     product's one expanded sub-row and the account button inside 640px WITHOUT scrolling (rule 10),
     and every one of those rows holds the 44px target (rule 9). The two rules
     together set this padding; verify-system.js §7 fails the frame the moment
     it stops adding up. */
  padding:10px 10px;font-family:var(--font-sans);
}
.ds-base .sidebar-nav__mark{padding:0 12px}
/* the drawn wordmark is a link, and rule 9 holds for it like every other
   control on the surface: 44px, on the system's surfaces only. */
.ds-base .wordmark{min-height:var(--target)}
.ds-base .sidebar-nav__rule{height:4px;background:var(--red);margin:6px 12px 8px}
.ds-base .sidebar-nav__spacer{flex:1}
.ds-base .nav-item{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;
  min-height:var(--target);padding:9px 12px;border:0;border-radius:0;background:transparent;
  color:var(--white-85);font:var(--text-body-sm);font-family:var(--font-sans);
  cursor:pointer;text-align:left;
  transition:background-color 120ms ease;
}
.ds-base .nav-item:hover{background:rgba(255,255,255,0.06)}
.ds-base .nav-item[aria-current="page"]{background:rgba(255,255,255,0.10);color:var(--paper)}
.ds-base .nav-item[aria-current="page"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
.ds-base .nav-item__icon{display:inline-flex;width:18px;height:18px;flex-shrink:0;align-items:center;justify-content:center}
.ds-base .nav-item__icon svg{width:16px;height:16px;display:block}
.ds-base .nav-item__label{flex:1}
.ds-base .nav-item__badge{background:var(--red-press);color:var(--paper);font-size:11px;font-weight:700;padding:1px 7px;line-height:16px}
.ds-base .nav-item__chev{font-size:9px;line-height:1;color:var(--white-55);display:inline-flex}
.ds-base .nav-item--sub{padding:7px 12px 7px 22px;color:var(--white-65);font:var(--text-caption);font-family:var(--font-sans)}
.ds-base .nav-item--sub .nav-item__mark{width:18px;flex-shrink:0;display:flex;justify-content:center}
.ds-base .nav-item--sub .nav-item__mark i{display:block;width:7px;height:7px;background:var(--white-35)}
.ds-base .nav-item--sub[aria-current="page"] .nav-item__mark i{background:var(--red)}
.ds-base .sidebar-nav__subs{display:flex;flex-direction:column;gap:2px;padding-bottom:2px}

/* the account button and its popover */
.ds-base .account{position:relative}
.ds-base .account__btn{
  display:flex;align-items:center;gap:10px;width:100%;min-height:var(--target);
  padding:8px 10px;border:1px solid var(--white-25);border-radius:0;
  background:transparent;cursor:pointer;text-align:left;
  font-family:var(--font-sans);font-size:var(--text-base);
}
.ds-base .account__btn:hover,.ds-base .account__btn[aria-expanded="true"]{background:rgba(255,255,255,0.08);border-color:var(--white-35)}
.ds-base .account__initials{width:28px;height:28px;flex-shrink:0;background:var(--red-press);color:var(--paper);display:flex;align-items:center;justify-content:center;font:700 var(--text-2xs)/1 var(--font-sans)}
.ds-base .account__who{flex:1;min-width:0;font-family:var(--font-sans)}
.ds-base .account__name{display:block;color:var(--paper);font:var(--text-body-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the role reads in sentence case, no tracking — mirrors DesignSystem/components/navigation/SidebarNav.jsx (R2 craftsman NOTE-3 / SHELL open question 4, the chair 2026-09-04): uppercase at .06em read "OFFICE MANA…" at 220px, and wrapping it cost the rail 14px it does not have at 640 */
.ds-base .account__role{display:block;color:var(--white-65);font:var(--text-2xs);font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-base .popover{
  position:absolute;bottom:calc(100% + 8px);left:0;width:264px;z-index:200;
  background:var(--color-bg-surface);border:1px solid var(--color-border-default);
  border-radius:0;outline:1px solid var(--rule);outline-offset:-1px;overflow:hidden;font-family:var(--font-sans);
}
.ds-base .popover[hidden]{display:none}
.ds-base .popover__head{padding:14px 14px 12px;border-bottom:1px solid var(--color-border-default)}
.ds-base .popover__name{font:var(--weight-semibold) var(--text-body)/1.3 var(--font-sans);color:var(--color-text-primary)}
.ds-base .popover__meta{font:var(--text-caption);color:var(--color-text-secondary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-base .popover__group{padding:0;border-top:1px solid var(--color-border-default)}
.ds-base .popover__group:first-of-type{border-top:0}
.ds-base .popover__row{
  display:flex;align-items:center;gap:10px;width:100%;min-height:var(--target);
  padding:9px 12px;border:0;border-radius:0;background:transparent;cursor:pointer;text-align:left;
  font:var(--text-body-sm);font-family:var(--font-sans);
  color:var(--color-text-primary);
}
.ds-base .popover__row:hover{background:var(--color-bg-sunken)}
.ds-base .popover__row-icon{display:inline-flex;width:16px;height:16px;flex-shrink:0;color:var(--color-text-tertiary)}
.ds-base .popover__row-icon svg{width:16px;height:16px;display:block}
/* Sign out keeps ink text and takes a Press Red square marker. The system's
   own AccountMenu draws it in --color-status-danger-fg, which resolves to
   PAPER — white type on a paper popover. Not copied; flagged in the report. */
.ds-base .popover__row--out .popover__row-icon i{display:block;width:7px;height:7px;background:var(--red-press)}

/* the square markers the brand sanctions — 9px red before a caption, 7px as a bullet */
.ds-base .mark{display:inline-block;width:7px;height:7px;background:var(--ink);flex-shrink:0}
.ds-base .mark--red{background:var(--red)}
.ds-base .mark--caption{width:9px;height:9px;background:var(--red)}

/* ══════════════════════════════ 5. LEGACY ═══════════════════════════════
   RETIRED BY WAVE 1a's SHELL LANE — NO NEW USE.

   Everything below is the 08-21 identity layer, kept alive only because the
   four shipped surfaces still read it, and re-expressed on the system's own
   tokens so there is exactly one palette in the product. Consumers today:
     --display, --body   index.html · docs.html · guide.css   (→ --font-display/--font-sans)
     --action            index.html · docs.html · contractors.html · guide.css
     --pad, --section    index.html
     --target, --ink-muted, --rule-minor   all four pages (now the system's own)
     .action .btn-outline .textlink .inert .inert-reason   (.destructive retired, SCREEN-4)
                          index.html · docs.html · contractors.html · guide.html
     .label .muted .data .tnum .rule-h .rule-v   all four pages
     .wordmark .wm-*      all four pages + share.js (via BRAND.wordmark)
     .on-ink .chrome .masthead   index.html · docs.html · contractors.html
   When the shell lane rebuilds those four pages on .btn/.card/.table and the
   drawn Wordmark, this block goes with them and nothing else changes. */
:root{
  --display: var(--font-display);
  --body: var(--font-sans);
  --action: var(--color-action);
  --pad: clamp(20px, 4vw, 48px);
  --section: clamp(36px, 6vh, 64px);
}

html { scrollbar-width: thin; scrollbar-color: var(--ink) var(--paper); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink); }
::-webkit-scrollbar-track { background: var(--paper); }

/* the shipped pages' focus ring: 2px red offset 2px. The system's own base
   uses offset 1px and rides on .ds-base above; the two are the same ring. */
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.chrome :focus-visible,
.masthead :focus-visible,
.on-ink :focus-visible { outline-color: var(--paper); }

.rule-h      { border-top: 1px solid var(--ink); }
.rule-h--min { border-top: 1px solid var(--rule-minor); }
.rule-v      { border-left: 1px solid var(--ink); }
.rule-v--min { border-left: 1px solid var(--rule-minor); }

.label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.muted { color: var(--ink-muted); font-size: 0.8125rem; }
.data, .tnum { font-variant-numeric: tabular-nums; }

/* the drawn wordmark — the system's Wordmark, in the class shape the four
   pages and share.js already emit through BRAND.wordmark(). The mark itself
   is unchanged from 08-21 and matches HANDOFF's construction exactly. */
.wordmark { text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.6rem; line-height: 1; flex-shrink: 0; }
.wm-mark { display: inline-block; line-height: 1; }
.wm-stock {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-transform: uppercase;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 39%, transparent 39% 45%, #000 45% 61%, transparent 61% 67%, #000 67% 100%);
          mask-image: linear-gradient(to bottom, #000 0 39%, transparent 39% 45%, #000 45% 61%, transparent 61% 67%, #000 67% 100%);
}
.wm-bar {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 0.5rem;
  letter-spacing: 0.42em;
  color: var(--red);
  text-transform: uppercase;
}
.wm-role {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.625rem;
  color: var(--white-65);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.wordmark.on-paper .wm-stock { color: var(--ink); }
.wordmark.on-paper .wm-role { color: var(--ink-muted); }
.wordmark--lg .wm-stock { font-size: 2.5rem; }
.wordmark--lg .wm-bar { font-size: 0.625rem; margin-top: 4px; }
.wordmark--sm .wm-stock { font-size: 1.15rem; }
@media (max-width: 720px) {
  .wordmark .wm-stock { font-size: 1.5rem; }
}

/* .action — the legacy alias of .btn.btn--action. Same fill, same rule: one
   per composition, Press Red, white type. */
.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--target);
  background: var(--color-action);
  color: var(--color-text-inverse);
  border: 0;
  border-radius: 0;
  padding: 12px 20px;
  font-family: var(--font-sans);
  /* lane CASE (SKILL rule 9): a button's text is prose. The uppercase transform and its
     tracking are struck; the size and weight are the ported Button's own AT THE SIZE THE
     PRODUCT DRAWS IT — brand.js:393 defaults every Button to `md`, and `btn--sm` appears
     nowhere outside system.html's showcase, so `--text-base` (14px) at `--weight-medium`
     is what a legacy control must match to read as one kind with the Button beside it
     (fold review MUST-4; it was --text-sm/13px and 1px short of every real Button).
     44px still wins. */
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: filter 140ms ease-out, transform 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out;
}
.action:hover { filter: brightness(0.88); }
.action:active { transform: translateY(1px); }
.action--onred { background: var(--paper); color: var(--ink); }
.action--onred:hover { background: var(--ink); color: var(--paper); filter: none; }
.action:disabled,
.action[aria-disabled="true"] {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  cursor: default;
  filter: none;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--target);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 11px 18px;
  font-family: var(--font-sans);
  /* lane CASE (SKILL rule 9): sentence case, the ported Button's size and weight —
     --text-base at --weight-medium, the `md` the product actually draws (MUST-4). */
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}
/* lane CASE (SKILL rule 2): Brand Red is never a button and never below a headline. This
   hover painted a red border AND red text at 13px — red at text size. It becomes the
   system's own secondary hover: ink on the recessed ground (.ds-base .btn--secondary:hover). */
.btn-outline:hover { border-color: var(--ink); color: var(--ink); background: var(--dim); }
.btn-outline:disabled { border-color: var(--rule-minor); color: var(--ink-muted); cursor: default; }

.inert {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  cursor: default;
}
.inert-reason {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 8px;
}

.textlink {
  color: var(--ink);
  font-family: var(--font-sans);
  /* lane CASE, round 3: 700/13px was the last weight-and-size split left in the office — every
     converted control beside it reads at --weight-medium / --text-base. The 2px red rule below
     stays: that is this control's mark, and a rule is where rule 2 allows red. */
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  padding-bottom: 1px;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  cursor: pointer;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
}
/* lane CASE, fold ruling 2 (SKILL rule 2): this hover painted Brand Red TYPE at 13px. Red
   stays where the rule allows it — the 2px RULE under the words, darkened to its pressed
   state — and the type stays ink on the recessed ground. */
.textlink:hover { color: var(--ink); border-bottom-color: var(--red-press); background: var(--dim); }
.textlink.on-ink { color: var(--paper); border-bottom-color: transparent; }
.textlink.on-ink:hover { color: var(--paper); border-bottom-color: var(--paper); background: transparent; }
/* lane SCREEN-4 (the chair's ruling 6 — found by the lane's own shot 06): inside the system's
   `.ds-base` a `.textlink` drew in `--color-text-link` — Press Red TYPE at text size — because
   `.ds-base a{color:var(--color-text-link)}` (0-1-1) out-ranks `.textlink` (0-1-0). A text link's
   mark is its RULE; its type is ink, inside the system or out. (`.on-ink` keeps its paper.) */
.ds-base a.textlink:not(.on-ink), .ds-base button.textlink:not(.on-ink) { color: var(--ink); text-decoration: none; }
.ds-base a.textlink:not(.on-ink):hover, .ds-base button.textlink:not(.on-ink):hover { color: var(--ink); text-decoration: none; }
/* `.destructive` RETIRED (lane SCREEN-4, ruling 5 — the destructive idiom INTO the system): a
   destructive act is the system's own `danger` Button (`.ds-base .btn--danger`, :245) opening a
   Dialog, never a link. What was not destructive (Stop this upload, Remove this row) is a plain
   `.textlink`. No page carries the class. */

/* ══ THE OFFICE RAIL'S SHELL (wave 1c · lane RAIL, 2026-09-05) ═══════════════════════════════
   These rules were copied verbatim into all four office pages' own <style> blocks by wave 1a's
   SHELL lane. They are the design system's SidebarNav in its office SHELL — the ink field it
   stands in and the gutter the page pays for it — so they belong here, once, beside the
   component they dress. Moved byte-for-byte; nothing is redesigned, no token is re-declared.
   Fixed 220px of ink at 1024 and up; below 1024 the rail becomes a row across the top of the
   page (UX/RECONCILIATION-2026-09-04 A11: the office pane never scrolls at the ruled office
   widths, and below them the phone is not the office). `.ds-base` is worn by the RAIL, not by
   <body> — the four pages own .btn / .card / .field / .tabs / .tab / .switch / .mark as local
   classes and a body-level opt-in would silently restyle surfaces this did not move
   (INJECT-REPORT.md §5, open question 7). The crew phone keeps its own chrome: no rail there. */
.shell-rail{position:fixed;top:0;left:0;bottom:0;width:220px;z-index:60;background:var(--ink);display:flex;}
.shell-rail .sidebar-nav{height:100%;}
/* a popover row with nowhere to go yet says so beside its own label and does not act — it is
   never screened down (R1-07: no opacity-screened control anywhere), so it stays legible. */
.shell-rail .popover__row[aria-disabled="true"]{cursor:default;}
body.with-rail{padding-left:220px;}
@media (max-width:1023px){
  body.with-rail{padding-left:0;}
  .shell-rail{position:static;width:auto;flex:none;}
  .shell-rail .sidebar-nav{width:100%;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:8px 12px;gap:4px;}
  .shell-rail .sidebar-nav__mark{order:0;flex:none;padding:0 14px 0 0;}
  .shell-rail .nav-item{order:1;width:auto;flex:none;white-space:nowrap;}
  .shell-rail .sidebar-nav__subs{order:1;flex-direction:row;padding-bottom:0;}
  .shell-rail .sidebar-nav__spacer{display:none;}
  .shell-rail .account{order:2;margin-left:auto;flex:none;min-width:184px;}
  /* the 4px Brand Red rule follows the row instead of the mark — the same band the masthead drew
     under itself, drawn now by the same component that draws the rail. */
  .shell-rail .sidebar-nav__rule{order:9;width:100%;margin:8px 0 0;}
  .shell-rail .popover{bottom:auto;top:calc(100% + 8px);left:auto;right:0;}
}

/* Company trade picker — the existing Checkbox primitive, with a searchable list. */
.company-trade-picker{min-width:0;margin:16px 0;padding:12px;border:1px solid var(--color-border-default);text-align:left}
.company-trade-picker legend{font-weight:700;font-size:16px}
.company-trade-picker p{margin:0 0 10px;font-size:15px;overflow-wrap:anywhere}
.company-trade-picker .field{margin-bottom:10px;display:block}
.company-trade-picker .input{width:100%;min-height:44px}
.company-trade-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:0 12px;max-height:264px;overflow:auto;overscroll-behavior:contain}
.company-trade-choices .checkbox{display:flex;width:100%;min-height:44px;align-items:center;white-space:normal}
.company-trade-choices .checkbox input{width:16px;height:16px;min-height:16px;padding:0;flex:none}
.company-trade-choices .checkbox__label{white-space:normal;overflow-wrap:anywhere;font-size:15px}
.company-trade-picker [hidden]{display:none}

/* Compact navigation leaves room for the task on tablets and zoomed displays. */
.rail-menu-toggle{display:none}
@media(max-width:1023px){
 .shell-rail{display:block;position:relative;z-index:60}
 .shell-rail .rail-menu-toggle{display:flex;align-items:center;gap:10px;min-height:52px;width:100%;padding:10px 16px;background:var(--ink);color:#fff;border:0;font:600 16px/1.4 var(--font-sans);text-align:left;cursor:pointer}
 .rail-current{margin-left:auto;font-size:14px;font-weight:400}
 .shell-rail:not(.rail-expanded) .sidebar-nav{display:none}
 .shell-rail.rail-expanded .sidebar-nav{position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - 52px);overflow:auto;align-items:stretch;flex-direction:column;flex-wrap:nowrap;padding:12px 16px}
 .shell-rail .sidebar-nav__mark{display:none}
 .shell-rail .nav-item{width:100%}
 .shell-rail .account{margin-left:0;min-width:0}
 .shell-rail .sidebar-nav__subs{flex-direction:column}
 .shell-rail .popover{position:static;width:100%;margin-top:8px}
}
/* A single recognizable action per interaction; labels and hit targets stay still. */
[data-ui-icon]{overflow:visible}
[data-ui-icon] [class^=mi-]{transform-box:view-box;transform-origin:12px 12px}
[data-ui-icon] .mi-letter,[data-ui-icon] .mi-paint{opacity:0}
[data-ui-icon] .mi-paint{transform-origin:12px 3px}
[data-ui-icon] .mi-compass-right,[data-ui-icon] .mi-compass-left{transform-origin:12px 5px}
[data-ui-icon=hammer] .mi-tool{transform-origin:5px 19px}
[data-ui-icon] .mi-door{transform-origin:11px 12px}
[data-ui-icon] .mi-entry{transform-origin:10px 21px}
[data-ui-icon] .mi-flag{transform-origin:15px 9px}
[data-ui-icon] .mi-beam-a,[data-ui-icon] .mi-beam-b,[data-ui-icon] .mi-beam-c,[data-ui-icon] .mi-flame,[data-ui-icon] .mi-leaf{transform-origin:12px 21px}
@media(prefers-reduced-motion:no-preference){
 [data-icon-playing=true] [class^=mi-]{animation-duration:720ms;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-iteration-count:1;animation-fill-mode:both}
 [data-icon-playing=true] .mi-compass-right{animation-name:stock-compass-right}
 [data-icon-playing=true] .mi-compass-left{animation-name:stock-compass-left}
 [data-icon-playing=true] .mi-scribe{stroke-dasharray:1;animation-name:stock-scribe}
 [data-icon-playing=true] [data-ui-icon=hammer] .mi-tool{animation-name:stock-strike}
 [data-icon-playing=true] [data-ui-icon=wrench] .mi-tool{animation-name:stock-tighten}
 [data-icon-playing=true] .mi-fan{animation-name:stock-fan}
 [data-icon-playing=true] .mi-drop{animation-name:stock-water}
 [data-icon-playing=true] .mi-trace,[data-icon-playing=true] .mi-pour,[data-icon-playing=true] .mi-course,[data-icon-playing=true] .mi-profile{stroke-dasharray:1;animation-name:stock-trace}
 [data-icon-playing=true] .mi-joint{animation-name:stock-joint}
 [data-icon-playing=true] .mi-beam-a,[data-icon-playing=true] .mi-beam-b,[data-icon-playing=true] .mi-beam-c{animation-name:stock-erect}
 [data-icon-playing=true] .mi-beam-b{animation-name:stock-erect-middle}
 [data-icon-playing=true] .mi-beam-c{animation-name:stock-erect-last}
 [data-icon-playing=true] .mi-sheet-a{animation-name:stock-sheet-top}
 [data-icon-playing=true] .mi-sheet-b{animation-name:stock-sheet-middle}
 [data-icon-playing=true] .mi-tile-a,[data-icon-playing=true] .mi-tile-b{stroke-dasharray:1;animation-name:stock-trace}
 [data-icon-playing=true] .mi-door,[data-icon-playing=true] .mi-entry{animation-name:stock-open-door}
 [data-icon-playing=true] .mi-flame{animation-name:stock-flame}
 [data-icon-playing=true] .mi-leaf{animation-name:stock-leaf}
 [data-icon-playing=true] [data-ui-icon=paint-roller] .mi-tool{animation-name:stock-roll}
 [data-icon-playing=true] .mi-paint{animation-name:stock-paint}
 [data-icon-playing=true] [data-ui-icon=hard-hat] .mi-tool{animation-name:stock-helmet}
 [data-icon-playing=true] [data-ui-icon=truck] .mi-tool{animation-name:stock-truck}
 [data-icon-playing=true] .mi-clock{animation-name:stock-clock}
 [data-icon-playing=true] .mi-folder{transform-origin:2px 19px;animation-name:stock-folder}
 [data-icon-playing=true] .mi-join{animation-name:stock-join}
 [data-icon-playing=true] .mi-gear{animation-name:stock-gear}
 [data-icon-playing=true] .mi-meridian{animation-name:stock-globe}
 [data-icon-playing=true] .mi-panel-a,[data-icon-playing=true] .mi-panel-c{animation-name:stock-panel}
 [data-icon-playing=true] .mi-panel-b,[data-icon-playing=true] .mi-panel-d{animation-name:stock-panel-other}
 [data-icon-playing=true] [data-ui-icon=send] .mi-tool{animation-name:stock-send}
 [data-icon-playing=true] .mi-letter{animation-name:stock-letter}
 [data-icon-playing=true] .mi-flag{animation-name:stock-mail-flag}
 [data-icon-playing=true] .mi-flap{transform-origin:12px 7px;animation-name:stock-envelope}
}
@keyframes stock-compass-right{0%,100%{transform:rotate(0)}32%,70%{transform:rotate(-9deg)}}
@keyframes stock-compass-left{0%,100%{transform:rotate(0)}32%,70%{transform:rotate(9deg)}}
@keyframes stock-scribe{0%,20%{stroke-dashoffset:1}78%,100%{stroke-dashoffset:0}}
@keyframes stock-strike{0%,100%{transform:rotate(0)}28%{transform:rotate(-28deg)}58%{transform:rotate(12deg)}74%{transform:rotate(-6deg)}}
@keyframes stock-tighten{0%,100%{transform:rotate(0)}65%{transform:rotate(-28deg)}}
@keyframes stock-fan{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes stock-water{0%,100%{transform:translateY(0);opacity:1}48%{transform:translateY(3px);opacity:1}68%{transform:translateY(4px);opacity:0}69%{transform:translateY(-2px);opacity:0}}
@keyframes stock-trace{0%{stroke-dashoffset:1}80%,100%{stroke-dashoffset:0}}
@keyframes stock-joint{0%,25%{opacity:0}80%,100%{opacity:1}}
@keyframes stock-erect{0%{transform:scaleY(.5)}65%,100%{transform:scaleY(1)}}
@keyframes stock-erect-middle{0%,15%{transform:scaleY(.5)}75%,100%{transform:scaleY(1)}}
@keyframes stock-erect-last{0%,30%{transform:scaleY(.5)}90%,100%{transform:scaleY(1)}}
@keyframes stock-sheet-top{0%,100%{transform:translateY(0)}45%{transform:translateY(-2px)}}
@keyframes stock-sheet-middle{0%,100%{transform:translateY(0)}55%{transform:translateY(-1px)}}
@keyframes stock-open-door{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.3)}}
@keyframes stock-flame{0%,100%{transform:scale(1)}35%{transform:scale(.93,1.08)}70%{transform:scale(1.04,.97)}}
@keyframes stock-leaf{0%,100%{transform:rotate(0)}35%{transform:rotate(5deg)}70%{transform:rotate(-3deg)}}
@keyframes stock-roll{0%,100%{transform:translateY(0)}60%,80%{transform:translateY(4px)}}
@keyframes stock-paint{0%{opacity:0;transform:scaleY(.2)}35%{opacity:.2}65%{opacity:.2;transform:scaleY(2)}100%{opacity:0;transform:scaleY(2)}}
@keyframes stock-helmet{0%,100%{transform:translateY(0)}25%{transform:translateY(-2px)}65%{transform:translateY(1px)}}
@keyframes stock-truck{0%,100%{transform:translateX(0)}30%{transform:translateX(-1px)}70%{transform:translateX(2px)}}
@keyframes stock-clock{0%,100%{transform:rotate(0)}65%{transform:rotate(60deg)}}
@keyframes stock-folder{0%,100%{transform:skewX(0)}50%{transform:skewX(-9deg)}}
@keyframes stock-join{0%,100%{transform:translateX(0)}55%{transform:translateX(-2px)}}
@keyframes stock-gear{0%,100%{transform:rotate(0)}65%{transform:rotate(60deg)}}
@keyframes stock-globe{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
@keyframes stock-panel{0%,100%{transform:translateY(0)}35%{transform:translateY(1px)}}
@keyframes stock-panel-other{0%,100%{transform:translateY(0)}60%{transform:translateY(-1px)}}
@keyframes stock-send{0%,100%{transform:translate(0,0);opacity:1}55%{transform:translate(4px,-4px);opacity:0}56%{transform:translate(-2px,2px);opacity:0}}
@keyframes stock-letter{0%{opacity:0;transform:translateX(-9px)}15%{opacity:1}65%{opacity:1;transform:translateX(4px)}80%,100%{opacity:0;transform:translateX(7px)}}
@keyframes stock-mail-flag{0%,40%,100%{transform:rotate(0)}70%,85%{transform:rotate(-80deg)}}
@keyframes stock-envelope{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.75)}}