/* CHANGE LOG
 * 1 | maintainer@emeraldcoastsystemsgroup.com | The kernel screen kit (docs/ux/screen-standard.md): every kernel screen paints with the portal theme tokens, raises its cards, tiles and dialogs as glass over the theme's accent glow, lines its forms up on one grid, and shows records as sortable tables that stack on a phone. Low-specificity (:where) rules, so a screen's own stylesheet still wins on anything it names.
 * 2 | maintainer@emeraldcoastsystemsgroup.com | The design standard's crisp look (docs/ux/design-standard.md §2, §4 and §8 step 4; Roger approved this core change on 2026-11-06: "crisp ... not random blurred edge buttons"). The kit declares the standard's --ds-* tokens with the same values as platform/src/shared/ui/css/design-tokens.css, so kernel screens and applications match whether or not that platform file has shipped, and the old card, glass and muted tokens resolve to them on body. Cards, tiles and panels are opaque with a 1px edge and no shadow; dialogs are opaque floats on a plain scrim; no backdrop blur and no accent wash behind the page (kernel screens have no bar of their own, so the kit paints no glass at all). Buttons are solid: a surface fill with a 3:1 control line, the primary the flat accent, hover a fill change with no lift, disabled solid in the disabled ink instead of faded. One 2px focus ring, the radius scale (10 controls, 14 cards, 20 dialogs), the type scale (12/14/16 body, 15 on a desktop with a fine pointer, 18, 24, 32), the 4/8 spacing and 44px touch targets; uppercase labels only in table headers. The --ks-* names stay as aliases for the screens that read them.
 * 3 | maintainer@emeraldcoastsystemsgroup.com | The primary's label keeps white ink when the theme names no --text-on-accent (review of PR #184): the package-bundled create and little-monsters skins carry none, so under them --ds-on-accent was unset and the label inherited the dark body ink on the accent (2.86:1 and 2.09:1, measured in a framed kit screen). The primary's color, its hover edge and the --ks-on-accent alias write var(--ds-on-accent, #fff), the old kit's fallback and the one the platform's own primaries use; the --ds-* token block is unchanged and still equals design-tokens.css.
 */

/* ── Design standard tokens (docs/ux/design-standard.md §2.11; the same values as platform/src/shared/ui/css/design-tokens.css) ── */
:where(:root, [data-theme]) {
  --ds-page:          var(--bg-primary);
  --ds-surface:       var(--bg-primary);
  --ds-surface-2:     color-mix(in srgb, var(--text-primary) 6%,  var(--ds-surface));
  --ds-surface-3:     color-mix(in srgb, var(--text-primary) 12%, var(--ds-surface));
  --ds-panel-glass:   color-mix(in srgb, var(--ds-surface) 72%, transparent);
  --ds-panel-filter:  blur(20px) saturate(140%);
  --ds-bar:           color-mix(in srgb, var(--ds-page) 86%, transparent);
  --ds-bar-filter:    blur(20px) saturate(160%);
  --ds-scrim:         rgb(0 0 0 / 0.40);
  --ds-hairline:      color-mix(in srgb, var(--text-primary) 14%, var(--ds-page));
  --ds-edge:          color-mix(in srgb, var(--text-primary) 20%, var(--ds-surface));
  --ds-line-control:  light-dark(color-mix(in srgb, var(--text-primary) 56%, var(--ds-page)),
                                 color-mix(in srgb, var(--text-primary) 44%, var(--ds-page)));
  --ds-ink:           var(--text-primary);
  --ds-ink-2:         color-mix(in srgb, var(--text-primary) 78%, var(--ds-page));
  --ds-ink-disabled:  color-mix(in srgb, var(--text-primary) 45%, var(--ds-page));
  --ds-accent:        var(--accent-primary);
  --ds-accent-ink:    color-mix(in srgb, var(--accent-primary) 66%, var(--text-primary));
  --ds-on-accent:     var(--text-on-accent);
  --ds-focus:         var(--accent-primary);
  --ds-ok: var(--status-success); --ds-warn: var(--status-warning); --ds-bad: var(--status-error); --ds-info: var(--status-active);
  --ds-elev-base: none;
  --ds-elev-bar: 0 1px 0 var(--ds-hairline);
  --ds-elev-float: 0 2px 6px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.16);
  --ds-radius-s: 6px; --ds-radius-m: 10px; --ds-radius-l: 14px; --ds-radius-xl: 20px; --ds-radius-full: 999px;
  --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px;
  --ds-gutter: 16px; --ds-target: 44px; --ds-control-h: 44px; --ds-bar-h: 56px; --ds-row-h: 48px; --ds-concierge: 48px;
  --ds-font: system-ui, sans-serif; --ds-mono: ui-monospace, monospace;
  --ds-text-meta:    400 12px/16px var(--ds-font);
  --ds-text-help:    400 14px/20px var(--ds-font);
  --ds-text-body:    400 16px/24px var(--ds-font);
  --ds-text-heading: 600 18px/24px var(--ds-font);
  --ds-text-title:   700 24px/32px var(--ds-font);
  --ds-text-hero:    700 32px/40px var(--ds-font);
  --ds-dur-fast: 120ms; --ds-dur: 200ms; --ds-dur-sheet: 280ms; --ds-ease: cubic-bezier(0.2, 0, 0, 1);
}
@supports (color: rgb(from red r g b / 1)) {
  :where(:root, [data-theme]) { --ds-surface: rgb(from var(--bg-card, var(--bg-primary)) r g b / 1); }
}
@media (min-width: 1040px) and (pointer: fine) {
  :where(:root, [data-theme]) { --ds-gutter: 24px; --ds-control-h: 36px; --ds-bar-h: 48px; --ds-text-body: 400 15px/22px var(--ds-font); }
}
@media (prefers-reduced-motion: reduce) { :where(:root, [data-theme]) { --ds-dur-fast: 0ms; --ds-dur: 0ms; --ds-dur-sheet: 0ms; } }
@media (prefers-reduced-transparency: reduce) {
  :where(:root, [data-theme]) { --ds-bar: var(--ds-page); --ds-bar-filter: none; --ds-panel-glass: var(--ds-surface); --ds-panel-filter: none; }
}
/* The old tokens a screen's own stylesheet paints with resolve to the standard (D1: opaque), as on every themed page. */
:where(body) {
  --bg-card: var(--ds-surface);
  --bg-card-hover: var(--ds-surface-3);
  --glass-bg: var(--ds-bar); --glass-bg-heavy: var(--ds-bar);
  --glass-border: var(--ds-edge);
  --card-shadow: none; --accent-glow: transparent;
  --text-muted: var(--ds-ink-2); --text-secondary: var(--ds-ink-2);
}

/* ── Kit names, kept for the screens that read them (§2.12) ──────────────── */
:root {
  --ks-radius: var(--ds-radius-l);
  --ks-radius-sm: var(--ds-radius-m);
  --ks-gap: var(--ds-space-4);
  --ks-gutter: var(--ds-gutter);
  --ks-control-h: var(--ds-control-h);
  --ks-font: var(--ds-font);
  --ks-mono: var(--ds-mono);
  --ks-line: var(--ds-edge);
  --ks-line-strong: var(--ds-line-control);
  --ks-card: var(--ds-surface);
  --ks-card-hover: var(--ds-surface-3);
  --ks-accent: var(--ds-accent);
  --ks-accent-ink: var(--ds-accent-ink);
  --ks-on-accent: var(--ds-on-accent, #fff);
  --ks-muted: var(--ds-ink-2);
  --ks-soft: var(--ds-ink-2);
  --ks-ok: var(--ds-ok);
  --ks-warn: var(--ds-warn);
  --ks-bad: var(--ds-bad);
  --ks-info: var(--ds-info);
}

/* ── Page: the opaque base, no wash ──────────────────────────────────────── */
:where(html) { color-scheme: dark light; }
:where(body) {
  margin: 0;
  min-height: 100dvh;
  font: var(--ds-text-body);
  color: var(--ds-ink);
  background: var(--ds-page);
  -webkit-font-smoothing: antialiased;
}
:where(.ks-page, .wrap) {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ds-gutter) var(--ds-gutter) var(--ds-space-7);
  box-sizing: border-box;
}
:where(.ks-page, .wrap) *, :where(.ks-page, .wrap) *::before, :where(.ks-page, .wrap) *::after { box-sizing: border-box; }
:where(a) { color: var(--ds-accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:where(code, pre, .mono) { font-family: var(--ds-mono); font-size: 14px; }
:where(code) { word-break: break-all; }
:where(:focus-visible) { outline: 2px solid var(--ds-focus); outline-offset: 2px; }

/* ── Head: breadcrumb · title · lede · actions ───────────────────────────── */
:where(.ks-head, header.wrap-head) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
  margin: 0 0 var(--ds-space-5);
}
:where(.ks-head) > :first-child { min-width: 0; flex: 1 1 360px; }
:where(.ks-kicker) { font: var(--ds-text-meta); font-weight: 600; color: var(--ds-ink-2); margin: 0 0 var(--ds-space-1); }
:where(.ks-crumbs) { font: var(--ds-text-help); color: var(--ds-ink-2); margin: 0 0 var(--ds-space-1); }
:where(.ks-crumbs a) { color: var(--ds-accent-ink); display: inline-flex; align-items: center; min-height: var(--ds-control-h); }
:where(.ks-page h1, .wrap h1) { margin: 0; font: var(--ds-text-title); }
:where(.ks-page h2, .wrap h2) { margin: 0; font: var(--ds-text-heading); }
:where(.ks-page h3, .wrap h3) { margin: 0; font: var(--ds-text-body); font-weight: 600; }
:where(.ks-lede) { margin: var(--ds-space-2) 0 0; color: var(--ds-ink-2); max-width: 72ch; }
:where(.ks-actions) { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; align-items: center; justify-content: flex-end; }
:where(.muted, .ks-muted, .ks-help) { color: var(--ds-ink-2); }
:where(.ks-help) { font: var(--ds-text-help); margin: var(--ds-space-1) 0 0; }
:where(.ks-error, .err) { color: var(--ds-bad); }
:where(.ks-ok) { color: var(--ds-ok); }
:where(.ks-warn) { color: var(--ds-warn); }
:where(.ks-status) { font: var(--ds-text-help); color: var(--ds-ink-2); margin: var(--ds-space-2) 0 var(--ds-space-4); }

/* ── Panels: opaque cards and tiles (D1) ─────────────────────────────────── */
:where(.ks-card, .card, .content-section, .ks-tile, .tile, .stat-card, .hero) {
  background: var(--ds-surface);
  border: 1px solid var(--ds-edge);
  border-radius: var(--ds-radius-l);
  box-shadow: none;
  color: var(--ds-ink);
}
:where(.ks-card, .card, .content-section) { padding: var(--ds-space-5); margin: 0 0 var(--ds-space-4); }
:where(.ks-card-head) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--ds-space-4);
  padding: 0 0 var(--ds-space-3);
  border-bottom: 1px solid var(--ds-edge);
}
:where(.ks-card-head) > :first-child { min-width: 0; }
:where(.ks-card > :last-child, .card > :last-child) { margin-bottom: 0; }

/* ── Stat tiles ──────────────────────────────────────────────────────────── */
:where(.ks-tiles, .tiles) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--ds-space-4);
  margin: 0 0 var(--ds-space-4);
}
:where(.ks-tile, .tile, .stat-card) { padding: var(--ds-space-4) var(--ds-space-5); display: grid; gap: var(--ds-space-1); min-width: 0; }
:where(.ks-tile > .muted:first-child, .tile > .muted:first-child, .ks-tile-label, .stat-label) { font: var(--ds-text-help); color: var(--ds-ink-2); }
:where(.ks-tile > b, .tile > b, .ks-tile-value, .stat-value) {
  font: var(--ds-text-hero);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.ks-tile > .muted:last-child, .tile > .muted:last-child, .ks-tile-hint, .stat-sub) { font: var(--ds-text-meta); color: var(--ds-ink-2); }
:where(.ks-tile.tone-ok b, .stat-card.tone-ok .stat-value) { color: var(--ds-ok); }
:where(.ks-tile.tone-warn b, .stat-card.tone-warn .stat-value) { color: var(--ds-warn); }
:where(.ks-tile.tone-bad b, .stat-card.tone-bad .stat-value) { color: var(--ds-bad); }
:where(.ks-tile.tone-info b, .stat-card.tone-info .stat-value) { color: var(--ds-info); }

/* ── Controls: solid, a 3:1 line or fill, no lift, no glow (§2.2, §4.1) ─── */
:where(.ks-page, .wrap) :where(button, .ks-btn, input, select, textarea) {
  font: var(--ds-text-body);
  color: var(--ds-ink);
  min-height: var(--ds-control-h);
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-line-control);
  border-radius: var(--ds-radius-m);
  background: var(--ds-surface);
  box-shadow: none;
  box-sizing: border-box;
}
:where(.ks-page, .wrap) :where(input, select, textarea) { width: 100%; }
:where(.ks-page, .wrap) :where(input[type="checkbox"], input[type="radio"]) { width: auto; min-height: 0; padding: 0; accent-color: var(--ds-accent); }
:where(.ks-page, .wrap) :where(textarea) { min-height: 96px; padding: var(--ds-space-2) var(--ds-space-3); resize: vertical; }
:where(.ks-page, .wrap) :where(input::placeholder, textarea::placeholder) { color: var(--ds-ink-2); }
:where(.ks-page, .wrap) :where(input:disabled, select:disabled, textarea:disabled) { background: var(--ds-surface-2); color: var(--ds-ink-disabled); border-color: var(--ds-hairline); }
:where(.ks-page, .wrap) :where(button, .ks-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: 0 var(--ds-space-4);
  cursor: pointer;
  font-weight: 600;
  width: auto;
  text-decoration: none;
  background: var(--ds-surface-2);
  transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
  white-space: nowrap;
}
:where(.ks-page, .wrap) :where(button:hover:not(:disabled), .ks-btn:hover, button:active:not(:disabled), .ks-btn:active) { background: var(--ds-surface-3); }
:where(.ks-page, .wrap) :where(button.primary, .primary-btn, .ks-btn-primary, button[type="submit"].primary) {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--ds-on-accent, #fff);
}
:where(.ks-page, .wrap) :where(button.primary:hover:not(:disabled), .primary-btn:hover:not(:disabled), .ks-btn-primary:hover) { background: var(--ds-accent); box-shadow: inset 0 0 0 1px var(--ds-on-accent, #fff); }
:where(.ks-page, .wrap) :where(.danger-btn, .ks-btn-danger) { background: var(--ds-surface-2); border-color: var(--ds-bad); color: var(--ds-bad); }
:where(.ks-page, .wrap) :where(.ks-btn-sm, button.small) { padding: 0 var(--ds-space-3); }
:where(.ks-page, .wrap) :where(.ks-link-btn) { background: transparent; border-color: transparent; color: var(--ds-accent-ink); }
/* Disabled is solid: the disabled ink on the secondary fill, never faded, and a disabled primary loses its accent (§4.1). */
:where(.ks-page, .wrap) :where(button:disabled, .ks-btn[aria-disabled="true"]) { background: var(--ds-surface-2); color: var(--ds-ink-disabled); border-color: var(--ds-hairline); box-shadow: none; cursor: default; }
@media (min-width: 1040px) and (pointer: fine) {
  :where(.ks-page, .wrap) :where(button, .ks-btn) { padding: 0 var(--ds-space-3); }
}

/* ── Forms on one grid ───────────────────────────────────────────────────── */
:where(.ks-form) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ds-space-3) var(--ds-space-4);
  align-items: end;
  margin: 0;
}
:where(.ks-field) { display: grid; gap: var(--ds-space-2); min-width: 0; }
:where(.ks-field > label, .ks-label) { font: var(--ds-text-help); font-weight: 600; color: var(--ds-ink); }
:where(.ks-field.is-wide) { grid-column: 1 / -1; }
:where(.ks-form .ks-actions) { align-self: end; }
:where(.ks-check) { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h); }
:where(.ks-toolbar) { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; align-items: center; margin: 0 0 var(--ds-space-3); }
:where(.ks-toolbar > .grow) { flex: 1 1 240px; }
:where(.ks-toolbar) :where(input, select) { width: auto; }
:where(.ks-toolbar) :where(input[type="search"], input[type="text"], .grow) { flex: 1 1 16rem; min-width: 0; }
:where(.ks-toolbar label) { display: inline-flex; align-items: center; gap: var(--ds-space-2); }
[hidden] { display: none !important; }

/* ── Pills and badges: opaque, status ink kept readable ──────────────────── */
:where(.ks-pill, .pill, .badge) {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  font: var(--ds-text-meta);
  font-weight: 600;
  padding: var(--ds-space-1) var(--ds-space-2);
  border-radius: var(--ds-radius-full);
  border: 1px solid var(--ds-edge);
  background: var(--ds-surface-2);
  color: var(--ds-ink-2);
  white-space: nowrap;
}
:where(.ks-pill.tone-ok, .badge-success, .pill.ok) { --ks-tone: var(--ds-ok); }
:where(.ks-pill.tone-warn, .badge-warning, .pill.warn) { --ks-tone: var(--ds-warn); }
:where(.ks-pill.tone-bad, .badge-danger, .pill.bad) { --ks-tone: var(--ds-bad); }
:where(.ks-pill.tone-info, .badge-info) { --ks-tone: var(--ds-info); }
:where(.ks-pill.tone-accent) { --ks-tone: var(--ds-accent); }
:where(.ks-pill.tone-ok, .badge-success, .pill.ok, .ks-pill.tone-warn, .badge-warning, .pill.warn, .ks-pill.tone-bad, .badge-danger, .pill.bad, .ks-pill.tone-info, .badge-info, .ks-pill.tone-accent) {
  color: color-mix(in srgb, var(--ks-tone) 55%, var(--ds-ink));
  border-color: color-mix(in srgb, var(--ks-tone) 55%, var(--ds-surface));
  background: color-mix(in srgb, var(--ks-tone) 12%, var(--ds-surface));
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
:where(.table-scroll, .scroll, .ks-table-wrap) {
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--ds-edge);
  border-radius: var(--ds-radius-m);
  background: var(--ds-surface);
}
:where(.table-scroll table, .scroll table, .ks-table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: var(--ds-text-help);
}
:where(.table-scroll th, .scroll th, .ks-table th) {
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--ds-control-h);
  text-align: left;
  font: var(--ds-text-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-2);
  padding: 0 var(--ds-space-3);
  background: var(--ds-surface-2);
  border-bottom: 1px solid var(--ds-edge);
  white-space: nowrap;
}
:where(.table-scroll td, .scroll td, .ks-table td) {
  padding: var(--ds-space-3);
  border-bottom: 1px solid var(--ds-edge);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
}
:where(.table-scroll td a, .scroll td a, .ks-table td a, .table-scroll td button, .scroll td button, .ks-table td button) { white-space: nowrap; }
:where(.table-scroll tbody tr:last-child td, .scroll tbody tr:last-child td, .ks-table tbody tr:last-child td) { border-bottom: 0; }
:where(.table-scroll tbody tr:hover td, .scroll tbody tr:hover td, .ks-table tbody tr:hover td) { background: var(--ds-surface-3); }
:where(.ks-num) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(th.ks-num .ks-sort) { justify-content: flex-end; }
:where(.ks-empty-row td) { color: var(--ds-ink-2); font-style: italic; text-align: center; padding: var(--ds-space-4) var(--ds-space-3); }
:where(.ks-empty, .empty) {
  padding: var(--ds-space-4);
  text-align: center;
  color: var(--ds-ink-2);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-edge);
  border-radius: var(--ds-radius-m);
}

/* Sort controls written by /ui/kernel/table.js: a text button the height of a control, so it is a 44px target on touch */
:where(.table-scroll th .ks-sort, .scroll th .ks-sort, .ks-table th .ks-sort) {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  width: 100%;
  min-height: var(--ds-control-h);
}
:where(th .ks-sort::after) {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid var(--ds-ink-disabled);
  flex: none;
}
:where(th[aria-sort="ascending"] .ks-sort::after) { border-bottom-color: var(--ds-ink); }
:where(th[aria-sort="descending"] .ks-sort::after) { border-bottom: 0; border-top: 4px solid var(--ds-ink); }
:where(th[aria-sort="ascending"], th[aria-sort="descending"]) { color: var(--ds-ink); }
:where(th .ks-sort:hover) { color: var(--ds-ink); }
:where(th .ks-sort:focus-visible) { outline: 2px solid var(--ds-focus); outline-offset: -2px; border-radius: var(--ds-radius-s); }

/* ── Details and dialogs: opaque floats on a plain scrim ─────────────────── */
:where(.ks-page details, .wrap details) > summary { cursor: pointer; color: var(--ds-ink); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-control-h); }
:where(.ks-page details, .wrap details) > summary::-webkit-details-marker { display: none; }
:where(.ks-page details, .wrap details) > summary::before { content: "▸"; font-size: 12px; }
:where(.ks-page details[open], .wrap details[open]) > summary::before { content: "▾"; }
:where(dialog, .ks-dialog) {
  background: var(--ds-surface);
  color: var(--ds-ink);
  border: 1px solid var(--ds-hairline);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-elev-float);
  padding: var(--ds-space-5);
  max-width: min(720px, calc(100vw - 32px));
}
:where(dialog::backdrop) { background: var(--ds-scrim); }

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  :where(.ks-card, .card, .content-section) { padding: var(--ds-space-4); }
  :where(.ks-tile, .tile, .stat-card) { padding: var(--ds-space-4); }
  :where(.ks-actions) { width: 100%; justify-content: flex-start; }
  :where(.ks-actions > *) { flex: 1 1 auto; }
  table.stack-on-phone thead { display: none; }
  table.stack-on-phone, table.stack-on-phone tbody, table.stack-on-phone tr, table.stack-on-phone td { display: block; width: 100%; }
  table.stack-on-phone tr { border-bottom: 1px solid var(--ds-edge); padding: var(--ds-space-2) 0; }
  table.stack-on-phone td { border: 0; padding: var(--ds-space-1) var(--ds-space-3); display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: var(--ds-space-2); text-align: left; }
  table.stack-on-phone td::before { content: attr(data-label); font: var(--ds-text-meta); line-height: 20px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--ds-ink-2); }
  table.stack-on-phone td:empty { display: none; }
  table.stack-on-phone td[colspan], table.stack-on-phone td[data-label=""] { grid-template-columns: 1fr; }
  table.stack-on-phone td[colspan]::before, table.stack-on-phone td[data-label=""]::before { content: none; }
  .phone-hide { display: none !important; }
}