/* ============================================================
   Clarity — application styles
   Layout: fixed sidebar (240px) / sticky topbar / content.
   Components: card, stat-tile, chip, btn, table, badge, tabs,
   drawer + bottom-tabs, modal, toast, undo-bar, peek-overlay,
   calendar-grid, empty-state, skeleton, popover, teach-tip.
   ============================================================ */

/* ---------- Reset-lite ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--primary-100); color: var(--text); }

/* Quiet custom scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; } /* scrollbar size, not spacing — intentional literal */
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--neutral-400); }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--primary-600); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ---------- Display face (Certifier) ----------
   Space Grotesk carries headlines and display elements ONLY:
   h1/h2 (incl. page/card/modal/peek titles), buttons, kickers,
   stat values, the sidebar wordmark, and tab labels.
   Body, tables, forms, chips, badges stay on the system stack. */
h1, h2,
.page-title,
.page-header h1, .page-header h2,
.card-title, .modal-title, .peek-title,
.calendar-month-label, .empty-state h3,
.sidebar-brand .brand-name,
.stat-value,
.btn, .kicker, .tab {
  font-family: var(--font-display);
}

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: transform var(--dur-slow) var(--ease);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  min-height: var(--topbar-h);
}
.sidebar-brand .brand-name {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.nav-section-label {
  padding: 20px 20px 8px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.side-nav { padding: 0 12px; flex: 1; overflow-y: auto; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--sp-2-5) var(--sp-3);
  margin-bottom: 2px;
  border-radius: var(--radius-md);
  color: var(--text-2);
  font-size: var(--fs-control);
  font-weight: 500;
  min-height: var(--tap-target);
  text-decoration: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.nav-item:hover { background: var(--canvas); color: var(--text); text-decoration: none; }
.nav-item .nav-icon { color: var(--text-muted); display: inline-flex; transition: color var(--dur-fast) ease; }
.nav-item:hover .nav-icon { color: var(--text-2); }
.nav-item .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Certifier app pattern: active item = near-black label + primary indicator */
.nav-item[aria-current="page"] {
  background: var(--primary-50);
  color: var(--ink);
  font-weight: 600;
}
/* Active pill indicator — small rounded bar hugging the left edge */
.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--primary-600);
}
.nav-item[aria-current="page"] .nav-icon { color: var(--primary-600); }
.nav-item.is-primary .nav-label { font-weight: 600; color: var(--text); }
.nav-item.is-primary[aria-current="page"] .nav-label { color: var(--ink); }
.nav-item.is-secondary { color: var(--text-3); }
.nav-item.is-secondary .nav-label { font-weight: 500; }
.nav-item.is-secondary:hover { color: var(--text); }
.nav-item.is-secondary[aria-current="page"] { color: var(--ink); }
.nav-item.is-secondary[aria-current="page"] .nav-icon { color: var(--primary-600); }
.sidebar-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ---------- Main column ---------- */
.main {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--topbar-h);
  padding: 0 var(--content-pad);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none; /* topbar squeeze must never shrink the 44px tap target (360px QA) */
  width: var(--tap-target);
  height: var(--tap-target);
  border: none;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-2);
}
.hamburger:hover { background: var(--canvas); }
.page-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-search {
  flex: 1;
  max-width: 420px;
  margin-left: auto;
  position: relative;
}
.topbar-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.topbar-search input {
  width: 100%;
  height: var(--control-h);
  /* left pad = icon slot (icon sits at left:12px inside the 38px slot, optically centered) */
  padding: 0 14px 0 var(--icon-tile);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--inset);
  font-size: var(--fs-control);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.topbar-search input:hover { border-color: var(--border-strong); }
.topbar-search input::placeholder { color: var(--text-muted); }
.topbar-search input:focus-visible { background: var(--card); border-color: transparent; }
.persona-switcher {
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
}
.persona-switcher label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
/* Native select styled as a pill menu (a11y kept intact) */
.persona-switcher select {
  height: var(--control-h); /* M-03: folded into the 40px standard control height */
  padding: 0 34px 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  -webkit-appearance: none;
  appearance: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  max-width: 240px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.persona-switcher select:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.avatar {
  width: var(--icon-tile);
  height: var(--icon-tile);
  border-radius: var(--radius-full);
  background: var(--primary-100);
  color: var(--primary-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Content ---------- */
.content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--content-pad);
}
/* View-mount fade — new route content settles in (subtle) */
.content > * { animation: view-in 60ms ease-out both; }
@keyframes view-in { from { opacity: 0; } }
.proto-footer {
  padding: var(--sp-4) var(--content-pad) var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Card ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--card-pad); /* M-01: 24px desktop / 16px <900 — per-card, so nested cards never double up */
  container-type: inline-size;
}
/* M-02 — one shared stacking rhythm: 24px between major sibling sections */
.card + .card,
.card + .grid-tiles,
.grid-tiles + .card,
.card + .table-wrap,
.table-wrap + .card { margin-top: var(--sp-6); }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.card-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; }
.card-sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }

/* Interactive cards only earn a hover lift */
.card-interactive,
button.stat-tile {
  cursor: pointer;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
}
.card-interactive:hover,
button.stat-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-strong);
}
.card-interactive:active,
button.stat-tile:active { transform: translateY(0); box-shadow: var(--shadow-1); }

/* ---------- Page header block ---------- */
.page-header { margin-bottom: var(--sp-5); }
/* h2 included: views whose h1 lives in the topbar use an h2 here (same visual spec) */
.page-header h1,
.page-header h2 { font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.022em; line-height: 1.25; }
.page-header .lede { color: var(--text-3); font-size: var(--fs-sm); margin-top: 4px; }

/* ---------- Stat tiles (reference anatomy) ---------- */
.grid-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6); /* M-02 section rhythm */
}
.stat-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--card-pad); /* M-01 */
  container-type: inline-size;
}
.stat-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
  margin-bottom: var(--sp-3);
}
.stat-icon {
  width: var(--icon-tile);
  height: var(--icon-tile);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-50);
  color: var(--primary-600);
  flex-shrink: 0;
}
.stat-icon.tone-success { background: var(--success-50); color: var(--success-600); }
.stat-icon.tone-warning { background: var(--warning-50); color: var(--warning-600); }
.stat-icon.tone-danger  { background: var(--danger-50);  color: var(--danger-600); }
.stat-icon.tone-info    { background: var(--info-50);    color: var(--info-600); }
.stat-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-3); }
.stat-value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.trend-up   { background: var(--success-100); color: var(--success-700); }
.trend-down { background: var(--danger-100);  color: var(--danger-700); }
.trend-flat { background: var(--inset);       color: var(--text-3); }
.trend-info { background: var(--primary-100); color: var(--primary-700); } /* A-036 decided marker */
@container (max-width: 230px) {
  .stat-value { font-size: 1.375rem; } /* compact stat size — coincidentally equals --fs-title; intentional literal */
}

/* ---------- Chips (status vocabulary) ----------
   Reference anatomy: soft tint + colored dot marker + text.
   Status chips carry a ::before dot in the family's 500 tone. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-1) var(--sp-2-5); /* M-08: 4px vertical, h≈26 */
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip-new::before, .chip-progress::before, .chip-waiting::before,
.chip-completed::before, .chip-pending::before, .chip-approved::before,
.chip-denied::before, .chip-urgent::before, .chip-neutral::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.chip-new       { background: var(--info-50);    color: var(--info-700); }
.chip-new::before       { background: var(--info-500); }
.chip-progress  { background: var(--primary-50); color: var(--primary-700); }
.chip-progress::before  { background: var(--primary-500); }
.chip-waiting   { background: var(--warning-50); color: var(--warning-700); }
.chip-waiting::before   { background: var(--warning-500); }
.chip-completed { background: var(--success-50); color: var(--success-700); }
.chip-completed::before { background: var(--success-500); }
.chip-pending   { background: var(--warning-50); color: var(--warning-700); }
.chip-pending::before   { background: var(--warning-500); }
.chip-approved  { background: var(--success-50); color: var(--success-700); }
.chip-approved::before  { background: var(--success-500); }
.chip-denied    { background: var(--danger-50);  color: var(--danger-700); }
.chip-denied::before    { background: var(--danger-500); }
.chip-urgent {
  background: transparent;
  color: var(--danger-700);
  border-color: var(--danger-500);
}
.chip-urgent::before  { background: var(--danger-500); }
.chip-neutral { background: var(--inset); color: var(--text-3); }
.chip-neutral::before { background: var(--neutral-400); }

/* ---------- Badge (count pill on nav) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--primary-600);
  color: var(--text-invert);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
}
.badge[hidden] { display: none; }
/* Count-change pulse — App.refreshBadges re-triggers .badge-pulse */
.badge-pulse { animation: badge-pulse 380ms var(--ease); }
@keyframes badge-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.badge-error {
  background: var(--warning-100);
  color: var(--warning-700);
  border: 1px solid var(--warning-500);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  background: none;
  font-size: var(--fs-control);
  font-weight: 500; /* Certifier control weight */
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--primary-600); /* solid Certifier blue — never gradient */
  color: var(--text-invert);
  box-shadow: 0 1px 2px rgba(21, 101, 216, 0.28);
}
.btn-primary:hover:not(:disabled) { background: var(--primary-700); }
.btn-ghost {
  background: var(--card);
  color: var(--text-2);
  border-color: var(--border-strong);
}
.btn-ghost:hover:not(:disabled) { background: var(--canvas); color: var(--text); }
.btn-danger { background: var(--danger-600); color: var(--text-invert); }
.btn-danger:hover:not(:disabled) { background: var(--danger-700); }
/* M-07 size contract:
   .btn / .btn-md (40px) — standard weight; ALL primary decisions (Approve/Deny, submit) use this.
   .btn-sm (32px) — row-level / tertiary actions only. Views adopt in Batch B. */
.btn-md { min-height: var(--control-h); }
.btn-sm { min-height: var(--control-h-sm); padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

/* ============================================================
   Certifier brand patterns (2026-07-28 rebrand)
   .kicker — small light-blue pill label above headlines
   .link-arrow — "Label ->" text link, arrow nudges on hover
   .check-list — blue check-bullet list
   .card-illus — tinted illustration header zone inside .card
   ============================================================ */

/* Kicker pill — primary-50 bg / primary-600 text (4.80:1, AA at 12px) */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
  margin-bottom: var(--sp-3);
}

/* Arrow text link — body face, 500 weight, 2px nudge on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-600);
  font-size: var(--fs-control);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.link-arrow::after {
  content: "\2192"; /* -> */
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.link-arrow:hover { text-decoration: none; color: var(--primary-700); }
.link-arrow:hover::after { transform: translateX(2px); }

/* Check-bullet list — the shared check glyph as a masked bullet */
.check-list { list-style: none; }
.check-list > li {
  position: relative;
  padding-left: 28px;
  margin-bottom: var(--sp-2);
  min-height: 20px;
}
.check-list > li:last-child { margin-bottom: 0; }
.check-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;  /* glyph size, not spacing — intentional literal */
  height: 18px;
  background: var(--primary-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Tinted illustration header — full-bleed zone at the top of a .card,
   ~3:2, ready to hold a Phase-3 <img> (object-fit: cover). */
.card-illus {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--card-pad);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  background: var(--surface-cool);
  overflow: hidden;
}
.card-illus--cool { background: var(--surface-cool); }
.card-illus--warm { background: var(--surface-tan); }
.card-illus > img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Generated media & mask icons (Phase 3 foundation)
   .media-loop — poster-first ambient video (App.video + App.mountMedia)
   .mask-icon  — tintable alpha-mask raster icons (App.maskIcon)
   .asset-img  — generated stills (App.img)
   .reveal     — one-shot scroll rise-in (App.mountReveals)
   ============================================================ */

/* Ambient loop container. The zero-asset state IS the design: cool
   surface + a subtle primary radial glow (rgba of #1565D8 — the one
   place the primary hex appears as rgba; keep in sync with tokens). */
.media-loop {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(21, 101, 216, 0.14), transparent 62%),
    var(--surface-cool);
}
.media-loop--hero { aspect-ratio: 21 / 9; min-height: 160px; } /* full-width band */
.media-loop--card { aspect-ratio: 3 / 2; }                     /* matches .card-illus */
.media-loop__poster,
.media-loop video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Video fades in over the poster once first frame data exists.
   600ms is an intentional literal — an ambient crossfade, not a
   micro-interaction (documented in POLISH.md). */
.media-loop video { opacity: 0; transition: opacity 600ms ease; }
.media-loop.is-media-playing video { opacity: 1; }
/* Poster failed to load — hide the broken img; fallback surface shows */
.media-loop--noimg .media-loop__poster { display: none; }

/* Generated stills (App.img) — width/height attrs reserve the box;
   height:auto keeps ratio when max-width scales it down. On error the
   img hides itself but the reserved box never collapses (no shift). */
.asset-img { height: auto; }
.asset-img.is-img-missing { visibility: hidden; }

/* Tintable raster icon — the webp is an ALPHA MASK (black shape +
   alpha), cut from background-color: currentColor. NEVER render these
   icon files as plain <img> (they'd paint as black boxes). Per-icon
   mask url = class (.mi-*) below; --mask-size (default 20px) is the
   sanctioned inline custom prop for sizing. */
.mask-icon {
  display: inline-block;
  width: var(--mask-size, 20px);
  height: var(--mask-size, 20px);
  flex-shrink: 0;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
/* Class-per-icon mask urls — relative to this css file (file:// safe) */
.mi-arrow-right   { -webkit-mask-image: url("../assets/icons/arrow-right.webp");   mask-image: url("../assets/icons/arrow-right.webp"); }
.mi-bell          { -webkit-mask-image: url("../assets/icons/bell.webp");          mask-image: url("../assets/icons/bell.webp"); }
.mi-board         { -webkit-mask-image: url("../assets/icons/board.webp");         mask-image: url("../assets/icons/board.webp"); }
.mi-calendar      { -webkit-mask-image: url("../assets/icons/calendar.webp");      mask-image: url("../assets/icons/calendar.webp"); }
.mi-check-circle  { -webkit-mask-image: url("../assets/icons/check-circle.webp");  mask-image: url("../assets/icons/check-circle.webp"); }
.mi-chevron-down  { -webkit-mask-image: url("../assets/icons/chevron-down.webp");  mask-image: url("../assets/icons/chevron-down.webp"); }
.mi-chevron-right { -webkit-mask-image: url("../assets/icons/chevron-right.webp"); mask-image: url("../assets/icons/chevron-right.webp"); }
.mi-clock         { -webkit-mask-image: url("../assets/icons/clock.webp");         mask-image: url("../assets/icons/clock.webp"); }
.mi-document      { -webkit-mask-image: url("../assets/icons/document.webp");      mask-image: url("../assets/icons/document.webp"); }
.mi-filter        { -webkit-mask-image: url("../assets/icons/filter.webp");        mask-image: url("../assets/icons/filter.webp"); }
.mi-flag          { -webkit-mask-image: url("../assets/icons/flag.webp");          mask-image: url("../assets/icons/flag.webp"); }
.mi-home          { -webkit-mask-image: url("../assets/icons/home.webp");          mask-image: url("../assets/icons/home.webp"); }
.mi-inbox         { -webkit-mask-image: url("../assets/icons/inbox.webp");         mask-image: url("../assets/icons/inbox.webp"); }
.mi-lock          { -webkit-mask-image: url("../assets/icons/lock.webp");          mask-image: url("../assets/icons/lock.webp"); }
.mi-logo-mark     { -webkit-mask-image: url("../assets/icons/logo-mark.webp");     mask-image: url("../assets/icons/logo-mark.webp"); }
.mi-plus          { -webkit-mask-image: url("../assets/icons/plus.webp");          mask-image: url("../assets/icons/plus.webp"); }
.mi-pulse         { -webkit-mask-image: url("../assets/icons/pulse.webp");         mask-image: url("../assets/icons/pulse.webp"); }
.mi-search        { -webkit-mask-image: url("../assets/icons/search.webp");        mask-image: url("../assets/icons/search.webp"); }
.mi-send          { -webkit-mask-image: url("../assets/icons/send.webp");          mask-image: url("../assets/icons/send.webp"); }
.mi-sun           { -webkit-mask-image: url("../assets/icons/sun.webp");           mask-image: url("../assets/icons/sun.webp"); }
.mi-undo          { -webkit-mask-image: url("../assets/icons/undo.webp");          mask-image: url("../assets/icons/undo.webp"); }
.mi-user          { -webkit-mask-image: url("../assets/icons/user.webp");          mask-image: url("../assets/icons/user.webp"); }
.mi-users         { -webkit-mask-image: url("../assets/icons/users.webp");         mask-image: url("../assets/icons/users.webp"); }
.mi-warning       { -webkit-mask-image: url("../assets/icons/warning.webp");       mask-image: url("../assets/icons/warning.webp"); }
.mi-x-circle      { -webkit-mask-image: url("../assets/icons/x-circle.webp");      mask-image: url("../assets/icons/x-circle.webp"); }

/* Sidebar logomark — generated mask asset, primary-600 tint */
.sidebar-brand .brand-logo { --mask-size: 30px; color: var(--primary-600); }

/* One-shot scroll reveal — hidden state gated behind html.js-reveal
   (added by App init) so a JS failure never hides content. Stagger via
   the sanctioned inline custom prop --reveal-i (0–4, capped in calc);
   360ms entrance + 70ms step are intentional literals (POLISH.md). */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
  transition-delay: calc(min(var(--reveal-i, 0), 4) * 70ms);
}
html.js-reveal .reveal.is-revealed { opacity: 1; transform: none; }

/* ---------- Form controls ---------- */
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.field .hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }
.input, .select, .textarea {
  width: 100%;
  min-height: var(--control-h); /* M-03: 40px standard */
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--card);
  font-size: var(--fs-control);
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--primary-500);
}
.field .error-text { font-size: var(--fs-xs); color: var(--danger-600); margin-top: 4px; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea {
  border-color: var(--danger-500);
}

/* ---------- Tabs (local nav) ---------- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
}
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--sp-3) var(--sp-4); /* M-04: 12px 16px (h=44 with min-height) */
  min-height: var(--tap-target);
  border: none;
  background: none;
  margin-bottom: -1px;
  color: var(--text-3);
  font-size: var(--fs-control);
  font-weight: 500; /* Certifier control weight */
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
.tab:hover { color: var(--text); text-decoration: none; }
/* Underline grows out from center — reads as a slide between tabs */
.tab::after {
  content: "";
  position: absolute;
  /* underline inset stays just inside the 16px pad so the slide reads centered under the label */
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--primary-600);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}
.tab.active, .tab[aria-selected="true"] { color: var(--primary-700); }
.tab.active::after, .tab[aria-selected="true"]::after { transform: scaleX(1); }

/* ---------- Table (reference style) ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-control);
}
.table th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4); /* M-04: 12px vertical (h=40) matches td rhythm */
  background: var(--inset);
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.table th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.table th:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.table td {
  padding: 12px var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--dur-fast) ease; }
.table tbody tr:hover { background: var(--card-subtle); }
.table tbody tr:last-child td { border-bottom: none; }
.table .ta-right { text-align: right; }
.table .meta {
  color: var(--text-3);
  font-size: var(--fs-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.table tr.row-clickable { cursor: pointer; }
.table tr.row-emphasis { background: var(--primary-50); }
.table tr.row-dim td { opacity: 0.62; }
.row-expand td {
  background: var(--card-subtle);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4);
}

/* Row-level undo state (decision held open) */
.row-undo-state td { background: var(--warning-50); }

/* ---------- List rows (queue / inbox cards) ---------- */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  min-height: var(--tap-target);
}
.list-row:last-child { border-bottom: none; }
.list-row { transition: background var(--dur-fast) ease; }
.list-row:hover { background: var(--card-subtle); }
/* .row-target removed (SD-11): defined but never rendered by any view */

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  color: var(--text-3);
}
/* .empty-icon removed (SD-11): all 11 empty states migrated to App.spot() */
/* Spot illustration (App.spot) — blue-toned inline SVG motif */
.empty-state .empty-art { margin: 0 auto var(--sp-4); }
.empty-state h3 { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: var(--fs-sm); max-width: 40ch; margin: 0 auto var(--sp-3); }

/* ---------- Skeleton shimmer ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--inset);
  border-radius: var(--radius-sm);
  min-height: 14px;
  color: transparent;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 20%, rgba(255, 255, 255, 0.65) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---------- Toasts ---------- */
.toast-region {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);
  right: 16px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - var(--overlay-inset)));
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2-5);
  background: var(--text);
  color: var(--text-invert);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-sm);
  animation: toast-in var(--dur-slow) var(--ease);
}
.toast.toast-success { background: var(--success-700); }
.toast.toast-danger  { background: var(--danger-700); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Undo bar (act-then-undo, A-038) ---------- */
.undo-root {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 85;
  width: max-content;
  max-width: calc(100vw - var(--overlay-inset));
}
.undo-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--surface-inverse);
  color: var(--text-invert);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-4);
  font-size: var(--fs-sm);
  animation: undo-in 260ms var(--ease-out);
}
@keyframes undo-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.undo-bar .undo-count {
  font-variant-numeric: tabular-nums;
  color: var(--neutral-300);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.undo-bar .btn-undo {
  background: none;
  border: 1px solid var(--text-2); /* slate-600 on the inverse surface */
  color: var(--primary-300);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  min-height: 34px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.undo-bar .btn-undo:hover { background: rgba(143, 186, 240, 0.12); } /* --primary-300 tint on the dark panel */

/* ---------- Modal ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(23, 23, 23, 0.45); /* neutral ink scrim */
  z-index: 70;
  animation: fade-in var(--dur) ease;
}
@keyframes fade-in { from { opacity: 0; } }
.modal {
  position: fixed;
  z-index: 71;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - var(--overlay-inset)));
  max-height: min(80vh, 720px);
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-4);
  padding: var(--sp-6);
  animation: modal-in var(--dur-slow) var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.98); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modal-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-3); padding-right: 40px; }
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--inset);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-3);
}
.modal-close:hover { background: var(--border); color: var(--text); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* ---------- Peek overlay (right sheet, HE-09) ---------- */
.peek-overlay {
  position: fixed;
  z-index: 71;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 94vw);
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-4);
  padding: var(--sp-6);
  overflow-y: auto;
  animation: peek-in 360ms var(--ease-sheet);
}
@keyframes peek-in {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
.peek-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-4); padding-right: var(--tap-target); }

/* ---------- Popover (chips legend etc.) ---------- */
.popover {
  position: fixed;
  z-index: 80;
  width: min(300px, calc(100vw - var(--overlay-inset)));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  animation: toast-in var(--dur) var(--ease);
}
.popover h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 var(--sp-2-5);
}
.legend-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2-5);
  padding: 5px 0;
  color: var(--text-2);
}
.legend-row .chip { flex-shrink: 0; min-width: 86px; justify-content: center; }
.popover .popover-note {
  margin-top: var(--sp-2-5);
  padding-top: var(--sp-2-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ---------- First-run teach tip ---------- */
.teach-tip {
  position: fixed;
  z-index: 80;
  width: min(280px, calc(100vw - var(--overlay-inset)));
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  animation: toast-in var(--dur-slow) var(--ease);
}
.teach-tip .teach-dismiss {
  display: inline-block;
  margin-top: 8px;
  border: none;
  background: none;
  color: var(--primary-700);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
}

/* ---------- Calendar (month grid) ---------- */
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.calendar-month-label { font-size: var(--fs-md); font-weight: 700; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.cal-dow {
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0;
}
.cal-day {
  position: relative;
  min-height: 76px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: var(--fs-xs);
  cursor: default;
  text-align: left;
  overflow: hidden;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
button.cal-day { font: inherit; }
.cal-day .day-num { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cal-day.day-other-month { opacity: 0.38; }
.cal-day.day-today { border-color: var(--primary-500); box-shadow: inset 0 0 0 1px var(--primary-500); }
.cal-day.day-today .day-num { color: var(--primary-700); }
.cal-day.day-interactive { cursor: pointer; }
.cal-day.day-interactive:hover { border-color: var(--primary-300); background: var(--primary-50); }

/* Locked date — diagonal hatch (locked-date hatching, V-107), kept quiet */
.cal-day.day-locked {
  background: repeating-linear-gradient(
    135deg,
    var(--card) 0 8px,
    rgba(107, 107, 116, 0.07) 8px 12px
  );
}
.cal-day.day-locked.day-interactive:hover {
  background: repeating-linear-gradient(
    135deg,
    var(--primary-50) 0 8px,
    rgba(21, 101, 216, 0.09) 8px 12px
  );
  border-color: var(--primary-300);
}

/* Pending / decided change-request markers (A-037: terminal states distinct) */
.cal-day.day-pending::after,
.cal-day.day-approved::after,
.cal-day.day-denied::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}
.cal-day.day-pending::after  { background: var(--warning-500); }
.cal-day.day-approved::after { background: var(--success-500); }
.cal-day.day-denied::after   { background: var(--danger-500); }

/* Entry pill inside a day cell */
.entry {
  display: block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--inset);
  color: var(--text-2);
}
.entry[data-etype="Clinic"]         { background: var(--primary-100); color: var(--primary-700); }
.entry[data-etype="Surgery"]        { background: var(--danger-100);  color: var(--danger-700); }
.entry[data-etype="Telehealth"]     { background: var(--info-100);    color: var(--info-700); }
.entry[data-etype="Vacation/PTO"]   { background: var(--success-100); color: var(--success-700); }
.entry[data-etype="Conference/CME"] { background: var(--violet-100);  color: var(--violet-700); }
.entry[data-etype="Out of Office"]  { background: var(--warning-100); color: var(--warning-700); }
.entry[data-etype="Other"]          { background: var(--inset);       color: var(--text-3); }

/* Calendar legend (A-040 teaching apparatus) */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.cal-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.legend-swatch.swatch-locked {
  background: repeating-linear-gradient(
    135deg,
    var(--card) 0 4px,
    rgba(107, 107, 116, 0.14) 4px 7px
  );
}
/* 10px dot diameters below are glyph sizes, not spacing — intentional literals */
.legend-swatch.swatch-pending  { background: var(--warning-500); border-color: var(--warning-500); border-radius: var(--radius-full); width: 10px; height: 10px; }
.legend-swatch.swatch-approved { background: var(--success-500); border-color: var(--success-500); border-radius: var(--radius-full); width: 10px; height: 10px; }
.legend-swatch.swatch-denied   { background: var(--danger-500);  border-color: var(--danger-500);  border-radius: var(--radius-full); width: 10px; height: 10px; }

/* ---------- Activity / audit trail ---------- */
.trail { position: relative; padding-left: 22px; }
.trail::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}
.trail-event { position: relative; padding: 8px 0; }
.trail-event::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 14px;
  width: 10px;  /* dot glyph size, not spacing — intentional literal */
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--card);
  border: 2px solid var(--primary-400);
}
.trail-event .trail-meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------- Drawer scrim + bottom tabs (mobile) ---------- */
.drawer-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(23, 23, 23, 0.45); /* neutral ink scrim */
  z-index: 39;
  border: none;
  padding: 0;
  animation: fade-in var(--dur) ease;
}
.bottom-tabs {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  height: calc(var(--bottom-tabs-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--card);
  border-top: 1px solid var(--border);
}
.bottom-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap-target);
  color: var(--text-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-decoration: none;
  position: relative;
}
.bottom-tab:hover { text-decoration: none; }
.bottom-tab[aria-current="page"] { color: var(--primary-700); }
.bottom-tab .badge {
  position: absolute;
  top: 4px;
  left: calc(50% + 6px);
}

/* ---------- Utilities ---------- */
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.stack > * + * { margin-top: var(--sp-3); }
.muted { color: var(--text-3); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); color: var(--text-muted); }
.strong { font-weight: 600; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mb-4 { margin-bottom: var(--sp-4); }
.divider { border: none; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }
.notice {
  display: flex;
  gap: var(--sp-2-5);
  align-items: flex-start;
  padding: var(--sp-2-5) 14px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  background: var(--info-50);
  color: var(--info-700);
  border: 1px solid var(--info-100);
}
.notice.notice-warning { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-100); }
.notice.notice-danger  { background: var(--danger-50);  color: var(--danger-700);  border-color: var(--danger-100); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Chevron direction utilities (SD-20) — one implementation for every flip/rotate affordance */
.icon-flip-x { transform: scaleX(-1); }               /* back-links: mirrored chevron */
.chev-rot { transition: transform var(--dur-mid) var(--ease-out); }
.is-open .chev-rot,
.chev-rot.is-open,
[aria-expanded="true"] .chev-rot { transform: rotate(90deg); }  /* expand indicators */

/* ---------- Polish details ---------- */
.tnum { font-variant-numeric: tabular-nums; }
.badge { font-variant-numeric: tabular-nums; }
.modal-close { transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
.hamburger { transition: background var(--dur-fast) ease; }
.bottom-tab { transition: color var(--dur-fast) ease; }
.teach-tip .teach-dismiss:hover { text-decoration: underline; }
.cal-legend .legend-item { white-space: nowrap; }

/* M-06 — landing hero balance now lives in landing.js's own .ld-hero rule
   (var(--sp-8) var(--sp-7)); the temporary foundation override was removed. */

/* ============================================================
   Responsive
   >=1200 comfortable · 900–1199 condensed · <900 drawer + tabs
   ============================================================ */

@media (min-width: 900px) and (max-width: 1199px) {
  :root { --sidebar-w: 204px; }
  /* gutter condenses via --content-pad override in tokens.css — topbar/content/footer stay on one axis */
  .persona-switcher label { display: none; }
}

@media (max-width: 899px) {
  .app { grid-template-columns: 1fr; }
  .main { grid-column: 1; }
  .sidebar { transform: translateX(-100%); box-shadow: none; }
  body.drawer-open .sidebar { transform: none; box-shadow: var(--shadow-4); }
  body.drawer-open .drawer-scrim { display: block; }
  body.drawer-open { overflow: hidden; }
  .hamburger { display: inline-flex; }
  .bottom-tabs { display: flex; }
  /* --content-pad + --card-pad drop to 16px via tokens.css override */
  .content { padding-bottom: calc(var(--bottom-tabs-h) + var(--sp-6)); }
  .proto-footer { padding-bottom: calc(var(--bottom-tabs-h) + var(--sp-4)); }
  .topbar-search { display: none; }
  .persona-switcher label { display: none; }
  .persona-switcher select { max-width: 150px; }
  .undo-root { bottom: calc(var(--bottom-tabs-h) + 16px); }
  .grid-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
  .cal-day { min-height: 52px; padding: 4px; }
  .cal-day .entry { display: none; }
  /* The month grid drops pills to stay glanceable, but the visual week
     grid lives in a sideways-scrolling table — its pills must stay. */
  .table-wrap .cal-day .entry { display: block; }
  .peek-overlay { width: 100vw; border-left: none; }
  /* Data tables keep their natural width and scroll inside .table-wrap
     instead of crushing every column to fit the viewport. */
  .table-wrap .table { min-width: 720px; }
  .table-wrap .table th,
  .table-wrap .table td { white-space: nowrap; }
  /* Expanded detail rows hold sentences/cards — let those wrap normally,
     and pin the card to the visible pane while the table scrolls sideways
     (100vw − content padding 32 − card padding 40 − borders 2). */
  .table-wrap .table .row-expand td,
  .table-wrap .table .row-expand td * { white-space: normal; }
  .table-wrap .table .row-expand td > * {
    position: sticky;
    left: 0;
    max-width: calc(100vw - 74px);
    box-sizing: border-box;
  }
  /* Touch targets ≥ 44px on small screens */
  .btn { min-height: var(--tap-target); }
  .btn-sm { min-height: var(--tap-target); }
  .tab { min-height: 48px; }

  /* SD-15 — shared opt-in tr-as-card transform for data tables.
     Add .table-cards to a .table to stack its rows as bordered cards
     below 900px (extracted from the duplicated mq-table/cb-table rules;
     view class hooks keep working until Batch B swaps them over). */
  .table-wrap .table.table-cards { min-width: 0; }
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody { display: block; width: 100%; }
  .table-cards tr {
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--sp-3);
    align-items: center;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-3);
    min-height: var(--tap-target);
  }
  .table-cards td { display: block; border: 0; padding: 0; background: none; }
  .table-cards td:first-child { flex-basis: 100%; }
  .table-wrap .table-cards th,
  .table-wrap .table-cards td { white-space: normal; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .skeleton::after { animation: none; }
  /* Ambient loops: JS never mounts a <video> under reduced motion —
     this is the CSS backstop if the setting flips mid-session. */
  .media-loop video { display: none; }
  /* Reveals render in place — no hidden initial state */
  html.js-reveal .reveal { opacity: 1; transform: none; }
}