/* ============================================================================
   EHR — Unsolicited Lab Results (Redmine #80521)
   Semantic tokens only. No primitive, no Brand-layer, no raw colour.
   Component contracts referenced inline by COMPONENTS.md section.
   ========================================================================== */

/* TODO(tokens): size, breakpoints, motion and z-index are not built —
   DESIGN.md §12.4. Every literal px below is one of those four, or a
   geometry figure quoted from a component recipe. */

/* --- Shell ---------------------------------------------------------------- */
.shell { display: flex; min-block-size: 100dvh; background: var(--color-surface-sunken); }

/* ==========================================================================
   SIDEBAR
   Figma: EHR Portal `Sidebar`, collapsed=False · Type=Default
   (file z4THbf06VIl9UC8G4iJTv8, node 31475:285338). Geometry, order, icons and
   labels are taken from that node; colour is NOT.

   The frame is built on the legacy `Menu / Default` generation (COMPONENTS.md
   §7.4), whose `Darkmode` variant axis is F1 on the Menu page — the most
   consequential architectural defect in the file: a component that cannot
   follow the theme. Its fill is `✅ General/BG Dark` `#201830`, which is off
   the palette entirely — no neutral, no brand step, and not in the §23.2
   raw→token substitution table.

   TODO(tokens): there is no token for "a surface that stays dark while the page
   is light". Rather than hard-code #201830 (non-negotiable #1) or let the rail
   go white in Light (unfaithful), the rail is scoped to the DARK mode of the
   one token set: `color-scheme: dark` makes every light-dark() token inside it
   resolve to its Dark value. One token set, two modes — no fork, no literal,
   and it still follows the brand switch. The exact purple-tinted hue is the
   part that cannot be reproduced; it needs a real token.
   ========================================================================== */
.rail {
  color-scheme: dark;
  inline-size: 264px; flex: none;                 /* Figma: 264 expanded */
  display: flex; flex-direction: column;
  background: var(--color-surface-page);
  color: var(--color-content-secondary);
  position: sticky; inset-block-start: 0; block-size: 100dvh;
}
.rail[data-collapsed='true'] { inline-size: 64px; }   /* Figma: collapsed=True */

/* `Menu / Default` row — min-height 56, gap 24, 16px icon, label Label/MD.
   Padding-inline replaces Figma's two zero-width "Menu / Default / Border"
   slots, which are the leading/trailing indicator rails. */
.rail__row {
  display: flex; align-items: center; gap: var(--space-lg);
  inline-size: 100%; min-block-size: 56px;
  padding-inline: var(--space-lg);
  color: var(--color-content-secondary);
  text-decoration: none;
  position: relative;
}
.rail__row:hover { background: var(--color-soft-neutral-default); color: var(--color-on-soft-neutral); }
.rail__row .icon { flex: none; }
.rail__label { flex: 1 1 auto; min-inline-size: 0; }

/* §7.2 F3: `Menu / Item` signals Selected by label colour ALONE. The Figma row
   even carries the two border slots for an indicator and leaves them empty.
   Selected here is three channels — the leading `indicator/brand` bar (a
   zero-consumer token, root Known gaps), a brand label, and a weight step. */
.rail__row[aria-current='page'] {
  color: var(--color-content-brand);
  font-weight: var(--font-weight-medium);
  background: var(--color-soft-brand-default);
}
.rail__row[aria-current='page']::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 3px; background: var(--color-indicator-brand);
}
.rail__count {
  flex: none; min-inline-size: 20px; padding-inline: var(--space-2xs);
  text-align: center; border-radius: var(--radius-full);
  background: var(--color-solid-danger-default);      /* §7.3 Menu / Item / Tag */
  color: var(--color-on-solid-danger);
}

/* Logo block — Figma: 104 tall, centred, 122.5 x 50 lockup. */
.rail__logo { display: flex; align-items: center; justify-content: center; block-size: 104px; flex: none; }
.rail__logo img { inline-size: 122.5px; block-size: auto; }
.rail[data-collapsed='true'] .rail__logo img { inline-size: 40px; }

.rail__items { flex: 1 1 auto; overflow-y: auto; }
.rail__sub { display: flex; flex-direction: column; }
/* Sub item — Figma `✅ Elements/Menu Sub Item`, 12px. Indented past the icon
   column: padding-inline-start + icon (16) + gap (24). */
.rail__row--sub { min-block-size: 40px; padding-inline-start: calc(var(--space-lg) * 2 + 16px); }

/* Footer — Figma `Menu / Default / Footer`: 90 tall, 24/16 padding, gap 16,
   24px avatar, name 14 white over role 12 marginal, trailing chevron. */
.rail__footer {
  display: flex; align-items: center; gap: var(--space-md);
  block-size: 90px; flex: none;
  padding: var(--space-md) var(--space-lg);
  inline-size: 100%;
  border-block-start: var(--border-width-thin) solid var(--color-border-default);
  text-align: start;
}
.rail__footer:hover { background: var(--color-soft-neutral-default); }
.rail__avatar {
  inline-size: 24px; block-size: 24px; flex: none;
  border-radius: var(--shape-radius-avatar);
  display: grid; place-items: center;
  background: var(--color-solid-brand-default);
  color: var(--color-on-solid-brand);
  overflow: hidden;
}
.rail__who { flex: 1 1 auto; min-inline-size: 0; }
.rail__name { color: var(--color-content-primary); }
.rail__role { color: var(--color-content-secondary); }
.rail[data-collapsed='true'] .rail__label,
.rail[data-collapsed='true'] .rail__count,
.rail[data-collapsed='true'] .rail__who,
.rail[data-collapsed='true'] .rail__chevron,
.rail[data-collapsed='true'] .rail__sub { display: none; }
.rail[data-collapsed='true'] .rail__row,
.rail[data-collapsed='true'] .rail__footer { justify-content: center; padding-inline: 0; }

/* ==========================================================================
   PAGE HEADER
   Figma: EHR Portal `Headers`, type=Dashboard · Filters=on (node 14078:516583).
   White block, pt 32 / pb 16, 16 gap; title container and tabs at 40 inline,
   filter row at 32; tabs 40 tall with a 2px active underline.
   The design's `#4211a0` active colour is the BigHeart seed as a literal
   (non-negotiable #4) — bound here to `indicator/brand` + `content/brand`.
   ========================================================================== */
.page-header {
  background: var(--color-surface-raised);
  display: flex; flex-direction: column; gap: var(--space-md);
  padding-block: var(--space-xl) var(--space-md);
  border-block-end: var(--border-width-thin) solid var(--color-border-default);
}
/* TODO(tokens): 40 and 32 are Figma's `--header-sides` and filter inset; there
   is no layout/gutter scale in the token set (DESIGN.md §12.4). */
.page-header__title { display: flex; align-items: center; gap: var(--space-md); padding-inline: 40px; }
.page-header__title h1 { flex: 1 1 auto; margin: 0; }
.page-header__lead { padding-inline: 40px; margin: 0; color: var(--color-content-secondary); }
.page-header__filters { display: flex; align-items: flex-start; gap: var(--space-xs); padding-inline: 32px; flex-wrap: wrap; }
.page-header__filters .field { inline-size: 281px; }   /* Figma input width */
.page-header__filters .spacer { flex: 1 1 auto; }

/* --- Main ----------------------------------------------------------------- */
/* The header is full-bleed white and the content sits on the sunken page under
   it, so `.main` carries no padding of its own. */
.main { flex: 1 1 auto; min-inline-size: 0; overflow: auto; }
.main__content { padding: var(--space-lg) 32px; }

/* --- Button — §1.1 -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  block-size: 32px; padding-inline: var(--space-md);      /* Size = Default */
  border-radius: var(--shape-radius-button);
  border: var(--border-width-thin) solid transparent;
  white-space: nowrap;
}
.btn--lg { block-size: 40px; gap: var(--space-xs); }
.btn--sm { block-size: 24px; padding-inline: var(--space-xs); }
.btn--primary   { background: var(--color-solid-brand-default); border-color: var(--color-border-brand-default); color: var(--color-on-solid-brand); }
.btn--primary:hover  { background: var(--color-solid-brand-hover); }
.btn--primary:active { background: var(--color-solid-brand-pressed); }  /* pressed tokens exist, unconsumed */
.btn--secondary { background: var(--color-soft-brand-default); color: var(--color-on-soft-brand); }
.btn--secondary:hover  { background: var(--color-soft-brand-hover); }
.btn--secondary:active { background: var(--color-soft-brand-pressed); }
.btn--tertiary  { border-color: var(--color-border-default); color: var(--color-content-primary); }
.btn--tertiary:hover  { border-color: var(--color-border-strong); background: var(--color-soft-neutral-default); color: var(--color-on-soft-neutral); }
.btn--tertiary:active { background: var(--color-soft-neutral-pressed); }
.btn--text      { color: var(--color-content-primary); }
.btn--text:hover  { background: var(--color-soft-neutral-default); color: var(--color-on-soft-neutral); }
.btn--danger    { border-color: var(--color-border-danger-default); color: var(--color-content-danger); }
.btn--danger:hover { border-color: var(--color-border-danger-hover); background: var(--color-soft-danger-default); color: var(--color-on-soft-danger); }
.btn--link      { color: var(--color-content-brand); padding-inline: 0; block-size: auto; }
.btn[disabled]  { background: var(--color-solid-disabled); border-color: transparent; color: var(--color-content-disabled); cursor: not-allowed; }
.btn--icon      { inline-size: 32px; padding-inline: 0; }

/* --- Tabs — §9.1 Tab / Default, geometry from `Headers / Tabs` ------------
   Figma: strip inset 40, gap 16, item 40 tall with 16 padding, label 16/24
   (`Body/LG Regular`, matching §9.1), 2px active underline. */
.tabs {
  display: flex; gap: var(--space-md);
  padding-inline: 40px;
  border-block-end: var(--border-width-thin) solid var(--color-border-default);
}
.tab {
  display: flex; align-items: center; gap: var(--space-2xs);
  block-size: 40px; padding-inline: var(--space-md);
  font-size: var(--font-body-lg-size); line-height: var(--font-body-lg-line-height);
  color: var(--color-content-primary);
  border-block-end: var(--border-width-thick) solid transparent;
  margin-block-end: calc(-1 * var(--border-width-thin));
}
.tab:hover { background: var(--color-soft-neutral-default); color: var(--color-on-soft-neutral); }
/* §9 F1: the recipe uses border/brand/default; indicator/brand is the token
   described as "underline on an active tab" and has zero consumers. Used here. */
.tab[aria-selected='true'] { color: var(--color-content-brand); border-block-end-color: var(--color-indicator-brand); font-weight: var(--font-weight-medium); }
.tab__count { color: var(--color-content-secondary); }
.tab[aria-selected='true'] .tab__count { color: var(--color-content-brand); }

/* --- Input — §2.1 Input / Default / Base ---------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.field__label { color: var(--color-content-secondary); }       /* §2.3 Input / Label */
.field__req { color: var(--color-content-danger); }
.input {
  display: flex; align-items: center; gap: var(--space-xs);
  block-size: 40px; padding-inline: var(--space-xs);
  background: var(--color-surface-raised);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--shape-radius-input);
  color: var(--color-content-primary);
}
.input:hover { border-color: var(--color-border-brand-hover); }
.input:focus-within { border-color: var(--color-border-focus); border-width: var(--shape-focus-width); }
.input__icon { color: var(--color-content-secondary); }
.input input, .input textarea {
  /* base.css normalises `input` but not `textarea`, which otherwise falls back
     to the UA monospace default. */
  font: inherit; letter-spacing: inherit;
  flex: 1 1 auto; min-inline-size: 0; border: 0; outline: none; background: none;
  color: var(--color-content-primary);
}
.input input::placeholder, .input textarea::placeholder { color: var(--color-content-placeholder); }
.input--area { block-size: auto; align-items: flex-start; padding: var(--space-xs); }
.input--area textarea { resize: vertical; min-block-size: 88px; }
.field__caption { color: var(--color-content-secondary); }
/* §2 F5 (EHR): on an invalid field the DS drops the focus ring for the danger
   border, so a keyboard user loses focus on exactly the field they must fix.
   Clinical data entry — so error keeps the danger border AND focus is shown
   with the ring from DESIGN.md §7. Two channels, neither cancels the other. */
.field--error .input { border-color: var(--color-border-danger-default); }
.field--error .input:focus-within {
  border-color: var(--color-border-danger-default);
  outline: var(--shape-focus-width) solid var(--color-border-focus);
  outline-offset: var(--shape-focus-offset);
}
.field--error .field__caption { color: var(--color-content-danger); }

/* --- Card / table shell — §5.5 -------------------------------------------- */
.card {
  background: var(--color-surface-raised);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--shape-radius-card);
  overflow: hidden;
}
.table-head {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md);
  border-block-end: var(--border-width-thin) solid var(--color-border-default);
}
.table-head__search { flex: 1 1 360px; max-inline-size: 420px; }
.table-head__spacer { flex: 1 1 auto; }

.table { inline-size: 100%; border-collapse: collapse; }
/* §5.2 Table / Row / Header — surface/sunken, Body/MD Medium, content/primary */
.table thead th {
  position: sticky; inset-block-start: 0; z-index: 1;   /* TODO(tokens): z-index */
  text-align: start;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-sunken);
  color: var(--color-content-primary);
  font-weight: var(--font-weight-medium);
  border-block-end: var(--border-width-thin) solid var(--color-border-default);
  white-space: nowrap;
}
/* §5.1 Table / Row / Cell — state lives on the cell; §5 F2 notes the Figma
   structure inverts the natural code structure, so state is set on the row and
   the cells inherit the fill. */
.table tbody td {
  padding: var(--space-md);
  border-block-end: var(--border-width-thin) solid var(--color-border-default);
  background: var(--color-surface-raised);
  vertical-align: top;
}
.table tbody tr:hover td { background: var(--color-soft-neutral-default); }
.table tbody tr[aria-selected='true'] td { background: var(--color-soft-brand-default); }
.table tbody tr[aria-selected='true']:hover td { background: var(--color-soft-brand-hover); }
/* §5 F6: no focus state on any cell or row. Keyboard grid navigation needs one. */
.table tbody tr:focus-visible { outline: var(--shape-focus-width) solid var(--color-border-focus); outline-offset: calc(-1 * var(--shape-focus-width)); }
.table tbody tr { cursor: pointer; }
.cell__primary { color: var(--color-content-primary); }
.cell__secondary { color: var(--color-content-secondary); margin-block-start: var(--space-3xs); }
.cell--num { font-variant-numeric: tabular-nums; }
.cell--actions { text-align: end; white-space: nowrap; }

/* --- Tag / status — §12.1 shape, §14.1 pairing ---------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  block-size: 24px; padding-inline: var(--space-xs);
  border-radius: var(--shape-radius-chip);
  border: var(--border-width-thin) solid transparent;
  white-space: nowrap;
}
.tag--neutral { background: var(--color-soft-neutral-default); border-color: var(--color-border-strong); color: var(--color-content-primary); }
.tag--warning { background: var(--color-soft-warning-default); border-color: var(--color-border-warning-default); color: var(--color-on-soft-warning); }
.tag--success { background: var(--color-soft-success-default); border-color: var(--color-border-success-default); color: var(--color-on-soft-success); }
.tag--danger  { background: var(--color-soft-danger-default);  border-color: var(--color-border-danger-default);  color: var(--color-on-soft-danger); }
.tag--info    { background: var(--color-soft-info-default);    border-color: var(--color-border-info-default);    color: var(--color-on-soft-info); }
.tag--brand   { background: var(--color-soft-brand-default);   border-color: var(--color-border-brand-default);   color: var(--color-on-soft-brand); }

/* --- Confidence meter ----------------------------------------------------- */
.conf { display: flex; align-items: center; gap: var(--space-xs); }
.conf__bar { inline-size: 64px; block-size: 6px; border-radius: var(--radius-full); background: var(--color-soft-neutral-strong); overflow: hidden; }
.conf__fill { block-size: 100%; border-radius: var(--radius-full); }
.conf--high .conf__fill { background: var(--color-solid-success-default); }
.conf--med  .conf__fill { background: var(--color-solid-warning-default); }
.conf--low  .conf__fill { background: var(--color-solid-neutral-default); }
.conf__value { font-variant-numeric: tabular-nums; color: var(--color-content-secondary); }

/* --- Empty state ---------------------------------------------------------- */
.empty { padding: var(--space-4xl) var(--space-lg); text-align: center; color: var(--color-content-secondary); }
.empty .icon { margin: 0 auto var(--space-sm); color: var(--color-content-placeholder); }

/* ==========================================================================
   DETAIL — Modal / Sidebar, §4.2. Drawer, 800 wide, so the list stays visible.
   §4 F1: the component applies neither scrim nor elevation. Both added here.
   ========================================================================== */
.scrim {
  position: fixed; inset: 0; z-index: 40;       /* TODO(tokens): z-index */
  background: var(--color-surface-scrim);
}
.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 41;
  inline-size: min(1024px, 100vw);
  display: flex; flex-direction: column;
  background: var(--color-surface-raised);
  box-shadow: var(--elevation-modal);
  border-start-start-radius: var(--shape-radius-modal);
  border-end-start-radius: var(--shape-radius-modal);   /* §4.2: inner corners only */
}
.drawer__head {
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-lg);
  border-block-end: var(--border-width-thin) solid var(--color-border-default);
}
.drawer__title { flex: 1 1 auto; }
.drawer__sub { color: var(--color-content-secondary); margin-block-start: var(--space-3xs); }
.drawer__body { flex: 1 1 auto; min-block-size: 0; display: grid; grid-template-columns: 1fr 420px; }
.drawer__foot {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-lg);
  border-block-start: var(--border-width-thin) solid var(--color-border-default);
}
.drawer__foot .spacer { flex: 1 1 auto; }

/* Preview pane — acceptance criterion "preview result content before assignment" */
.preview { display: flex; flex-direction: column; min-inline-size: 0; border-inline-end: var(--border-width-thin) solid var(--color-border-default); }
.preview__bar { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-block-end: var(--border-width-thin) solid var(--color-border-default); }
.preview__bar .spacer { flex: 1 1 auto; }
.seg { display: inline-flex; border: var(--border-width-thin) solid var(--color-border-default); border-radius: var(--shape-radius-button); overflow: hidden; }
.seg button { padding: var(--space-2xs) var(--space-sm); color: var(--color-content-primary); }
.seg button + button { border-inline-start: var(--border-width-thin) solid var(--color-border-default); }
.seg button[aria-pressed='true'] { background: var(--color-soft-brand-default); color: var(--color-on-soft-brand); font-weight: var(--font-weight-medium); }
.preview__doc { flex: 1 1 auto; overflow: auto; padding: var(--space-lg); background: var(--color-surface-sunken); }
.doc {
  background: var(--color-surface-raised);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--shape-radius-card);
  padding: var(--space-lg);
  box-shadow: var(--elevation-raised);
}
.doc__head { display: flex; justify-content: space-between; gap: var(--space-md); padding-block-end: var(--space-sm); border-block-end: var(--border-width-thin) solid var(--color-border-default); }
.doc dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3xs) var(--space-md); margin: var(--space-md) 0; }
.doc dt { color: var(--color-content-secondary); }
.doc dd { margin: 0; color: var(--color-content-primary); }
.doc table { inline-size: 100%; border-collapse: collapse; margin-block-start: var(--space-md); }
.doc th, .doc td { text-align: start; padding: var(--space-2xs) var(--space-xs); border-block-end: var(--border-width-thin) solid var(--color-border-default); }
.doc th { color: var(--color-content-secondary); font-weight: var(--font-weight-medium); }
/* Out-of-range is carried by a tag, not by row colour alone. */
.doc__raw { white-space: pre-wrap; font-family: ui-monospace, monospace; color: var(--color-content-primary); }

/* Assign pane */
.assign { display: flex; flex-direction: column; min-inline-size: 0; overflow: auto; }
.assign__section { padding: var(--space-md) var(--space-lg); border-block-end: var(--border-width-thin) solid var(--color-border-default); }
.assign__section h3 { margin: 0 0 var(--space-sm); }
.assign__hint { color: var(--color-content-secondary); margin: 0 0 var(--space-sm); }

.lab-data dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3xs) var(--space-md); margin: 0; }
.lab-data dt { color: var(--color-content-secondary); }
.lab-data dd { margin: 0; }

/* Candidate — the selection pattern from §5.1 / §6.2: tint + border + a check
   glyph, so selection never rides on colour alone. */
.cand {
  inline-size: 100%; text-align: start;
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding: var(--space-sm);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--shape-radius-card);
  background: var(--color-surface-raised);
  margin-block-end: var(--space-xs);
}
.cand:hover { background: var(--color-soft-neutral-default); }
.cand[aria-pressed='true'] {
  background: var(--color-soft-brand-default);
  border-color: var(--color-border-brand-default);
  border-width: var(--border-width-thick);
}
.cand__body { flex: 1 1 auto; min-inline-size: 0; }
.cand__name { color: var(--color-content-primary); font-weight: var(--font-weight-medium); }
.cand__meta { color: var(--color-content-secondary); margin-block-start: var(--space-3xs); }
.cand__note { color: var(--color-content-secondary); margin-block-start: var(--space-2xs); display: flex; gap: var(--space-2xs); }
.cand__check { color: var(--color-content-brand); visibility: hidden; margin-block-start: var(--space-3xs); }
.cand[aria-pressed='true'] .cand__check { visibility: visible; }
.cand__fields { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin-block-start: var(--space-2xs); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  padding: 0 var(--space-2xs); border-radius: var(--shape-radius-chip);
  border: var(--border-width-thin) solid var(--color-border-default);
  color: var(--color-content-secondary);
}
.chip--match { background: var(--color-soft-success-default); border-color: var(--color-border-success-default); color: var(--color-on-soft-success); }
.chip--miss  { background: var(--color-soft-danger-default);  border-color: var(--color-border-danger-default);  color: var(--color-on-soft-danger); }

.results { margin: 0; padding: 0; list-style: none; }

/* Order suggestion — extension (e) */
.order-card {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding: var(--space-sm);
  border: var(--border-width-thin) solid var(--color-border-info-default);
  background: var(--color-soft-info-default);
  color: var(--color-on-soft-info);
  border-radius: var(--shape-radius-card);
}
.order-card__body { flex: 1 1 auto; }

/* Audit trail */
.audit { margin: 0; padding: 0; list-style: none; }
.audit li { display: flex; gap: var(--space-sm); padding-block: var(--space-xs); border-block-end: var(--border-width-thin) solid var(--color-border-default); }
.audit li:last-child { border-block-end: 0; }
.audit__when { color: var(--color-content-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit__what { color: var(--color-content-primary); }

/* --- Modal — §4.1 / §4.3 -------------------------------------------------- */
.modal {
  position: fixed; z-index: 51; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: min(640px, calc(100vw - var(--space-xl)));
  background: var(--color-surface-raised);
  border-radius: var(--shape-radius-modal);
  box-shadow: var(--elevation-modal);          /* §4 F1 — not applied in Figma */
}
.modal__head { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); }
.modal__head .icon { margin-block-start: var(--space-3xs); }
.modal__body { padding: 0 var(--space-lg) var(--space-lg); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--space-xs); padding: var(--space-lg); padding-block-start: 0; }
.modal__title { margin: 0; }
.modal__lead { margin: var(--space-2xs) 0 0; color: var(--color-content-primary); }
.modal--danger .modal__head .icon { color: var(--color-content-danger); }
.modal--warning .modal__head .icon { color: var(--color-content-warning); }
.modal--brand .modal__head .icon { color: var(--color-content-brand); }
.move {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-sm); align-items: center;
  padding: var(--space-sm); margin-block: var(--space-md);
  background: var(--color-surface-sunken); border-radius: var(--shape-radius-card);
}
.move__box { min-inline-size: 0; }
.move__label { color: var(--color-content-secondary); }
.move__value { color: var(--color-content-primary); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.move__arrow { color: var(--color-content-secondary); }

/* --- Toast — §10.1 -------------------------------------------------------- */
.toasts { position: fixed; z-index: 60; inset-block-end: var(--space-lg); inset-inline-start: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--space-xs); }
.toast {
  display: flex; align-items: flex-start; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--shape-radius-card);
  box-shadow: var(--elevation-overlay);
  background: var(--color-surface-raised);
  border: var(--border-width-thin) solid var(--color-border-default);
  max-inline-size: 560px;
}
.toast--success { background: var(--color-soft-success-default); border-color: var(--color-border-success-default); color: var(--color-on-soft-success); }
.toast--danger  { background: var(--color-soft-danger-default);  border-color: var(--color-border-danger-default);  color: var(--color-on-soft-danger); }
.toast--info    { background: var(--color-soft-info-default);    border-color: var(--color-border-info-default);    color: var(--color-on-soft-info); }
.toast__body { flex: 1 1 auto; }
.toast__action { text-decoration: underline; white-space: nowrap; }

/* --- Utilities ------------------------------------------------------------ */
.row { display: flex; align-items: center; gap: var(--space-xs); }
.row--wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--space-xs); }
.muted { color: var(--color-content-secondary); }
.danger { color: var(--color-content-danger); }
.hidden { display: none !important; }

/* Below 1280 the drawer stops being a two-pane layout — TODO(tokens):
   breakpoints are not built (DESIGN.md §12.4), so this literal is provisional. */
@media (max-width: 1279px) {
  .drawer__body { grid-template-columns: 1fr; overflow: auto; }
  .preview { border-inline-end: 0; border-block-end: var(--border-width-thin) solid var(--color-border-default); }
  .rail { display: none; }
}