/* WP-12 practice-loop UI — site-wide design system (THI-175).
   One declarative token set + typography/spacing scales + component/state styles shared
   by every page. Dependency-free (vanilla CSS, no build step). */

/* ================= §2.2 color tokens ================= */
:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --ink: #111827;
  --ink-soft: #374151;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: #eff6ff;
  --good: #059669;
  --good-soft: #ecfdf5;
  --bad: #dc2626;
  --bad-soft: #fef2f2;
  --warn: #b45309;
  --warn-soft: #fefce8;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.10);

  /* ================= §2.3 typography scale ================= */
  --fs-display: 30px;
  --fs-h1: 24px;
  --fs-h2: 18px;
  --fs-h3: 15px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --lh-tight: 1.3;
  --lh-body: 1.6;

  /* ================= §2.4 spacing scale (4px base) ================= */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
}

* { box-sizing: border-box; }

/* §2.6 global focus visibility — replaces per-element duplicates */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
}

/* ---------------- header (sticky, app-like) ---------------- */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

header h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
}
header h1 span { color: var(--muted); font-weight: 400; font-size: var(--fs-sm); }
header .subtitle { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-sm); }

/* THI-165 site navigation */
header .site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
}
header .site-nav a {
  color: var(--accent);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--sp-1) 0;
  border-bottom: 2px solid transparent;
}
header .site-nav a:hover { border-bottom-color: var(--accent); }
header .site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* THI-165 landing page (marketing surface at /, Option B) */
.landing-hero { text-align: left; }
.landing-hero h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; }
.landing-hero-one { margin: 0 0 var(--sp-4); font-size: var(--fs-body); color: var(--ink-soft); max-width: 40em; }
.cta-button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: inherit;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.cta-button:hover { background: var(--accent-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.landing-steps { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.landing-steps li { margin-bottom: var(--sp-2); color: var(--ink-soft); }
.footer-note { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-sm); }

/* THI-165 footer "For clinicians" crossover link on / */
.site-footer {
  max-width: 880px;
  margin: 0 auto var(--sp-6);
  padding: 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ---------------- layout ---------------- */
main {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
  display: grid;
  gap: var(--sp-5);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.card h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.muted { color: var(--muted); }
.hint { font-size: var(--fs-sm); color: var(--muted); margin-top: 0; line-height: var(--lh-body); }
.status { font-size: var(--fs-sm); min-height: 1.2em; color: var(--ink-soft); }
.status.ok { color: var(--good); }
.status.err { color: var(--bad); }

/* ---------------- passage cards (THI-166) ---------------- */
.passage-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.passage-nav .passage-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.passage-nav .passage-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.passage-nav .passage-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.passage-nav .passage-card.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.passage-nav .passage-card .passage-title { font-weight: 600; font-size: var(--fs-h3); }
.passage-nav .passage-card .passage-source { font-size: var(--fs-xs); color: var(--muted); }
.passage-nav .passage-card .passage-preview {
  font-size: var(--fs-sm);
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

/* ---------------- passage reading view ---------------- */
.passage-view {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--sp-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--surface);
}
.passage-view .source { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-3); }

.sentence { margin: var(--sp-2) 0; }
.sentence.highlight-sentence { background: var(--accent-soft); border-radius: 4px; }
.sentence.fallback-sentence { cursor: help; }
.word { margin: 0 0.12rem; white-space: pre; border-radius: 3px; }
.word.hl { background: var(--bad-soft); color: var(--bad); }
/* WP-13: words with an attributed PI (forced alignment + WP-06 PI stream) */
.word.pi-word { background: var(--bad-soft); color: var(--bad); font-weight: 600; }

/* ---------------- session review ---------------- */
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.review-head button {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-family: inherit;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.review-head button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.review-head .badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.review-head .badge.per-word { background: var(--bad-soft); color: var(--bad); }
.review-head .meta { font-size: var(--fs-sm); color: var(--muted); }
.review-head .muted { font-size: var(--fs-xs); }
.review-note { font-size: var(--fs-sm); color: var(--muted); }
#review-panel .note {
  color: var(--warn);
  background: var(--warn-soft);
  border-left: 3px solid var(--warn);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  border-radius: 4px;
}

/* ---------------- explainer (practice page) ---------------- */
.explainer {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
.explainer .explainer-intro { margin: 0 0 var(--sp-2); font-weight: 600; color: var(--ink); }
.explainer .explainer-steps { margin: 0; padding-left: var(--sp-4); }
.explainer .explainer-steps li { margin: var(--sp-1) 0; }
.explainer .pace-note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }

/* ---------------- record controls ---------------- */
.record-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: end;
  margin-bottom: var(--sp-3);
}
.record-controls label { display: flex; flex-direction: column; font-size: var(--fs-sm); color: var(--muted); gap: var(--sp-1); }
.record-controls select, .record-controls input {
  margin-top: var(--sp-1);
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.record-controls select:focus, .record-controls input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.record-button {
  padding: 0.55rem 1.3rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 600;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.record-button:hover { background: var(--accent-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.record-button.recording {
  background: var(--bad);
  border-color: var(--bad);
}
@media (prefers-reduced-motion: no-preference) {
  .record-button.recording { animation: record-pulse 1.2s ease-in-out infinite; }
}
@keyframes record-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* ---------------- history (THI-180: scannable rows -> detail) ---------------- */
.history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}
.history-row:first-of-type { border-top: none; }
.history-row .tag {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.history-row .tag.baseline { background: var(--warn-soft); color: var(--warn); }
.history-row .when { color: var(--muted); font-size: var(--fs-sm); }
.history-row .history-info { font-size: var(--fs-sm); color: var(--ink-soft); }
.history-row .rate { font-size: var(--fs-sm); color: var(--ink-soft); }
.history-row .audio-dot {
  color: var(--good);
  font-size: var(--fs-sm);
  line-height: 1;
}
.history-row .view-button {
  margin-left: auto;
  padding: 0.3rem 0.9rem;
  font-size: var(--fs-sm);
}
.care-path-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: var(--sp-2) var(--sp-3);
}

/* ---------------- session detail (THI-180) ---------------- */
.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.detail-head .badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.detail-head .badge.per-word { background: var(--bad-soft); color: var(--bad); }
.detail-head .meta { font-size: var(--fs-sm); color: var(--muted); }
.detail-head .muted { font-size: var(--fs-xs); }
.detail-section { margin-top: var(--sp-4); }
.detail-section-title { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }
.session-audio { width: 100%; margin: var(--sp-1) 0; }
.session-audio-note, .session-audio-missing { font-size: var(--fs-sm); margin: var(--sp-1) 0 0; color: var(--muted); }
.session-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ---------------- progress grid / chart ---------------- */
.progress-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.progress-cell { border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-3) var(--sp-4); background: var(--surface); box-shadow: var(--shadow-sm); }
.progress-cell .k { font-size: var(--fs-sm); color: var(--muted); }
.progress-cell .v { font-size: var(--fs-h2); font-weight: 600; color: var(--ink); }
.progress-cell .v.good { color: var(--good); }
.progress-cell .v.bad { color: var(--bad); }
.progress-note { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-3); }

svg.chart { display: block; width: 100%; height: 160px; margin-top: var(--sp-2); }
svg.chart .bar { fill: var(--accent); }
svg.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
svg.chart text { font-size: var(--fs-xs); fill: var(--muted); }

/* ---------------- headline feedback card (THI-179) ---------------- */
.headline-stat { margin-bottom: var(--sp-2); }
.headline-num { font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; }
.headline-num.good { color: var(--good); }
.headline-num.bad { color: var(--bad); }
.headline-na { font-size: var(--fs-h2); color: var(--muted); }

/* ---------------- care-path banner + phase strip (THI-179) ---------------- */
.care-path-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.care-path-row .badge {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.phase-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.phase-strip .k { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.phase-chip {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}
.phase-chip.active { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.phase-chip.not-set { border-style: dashed; }
.settings-editor { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-soft); }
.settings-editor summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.settings-fields { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; margin-top: var(--sp-2); }
.settings-fields label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); }
.settings-fields select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.settings-fields select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
#settings-status { min-height: 1.2em; }
#settings-status.ok { color: var(--good); }
#settings-status.err { color: var(--bad); }

/* ---------------- WP-14 clinician console ---------------- */

.console-footer {
  max-width: 880px;
  margin: 0 auto var(--sp-6);
  padding: 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.console-section { margin-top: var(--sp-4); }
.console-section h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }

.console-audio { width: 100%; margin: var(--sp-1) 0; }
.console-audio-msg { font-size: var(--fs-sm); margin: var(--sp-1) 0 0; color: var(--muted); }

/* review queue */
.queue-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.queue-table th, .queue-table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
.queue-table th {
  font-weight: 600;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.queue-table tbody tr:hover { background: var(--accent-soft); }
.queue-table button {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-family: inherit;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.queue-table button:hover { background: var(--accent-soft); border-color: var(--accent-strong); }

.status-chip {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
}
.status-chip.pending { background: var(--warn-soft); color: var(--warn); }
.status-chip.in_review { background: var(--accent-soft); color: var(--accent); }
.status-chip.reviewed { background: var(--good-soft); color: var(--good); }

/* audio-synced timeline */
.timeline { position: relative; }
.timeline-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bad);
  pointer-events: none;
}
svg.chart rect.bar.timeline-active { fill: var(--bad); }

/* ---------------- forms ---------------- */
.feedback-form { display: grid; gap: var(--sp-3); }
.feedback-form .field { display: flex; flex-direction: column; gap: var(--sp-1); }
.feedback-form .k { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.feedback-form select, .feedback-form input, .feedback-form textarea {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.feedback-form select:focus, .feedback-form input:focus, .feedback-form textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.feedback-form .consent { font-size: var(--fs-sm); color: var(--ink-soft); display: flex; align-items: flex-start; gap: var(--sp-2); }
.feedback-form .consent input { margin-top: var(--sp-1); accent-color: var(--accent); }
.decision-group { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.decision-group label { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--ink-soft); }
.decision-group input { accent-color: var(--accent); }
.submit-review {
  padding: 0.55rem 1rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 600;
  font-family: inherit;
  justify-self: start;
  box-shadow: var(--shadow-sm);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.submit-review:hover { background: var(--accent-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.submit-review:disabled { background: var(--muted); border-color: var(--muted); cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------------- THI-148 billing dashboard ---------------- */
.billing-card { display: grid; gap: var(--sp-3); }
.billing-tier { display: flex; flex-direction: column; gap: var(--sp-1); }
.billing-tier strong { font-size: var(--fs-h2); font-weight: 600; color: var(--ink); }
.billing-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.billing-actions .btn,
.billing-actions button {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 600;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.billing-actions .btn:hover,
.billing-actions button:hover { background: var(--accent-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.billing-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* ---------------- generic buttons (THI-175 §2.6) ---------------- */
.btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 600;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.btn:hover { background: var(--accent-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn.btn-secondary {
  background: var(--surface);
  color: var(--accent);
}
.btn.btn-secondary:hover { background: var(--accent-soft); }

/* empty/loading states feel intentional */
main .muted { text-align: center; padding: var(--sp-6) var(--sp-4); }

@media (max-width: 640px) {
  main { padding: var(--sp-5) var(--sp-3) var(--sp-6); }
  .card { padding: var(--sp-4); }
  .queue-table { display: block; overflow-x: auto; }
}

/* Detector debug overlay — operator-only (?debug=1), never shown to patients. */
.debug-panel {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
}
.debug-title { font-weight: 600; margin: 0 0 var(--sp-2); }
.debug-table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-3); }
.debug-table th { text-align: left; color: var(--muted); font-weight: 400; padding: 2px 8px 2px 0; }
.debug-table td { text-align: right; }
#debug-rejected-log { margin: 0; padding-left: 1.2em; max-height: 8em; overflow-y: auto; }

/* THI-194 verified-clinician public bio page (patient-facing trust page). */
.clinician-name { margin: 0 0 var(--sp-1); font-size: var(--fs-h1); font-weight: 600; color: var(--ink); }
.clinician-credential { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--ink-soft); }
.verified-badge {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--good-soft);
  color: var(--good);
  font-size: var(--fs-xs);
}
.clinician-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}
.clinician-facts .fact { border-top: 1px solid var(--line); padding-top: var(--sp-2); }
.clinician-facts dt { font-size: var(--fs-sm); color: var(--muted); }
.clinician-facts dd { margin: 0; color: var(--ink); }
.about-label { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); }
.clinician-bio { margin: 0; color: var(--ink-soft); line-height: var(--lh-body); white-space: pre-wrap; }

/* THI-204/THI-213 mission page (/mission) — per approved design-thi204.md */
.mission-hero, .mission-cta-band {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--sp-8) var(--sp-4);
  background: var(--surface);
}
.mission-band-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.mission-eyebrow {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mission-display {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mission-lead {
  margin: 0 auto var(--sp-5);
  font-size: var(--fs-body);
  color: var(--ink-soft);
  line-height: var(--lh-body);
  max-width: 40em;
}
.mission-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
}
.mission-cta-secondary {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--fs-body);
  text-decoration: none;
}
.mission-cta-secondary:hover { text-decoration: underline; }
.mission-statement { text-align: center; }
.mission-kicker {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mission-statement-text {
  margin: 0 auto;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 600;
  color: var(--ink);
  max-width: 42rem;
}
.mission-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}
.mission-col-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mission-col-body { margin: 0; color: var(--ink-soft); line-height: var(--lh-body); }
.mission-method-heading {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mission-method-body {
  margin: 0 0 var(--sp-3);
  color: var(--ink-soft);
  line-height: var(--lh-body);
  max-width: 40em;
}
.mission-note {
  margin: var(--sp-3) 0 var(--sp-4);
  color: var(--warn);
  background: var(--warn-soft);
  border-left: 3px solid var(--warn);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  border-radius: 4px;
}
.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.mission-note-muted {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.mission-cta-band { margin-top: var(--sp-6); }
.mission-cta-heading {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
}