/* ============================================================
   DESIGN TOKENS
   Concept: cognitive psychology lab notebook — warm paper surfaces,
   deep ink-slate UI accent, and a two-color semantic system:
   warm amber = Mindful (present, aware) / cool slate = Mindless (automatic, rule-bound)
   ============================================================ */

:root,
[data-theme='light'] {
  /* Surfaces — warm paper */
  --color-bg: #f6f3ec;
  --color-surface: #fbf9f4;
  --color-surface-2: #ffffff;
  --color-surface-offset: #eee8db;
  --color-surface-offset-2: #e6ded0;
  --color-surface-dynamic: #e0d7c6;
  --color-divider: #e2d9c8;
  --color-border: #d8cdb8;

  /* Text — warm ink */
  --color-text: #26221a;
  --color-text-muted: #746b5b;
  --color-text-faint: #a89d88;
  --color-text-inverse: #fbf9f4;

  /* Primary UI accent — deep ink-slate */
  --color-primary: #33505b;
  --color-primary-hover: #24393f;
  --color-primary-active: #1a292d;
  --color-primary-highlight: #d3dee0;

  /* Semantic: Mindful = warm amber (present, alert, generative) */
  --color-mindful: #b9791f;
  --color-mindful-strong: #8f5c14;
  --color-mindful-soft: #e9d3ab;
  --color-mindful-bg: #f6ead2;

  /* Semantic: Mindless = cool slate-blue (automatic, mechanical) */
  --color-mindless: #536a7c;
  --color-mindless-strong: #3d4f5d;
  --color-mindless-soft: #ccd6dd;
  --color-mindless-bg: #e3e9ed;

  /* Status */
  --color-success: #4a7a34;
  --color-error: #a13e3e;
  --color-warning: #a15f1f;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows — tone matched to warm surface */
  --shadow-sm: 0 1px 2px oklch(0.25 0.03 70 / 0.08);
  --shadow-md: 0 4px 14px oklch(0.25 0.03 70 / 0.1);
  --shadow-lg: 0 16px 36px oklch(0.25 0.03 70 / 0.14);

  --font-display: 'Cabinet Grotesk', 'Georgia', serif;
  --font-body: 'Satoshi', 'Inter', sans-serif;
}

[data-theme='dark'] {
  --color-bg: #171512;
  --color-surface: #1d1a16;
  --color-surface-2: #221f1a;
  --color-surface-offset: #26221c;
  --color-surface-offset-2: #2c2820;
  --color-surface-dynamic: #332e25;
  --color-divider: #302b23;
  --color-border: #3c362b;

  --color-text: #eae4d7;
  --color-text-muted: #a99e8a;
  --color-text-faint: #756b59;
  --color-text-inverse: #201d18;

  --color-primary: #7ba3ae;
  --color-primary-hover: #96b9c3;
  --color-primary-active: #5f8891;
  --color-primary-highlight: #2b3a3d;

  --color-mindful: #e0a94a;
  --color-mindful-strong: #f0c37a;
  --color-mindful-soft: #4a3c22;
  --color-mindful-bg: #382c19;

  --color-mindless: #8fa6b6;
  --color-mindless-strong: #b0c2cf;
  --color-mindless-soft: #33404a;
  --color-mindless-bg: #262f36;

  --color-success: #7fb862;
  --color-error: #d1786f;
  --color-warning: #d4995a;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 16px 36px oklch(0 0 0 / 0.45);
}

/* Type scale */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */

html, body {
  height: 100%;
  overflow: hidden;
}

.app-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border);
  white-space: nowrap;
  display: none;
}

@media (min-width: 720px) {
  .subtitle { display: inline; }
}

.theme-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.theme-toggle:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: calc(100dvh - 60px);
}

.sidebar {
  border-right: 1px solid var(--color-divider);
  background: var(--color-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
}

.sidebar-heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  font-weight: 700;
  margin-bottom: var(--space-3);
  padding-inline: var(--space-2);
}

.scenario-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.scenario-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-align: left;
  color: var(--color-text-muted);
}

.scenario-btn:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

.scenario-btn.active {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}

.scenario-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: currentColor;
}

.scenario-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.scenario-btn-name {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
}

.scenario-btn.active .scenario-btn-name {
  color: var(--color-primary);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.concept-badge {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-inline: var(--space-2);
}

.concept-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.concept-dot.mindful { background: var(--color-mindful); }
.concept-dot.mindless { background: var(--color-mindless); }

.concept-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
}

.concept-desc {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.main {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-6) var(--space-8) var(--space-16);
}

/* ============================================================
   SCENARIO HEADER
   ============================================================ */

.scenario-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.scenario-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.export-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--color-primary);
  white-space: nowrap;
}

.export-btn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.export-btn:active {
  background: var(--color-primary-active);
}

.export-btn svg {
  flex-shrink: 0;
}

.scenario-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-1);
}

.scenario-desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 56ch;
}

.scenario-context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.context-chip {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.context-chip.complexity-high,
.context-chip.pressure-high {
  border-color: color-mix(in oklab, var(--color-warning) 40%, var(--color-border));
  color: var(--color-warning);
}

/* ============================================================
   CONTROLS BAR
   ============================================================ */

.controls-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 720px) {
  .controls-bar { grid-template-columns: 1fr; }
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.slider-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.slider-value {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums lining-nums;
  min-width: 3.5ch;
  text-align: right;
}

.slider-hint {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset-2);
  outline-offset: 4px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition-interactive);
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset-2);
}

/* ============================================================
   OUTCOME COMPARISON CARDS
   ============================================================ */

.outcome-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

@media (max-width: 860px) {
  .outcome-comparison { grid-template-columns: 1fr; }
}

.outcome-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.card-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.card-dot.mindful { background: var(--color-mindful); }
.card-dot.mindless { background: var(--color-mindless); }

.card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.mindful-card .card-title { color: var(--color-mindful-strong); }
.mindless-card .card-title { color: var(--color-mindless-strong); }

.card-approach-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.metric-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.metric-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.metric-row-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}

.metric-row-value {
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-text);
}

.metric-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  overflow: hidden;
}

.metric-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mindful-card .metric-fill { background: var(--color-mindful); }
.mindless-card .metric-fill { background: var(--color-mindless); }

.outcome-narrative {
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  line-height: 1.55;
}

/* ============================================================
   DASHBOARD SECTION
   ============================================================ */

.dashboard-heading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 960px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

.chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  content-visibility: auto;
  contain-intrinsic-size: 0 320px;
  min-width: 0;
  overflow: hidden;
}

.chart-card-wide {
  grid-column: 1 / -1;
}

.chart-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.chart-caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  font-weight: 500;
}

/* Bar chart */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bar-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bar-group-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bar-row {
  display: grid;
  grid-template-columns: 84px 1fr 42px;
  align-items: center;
  gap: var(--space-3);
}

.bar-row-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}

.bar-track {
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bar-fill.mindful { background: var(--color-mindful); }
.bar-fill.mindless { background: var(--color-mindless); }

.bar-row-value {
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  color: var(--color-text);
}

/* Scatter plot */
.scatter-plot {
  position: relative;
  width: 100%;
  aspect-ratio: 1.3 / 1;
  border-left: 1.5px solid var(--color-border);
  border-bottom: 1.5px solid var(--color-border);
  margin-top: var(--space-2);
}

.scatter-point {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  border: 2.5px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: left 500ms cubic-bezier(0.16, 1, 0.3, 1), bottom 500ms cubic-bezier(0.16, 1, 0.3, 1);
  display: grid;
  place-items: center;
}
.scatter-point.mindful { background: var(--color-mindful); }
.scatter-point.mindless { background: var(--color-mindless); }

.scatter-point-label {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.scatter-axis-label {
  position: absolute;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-weight: 600;
}
.scatter-axis-label.x-axis {
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
}
.scatter-axis-label.y-axis {
  left: -8px;
  top: 50%;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: left center;
}

.scatter-gridline {
  position: absolute;
  background: var(--color-divider);
}

/* Gauge — centered at 50%, mindful fills right, mindless fills left */
.gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.gauge-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-mindful-strong);
  font-variant-numeric: tabular-nums lining-nums;
}
.gauge-value.negative {
  color: var(--color-mindless-strong);
}

.gauge-track {
  width: 100%;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset-2);
  overflow: hidden;
  position: relative;
}

/* Center marker line */
.gauge-center {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-text-faint);
  opacity: 0.5;
  z-index: 2;
}

.gauge-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 500ms cubic-bezier(0.16, 1, 0.3, 1), left 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gauge-fill.mindful {
  background: var(--color-mindful);
  left: 50%;
}
.gauge-fill.mindless {
  background: var(--color-mindless);
  right: 50%;
}

.gauge-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Summary table */
.summary-table-wrap {
  overflow-x: auto;
}

.summary-table {
  font-size: var(--text-xs);
  min-width: 620px;
}

.summary-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-faint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  background: var(--color-surface);
}

.summary-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-text);
}

.summary-table tr.active-row {
  background: var(--color-primary-highlight);
}

.summary-table tr.active-row td {
  color: var(--color-primary);
  font-weight: 700;
}

.summary-table td:first-child {
  font-weight: 600;
  font-variant-numeric: normal;
}

.advantage-positive { color: var(--color-mindful-strong); font-weight: 700; }
.advantage-negative { color: var(--color-mindless-strong); font-weight: 700; }

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

.theory-footer {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

.theory-footer p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: 90ch;
  line-height: 1.6;
}

.theory-footer .source-links {
  margin-top: var(--space-2);
  font-weight: 600;
}

.theory-footer .source-links a {
  color: var(--color-primary);
  text-decoration: none;
}

.theory-footer .source-links a:hover {
  text-decoration: underline;
}

/* ============================================================
   MOBILE ADJUSTMENTS
   ============================================================ */

@media (max-width: 720px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    overflow: hidden;
  }
  html, body {
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
  }
  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--color-divider);
    overflow-y: visible;
    overflow-x: hidden;
  }
  .scenario-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--space-2);
  }
  .scenario-btn {
    flex-shrink: 0;
    width: auto;
  }
  .sidebar-footer {
    flex-direction: row;
    gap: var(--space-6);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
  }
  .main {
    overflow-y: visible;
    overflow-x: hidden;
    padding: var(--space-5) var(--space-4) var(--space-10);
    min-width: 0;
  }
  .outcome-comparison,
  .dashboard-grid,
  .controls-bar {
    min-width: 0;
  }
}

/* ============================================================
   VIEW SWITCHER
   ============================================================ */
.view-switcher {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}

.view-tab {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.view-tab:hover {
  color: var(--color-text);
}
.view-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ============================================================
   SUMMARY PANEL
   ============================================================ */
.summary-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.summary-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
.summary-toggle::-webkit-details-marker { display: none; }
.summary-toggle svg { color: var(--color-primary); }

.summary-content {
  padding: 0 var(--space-5) var(--space-5);
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}
@media (max-width: 720px) {
  .summary-grid { grid-template-columns: 1fr; }
}

.summary-item h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.summary-item p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.summary-note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

/* ============================================================
   SELF-ASSESSMENT
   ============================================================ */
.assessment-header {
  margin-bottom: var(--space-6);
}

.assessment-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.assessment-intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 72ch;
  line-height: 1.6;
}

.tally-placeholder {
  background: var(--color-surface-offset);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  margin-bottom: var(--space-6);
}
.tally-placeholder-text {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

.assessment-form {
  margin-bottom: var(--space-6);
}

.question-list {
  list-style: none;
  counter-reset: question;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.question-item {
  counter-increment: question;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.question-item::before {
  content: counter(question);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-right: var(--space-2);
}

.question-text {
  display: inline;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
}

.question-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
  margin-left: 32px;
}

.option-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: background var(--transition-interactive);
}
.option-label:hover {
  background: var(--color-surface-offset);
}
.option-label input[type="radio"] {
  accent-color: var(--color-primary);
}
.option-label.selected {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-weight: 600;
}

.assessment-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.btn-secondary {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

/* Assessment results */
.assessment-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.results-heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

.total-score-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.total-score-value {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  color: var(--color-mindful-strong);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.1;
}

.total-score-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.total-score-tier {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
}
.tier-high { background: var(--color-mindful-bg); color: var(--color-mindful-strong); }
.tier-moderate { background: var(--color-surface-offset); color: var(--color-text-muted); }
.tier-developing { background: var(--color-mindless-bg); color: var(--color-mindless-strong); }

.total-score-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: var(--space-3) auto 0;
  line-height: 1.5;
}

.dimension-scores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 720px) {
  .dimension-scores { grid-template-columns: 1fr; }
}

.dim-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.dim-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

.dim-card-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

.dim-card-score {
  font-size: var(--text-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-primary);
}

.dim-card-desc {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}

.dim-card-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  overflow: hidden;
}
.dim-card-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-mindful);
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dim-card.low .dim-card-fill { background: var(--color-mindless); }

/* Improvement suggestions */
.improvement-section {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.improvement-section h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.improvement-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.improvement-item {
  border-left: 3px solid var(--color-mindful);
  padding-left: var(--space-4);
}

.improvement-dim {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-mindful-strong);
  margin-bottom: var(--space-2);
}

.improvement-suggestions {
  list-style: disc;
  padding-left: var(--space-5);
}
.improvement-suggestions li {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}

/* Data export section */
.data-export-section {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.export-heading {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.export-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  max-width: 80ch;
}

.export-buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Scatter plot multi-scenario */
.scatter-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.scatter-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}
.scatter-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}
.scatter-legend-dot.mindful { background: var(--color-mindful); }
.scatter-legend-dot.mindless { background: var(--color-mindless); }
.scatter-legend-dot.active-marker {
  background: transparent;
  border: 2px solid var(--color-primary);
  width: 10px;
  height: 10px;
}

.scatter-point-mini {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  opacity: 0.45;
  transition: left 500ms cubic-bezier(0.16, 1, 0.3, 1), bottom 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.scatter-point-mini.mindful { background: var(--color-mindful); }
.scatter-point-mini.mindless { background: var(--color-mindless); }

.scatter-point-mini.active {
  opacity: 1;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  z-index: 3;
}

.scatter-connector {
  position: absolute;
  height: 1.5px;
  background: var(--color-text-faint);
  opacity: 0.2;
  transform-origin: 0 50%;
  z-index: 1;
  pointer-events: none;
}