/*
 * app.css — token-based design system + app shell for the CMS study site.
 * Phase 1 of the visual overhaul (see site/DESIGN.md for the full contract).
 *
 * Light, "Applify"-style SaaS dashboard look: off-white/lavender-gray page,
 * pure-white cards with big radius + soft diffuse shadow, white sidebar with
 * icon+label nav, garnet/gold/sage sommelier accent palette. No purple.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * IMPORTANT — legacy CSS variable compatibility layer (read before editing):
 * site/js/today.js, quiz.js, curriculum.js and dashboard.js inject their own
 * inline styles/<style> blocks that reference an OLDER, dark-theme variable
 * vocabulary directly: --bg, --surface, --text, --muted, --border, --accent,
 * --accent-text, --success, --success-soft, --danger, --danger-soft,
 * --focus-ring, --text-faint, --gold, --sage, --accent-2, and per-phase
 * --phase-1..6 (curriculum.js). Several of those are read with NO fallback
 * value at all (e.g. dashboard.js's `var(--gold)`), so if this file stopped
 * defining them, those elements would render invisible or pick up the
 * *dark-theme* hardcoded fallback hex baked into the old JS (which is
 * illegible on a light background, and in curriculum.js's case brings back
 * a purple "plum" phase color the owner explicitly doesn't want).
 *
 * Per the phase-1 brief we cannot touch any site/js/*.js file, so this file
 * keeps every one of those legacy names alive as aliases onto the new
 * token system below. Route agents restyling today/quiz/curriculum/tasting:
 * you may keep relying on the legacy names (they resolve correctly to the
 * new light palette) or migrate to the new --ink-star, --garnet-star, --gold-star,
 * --sage-* tokens directly — see DESIGN.md. Do not delete the aliases
 * unless you have also removed every reference to them from the JS files.
 * ─────────────────────────────────────────────────────────────────────────
 */

:root {
  /* ── surfaces ──────────────────────────────────────────────────────── */
  --color-bg: #f7f5f2;            /* page background: light gray-lavender off-white */
  --color-surface: #ffffff;       /* cards, sidebar, header */
  --color-surface-2: #fbfaf8;     /* hover / zebra tint on top of a white card */
  --color-surface-sunken: #f1ede7;/* inset "well" panels (code/read blocks, disabled fields) */

  --border: #e7e1dc;              /* hairline card/divider border */
  --border-strong: #d8d0c9;       /* emphasized border (inputs, table rules) */

  /* ── ink / text scale (all AA-checked on white + --color-bg) ─────────── */
  --ink-900: #221e1f;   /* primary text — 16.5:1 on white */
  --ink-700: #4a4344;   /* secondary text / icons — 9.6:1 on white */
  --ink-500: #6e6668;   /* muted / captions / labels — 5.6:1 on white */
  --ink-300: #a79e9f;   /* decorative / disabled only — NOT for body text */

  /* ── garnet — primary brand + primary actions + active nav + key data ── */
  --garnet-100: #f7e6e9;  /* soft pill background (active nav, soft badges) */
  --garnet-600: #8e2a3a;  /* primary — 8.3:1 on white */
  --garnet-700: #7a2431;  /* hover / pressed — 9.9:1 on white */
  --garnet-800: #6e1f2b;  /* text sitting on --garnet-100 — 9.2:1 */

  /* ── gold — secondary metrics, warnings, "in progress" ────────────────
     gold-400 is the requested reference hue; it's for large decorative
     fills/backgrounds only (2.6:1 on white — not AA for text or thin
     strokes). gold-500 is the usable mid tone for rings/icons/fills that
     need the 3:1 non-text contrast minimum. gold-700 is the text-safe
     shade for labels/badge text. */
  --gold-100: #fbf1dc;
  --gold-400: #c99a3c;   /* decorative only */
  --gold-500: #ad7e28;   /* rings, icon strokes, progress fills — 3.6:1 on white */
  --gold-700: #8a6423;   /* text-safe — 5.3:1 on white */

  /* ── sage — success / mastery / progress ──────────────────────────────── */
  --sage-100: #e7f3ea;
  --sage-500: #5b9a6f;   /* rings, icon strokes, progress fills — 3.3:1 on white */
  --sage-700: #2f6b45;   /* text-safe — 6.3:1 on white */

  /* ── danger / info ─────────────────────────────────────────────────── */
  --danger-100: #fbeae8;
  --danger-600: #a5271f; /* 7.2:1 on white */
  --info-100: #e7eef2;
  --info-600: #3a6d8c;   /* 5.6:1 on white */

  /* ── curriculum phase colors (consumed by curriculum.js's
     var(--phase-N, <dark-theme-fallback>) calls — defining them here
     overrides that module's own hardcoded fallbacks, which is how we keep
     phase 5 from rendering as purple "plum" without touching the JS).
     All six pass 4.5:1 with white text, which is how .phase-badge /
     .map-phase-cell below render their label. */
  --phase-1: #2f5e78; /* foundations — steel blue */
  --phase-2: #8e2a3a; /* old world core — garnet */
  --phase-3: #96631e; /* amber */
  --phase-4: #2f6b45; /* cellar green */
  --phase-5: #2b6b66; /* teal (replaces legacy purple "plum") */
  --phase-6: #8a4a2a; /* russet */

  /* ── radius / shadow / spacing / type / motion scales ─────────────────── */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(34, 30, 31, 0.06);
  --shadow: 0 4px 16px rgba(34, 30, 31, 0.08);
  --shadow-lg: 0 16px 40px rgba(34, 30, 31, 0.14);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12px — captions, table heads, eyebrows */
  --text-sm: 0.8125rem;  /* 13px — meta, secondary labels */
  --text-base: 0.9375rem;/* 15px — body */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.0625rem;  /* 17px — card titles */
  --text-xl: 1.25rem;    /* 20px — section titles */
  --text-2xl: 1.5rem;    /* 24px — page title */
  --text-stat: 1.875rem; /* 30px — big bold stat numbers (28–32px target) */

  --transition-fast: 120ms ease;
  --transition: 180ms ease;
  --transition-slow: 280ms ease;

  --sidebar-w: 220px;
  --bottom-tabs-h: 64px;
  --header-h: 72px;

  /* ── legacy variable aliases — DO NOT REMOVE, see file header ─────────── */
  --bg: var(--color-bg);
  --bg-elevated: var(--color-surface);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --text: var(--ink-900);
  --text-dim: var(--ink-700);
  --text-faint: var(--ink-500);
  --muted: var(--ink-500);
  --accent: var(--garnet-600);
  --accent-2: var(--garnet-700);
  --accent-text: var(--garnet-600);
  --accent-soft: var(--garnet-100);
  --success: var(--sage-700);
  --success-soft: var(--sage-100);
  --warn: var(--gold-700);
  --warn-soft: var(--gold-100);
  --gold: var(--gold-500);
  --sage: var(--sage-500);
  --danger: var(--danger-600);
  --danger-soft: var(--danger-100);
  --focus-ring: var(--garnet-700);
  --radius-old: var(--radius);
  --nav-h: var(--bottom-tabs-h);
  --side-nav-w: var(--sidebar-w);
}

/* ── reset + base ──────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--ink-900);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--garnet-600);
}

a:hover {
  color: var(--garnet-700);
}

h1, h2, h3 {
  line-height: 1.25;
  margin: 0 0 var(--space-3);
  font-weight: 700;
  color: var(--ink-900);
}

h1 { font-size: var(--text-2xl); }

h2 {
  font-size: var(--text-xl);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

h3 { font-size: var(--text-lg); }

p {
  margin: 0 0 var(--space-2);
}

code, pre {
  font-family: var(--font-mono);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.dim {
  color: var(--ink-500);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-500);
  margin: 0 0 var(--space-1);
}

/* ── icons ─────────────────────────────────────────────────────────────── */

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ══════════════════════════════════════════════════════════════════════
   SHELL LAYOUT
   Desktop (>700px): fixed white left sidebar (220px) + header row + main.
   Mobile (≤700px): sidebar becomes a fixed bottom tab bar; content is
   full-width; cards stack to a single column.
   ══════════════════════════════════════════════════════════════════════ */

.app-shell {
  min-height: 100vh;
}

.shell-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── sidebar (desktop) ─────────────────────────────────────────────────── */

.sidebar {
  display: none;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-5);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--ink-900);
}

.sidebar__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--garnet-600);
  color: #fff;
  flex: 0 0 auto;
}

.sidebar__brand-mark .icon {
  width: 18px;
  height: 18px;
}

.sidebar__brand strong {
  color: var(--garnet-600);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--space-2);
}

.sidebar__section-label {
  padding: var(--space-4) var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-300);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-700);
  font-size: var(--text-base);
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-link .icon {
  color: var(--ink-500);
  transition: color var(--transition-fast);
}

.nav-link:hover {
  background: var(--color-surface-2);
  color: var(--ink-900);
}

.nav-link.is-active {
  background: var(--garnet-100);
  color: var(--garnet-800);
  font-weight: 700;
}

.nav-link.is-active .icon {
  color: var(--garnet-600);
}

.sidebar__footer {
  margin-top: auto;
  padding: var(--space-4) var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-300);
}

/* ── header row ────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar__titles {
  min-width: 0;
}

.topbar__eyebrow {
  margin: 0 0 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

.page-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.2;
}

/* Route-aware page title: #app-main gets data-route="<name>" from the
   router on every render (app.js, updateNavActiveState/render()). We mirror
   that into the header's title text purely in CSS via :has(), so the shell
   doesn't need any JS changes. Falls back to "Overview" in browsers without
   :has() support (all evergreen browsers as of 2024 support it). */
.page-title::before {
  content: "Overview";
}

.app-shell:has(#app-main[data-route="dashboard"]) .page-title::before { content: "Dashboard"; }
.app-shell:has(#app-main[data-route="today"]) .page-title::before { content: "Today"; }
.app-shell:has(#app-main[data-route="quiz"]) .page-title::before { content: "Quiz"; }
.app-shell:has(#app-main[data-route="curriculum"]) .page-title::before { content: "Curriculum"; }
.app-shell:has(#app-main[data-route="tasting"]) .page-title::before { content: "Tasting"; }

.topbar__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  color: var(--ink-500);
  flex: 0 1 260px;
  min-width: 0;
}

.topbar__search .icon {
  width: 16px;
  height: 16px;
  color: var(--ink-300);
}

.topbar__search input {
  border: none;
  background: transparent;
  outline: none;
  color: var(--ink-900);
  font-size: var(--text-sm);
  font-family: inherit;
  width: 100%;
  min-width: 0;
}

.topbar__search input::placeholder {
  color: var(--ink-300);
}

/* ── main content ──────────────────────────────────────────────────────── */

.main {
  flex: 1;
  padding: var(--space-4) var(--space-4) calc(var(--bottom-tabs-h) + var(--space-5));
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* ── bottom tab bar (mobile) ───────────────────────────────────────────── */

.bottom-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bottom-tabs-h);
  display: flex;
  background: var(--color-surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 20;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-tabs__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--ink-500);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) 0;
}

.bottom-tabs__link .icon {
  width: 20px;
  height: 20px;
}

.bottom-tabs__link.is-active {
  color: var(--garnet-600);
}

@media (min-width: 701px) {
  .bottom-tabs {
    display: none;
  }

  .shell-body {
    margin-left: var(--sidebar-w);
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--color-surface);
    border-right: 1px solid var(--border);
    padding: var(--space-5) 0 var(--space-4);
    z-index: 20;
    overflow-y: auto;
  }

  .main {
    padding: var(--space-5) var(--space-6) var(--space-6);
  }
}

@media (max-width: 380px) {
  .main {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   COMPONENTS
   ══════════════════════════════════════════════════════════════════════ */

/* ── card ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── stat tile (big number + optional progress-ring slot) ────────────────── */

.stat-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (min-width: 480px) {
  .stat-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .stat-tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0;
}

.stat-tile__body {
  min-width: 0;
}

.stat-tile__num {
  font-size: var(--text-stat);
  font-weight: 800;
  margin: 0 0 2px;
  color: var(--ink-900);
  line-height: 1.15;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.stat-tile__unit {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-500);
}

.stat-tile__sub {
  font-size: var(--text-xs);
  margin: 0;
  color: var(--ink-500);
}

.stat-tile__ring {
  flex: 0 0 auto;
  line-height: 0;
}

.ring {
  transform: rotate(-90deg);
}

.trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  margin-left: 4px;
  white-space: nowrap;
}

.trend--up { color: var(--sage-700); }
.trend--down { color: var(--danger-600); }
.trend--flat { color: var(--ink-500); }

/* ── dashboard main grid: primary card + side panel column ────────────────── */

.dash-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 860px) {
  .dash-main-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.dash-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.chart-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.chart-card-head h2 {
  margin: 0;
}

.chart-sub {
  font-size: var(--text-xs);
  color: var(--ink-500);
}

/* ── pill buttons ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--color-surface-2);
  color: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:hover {
  border-color: var(--border-strong);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.btn--primary {
  background: var(--garnet-600);
  border-color: var(--garnet-600);
  color: #fff;
}

.btn--primary:hover {
  background: var(--garnet-700);
  border-color: var(--garnet-700);
  color: #fff;
}

.btn--subtle {
  background: var(--garnet-100);
  border-color: var(--garnet-100);
  color: var(--garnet-800);
}

.btn--subtle:hover {
  background: var(--garnet-600);
  border-color: var(--garnet-600);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
}

.btn--ghost:hover {
  background: var(--color-surface-2);
  border-color: var(--border);
}

.btn--danger {
  border-color: var(--danger-100);
  color: var(--danger-600);
  background: var(--danger-100);
}

.btn--danger:hover {
  background: var(--danger-600);
  border-color: var(--danger-600);
  color: #fff;
}

.btn--small {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.btn--file {
  position: relative;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Generic fallback: any plain <button> in the content area that isn't
   already wearing a more specific component class (.btn, .seg-toggle__btn,
   .flag-btn, etc. all win on specificity/order) still gets a legible,
   on-brand pill instead of the bare browser default. Route-specific
   buttons shipped by today.js/quiz.js/tasting.js (e.g. .score-btn,
   .btn-flag, .choice-btn) fall into this bucket until their owning agent
   gives them a dedicated style. */
.main button {
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--ink-900);
  background: var(--color-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.main button:hover {
  border-color: var(--border-strong);
  background: var(--color-surface);
}

/* ── badges ────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.7;
}

.badge--retired { background: var(--gold-100); color: var(--gold-700); }
.badge--ok { background: var(--sage-100); color: var(--sage-700); }
.badge--warn { background: var(--gold-100); color: var(--gold-700); }
.badge--danger { background: var(--danger-100); color: var(--danger-600); }

.badge--type {
  background: var(--color-surface-2);
  border: 1px solid var(--border);
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge--count {
  background: var(--garnet-600);
  color: #fff;
}

/* ── chip ──────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-700);
}

.chip--garnet { background: var(--garnet-100); border-color: var(--garnet-100); color: var(--garnet-800); }
.chip--gold { background: var(--gold-100); border-color: var(--gold-100); color: var(--gold-700); }
.chip--sage { background: var(--sage-100); border-color: var(--sage-100); color: var(--sage-700); }

/* ── segmented toggle ──────────────────────────────────────────────────── */

.seg-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
  background: var(--color-surface-2);
  flex-shrink: 0;
}

.seg-toggle__btn {
  border: none;
  background: transparent;
  color: var(--ink-500);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: inherit;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.seg-toggle__btn:hover:not(.is-active) {
  color: var(--ink-900);
}

.seg-toggle__btn.is-active {
  background: var(--garnet-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* ── horizontal bar list (e.g. weakest-topics rows) ───────────────────────── */

.bar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
}

.bar-row:hover {
  background: var(--color-surface-2);
}

.bar-row__label {
  flex: 0 0 42%;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-700);
}

.bar-row__track {
  flex: 1;
  height: 8px;
  min-width: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  border: 1px solid var(--border);
  overflow: hidden;
}

.bar-row__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--garnet-600);
}

.bar-row__fill--untested {
  opacity: 0.45;
}

.bar-row__meta {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--ink-500);
  width: 62px;
  text-align: right;
}

/* ── compact static progress rows (tastings / service reps) ───────────────── */

.bar-row-static {
  margin-bottom: var(--space-3);
}

.bar-row-static:last-child {
  margin-bottom: 0;
}

.bar-row-static__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--ink-700);
  margin-bottom: 4px;
}

/* ── list rows with icon chips ("next up" / reminders style) ─────────────── */

.next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.next-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: inherit;
  text-decoration: none;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-sm);
}

a.next-item,
button.next-item {
  cursor: pointer;
}

a.next-item:hover,
button.next-item:hover {
  background: var(--color-surface-2);
}

.next-item__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--garnet-100);
  color: var(--garnet-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.next-item__title {
  flex: 1;
  min-width: 0;
  color: var(--ink-900);
}

.next-item__meta {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--ink-500);
  text-align: right;
}

/* ── collapsible details card ──────────────────────────────────────────── */

details.collapsible-card {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

details.collapsible-card > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--ink-900);
}

details.collapsible-card > summary::-webkit-details-marker {
  display: none;
}

details.collapsible-card > summary::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-500);
  border-bottom: 2px solid var(--ink-500);
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
}

details.collapsible-card[open] > summary::before {
  transform: rotate(45deg);
}

details.collapsible-card .collapsible-body {
  margin-top: var(--space-4);
}

details.collapsible-card .collapsible-body h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-4);
}

details.collapsible-card .collapsible-body h2:first-child {
  margin-top: 0;
}

/* ── empty state ───────────────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--ink-500);
}

.empty-state__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-3);
  color: var(--ink-300);
}

.empty-state__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 var(--space-1);
}

.empty-state__body {
  font-size: var(--text-sm);
  max-width: 40ch;
  margin: 0 auto;
}

/* ── forms ─────────────────────────────────────────────────────────────── */

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}

.form-row label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-700);
}

.form-row__checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: var(--space-2) !important;
}

.form-row__checkbox input[type="checkbox"] {
  width: auto;
}

input, textarea, select {
  background: var(--color-surface);
  border: 1px solid var(--border-strong);
  color: var(--ink-900);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input::placeholder, textarea::placeholder {
  color: var(--ink-300);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--garnet-600);
  box-shadow: 0 0 0 3px var(--garnet-100);
}

/* ── tables ────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
}

table.mastery-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
}

.mastery-table th, .mastery-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  color: var(--ink-700);
}

.mastery-table td:first-child, .mastery-table th:first-child {
  padding-left: 0;
}

.mastery-table th {
  color: var(--ink-500);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* curriculum.js's own interleaving-map table */
table.map-table th, table.map-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--border);
  color: var(--ink-700);
}

table.map-table th {
  background: var(--color-surface-2);
  color: var(--ink-700);
  font-weight: 700;
}

.map-phase-cell {
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.phase-badge {
  display: inline-flex;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
}

.progress-dots {
  display: inline-flex;
  gap: 4px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
  display: inline-block;
}

.dot--filled {
  background: var(--garnet-600);
}

.check {
  color: var(--sage-700);
  font-weight: 700;
}

/* ── charts / legend ───────────────────────────────────────────────────── */

.canvas-wrap {
  width: 100%;
  height: 180px;
}

#trend-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.legend {
  font-size: var(--text-xs);
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

.legend-swatch--score {
  background: var(--garnet-600);
}

.legend-swatch--sub {
  background-image: linear-gradient(90deg, var(--gold-500) 60%, transparent 40%);
  background-size: 6px 3px;
}

/* ── progress bar ──────────────────────────────────────────────────────── */

.progress-bar {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-top: var(--space-1);
}

.progress-bar--small {
  height: 6px;
}

.progress-bar__fill {
  height: 100%;
  background: var(--garnet-600);
  border-radius: var(--radius-pill);
}

/* tasting.js's own rep-progress bar reuses the same visual language */
.rep-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  border: 1px solid var(--border);
  overflow: hidden;
  margin: 4px 0;
}

.rep-progress {
  height: 100%;
  background: var(--sage-500);
  border-radius: var(--radius-pill);
}

/* ── flags / corrections panel ────────────────────────────────────────── */

.flag-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--color-surface-2);
}

.flag-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.flag-item__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.snippet-block {
  margin-top: var(--space-2);
  background: var(--color-surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--text-xs);
  overflow-x: auto;
  white-space: pre;
  color: var(--garnet-700);
}

.flag-btn {
  background: transparent;
  border: none;
  color: var(--ink-500);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.flag-btn:hover, .flag-btn.is-flagged {
  color: var(--garnet-700);
  background: var(--garnet-100);
}

/* ── module-loading placeholder ───────────────────────────────────────── */

.placeholder-panel {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--ink-500);
}

.placeholder-panel h2 {
  justify-content: center;
  color: var(--ink-900);
}

/* ── misc small labels used by tasting.js/curriculum.js markup ───────────── */

.archetype {
  color: var(--ink-500);
  font-size: var(--text-sm);
}

.week-meta {
  color: var(--ink-500);
  font-size: var(--text-sm);
}

.empty-note {
  color: var(--ink-500);
  font-style: italic;
}