/* ============================================================
 * APEX SALES OS · SHARED COMPONENT PRIMITIVES
 *
 * Every visual primitive used on more than one page lives here.
 * Page-local styles go in pages/<id>/<id>.css with .page-<id>- prefix.
 *
 * Class naming: kebab-case, no BEM, no SCSS.
 * Color: only var(--*). Never hardcoded.
 * Exception: rgba(99,91,255,*) — purple shadow/focus/blocked rings
 *            where no token exists for the precise alpha needed.
 *
 * Owner: Worker r4-001 (primitives-css). Do not modify outside this file.
 * Lifted/adapted from design-mockups/*.html — class names are canonical.
 *
 * Animation keyframes referenced:
 *   tickPulse, livePulse, dotPulse, shimmer, spin — defined in 01-base.css
 *   orbRing, orbBar, wfBarPulse                   — defined below (sections 14, 16)
 *
 * Sections (in order):
 *   1.  Topbar + brand
 *   2.  Context bar + breadcrumbs
 *   3.  Buttons
 *   4.  Chips
 *   5.  Sparkline
 *   6.  KPI tile
 *   7.  War room hero
 *   8.  View tabs + body
 *   9.  Modal
 *   10. Drawer
 *   11. Toast
 *   12. Tables
 *   13. Bubbles (iMessage style)
 *   14. Apex orb
 *   15. Slide stage
 *   16. Charts (area / hourly / heatmap / stacked / contrib / audio-waveform)
 *   17. Form fields
 *   18. Toggle / segmented controls
 *   19. Stepper
 *   20. Diagonal-purple block-out (canonical replacement for ALL red)
 *   21. System-state full-page layouts
 * ============================================================ */


/* ------------------------------------------------------------
 * 1 · Topbar + brand
 * ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(140%) blur(8px);
}
.topbar-inner {
  height: 56px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 2px 8px -2px rgba(10,14,26,0.30);
  display: block;
}
.brand-name {
  font-size: 13px; font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}
.topbar-tabs { display: flex; align-items: center; gap: 2px; }
.topbar-tab {
  display: flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  font-size: 12.5px; color: var(--text-soft);
  border-radius: 8px;
  transition: background var(--t), color var(--t);
}
.topbar-tab:hover {
  background: var(--hover);
  color: var(--text);
}
.topbar-tab.active {
  background: var(--primary-soft);
  color: var(--primary);
}
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-tint);
  color: var(--text);
  font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
  border: 1px solid var(--border);
}


/* ------------------------------------------------------------
 * 2 · Context bar + breadcrumbs
 * ------------------------------------------------------------ */
.context-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 12px; color: var(--text-muted);
}
.crumb { color: var(--text-soft); }
.crumb-current {
  color: var(--text);
  font-weight: 500;
}
.crumb-sep {
  color: var(--text-faint);
  margin: 0 4px;
}
.context-bar .right {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}


/* ------------------------------------------------------------
 * 3 · Buttons
 * ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px; font-weight: 500;
  transition: background var(--t), border-color var(--t), color var(--t),
              transform var(--t), box-shadow var(--t), filter var(--t);
}
.btn:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 4px 10px -4px rgba(99, 91, 255, 0.18);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.12);
}

/* Primary — gradient + white text. Hover LIFTS and BRIGHTENS, never goes pale.
 * Canonical Treasury pattern: gradient background is preserved on every state,
 * box-shadow stacks for depth, brightness(1.04) for the glow. */
.btn-primary {
  background: var(--grad);
  border: 1px solid transparent;
  color: #ffffff;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 2px 6px -2px rgba(99, 91, 255, 0.55);
}
.btn-primary:hover {
  /* Override the .btn:hover lift while keeping the gradient + white text */
  background: var(--grad);
  transform: translateY(-1px);
  filter: brightness(1.04);
  color: #ffffff;
  border-color: transparent;
  box-shadow:
    0 8px 18px -6px rgba(99, 91, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.btn-primary:active {
  transform: translateY(0);
  filter: brightness(1.0);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-soft);
}
.btn-ghost:hover {
  background: var(--hover);
  color: var(--text);
  border-color: transparent;
}

.btn-lg { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-xl { height: 42px; padding: 0 18px; font-size: 14px; border-radius: var(--radius-lg); }
.btn-hero {
  height: 52px; padding: 0 24px;
  font-size: 15px; font-weight: 600;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* .btn-danger uses MUTED grey only — never red. Same shape as .btn, slightly
   recessed colors, hover lifts to the regular text color. */
.btn-danger {
  color: var(--text-muted);
  border-color: var(--border-strong);
}
.btn-danger:hover {
  background: var(--bg-tint);
  color: var(--text);
  border-color: var(--text-faint);
}

.btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}


/* ------------------------------------------------------------
 * 4 · Chips
 * ------------------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border-radius: 99px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  font-size: 11px; color: var(--text-soft);
  font-weight: 500;
  white-space: nowrap;
}
.chip .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.chip.purple-soft {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}
.chip.muted {
  background: var(--bg-tint);
  color: var(--text-muted);
}
.chip.live {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--status-done-bd);
}
.chip.live .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  animation: livePulse 1.6s infinite ease-in-out;
}


/* ------------------------------------------------------------
 * 5 · Sparkline
 *   (referenced gradients: #sparkGrad, #sparkGradFill — defined in
 *    shared/components/svg-defs.js, owner: Worker W2)
 * ------------------------------------------------------------ */
.spark {
  width: 100%; height: 28px;
  display: block;
}
.spark-area {
  fill: url(#sparkGradFill);
  opacity: 0.45;
}
.spark-line {
  fill: none;
  stroke: url(#sparkGrad);
  stroke-width: 1.6;
}
.spark-dot { fill: var(--primary); }
.spark-dot-pulse {
  animation: dotPulse 1.6s infinite ease-in-out;
  transform-origin: center;
}


/* ------------------------------------------------------------
 * 6 · KPI tile
 * ------------------------------------------------------------ */
.kpi-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--t), box-shadow var(--t);
}
.kpi-tile:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.kpi-tile-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 500;
}
.kpi-tile-head .ico {
  width: 14px; height: 14px;
  opacity: 0.7;
}
.kpi-tile-row {
  display: flex; align-items: baseline;
  justify-content: space-between;
}
.kpi-tile-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 30px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kpi-tile-num.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.kpi-tile-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 500;
  color: var(--text-muted);
}
.kpi-tile-delta.up   { color: var(--primary); }
/* .down uses faint text — NEVER red. Down deltas read as quiet, not alarming. */
.kpi-tile-delta.down { color: var(--text-faint); }


/* ------------------------------------------------------------
 * 7 · War room hero
 *   Manager / CEO cockpit hero strip. 5-col grid:
 *   target | divider | actual | divider | gap-close action.
 * ------------------------------------------------------------ */
.war-room {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
  box-shadow: var(--shadow-sm);
}
.war-col {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.war-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}
.war-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500;
}
.war-eyebrow.live::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  animation: livePulse 1.6s infinite;
}
.war-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 56px; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.war-num.purple {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.war-num-small {
  font-size: 14px; color: var(--text-muted);
  font-weight: 500;
  margin-left: 4px;
}
.war-meta-line {
  font-size: 12px;
  color: var(--text-muted);
}
.war-bar {
  height: 6px;
  background: var(--bg-tint);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.war-bar-fill {
  height: 100%;
  background: var(--grad);
  transition: width 240ms ease-out;
}
.war-countdown {
  font-family: 'JetBrains Mono', monospace;
  font-size: 40px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.war-pace {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 12px; color: var(--text-soft);
  line-height: 1.5;
}
.war-pace b.accent {
  color: var(--primary);
  font-weight: 600;
}


/* ------------------------------------------------------------
 * 8 · View tabs + body
 *   Pill-segmented tab control; .view-body is the surface below
 *   the tabs (height is set inline by the caller — usually 280/320/380).
 * ------------------------------------------------------------ */
.view-tabs {
  display: flex; gap: 2px;
  padding: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: fit-content;
}
.view-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  font-size: 12px; color: var(--text-soft);
  font-weight: 500;
  border-radius: 6px;
  transition: background var(--t), color var(--t);
  cursor: pointer;
}
.view-tab:hover { color: var(--text); }
.view-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.view-body {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  overflow: hidden;
}


/* ------------------------------------------------------------
 * 9 · Modal
 * ------------------------------------------------------------ */
.modal-bg {
  position: fixed; inset: 0;
  background: var(--modal-scrim);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
  opacity: 0;
  transition: opacity 180ms ease;
}
.modal-bg.open {
  display: flex;
  opacity: 1;
}
.modal {
  width: 460px;
  max-width: calc(100vw - 48px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 180ms ease;
}
.modal-bg.open .modal { transform: translateY(0); }
.modal-head { padding: 20px 22px 12px; }
.modal-head h3 {
  margin: 0 0 6px;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em;
}
.modal-head p {
  margin: 0;
  font-size: 13px; color: var(--text-muted);
  line-height: 1.5;
}
.modal-body { padding: 6px 22px 16px; }
.modal-input {
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}


/* ------------------------------------------------------------
 * 10 · Drawer
 * ------------------------------------------------------------ */
.drawer-bg {
  position: fixed; inset: 0;
  background: var(--drawer-scrim);
  backdrop-filter: blur(2px);
  display: none;
  z-index: 90;
  opacity: 0;
  transition: opacity 180ms ease;
}
.drawer-bg.open {
  display: block;
  opacity: 1;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 560px;
  max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(24px);
  transition: transform 240ms ease;
}
.drawer-bg.open .drawer { transform: translateX(0); }
.drawer-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-head h3 {
  margin: 0;
  font-size: 15px; font-weight: 600;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}
.drawer-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  display: flex; justify-content: flex-end; gap: 8px;
}


/* ------------------------------------------------------------
 * 11 · Toast
 *   Stacks bottom-right. Success uses primary purple. Warning uses
 *   muted text — NEVER red.
 * ------------------------------------------------------------ */
.apex-toasts {
  position: fixed;
  bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 110;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px; color: var(--text);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 8px;
  min-width: 240px;
  max-width: 360px;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.toast .toast-ico {
  width: 16px; height: 16px;
  opacity: 0.7;
}
.toast.success .toast-ico {
  color: var(--primary);
  opacity: 1;
}
.toast.warning .toast-ico {
  color: var(--text-muted);
}


/* ------------------------------------------------------------
 * 12 · Tables
 *   grid-template-columns is set inline per page (each table is bespoke).
 *   .me / .flagged / .top all share the same purple-tint highlight.
 * ------------------------------------------------------------ */
.tbl {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tbl-head,
.tbl-row {
  display: grid;
  align-items: center;
  padding: 10px 14px;
  font-size: 12.5px;
}
.tbl-head {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 11px; font-weight: 500;
}
.tbl-row {
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
  position: relative;
}
.tbl-row:last-child { border-bottom: 0; }
.tbl-row:hover { background: var(--hover); }
.tbl-row.me,
.tbl-row.flagged,
.tbl-row.top {
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 40%);
}
.tbl-row.me::before,
.tbl-row.flagged::before,
.tbl-row.top::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad);
}
.tbl-cell.num { font-variant-numeric: tabular-nums; }


/* ------------------------------------------------------------
 * 13 · Bubbles (iMessage style — NO Slack-style channel symbols)
 *   Three row orientations: .me (right), .them (left), .apex (assistant).
 * ------------------------------------------------------------ */
.bubble-row {
  display: flex; align-items: flex-end; gap: 8px;
  margin-bottom: 14px;
}
.bubble-row.me { flex-direction: row-reverse; }
.bubble-body {
  display: flex; flex-direction: column;
  min-width: 0; max-width: 460px;
}
.bubble-row.me .bubble-body { align-items: flex-end; }
.bubble-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--text);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.bubble-row.apex .bubble-av {
  background: var(--grad);
  color: var(--surface);
  border: 0;
}
.bubble-sender {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 4px 4px;
}
.bubble {
  max-width: 420px;
  padding: 9px 13px;
  border-radius: 18px;
  background: var(--bg-tint);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
}
.bubble-row.me .bubble {
  background: var(--grad);
  color: var(--surface);
  border-bottom-right-radius: 6px;
}
.bubble-row.them .bubble { border-bottom-left-radius: 6px; }
.bubble-row.apex .bubble {
  background: var(--primary-soft);
  color: var(--text);
  border: 1px solid var(--status-done-bd);
  border-bottom-left-radius: 6px;
}
.bubble-reactions {
  display: flex; gap: 4px;
  margin: 4px 4px 0;
}
.bubble-react {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--text-soft);
}
.bubble-react.mine {
  border-color: var(--status-done-bd);
  background: var(--primary-soft);
  color: var(--primary);
}
.bubble-time {
  font-size: 10.5px;
  color: var(--text-faint);
  margin: 4px 4px 0;
  text-align: right;
}
.bubble-attach {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-soft);
}


/* ------------------------------------------------------------
 * 14 · Apex orb
 *   The voice-AI hero element. Purple gradient sphere with a
 *   ring that pulses outward and mic bars inside the core.
 * ------------------------------------------------------------ */
.apex-orb {
  position: relative;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--grad);
  display: grid; place-items: center;
  box-shadow: 0 20px 50px -10px rgba(99, 91, 255, 0.45);
}
.apex-orb-ring {
  position: absolute; inset: -12px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0.6;
  animation: orbRing 2.4s infinite ease-out;
}
.apex-orb-core {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: grid; place-items: center;
  color: var(--surface);
}
.apex-orb-bar {
  display: inline-block;
  width: 3px; margin: 0 1.5px;
  background: var(--surface);
  border-radius: 99px;
  animation: orbBar 0.7s infinite ease-in-out;
}
@keyframes orbRing {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 0;   }
}
@keyframes orbBar {
  0%, 100% { height: 12px; }
  50%      { height: 36px; }
}


/* ------------------------------------------------------------
 * 15 · Slide stage
 *   The pitch-tool deck surface. 16:9 canvas with a faint purple
 *   radial wash + ruled grid underlay.
 * ------------------------------------------------------------ */
.slide-stage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.slide-stage-head {
  padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 12px; color: var(--text-soft);
}
.slide-counter {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}
.slide-canvas {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg);
  overflow: hidden;
}
.slide-canvas-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(99, 91, 255, 0.10), transparent 60%);
}
.slide-canvas-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.25;
}
.slide-canvas-inner {
  position: relative; z-index: 2;
  padding: 56px 64px;
  height: 100%;
  display: flex; flex-direction: column; gap: 12px;
  justify-content: center;
}
.slide-eyebrow {
  font-size: 12px;
  color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500;
}
.slide-headline {
  font-size: 36px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.1;
  margin: 0;
}
.slide-sub {
  font-size: 16px;
  color: var(--text-soft);
  line-height: 1.5;
  max-width: 640px;
}
.slide-stage-foot {
  padding: 10px 18px;
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.slide-nav-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
}
.slide-nav-btn:hover {
  background: var(--hover);
  color: var(--text);
}


/* ------------------------------------------------------------
 * 16 · Charts
 *   Area chart, hourly bars, heatmap, stacked bars, contrib list,
 *   audio waveform. Referenced SVG gradients live in svg-defs.js.
 * ------------------------------------------------------------ */

/* area chart */
.area-chart {
  width: 100%;
  height: 240px;
}
.area-chart .area-fill {
  fill: url(#sparkGradFill);
  opacity: 0.35;
}
.area-chart .area-line {
  fill: none;
  stroke: url(#sparkGrad);
  stroke-width: 1.8;
}
.area-chart .grid-line {
  stroke: var(--border);
  stroke-width: 0.5;
}
.area-chart .axis-label {
  font-size: 10px;
  fill: var(--text-faint);
}

/* hourly bars */
.hourly-bars {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  align-items: end;
  height: 200px;
  padding: 8px 0;
}
.hourly-bar {
  background: var(--grad);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: opacity var(--t);
}
.hourly-bar:hover { opacity: 0.8; }

/* heatmap */
.heatmap {
  display: grid;
  gap: 3px;
}
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--bg-tint);
  position: relative;
  transition: transform var(--t);
}
.heatmap-cell:hover { transform: scale(1.1); }
.heatmap-cell.t1 { background: rgba(99, 91, 255, 0.18); }
.heatmap-cell.t2 { background: rgba(99, 91, 255, 0.35); }
.heatmap-cell.t3 { background: rgba(99, 91, 255, 0.55); }
.heatmap-cell.t4 { background: rgba(99, 91, 255, 0.78); }
.heatmap-cell.t5 { background: var(--primary); }
/* blocked / off — diagonal purple stripes (NEVER red) */
.heatmap-cell.blocked {
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-tint) 0 3px,
    rgba(99, 91, 255, 0.20) 3px 6px
  );
}

/* stacked bars (status segments) */
.stacked-bars {
  display: flex; flex-direction: column;
  gap: 8px;
}
.stacked-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 60px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.stacked-bar-row .bar {
  display: flex;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.stacked-bar-row .seg.done       { background: var(--status-done); }
.stacked-bar-row .seg.working    { background: var(--status-working); }
.stacked-bar-row .seg.stuck      { background: var(--status-stuck); }
.stacked-bar-row .seg.notstarted { background: var(--bg-tint); }

/* contributor list */
.contrib-list {
  display: flex; flex-direction: column;
}
.contrib-row {
  display: grid;
  grid-template-columns: 24px 1fr 80px 40px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.contrib-row:last-child { border-bottom: 0; }
.contrib-row .bar {
  height: 6px;
  background: var(--bg-tint);
  border-radius: 99px;
  overflow: hidden;
}
.contrib-row .bar-fill {
  height: 100%;
  background: var(--grad);
}

/* audio waveform (live recording indicator — purple bars, never red) */
.audio-waveform {
  display: flex; align-items: center; gap: 2px;
  height: 32px;
}
.wf-bar {
  width: 2.5px;
  background: var(--primary);
  border-radius: 99px;
  animation: wfBarPulse 0.9s infinite ease-in-out;
}
@keyframes wfBarPulse {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1);   }
}


/* ------------------------------------------------------------
 * 17 · Form fields
 * ------------------------------------------------------------ */
.field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 12px; font-weight: 500;
  color: var(--text-soft);
  display: flex; align-items: center; gap: 6px;
}
.field-label .hint {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 400;
}
.field input,
.field select,
.field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
}
.field.span-2 { grid-column: span 2; }
.field-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.hint {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 400;
}


/* ------------------------------------------------------------
 * 18 · Toggle / segmented controls
 * ------------------------------------------------------------ */
.toggle-pair {
  display: inline-flex; gap: 2px;
  padding: 3px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 99px;
}
.toggle-pair .seg-opt {
  height: 26px; padding: 0 14px;
  font-size: 12px;
  border-radius: 99px;
  display: grid; place-items: center;
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.toggle-pair .seg-opt.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

.seg-group {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  gap: 2px;
}
.seg-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.seg-row {
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
}
.seg-opt {
  height: 28px; padding: 0 12px;
  font-size: 12px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.seg-opt:hover { color: var(--text); }
.seg-opt.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}


/* ------------------------------------------------------------
 * 19 · Stepper
 * ------------------------------------------------------------ */
.stepper {
  display: inline-flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stepper-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--text-soft);
  transition: background var(--t);
}
.stepper-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.stepper-value {
  padding: 0 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: center;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  height: 32px;
  display: grid; place-items: center;
}


/* ------------------------------------------------------------
 * 20 · Diagonal-purple block-out (CANONICAL)
 *   The ONLY pattern used anywhere we'd otherwise reach for red:
 *   off-days, blocked time-slots, unavailable seats, ineligible
 *   options. Two utility classes with identical paint.
 * ------------------------------------------------------------ */
.block-out,
.blocked-slot {
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-tint) 0 6px,
    rgba(99, 91, 255, 0.22) 6px 12px
  );
  color: var(--text-muted);
}


/* ------------------------------------------------------------
 * 21 · System-state full-page layouts
 *   Empty / loading / not-found / network-error / permission-denied.
 *   Centered, generous whitespace, single primary action.
 * ------------------------------------------------------------ */
.sys-state {
  min-height: calc(100vh - 56px);
  display: grid; place-items: center;
  padding: 60px 24px;
}
.sys-state-inner {
  max-width: 440px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
}
.sys-state-icon {
  width: 56px; height: 56px;
  color: var(--text-faint);
}
.sys-state-title {
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.sys-state-accent {
  font-size: 14px;
  color: var(--primary);
  font-weight: 500;
}
.sys-state-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}
.sys-state-actions {
  display: flex; gap: 8px;
  margin-top: 6px;
}