/* TARN — Wellness Reflection
   Powered by DHIMLUX Labs · Author: Dhimy Jean
   ------------------------------------------------ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ============================================================
   RESET + VARIABLES
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:            #070316;
  --card:          rgba(20, 14, 48, 0.82);
  --card-border:   rgba(139, 92, 246, 0.18);
  --card-hover:    rgba(139, 92, 246, 0.28);
  --purple-1:      #7c3aed;
  --purple-2:      #8b5cf6;
  --purple-3:      #a78bfa;
  --purple-glow:   rgba(139, 92, 246, 0.12);
  --text-1:        #f1f0ff;
  --text-2:        #c4b5fd;
  /* Was #7c6fa0, which measured 4.13:1 on the card background — below the
     4.5:1 WCAG AA needs for body text. This was a pre-existing issue in the
     dark theme, not introduced by the light theme work. #9b8fbb is 6.27:1
     and still reads as clearly secondary. */
  --text-3:        #9b8fbb;
  /* Layout containers.
     --shell   : the page container. Grows to 1100px on large screens.
     --reading : a narrower cap for PROSE. Long paragraphs stretched to the full
                 shell width run ~150 characters per line, which is tiring to
                 read, so text blocks stay narrower than card grids. */
  --shell:   min(1100px, calc(100% - 48px));
  --reading: 820px;

  --green:         #10b981;
  --green-dim:     rgba(16, 185, 129, 0.15);
  --amber:         #f59e0b;
  --amber-dim:     rgba(245, 158, 11, 0.13);
  --orange:        #f97316;
  --orange-dim:    rgba(249, 115, 22, 0.13);
  --red:           #ef4444;
  --red-dim:       rgba(239, 68, 68, 0.13);
  --blue:          #0ea5e9;
  --radius:        16px;
  --radius-sm:     10px;
  --radius-xs:     7px;
  --shadow:        0 0 48px rgba(139, 92, 246, 0.08);

  /* The page backdrop, as a token so the light theme can swap it. */
  --page-bg:       radial-gradient(ellipse at 20% 10%, #1a103f 0%, #070316 60%);
  --glow-1:        rgba(124, 58, 237, 0.16);
  --particle:      rgba(139, 92, 246, 0.11);   /* matches the original canvas alpha */
  --nav-bg:        rgba(7, 3, 22, 0.75);

  /* Semantic status colours, as TOKENS.
     These were hardcoded pale hex values (#34d399, #fcd34d, #fdba74, #fca5a5)
     chosen for a dark background. On the light theme they measured as low as
     1.42:1 — far below the 4.5:1 WCAG AA needs for body text. */
  --sem-good:      #34d399;
  --sem-warn:      #fcd34d;
  --sem-alert:     #fdba74;
  --sem-critical:  #fca5a5;

  /* Raised surfaces. White overlays only lighten a dark ground; on a light
     ground they do nothing, so the theme supplies its own. */
  --surface-1:     rgba(255,255,255,0.03);
  --surface-2:     rgba(255,255,255,0.06);
  --surface-track: rgba(255,255,255,0.07);
}

body {
  background: var(--page-bg);
  color: var(--text-1);
  font-family: "Inter", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: -300px; left: -300px;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.16), transparent 65%);
  filter: blur(90px);
  animation: driftGlow 18s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes driftGlow {
  from { transform: translate(0, 0); opacity: 0.4; }
  to   { transform: translate(100px, 70px); opacity: 0.65; }
}

#particle-bg {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  backdrop-filter: blur(18px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--card-border);
  z-index: 1000;
}

.nav-brand {
  display: flex; align-items: baseline; gap: 7px;
}

.brand-name {
  font-size: 1.15rem; font-weight: 700;
  color: var(--text-1); letter-spacing: 2.5px;
  text-shadow: 0 0 16px var(--purple-2);
}

.brand-sub {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-3); letter-spacing: 1px;
  text-transform: uppercase;
}

.nav-links { display: flex; gap: 20px; align-items: center; }

.nav-link {
  color: var(--text-2); text-decoration: none;
  font-size: 0.875rem; font-weight: 500; transition: color 0.2s;
}

.nav-link:hover { color: var(--text-1); }

.checkin-cta {
  background: var(--purple-glow);
  border: 1px solid var(--card-border);
  padding: 6px 16px; border-radius: 20px;
  color: var(--purple-3); font-weight: 600;
  transition: all 0.2s;
}

.checkin-cta:hover {
  background: rgba(139, 92, 246, 0.22); color: var(--text-1);
}

/* ============================================================
   CHECK-IN PAGE
   ============================================================ */

.checkin-page {
  position: relative; z-index: 1;
  min-height: 100vh; padding: 100px 20px 60px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}

.checkin-header { text-align: center; max-width: 520px; }

.checkin-header h1 {
  font-size: 2.1rem; font-weight: 700; color: var(--text-1);
  text-shadow: 0 0 22px rgba(139, 92, 246, 0.5); margin-bottom: 8px;
}

.checkin-subtitle {
  color: var(--text-3); font-size: 0.9rem; margin-bottom: 14px;
}

.streak-badge {
  display: inline-block; padding: 5px 14px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px; font-size: 0.91rem; color: var(--text-3);
}

.streak-badge.active {
  background: var(--amber-dim);
  border-color: rgba(245, 158, 11, 0.35); color: var(--sem-warn);
}

.checkin-card {
  width: 100%; max-width: 560px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 24px; padding: 30px;
  display: flex; flex-direction: column; gap: 22px;
  box-shadow: var(--shadow); backdrop-filter: blur(20px);
}

/* Signals */
.signal-group { display: flex; flex-direction: column; gap: 9px; }

.signal-header { display: flex; justify-content: space-between; align-items: center; }

.signal-name { font-size: 0.875rem; font-weight: 500; color: var(--text-2); }

.signal-value-label {
  font-size: 0.895rem; font-weight: 600;
  color: var(--purple-3); min-width: 96px; text-align: right;
}

.stress-val { color: var(--orange); }

.signal-slider {
  -webkit-appearance: none; width: 100%;
  height: 5px; border-radius: 5px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--purple-1), var(--purple-3));
}

.slider-stress {
  background: linear-gradient(90deg, var(--green), var(--red));
}

.signal-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--purple-2);
  box-shadow: 0 0 10px var(--purple-2); cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.signal-slider::-webkit-slider-thumb:hover {
  transform: scale(1.18); box-shadow: 0 0 16px var(--purple-3);
}

.slider-ends {
  display: flex; justify-content: space-between;
  font-size: 0.8125rem; color: var(--text-3);
}

/* Schedule */
.schedule-group { display: flex; flex-direction: column; gap: 10px; }

.schedule-label-title { font-size: 0.875rem; font-weight: 500; color: var(--text-2); }

.schedule-inputs { display: flex; gap: 14px; }

.schedule-field {
  flex: 1; display: flex; flex-direction: column; gap: 5px;
  font-size: 0.88rem; color: var(--text-3);
}

.schedule-number {
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-sm); color: var(--text-1);
  font-size: 0.95rem; font-family: "Inter", sans-serif; width: 100%;
  transition: border-color 0.2s;
}

.schedule-number:focus {
  outline: none; border-color: var(--purple-2);
  box-shadow: 0 0 10px rgba(139,92,246,0.28);
}

.analyze-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  border: none; border-radius: var(--radius); color: white;
  font-family: "Inter", sans-serif; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 0 22px rgba(124,58,237,0.4);
  transition: all 0.3s; letter-spacing: 0.3px;
}

.analyze-btn:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(14,165,233,0.5); }

.analyze-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.checkin-footer-note {
  font-size: 0.94rem; color: var(--text-3); text-align: center; max-width: 420px;
}

.error-toast {
  background: var(--red-dim);
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--sem-critical); padding: 10px 14px;
  border-radius: var(--radius-sm); font-size: 0.93rem; text-align: center;
}

/* ============================================================
   DASHBOARD PAGE
   ============================================================ */

.dashboard-page {
  position: relative; z-index: 1;
  /* Was a fixed 780px, which used only 61% of a 1280px viewport and 41% of a
     1920px one — the header spanned the full width while the content sat in a
     narrow column, so the page read as a phone layout dropped into a desktop. */
  width: var(--shell);
  margin: 0 auto;
  padding: 80px 0 56px;
  display: flex; flex-direction: column; gap: 18px;
}

/* Header */
.dash-header { padding-top: 14px; }

.dash-date-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

.dash-date { font-size: 1.3rem; font-weight: 700; color: var(--text-1); }

.dash-subtitle {
  font-size: 0.86rem; color: var(--text-3);
  margin-top: 3px; letter-spacing: 0.5px; text-transform: uppercase;
}

.streak-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 13px;
  background: var(--amber-dim);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 20px; font-size: 0.91rem; color: var(--sem-warn);
}

/* Score Hero */
.score-hero {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 24px; padding: 36px 32px 28px;
  display: flex; align-items: center; gap: 32px;
  backdrop-filter: blur(20px); box-shadow: var(--shadow);
}

.score-hero-main { flex: 1; text-align: center; }

.score-ring {
  display: flex; align-items: baseline;
  justify-content: center; gap: 4px; margin-bottom: 14px;
}

.score-number {
  font-size: 5.5rem; font-weight: 700; color: var(--text-1); line-height: 1;
  text-shadow: 0 0 30px rgba(139,92,246,0.55);
}

.score-unit { font-size: 1.3rem; color: var(--text-3); font-weight: 400; }

.score-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 6px;
}

.score-label {
  font-size: 0.87rem; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1.5px;
}

/* Confidence sidebar */
.score-confidence {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 16px 20px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius); min-width: 110px;
}

.confidence-label {
  font-size: 0.80rem; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1px;
}

.confidence-value {
  font-size: 1.8rem; font-weight: 700; color: var(--purple-3);
}

.confidence-bar-wrap {
  width: 100%; height: 5px;
  background: var(--surface-track); border-radius: 5px; overflow: hidden;
}

.confidence-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--purple-1), var(--purple-3));
  border-radius: 5px; transition: width 1s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* Tier badges */
.tier-badge {
  display: inline-block; padding: 4px 14px;
  border-radius: 20px; font-size: 0.895rem; font-weight: 600; letter-spacing: 0.4px;
}

.tier-optimal  { background: var(--green-dim);  border: 1px solid rgba(16,185,129,0.4);  color: var(--sem-good); }
.tier-good     { background: var(--green-dim);  border: 1px solid rgba(16,185,129,0.25); color: var(--sem-good); }
.tier-moderate { background: var(--amber-dim);  border: 1px solid rgba(245,158,11,0.35); color: var(--sem-warn); }
.tier-low      { background: var(--orange-dim); border: 1px solid rgba(249,115,22,0.35); color: var(--sem-alert); }
.tier-critical { background: var(--red-dim);    border: 1px solid rgba(239,68,68,0.4);   color: var(--sem-critical); }

/* Score delta */
.score-delta {
  font-size: 0.895rem; font-weight: 600; padding: 3px 9px; border-radius: 20px;
}

.score-delta.positive { color: var(--sem-good); background: var(--green-dim); }
.score-delta.negative { color: var(--sem-critical); background: var(--red-dim); }
.score-delta.neutral  { color: var(--text-3); }

/* ============================================================
   METRICS GRID
   ============================================================ */

.metrics-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}

.metric-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column; gap: 7px;
  backdrop-filter: blur(16px); transition: border-color 0.3s;
}

.metric-label {
  font-size: 0.8125rem; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}

.metric-sublabel { font-size: 0.895rem; color: var(--text-3); }

.metric-card.risk-low      { border-color: rgba(16,185,129,0.3); }
.metric-card.risk-moderate { border-color: rgba(245,158,11,0.35); }
.metric-card.risk-high     { border-color: rgba(249,115,22,0.4); }
.metric-card.risk-critical { border-color: rgba(239,68,68,0.5); box-shadow: 0 0 18px rgba(239,68,68,0.08); }

.metric-risk-value { font-size: 1.55rem; font-weight: 700; }

.metric-card.risk-low      .metric-risk-value { color: var(--sem-good); }
.metric-card.risk-moderate .metric-risk-value { color: var(--sem-warn); }
.metric-card.risk-high     .metric-risk-value { color: var(--sem-alert); }
.metric-card.risk-critical .metric-risk-value { color: var(--sem-critical); }

.metric-number { font-size: 2rem; font-weight: 700; color: var(--text-1); line-height: 1.1; }

.progress-bar {
  height: 5px; background: var(--surface-track);
  border-radius: 5px; overflow: hidden;
}

.progress-fill { height: 100%; width: 0%; border-radius: 5px; }

/* ============================================================
   INTELLIGENCE BRIEF
   ============================================================ */

.intel-brief-card {
  background: linear-gradient(135deg, rgba(124,58,237,0.09), rgba(14,165,233,0.06));
  border: 1px solid rgba(139,92,246,0.22);
  border-radius: var(--radius); padding: 22px;
  backdrop-filter: blur(16px);
}

.brief-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

.brief-action { grid-column: span 2; }

.brief-item {
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
}

.brief-item-label {
  font-size: 0.80rem; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;
}

.brief-item-value { font-size: 0.875rem; font-weight: 500; line-height: 1.5; }

.brief-item-value.strength { color: var(--sem-good); }
.brief-item-value.risk     { color: var(--sem-alert); }
.brief-item-value.action   { color: var(--text-2); }

/* ============================================================
   FOCUS WINDOWS
   ============================================================ */

.focus-windows-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 22px;
  backdrop-filter: blur(16px);
}

.windows-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}

.window-item {
  padding: 16px 14px; text-align: center;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 6px;
}

.window-icon { font-size: 1.3rem; }

.window-label {
  font-size: 0.895rem; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.8px;
}

.window-value { font-size: 0.92rem; font-weight: 600; color: var(--text-2); line-height: 1.4; }

.window-item.peak        { border-color: rgba(139,92,246,0.25); }
.window-item.break-w     { border-color: rgba(245,158,11,0.2); }
.window-item.recovery-w  { border-color: rgba(16,185,129,0.2); }

/* ============================================================
   SHARED BLOCK STYLES
   ============================================================ */

.block-title {
  font-size: 0.94rem; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px;
}

/* Narrative */
.narrative-block {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 22px; backdrop-filter: blur(16px);
}

.narrative-text {
  font-size: 0.895rem; line-height: 1.75; color: var(--text-2);
}

.risk-critical { color: var(--sem-critical); }
.risk-high     { color: var(--sem-alert); }
.risk-moderate { color: var(--sem-warn); }
.risk-low      { color: var(--sem-good); }

/* ============================================================
   EXPLAINABILITY BLOCK
   ============================================================ */

.explainability-block {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 22px; backdrop-filter: blur(16px);
}

.explain-intro {
  font-size: 0.88rem; color: var(--text-3); margin-bottom: 16px; margin-top: -8px;
}

.contributors { display: flex; flex-direction: column; gap: 9px; }

.contributor-row {
  display: flex; align-items: center; gap: 12px;
}

.contributor-label {
  font-size: 0.92rem; color: var(--text-2); width: 120px; flex-shrink: 0;
}

.contributor-bar-wrap {
  flex: 1; height: 8px;
  background: var(--surface-2);
  border-radius: 8px; overflow: visible;
  position: relative; display: flex; align-items: center;
}

.contributor-bar {
  height: 100%; border-radius: 8px;
  transition: width 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
  min-width: 4px;
}

.contributor-bar.positive { background: linear-gradient(90deg, #10b981, #34d399); }
.contributor-bar.negative { background: linear-gradient(90deg, #ef4444, #f87171); }

.contributor-delta {
  font-size: 0.895rem; font-weight: 700; width: 40px;
  text-align: right; flex-shrink: 0;
}

.contributor-delta.positive { color: var(--sem-good); }
.contributor-delta.negative { color: var(--sem-critical); }
.contributor-delta.zero     { color: var(--text-3); }

/* ============================================================
   TREND BLOCK
   ============================================================ */

.trend-block {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 22px; backdrop-filter: blur(16px);
}

.trend-legend {
  display: flex; align-items: center; gap: 16px;
  font-size: 0.93rem; color: var(--text-3); margin-bottom: 16px; flex-wrap: wrap;
}

.legend-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 4px;
}

.trend-block canvas { width: 100% !important; background: transparent; margin-bottom: 4px; }

/* ============================================================
   AI INSIGHT
   ============================================================ */

.insight-block {
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(14,165,233,0.05));
  border: 1px solid rgba(139,92,246,0.24);
  border-radius: var(--radius); padding: 22px; backdrop-filter: blur(16px);
}

.insight-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}

.ai-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.24);
  border-radius: 20px; font-size: 0.8125rem; color: var(--purple-3); font-weight: 500;
}

.ai-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple-2); animation: pulse 2s infinite;
}

@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }

.insight-text {
  font-size: 0.875rem; line-height: 1.78; color: var(--text-2); margin-bottom: 12px;
}

.insight-disclaimer {
  font-size: 0.80rem; color: var(--text-3);
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06);
}

/* ============================================================
   RECOMMENDATIONS
   ============================================================ */

.rec-block {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 22px; backdrop-filter: blur(16px);
}

.recommendations { display: flex; flex-direction: column; gap: 11px; }

.rec-card {
  display: flex; gap: 14px; padding: 15px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm); transition: border-color 0.2s;
}

.rec-card:hover { border-color: rgba(139,92,246,0.28); }

.rec-icon { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.rec-content { flex: 1; }
.rec-title { font-size: 0.95rem; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.rec-body  { font-size: 0.90rem; color: var(--text-3); line-height: 1.6; }

.no-recs, .rec-loading {
  font-size: 0.95rem; color: var(--text-3); text-align: center; padding: 20px 0;
}

/* ============================================================
   CONFIDENCE REASON
   ============================================================ */

.confidence-reason {
  font-size: 0.86rem; color: var(--text-3);
  text-align: center; line-height: 1.45; margin-top: 2px;
}

/* ============================================================
   TREND INTELLIGENCE — EMPTY STATE
   ============================================================ */

.trend-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 32px 20px; gap: 12px;
}

.trend-empty-icon { font-size: 2.2rem; opacity: 0.5; }

.trend-empty-title {
  font-size: 1rem; font-weight: 600; color: var(--text-2);
}

.trend-empty-msg {
  font-size: 0.92rem; color: var(--text-3);
}

.trend-unlock-list {
  list-style: none; display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 260px;
}

.trend-unlock-list li {
  font-size: 0.92rem; color: var(--text-3); padding: 8px 14px;
  background: rgba(139,92,246,0.05);
  border: 1px solid rgba(139,92,246,0.12);
  border-radius: var(--radius-sm);
}

.trend-unlock-list li::before { content: "·  "; color: var(--purple-3); font-weight: 700; }

.trend-gate-progress { width: 100%; max-width: 260px; margin-top: 8px; }

.trend-gate-label {
  font-size: 0.95rem; color: var(--text-3); margin-bottom: 8px; text-align: left;
}

.trend-gate-label strong { color: var(--purple-3); }

.trend-gate-bar-wrap {
  height: 6px; background: var(--surface-track);
  border-radius: 6px; overflow: hidden;
}

.trend-gate-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple-1), var(--purple-3));
  border-radius: 6px;
  transition: width 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ============================================================
   TREND INTELLIGENCE — SUMMARY CARD
   ============================================================ */

.trend-summary-card {
  background: linear-gradient(135deg, rgba(124,58,237,0.07), rgba(14,165,233,0.04));
  border: 1px solid rgba(139,92,246,0.18);
  border-radius: var(--radius-sm);
  padding: 18px; margin-bottom: 18px;
}

.trend-pills {
  display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px;
}

.trend-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 20px;
  font-size: 0.87rem; font-weight: 600;
  border: 1px solid transparent;
}

.trend-pill.pill-good {
  background: rgba(16,185,129,0.1);
  border-color: rgba(16,185,129,0.25);
  color: var(--sem-good);
}

.trend-pill.pill-bad {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.22);
  color: var(--sem-critical);
}

.trend-pill.pill-flat {
  background: var(--surface-1);
  border-color: rgba(255,255,255,0.09);
  color: var(--text-3);
}

.pill-arrow { font-size: 0.95rem; }

.pill-label { font-size: 0.93rem; opacity: 0.85; }

.pill-pct { font-size: 0.91rem; font-weight: 700; }

.trend-primary-insight {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06);
}

.trend-insight-label {
  font-size: 0.895rem; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1.2px;
}

.trend-insight-body {
  font-size: 0.875rem; color: var(--text-2); line-height: 1.6;
}

/* ============================================================
   TREND INTELLIGENCE — WHY THIS TREND
   ============================================================ */

.why-trend-block {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.why-trend-title {
  font-size: 0.93rem; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px;
}

.why-trend-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.why-trend-item:last-child { border-bottom: none; }

.why-dot {
  width: 7px; height: 7px; border-radius: 50%;
  margin-top: 5px; flex-shrink: 0;
}

.why-trend-item.positive .why-dot { background: #10b981; }
.why-trend-item.negative .why-dot { background: #f97316; }
.why-trend-item.neutral  .why-dot { background: var(--text-3); }

.why-text {
  font-size: 0.94rem; color: var(--text-2); line-height: 1.6;
}

/* ============================================================
   KEY QUESTIONS
   ============================================================ */

.key-questions-block {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 22px; backdrop-filter: blur(16px);
}

.questions-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

.question-item {
  padding: 16px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 5px;
}

.question-item.q-full { grid-column: span 2; }

.question-item.urgency-critical {
  border-color: rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.04);
}

.question-item.urgency-high {
  border-color: rgba(249,115,22,0.28);
  background: rgba(249,115,22,0.03);
}

.question-item.urgency-moderate {
  border-color: rgba(245,158,11,0.25);
}

.question-q {
  font-size: 0.80rem; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.8px;
}

.question-a {
  font-size: 0.875rem; font-weight: 600; color: var(--text-1); line-height: 1.45;
}

.question-a.answer-critical { color: var(--sem-critical); }
.question-a.answer-high     { color: var(--sem-alert); }
.question-a.answer-moderate { color: var(--sem-warn); }
.question-a.answer-ok       { color: var(--sem-good); }

.question-reason {
  font-size: 0.88rem; color: var(--text-3); line-height: 1.55;
}

/* ============================================================
   PROTOCOL BADGE + REC HEADER
   ============================================================ */

.rec-block-header {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
}

.rec-block-header .block-title { margin-bottom: 0; }

.protocol-badge {
  font-size: 0.80rem; font-weight: 600; letter-spacing: 0.5px;
  padding: 4px 12px; border-radius: 20px;
  background: var(--purple-glow);
  border: 1px solid rgba(139,92,246,0.28);
  color: var(--purple-3);
}

.protocol-badge.priority-critical {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.3);
  color: var(--sem-critical);
}

.protocol-badge.priority-high {
  background: rgba(249,115,22,0.1);
  border-color: rgba(249,115,22,0.3);
  color: var(--sem-alert);
}

/* ============================================================
   FOOTER
   ============================================================ */

.dash-footer {
  text-align: center; padding: 20px 0 8px;
  font-size: 0.895rem; color: var(--text-3); line-height: 1.7;
}

.footer-note { font-size: 0.80rem; opacity: 0.6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .score-hero     { flex-direction: column; gap: 20px; }
  .score-confidence { flex-direction: row; width: 100%; min-width: unset; }
  .confidence-bar-wrap { flex: 1; }
  .metrics-grid   { grid-template-columns: 1fr 1fr; }
  .brief-grid     { grid-template-columns: 1fr; }
  .brief-action   { grid-column: span 1; }
  .windows-grid   { grid-template-columns: 1fr; }
  .questions-grid { grid-template-columns: 1fr; }
  .question-item.q-full { grid-column: span 1; }
  .score-number   { font-size: 4rem; }
  .checkin-header h1 { font-size: 1.75rem; }
  .navbar         { padding: 0 18px; }
  .checkin-card   { padding: 22px; }
  .dashboard-page { padding: 76px 14px 40px; }
}

@media (max-width: 400px) {
  .metrics-grid   { grid-template-columns: 1fr; }
  .schedule-inputs { flex-direction: column; }
}

/* ============================================================
   CRISIS SUPPORT
   Uses the existing purple palette. The emergency action is the
   one place a warmer colour is justified, and it is never the
   ONLY signal — every button is also labelled in words, so the
   meaning does not depend on colour.
   ============================================================ */

.crisis-page {
  width: var(--shell);
  margin: 0 auto;
  /* Top padding clears the fixed navbar — without it the h1 sits behind it. */
  padding: 104px 0 80px;
  position: relative;
  z-index: 1;
}

.crisis-title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 24px;
}

.crisis-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-2);
  margin: 36px 0 14px;
}

.crisis-notice {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--purple-2);
  border-radius: 14px;
  padding: 20px 22px;
  color: var(--text-2);
  line-height: 1.65;
  font-size: 15px;
}

.crisis-notice strong { color: var(--text-1); }

.crisis-actions {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.crisis-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.crisis-btn:hover { border-color: var(--card-hover); transform: translateY(-2px); }

/* Visible keyboard focus — these are the most important controls in the app. */
.crisis-btn:focus-visible,
.crisis-page a:focus-visible {
  outline: 3px solid var(--purple-3);
  outline-offset: 3px;
}

.crisis-btn-label { font-size: 17px; font-weight: 650; color: var(--text-1); }
.crisis-btn-sub   { font-size: 14.5px; color: var(--text-3); line-height: 1.45; }

.crisis-btn-primary { border-color: rgba(139, 92, 246, 0.45); }
.crisis-btn-emergency { border-color: rgba(249, 115, 22, 0.45); }

.crisis-region-note,
.crisis-footer-note {
  margin-top: 34px;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.7;
}

.crisis-region-note a,
.crisis-footer-note a { color: var(--purple-3); }

/* The crisis link in the navbar must stay visible on small screens. */
.nav-link.crisis-link {
  border: 1px solid rgba(249, 115, 22, 0.45);
  border-radius: 10px;
  padding: 7px 13px;
}

.nav-link.crisis-link:hover { border-color: rgba(249, 115, 22, 0.75); }

@media (prefers-reduced-motion: reduce) {
  .crisis-btn { transition: none; }
  .crisis-btn:hover { transform: none; }
}

/* Product boundary notice — shown before any data is entered. */
/* The safety notice has to be the most readable text on the page, not the
   dimmest. It used a hard-coded dark background and --text-3 (the faintest
   text colour) in every theme, so on the light theme it was pale grey writing
   on a murky grey box. It now has its own colours per theme, each checked
   against WCAG AA (body text 4.5:1): dark ~9:1, light ~13:1. */
.product-notice {
  --notice-bg:     rgba(139, 92, 246, 0.12);
  --notice-border: rgba(167, 139, 250, 0.45);
  --notice-text:   var(--text-1);
  --notice-link:   #ddd6fe;

  max-width: 640px;
  margin: 28px auto 0;
  padding: 16px 18px 16px 20px;
  border-radius: 12px;
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  border-left: 4px solid var(--purple-2);
  color: var(--notice-text);
  font-size: 15px;
  line-height: 1.65;
  text-align: left;
}

:root[data-theme="light"] .product-notice {
  --notice-bg:     #efe9ff;
  --notice-border: rgba(109, 40, 217, 0.28);
  --notice-link:   #5b21b6;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .product-notice {
    --notice-bg:     #efe9ff;
    --notice-border: rgba(109, 40, 217, 0.28);
    --notice-link:   #5b21b6;
  }
}

/* The way out for someone in distress: bold and underlined, never faint. */
.product-notice a {
  color: var(--notice-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.product-notice a:hover { text-decoration-thickness: 2px; }
.product-notice a:focus-visible { outline: 2px solid var(--notice-link); outline-offset: 3px; border-radius: 3px; }

/* ============================================================
   RESPONSIVE — DESKTOP TIERS

   The stylesheet previously had only two breakpoints, both
   max-width (640px and 400px). It was built mobile-first and
   never given a desktop tier, so on a 1280px screen the
   dashboard used 61% of the viewport and on 1920px only 41% —
   while the navbar spanned the full width, leaving the header
   and the content visibly out of alignment.

   These tiers grow the shell in steps rather than jumping
   straight from a phone column to a wide desktop one.
   ============================================================ */

/* ── Tablet: 768px and up ── */
@media (min-width: 768px) {
  :root { --shell: min(720px, calc(100% - 48px)); }

  /* Emergency actions pair up as soon as there is room for two. */
  .crisis-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ── Small desktop / large tablet: 1024px and up ── */
@media (min-width: 1024px) {
  :root { --shell: min(960px, calc(100% - 48px)); }

  /* Align the navbar with the page shell so the header and the content
     share the same left and right edges. */
  .navbar {
    width: var(--shell);
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* Prose stays readable even though the shell is wider. */
  .narrative-text,
  .insight-text,
  .crisis-notice,
  .crisis-region-note p,
  .crisis-footer-note p,
  .product-notice { max-width: var(--reading); }

  /* Two balanced informational cards instead of two stacked paragraphs. */
  .crisis-secondary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: start;
  }

  .crisis-secondary > * { margin-top: 0; }
}

/* ── Desktop: 1280px and up ── */
@media (min-width: 1280px) {
  :root { --shell: min(1100px, calc(100% - 48px)); }

  /* With the extra width the metric cards breathe rather than stretch. */
  .metrics-grid   { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .questions-grid { grid-template-columns: repeat(2, 1fr); }
  .windows-grid   { grid-template-columns: repeat(3, 1fr); }
}

/* ── Large desktop: 1600px and up ── */
@media (min-width: 1600px) {
  /* Deliberately does NOT keep growing. Past ~1100px a dashboard column
     stops gaining anything and lines just get harder to track. The page
     stays centred with generous margins instead. */
  :root { --shell: 1100px; }
}

/* ── Tablet and below: horizontal margin ── */
@media (max-width: 767px) {
  :root { --shell: calc(100% - 32px); }   /* 16px each side on mobile */
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --shell: calc(100% - 48px); }   /* 24px each side on tablet */
}

/* ============================================================
   LIGHT THEME

   The dark theme stays the default — it is the product's identity
   and what every screenshot shows. Light mode is a full palette
   swap through the same tokens, so no component needs a second
   set of rules.

   Two states are handled deliberately:
     :root[data-theme="light"]  — the user chose light
     prefers-color-scheme       — the OS asked for light and the
                                  user has expressed no preference

   Contrast was checked against WCAG AA for body text: --text-1
   (#241640) on --bg (#f7f5ff) is well past 4.5:1, and --text-3,
   the dimmest text, is kept at ~4.6:1 rather than the washed-out
   grey a naive inversion produces.
   ============================================================ */

:root[data-theme="light"] {
  --bg:            #f7f5ff;
  --card:          rgba(255, 255, 255, 0.86);
  --card-border:   rgba(124, 58, 237, 0.16);
  --card-hover:    rgba(124, 58, 237, 0.32);

  /* Purples shift DARKER, not lighter — the same hues on a light
     background would fail contrast as text. */
  --purple-1:      #6d28d9;
  --purple-2:      #7c3aed;
  --purple-3:      #6425c7;
  --purple-glow:   rgba(124, 58, 237, 0.10);

  --text-1:        #241640;
  --text-2:        #4c3a75;
  --text-3:        #635785;

  /* Semantic colours darkened so they stay legible on white. */
  --green:         #047857;
  --green-dim:     rgba(4, 120, 87, 0.12);
  --amber:         #b45309;
  --amber-dim:     rgba(180, 83, 9, 0.12);
  --orange:        #c2410c;
  --orange-dim:    rgba(194, 65, 12, 0.12);
  --red:           #b91c1c;
  --red-dim:       rgba(185, 28, 28, 0.10);
  --blue:          #0369a1;

  --shadow:        0 2px 24px rgba(76, 29, 149, 0.07);
  --page-bg:       radial-gradient(ellipse at 20% 10%, #efe9ff 0%, #f7f5ff 60%);
  --glow-1:        rgba(124, 58, 237, 0.07);
  --particle:      rgba(109, 40, 217, 0.30);
  --nav-bg:        rgba(255, 255, 255, 0.82);

  /* Darkened so they pass AA on a light card rather than washing out. */
  --sem-good:      #047857;
  --sem-warn:      #7a4f06;
  --sem-alert:     #b34700;
  --sem-critical:  #b3261e;

  --surface-1:     rgba(76, 29, 149, 0.045);
  --surface-2:     rgba(76, 29, 149, 0.075);
  --surface-track: rgba(76, 29, 149, 0.11);
}

/* Follow the operating system when the user has not chosen. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:            #f7f5ff;
    --card:          rgba(255, 255, 255, 0.86);
    --card-border:   rgba(124, 58, 237, 0.16);
    --card-hover:    rgba(124, 58, 237, 0.32);
    --purple-1:      #6d28d9;
    --purple-2:      #7c3aed;
    --purple-3:      #6425c7;
    --purple-glow:   rgba(124, 58, 237, 0.10);
    --text-1:        #241640;
    --text-2:        #4c3a75;
    --text-3:        #635785;
    --green:         #047857;
    --green-dim:     rgba(4, 120, 87, 0.12);
    --amber:         #b45309;
    --amber-dim:     rgba(180, 83, 9, 0.12);
    --orange:        #c2410c;
    --orange-dim:    rgba(194, 65, 12, 0.12);
    --red:           #b91c1c;
    --red-dim:       rgba(185, 28, 28, 0.10);
    --blue:          #0369a1;
    --shadow:        0 2px 24px rgba(76, 29, 149, 0.07);
    --page-bg:       radial-gradient(ellipse at 20% 10%, #efe9ff 0%, #f7f5ff 60%);
    --glow-1:        rgba(124, 58, 237, 0.07);
    --particle:      rgba(109, 40, 217, 0.30);
    --nav-bg:        rgba(255, 255, 255, 0.82);

    /* Darkened so they pass AA on a light card rather than washing out. */
    --sem-good:      #047857;
    --sem-warn:      #7a4f06;
    --sem-alert:     #b34700;
    --sem-critical:  #b3261e;

    --surface-1:     rgba(76, 29, 149, 0.045);
    --surface-2:     rgba(76, 29, 149, 0.075);
    --surface-track: rgba(76, 29, 149, 0.11);
  }
}

/* The decorative glow uses the token so it dims in light mode. */
body::before { background: radial-gradient(circle, var(--glow-1), transparent 65%); }

/* ── Theme toggle button ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-2);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.theme-toggle:hover { border-color: var(--card-hover); color: var(--text-1); }

.theme-toggle:focus-visible {
  outline: 3px solid var(--purple-3);
  outline-offset: 2px;
}

/* Show the icon for the theme you would switch TO, not the one you are in. */
.theme-toggle .icon-dark  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-dark { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-light { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .icon-dark  { display: inline; }
  :root:not([data-theme="dark"]) .theme-toggle .icon-light { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}

/* ============================================================
   READABILITY

   The original type scale bottomed out at 0.62rem (~10px) for
   labels and body copy. That is below comfortable reading size,
   and it reads worse in light mode: dark text on a light ground
   at small sizes needs a little more weight and spacing to stay
   crisp, where light-on-dark can get away with being thin.

   Sizes were lifted one step across the sheet. These rules add
   the line-height and letter-spacing that make the larger sizes
   actually easier to read rather than just bigger.
   ============================================================ */

/* Prose gets a comfortable measure and leading. */
.narrative-text,
.insight-text,
.question-reason,
.brief-value,
.rec-body,
.crisis-notice,
.crisis-region-note p,
.crisis-footer-note p,
.product-notice {
  line-height: 1.65;
}

/* Uppercase micro-labels need letter-spacing to stay legible once
   they are no longer tiny — without it they read as a solid block. */
.metric-label,
.block-title,
.brief-label,
.question-q,
.dash-subtitle,
.window-label,
.crisis-btn-sub {
  letter-spacing: 0.04em;
}

/* Light mode needs slightly more weight on secondary text. Thin dark
   type on a light ground looks fainter than the same weight reversed. */
:root[data-theme="light"] .question-reason,
:root[data-theme="light"] .rec-body,
:root[data-theme="light"] .brief-label,
:root[data-theme="light"] .metric-sub,
:root[data-theme="light"] .product-notice,
:root[data-theme="light"] .crisis-btn-sub {
  font-weight: 450;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .question-reason,
  :root:not([data-theme="dark"]) .rec-body,
  :root:not([data-theme="dark"]) .brief-label,
  :root:not([data-theme="dark"]) .metric-sub,
  :root:not([data-theme="dark"]) .product-notice,
  :root:not([data-theme="dark"]) .crisis-btn-sub {
    font-weight: 450;
  }
}

/* Respect a larger base font size if the reader has set one in their
   browser. Everything above is in rem, so this scales the whole page. */
@media (min-width: 1024px) {
  .narrative-text,
  .insight-text { font-size: 0.98rem; }
}

/* ============================================================
   TYPE ROLES

   An audit of computed sizes found 12.8px being used for three
   different jobs: micro-labels (fine), the question text in the
   reflection cards (that is content), and the AI disclaimer —
   123 characters of safety-relevant copy set smaller than
   anything else on the page.

   Size should follow the ROLE of the text, not where it happens
   to sit in the markup:

     ~16px  body and instructions
     ~15px  supporting prose
     ~14px  disclaimers and secondary copy — never the smallest
     ~13px  uppercase micro-labels and metadata only
   ============================================================ */

/* Body and instructional copy — the things a person actually reads. */
.narrative-text,
.insight-text,
.crisis-notice,
.crisis-region-note p,
.crisis-footer-note p {
  font-size: 1rem;          /* 16px */
  line-height: 1.68;
}

/* Questions are content, not labels. */
.question-q {
  font-size: 0.94rem;       /* ~15px */
  line-height: 1.5;
  letter-spacing: 0.01em;   /* not a micro-label, so drop the wide tracking */
}

.question-a { font-size: 0.98rem; line-height: 1.55; }
.question-reason { font-size: 0.9rem; line-height: 1.6; }

/* Disclaimers carry safety meaning. They may be quiet, but they must not be
   the smallest text on the page — which is exactly what they were. */
.insight-disclaimer,
.product-notice,
.checkin-footer,
.dash-footer,
.footer-note {
  font-size: 0.875rem;      /* 14px */
  line-height: 1.6;
}

/* Recommendation and summary values are read, so they get body treatment. */
.brief-item-value,
.rec-body,
.rec-title { font-size: 0.94rem; line-height: 1.55; }

/* 13px and below is reserved for uppercase micro-labels and metadata only. */
.brief-item-label,
.metric-label,
.window-label,
.dash-subtitle,
.score-label,
.brand-sub { font-size: 0.8125rem; }   /* 13px */


/* ============================================================
   READABILITY, SECOND PASS

   Reported: the text is small and blurry, and the dark/light
   switch is too small to notice. Causes found, and fixed here:

   1. SIZE. Everything is in rem, so one number scales it all. The
      base was the browser's 16px, which left labels near 13px.
   2. SOFT TEXT. Headings and the score had glowing text-shadows
      (a halo behind every letter), and every card sat behind a
      backdrop-filter blur, which makes the text inside render with
      softer edges. Glows are removed; cards use a more solid fill
      instead of blurring what is behind them.
   3. FAINT SECONDARY TEXT. --text-3 is the colour of every label.
      It is raised in both themes (still a clear step below body text).
   4. THE SWITCH. 38px with one tiny icon and no word. Now 46px
      tall, an icon AND a label, with a visible outline.
   ============================================================ */

/* 1. Size: 17px on a phone, growing to 19px on a wide screen. */
html { font-size: clamp(17px, 15.5px + 0.35vw, 19px); }

/* 2. Crisp edges. */
body { text-rendering: optimizeLegibility; }
.brand-name, .checkin-header h1, .score-number { text-shadow: none; }

.checkin-card, .score-hero, .metric-card, .intel-brief-card, .focus-windows-card,
.narrative-block, .explainability-block, .trend-block, .insight-block, .rec-block,
.key-questions-block {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root { --card: rgba(22, 15, 50, 0.94); }
:root[data-theme="light"] { --card: rgba(255, 255, 255, 0.96); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --card: rgba(255, 255, 255, 0.96); }
}

/* 3. Labels: a clearer step above the old dim colour, in both themes. */
:root { --text-2: #d6ccff; --text-3: #bdb2dc; }
:root[data-theme="light"] { --text-2: #3f3166; --text-3: #51456d; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --text-2: #3f3166; --text-3: #51456d; }
}
.slider-ends { font-size: 0.85rem; font-weight: 500; }
.nav-link { font-size: 0.95rem; font-weight: 500; }

/* 4. The theme switch: easy to see, easy to tap. */
.theme-toggle {
  width: auto;
  min-width: 46px;
  height: 46px;
  padding: 0 16px;
  gap: 8px;
  border-radius: 999px;
  border: 2px solid var(--purple-2);
  background: var(--purple-glow);
  color: var(--text-1);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}
.theme-toggle:hover { background: rgba(139, 92, 246, 0.26); border-color: var(--purple-3); }
.theme-toggle .tt-icon { font-size: 1.5rem; line-height: 1; }
.theme-toggle .tt-label { line-height: 1; }

/* It shows the mode you would switch TO: "Light mode" while dark, "Dark mode" while light. */
.theme-toggle .label-dark { display: none; }
:root[data-theme="light"] .theme-toggle .label-dark { display: inline; }
:root[data-theme="light"] .theme-toggle .label-light { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .label-dark  { display: inline; }
  :root:not([data-theme="dark"]) .theme-toggle .label-light { display: none; }
}
/* Light theme: a stronger outline so it still stands out on a pale page. */
:root[data-theme="light"] .theme-toggle { border-color: var(--purple-1); background: rgba(109, 40, 217, 0.08); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle { border-color: var(--purple-1); background: rgba(109, 40, 217, 0.08); }
}

/* Very narrow phones: keep the big round icon button, drop the word. */
@media (max-width: 420px) {
  .theme-toggle { width: 46px; padding: 0; }
  .theme-toggle .tt-label { display: none !important; }
}


/* ── Navbar on phones ─────────────────────────────────────────
   The navbar is fixed at 60px, so it has to fit on ONE row. At 390px it did
   not: the bigger theme switch was pushed off the right edge and "Dashboard"
   was cut off. Here the long subtitle goes, the spacing tightens, the switch
   becomes a round icon button, and below 480px the help link reads "Get Help"
   (its accessible name stays "Get immediate help"). */
.nav-short { display: none; }

@media (max-width: 560px) {
  .navbar { padding: 0 12px; }
  .brand-sub { display: none; }
  .brand-name { letter-spacing: 1.5px; }
  .nav-links { gap: 8px; }
  .nav-link { white-space: nowrap; }
  .theme-toggle { width: 46px; min-width: 46px; padding: 0; }
  .theme-toggle .tt-label { display: none !important; }
}

@media (max-width: 480px) {
  .nav-long  { display: none; }
  .nav-short { display: inline; }
  .nav-link { font-size: 0.9rem; }
}

/* ── Crisp knobs and button ───────────────────────────────────
   The slider knobs and the main button had a soft glowing halo
   (a 10-32px blurred shadow). Next to sharp text it reads as a blurry
   edge. They now have a solid white ring and a tight shadow instead. */
.signal-slider::-webkit-slider-thumb {
  width: 22px; height: 22px;
  border: 3px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.signal-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border: 3px solid #ffffff;
  background: var(--purple-2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.signal-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(139, 92, 246, 0.35);
}
.analyze-btn { box-shadow: 0 4px 12px rgba(76, 29, 149, 0.4); }
.analyze-btn:hover { box-shadow: 0 6px 16px rgba(76, 29, 149, 0.5); }


/* ── Say or type your check-in ───────────────────────────────
   Optional panel above the sliders. Big, plain, and readable:
   at least 1rem text, a clear outline on the open button, and a
   help block that is impossible to miss. */
.voice-box { margin-bottom: 22px; }

.voice-open {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid var(--purple-2);
  background: var(--purple-glow);
  color: var(--text-1);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.voice-open:hover { background: rgba(139, 92, 246, 0.26); }
.voice-open:focus-visible, .voice-btn:focus-visible, .voice-text:focus-visible, .voice-help-link:focus-visible {
  outline: 3px solid var(--purple-3); outline-offset: 2px;
}

.voice-panel {
  margin-top: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--surface-1);
}
.voice-panel[hidden], .voice-notice[hidden], .voice-help[hidden], #voice-body[hidden], .voice-btn[hidden] { display: none; }

.voice-hint { margin: 0 0 14px; line-height: 1.6; color: var(--text-2); font-size: 1rem; }
.voice-hint em { color: var(--text-1); font-style: normal; font-weight: 500; }

.voice-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.voice-text {
  flex: 1 1 200px;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--surface-2);
  color: var(--text-1);
  font: inherit;
}
.voice-btn {
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 2px solid var(--purple-2);
  background: var(--purple-2);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.voice-btn:hover { background: var(--purple-1); border-color: var(--purple-1); }
.voice-btn-quiet { background: transparent; color: var(--text-1); border-color: var(--card-border); }
.voice-btn-quiet:hover { background: var(--surface-2); border-color: var(--purple-2); }
.voice-btn[aria-pressed="true"] { background: #b91c1c; border-color: #b91c1c; }

.voice-notice {
  margin: 0 0 14px; padding: 14px; border-radius: 10px;
  border: 1px solid var(--card-border); background: var(--surface-2);
  color: var(--text-1); line-height: 1.6; font-size: 1rem;
}
.voice-notice p { margin: 0 0 12px; }

.voice-status { margin: 12px 0 0; color: var(--text-1); line-height: 1.6; font-size: 1rem; min-height: 1.6em; }
.voice-heard { margin: 8px 0 0; padding-left: 20px; color: var(--text-2); line-height: 1.7; font-size: 1rem; }
.voice-close { margin-top: 14px; }

/* The help block replaces the form when a crisis phrase is found. */
.voice-help {
  padding: 18px; border-radius: 12px;
  border: 2px solid var(--orange);
  background: var(--orange-dim);
  color: var(--text-1); line-height: 1.65; font-size: 1.05rem;
}
.voice-help p { margin: 0 0 14px; }
.voice-help-link {
  display: inline-block; padding: 12px 22px; border-radius: 10px;
  background: var(--orange); color: #ffffff; font-weight: 700; text-decoration: none;
}
.voice-help-link:hover { filter: brightness(1.08); }
.voice-help .voice-help-note { margin: 14px 0 0; font-size: 0.9rem; color: var(--text-2); }


/* Trend chart: the note under it, and a legend as big as the chart's own text. */
.trend-gap-note { margin: 8px 0 0; font-size: 0.9rem; color: var(--text-3); line-height: 1.5; }
.trend-legend { font-size: 1rem; }