/* ═══════════════════════════════════════════════════
   Design System Components · v4
   Source: https://design.seantippen.com/

   Import AFTER tokens.css in any project:
   <link rel="stylesheet" href="https://design.seantippen.com/tokens.css">
   <link rel="stylesheet" href="https://design.seantippen.com/components.css">

   Ships the handful of patterns used on every dashboard:
   nav, banded sections, subsections, cards, data tables,
   KPI bars, info rows. Anything more bespoke stays per-
   dashboard. Edit this file, push, every linked project
   picks up the change.
   ═══════════════════════════════════════════════════ */

/* ─── Base reset used by dashboards ─── */
.ds-reset, .ds-reset * { box-sizing: border-box; }

/* ─── Sticky Nav with scroll-spy ─── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklch, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  height: 56px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 1rem;
}
.nav::-webkit-scrollbar { display: none; }
.nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
}
.nav-brand {
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: -0.2px;
  color: var(--color-text);
  margin-right: 1.5rem;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  align-items: stretch;
  height: 100%;
  flex: 1;
  min-width: 0;
}
.nav a {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0 0.6rem;
  height: 100%;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.nav a:hover { color: var(--color-text); }
.nav a.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding-left: 0.75rem;
}

/* ─── Banded Sections ─── */
.section { scroll-margin-top: 56px; }
.section:nth-child(odd of .section) { background: var(--color-bg); }
.section:nth-child(even of .section) { background: var(--color-surface); }
.section-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-section) 1.5rem;
}

/* ─── Section headers ─── */
.section-num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 2px;
  opacity: 0.7;
  margin-bottom: 0.4rem;
}
.section-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.section-desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: 2rem;
  max-width: var(--measure);
}

/* ─── Subsections ─── */
.subsection { margin-bottom: 2.5rem; }
.subsection:last-child { margin-bottom: 0; }
.subsection-title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}
.subsection-desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

/* ─── Display heading helper (opt-in) ───
   For a master hero header in the Big Shoulders display face.
   The consuming page must load the webfont itself; tokens.css
   only declares the --font-display name. Section titles and
   body should stay Inter, the split is what makes it work.   */
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 0.95;
}

/* ─── Flat card (no gradient, no blur) ─── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-md);
}
.card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.card-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ─── KPI row - accent bar on left, no box ─── */
.kpi {
  border-left: 3px solid var(--color-accent);
  padding: 0.25rem 0 0.25rem 0.75rem;
}
.kpi-label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.kpi-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}
.kpi-delta {
  font-size: var(--text-xs);
  font-weight: 600;
  margin-left: 0.5rem;
}
.kpi-delta.up    { color: var(--color-success); }
.kpi-delta.down  { color: var(--color-danger); }
.kpi-delta.flat  { color: var(--color-text-muted); }

/* KPI grid container - responsive auto-fit */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* ─── Info row - flex label/value with bottom border ─── */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.info-row:last-child { border-bottom: none; }
.info-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}
.info-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 600;
  text-align: right;
  font-family: var(--font-mono);
}

/* ─── Data table - no card wrapper, border-bottom rows ─── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table thead th {
  text-align: left;
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border-emphasis);
  background: transparent;
  position: sticky;
  top: var(--thead-top, 56px); /* set --thead-top:0 on pages with no top bar */
  z-index: 5;
}
.data-table tbody td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}
.data-table tbody tr {
  transition: background var(--duration-fast) var(--ease-out);
}
.data-table tbody tr:hover {
  background: var(--color-surface-hover);
}
.data-table td.num,
.data-table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ─── Underline search input (no box) ─── */
.search-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-emphasis);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  padding: 0.5rem 0.25rem;
  width: 100%;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.search-input::placeholder { color: var(--color-text-muted); }
.search-input:focus {
  border-bottom-color: var(--color-accent);
}

/* ─── Badge (status pills) ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border-emphasis);
  color: var(--color-text-secondary);
  background: var(--color-surface-raised);
  border-radius: var(--radius-full);
}
.badge.success { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-subtle); }
.badge.warning { color: var(--color-warning); border-color: var(--color-warning); background: var(--color-warning-subtle); }
.badge.danger  { color: var(--color-danger);  border-color: var(--color-danger);  background: var(--color-danger-subtle); }
.badge.info    { color: var(--color-info);    border-color: var(--color-info);    background: var(--color-info-subtle); }

/* ─── Button (minimal) ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 0.5rem 0.9rem;
  background: var(--color-surface-raised);
  color: var(--color-text);
  border: 1px solid var(--color-border-emphasis);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn:hover {
  background: var(--color-surface-overlay);
  border-color: var(--color-border-strong);
}
/* v4: physical press. Instant down, eased release. */
.btn:active:not(:disabled) { transform: translateY(1px); transition-duration: var(--duration-instant); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}
.btn.primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ─── Mobile nav - horizontal scroll already handled above ─── */
@media (max-width: 640px) {
  .section-inner { padding: calc(var(--space-section) * 0.6) 1rem; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
  .info-row { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .info-value { text-align: left; }
}

/* ═══════════════════════════════════════════════════
   DASHBOARD PRIMITIVES
   Added 2026-04-21. The composite patterns every
   dashboard rebuilds from scratch: delta chips, stat
   bands, dense/totals tables, progress bars, status
   pills, sparklines, tabs, segmented toggles, toolbar
   rows, filter chips, drawer, empty/error states,
   stale timestamps, skeleton rows.
   ═══════════════════════════════════════════════════ */

/* ─── Delta chip - +12% / -3% inline indicator ─── */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  letter-spacing: 0.2px;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}
.delta::before { font-size: 0.85em; line-height: 1; }
.delta.up   { color: var(--color-success); border-color: var(--color-success); }
.delta.up::before   { content: '\25B2'; }
.delta.down { color: var(--color-danger);  border-color: var(--color-danger); }
.delta.down::before { content: '\25BC'; }
.delta.flat { color: var(--color-text-muted); }
.delta.flat::before { content: '\2022'; }
.delta.plain { border: none; padding: 0; }

/* ─── Stat band - horizontal row of stat blocks ─── */
.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stat {
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--color-border);
}
.stat:last-child { border-right: none; }
.stat-eyebrow {
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--color-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.stat-meta {
  margin-top: 0.35rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
@media (max-width: 640px) {
  .stat { border-right: none; border-bottom: 1px solid var(--color-border); }
  .stat:last-child { border-bottom: none; }
}

/* ─── Dense data table + totals row ─── */
.data-table.dense thead th {
  padding: 0.4rem 0.6rem;
  font-size: var(--text-xs);
}
.data-table.dense tbody td {
  padding: 0.4rem 0.6rem;
  font-size: var(--text-xs);
}
.data-table tr.total td,
.data-table tfoot td {
  font-weight: 800;
  color: var(--color-text);
  border-top: 2px solid var(--color-border-emphasis);
  padding-top: 0.75rem;
  background: var(--color-surface-hover);
}
/* Shortcut classes for colored numerics in table cells */
.data-table td.pos { color: var(--color-success); }
.data-table td.neg { color: var(--color-danger); }

/* ─── Progress bar - inline and block variants ─── */
.progress {
  display: block;
  width: 100%;
  height: 6px;
  background: var(--color-surface-hover);
  overflow: hidden;
  position: relative;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transition: width var(--duration-slow) var(--ease-out);
}
.progress.positive > span { background: var(--color-success); }
.progress.warning  > span { background: var(--color-warning); }
.progress.danger   > span { background: var(--color-danger); }
.progress.sm { height: 3px; }
.progress.lg { height: 10px; }
.progress-block { display: flex; flex-direction: column; gap: 0.35rem; }
.progress-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.progress-block-value {
  font-family: var(--font-mono);
  color: var(--color-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ─── Pill - status indicator with leading dot ─── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--color-border-emphasis);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border-radius: var(--radius-full);
}
.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  flex-shrink: 0;
}
.pill.success::before { background: var(--color-success); }
.pill.warning::before { background: var(--color-warning); }
.pill.danger::before  { background: var(--color-danger); }
.pill.info::before    { background: var(--color-info); }
.pill.live::before    { background: var(--color-success); animation: pill-pulse 1.8s ease-in-out infinite; }
@keyframes pill-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ─── Sparkline wrapper - fixed slot for Chart.js micro-charts ─── */
.sparkline {
  display: inline-block;
  width: 80px;
  height: 24px;
  vertical-align: middle;
}
.sparkline.lg { width: 120px; height: 36px; }

/* ─── Tabs - underline style ─── */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  padding: 0.6rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.tab:hover { color: var(--color-text); }
.tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ─── Segmented toggle - Day | Week | Month ─── */
.segmented {
  display: inline-flex;
  border: 1px solid var(--color-border-emphasis);
  background: var(--color-surface);
}
.segmented > button {
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  border-right: 1px solid var(--color-border);
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.segmented > button:last-child { border-right: none; }
.segmented > button:hover { color: var(--color-text); background: var(--color-surface-hover); }
.segmented > button.active {
  color: var(--color-bg);
  background: var(--color-accent);
}

/* ─── Toolbar row - filters left, actions right ─── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}
.toolbar-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.toolbar-spacer { flex: 1; }

/* ─── Filter chip - removable, selectable ─── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--color-border-emphasis);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.chip:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.chip.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--accent-subtle);
}
.chip-close { font-size: 0.95em; color: var(--color-text-muted); line-height: 1; cursor: pointer; }
.chip-close:hover { color: var(--color-text); }

/* ─── Drawer - right-side slide-in panel with scrim ─── */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.45);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 90vw);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border-emphasis);
  box-shadow: var(--shadow-lg);
  z-index: 501;
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.drawer-title { font-size: var(--text-base); font-weight: 700; color: var(--color-text); }
.drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.drawer-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}
.drawer-close:hover { color: var(--color-text); }

/* ─── Empty state / Error state ─── */
.empty-state,
.error-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-emphasis);
  background: transparent;
}
.error-state {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: var(--color-danger-subtle);
  border-style: solid;
}
.empty-state-icon,
.error-state-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 0.75rem;
  opacity: 0.55;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.empty-state-title,
.error-state-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}
.error-state-title { color: var(--color-danger); }
.empty-state-desc,
.error-state-desc {
  font-size: var(--text-sm);
  max-width: 48ch;
  margin: 0 auto 1rem;
  line-height: var(--leading-snug);
}

/* ─── Stale indicator - "updated 3m ago" ─── */
.stale {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.stale::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
}
.stale.fresh::before { background: var(--color-success); }
.stale.aging::before { background: var(--color-warning); }
.stale.dead::before  { background: var(--color-danger); }

/* ─── Skeleton row - table loading placeholder ─── */
.skeleton-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 0.75rem;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.skeleton-row > span {
  height: 0.9rem;
  background: var(--color-surface-hover);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
/* Opacity pulse, not a travelling gradient sheen. */
@keyframes skeleton-shimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ═══════════════════════════════════════════════════
   v2 ADDITIONS (2026-06-05) - additive, opt-in.
   Nothing above changed, so every linked dashboard is
   unaffected. These add the polish layer: token focus
   ring, View-Transition defaults, animatable props,
   the signal-field background, cursor spotlight, and a
   reading-progress bar.
   ═══════════════════════════════════════════════════ */

/* ─── Animatable custom properties (so they interpolate) ─── */
@property --angle      { syntax: '<angle>';            inherits: false; initial-value: 0deg; }
@property --glow-x     { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }
@property --glow-y     { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; }
@property --glow-opacity { syntax: '<number>';          inherits: false; initial-value: 0; }

/* ─── Token-driven focus ring (use :focus-visible, not :focus) ─── */
.focus-ring:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
.chip:focus-visible,
.segmented > button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ─── View Transitions - calm, token-timed, reduced-motion safe ─── */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(*) { animation-duration: var(--duration-normal); }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-timing-function: var(--ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ─── Background field ───
   The page background is flat. This class used to paint radial accent
   blobs, a dot grid, and a cursor halo; all three are removed. It is kept
   as a no-op fixed fill so existing pages that mount it keep rendering
   the correct canvas colour. Do not reintroduce decoration here. */
.bg-signal {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--color-bg);
}

/* .spotlight is retained as an inert layout wrapper so pages that already
   use it keep working. It paints nothing. */
.spotlight { position: relative; isolation: isolate; }

/* ─── Reading-progress bar - pure CSS scroll timeline ─── */
.read-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--color-accent);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .read-progress {
      animation: read-progress-grow linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes read-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ─── Scroll-reveal - visible by default, animates only when supported ─── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
  }
}
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Screen-reader-only utility (for live regions) ─── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* v2.1 secondary (neon pink) usages */
.progress.secondary > span { background: var(--color-secondary); }
.kpi.secondary { border-left-color: var(--color-secondary); }
.btn.secondary { background: var(--color-secondary); color: var(--color-bg); border-color: var(--color-secondary); }
.btn.secondary:hover { filter: brightness(1.08); border-color: var(--color-secondary); }

/* ═══════════════════════════════════════════════════
   v3 ADDITIONS (2026-07-21) - additive, opt-in.
   Everything above is unchanged, so every linked dashboard
   is unaffected. These add: a horizontal-scroll wrapper for
   wide content, and the left nav rail + mobile top-bar/sheet
   that replaces the old overflowing horizontal .nav row.
   The original .nav still ships above for any page that wants
   a simple top bar; the rail is the default for multi-section
   pages.
   ═══════════════════════════════════════════════════ */

/* ─── Horizontal-scroll wrapper - wrap any .data-table and any
   chart canvas so wide content scrolls inside its own box
   instead of pushing the page wider than the viewport. ─── */
.table-scroll,
.scroll-x {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.table-scroll > .data-table { min-width: max-content; }

/* ─── Left nav rail (desktop >=1100px) + mobile top bar + slide-in
   sheet (<1100px). One link list serves both: on desktop the rail
   is a fixed left column with scroll-spy; on mobile it slides in
   from the left over a scrim, opened by the top-bar menu button. ─── */

/* Desktop rail (fixed left column) */
.nav-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: color-mix(in oklch, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  scrollbar-width: thin;
}
.nav-rail-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.15rem 1.25rem 0.9rem;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: -0.2px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.nav-rail-mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1;
}
.nav-rail-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.75rem 1rem;
  gap: 0.1rem;
  min-height: 0;
}
.nav-rail-group {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-disabled);
  padding: 0.9rem 0.6rem 0.3rem;
}
.nav-rail-group:first-child { padding-top: 0.3rem; }
.nav-rail-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.nav-rail-link:hover { color: var(--color-text); background: var(--color-surface-hover); }
.nav-rail-link.active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  background: var(--accent-subtle);
  font-weight: 600;
}
.nav-rail-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
  font-variant-numeric: tabular-nums;
}
.nav-rail-link.active .nav-rail-num { color: var(--color-accent); }
.nav-rail-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--color-border);
}

/* Mobile top bar (hidden on desktop) */
.nav-top {
  display: none;
  position: sticky;
  top: 0;
  z-index: 110;
  align-items: center;
  gap: 0.6rem;
  height: 56px;
  padding: 0 0.85rem;
  background: color-mix(in oklch, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--color-border);
}
.nav-top .nav-rail-brand {
  padding: 0;
  border: none;
}
.nav-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
}
.nav-top-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

/* Scrim behind the mobile sheet */
.nav-rail-scrim {
  position: fixed;
  inset: 0;
  z-index: 115;
  background: oklch(0 0 0 / 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}

/* Content offset when the rail is present */
body.has-rail { padding-left: 0; }

@media (min-width: 1100px) {
  body.has-rail { padding-left: var(--sidebar-w); }
  .nav-top { display: none; }
  .nav-rail { transform: none; }
}

@media (max-width: 1099.98px) {
  .nav-top { display: flex; }
  .nav-rail {
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-out);
    box-shadow: var(--shadow-lg);
    width: min(300px, 86vw);
  }
  .nav-rail.open { transform: translateX(0); }
  .nav-rail-scrim.open { opacity: 1; pointer-events: auto; }
}

/* ═══════════════════════════════════════════════════
   v4 ADDITIONS (2026-08-31) - additive, opt-in.
   Everything above is unchanged except: .btn gained a press
   state, and the sticky table-head offset became
   var(--thead-top, 56px) with the same default. New here:
   the previously phantom .hover-lift / .hover-border, the
   toast promoted from the reference page, switch, boxed
   input fields, CSS tooltips, a native <dialog> modal,
   accordion, kbd, callouts, animated links and tab
   underlines, indeterminate progress, sortable-header
   affordance, staggered scroll reveals, and the opt-in
   cursor border-glow card grid.
   ═══════════════════════════════════════════════════ */

/* ─── Hover lift + hover border (the canonical card hovers;
   documented since v2, defined since v4) ─── */
.hover-lift {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hover-border { transition: border-color var(--duration-fast) var(--ease-out); }
.hover-border:hover { border-color: var(--color-accent-border); }

/* ─── Toast (was page-local on the reference page) ─── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  padding: 0.7rem 1.1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transform: translateX(120%);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-out),
              opacity var(--duration-slow) var(--ease-out);
  z-index: 700;
  pointer-events: none;
  max-width: min(340px, 84vw);
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success { border-left-color: var(--color-success); }
.toast.danger { border-left-color: var(--color-danger); }

/* ─── Switch - <label class="switch"><input type="checkbox">
   <span class="switch-track"></span>Label</label> ─── */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  -webkit-user-select: none;
  user-select: none;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.switch-track {
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-emphasis);
  position: relative;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  /* the one sanctioned spring: the thumb travels, the color does not */
  transition: translate var(--duration-normal) var(--ease-spring),
              background var(--duration-fast) linear;
}
.switch input:checked + .switch-track {
  background: var(--accent-muted);
  border-color: var(--color-accent-border);
}
.switch input:checked + .switch-track::after {
  translate: 18px 0;
  background: var(--color-accent);
}
.switch input:focus-visible + .switch-track { box-shadow: var(--focus-ring); }
.switch input:disabled + .switch-track { opacity: 0.45; }
.switch:has(input:disabled) { cursor: not-allowed; color: var(--color-text-disabled); }

/* ─── Boxed input field - .field > .field-label + .input +
   .field-help / .field-error. The underline .search-input
   above stays for toolbars; this is the form-grade input. ─── */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}
.input {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-emphasis);
  padding: 0.55rem 0.75rem;
  width: 100%;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-text-muted); }
.input:hover { border-color: var(--color-border-strong); }
.input:focus-visible {
  border-color: var(--color-accent-border);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px var(--color-danger-subtle); }
.input:disabled { opacity: 0.45; cursor: not-allowed; }
.field-help { font-size: var(--text-xs); color: var(--color-text-muted); }
.field-error { font-size: var(--text-xs); color: var(--color-danger); font-weight: 600; }

/* ─── Tooltip - pure CSS, no JS. data-tip="text" on any
   element; data-tip-pos="bottom" flips it under. Keep tips
   short; this is a label, not a paragraph. ─── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  translate: -50% 4px;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  background: var(--color-surface-overlay);
  color: var(--color-text);
  border: 1px solid var(--color-border-emphasis);
  box-shadow: var(--shadow-float);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  padding: 0.3rem 0.55rem;
  white-space: nowrap;
  transition: opacity var(--duration-fast) var(--ease-out),
              translate var(--duration-fast) var(--ease-out);
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; }
[data-tip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 8px);
  translate: -50% -4px;
}
[data-tip-pos="bottom"]:hover::after,
[data-tip-pos="bottom"]:focus-visible::after { translate: -50% 0; }
@media (hover: none) { [data-tip]::after { display: none; } }

/* ─── Modal - native <dialog class="modal">. showModal() gives
   top layer, backdrop, Escape, and focus trap for free. The
   entrance is @starting-style; no JS animation code. ─── */
dialog.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(520px, 92vw);
  max-height: min(80vh, 640px);
  background: var(--color-surface-overlay);
  color: var(--color-text);
  border: 1px solid var(--color-border-emphasis);
  box-shadow: var(--shadow-float-lg);
  padding: 0;
}
dialog.modal[open] { display: flex; flex-direction: column; }
dialog.modal::backdrop {
  background: oklch(0 0 0 / 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference) {
  dialog.modal {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--duration-normal) var(--ease-out),
                translate var(--duration-normal) var(--ease-out),
                overlay var(--duration-normal) allow-discrete,
                display var(--duration-normal) allow-discrete;
  }
  dialog.modal:not([open]) { opacity: 0; translate: 0 8px; }
  @starting-style { dialog.modal[open] { opacity: 0; translate: 0 8px; } }
  dialog.modal::backdrop {
    opacity: 1;
    transition: opacity var(--duration-normal) var(--ease-out),
                overlay var(--duration-normal) allow-discrete,
                display var(--duration-normal) allow-discrete;
  }
  dialog.modal:not([open])::backdrop { opacity: 0; }
  @starting-style { dialog.modal[open]::backdrop { opacity: 0; } }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.modal-title { font-size: var(--text-base); font-weight: 700; }
.modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
}
.modal-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}
.modal-close:hover { color: var(--color-text); }

/* ─── Accordion - native <details class="accordion">. The body
   height animates where interpolate-size is supported and
   snaps open everywhere else. ─── */
details.accordion { border: 1px solid var(--color-border); border-bottom: none; }
details.accordion:last-of-type { border-bottom: 1px solid var(--color-border); }
details.accordion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-out);
}
details.accordion > summary::-webkit-details-marker { display: none; }
details.accordion > summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1;
  color: var(--color-text-muted);
  transition: rotate var(--duration-normal) var(--ease-out);
}
details.accordion[open] > summary::after { rotate: 45deg; }
details.accordion > summary:hover { background: var(--color-surface-hover); }
.accordion-body {
  padding: 0 1rem 1rem;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}
@media (prefers-reduced-motion: no-preference) {
  details.accordion { interpolate-size: allow-keywords; }
  details.accordion::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition: content-visibility var(--duration-normal) allow-discrete,
                opacity var(--duration-normal) var(--ease-out),
                block-size var(--duration-normal) var(--ease-out);
  }
  details.accordion[open]::details-content { opacity: 1; block-size: auto; }
}

/* ─── Kbd - keyboard key chip ─── */
.kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-emphasis);
  border-bottom-width: 2px;
  padding: 0.1rem 0.45rem;
  line-height: 1.5;
  vertical-align: middle;
}

/* ─── Callout - inline note block, left status bar ─── */
.callout {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-hover);
  padding: 0.85rem 1.1rem;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}
.callout-title { font-weight: 700; color: var(--color-text); }
.callout.success { border-left-color: var(--color-success); background: var(--color-success-subtle); }
.callout.warning { border-left-color: var(--color-warning); background: var(--color-warning-subtle); }
.callout.danger  { border-left-color: var(--color-danger);  background: var(--color-danger-subtle); }
.callout.info    { border-left-color: var(--color-info);    background: var(--color-info-subtle); }

/* ─── Animated link - underline grows from the left. Solid
   currentColor via background-image so it survives wraps. ─── */
.link {
  color: var(--color-accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--duration-normal) var(--ease-out);
}
.link:hover,
.link:focus-visible { background-size: 100% 1px; }

/* ─── Animated tab underline - opt-in .tabs.animated. The
   active underline grows in from the left instead of
   snapping. Base .tabs is untouched. ─── */
.tabs.animated .tab { border-bottom-color: transparent; position: relative; }
.tabs.animated .tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-normal) var(--ease-out);
}
.tabs.animated .tab.active { border-bottom-color: transparent; }
.tabs.animated .tab.active::after { transform: scaleX(1); }

/* ─── Indeterminate progress - unknown duration. Falls back
   to an opacity pulse under reduced motion. ─── */
.progress.indeterminate > span { width: 38%; animation: progress-slide 1.2s var(--ease-in-out) infinite; }
@keyframes progress-slide {
  from { translate: -110% 0; }
  to   { translate: 290% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .progress.indeterminate > span { animation: skeleton-shimmer 1.5s ease-in-out infinite; width: 100%; }
}

/* ─── Sortable header affordance - set aria-sort on the th
   (none/ascending/descending); sorting itself is page JS. ─── */
.data-table th[aria-sort] { cursor: pointer; -webkit-user-select: none; user-select: none; }
.data-table th[aria-sort]:hover { color: var(--color-text); }
.data-table th[aria-sort]::after { content: '\2195'; margin-left: 0.35rem; opacity: 0.4; font-size: 0.85em; }
.data-table th[aria-sort="ascending"]::after  { content: '\2191'; opacity: 1; color: var(--color-accent); }
.data-table th[aria-sort="descending"]::after { content: '\2193'; opacity: 1; color: var(--color-accent); }

/* ─── Staggered scroll reveal - children of .reveal-stagger
   rise in sequence as the block scrolls in. Visible by
   default; animates only where view timelines exist. ─── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal-stagger > * {
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
    .reveal-stagger > :nth-child(2) { animation-range: entry 7% cover 33%; }
    .reveal-stagger > :nth-child(3) { animation-range: entry 14% cover 40%; }
    .reveal-stagger > :nth-child(4) { animation-range: entry 21% cover 47%; }
    .reveal-stagger > :nth-child(5) { animation-range: entry 28% cover 54%; }
    .reveal-stagger > :nth-child(n+6) { animation-range: entry 32% cover 58%; }
  }
}

/* ─── Cursor border glow - THE opt-in glow. A radial highlight
   rides the 1px border of every card in a .glow-grid, faint
   across the grid, strong on the hovered card. Requires the
   pointermove helper from agents.md writing --mx/--my on each
   .glow-card. Borders only; fills stay flat. Hover-capable
   pointers only. ─── */
.glow-card { position: relative; }
.glow-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              var(--color-accent), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.glow-grid:hover .glow-card::before { opacity: 0.35; }
.glow-grid .glow-card:hover::before { opacity: 0.9; }
@media (hover: none) { .glow-card::before { display: none; } }

/* ─── Count-up value - pair with the requestAnimationFrame
   helper in agents.md. The class only pins tabular figures so
   the box never jitters while the number rolls. ─── */
.count-up { font-variant-numeric: tabular-nums; }

/* ─── State simulation (specimen pages only) - .is-hover /
   .is-active / .is-focus mirror the real pseudo-classes so a
   reference can show every state without a pointer. Never
   ship these on a production dashboard. ─── */
.btn.is-hover { background: var(--color-surface-overlay); border-color: var(--color-border-strong); }
.btn.primary.is-hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn.secondary.is-hover { filter: brightness(1.08); }
.btn.is-active:not(:disabled) { transform: translateY(1px); }
.is-focus { outline: none; box-shadow: var(--focus-ring); }
.tab.is-hover, .chip.is-hover { color: var(--color-text); }
.chip.is-hover { border-color: var(--color-border-strong); }