/* ==========================================================================
   PAGE-SPECIFIC LAYOUTS
   ADHD Screening Portal — pages.css

   Table of Contents:
   01. Home — Hero
   02. Home — Features Grid
   03. Home — Test Cards Section
   04. Home — Educational Preview
   05. Home — Stats / Social Proof
   06. Test Select Page
   07. Test Runner
   08. Results Page
   09. History Page
   10. Education Pages
   11. Resources Page
   12. 404 / Error Page
   13. Shared Page Partials
   ========================================================================== */


/* ==========================================================================
   01. HOME — HERO
   ========================================================================== */

/* Root page wrapper — matches HTML: <div class="page page-home"> */
.page-home {
  /* Home page uses sections instead of a single padded container */
}

/* Home page disclaimer notice at bottom */
.home-disclaimer {
  padding-block: var(--space-6);
  display: flex;
  justify-content: center;
}

.hero-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(4rem, 10vw, 7rem);
  padding-bottom: clamp(4rem, 10vw, 7rem);
}

/* Background gradient orbs */
.hero-section::before,
.hero-section::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 0;
}

.hero-section::before {
  width: 40vmax;
  height: 40vmax;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
  top: -10vmax;
  right: -5vmax;
  animation: float 8s ease-in-out infinite;
}

.hero-section::after {
  width: 30vmax;
  height: 30vmax;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
  bottom: -8vmax;
  left: -5vmax;
  animation: float 10s ease-in-out infinite reverse;
}

[data-theme="dark"] .hero-section::before {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 70%);
}

[data-theme="dark"] .hero-section::after {
  background: radial-gradient(circle, rgba(129, 140, 248, 0.10) 0%, transparent 70%);
}

/* Hero inner layout — the .container gets position/z-index */
.hero-section .container {
  position: relative;
  z-index: 1;
}

/* Hero content flex row (text + illustration) */
.hero-content {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

@media (max-width: 900px) {
  .hero-content {
    flex-direction: column;
    text-align: center;
    gap: var(--space-8);
  }
}

/* Hero text column */
.hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  animation: fadeInUp var(--duration-slow) var(--ease-out) both;
}

/* Pre-heading badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-4);
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-primary-xlight);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  letter-spacing: var(--tracking-wide);
  animation: fadeInDown var(--duration-slow) var(--ease-out) both;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .hero-badge { align-self: center; }
}

/* Pulsing dot inside badge — kept via ::before pseudo on badge itself */
.hero-badge::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Main headline */
.hero-title {
  font-size: clamp(var(--text-4xl), 7vw, var(--text-7xl));
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
  max-width: 16ch;
  animation: fadeInUp var(--duration-slow) var(--ease-out) 0.1s both;
  margin: 0;
}

@media (max-width: 900px) {
  .hero-title { max-width: none; }
}

/* Subtitle */
.hero-subtitle {
  font-size: clamp(var(--text-base), 2.5vw, var(--text-xl));
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 52ch;
  animation: fadeInUp var(--duration-slow) var(--ease-out) 0.2s both;
  margin: 0;
}

/* CTA group */
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  animation: fadeInUp var(--duration-slow) var(--ease-out) 0.3s both;
}

@media (max-width: 900px) {
  .hero-actions { justify-content: center; }
}

/* Hero note (replaces disclaimer) */
.hero-note {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  animation: fadeIn var(--duration-slow) var(--ease-out) 0.4s both;
  margin: 0;
}

/* Hero illustration column */
.hero-illustration {
  flex-shrink: 0;
  width: 100%;
  max-width: 22rem;
  position: relative;
  animation: scaleIn var(--duration-slow) var(--ease-spring) 0.35s both;
  color: var(--color-text-primary);
}

@media (max-width: 900px) {
  .hero-illustration { max-width: 18rem; }
}

.neural-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Neural pulse animation rings */
.neural-pulse {
  animation: neuralPulse 3s ease-in-out infinite;
}

.neural-pulse--delay {
  animation-delay: 1.5s;
}

@keyframes neuralPulse {
  0%, 100% { opacity: 0.08; transform: scale(1); }
  50%       { opacity: 0.18; transform: scale(1.06); }
}

/* Legacy hero card-preview / float-card kept for any reuse */
.hero__card-preview {
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl), var(--shadow-glow);
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hero__float-card {
  position: absolute;
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  animation: float 6s ease-in-out infinite;
}

.hero__float-card:nth-child(2) { animation-delay: -2s; }
.hero__float-card:nth-child(3) { animation-delay: -4s; }

.hero__float-card--tl {
  top: -1.5rem;
  left: -2rem;
}

.hero__float-card--br {
  bottom: -1.5rem;
  right: -2rem;
}

/* Trust badges row */
.hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  animation: fadeIn var(--duration-slow) var(--ease-out) 0.5s both;
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-medium);
}

.hero__trust-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-success);
  flex-shrink: 0;
}


/* ==========================================================================
   02. HOME — FEATURES GRID
   ========================================================================== */

.features-section {
  padding-block: var(--spacing-section-y);
  position: relative;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1023px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* Wide feature card (full span) */
.features-grid .feature-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
}

@media (max-width: 767px) {
  .features-grid .feature-card--wide {
    flex-direction: column;
  }
}

.features-grid .feature-card--wide .feature-card__icon,
.features-grid .feature-card--wide .feature-icon {
  width: 4rem;
  height: 4rem;
}


/* ==========================================================================
   03. HOME — TEST CARDS SECTION
   ========================================================================== */

.tests-section {
  padding-block: var(--spacing-section-y);
  background: var(--color-bg-subtle);
  position: relative;
}

.tests-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(14,165,233,0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* Legacy .tests-grid and HTML .test-cards-grid are both supported */
.tests-grid,
.test-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  position: relative;
  z-index: 1;
}

@media (max-width: 1023px) {
  .tests-grid,
  .test-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .tests-grid,
  .test-cards-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   04. HOME — EDUCATIONAL PREVIEW
   ========================================================================== */

/* Section wrapper used in home.html */
.education-section {
  padding-block: var(--spacing-section-y);
}

/* 4-column grid of edu link cards used on home page */
.edu-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}

@media (max-width: 1023px) {
  .edu-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .edu-cards-grid { grid-template-columns: 1fr; }
}

/* edu-card used on the home page (linked card with icon + text + arrow) */
.edu-cards-grid .edu-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  text-decoration: none;
  color: inherit;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring),
    box-shadow var(--duration-normal) var(--ease-out);
}

.edu-cards-grid .edu-card:hover {
  border-color: var(--color-border-primary);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

/* Icon circle */
.edu-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.edu-cards-grid .edu-card:hover .edu-card-icon {
  background: var(--color-primary);
  color: white;
}

/* Text block inside edu-card */
.edu-cards-grid .edu-card > div {
  flex: 1;
  min-width: 0;
}

.edu-cards-grid .edu-card h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-0-5);
  max-width: none;
  line-height: var(--leading-snug);
}

.edu-cards-grid .edu-card p {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin: 0;
  max-width: none;
  line-height: var(--leading-snug);
}

/* Arrow icon at end */
.edu-card-arrow {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  transition: transform var(--duration-fast) var(--ease-spring), color var(--duration-fast);
}

.edu-cards-grid .edu-card:hover .edu-card-arrow {
  transform: translateX(3px);
  color: var(--color-primary);
}

/* Legacy edu-preview layout (not used on home.html but kept for other pages) */
.edu-preview {
  padding-block: var(--spacing-section-y);
}

.edu-preview__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (max-width: 768px) {
  .edu-preview__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

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

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

.edu-topic-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

.edu-topic-card:hover {
  border-color: var(--color-border-primary);
  background: var(--color-primary-subtle);
  transform: translateX(4px);
}

.edu-topic-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.edu-topic-card:hover .edu-topic-card__icon {
  background: var(--color-primary);
}

.edu-topic-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-0-5);
}

.edu-topic-card__subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin: 0;
}

.edu-topic-card svg.arrow {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-tertiary);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-spring);
}

.edu-topic-card:hover svg.arrow {
  transform: translateX(4px);
  color: var(--color-primary);
}


/* ==========================================================================
   05. HOME — STATS / SOCIAL PROOF
   ========================================================================== */

.stats-section {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--gradient-primary);
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

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

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  color: white;
}

.stat-item__number {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

.stat-item__label {
  font-size: var(--text-sm);
  opacity: 0.8;
  font-weight: var(--weight-medium);
  max-width: 12ch;
}


/* ==========================================================================
   06. TEST SELECT PAGE
   ========================================================================== */

.test-select-page {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.test-select-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.test-select-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-3);
}

.test-select-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.filter-chip {
  padding: var(--space-1-5) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
}

.filter-chip:hover,
.filter-chip.active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: var(--color-border-primary);
}

/* Legacy grid class kept for JS compatibility */
.test-select-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* HTML uses .select-cards-grid */
.select-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1023px) {
  .test-select-grid,
  .select-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .test-select-grid,
  .select-cards-grid { grid-template-columns: 1fr; }
}

/* Individual select card */
.select-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring),
    border-color var(--duration-normal) var(--ease-out);
}

.select-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--color-border-primary);
}

/* Featured card accent */
.select-card--featured {
  border-color: var(--color-border-primary);
  background: linear-gradient(160deg, var(--card-bg) 55%, var(--color-primary-subtle) 100%);
}

/* Inner padding wrapper */
.select-card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  flex: 1;
}

/* Card icon */
.select-card-icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  transition: var(--transition-fast);
}

.select-card:hover .select-card-icon {
  transform: scale(1.06) rotate(-4deg);
  box-shadow: var(--shadow-glow-sm);
}

.select-card-icon--primary { background: linear-gradient(135deg, var(--color-primary-subtle), rgba(14,165,233,0.25)); color: var(--color-primary); }
.select-card-icon--accent  { background: linear-gradient(135deg, var(--color-accent-subtle),  rgba(99,102,241,0.25));  color: var(--color-accent);  }
.select-card-icon--info    { background: linear-gradient(135deg, rgba(14,165,233,0.08),         rgba(14,165,233,0.2));  color: var(--color-primary); }

/* Meta pills row (time + question count) */
.select-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.select-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
  white-space: nowrap;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
}

.select-meta-pill svg {
  width: 0.8125rem;
  height: 0.8125rem;
  opacity: 0.8;
  flex-shrink: 0;
}

.select-meta-pill--time  { color: var(--color-primary);  background: var(--color-primary-subtle);  border-color: var(--color-primary-xlight); }
.select-meta-pill--count { color: var(--color-text-secondary); }

/* Card title */
.select-card-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin: 0;
}

/* Instrument subtitle */
.select-card-subtitle {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  margin: 0;
}

/* Description */
.select-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: none;
  flex: 1;
}

/* Feature bullet list */
.select-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.select-card-features li {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  padding-left: var(--space-4);
  position: relative;
  line-height: var(--leading-snug);
}

.select-card-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  opacity: 0.7;
}

/* CTA button */
.select-card-btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* Ribbon badge (e.g. "Recommended") */
.select-card-ribbon {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  background: var(--gradient-primary);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  text-transform: uppercase;
  z-index: 2;
}

/* Comparison note below the grid */
.select-note {
  margin-top: var(--space-6);
}


/* ==========================================================================
   07. TEST RUNNER
   ========================================================================== */

/* Root wrapper for all test pages.
   HTML uses: <div class="page page-test"> (or page-test--asrs / page-test--wfirs).
   .test-runner kept as a legacy alias in case any JS adds it dynamically. */
.page-test,
.page-test--asrs,
.page-test--wfirs,
.test-runner {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  flex-direction: column;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* ---- Disclaimer section ---- */
.test-disclaimer {
  padding-block: clamp(2rem, 5vw, 4rem);
}

.disclaimer-card {
  max-width: 42rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.disclaimer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.disclaimer-title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.disclaimer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  width: 100%;
}

.disclaimer-body p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: none;
}

.disclaimer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  width: 100%;
}

.disclaimer-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

.disclaimer-meta-item svg {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}

/* ---- Test container ---- */
.test-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-6);
}

/* ---- Test header ---- */
.test-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.test-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.test-name {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--leading-snug);
}

.test-instrument {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}

.test-quit-btn {
  flex-shrink: 0;
}

/* ---- Progress section ---- */
.progress-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

/* .progress-label used inline as a simple text span in progress-info */
.progress-section .progress-label {
  display: inline;
  color: var(--color-text-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  justify-content: unset;
}

.progress-text {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
}

/* Test runner progress track.
   HTML: <div class="progress-bar"> wraps <div class="progress-fill">.
   components.css also defines .progress-bar as alias for .progress-track;
   this rule ensures correct sizing in the test runner context. */
.progress-bar {
  height: var(--progress-height, 0.375rem);
  background: var(--progress-bg, var(--color-bg-muted));
  border-radius: var(--progress-radius, var(--radius-full));
  overflow: hidden;
  position: relative;
}

/* ---- Test layout (sidebar + main) ---- */
.test-layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .test-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .answered-sidebar { order: 2; }
  .question-area    { order: 1; }
}

/* ---- Answered sidebar ---- */
.answered-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 5rem);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sidebar-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.answered-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1-5);
}

/* Individual answered-list nav-dot items (injected by JS) */
.answered-list .nav-dot {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: var(--transition-fast);
  min-height: 2rem;
}

.answered-list .nav-dot:hover      { border-color: var(--color-primary); color: var(--color-primary); }
.answered-list .nav-dot.answered   { background: var(--color-primary-subtle); border-color: var(--color-border-primary); color: var(--color-primary); }
.answered-list .nav-dot.current    { background: var(--color-primary); border-color: var(--color-primary); color: white; box-shadow: var(--shadow-glow-sm); }

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

/* Legend items */
.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

.legend-item::before {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-muted);
  flex-shrink: 0;
}

.legend-item--answered::before { background: var(--color-primary-subtle); border-color: var(--color-border-primary); }
.legend-item--current::before  { background: var(--color-primary); border-color: var(--color-primary); }
.legend-item--skipped::before  { background: var(--color-warning-subtle); border-color: rgba(245, 158, 11, 0.4); }

/* ---- Question area (main column) ---- */
.question-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---- Part banner (ASRS parts A/B) ---- */
.part-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl);
}

.part-banner-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.part-banner-hint {
  font-size: var(--text-xs);
  color: var(--color-primary);
  opacity: 0.75;
  font-weight: var(--weight-medium);
}

/* ---- Domain progress indicator (WFIRS) ---- */
.domain-progress {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-1);
}

.domain-progress::-webkit-scrollbar { display: none; }

.domain-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.domain-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  cursor: default;
  position: relative;
  flex: 1;
  min-width: 4.5rem;
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.domain-step-dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-strong);
  background: var(--color-bg-card);
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.domain-step-label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-align: center;
}

.domain-step.active,
.domain-step.domain-step--active {
  opacity: 1;
}

.domain-step.active .domain-step-dot,
.domain-step.domain-step--active .domain-step-dot {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: var(--shadow-glow-sm);
}

.domain-step.active .domain-step-label,
.domain-step.domain-step--active .domain-step-label {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.domain-step.completed,
.domain-step.domain-step--completed {
  opacity: 1;
}

.domain-step.completed .domain-step-dot,
.domain-step.domain-step--completed .domain-step-dot  {
  border-color: var(--color-success);
  background: var(--color-success);
}

.domain-step.completed .domain-step-label,
.domain-step.domain-step--completed .domain-step-label {
  color: var(--color-success);
}

/* ---- Domain banner (WFIRS) ---- */
.domain-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.domain-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  flex-shrink: 0;
}

.domain-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.domain-header {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.domain-desc,
.domain-banner-desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: none;
}

.domain-banner-counter {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  flex-shrink: 0;
}

.domain-counter {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-medium);
}

/* ---- Question card ---- */
.question-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}

.question-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
}

/* Header row inside question card */
.question-number-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.question-subscale-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  background: var(--color-primary-subtle);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
}

.question-part-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.question-counter {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-medium);
}

.question-number-current {
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.question-number-total {
  color: var(--color-text-tertiary);
}

.question-text {
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-6);
  max-width: none;
}

.question-freq-hint {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-5);
}

/* ---- Question navigation row ---- */
/* NOTE: .question-nav is the flex row inside .question-card (the HTML nav div).
   It is different from .question-nav in the old BEM (the sidebar card wrapper). */
.question-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.question-nav .btn-ghost { gap: var(--space-2); }
.question-nav .btn-primary { gap: var(--space-2); min-width: 8rem; }

/* Finish button */
.nav-finish-btn {
  gap: var(--space-2);
  min-width: 8rem;
}

.nav-prev-btn svg,
.nav-skip-btn svg {
  flex-shrink: 0;
}

/* Question transition animations */
.question-card.slide-out-left  { animation: slideOutLeft  var(--duration-normal) var(--ease-in) forwards; }
.question-card.slide-in-right  { animation: slideInRight  var(--duration-normal) var(--ease-spring) forwards; }
.question-card.slide-out-right { animation: slideOutRight var(--duration-normal) var(--ease-in) forwards; }
.question-card.slide-in-left   { animation: slideInLeft   var(--duration-normal) var(--ease-spring) forwards; }

/* ---- Resume modal ---- */
.resume-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-bg-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.resume-modal[hidden] {
  display: none;
}

.resume-modal-card {
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}

.resume-modal-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.resume-modal-body {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: none;
}

.resume-modal-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-2);
}

.resume-continue-btn,
.resume-restart-btn {
  min-width: 7rem;
}

/* Auto-advance notice */
.auto-advance-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  justify-content: center;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}

/* Timer */
.test-timer {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.test-timer svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* Options list (generic fallback) */
.options-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---- Options container (question answer area) ---- */
.options-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* WFIRS options layout (horizontal row for 0-3 + N/A) */
.options-container--wfirs {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.options-container--wfirs .option-btn--wfirs {
  flex: 1;
  min-width: 5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  gap: var(--space-1);
}

/* WFIRS option number */
.option-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  display: block;
}

/* Frequency label inside option button (text like "Never", "Often") */
.option-freq {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  display: block;
}

.option-btn--wfirs.selected .option-freq {
  color: var(--color-primary);
}

/* N/A button */
.option-btn--na {
  flex: 0 0 auto;
  min-width: 4rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  opacity: 0.7;
}

.option-btn--na:hover {
  opacity: 1;
  background: var(--color-bg-muted);
  border-color: var(--color-border-strong);
  transform: none;
}

.option-btn--na.selected {
  background: var(--color-bg-muted);
  border-color: var(--color-border-strong);
  box-shadow: none;
  opacity: 1;
}

/* Option dot (visual indicator in screener/ASRS — circle at end of option) */
.option-dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-strong);
  flex-shrink: 0;
  margin-left: auto;
  transition: var(--transition-fast);
  background: transparent;
}

.option-btn.selected .option-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

/* ---- Start test button (alias for styling) ---- */
.test-start-btn {
  min-width: 14rem;
}

/* Test container variant with sidebar */
.test-container--with-sidebar {
  /* Uses test-layout grid inside; just a semantic marker */
}

/* WFIRS test container */
.test-container--wfirs {
  /* WFIRS-specific container; inherits from .test-container */
}

/* WFIRS question card variant */
.question-card--wfirs .question-freq-hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  margin: 0;
}

/* Domain banner label (alias for .domain-header) */
.domain-banner-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* Test select page */
.page-test-select {
  padding-block: clamp(3rem, 7vw, 5rem);
}


/* ==========================================================================
   08. RESULTS PAGE
   ========================================================================== */

/* Root page wrapper — matches HTML: <div class="page page-results"> */
.page-results {
  padding-block: clamp(3rem, 7vw, 5rem);
}

/* Legacy alias */
.results-page {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.results-page__inner {
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--spacing-page-x);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Results header */
.results-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

.results-title {
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  font-weight: var(--weight-extrabold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.results-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

.results-test-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.results-time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Score section — matches HTML: <div class="score-section"> */
.score-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-10);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.score-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(14,165,233,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Legacy alias */
.results-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-10);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.results-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(14,165,233,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.results-hero__test-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

/* Score circle wrapper — matches HTML: <div class="score-circle-wrapper"> */
.score-circle-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Legacy BEM alias */
.results-hero__circle-wrap {
  position: relative;
}

/* Interpretation card — color-coded by severity */
.interpretation-card {
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-2xl);
  border: 2px solid;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}

.interpretation-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 10rem;
  height: 10rem;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.05;
  transform: translate(30%, -30%);
}

.interpretation-card--minimal {
  background: var(--color-severity-minimal-bg);
  border-color: var(--color-severity-minimal);
  color: var(--color-severity-minimal);
}

.interpretation-card--low {
  background: var(--color-severity-low-bg);
  border-color: var(--color-severity-low);
  color: var(--color-severity-low);
}

.interpretation-card--moderate {
  background: var(--color-severity-moderate-bg);
  border-color: var(--color-severity-moderate);
  color: var(--color-severity-moderate);
}

.interpretation-card--high {
  background: var(--color-severity-high-bg);
  border-color: var(--color-severity-high);
  color: var(--color-severity-high);
}

.interpretation-card--very-high {
  background: var(--color-severity-very-high-bg);
  border-color: var(--color-severity-very-high);
  color: var(--color-severity-very-high);
}

/* HTML uses .interpretation-card-header (kebab, no BEM __) */
.interpretation-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* BEM alias kept for backward compat */
.interpretation-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* HTML uses .interpretation-icon */
.interpretation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background: currentColor;
  flex-shrink: 0;
}

.interpretation-icon svg {
  color: white;
}

/* BEM alias */
.interpretation-card__icon {
  font-size: var(--text-2xl);
  flex-shrink: 0;
}

.interpretation-card__severity {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: currentColor;
  line-height: 1;
}

/* HTML uses .interpretation-title for the h2 */
.interpretation-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: currentColor;
  line-height: 1.2;
  margin: 0;
}

.interpretation-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  opacity: 0.9;
}

/* HTML uses .interpretation-text */
.interpretation-text {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  max-width: none;
  margin: 0;
}

/* BEM alias */
.interpretation-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  max-width: none;
  margin: 0;
}

.interpretation-card__disclaimer {
  font-size: var(--text-xs);
  opacity: 0.7;
  font-style: italic;
  margin: 0;
  max-width: none;
}

/* SVG score circle */
.score-svg {
  display: block;
  overflow: visible;
}

/* Score center text overlay */
.score-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0-5);
  pointer-events: none;
}

.score-number {
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  font-weight: var(--weight-black);
  color: var(--color-primary);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
}

.score-unit {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-medium);
}

.severity-badge-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Results sections */
.results-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.results-section-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
}

.results-section-hint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: calc(-1 * var(--space-4)) 0 0;
  line-height: var(--leading-relaxed);
}

/* Score row grid (Part A / Part B / Total) */
.score-row-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .score-row-grid { grid-template-columns: 1fr; }
}

.score-row-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.score-row-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.score-row-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--color-primary);
  line-height: 1;
}

.score-row-bar {
  height: 0.375rem;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.score-row-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width 0.8s var(--ease-out);
}

.score-row-hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin: 0;
}

/* Subscale section */
.subscale-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.subscale-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.subscale-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

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

.subscale-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  align-items: flex-start;
}

.subscale-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.subscale-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.subscale-score {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.subscale-bar {
  width: 100%;
  height: 0.375rem;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-1);
}

.subscale-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width 0.8s var(--ease-out);
}

/* DSM-5 section */
.dsm-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dsm-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.dsm-hint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: calc(-1 * var(--space-2)) 0 0;
}

.dsm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

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

.dsm-item {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.dsm-item--presentation {
  grid-column: 1 / -1;
  text-align: center;
}
.dsm-item__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}
.dsm-item__value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}
.dsm-item__value--type {
  font-size: var(--text-base);
  color: var(--color-primary);
}
.dsm-item__bar {
  height: 6px;
  background: var(--color-bg-muted);
  border-radius: 3px;
  overflow: hidden;
}
.dsm-item__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.6s ease-out;
}
.dsm-item--met .dsm-item__fill {
  background: var(--color-danger, #e53e3e);
}
.dsm-item__status {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}
.dsm-item--met .dsm-item__status {
  color: var(--color-danger, #e53e3e);
  font-weight: var(--weight-semibold);
}

/* Charts section */
.charts-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.charts-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

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

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

.chart-container {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--card-shadow);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.chart-container--full {
  grid-column: 1 / -1;
}

.chart-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin: 0;
}

.chart-area {
  min-height: 200px;
  width: 100%;
}

.chart-area--tall {
  min-height: 280px;
}

/* WFIRS domains grid */
.wfirs-domains-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .wfirs-domains-grid { grid-template-columns: 1fr; }
}

/* Answered row */
.results-answered-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  justify-content: center;
}

.results-answered-label {
  font-weight: var(--weight-medium);
}

.results-answered-value {
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
}

/* Actions row */
.results-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.results-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Donate CTA */
.results-donate {
  display: flex;
  justify-content: center;
  padding-block: var(--space-2);
}

/* Donate button */
.btn-donate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: var(--transition-fast);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border: 1px solid var(--color-border-primary);
}

.btn-donate:hover {
  background: var(--color-primary);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-glow-sm);
}

.btn-donate--results {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
}

/* Results disclaimer */
.results-disclaimer {
  margin-top: var(--space-4);
}

/* Shared result banner */
.shared-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.shared-banner svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Results section modifiers */
.results-section--asrs,
.results-section--wfirs {
  /* Section-specific styles inherit from .results-section */
  padding-top: var(--space-4);
}

/* Detailed breakdown — legacy */
.results-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .results-breakdown {
    grid-template-columns: 1fr;
  }
}

.breakdown-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--card-shadow);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.breakdown-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breakdown-card__title svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-primary);
}

/* Charts area */
.results-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .results-charts { grid-template-columns: 1fr; }
}

.chart-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--card-shadow);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.chart-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Subscale scores */
.subscale-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

.subscale-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.subscale-item__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.subscale-item__score {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  white-space: nowrap;
}

/* Actions row */
.results-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Share section */
.results-share {
  padding: var(--space-6);
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.results-share__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.results-share__btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Next steps */
.next-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.next-step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

.next-step-item:hover {
  border-color: var(--color-border-primary);
  transform: translateX(3px);
}

.next-step-item__num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.next-step-item__content { flex: 1; }

.next-step-item__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-0-5);
}

.next-step-item__desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
  max-width: none;
}


/* ==========================================================================
   09. HISTORY PAGE
   ========================================================================== */

/* Root page wrapper — matches HTML: <div class="page page-history"> */
.page-history,
.history-page {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.history-page__inner {
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--spacing-page-x);
}

/* Page header row (title + action buttons) */
.history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.page-header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.history-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Empty state — HTML uses .history-empty */
.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-8);
  color: var(--color-text-tertiary);
}

/* HTML uses .empty-icon (kebab) */
.empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

/* HTML uses .empty-title (kebab) */
.empty-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  margin: 0;
}

/* HTML uses .empty-desc (kebab) */
.empty-desc {
  font-size: var(--text-sm);
  max-width: 30ch;
  line-height: var(--leading-relaxed);
  margin: 0;
  color: var(--color-text-tertiary);
}

/* History list wrapper */
.history-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Stats summary grid — HTML uses .history-stats */
.history-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .history-stats { grid-template-columns: 1fr; }
}

/* HTML uses .history-stat-item (kebab) */
.history-stat-item {
  padding: var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  text-align: center;
}

/* HTML uses .stat-number */
.stat-number {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  color: var(--color-primary);
  line-height: 1;
}

/* HTML uses .stat-label */
.stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* History list */
.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Confirm dialog overlay */
.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--spacing-page-x);
}

.confirm-dialog {
  max-width: 26rem;
  width: 100%;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.confirm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.confirm-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.confirm-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 28ch;
}

.confirm-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* Privacy notice */
.history-privacy {
  margin-top: var(--space-6);
}

/* Summary header cards — legacy BEM aliases */
.history-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (max-width: 640px) {
  .history-summary { grid-template-columns: 1fr; }
}

.history-stat-card {
  padding: var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.history-stat-card__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  color: var(--color-primary);
  line-height: 1;
}

.history-stat-card__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Timeline */
.history-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Vertical line */
.history-timeline::before {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  background: var(--color-border);
}

.timeline-group {
  position: relative;
  z-index: 1;
}

.timeline-group__date {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-4) 0 var(--space-3) var(--space-12);
}

.timeline-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-left: 0;
  margin-bottom: var(--space-3);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.timeline-entry__dot {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  background: var(--color-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  transition: var(--transition-fast);
  font-size: 0.875rem;
}

.timeline-entry:hover .timeline-entry__dot {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.timeline-entry__card {
  flex: 1;
  padding: var(--space-4) var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: var(--transition-fast);
}

.timeline-entry:hover .timeline-entry__card {
  border-color: var(--color-border-primary);
  box-shadow: var(--card-shadow-hover);
  transform: translateX(4px);
}

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

.timeline-entry__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.timeline-entry__time {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.timeline-entry__score-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Trend indicator */
.trend {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.trend-up   { color: var(--color-danger);  }
.trend-down { color: var(--color-success); }
.trend-flat { color: var(--color-text-tertiary); }

.trend svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Empty state — legacy BEM selectors */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-8);
  color: var(--color-text-tertiary);
}

.empty-state__icon {
  font-size: 3.5rem;
  opacity: 0.5;
}

.empty-state__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}

.empty-state__desc {
  font-size: var(--text-sm);
  max-width: 30ch;
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* History list items — generated by history.js */
.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--card-shadow);
  transition: var(--transition-fast);
}

.history-item:hover {
  border-color: var(--color-border-primary);
  box-shadow: var(--card-shadow-hover);
}

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

.history-item-type-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-xl);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.history-item-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.history-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.history-test-type {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.history-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.history-date,
.history-score,
.history-duration {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.history-date {
  font-weight: var(--weight-medium);
}

.history-score {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.history-item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Button variants for history page */
.btn-export,
.btn-clear-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}

.btn-danger-ghost {
  color: var(--color-danger);
}

.btn-danger-ghost:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
  border-color: var(--color-danger);
}


/* ==========================================================================
   10. EDUCATION PAGES
   All education pages share .page-education on the root element.
   ========================================================================== */

/* Root page wrappers — .page-education shared, plus per-page classes */
.page-education,
.page-about,
.page-symptoms,
.page-treatment,
.page-myths,
.page-resources,
.edu-page {
  padding-block: clamp(3rem, 7vw, 5rem);
}

/* ---- Shared edu page header ---- */
.edu-page-header {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  max-width: 56rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.edu-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.edu-breadcrumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.edu-breadcrumb a:hover {
  color: var(--color-primary);
}

.edu-breadcrumb svg {
  opacity: 0.4;
}

.edu-page-title {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.edu-page-subtitle {
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 56ch;
}

.edu-page-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.badge-label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-subtle);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* ---- Edu layout (article + TOC sidebar) ---- */
.edu-layout {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 1023px) {
  .edu-layout {
    grid-template-columns: 1fr;
  }

  .edu-toc {
    display: none;
  }
}

/* ---- Table of contents sidebar ---- */
.edu-toc {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.toc-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin: 0;
}

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

.toc-list li a {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  line-height: var(--leading-snug);
}

.toc-list li a:hover,
.toc-list li a.active {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}

/* ---- Edu article ---- */
.edu-article {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 100%;
}

/* ---- Edu section ---- */
.edu-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.edu-section-title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
}

.edu-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* ---- Highlight box ---- */
.edu-highlight-box {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-border-primary);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-xl);
}

.edu-highlight-box--success {
  background: var(--color-success-subtle);
  border-color: var(--color-success);
  border-left-color: var(--color-success);
}

.highlight-icon {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-primary);
  width: 1.25rem;
  height: 1.25rem;
}

.edu-highlight-box--success .highlight-icon {
  color: var(--color-success);
}

.edu-highlight-box p {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ---- Presentation cards (About ADHD: 3 types) ---- */
.presentation-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .presentation-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .presentation-cards { grid-template-columns: 1fr; }
}

.presentation-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}

.presentation-card--combined {
  border: 2px solid var(--color-border-primary);
  background: linear-gradient(145deg, var(--card-bg) 50%, var(--color-primary-subtle) 100%);
}

.presentation-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.presentation-icon--blue {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.presentation-icon--orange {
  background: var(--color-warning-subtle);
  color: var(--color-warning-dark);
}

.presentation-icon--purple {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.presentation-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

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

.presentation-examples li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-left: var(--space-4);
  position: relative;
  line-height: var(--leading-snug);
}

.presentation-examples li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  opacity: 0.6;
}

/* ---- Stats grid (Prevalence section) ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

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

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-6);
}

/* .stat-number and .stat-label also used by history page — already defined above */

/* ---- Brain areas list ---- */
.edu-brain-areas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.brain-area-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.brain-area-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-top: 0.35em;
}

.brain-area-dot--primary { background: var(--color-primary); }
.brain-area-dot--accent  { background: var(--color-accent);  }
.brain-area-dot--success { background: var(--color-success); }

/* ---- Edu CTA block ---- */
.edu-cta {
  margin-top: var(--space-4);
}

.edu-cta-card {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--color-border-primary);
  position: relative;
  overflow: hidden;
}

.edu-cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(14,165,233,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.edu-cta-card h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.edu-cta-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 40ch;
}

.edu-cta-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================================
   SYMPTOMS PAGE — .page-symptoms
   ========================================================================== */

/* Two-column layout */
.symptoms-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

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

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

/* Column header */
.symptoms-column-header {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.symptoms-column-header--inattention {
  background: linear-gradient(135deg, var(--color-primary-subtle) 0%, rgba(14,165,233,0.15) 100%);
  border: 1px solid var(--color-border-primary);
  color: var(--color-primary);
}

.symptoms-column-header--hyper {
  background: linear-gradient(135deg, var(--color-warning-subtle) 0%, rgba(245,158,11,0.15) 100%);
  border: 1px solid rgba(245,158,11,0.3);
  color: var(--color-warning-dark);
}

.symptoms-col-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
}

.symptoms-col-count {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  opacity: 0.8;
  margin: 0;
}

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

.symptom-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  transition: var(--transition-fast);
}

.symptom-item:hover {
  border-color: var(--color-border-primary);
  transform: translateX(2px);
}

.symptom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-lg);
  background: var(--color-bg-muted);
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

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

.symptom-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  display: block;
}

.symptom-desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Adult symptoms section */
.symptoms-adult-section {
  padding-block: var(--space-8);
}

.adult-symptoms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

@media (max-width: 640px) {
  .adult-symptoms-grid { grid-template-columns: 1fr; }
}

.adult-symptom-card {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.adult-symptom-card h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.adult-symptom-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ==========================================================================
   TREATMENT PAGE — .page-treatment
   ========================================================================== */

/* Treatment cards grid */
.treatment-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

@media (max-width: 900px) {
  .treatment-cards-grid { grid-template-columns: 1fr; }
}

.treatment-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
}

.treatment-card-icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.treatment-card-icon--blue   { background: var(--color-primary-subtle);  color: var(--color-primary);      }
.treatment-card-icon--purple { background: var(--color-accent-subtle);   color: var(--color-accent);       }
.treatment-card-icon--green  { background: var(--color-success-subtle);  color: var(--color-success-dark); }
.treatment-card-icon--orange { background: var(--color-warning-subtle);  color: var(--color-warning-dark); }

.treatment-card-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

/* Effectiveness rating */
.treatment-effectiveness {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0;
}

.effectiveness-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.effectiveness-rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.effectiveness-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.effectiveness-rating--high .effectiveness-dot {
  background: var(--color-success);
}

.effectiveness-rating--moderate .effectiveness-dot {
  background: var(--color-warning);
}

.effectiveness-dot--empty {
  background: var(--color-bg-muted);
  border: 1.5px solid var(--color-border-strong);
}

/* Subsection within a treatment card */
.treatment-subsection {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
}

.treatment-subsection h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

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

.treatment-list li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-left: var(--space-4);
  position: relative;
  line-height: var(--leading-snug);
}

.treatment-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  opacity: 0.6;
}

.treatment-note {
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

/* Lifestyle grid */
.lifestyle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

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

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

.lifestyle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-warning-subtle);
  color: var(--color-warning-dark);
  flex-shrink: 0;
}

.lifestyle-item strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.lifestyle-item p {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Combined approach section */
.combined-approach-section {
  margin-bottom: var(--space-8);
}

.combined-approach-card {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
}

.combined-approach-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(14,165,233,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.combined-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

/* Combined approach diagram */
.combined-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-6);
  position: relative;
}

.combined-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-snug);
  padding: var(--space-2);
}

.combined-node--medication { background: var(--color-primary-subtle);  color: var(--color-primary);      border: 2px solid var(--color-border-primary); }
.combined-node--therapy    { background: var(--color-accent-subtle);   color: var(--color-accent);       border: 2px solid rgba(99,102,241,0.30);       }
.combined-node--lifestyle  { background: var(--color-success-subtle);  color: var(--color-success-dark); border: 2px solid rgba(16,185,129,0.30);       }

.combined-center {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: var(--leading-snug);
  box-shadow: var(--shadow-glow-sm);
}

.treatment-disclaimer {
  margin-top: var(--space-4);
}

/* ==========================================================================
   MYTHS PAGE — .page-myths — flip cards
   ========================================================================== */

/* Hint line at top */
.myths-hint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Grid of flip cards */
.myths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-block: var(--space-6);
}

@media (max-width: 900px) {
  .myths-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* Flip card wrapper */
.myth-card-wrapper {
  perspective: 1200px;
  min-height: 22rem;
}

/* The flipping card itself */
.myth-card {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--duration-slow) var(--ease-in-out);
  cursor: pointer;
  border-radius: var(--radius-2xl);
  outline: none;
}

.myth-card:focus-visible {
  box-shadow: 0 0 0 3px var(--color-primary);
}

.myth-card.is-flipped {
  transform: rotateY(180deg);
}

/* Faces */
.myth-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: 1.5px solid;
}

.myth-face--front {
  background: var(--color-danger-subtle);
  border-color: rgba(239,68,68,0.25);
}

.myth-face--back {
  background: var(--color-success-subtle);
  border-color: rgba(16,185,129,0.25);
  transform: rotateY(180deg);
}

.myth-label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-2-5);
  background: var(--color-danger);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--radius-full);
}

.fact-label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-2-5);
  background: var(--color-success);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--radius-full);
}

.myth-icon,
.fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
}

.myth-icon {
  color: var(--color-danger);
  background: rgba(239,68,68,0.10);
}

.fact-icon {
  color: var(--color-success);
  background: rgba(16,185,129,0.10);
}

.myth-statement {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  margin: 0;
  flex: 1;
  font-style: italic;
}

.fact-statement {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  margin: 0;
  flex: 1;
}

.myth-flip-hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: auto;
  align-self: center;
}

/* ==========================================================================
   11. RESOURCES PAGE
   ========================================================================== */

/* Shared resource page layout */
.resources-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Resource section */
.resources-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.resources-section-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-border);
}

.resources-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  flex-shrink: 0;
}

.resources-section-icon--danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* Resource cards grid */
.resources-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .resources-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .resources-cards-grid { grid-template-columns: 1fr; }
}

/* Individual resource card */
.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--color-border-primary);
}

.resource-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.resource-abbr {
  font-size: var(--text-base);
  font-weight: var(--weight-extrabold);
  color: var(--color-primary);
  letter-spacing: var(--tracking-tight);
}

.resource-external-icon {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--duration-fast);
}

.resource-card:hover .resource-external-icon {
  opacity: 1;
  color: var(--color-primary);
}

.resource-card h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin: 0;
}

.resource-card p {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  flex: 1;
  margin: 0;
}

.resource-url {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  margin-top: auto;
}

/* Specialist guide card */
.specialist-guide {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7);
}

.specialist-intro {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.specialist-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

@media (max-width: 640px) {
  .specialist-types { grid-template-columns: 1fr; }
}

.specialist-type {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.specialist-type h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin: 0;
}

.specialist-type p {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Finding tips sub-section */
.specialist-finding-tips {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.specialist-finding-tips h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

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

.resources-link-list a {
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.resources-link-list a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Books grid */
.books-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

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

.book-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
}

.book-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  flex-shrink: 0;
}

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

.book-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  display: block;
}

.book-author {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  display: block;
}

.book-desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Crisis section */
.crisis-notice {
  margin-bottom: var(--space-4);
}

.crisis-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .crisis-cards-grid { grid-template-columns: 1fr; }
}

.crisis-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.crisis-card h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

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

.crisis-list li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  line-height: var(--leading-snug);
}

.crisis-link {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.crisis-link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.resources-disclaimer {
  margin-top: var(--space-6);
}

/* ==========================================================================
   LEGACY RESOURCE CLASSES (from old pages.css) — kept for compatibility
   ========================================================================== */

.resources-page {
  padding-block: clamp(3rem, 7vw, 5rem);
}

/* .resources-section-title already defined above with new comprehensive styles */

.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

@media (max-width: 900px) {
  .resources-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--color-border-primary);
}

.resource-card__type {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

.resource-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  max-width: none;
}

.resource-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  flex: 1;
  margin: 0;
  max-width: none;
}

.resource-card__link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin-top: auto;
  transition: gap var(--duration-fast) var(--ease-spring);
}

.resource-card:hover .resource-card__link {
  gap: var(--space-2);
}

.resource-card__link svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* External link badge */
.resource-card__ext {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
}

.resource-card__ext svg {
  width: 0.75rem;
  height: 0.75rem;
}


/* ==========================================================================
   12. 404 / ERROR PAGE
   ========================================================================== */

.error-page {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-page-x);
  text-align: center;
}

.error-page__inner {
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.error-page__code {
  font-size: clamp(6rem, 15vw, 10rem);
  font-weight: var(--weight-black);
  line-height: 1;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: var(--tracking-tighter);
}

.error-page__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.error-page__desc {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}


/* ==========================================================================
   13. SHARED PAGE PARTIALS
   ========================================================================== */

/* Page header (used on inner pages) */
.page-header {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

.page-header__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-3);
  display: block;
}

.page-header__title {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
  max-width: none;
}

.page-header__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 52ch;
  margin-inline: auto;
  margin: 0 auto;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

.breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.breadcrumb__link:hover {
  color: var(--color-primary);
}

.breadcrumb__sep {
  color: var(--color-text-tertiary);
  font-size: 0.7em;
}

.breadcrumb__current {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

/* CTA banner */
.cta-banner {
  padding: var(--space-10) var(--space-8);
  background: var(--gradient-primary);
  border-radius: var(--radius-3xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.cta-banner__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--weight-extrabold);
  color: white;
  letter-spacing: var(--tracking-tight);
  max-width: none;
}

.cta-banner__text {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.85);
  max-width: 48ch;
  line-height: var(--leading-relaxed);
  margin: 0;
}

.cta-banner .btn-primary {
  background: white;
  color: var(--color-primary-dark);
}

.cta-banner .btn-primary:hover {
  background: var(--color-primary-xlight);
}

/* Disclaimer notice (bottom of test/results) */
.medical-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-warning-subtle);
  border: 1px solid rgba(245, 158, 11, 0.20);
  border-radius: var(--radius-xl);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.medical-disclaimer svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-warning);
  flex-shrink: 0;
  margin-top: 0.1em;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  left: var(--space-6);
  z-index: var(--z-sticky);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: var(--transition-fast);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.5rem);
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-glow-sm);
}

.back-to-top svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ==========================================================================
   RESOURCES PAGE — Community Subsection Titles
   ========================================================================== */

.resources-subsection-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  margin: var(--space-6) 0 var(--space-3);
  padding-left: var(--space-2);
  border-left: 3px solid var(--color-primary);
}

.resources-subsection-title:first-of-type {
  margin-top: var(--space-4);
}


/* ==========================================================================
   EMERGENCY SUPPORT PAGE
   ========================================================================== */

/* ---- Banner ---- */
.emergency-banner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  background: linear-gradient(135deg, var(--color-danger-subtle) 0%, rgba(239,68,68,0.08) 100%);
  border: 1.5px solid var(--color-danger);
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-8);
}

[data-theme="dark"] .emergency-banner {
  background: linear-gradient(135deg, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.04) 100%);
}

.emergency-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-xl);
  background: var(--color-danger);
  color: white;
  flex-shrink: 0;
}

.emergency-banner-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.emergency-banner-content h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-danger);
  margin: 0 0 var(--space-1) 0;
}

.emergency-banner-content p {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

@media (max-width: 640px) {
  .emergency-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--space-5);
    gap: var(--space-3);
  }
}

/* ---- International quick links ---- */
.emergency-intl-links {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.emergency-intl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-xl);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: var(--transition-normal);
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-sm);
}

.emergency-intl-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-sm);
}

.emergency-intl-btn--secondary {
  background: var(--glass-bg);
  color: var(--color-primary);
  border: 1.5px solid var(--color-border-primary);
}

.emergency-intl-btn--secondary:hover {
  background: var(--color-primary-subtle);
}

.emergency-intl-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* ---- Search section ---- */
.emergency-search-section {
  margin-bottom: var(--space-6);
}

.emergency-search-section h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.emergency-search-subtitle {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4) 0;
}

.emergency-search-box {
  position: relative;
  max-width: 480px;
}

.emergency-search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.emergency-search-input {
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  transition: var(--transition-fast);
  outline: none;
}

.emergency-search-input::placeholder {
  color: var(--color-text-tertiary);
}

.emergency-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

.emergency-search-clear {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.emergency-search-clear:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

.emergency-search-clear svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* ---- Country grid ---- */
.emergency-countries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

@media (max-width: 560px) {
  .emergency-countries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.emergency-country-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  cursor: pointer;
  transition: var(--transition-normal);
  text-align: left;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.emergency-country-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.emergency-country-card--highlighted {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  order: -1;
}

.emergency-country-card--highlighted::after {
  content: '★';
  margin-left: auto;
  color: var(--color-primary);
  font-size: var(--text-xs);
}

.emergency-country-flag {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.emergency-country-name {
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emergency-country-services-count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.emergency-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-tertiary);
  font-style: italic;
}

.emergency-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-tertiary);
}

.emergency-loading .spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
  margin: 0 auto var(--space-3);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- Country detail view ---- */
.emergency-country-detail {
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.emergency-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-fast);
  margin-bottom: var(--space-5);
}

.emergency-back-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.emergency-back-btn svg {
  width: 1rem;
  height: 1rem;
}

.emergency-country-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.emergency-country-header .emergency-country-flag {
  font-size: 3rem;
}

.emergency-country-header h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.emergency-country-header .emergency-services-badge {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

/* ---- Service cards ---- */
.emergency-services-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.emergency-service-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  transition: var(--transition-normal);
}

.emergency-service-card:hover {
  box-shadow: var(--shadow-card);
}

.emergency-service-card--hotline { border-left: 4px solid var(--color-danger); }
.emergency-service-card--text    { border-left: 4px solid var(--color-primary); }
.emergency-service-card--chat    { border-left: 4px solid var(--color-success); }
.emergency-service-card--email   { border-left: 4px solid var(--color-warning); }
.emergency-service-card--center  { border-left: 4px solid var(--color-info, var(--color-primary)); }

.emergency-service-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.emergency-service-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.emergency-service-card--hotline .emergency-service-type-icon { background: var(--color-danger-subtle); color: var(--color-danger); }
.emergency-service-card--text    .emergency-service-type-icon { background: var(--color-primary-subtle); color: var(--color-primary); }
.emergency-service-card--chat    .emergency-service-type-icon { background: var(--color-success-subtle, rgba(16,185,129,0.1)); color: var(--color-success, #10b981); }
.emergency-service-card--email   .emergency-service-type-icon { background: var(--color-warning-subtle, rgba(245,158,11,0.1)); color: var(--color-warning, #f59e0b); }
.emergency-service-card--center  .emergency-service-type-icon { background: var(--color-primary-subtle); color: var(--color-primary); }

.emergency-service-type-icon svg {
  width: 1rem;
  height: 1rem;
}

.emergency-service-type-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
}

.emergency-service-availability {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-success, #10b981);
  background: var(--color-success-subtle, rgba(16,185,129,0.1));
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
}

.emergency-service-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.emergency-service-desc {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4) 0;
}

.emergency-service-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.emergency-call-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-danger);
  color: white;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: var(--transition-fast);
}

.emergency-call-btn:hover {
  background: var(--color-danger-hover, #dc2626);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.emergency-call-btn svg {
  width: 1rem;
  height: 1rem;
}

.emergency-sms-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-primary);
  color: white;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: var(--transition-fast);
}

.emergency-sms-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.emergency-sms-btn svg {
  width: 1rem;
  height: 1rem;
}

.emergency-web-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: var(--transition-fast);
}

.emergency-web-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.emergency-web-btn svg {
  width: 1rem;
  height: 1rem;
}

.emergency-service-languages {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.emergency-service-languages span {
  font-size: var(--text-2xs, 0.625rem);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
}

/* ---- Map section ---- */
.emergency-map-section {
  margin: var(--space-8) 0;
}

.emergency-map-section h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.emergency-map-section > p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5) 0;
}

.emergency-map-container {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  overflow: hidden;
  position: relative;
  min-height: 300px;
}

.emergency-map-container svg {
  width: 100%;
  height: auto;
}

.map-dot {
  cursor: pointer;
  transition: var(--transition-fast);
}

.map-dot circle {
  fill: var(--color-text-tertiary);
  opacity: 0.3;
  transition: var(--transition-fast);
}

.map-dot--active circle {
  fill: var(--color-primary);
  opacity: 0.8;
}

.map-dot:hover circle {
  fill: var(--color-danger);
  opacity: 1;
  r: 6;
}

.map-tooltip {
  position: absolute;
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.map-tooltip--visible {
  opacity: 1;
}

/* ---- Emergency disclaimer ---- */
.emergency-disclaimer {
  margin-top: var(--space-8);
  border-color: var(--color-warning, #f59e0b);
  background: var(--color-warning-subtle, rgba(245,158,11,0.06));
}