/* ==========================================================================
   LIQUID GOLD ON GRAPHITE - liquid-glass.css
   Redesign layer loaded last. Implements Apple's Liquid Glass material
   for the CONTROL layer (nav, dropdowns, sheets, toasts, capsule buttons)
   and keeps the CONTENT layer opaque, calm and readable.

   Table of Contents:
   1. Material primitives (.lg, regular / clear, rim, lens)
   2. Page ground + cursor light
   3. Typography: airy and readable
   4. Floating capsule navigation
   5. Buttons (capsules)
   6. Content cards: opaque, specular rim follows the cursor
   7. Controls: inputs, options, progress, chips, badges
   8. Sheets: dropdown, mobile menu, modal, toast
   9. Hero, sections, footer
   10. QA corrections found in the visual pass
   11. Accessibility: reduced transparency / motion, touch
   ========================================================================== */


/* ==========================================================================
   1. MATERIAL PRIMITIVES
   A Liquid Glass surface = translucent fill + backdrop lensing + specular
   rim (light enters top-left) + soft floor shadow. Never stack glass on glass.
   ========================================================================== */

.lg,
.lg--regular {
  position: relative;
  background: var(--lg-regular-bg);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid transparent;
  box-shadow: var(--lg-rim), 0 0 0 1px var(--lg-edge-dim), var(--lg-shadow);
  background-clip: padding-box;
}

.lg--clear {
  background: var(--lg-clear-bg);
}

/* Lensing highlight painted over the fill (no pointer capture) */
.lg::before,
.lg--regular::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lg-lens);
  pointer-events: none;
  z-index: 0;
}

.lg > *,
.lg--regular > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   2. PAGE GROUND + CURSOR LIGHT
   ========================================================================== */

body {
  background-color: var(--color-bg-body);
  line-height: 1.6;
}

/* Warm, almost-invisible gold light pooled at the top; replaces blue orbs */
body::before {
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(var(--color-primary-rgb), 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(28, 27, 25, 0.035) 0%, transparent 60%);
}

[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(var(--color-primary-rgb), 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 60%);
}

/* The moving light source. Positioned by js/cursor-light.js via --cursor-x/y */
.cursor-light {
  position: fixed;
  inset: 0;
  z-index: var(--z-below);
  pointer-events: none;
  background: radial-gradient(
    circle var(--light-radius) at var(--cursor-x) var(--cursor-y),
    var(--light-color) 0%,
    rgba(var(--color-primary-rgb), 0.04) 35%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}

html.has-cursor-light .cursor-light { opacity: 1; }


/* ==========================================================================
   3. TYPOGRAPHY: airy and readable
   Lighter weights, generous leading, measured tracking. Gold is used for
   emphasis, never for body copy.
   ========================================================================== */

h1, .h1 { font-weight: var(--weight-bold); letter-spacing: -0.028em; }
h2, .h2 { font-weight: var(--weight-semibold); letter-spacing: -0.02em; }
h3, .h3 { font-weight: var(--weight-semibold); }

.display-heading {
  font-weight: var(--weight-bold);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

/* Liquid gold text: a slow specular sweep across the letters */
.text-gradient {
  background: var(--gradient-gold-liquid);
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: lg-gold-sweep 7s var(--ease-in-out) infinite alternate;
}

@keyframes lg-gold-sweep {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

p, .lead, .hero-subtitle, .section-subtitle {
  color: var(--color-text-secondary);
}

.lead, .hero-subtitle {
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  line-height: 1.65;
  font-weight: var(--weight-normal);
  max-width: 38rem;
}

/* Centered intro copy stays centered as a block, not only as text */
.section-subtitle,
.page-header__subtitle,
.test-select-header .lead,
.page-header .lead {
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 900px) {
  .hero-subtitle { margin-inline: auto; }
}

a { text-decoration-color: rgba(var(--color-primary-rgb), 0.45); text-underline-offset: 0.18em; }

::selection { background: rgba(var(--color-primary-rgb), 0.28); color: var(--color-text-primary); }


/* ==========================================================================
   4. FLOATING CAPSULE NAVIGATION (Liquid Glass, Regular)
   Detached from the edges, so content visibly flows underneath.
   ========================================================================== */

.nav {
  top: 0.875rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(calc(100% - 1.5rem), calc(var(--container-xl) - 2rem));
  height: var(--nav-bar-height);
  border-radius: var(--radius-full);
  background: var(--lg-regular-bg);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: var(--lg-rim), 0 0 0 1px var(--lg-edge-dim), var(--lg-shadow);
  transition:
    background var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    top var(--duration-normal) var(--ease-out);
}

.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lg-lens);
  pointer-events: none;
}

.nav.scrolled {
  background: var(--glass-bg-heavy);
  box-shadow: var(--lg-rim), 0 0 0 1px var(--lg-edge-dim), var(--shadow-xl);
}

.nav-inner {
  position: relative;
  max-width: none;
  padding-inline: var(--space-3) var(--space-3);
  gap: var(--space-3);
}

.nav-logo { padding-left: var(--space-2); }
.nav-logo-icon { color: var(--color-primary); }
.nav-logo-text { font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.nav-logo-dot { color: var(--color-primary); }

.nav-link {
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-3-5);
  font-weight: var(--weight-medium);
}

/* No underline bars: Liquid Glass uses a soft capsule fill for state */
.nav-link::after { display: none; }

.nav-link:hover,
.nav-link.active {
  color: var(--color-text-primary);
  background: rgba(var(--color-primary-rgb), 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.nav-link.active { color: var(--color-primary-dark); }
[data-theme="dark"] .nav-link.active { color: var(--color-primary); }

.nav-link--emergency:hover { background: var(--color-danger-subtle); color: var(--color-danger); }

.lang-switcher,
.theme-toggle,
.nav-hamburger {
  background: rgba(28, 27, 25, 0.05);
  border: 1px solid rgba(28, 27, 25, 0.06);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .lang-switcher,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .nav-hamburger {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.theme-toggle { width: 2.375rem; height: 2.375rem; }
.theme-toggle:hover { background: rgba(var(--color-primary-rgb), 0.14); border-color: transparent; color: var(--color-primary-dark); }
[data-theme="dark"] .theme-toggle:hover { color: var(--color-primary); }

.lang-btn.active {
  background: var(--gradient-primary);
  color: var(--color-text-on-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(28, 27, 25, 0.15);
}


/* ==========================================================================
   5. BUTTONS: capsules. Primary = tinted liquid gold with dark text
   (gold + white text fails contrast; Apple tints sparingly, one per view).
   ========================================================================== */

.btn {
  border-radius: var(--radius-full);
  letter-spacing: 0.01em;
  font-weight: var(--weight-semibold);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.btn-lg { padding-inline: var(--space-7); }

.btn-primary {
  background: var(--gradient-sky);
  color: var(--color-text-on-primary);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(28, 27, 25, 0.12),
    0 1px 2px rgba(28, 27, 25, 0.10),
    0 10px 24px -10px rgba(var(--color-primary-rgb), 0.55);
}

/* Liquid sheen sweeping across the gold on hover */
.btn-primary::before {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 120% 0;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out), background-position 900ms var(--ease-out);
}

.btn-primary:hover {
  background: var(--gradient-sky);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(28, 27, 25, 0.12),
    0 2px 4px rgba(28, 27, 25, 0.10),
    0 16px 32px -12px rgba(var(--color-primary-rgb), 0.65);
}

.btn-primary:hover::before { opacity: 1; background-position: -20% 0; }

.btn-primary:active {
  transform: translateY(0) scale(0.985);
  box-shadow: inset 0 1px 2px rgba(28, 27, 25, 0.18), 0 1px 2px rgba(28, 27, 25, 0.10);
}

.btn-secondary {
  background: var(--lg-regular-bg);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  color: var(--color-text-primary);
  border-color: transparent;
  background-clip: padding-box;
  box-shadow: var(--lg-rim), 0 0 0 1px var(--lg-edge-dim), var(--shadow-sm);
}

.btn-secondary:hover {
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary-dark);
  border-color: transparent;
  box-shadow: var(--lg-rim), 0 0 0 1px rgba(var(--color-primary-rgb), 0.35), var(--shadow-md);
}

[data-theme="dark"] .btn-secondary:hover { color: var(--color-primary); }

.btn-ghost { border-radius: var(--radius-full); }

/* The gold glow alone is a ~1.2:1 indicator on the light ground, so keep it as
   the flourish but let the solid outline from base.css carry the visibility
   (WCAG 2.2 SC 2.4.13). The 3px offset puts the ring on the page ground rather
   than on the gold fill, so it reads on the primary button too. */
.btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
  box-shadow: var(--btn-focus-ring), var(--shadow-sm);
}


/* ==========================================================================
   6. CONTENT CARDS: opaque, quiet. The only "glass" here is light:
   a gold specular rim on the border that follows the cursor (--mx/--my).
   ========================================================================== */

.card,
.feature-card,
.test-card,
.select-card,
.question-card,
.stat-card,
.resource-card,
.edu-topic-card,
.history-item,
.chart-card,
.interpretation-card,
.treatment-card,
.edu-cta-card,
.history-stat-card,
.breakdown-card,
.subscale-card,
.book-card,
.crisis-card,
.emergency-country-card,
.emergency-service-card,
.presentation-card,
.adult-symptom-card,
.disclaimer-card {
  --mx: 50%;
  --my: 0%;
  position: relative;
  background:
    radial-gradient(28rem circle at var(--mx) var(--my), rgba(var(--color-primary-rgb), 0.07), transparent 55%),
    var(--card-bg);
  border-color: var(--card-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    var(--card-shadow);
}

[data-theme="dark"] .card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .test-card,
[data-theme="dark"] .select-card,
[data-theme="dark"] .question-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .resource-card,
[data-theme="dark"] .edu-topic-card,
[data-theme="dark"] .history-item,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .interpretation-card,
[data-theme="dark"] .treatment-card,
[data-theme="dark"] .edu-cta-card,
[data-theme="dark"] .history-stat-card,
[data-theme="dark"] .breakdown-card,
[data-theme="dark"] .subscale-card,
[data-theme="dark"] .book-card,
[data-theme="dark"] .crisis-card,
[data-theme="dark"] .emergency-country-card,
[data-theme="dark"] .emergency-service-card,
[data-theme="dark"] .presentation-card,
[data-theme="dark"] .adult-symptom-card,
[data-theme="dark"] .disclaimer-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    var(--card-shadow);
}

/* Specular rim: a 1px ring masked out of a radial gold gradient centred on the cursor */
.card::after,
.feature-card::after,
.select-card::after,
.question-card::after,
.stat-card::after,
.resource-card::after,
.edu-topic-card::after,
.history-item::after,
.chart-card::after,
.interpretation-card::after,
.treatment-card::after,
.edu-cta-card::after,
.history-stat-card::after,
.breakdown-card::after,
.subscale-card::after,
.book-card::after,
.crisis-card::after,
.emergency-country-card::after,
.emergency-service-card::after,
.presentation-card::after,
.adult-symptom-card::after,
.disclaimer-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(18rem circle at var(--mx) var(--my), rgba(var(--color-primary-rgb), 0.85), rgba(var(--color-primary-rgb), 0.25) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
  z-index: 2;
}

.lit::after { opacity: 1; }

.card-hover:hover,
.feature-card:hover,
.select-card:hover,
.edu-topic-card:hover,
.resource-card:hover,
.history-item:hover {
  transform: translateY(-3px);
  border-color: var(--card-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    var(--card-shadow-hover);
}

/* Old blue corner glow on feature cards: retint to gold */
.feature-card::before {
  background: radial-gradient(circle at top right, rgba(var(--color-primary-rgb), 0.10) 0%, transparent 70%);
}

.feature-card__icon,
.feature-icon,
.test-card-icon,
.select-card-icon,
.edu-topic-card__icon {
  border-radius: var(--radius-xl);
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .feature-card__icon,
[data-theme="dark"] .feature-icon,
[data-theme="dark"] .test-card-icon,
[data-theme="dark"] .select-card-icon,
[data-theme="dark"] .edu-topic-card__icon {
  color: var(--color-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.feature-card:hover .feature-card__icon,
.feature-card:hover .feature-icon {
  background: var(--gradient-primary);
  color: var(--color-text-on-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--shadow-glow-sm);
}

/* Card glass variant keeps the material, but only for floating summaries */
.card-glass {
  background: var(--lg-regular-bg);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border-color: transparent;
  background-clip: padding-box;
  box-shadow: var(--lg-rim), 0 0 0 1px var(--lg-edge-dim), var(--lg-shadow);
}


/* ==========================================================================
   7. CONTROLS
   ========================================================================== */

.form-input,
.emergency-search-input {
  border-radius: var(--radius-xl);
  border-width: 1px;
  box-shadow: inset 0 1px 2px rgba(28, 27, 25, 0.04);
}

.form-input:focus,
.emergency-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--input-focus-ring);
}

/* Answer options: quiet capsules, gold on selection */
.option-btn {
  border-width: 1px;
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-xs);
}

[data-theme="dark"] .option-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-xs); }

.option-btn:hover {
  transform: translateX(3px);
  background: rgba(var(--color-primary-rgb), 0.07);
  border-color: rgba(var(--color-primary-rgb), 0.45);
}

.option-btn.selected {
  border-color: rgba(var(--color-primary-rgb), 0.7);
  background: rgba(var(--color-primary-rgb), 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(var(--color-primary-rgb), 0.25), var(--shadow-glow-sm);
}

.option-btn.selected .option-btn__indicator {
  background: var(--gradient-primary);
  border-color: transparent;
}

.progress-track,
.progress-bar { border-radius: var(--radius-full); background: var(--progress-bg); }

.progress-fill {
  background: var(--gradient-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 12px rgba(var(--color-primary-rgb), 0.35);
}

.badge, .chip, .severity-badge, .test-meta-badge, .select-meta-pill, .hero-badge {
  border-radius: var(--radius-full);
}

.badge-primary {
  background: rgba(var(--color-primary-rgb), 0.14);
  color: var(--color-primary-dark);
}

[data-theme="dark"] .badge-primary { color: var(--color-primary); }


/* ==========================================================================
   8. SHEETS (Liquid Glass, Regular): dropdown, mobile menu, modal, toast
   ========================================================================== */

.nav-dropdown,
.modal,
.toast,
.confirm-dialog,
.resume-modal-card {
  background: var(--glass-bg-heavy);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: var(--lg-rim), 0 0 0 1px var(--lg-edge-dim), var(--shadow-xl);
}

.nav-dropdown { border-radius: var(--radius-2xl); padding: var(--space-2); padding-top: calc(var(--space-2) + 0.5rem); }

.nav-dropdown-item { border-radius: var(--radius-xl); }

.nav-dropdown-item:hover {
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-text-primary);
}

.nav-dropdown-icon { color: var(--color-primary-dark); }
[data-theme="dark"] .nav-dropdown-icon { color: var(--color-primary); }

.mobile-menu {
  top: calc(var(--nav-bar-height) + 1.25rem);
  background: var(--glass-bg-heavy);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
}

.mobile-menu-item { border-radius: var(--radius-xl); }

.modal { border-radius: var(--modal-radius); }
.toast { border-radius: var(--toast-radius); }


/* ==========================================================================
   9. HERO, SECTIONS, FOOTER
   ========================================================================== */

.hero-section {
  padding-top: clamp(4rem, 9vw, 7.5rem);
  padding-bottom: clamp(4rem, 9vw, 7.5rem);
}

/* Orbs: one warm gold pool, one graphite shadow. Calm, no saturation. */
.hero-section::before {
  background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.16) 0%, transparent 65%);
  animation-duration: 14s;
}

.hero-section::after {
  background: radial-gradient(circle, rgba(28, 27, 25, 0.06) 0%, transparent 65%);
  animation-duration: 18s;
}

[data-theme="dark"] .hero-section::before {
  background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.13) 0%, transparent 65%);
}

[data-theme="dark"] .hero-section::after {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.35) 0%, transparent 65%);
}

.hero-text { gap: var(--space-6); }

.hero-badge {
  background: var(--lg-regular-bg);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border-color: transparent;
  background-clip: padding-box;
  box-shadow: var(--lg-rim), 0 0 0 1px var(--lg-edge-dim), var(--shadow-sm);
  color: var(--color-primary-dark);
  font-weight: var(--weight-medium);
}

[data-theme="dark"] .hero-badge { color: var(--color-primary); }

.hero-badge::before {
  background: var(--gradient-primary);
  box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.7);
}

.hero-note { color: var(--color-text-tertiary); }

.hero-illustration { color: var(--color-text-tertiary); }

.section-title { font-weight: var(--weight-semibold); letter-spacing: -0.02em; }
.section { padding-block: clamp(3.5rem, 9vw, 7rem); }

.site-footer {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-12) var(--space-10);
}

.footer-logo:hover { color: var(--color-primary-dark); }
[data-theme="dark"] .footer-logo:hover { color: var(--color-primary); }

.btn-donate { border-radius: var(--radius-full); }


/* ==========================================================================
   10. QA CORRECTIONS
   Fixes found in the visual pass over the redesign. Each one is a defect
   against docs/DESIGN-LIQUID-GOLD.md or against WCAG AA, not a restyle.
   ========================================================================== */

/* --- 10.1 Programmatic route focus must not paint a ring ---
   js/router.js focuses the page heading and js/pages/test-runner.js focuses the
   question text on every route and every question, so screen readers announce
   the new content. Chrome matches :focus-visible on such a scripted focus, which
   drew a gold box around the h1 on every navigation and around every question.
   These elements are tabindex="-1": they can never be reached by Tab, so there
   is no keyboard state to communicate. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* --- 10.2 Never white on gold ---
   Design doc, principle 5: gold-filled controls take dark text. White on gold-600
   measures 3.6:1 in light and 1.8:1 on the brighter dark-mode gold; the dark
   token measures 5.0:1 and 10.4:1 on the same fills. */
.skip-link,
.option-btn.selected .option-btn__num,
.avatar,
.step.completed .step__circle,
.edu-cards-grid .edu-card:hover .edu-card-icon,
.select-card-ribbon,
.answered-list .nav-dot.current,
.btn-donate:hover,
.next-step-item__num,
.combined-center,
.back-to-top:hover,
.emergency-intl-btn,
.emergency-region-tab.active,
.emergency-service-link:hover,
.emergency-footer-cta-icon {
  color: var(--color-text-on-primary);
}

/* Pills whose fill is a strong semantic colour follow the theme's inverse text:
   white on the light-mode fill, graphite on the lighter dark-mode fill. */
.myth-label,
.fact-label {
  color: var(--color-text-inverse);
}

html:not([data-theme="dark"]) .fact-label {
  background: var(--color-success-dark);
}

/* --- 10.3 Small gold text on light ground ---
   Design doc, principle 5: gold text on light ground uses gold-600 / gold-700.
   gold-600 clears AA only at heading sizes (3.6:1 on a white card), so the small
   labels below take gold-700 (5.2:1). Dark mode keeps its brighter gold. */
html:not([data-theme="dark"]) .nav-logo-dot,
html:not([data-theme="dark"]) .resource-abbr,
html:not([data-theme="dark"]) .book-author,
html:not([data-theme="dark"]) .results-test-badge,
html:not([data-theme="dark"]) .select-card-subtitle,
html:not([data-theme="dark"]) .select-meta-pill--time,
html:not([data-theme="dark"]) .history-score,
html:not([data-theme="dark"]) .combined-node,
html:not([data-theme="dark"]) .specialist-type h3,
html:not([data-theme="dark"]) .resources-link-list a,
html:not([data-theme="dark"]) .btn-donate:not(:hover),
html:not([data-theme="dark"]) .mobile-menu-item.active {
  color: var(--color-primary-dark);
}

/* --- 10.4 History actions wrap on narrow screens ---
   The export / import / clear row kept its max-content width inside the wrapped
   page header, so #/history scrolled sideways on a phone (449px of content in a
   390px viewport in Russian). */
@media (max-width: 640px) {
  .history-header-actions {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
}

/* --- 10.5 Print ---
   The print stylesheet strips background images, and the liquid-gold headline
   paints its glyphs through one (-webkit-text-fill-color: transparent), so the
   accented word came out blank on paper. The cursor light is a fixed
   full-viewport layer with no meaning in print. */
@media print {
  .text-gradient {
    background: none !important;
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
    animation: none !important;
  }

  .cursor-light {
    display: none !important;
  }
}


/* ==========================================================================
   11. ACCESSIBILITY
   ========================================================================== */

/* Apple: honour Reduce Transparency by falling back to opaque surfaces */
@media (prefers-reduced-transparency: reduce) {
  .nav, .nav-dropdown, .modal, .toast, .mobile-menu, .btn-secondary,
  .hero-badge, .card-glass, .confirm-dialog, .resume-modal-card, .lg, .lg--regular, .lg--clear {
    background: var(--color-bg-card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* The scrolled nav and the secondary-button hover carry their own, more
     specific translucent fill, so they need naming here or they would go
     see-through again in exactly the states a reader spends most time in. */
  .nav.scrolled,
  .btn-secondary:hover,
  .btn-secondary:focus-visible {
    background: var(--color-bg-card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav::before, .lg::before, .lg--regular::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .text-gradient { animation: none; background-position: 50% 0; }
  .btn-primary::before { transition: none; }
  .cursor-light { display: none; }
}

/* No hover-lighting on touch: the rim stays at rest, the page light is hidden */
@media (hover: none) {
  .cursor-light { display: none; }
}

/* Older engines without mask-composite: hide the rim rather than paint a box */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .lit::after { display: none; }
}

/* Small screens: the capsule hugs the edges a little tighter */
@media (max-width: 640px) {
  .nav { top: 0.625rem; width: calc(100% - 1.25rem); }
  .nav-inner { padding-inline: var(--space-2) var(--space-2); }
}