/* IOVO design system (shared). Tokens, app shell and components.
   One file for every signed-in page; both brands use it. Brand is chosen by
   host: html[data-brand="iovo"] swaps the accent, nothing else changes.
   Spec and usage: docs/design/iovo-ui.md. Visual layer only. */

/* ───────── 1. TOKENS ───────── */
:root {
  /* type */
  --ds-font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ds-text-2xs: 0.6875rem;  /* 11 */
  --ds-text-xs: 0.75rem;     /* 12 */
  --ds-text-sm: 0.8125rem;   /* 13 */
  --ds-text-md: 0.875rem;    /* 14 */
  --ds-text-lg: 1rem;        /* 16 */
  --ds-text-xl: 1.25rem;     /* 20 */
  --ds-text-2xl: 1.5rem;     /* 24 */
  --ds-text-kpi: 1.75rem;    /* 28 */
  --ds-leading-tight: 1.25;
  --ds-leading-body: 1.5;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  /* spacing, 4 px grid */
  --ds-space-0: 0;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  /* radius */
  --ds-radius-xs: 4px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-pill: 999px;
  /* motion: small, quick, purposeful. No bounce. */
  --ds-ease: cubic-bezier(0.2, 0, 0, 1);
  --ds-dur-fast: 150ms;
  --ds-dur: 200ms;
  --ds-dur-slow: 250ms;
  /* layout */
  --ds-sidebar-w: 248px;
  --ds-sidebar-w-collapsed: 56px;
  --ds-topbar-h: 52px;
  --ds-row-h: 40px;
  --ds-hit: 44px;
  --ds-z-sidebar: 40;
  --ds-z-topbar: 30;
  --ds-z-drawer: 200;
  --ds-z-modal: 210;
  --ds-z-toast: 300;
}

/* Dark is the default theme. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --ds-bg: #0a0b0d;
  --ds-surface: #111316;
  --ds-surface-2: #16191d;
  --ds-surface-3: #1d2126;
  --ds-overlay: rgba(4, 5, 7, 0.62);
  --ds-border: rgba(255, 255, 255, 0.08);
  --ds-border-strong: rgba(255, 255, 255, 0.16);
  --ds-control-border: #747c88;
  --ds-text: #ecedef;
  --ds-text-2: #a6abb3;
  --ds-text-3: #8a9099;
  --ds-hover: rgba(255, 255, 255, 0.045);
  --ds-selected: rgba(255, 255, 255, 0.075);
  --ds-success: #3ecf8e;
  --ds-warning: #f5b041;
  --ds-danger: #ff7b7b;
  --ds-info: #7ab2ff;
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --ds-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
  /* Lucent OS accent (default host) */
  --ds-accent: #4dd9c0;
  --ds-accent-strong: #75e6d1;
  --ds-accent-fg: #04201b;
  --ds-accent-text: #4dd9c0;
}
:root[data-theme="light"] {
  color-scheme: light;
  --ds-bg: #f4f5f7;
  --ds-surface: #ffffff;
  --ds-surface-2: #eceef1;
  --ds-surface-3: #e2e5e9;
  --ds-overlay: rgba(20, 23, 26, 0.38);
  --ds-border: rgba(20, 23, 26, 0.1);
  --ds-border-strong: rgba(20, 23, 26, 0.22);
  --ds-control-border: #747c88;
  --ds-text: #14171a;
  --ds-text-2: #4b5260;
  --ds-text-3: #5b6370;
  --ds-hover: rgba(20, 23, 26, 0.045);
  --ds-selected: rgba(20, 23, 26, 0.07);
  --ds-success: #0c6a40;
  --ds-warning: #8a5300;
  --ds-danger: #b42318;
  --ds-info: #1b5cc8;
  --ds-shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.08);
  --ds-shadow-md: 0 6px 16px rgba(20, 23, 26, 0.1), 0 0 0 1px rgba(20, 23, 26, 0.05);
  --ds-shadow-lg: 0 18px 48px rgba(20, 23, 26, 0.18), 0 0 0 1px rgba(20, 23, 26, 0.07);
  --ds-accent: #0a6f7a;
  --ds-accent-strong: #08565f;
  --ds-accent-fg: #ffffff;
  --ds-accent-text: #0a6f7a;
}
/* Brand follows the host. IOVO host sets data-brand="iovo" (build-time and by iovo-ui.js). */
:root[data-brand="iovo"],
:root[data-brand="iovo"][data-theme="dark"] {
  --ds-accent: #f47920;
  --ds-accent-strong: #ff9447;
  --ds-accent-fg: #1a1005;
  --ds-accent-text: #f47920;
}
:root[data-brand="iovo"][data-theme="light"] {
  --ds-accent: #a14305;
  --ds-accent-strong: #833604;
  --ds-accent-fg: #ffffff;
  --ds-accent-text: #a14305;
}
:root {
  --ds-accent-soft: color-mix(in srgb, var(--ds-accent) 14%, transparent);
  --ds-accent-line: color-mix(in srgb, var(--ds-accent) 40%, transparent);
  --ds-focus: 0 0 0 2px var(--ds-bg), 0 0 0 4px var(--ds-accent-text);
}
:root[data-theme="light"] { --ds-focus: 0 0 0 2px var(--ds-surface), 0 0 0 4px var(--ds-accent-text); }

/* ───────── 2. LEGACY BRIDGE ─────────
   Pages written before the system use their own variable names. When a page opts in
   (html[data-ds]) those names resolve to the tokens, so page content follows the
   system without a per-page copy. The :not(#_) lifts specificity over page-level and
   brand-skin variable blocks. */
html[data-ds]:root:not(#_) {
  --bg: var(--ds-bg);
  --bg2: var(--ds-surface);
  --bg3: var(--ds-surface-2);
  --card: var(--ds-surface);
  --bg-card: var(--ds-surface);
  --deep: var(--ds-surface-2);
  --surface: var(--ds-surface);
  --surface-strong: var(--ds-surface-2);
  --bg-soft: var(--ds-surface);
  --text: var(--ds-text);
  --text-mid: var(--ds-text-2);
  --text-dim: var(--ds-text-3);
  --muted: var(--ds-text-2);
  --dim: var(--ds-text-3);
  --border: var(--ds-border);
  --line: var(--ds-border);
  --border-hi: var(--ds-accent-line);
  --border-aqua: var(--ds-accent-line);
  --line-accent: var(--ds-accent-line);
  --aqua: var(--ds-accent-text);
  --aqua-deep: var(--ds-accent-strong);
  --accent: var(--ds-accent-text);
  --aqua-soft: var(--ds-accent-soft);
  --accent-soft: var(--ds-accent-soft);
  --glow: var(--ds-accent-soft);
  --glow-strong: var(--ds-accent-line);
  --input-bg: var(--ds-hover);
  --input: var(--ds-hover);
  --sidebar-bg: var(--ds-surface);
  --sidebar-active: var(--ds-selected);
  --success: var(--ds-success);
  --warning: var(--ds-warning);
  --danger: var(--ds-danger);
  --shadow: var(--ds-overlay);
  --ease: var(--ds-ease);
  --ink: var(--ds-text);
  --paper: var(--ds-bg);
  --brd: var(--ds-border);
  --card2: var(--ds-surface-2);
  --quiet: var(--ds-text-3);
  --amber: var(--ds-warning);
  --wash: var(--ds-surface-2);
  --aqua2: var(--ds-accent-strong);
  --teal: var(--ds-accent-text);
  --background: var(--ds-bg);
  --grid-color: transparent;
  --grid: transparent;
  --orb-color: transparent;
}
html[data-ds] body:not(#_) { background: var(--ds-bg); color: var(--ds-text); font-family: var(--ds-font-sans); }
html[data-ds] .bg-grid, html[data-ds] .bg-orb, html[data-ds] .grain,
html[data-ds] body::before { display: none !important; }

/* ───────── 3. BASE ───────── */
.ds-root, .ds-root *, .ds-root *::before, .ds-root *::after { box-sizing: border-box; }
.ds-num, .ds-table td.num, .ds-kpi-value, .ds-count, .ds-pill, .ds-progress-label {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.ds-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:where(.ds-shell, .ds-drawer, .ds-modal, .ds-toasts) :focus-visible {
  outline: none;
  box-shadow: var(--ds-focus);
  border-radius: var(--ds-radius-sm);
}
:where(.ds-shell, .ds-drawer, .ds-modal) :focus:not(:focus-visible) { outline: none; }
.ds-shell [hidden], .ds-drawer[hidden], .ds-modal[hidden] { display: none !important; }

/* ───────── 4. BUTTONS AND FIELDS ───────── */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  min-height: 32px; padding: 0 var(--ds-space-3); max-width: 100%;
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-2); color: var(--ds-text);
  font: var(--ds-weight-medium) var(--ds-text-sm)/1.2 var(--ds-font-sans);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease);
}
.ds-btn:hover { background: var(--ds-surface-3); }
.ds-btn:active:not(:disabled) { transform: scale(0.96); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ds-btn.primary { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-accent-fg); }
.ds-btn.primary:hover { background: var(--ds-accent-strong); border-color: var(--ds-accent-strong); }
.ds-btn.ghost { background: transparent; border-color: transparent; color: var(--ds-text-2); }
.ds-btn.ghost:hover { background: var(--ds-hover); color: var(--ds-text); }
.ds-btn.danger { color: var(--ds-danger); }
.ds-btn.icon { width: 32px; padding: 0; }
.ds-btn svg { width: 16px; height: 16px; flex: none; }
.ds-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (pointer: coarse) { .ds-btn { min-height: var(--ds-hit); } .ds-btn.icon { width: var(--ds-hit); } }

.ds-field { display: grid; gap: var(--ds-space-1); min-width: 0; }
.ds-label { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); color: var(--ds-text-2); overflow-wrap: anywhere; }
.ds-input, .ds-select, .ds-textarea {
  width: 100%; min-height: 36px; padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-control-border); border-radius: var(--ds-radius-sm);
  background: var(--ds-surface); color: var(--ds-text);
  font: var(--ds-text-md)/1.4 var(--ds-font-sans);
  transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}
.ds-textarea { padding: var(--ds-space-2) var(--ds-space-3); min-height: 88px; resize: vertical; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-3); }
.ds-input:focus-visible, .ds-select:focus-visible, .ds-textarea:focus-visible { outline: none; border-color: var(--ds-accent-text); box-shadow: var(--ds-focus); }
.ds-input[aria-invalid="true"] { border-color: var(--ds-danger); }
.ds-help { font-size: var(--ds-text-xs); color: var(--ds-text-3); }
.ds-error { font-size: var(--ds-text-xs); color: var(--ds-danger); }
@media (pointer: coarse) { .ds-input, .ds-select { min-height: var(--ds-hit); } }

/* ───────── 5. APP SHELL (sidebar + top bar) ───────── */
.ds-shell { display: flex; min-height: 100vh; min-height: 100dvh; background: var(--ds-bg); color: var(--ds-text); font-family: var(--ds-font-sans); font-size: var(--ds-text-md); }
.ds-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: var(--ds-z-sidebar);
  width: var(--ds-sidebar-w); display: flex; flex-direction: column;
  background: var(--ds-surface); border-right: 1px solid var(--ds-border);
  transition: width var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
}
.ds-sidebar-brand {
  display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-topbar-h);
  padding: 0 var(--ds-space-4); color: var(--ds-text); text-decoration: none; flex: none;
}
.ds-sidebar-brand img, .ds-sidebar-brand svg { width: 24px; height: 24px; flex: none; }
.ds-brand-mark {
  width: 24px; height: 24px; border-radius: var(--ds-radius-sm); flex: none;
  display: grid; place-items: center; background: var(--ds-accent); color: var(--ds-accent-fg);
  font: var(--ds-weight-semibold) 12px/1 var(--ds-font-sans);
}
.ds-brand-name { font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-md); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-sidebar-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-4); scrollbar-width: thin; }
.ds-nav-group { margin-top: var(--ds-space-4); }
.ds-nav-group:first-child { margin-top: 0; }
.ds-nav-label { padding: 0 var(--ds-space-2) var(--ds-space-1); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-nav-item {
  position: relative; display: flex; align-items: center; gap: var(--ds-space-2);
  min-height: 32px; padding: 0 var(--ds-space-2); margin: 1px 0; width: 100%;
  border: 0; border-radius: var(--ds-radius-sm); background: transparent;
  color: var(--ds-text-2); font: var(--ds-weight-medium) var(--ds-text-sm)/1.2 var(--ds-font-sans);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}
.ds-nav-item:hover { background: var(--ds-hover); color: var(--ds-text); }
.ds-nav-item.active, .ds-nav-item[aria-current="page"] { background: var(--ds-selected); color: var(--ds-text); }
.ds-nav-item.active::before, .ds-nav-item[aria-current="page"]::before {
  content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 2px; border-radius: var(--ds-radius-xs); background: var(--ds-accent);
}
.ds-nav-item svg { width: 16px; height: 16px; flex: none; stroke-width: 1.6; opacity: 0.9; }
.ds-nav-item.active svg, .ds-nav-item[aria-current="page"] svg { color: var(--ds-accent-text); opacity: 1; }
.ds-nav-item > span:not(.ds-count) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-count {
  flex: none; min-width: 20px; padding: 0 var(--ds-space-2); border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-3); color: var(--ds-text-2); text-align: center;
  font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-medium); line-height: 18px;
}
.ds-count[hidden], .ds-count:empty { display: none; }
.ds-nav-item.active .ds-count { background: var(--ds-accent-soft); color: var(--ds-accent-text); }
.ds-sidebar-foot { flex: none; padding: var(--ds-space-2); border-top: 1px solid var(--ds-border); display: grid; gap: 1px; }
.ds-sidebar-user { display: flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2); min-width: 0; }
.ds-avatar:empty, .ds-sidebar-user:has(.ds-avatar:empty) { display: none; }
.ds-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ds-accent-soft); color: var(--ds-accent-text); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); overflow: hidden; }
.ds-sidebar-user-copy { min-width: 0; line-height: 1.25; }
.ds-sidebar-user-name { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-sidebar-user-role { font-size: var(--ds-text-xs); color: var(--ds-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ds-main { flex: 1; min-width: 0; margin-left: var(--ds-sidebar-w); display: flex; flex-direction: column; transition: margin-left var(--ds-dur) var(--ds-ease); }
.ds-topbar {
  position: sticky; top: 0; z-index: var(--ds-z-topbar);
  display: flex; align-items: center; gap: var(--ds-space-3);
  min-height: var(--ds-topbar-h); padding: 0 var(--ds-space-6);
  background: color-mix(in srgb, var(--ds-bg) 88%, transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ds-border);
}
.ds-topbar-title { margin: 0; min-width: 0; font: var(--ds-weight-semibold) var(--ds-text-lg)/1.25 var(--ds-font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-text); letter-spacing: 0; text-transform: none; text-shadow: none; }
.ds-topbar-crumb { color: var(--ds-text-3); font-size: var(--ds-text-sm); white-space: nowrap; }
.ds-topbar-spacer { flex: 1; }
.ds-topbar-actions { display: flex; align-items: center; gap: var(--ds-space-2); flex: none; }
.ds-search { position: relative; flex: 0 1 320px; min-width: 120px; }
.ds-search svg { position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--ds-text-3); pointer-events: none; }
.ds-search .ds-input { padding-left: 32px; padding-right: 44px; min-height: 32px; background: var(--ds-surface-2); }
.ds-search kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 0 var(--ds-space-1); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-xs);
  color: var(--ds-text-3); font: var(--ds-text-2xs)/16px var(--ds-font-mono); pointer-events: none;
}
.ds-segmented { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); }
.ds-segmented button { min-height: 28px; padding: 0 var(--ds-space-2); border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: var(--ds-text-2); font: var(--ds-weight-medium) var(--ds-text-xs)/1 var(--ds-font-sans); cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); }
.ds-segmented button[aria-pressed="true"], .ds-segmented button.active { background: var(--ds-surface-3); color: var(--ds-text); }
.ds-menu-btn { display: none; }
.ds-content { flex: 1; min-width: 0; padding: var(--ds-space-6); }
.ds-scrim { position: fixed; inset: 0; z-index: calc(var(--ds-z-sidebar) - 1); background: var(--ds-overlay); opacity: 0; pointer-events: none; transition: opacity var(--ds-dur) var(--ds-ease); }

/* Collapsed rail (desktop preference) */
@media (min-width: 1024px) {
.ds-shell.is-collapsed { --ds-sidebar-w: var(--ds-sidebar-w-collapsed); }
.ds-shell.is-collapsed .ds-brand-row { flex-direction: column; padding-right: 0 !important; }
.ds-shell.is-collapsed .ds-brand-name, .ds-shell.is-collapsed .ds-nav-label,
.ds-shell.is-collapsed .ds-nav-item > span, .ds-shell.is-collapsed .ds-sidebar-user-copy { display: none; }
.ds-shell.is-collapsed .ds-nav-item { justify-content: center; padding: 0; }
.ds-shell.is-collapsed .ds-nav-item.active::before { left: -4px; }
}
.ds-nav-item > span:not(.ds-count), .ds-nav-label, .ds-topbar-title { white-space: normal; overflow-wrap: anywhere; }
.ds-topbar-title { padding-block: 8px; }
.ds-nav-item { padding-block: 8px; }
.ds-collapse-btn { flex: none; }
.ds-nav-close { display: none; flex: none; }
.ds-nav-results { display: grid; gap: var(--ds-space-2); margin-top: var(--ds-space-4); }
.ds-nav-results .ds-btn { justify-content: flex-start; white-space: normal; text-align: start; min-height: 44px; }
.ds-nav-search svg { width: 16px; height: 16px; flex: none; }
.ds-table tr[data-clickable]:focus-visible { outline: 2px solid var(--ds-accent-text); outline-offset: -2px; }
@media (max-width: 1023px) {
  .ds-collapse-btn { display: none; }
  .ds-nav-close { display: inline-flex; }
  .ds-nav-search > span { display: none; }
  html[data-ds] .ds-nav-search { width: 36px; padding: 0; flex: none; }
}
@media (pointer: coarse) { html[data-ds] .ds-nav-search { min-width: 44px; min-height: 44px; } }
@media (max-width: 640px) { .ds-input, .ds-select, .ds-textarea { font-size: 16px; } }

/* iPad portrait and phone: sidebar becomes an off-canvas panel */
@media (max-width: 1023px) {
  .ds-sidebar { transform: translateX(-100%); visibility: hidden; width: min(280px, 86vw); box-shadow: none; transition: width var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease), visibility 0s linear var(--ds-dur); }
  .ds-shell.is-nav-open .ds-sidebar { transform: none; visibility: visible; box-shadow: var(--ds-shadow-lg); transition-delay: 0s, 0s, 0s; }
  .ds-shell.is-nav-open .ds-scrim { opacity: 1; pointer-events: auto; }
  .ds-main, .ds-shell.is-collapsed .ds-main { margin-left: 0; }
  .ds-shell.is-collapsed { --ds-sidebar-w: 248px; }
  .ds-menu-btn { display: inline-flex; }
  .ds-topbar { padding: 0 var(--ds-space-4); }
  .ds-content { padding: var(--ds-space-4); }
}
@media (max-width: 640px) {
  .ds-topbar:has(.ds-search) { flex-wrap: wrap; row-gap: 0; }
  .ds-topbar:has(.ds-search) .ds-topbar-title { flex: 1 1 0; }
  .ds-topbar:has(.ds-search) .ds-topbar-spacer { display: none; }
  .ds-topbar:has(.ds-search) .ds-search { order: 10; flex: 1 0 100%; margin-bottom: var(--ds-space-2); }
  .ds-search { flex: 1 1 auto; }
  .ds-search kbd { display: none; }
  .ds-topbar-crumb { display: none; }
  .ds-topbar-actions .ds-btn > span { display: none; }
  .ds-topbar-actions .ds-btn:not(.icon):not(.primary) { width: 32px; padding: 0; }
}

/* Notched phones (pages that set viewport-fit=cover): keep the bars out of the status bar / home indicator. */
.ds-topbar { padding-top: env(safe-area-inset-top, 0px); min-height: calc(var(--ds-topbar-h) + env(safe-area-inset-top, 0px)); }
.ds-sidebar { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ───────── 6. KPI CARD, CARD, STATUS PILL, PROGRESS, SPARKLINE ───────── */
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); min-width: 0; }
.ds-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-border); }
.ds-card-title { margin: 0; font: var(--ds-weight-semibold) var(--ds-text-md)/1.3 var(--ds-font-sans); min-width: 0; overflow-wrap: anywhere; }
.ds-card-body { padding: var(--ds-space-4); }
.ds-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--ds-space-3); }
.ds-kpi { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); min-width: 0; }
.ds-kpi-label { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); color: var(--ds-text-2); overflow-wrap: anywhere; }
.ds-kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-3); min-width: 0; }
.ds-kpi-value { font: var(--ds-weight-semibold) var(--ds-text-kpi)/1.1 var(--ds-font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; min-width: 0; overflow-wrap: anywhere; }
.ds-kpi-delta { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); color: var(--ds-text-2); }
.ds-kpi-delta.up { color: var(--ds-success); }
.ds-kpi-delta.down { color: var(--ds-danger); }
.ds-kpi .ds-spark { flex: none; }

.ds-pill {
  display: inline-flex; align-items: center; gap: var(--ds-space-2); max-width: 100%; min-height: 20px; padding: 2px 8px;
  border-radius: var(--ds-radius-pill); border: 1px solid var(--ds-border);
  background: var(--ds-surface-2); color: var(--ds-text-2);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); line-height: 1.4; white-space: normal;
}
.ds-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ds-pill > span { min-width: 0; overflow-wrap: anywhere; }
.ds-pill.success { color: var(--ds-success); background: color-mix(in srgb, var(--ds-success) 12%, var(--ds-surface)); border-color: color-mix(in srgb, var(--ds-success) 30%, transparent); }
.ds-pill.warning { color: var(--ds-warning); background: color-mix(in srgb, var(--ds-warning) 12%, var(--ds-surface)); border-color: color-mix(in srgb, var(--ds-warning) 30%, transparent); }
.ds-pill.danger { color: var(--ds-danger); background: color-mix(in srgb, var(--ds-danger) 12%, var(--ds-surface)); border-color: color-mix(in srgb, var(--ds-danger) 30%, transparent); }
.ds-pill.info { color: var(--ds-info); background: color-mix(in srgb, var(--ds-info) 12%, var(--ds-surface)); border-color: color-mix(in srgb, var(--ds-info) 30%, transparent); }
.ds-pill.accent { color: var(--ds-accent-text); background: color-mix(in srgb, var(--ds-accent) 12%, var(--ds-surface)); border-color: var(--ds-accent-line); }

.ds-progress { display: flex; align-items: center; gap: var(--ds-space-2); min-width: 80px; }
.ds-progress-track { flex: 1; height: 6px; border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); overflow: hidden; min-width: 40px; }
.ds-progress-bar { height: 100%; border-radius: inherit; background: var(--ds-accent); transition: width var(--ds-dur-slow) var(--ds-ease); }
.ds-progress.success .ds-progress-bar { background: var(--ds-success); }
.ds-progress.warning .ds-progress-bar { background: var(--ds-warning); }
.ds-progress.danger .ds-progress-bar { background: var(--ds-danger); }
.ds-progress-label { flex: none; min-width: 32px; text-align: right; font-size: var(--ds-text-xs); color: var(--ds-text-2); }
.ds-spark { display: inline-block; vertical-align: middle; overflow: visible; color: var(--ds-accent-text); }
.ds-spark path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ds-spark .ds-spark-area { fill: currentColor; stroke: none; opacity: 0.12; }
.ds-spark.up { color: var(--ds-success); }
.ds-spark.down { color: var(--ds-danger); }

/* ───────── 7. DATA TABLE ───────── */
.ds-table-wrap { position: relative; max-width: 100%; overflow: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); max-height: var(--ds-table-max-h, none); }
.ds-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; }
.ds-table th {
  position: sticky; top: 0; z-index: 2; height: 36px; padding: 0 var(--ds-space-3);
  background: var(--ds-surface-2); border-bottom: 1px solid var(--ds-border);
  color: var(--ds-text-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); text-align: left; white-space: nowrap;
}
.ds-table td { height: var(--ds-row-h); padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 1px solid var(--ds-border); color: var(--ds-text); vertical-align: middle; max-width: 320px; white-space: normal; overflow-wrap: anywhere; }
.ds-table td.wrap { white-space: normal; overflow-wrap: anywhere; }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr { transition: background-color var(--ds-dur-fast) var(--ds-ease); }
.ds-table tbody tr:hover { background: var(--ds-hover); }
.ds-table tbody tr[aria-selected="true"] { background: var(--ds-selected); box-shadow: inset 2px 0 0 var(--ds-accent); }
.ds-table tbody tr[data-clickable] { cursor: pointer; }
.ds-table .num, .ds-table th.num { text-align: right; }
.ds-table th.sel, .ds-table td.sel { width: 40px; padding: 0 0 0 var(--ds-space-3); }
.ds-table th button.ds-sort {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.ds-table th button.ds-sort:hover { color: var(--ds-text); }
.ds-table th button.ds-sort svg { width: 10px; height: 10px; opacity: 0.35; }
.ds-table th[aria-sort="ascending"] button.ds-sort svg, .ds-table th[aria-sort="descending"] button.ds-sort svg { opacity: 1; color: var(--ds-accent-text); }
.ds-table th[aria-sort="descending"] button.ds-sort svg { transform: rotate(180deg); }
.ds-check { width: 16px; height: 16px; margin: 0; accent-color: var(--ds-accent); cursor: pointer; vertical-align: middle; }
.ds-table-bar { display: flex; align-items: center; gap: var(--ds-space-3); min-height: 40px; padding: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-text-sm); color: var(--ds-text-2); }
.ds-empty { display: grid; justify-items: center; gap: var(--ds-space-2); padding: var(--ds-space-10) var(--ds-space-4); text-align: center; color: var(--ds-text-2); }
.ds-empty-title { font-weight: var(--ds-weight-semibold); color: var(--ds-text); font-size: var(--ds-text-md); }
.ds-empty-body { max-width: 360px; font-size: var(--ds-text-sm); line-height: var(--ds-leading-body); }
.ds-empty svg { width: 28px; height: 28px; color: var(--ds-text-3); }
.ds-skeleton { display: block; height: 12px; border-radius: var(--ds-radius-xs); background: linear-gradient(90deg, var(--ds-surface-2), var(--ds-surface-3), var(--ds-surface-2)); background-size: 200% 100%; animation: ds-shimmer 1.4s linear infinite; }
@keyframes ds-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ds-table-wrap[aria-busy="true"] { pointer-events: none; }
@media (max-width: 640px) { .ds-table td { max-width: 220px; } }

/* ───────── 8. TABS AND FILTER CHIPS ───────── */
.ds-tabs { display: flex; gap: var(--ds-space-1); border-bottom: 1px solid var(--ds-border); overflow-x: auto; scrollbar-width: none; }
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-2); flex: none;
  min-height: 36px; padding: 0 var(--ds-space-3); border: 0; background: transparent;
  color: var(--ds-text-2); font: var(--ds-weight-medium) var(--ds-text-sm)/1 var(--ds-font-sans); cursor: pointer; white-space: nowrap;
  transition: color var(--ds-dur-fast) var(--ds-ease);
}
.ds-tab:hover { color: var(--ds-text); }
.ds-tab[aria-selected="true"] { color: var(--ds-text); }
.ds-tab[aria-selected="true"]::after { content: ''; position: absolute; left: var(--ds-space-2); right: var(--ds-space-2); bottom: -1px; height: 2px; border-radius: var(--ds-radius-xs); background: var(--ds-accent); }
.ds-tabpanel[hidden] { display: none; }
@media (pointer: coarse) { .ds-tab { min-height: var(--ds-hit); } }

.ds-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); align-items: center; }
.ds-chip {
  display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: 28px; max-width: 100%; padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-pill);
  background: transparent; color: var(--ds-text-2);
  font: var(--ds-weight-medium) var(--ds-text-xs)/1 var(--ds-font-sans); cursor: pointer; white-space: nowrap;
  transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}
.ds-chip:hover { background: var(--ds-hover); color: var(--ds-text); }
.ds-chip[aria-pressed="true"] { background: var(--ds-accent-soft); border-color: var(--ds-accent-line); color: var(--ds-accent-text); }
.ds-chip .ds-count { background: transparent; min-width: 0; padding: 0; line-height: 1; }
.ds-chip-clear { margin-left: var(--ds-space-1); }
@media (pointer: coarse) { .ds-chip { min-height: 36px; } }

/* ───────── 9. DRAWER AND MODAL ───────── */
.ds-layer { position: fixed; inset: 0; z-index: var(--ds-z-drawer); font-family: var(--ds-font-sans); color: var(--ds-text); }
.ds-layer-scrim { position: absolute; inset: 0; background: var(--ds-overlay); opacity: 0; transition: opacity var(--ds-dur) var(--ds-ease); }
.ds-layer.is-open .ds-layer-scrim { opacity: 1; }
.ds-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100vw);
  display: flex; flex-direction: column; background: var(--ds-surface);
  border-left: 1px solid var(--ds-border-strong); box-shadow: var(--ds-shadow-lg);
  transform: translateX(24px); opacity: 0;
  transition: transform var(--ds-dur-slow) var(--ds-ease), opacity var(--ds-dur) var(--ds-ease);
}
.ds-layer.is-open .ds-drawer { transform: none; opacity: 1; }
.ds-drawer-head, .ds-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5); border-bottom: 1px solid var(--ds-border); }
.ds-drawer-title, .ds-modal-title { margin: 0; font: var(--ds-weight-semibold) var(--ds-text-lg)/1.3 var(--ds-font-sans); overflow-wrap: anywhere; }
.ds-drawer-sub, .ds-modal-sub { margin: 2px 0 0; font-size: var(--ds-text-sm); color: var(--ds-text-2); overflow-wrap: anywhere; }
.ds-drawer-body { flex: 1; overflow-y: auto; padding: var(--ds-space-5); overscroll-behavior: contain; }
.ds-drawer-foot, .ds-modal-foot { display: flex; justify-content: flex-end; gap: var(--ds-space-2); flex-wrap: wrap; padding: var(--ds-space-3) var(--ds-space-5); border-top: 1px solid var(--ds-border); }
.ds-dl { display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: var(--ds-space-2) var(--ds-space-4); margin: 0; font-size: var(--ds-text-sm); }
.ds-dl dt { color: var(--ds-text-2); }
.ds-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ds-modal {
  position: absolute; left: 50%; top: 50%; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; background: var(--ds-surface); border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg);
  transform: translate(-50%, calc(-50% + 8px)) scale(0.985); opacity: 0;
  transition: transform var(--ds-dur) var(--ds-ease), opacity var(--ds-dur) var(--ds-ease);
}
.ds-layer.is-open .ds-modal { transform: translate(-50%, -50%); opacity: 1; }
.ds-modal-body { flex: 1; overflow-y: auto; padding: 0 var(--ds-space-5); }
.ds-form-section { padding: var(--ds-space-4) 0; border-bottom: 1px solid var(--ds-border); display: grid; gap: var(--ds-space-3); }
.ds-form-section:last-child { border-bottom: 0; }
.ds-form-section > legend, .ds-form-section-title { padding: 0; font: var(--ds-weight-semibold) var(--ds-text-xs)/1.3 var(--ds-font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-2); }
.ds-form-section-desc { margin: -8px 0 0; font-size: var(--ds-text-xs); color: var(--ds-text-3); }
.ds-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-3); }
fieldset.ds-form-section { margin: 0; min-width: 0; border-left: 0; border-right: 0; border-top: 0; }
@media (max-width: 640px) {
  .ds-form-grid { grid-template-columns: 1fr; }
  .ds-modal { top: auto; bottom: 0; left: 0; width: 100%; max-height: 92dvh; border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; transform: translateY(16px); }
  .ds-layer.is-open .ds-modal { transform: none; }
  .ds-drawer { width: 100vw; border-left: 0; }
  .ds-dl { grid-template-columns: 1fr; gap: 2px; }
  .ds-dl dd { margin-bottom: var(--ds-space-2); }
}

/* ───────── 10. TOASTS ───────── */
.ds-toasts { position: fixed; right: var(--ds-space-4); bottom: var(--ds-space-4); z-index: var(--ds-z-toast); display: grid; gap: var(--ds-space-2); width: min(360px, calc(100vw - 32px)); pointer-events: none; font-family: var(--ds-font-sans); }
.ds-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-surface-3); color: var(--ds-text); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-md); font-size: var(--ds-text-sm); line-height: 1.4;
  animation: ds-toast-in var(--ds-dur) var(--ds-ease) both;
}
.ds-toast::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: var(--ds-space-1); border-radius: 50%; background: var(--ds-accent); }
.ds-toast.success::before { background: var(--ds-success); }
.ds-toast.warning::before { background: var(--ds-warning); }
.ds-toast.danger::before { background: var(--ds-danger); }
.ds-toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ds-toast.is-leaving { animation: ds-toast-out var(--ds-dur-fast) var(--ds-ease) both; }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ds-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(4px); } }
@media (max-width: 640px) { .ds-toasts { left: var(--ds-space-4); width: auto; bottom: calc(var(--ds-space-4) + env(safe-area-inset-bottom, 0px)); } }

/* ───────── 11. LEGACY SHELL ADOPTION (index.html) ─────────
   index.html already has .sidebar / .header markup that its scripts drive. With
   html[data-ds] those elements take the system look; markup and ids stay as they are. */
html[data-ds] .sidebar:not(#_) { background: var(--ds-surface); backdrop-filter: none; border-right: 1px solid var(--ds-border); width: var(--ds-sidebar-w); }
html[data-ds] body.sidebar-collapsed { --ds-sidebar-w: var(--ds-sidebar-w-collapsed); --sidebar-width: var(--ds-sidebar-w-collapsed); }
html[data-ds] body:not(.sidebar-collapsed) { --sidebar-width: var(--ds-sidebar-w); }
html[data-ds] .sidebar-brand:not(#_) { min-height: var(--ds-topbar-h); padding: 0 var(--ds-space-4); }
html[data-ds] .sidebar-brand-wm:not(#_) { font-family: var(--ds-font-sans); font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); letter-spacing: 0.02em; color: var(--ds-text); }
html[data-ds] .sidebar-brand-wm b:not(#_) { color: var(--ds-accent-text); font-weight: var(--ds-weight-semibold); }
html[data-ds] .sidebar-brand-icon polygon:first-of-type:not(#_) { fill: var(--ds-accent-soft); }
html[data-ds] .sidebar-brand-icon polygon:nth-of-type(2):not(#_), html[data-ds] .sidebar-brand-icon line:not(#_) { stroke: var(--ds-accent); }
html[data-ds] .sidebar-brand-icon circle:not(#_) { fill: var(--ds-accent); }
html[data-ds] .sidebar-nav:not(#_) { padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-4); }
html[data-ds] .nav-label:not(#_) { padding: var(--ds-space-4) var(--ds-space-2) var(--ds-space-1); font-family: var(--ds-font-sans); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-text-3); }
html[data-ds] .nav-item:not(#_) { position: relative; min-height: 32px; padding: 0 var(--ds-space-2); margin: 1px 0; gap: var(--ds-space-2); border-radius: var(--ds-radius-sm); font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); color: var(--ds-text-2); transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); }
html[data-ds] .nav-item svg:not(#_) { width: 16px; height: 16px; flex: none; opacity: 0.9; }
html[data-ds] .nav-item:hover:not(#_) { background: var(--ds-hover); color: var(--ds-text); }
html[data-ds] .nav-item.active:not(#_) { background: var(--ds-selected); color: var(--ds-text); font-weight: var(--ds-weight-medium); }
html[data-ds] .nav-item.active:not(#_)::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 2px; border-radius: var(--ds-radius-xs); background: var(--ds-accent); box-shadow: none; }
html[data-ds] .nav-item.billing-admin-only.active:not(#_):not(:focus-visible) { box-shadow: none; }
html[data-ds] .nav-item:not(#_) { text-decoration: none; }
html[data-ds] .nav-item > span:not(.ds-count):not(#_) + .training-nav-badge { margin-left: auto; }
@media (pointer: coarse) { html[data-ds] .nav-item:not(#_) { min-height: 40px; } }
html[data-ds] .nav-item.active svg:not(#_) { color: var(--ds-accent-text); filter: none; }
html[data-ds] .nav-item > span:not(.ds-count):not(#_) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ds] .nav-item > .ds-count { margin-left: auto; }
html[data-ds] body.sidebar-collapsed .nav-item > .ds-count { display: none; }
html[data-ds] .sidebar-footer:not(#_) { padding: var(--ds-space-2) var(--ds-space-2) calc(var(--ds-space-2) + env(safe-area-inset-bottom)); border-top: 1px solid var(--ds-border); display: grid; gap: 1px; }
html[data-ds] .sidebar-user:not(#_) { padding: var(--ds-space-2); gap: var(--ds-space-2); min-width: 0; }
html[data-ds] .sidebar-user > div:not(.sidebar-avatar):not(#_) { min-width: 0; line-height: 1.25; }
html[data-ds] .sidebar-uname:not(#_), html[data-ds] .sidebar-urole:not(#_) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ds] .support-btn:not(#_), html[data-ds] .signout-btn:not(#_) {
  margin: 0; min-height: 32px; padding: 0 var(--ds-space-2); gap: var(--ds-space-2); width: 100%;
  border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-text-2);
  font: var(--ds-weight-medium) var(--ds-text-sm)/1.2 var(--ds-font-sans); text-align: left; transform: none; box-shadow: none;
  transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}
html[data-ds] .support-btn:hover:not(#_), html[data-ds] .signout-btn:hover:not(#_) { background: var(--ds-hover); color: var(--ds-text); transform: none; border: 0; }
html[data-ds] .signout-btn:hover:not(#_) { color: var(--ds-danger); }
html[data-ds] .support-btn svg:not(#_), html[data-ds] .signout-btn svg:not(#_) { width: 16px; height: 16px; flex: none; opacity: 0.9; }
html[data-ds] .support-btn > span:not(#_), html[data-ds] .signout-btn > span:not(#_) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ds] body.sidebar-collapsed .support-btn:not(#_), html[data-ds] body.sidebar-collapsed .signout-btn:not(#_) { justify-content: center; padding: 0; }
@media (pointer: coarse) { html[data-ds] .support-btn:not(#_), html[data-ds] .signout-btn:not(#_) { min-height: 40px; } }
html[data-ds] .sidebar-avatar:not(#_) { width: 28px; height: 28px; background: var(--ds-accent-soft); color: var(--ds-accent-text); font-size: var(--ds-text-xs); }
html[data-ds] .sidebar-uname:not(#_) { font-size: var(--ds-text-sm); }
html[data-ds] .sidebar-urole:not(#_) { font-size: var(--ds-text-xs); color: var(--ds-text-3); }
html[data-ds] .sidebar-toggle:not(#_) { width: 28px; height: 28px; border-radius: var(--ds-radius-sm); background: transparent; border-color: var(--ds-border); color: var(--ds-text-2); }
html[data-ds] .sidebar-toggle:hover:not(#_) { background: var(--ds-hover); border-color: var(--ds-border-strong); color: var(--ds-text); }
html[data-ds] body:not(.sidebar-collapsed) .sidebar-toggle-wrap:not(#_) { position: absolute; top: calc(var(--ds-topbar-h) / 2 - 14px); right: var(--ds-space-2); padding: 0; z-index: 1; }
html[data-ds] body.sidebar-collapsed .sidebar-toggle-wrap:not(#_) { padding: 0 var(--ds-space-2) var(--ds-space-2); }
html[data-ds] .header:not(#_) { min-height: var(--ds-topbar-h); padding: 0 var(--ds-space-6); background: color-mix(in srgb, var(--ds-bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ds-border); gap: var(--ds-space-3); }
html[data-ds] .header-title:not(#_) { font-family: var(--ds-font-sans); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); letter-spacing: 0; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ds] .header-left:not(#_) { min-width: 0; }
html[data-ds] .header .ds-search { margin-left: auto; margin-right: var(--ds-space-3); }
html[data-ds] .header-left:not(#_) { flex: 1 1 auto; min-width: 96px; }
html[data-ds] .header-right:not(#_) { gap: var(--ds-space-2); min-width: 0; flex: 0 1 auto; }
html[data-ds] .company-context-control:not(#_) { min-width: 0; }
html[data-ds] .lang-pill:not(#_) { padding: 2px; gap: 2px; border-radius: var(--ds-radius-sm); border: 1px solid var(--ds-border); background: var(--ds-surface-2); overflow: visible; flex: none; }
html[data-ds] .lang-opt:not(#_) { min-width: 0; min-height: 28px; padding: 0 var(--ds-space-3); border-radius: var(--ds-radius-xs); font-family: var(--ds-font-sans); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: 0; color: var(--ds-text-2); white-space: nowrap; }
html[data-ds] .lang-opt:not(.active):hover:not(#_) { background: var(--ds-hover); color: var(--ds-text); }
html[data-ds] .lang-opt.active:not(#_) { background: var(--ds-surface-3); color: var(--ds-text); font-weight: var(--ds-weight-medium); }
html[data-ds] .tog:not(#_) { width: 32px; height: 32px; border-radius: var(--ds-radius-sm); background: transparent; border: 1px solid var(--ds-border); color: var(--ds-text-2); }
html[data-ds] .tog:hover:not(#_) { background: var(--ds-hover); border-color: var(--ds-border-strong); color: var(--ds-text); }
html[data-ds] .tog svg:not(#_) { width: 16px; height: 16px; }
html[data-ds] .company-context-switcher:not(#_) { padding: 0; background: transparent; box-shadow: none; gap: var(--ds-space-2); min-width: 0; }
html[data-ds] .company-context-label:not(#_) { font-family: var(--ds-font-sans); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-medium); letter-spacing: 0.06em; color: var(--ds-text-3); white-space: nowrap; }
html[data-ds] .company-context-trigger:not(#_) { min-height: 32px; padding: 0 var(--ds-space-2) 0 var(--ds-space-3); border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); color: var(--ds-text); font: var(--ds-weight-medium) var(--ds-text-sm)/1.2 var(--ds-font-sans); box-shadow: 0 0 0 1px var(--ds-border-strong); transition: background-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease); }
html[data-ds] .company-context-trigger:hover:not(#_) { background: var(--ds-surface-3); box-shadow: 0 0 0 1px var(--ds-border-strong); }
html[data-ds] .company-context-popover:not(#_) { background: var(--ds-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-lg); }
@media (pointer: coarse) { html[data-ds] .tog:not(#_) { width: var(--ds-hit); height: var(--ds-hit); } html[data-ds] .lang-opt:not(#_) { min-height: 36px; } html[data-ds] .company-context-trigger:not(#_) { min-height: var(--ds-hit); } }
@media (max-width: 1023px) { html[data-ds] .header .ds-search { display: none; } }
@media (max-width: 768px) {
  html[data-ds] .header-right:not(#_) { display: contents; }
  html[data-ds] .header:not(#_) { padding: calc(var(--ds-space-2) + env(safe-area-inset-top)) var(--ds-space-4) var(--ds-space-2); min-height: calc(var(--ds-topbar-h) + env(safe-area-inset-top)); gap: var(--ds-space-2); }
  html[data-ds] .header-title:not(#_) { font-size: var(--ds-text-lg); }
  html[data-ds] .lang-opt:not(#_) { padding: 0 var(--ds-space-2); }
  html[data-ds] .company-context-trigger:not(#_) { padding-left: var(--ds-space-2); }
}

/* Bottom tabs and the phone More sheet (index.html phone layout) */
html[data-ds] .bottom-tabs:not(#_) { background: var(--ds-surface); border-top: 1px solid var(--ds-border); padding: var(--ds-space-1) var(--ds-space-2) env(safe-area-inset-bottom); }
html[data-ds] .btab:not(#_) { min-width: 0; flex: 1 1 0; max-width: 96px; min-height: 48px; justify-content: center; gap: 2px; padding: var(--ds-space-1); font-family: var(--ds-font-sans); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-medium); letter-spacing: 0; text-transform: none; color: var(--ds-text-3); border-radius: var(--ds-radius-sm); }
html[data-ds] .btab > span:not(#_) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ds] .btab svg:not(#_) { width: 20px; height: 20px; opacity: 0.9; }
html[data-ds] .btab:hover:not(#_) { color: var(--ds-text); }
html[data-ds] .btab.active:not(#_) { color: var(--ds-accent-text); }
html[data-ds] .mobile-menu:not(#_) { background: var(--ds-surface); backdrop-filter: none; border: 1px solid var(--ds-border); border-bottom: 0; border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; box-shadow: var(--ds-shadow-lg); }
html[data-ds] .mobile-menu-overlay:not(#_) { background: var(--ds-overlay); }
html[data-ds] .mobile-menu-item:not(#_) { min-height: var(--ds-hit); padding: 0 var(--ds-space-3); gap: var(--ds-space-3); border-radius: var(--ds-radius-sm); font-family: var(--ds-font-sans); font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); }
html[data-ds] .mobile-menu-item svg:not(#_) { width: 18px; height: 18px; opacity: 0.9; }
html[data-ds] .mobile-menu-handle:not(#_) { background: var(--ds-border-strong); }

/* Keyboard focus: one ring everywhere in the shell. The id-weight selector beats
   page-level box-shadow rules on the same controls (nav items, switcher trigger). */
html[data-ds] :is(.sidebar, .header, .bottom-tabs, .mobile-menu) :focus-visible:not(.company-context-option):not(.company-context-demo-toggle):not(.company-context-demo-choice):not(#_) { outline: none; box-shadow: var(--ds-focus); }
html[data-ds] :is(.sidebar, .header, .bottom-tabs, .mobile-menu) :focus:not(:focus-visible):not(#_) { outline: none; }

/* Pages that adopt IovoShell.mount() keep their own layout inside .ds-content. */
html.ds-has-shell:not(#_), body.ds-has-shell:not(#_) { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; display: block; }
body.ds-has-shell .ds-content > * { max-width: 100%; }

/* ───────── 11b. SIDE PANEL, SAVED VIEWS, AVATAR, TABLE COLUMN PRIORITY ───────── */
.ds-sidepanel {
  --ds-panel-w: 480px;
  position: fixed; top: calc(var(--ds-topbar-h) + env(safe-area-inset-top, 0px)); right: 0; bottom: 0; z-index: calc(var(--ds-z-sidebar) - 5);
  width: min(var(--ds-panel-w), 100vw); display: flex; flex-direction: column;
  background: var(--ds-surface); color: var(--ds-text); font-family: var(--ds-font-sans);
  border-left: 1px solid var(--ds-border-strong); box-shadow: var(--ds-shadow-lg);
  clip-path: inset(0 0 0 100%); opacity: 0;
  transition: clip-path var(--ds-dur-slow) var(--ds-ease), opacity var(--ds-dur) var(--ds-ease);
}
.ds-sidepanel.is-open { clip-path: inset(0 0 0 -32px); opacity: 1; }
.ds-sidepanel:focus { outline: none; }
.ds-sidepanel :focus-visible { outline: none; box-shadow: var(--ds-focus); border-radius: var(--ds-radius-sm); }
.ds-sidepanel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5); border-bottom: 1px solid var(--ds-border); }
.ds-sidepanel-heading { min-width: 0; flex: 1; }
.ds-sidepanel-title { margin: 0; font: var(--ds-weight-semibold) var(--ds-text-xl)/1.25 var(--ds-font-sans); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ds-sidepanel-sub { margin-top: var(--ds-space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-text-2); }
.ds-sidepanel-sub:empty { display: none; }
.ds-sidepanel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ds-sidepanel-foot { display: flex; align-items: center; justify-content: flex-start; gap: var(--ds-space-2); flex-wrap: wrap; padding: var(--ds-space-3) var(--ds-space-5); border-top: 1px solid var(--ds-border); }
@media (min-width: 1280px) {
  html.ds-sidepanel-open .ds-sidepanel-dock { margin-right: 480px; }
}
@media (max-width: 1023px) { .ds-sidepanel { --ds-panel-w: 100vw; border-left: 0; } .ds-sidepanel-head, .ds-sidepanel-foot { padding-inline: var(--ds-space-4); } }

.ds-views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); }
.ds-view-item { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: transparent; transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease); }
.ds-view-item:hover { background: var(--ds-hover); }
.ds-view-item:has(.ds-view[aria-pressed="true"]) { background: var(--ds-accent-soft); border-color: var(--ds-accent-line); }
.ds-view { min-height: 32px; padding: 0 var(--ds-space-3); border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-text-2); font: var(--ds-weight-medium) var(--ds-text-sm)/1.2 var(--ds-font-sans); cursor: pointer; text-align: start; overflow-wrap: anywhere; }
.ds-view:hover { color: var(--ds-text); }
.ds-view[aria-pressed="true"] { color: var(--ds-accent-text); }
.ds-view-item.is-custom .ds-view { padding-right: var(--ds-space-1); }
.ds-view-remove { width: 24px; height: 24px; margin-right: var(--ds-space-1); display: inline-grid; place-items: center; border: 0; border-radius: var(--ds-radius-xs); background: transparent; color: var(--ds-text-3); cursor: pointer; flex: none; }
.ds-view-remove:hover { color: var(--ds-text); background: var(--ds-hover); }
.ds-view-remove svg, .ds-view-save svg { width: 14px; height: 14px; flex: none; }
.ds-view:focus-visible, .ds-view-remove:focus-visible { outline: none; box-shadow: var(--ds-focus); }
@media (pointer: coarse) { .ds-view { min-height: var(--ds-hit); } .ds-view-remove { width: var(--ds-hit); height: var(--ds-hit); margin-right: 0; } }

.ds-avatar.sm { width: 24px; height: 24px; font-size: var(--ds-text-2xs); }

/* Table columns that give way to narrower containers (the table's own width, so a docked side panel counts too). */
.ds-table-block { container-type: inline-size; container-name: ds-table; }
@container ds-table (max-width: 860px) { .ds-col-lg { display: none; } }
@container ds-table (max-width: 620px) { .ds-col-md { display: none; } }
@container ds-table (max-width: 440px) { .ds-col-sm { display: none; } }

/* ───────── 11c. QUEUES: count tones, summary strip, queue panel ─────────
   Part 3 (office accounts). A queue is a titled panel with a live count and a ds-table; the strip is a row of headline counts. */
.ds-count.success { color: var(--ds-success); background: color-mix(in srgb, var(--ds-success) 12%, var(--ds-surface)); }
.ds-count.warning { color: var(--ds-warning); background: color-mix(in srgb, var(--ds-warning) 12%, var(--ds-surface)); }
.ds-count.danger { color: var(--ds-danger); background: color-mix(in srgb, var(--ds-danger) 12%, var(--ds-surface)); }
.ds-count.info { color: var(--ds-info); background: color-mix(in srgb, var(--ds-info) 12%, var(--ds-surface)); }
.ds-nav-item.active .ds-count.success, .ds-nav-item.active .ds-count.warning, .ds-nav-item.active .ds-count.danger, .ds-nav-item.active .ds-count.info { background: color-mix(in srgb, currentColor 14%, var(--ds-surface)); }
.ds-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); gap: var(--ds-space-2); min-width: 0; }
.ds-stat {
  display: grid; align-content: start; gap: var(--ds-space-1); min-width: 0; padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  font: inherit; text-align: left;
}
button.ds-stat { cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease); }
button.ds-stat:hover { background: var(--ds-hover); border-color: var(--ds-border-strong); }
button.ds-stat:active { transform: scale(0.98); }
button.ds-stat:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.ds-stat-value { font: var(--ds-weight-semibold) var(--ds-text-xl)/1.15 var(--ds-font-sans); font-variant-numeric: tabular-nums; }
.ds-stat-value.success { color: var(--ds-success); } .ds-stat-value.warning { color: var(--ds-warning); }
.ds-stat-value.danger { color: var(--ds-danger); } .ds-stat-value.info { color: var(--ds-info); }
.ds-stat-label { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); color: var(--ds-text-2); overflow-wrap: anywhere; }
.ds-stat-hint { font-size: var(--ds-text-2xs); color: var(--ds-text-3); overflow-wrap: anywhere; }
.ds-queue { display: grid; gap: var(--ds-space-2); min-width: 0; }
.ds-queue-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-space-2); min-width: 0; }
.ds-queue-title { margin: 0; font: var(--ds-weight-semibold) var(--ds-text-md)/1.3 var(--ds-font-sans); letter-spacing: 0; overflow-wrap: anywhere; }
.ds-queue-hint { flex: 1 1 160px; min-width: 0; font-size: var(--ds-text-xs); color: var(--ds-text-3); overflow-wrap: anywhere; }
.ds-queue-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-left: auto; }
.ds-queue-head .ds-count { background: var(--ds-surface-3); }
.ds-queue-head .ds-count.warning { background: color-mix(in srgb, var(--ds-warning) 12%, var(--ds-surface)); }
.ds-queue-head .ds-count.danger { background: color-mix(in srgb, var(--ds-danger) 12%, var(--ds-surface)); }
.ds-queue-head .ds-count.info { background: color-mix(in srgb, var(--ds-info) 12%, var(--ds-surface)); }
.ds-queue-head .ds-count.success { background: color-mix(in srgb, var(--ds-success) 12%, var(--ds-surface)); }
.ds-table tr[draggable="true"] { cursor: grab; }
.ds-table tr.is-dragging { opacity: 0.45; cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { button.ds-stat { transition: none; } button.ds-stat:active { transform: none; } }

/* ───────── 12. REDUCED MOTION ─────────
   Movement and scale are removed; state changes become a short opacity fade. */
@media (prefers-reduced-motion: reduce) {
  .ds-btn:active:not(:disabled) { transform: none; }
  .ds-sidebar, .ds-main { transition: none; }
  .ds-drawer, .ds-modal { transform: none; transition: opacity var(--ds-dur-fast) linear; }
  .ds-sidepanel, .ds-sidepanel.is-open { clip-path: none; transition: none; }
  html.ds-sidepanel-open .ds-sidepanel-dock { transition: none; }
  .ds-view-item { transition: none; }
  .ds-modal { transform: translate(-50%, -50%); }
  .ds-layer-scrim, .ds-scrim { transition: opacity var(--ds-dur-fast) linear; }
  .ds-toast { animation: ds-fade-in var(--ds-dur-fast) linear both; }
  .ds-toast.is-leaving { animation: ds-fade-out var(--ds-dur-fast) linear both; }
  .ds-progress-bar { transition: none; }
  .ds-skeleton { animation: none; }
  @keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ds-fade-out { from { opacity: 1; } to { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .ds-modal { transform: none; }
}
@media (forced-colors: active) {
  .ds-btn, .ds-input, .ds-select, .ds-chip, .ds-pill, .ds-card, .ds-kpi { border: 1px solid CanvasText; }
  .ds-nav-item.active::before, .ds-tab[aria-selected="true"]::after { background: Highlight; }
}

/* ───────── 13. POLISH PIECES (part 5) ─────────
   Records table extras, record-state cards, loading with elapsed time, empty-state action,
   approval card, confidence meter, stepper, switch, segmented control and the spring micro-interactions.
   Springs are one cubic-bezier with a small overshoot; every one is switched off under reduced motion (block 14). */
.ds-record, .ds-record *, .ds-approval, .ds-loading, .ds-seg, .ds-switch, .ds-step-btn, .ds-meter { box-sizing: border-box; }
:root {
  --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-dur-spring: 250ms;
}

/* spring press and release on every shared control */
.ds-btn, .ds-chip, .ds-tab, .ds-seg-item, .ds-switch, .ds-step-btn {
  transition-property: background-color, border-color, color, transform, box-shadow;
  transition-duration: var(--ds-dur-fast), var(--ds-dur-fast), var(--ds-dur-fast), var(--ds-dur-spring), var(--ds-dur-fast);
  transition-timing-function: var(--ds-ease), var(--ds-ease), var(--ds-ease), var(--ds-ease-spring), var(--ds-ease);
}
.ds-chip:active, .ds-tab:active, .ds-seg-item:active { transform: scale(0.96); }
.ds-tab[aria-selected="true"]::after { animation: ds-tab-in var(--ds-dur-spring) var(--ds-ease-spring) both; transform-origin: center; }
@keyframes ds-tab-in { from { transform: scaleX(0.4); opacity: 0.4; } to { transform: scaleX(1); opacity: 1; } }

/* records table: density toggle, tools row, compact rows, status cell */
.ds-table-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--ds-space-2); padding: 0 0 var(--ds-space-2); }
.ds-table-tools:empty { display: none; }
.ds-table-block.is-compact .ds-table td { height: 32px; padding-top: var(--ds-space-1); padding-bottom: var(--ds-space-1); }
.ds-table-block.is-compact .ds-table th { padding-top: var(--ds-space-1); padding-bottom: var(--ds-space-1); }
.ds-table th { position: sticky; top: 0; z-index: 1; }
.ds-table td, .ds-table th { font-variant-numeric: tabular-nums; }
.ds-table tbody tr:focus-within { background: var(--ds-hover); }

/* segmented control (density, view switches) */
.ds-seg { display: inline-flex; gap: var(--ds-space-1); padding: var(--ds-space-1); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-2); max-width: 100%; }
.ds-seg-item {
  display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 var(--ds-space-3);
  border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-text-2);
  font: var(--ds-weight-medium) var(--ds-text-xs)/1 var(--ds-font-sans); cursor: pointer; white-space: nowrap;
}
.ds-seg-item:hover { color: var(--ds-text); }
.ds-seg-item[aria-pressed="true"] { background: var(--ds-surface-3); color: var(--ds-text); box-shadow: var(--ds-shadow-sm); }
:where(.ds-seg-item, .ds-switch, .ds-step-btn, .ds-record[data-clickable]):focus-visible { outline: none; box-shadow: var(--ds-focus); }
@media (pointer: coarse) { .ds-seg-item { min-height: var(--ds-hit); min-width: var(--ds-hit); } }

/* record-state cards: one card per record, one tone per status */
.ds-records { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--ds-space-3); }
.ds-record {
  --ds-tone: var(--ds-text-3);
  position: relative; display: grid; gap: var(--ds-space-2); min-width: 0; padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-4) var(--ds-space-5);
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); color: var(--ds-text);
  text-align: start; font: inherit;
  transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-spring) var(--ds-ease-spring);
}
.ds-record::before { content: ''; position: absolute; left: 0; top: var(--ds-space-3); bottom: var(--ds-space-3); width: 4px; border-radius: 0 var(--ds-radius-xs) var(--ds-radius-xs) 0; background: var(--ds-tone); }
.ds-record[data-tone="success"] { --ds-tone: var(--ds-success); }
.ds-record[data-tone="warning"] { --ds-tone: var(--ds-warning); }
.ds-record[data-tone="danger"] { --ds-tone: var(--ds-danger); }
.ds-record[data-tone="info"] { --ds-tone: var(--ds-info); }
.ds-record[data-clickable] { cursor: pointer; width: 100%; }
.ds-record[data-clickable]:hover { background: var(--ds-surface-2); border-color: var(--ds-border-strong); transform: translateY(-2px); }
.ds-record[data-clickable]:active { transform: scale(0.98); }
.ds-record-main { min-width: 0; }
.ds-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); min-width: 0; }
.ds-record-title { margin: 0; font: var(--ds-weight-semibold) var(--ds-text-md)/1.3 var(--ds-font-sans); overflow-wrap: anywhere; min-width: 0; }
.ds-record-sub { font-size: var(--ds-text-xs); color: var(--ds-text-3); overflow-wrap: anywhere; }
.ds-record-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--ds-space-2) var(--ds-space-4); margin: 0; }
.ds-record-meta dt { font-size: var(--ds-text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ds-text-3); }
.ds-record-meta dd { margin: 0; font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ds-record-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }

/* loading state: skeleton lines plus time elapsed */
.ds-loading { display: grid; gap: var(--ds-space-3); min-height: 120px; padding: var(--ds-space-4); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); }
.ds-loading-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); font-size: var(--ds-text-sm); color: var(--ds-text-2); }
.ds-loading-label { overflow-wrap: anywhere; min-width: 0; }
.ds-loading-elapsed { flex: none; min-width: 56px; text-align: right; font-size: var(--ds-text-xs); color: var(--ds-text-3); font-variant-numeric: tabular-nums; }
.ds-loading .ds-skeleton { height: 12px; }
.ds-loading .ds-skeleton:nth-of-type(3n + 1) { width: 92%; }
.ds-loading .ds-skeleton:nth-of-type(3n + 2) { width: 76%; }
.ds-loading .ds-skeleton:nth-of-type(3n) { width: 58%; }

/* empty state with exactly one clear action */
.ds-empty .ds-btn { margin-top: var(--ds-space-2); }

/* approval card: a person approves or declines what the system proposes */
.ds-approval { display: grid; gap: var(--ds-space-3); min-width: 0; padding: var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-border); border-left: 4px solid var(--ds-warning); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); }
.ds-approval[data-state="approved"] { border-left-color: var(--ds-success); }
.ds-approval[data-state="declined"] { border-left-color: var(--ds-danger); }
.ds-approval-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); }
.ds-approval-title { margin: 0; font: var(--ds-weight-semibold) var(--ds-text-md)/1.3 var(--ds-font-sans); overflow-wrap: anywhere; }
.ds-approval-body { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-text-2); overflow-wrap: anywhere; }
.ds-approval-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-approval-actions[hidden] { display: none; }
.ds-approval-result { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-text-2); min-height: 20px; }

/* confidence meter: segmented, value in text as well as fill */
.ds-meter { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-xs); color: var(--ds-text-2); }
.ds-meter-segs { display: inline-flex; gap: 2px; }
.ds-meter-seg { width: 16px; height: 8px; border-radius: var(--ds-radius-xs); background: var(--ds-surface-3); transition: background-color var(--ds-dur) var(--ds-ease); }
.ds-meter-seg.is-on { background: var(--ds-accent); }
.ds-meter-text { font-variant-numeric: tabular-nums; }

/* stepper */
.ds-stepper { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; }
.ds-step { display: flex; align-items: center; flex: 1 1 96px; min-width: 0; }
.ds-step-btn {
  display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; min-height: 32px; padding: var(--ds-space-1) var(--ds-space-2);
  border: 0; border-top: 2px solid var(--ds-border-strong); border-radius: 0; background: transparent; color: var(--ds-text-3);
  font: var(--ds-weight-medium) var(--ds-text-xs)/1.3 var(--ds-font-sans); text-align: start; cursor: default;
}
button.ds-step-btn { cursor: pointer; }
.ds-step-n { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: var(--ds-radius-pill); background: var(--ds-surface-3); color: var(--ds-text-2); font-size: var(--ds-text-2xs); font-variant-numeric: tabular-nums; transition: transform var(--ds-dur-spring) var(--ds-ease-spring), background-color var(--ds-dur-fast) var(--ds-ease); }
.ds-step.is-done .ds-step-btn { border-top-color: var(--ds-accent); color: var(--ds-text-2); }
.ds-step.is-done .ds-step-n { background: var(--ds-accent); color: var(--ds-accent-fg); }
.ds-step.is-current .ds-step-btn { border-top-color: var(--ds-accent); color: var(--ds-text); }
.ds-step.is-current .ds-step-n { background: var(--ds-accent-soft); color: var(--ds-accent-text); box-shadow: inset 0 0 0 1px var(--ds-accent-line); transform: scale(1.12); }
@media (pointer: coarse) { button.ds-step-btn { min-height: var(--ds-hit); } }

/* switch */
.ds-switch {
  position: relative; display: inline-flex; flex: none; width: 40px; height: 24px; padding: 0; border: 1px solid var(--ds-control-border); border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-3); cursor: pointer;
}
.ds-switch::before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: var(--ds-radius-pill); background: var(--ds-text-2); transition: transform var(--ds-dur-spring) var(--ds-ease-spring), background-color var(--ds-dur-fast) var(--ds-ease); }
.ds-switch[aria-checked="true"] { background: var(--ds-accent); border-color: var(--ds-accent); }
.ds-switch[aria-checked="true"]::before { transform: translateX(16px); background: var(--ds-accent-fg); }
.ds-switch:active::before { width: 20px; }
.ds-switch[aria-checked="true"]:active::before { transform: translateX(12px); }
.ds-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.ds-switch-row { display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-hit); }
@media (pointer: coarse) { .ds-switch { min-width: 48px; height: 44px; } .ds-switch::before { top: 13px; } .ds-switch[aria-checked="true"]::before { transform: translateX(20px); } }

/* ───────── 14. REDUCED MOTION FOR THE POLISH PIECES ───────── */
@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-chip, .ds-tab, .ds-seg-item, .ds-switch, .ds-step-btn, .ds-record, .ds-step-n, .ds-switch::before, .ds-meter-seg { transition: none; }
  .ds-tab[aria-selected="true"]::after { animation: none; }
  .ds-chip:active, .ds-tab:active, .ds-seg-item:active, .ds-record[data-clickable]:hover, .ds-record[data-clickable]:active { transform: none; }
  .ds-step.is-current .ds-step-n { transform: none; }
  .ds-switch:active::before { width: 16px; }
  .ds-switch[aria-checked="true"]:active::before { transform: translateX(16px); }
  .ds-skeleton { animation: none; }
}

/* ───────── 15. CONSISTENCY FLOORS (part 5) ───────── */
/* One keyboard focus ring for plain controls on pages that adopted the system but are not in the shell. */
html[data-ds] :where(a[href], button, summary, [role="button"], [role="switch"]):focus-visible { outline: 2px solid var(--ds-accent-text); outline-offset: 2px; }
/* Touch targets: 44 px on coarse pointers for the page-level controls the shared system does not own. */
@media (pointer: coarse) {
  html[data-ds] :where(main, .ds-content, body > section) :where(button:not(.ds-seg-item):not(.ds-switch), summary, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])) { min-height: var(--ds-hit); }
}

@media (pointer: coarse) and (prefers-reduced-motion: reduce) { .ds-switch[aria-checked="true"]:active::before { transform: translateX(20px); } }