/* ============================================================================
   fsa-course.css — Shared FSA course styles (Layer 2: TYPOGRAPHY ONLY).

   Everything here is SCOPED under `.fsa-course` (added to a redesigned module's
   <main>). Scoping means these rules only affect opted-in modules and win over
   the legacy globals by specificity — so NO `!important` is needed and none is
   used in this layer.

   Layer 2 owns type ROLES (family / weight / role assignment) + the emerald-fade
   selected-signal-text role. Font SIZES keep the existing scale. Component
   visuals (surfaces, borders, button fills, cards) are Layer 3 and are NOT here.

   Load order (per module): fsa-theme.css -> fsa-brand.css ->
   interactive-components.css -> fsa-viz-kit.css -> [fsa-course.css] -> module.
   Created: Layer 2, 2026-07-05. Branch: feat/fsa-layer-2-typography.
   ============================================================================ */

/* --- Base type role: sans for the course subtree (serif reserved for h1/h2) ---
   Note: Module 2 also keeps a page-level `body { font-family: var(--font-sans) }`
   so its fixed nav + footer chrome (which live OUTSIDE <main>) stay sans and the
   page remains value-identical. This `.fsa-course` base makes the course subtree
   self-sufficient for future modules that omit that page-level rule. */
.fsa-course { font-family: var(--font-sans); }

/* --- Major headings: the only serif --- */
.fsa-course h1,
.fsa-course h2 { font-family: var(--font-serif); }

/* --- Card / section headings: sans, one size + weight, neutral ink.
   Retires the Module-2 pilot's `!important` card-heading rule for STATIC
   headings. (The JS-injected `.fsa-plan-summary__header h3` stays in the module
   and is handled in Layer 3, to avoid disturbing the plan widget now.) --- */
.fsa-course .content-block h3,
.fsa-course .build-header h3,
.fsa-course .quiz-question,
.fsa-course .fsa-gate__title,
.fsa-course .fsa-traps__title,
.fsa-course .fsa-worksheet__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text-strong);
}

/* --- Data / labels / calculation results: mono --- */
.fsa-course .result-label,
.fsa-course .result-value { font-family: var(--font-mono); }

/* --- Selected-signal-text role: emerald fade on a SHORT phrase inside a major
   heading only. Uses the existing token path --brand-gradient (-> --fsa-fade).
   Solid emerald fallback via `color` and an @supports guard so the phrase is
   never invisible where background-clip:text is unsupported.
   NEVER apply to full headings, buttons, cards, large backgrounds, worksheets,
   or print. --- */
.fsa-course .fsa-signal {
  color: var(--color-brand, #10B981); /* solid emerald fallback */
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .fsa-course .fsa-signal {
    color: var(--color-brand, #10B981);
    -webkit-text-fill-color: currentColor;
  }
}

/* ============================================================================
   LAYER 3 — COMPONENTS (scoped, no !important).
   Migrated from the Module-2 pilot's inline `<style id="fsa-hybrid-pilot-2">`.
   Every rule wins over the legacy globals + JS-injected class rules by
   specificity: `.fsa-course .x` (0,2,0) beats interactive-components.css `.x`
   (0,1,0) and the fsa-plan-builder.js / fsa-live-data.js injected `.x` (0,1,0)
   rules — regardless of source/injection order — so the pilot's `!important`s
   are retired. Type roles (family/size/weight) stay owned by Layer 2 above;
   these rules set component surfaces/borders/spacing/button visuals only.
   ============================================================================ */

/* --- Gate --- */
.fsa-course .fsa-gate {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #2A2E35);
  border-radius: var(--radius-md, 8px);
  padding: 1.1rem 1.3rem;
  margin: 1.25rem 0;
}
.fsa-course .fsa-gate__title { margin: 0 0 .5rem; }
.fsa-course .fsa-gate ul { margin: .4rem 0 .4rem 1.1rem; }
.fsa-course .fsa-gate__outcome { margin: .6rem 0 0; }

/* --- Traps / pressure callout (4px inner corners, emerald left signal) --- */
.fsa-course .fsa-traps {
  background: var(--color-surface);
  border-left: 3px solid var(--fsa-green, #10b981);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.fsa-course .fsa-traps__title { margin: 0 0 .4rem; }
.fsa-course .fsa-traps ul { margin: .3rem 0 0 1.1rem; }

/* --- Worksheet block (on-screen surfaces; @media print stays in the module, Layer 5) --- */
.fsa-course .fsa-worksheet {
  background: var(--color-elevated);
  border: 1px solid var(--color-border, #2A2E35);
  border-radius: var(--radius-md, 8px);
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}
.fsa-course .fsa-worksheet__title { margin: 0 0 .4rem; }
.fsa-course .fsa-worksheet__print {
  background: var(--color-bg);
  border: 1px dashed var(--color-border-strong, #3A3F47);
  border-radius: 6px;
  padding: .9rem 1rem;
  margin: .8rem 0;
}
.fsa-course .fsa-worksheet__print table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fsa-course .fsa-worksheet__print th,
.fsa-course .fsa-worksheet__print td { border: 1px solid var(--color-border-strong, #3A3F47); padding: 6px; }
.fsa-course .fsa-worksheet__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.fsa-course .fsa-worksheet__note { color: var(--color-muted, #A8B0B8); font-size: .85rem; margin-top: .5rem; }

/* --- Neutralized cards / highlights (emerald as a thin left accent only) --- */
.fsa-course .highlight-tip {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--fsa-green, #10b981);
}
.fsa-course .fsa-live-banner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--fsa-green, #10b981);
}
.fsa-course .build-item {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--fsa-green, #10b981);
}

/* --- Buttons: outline/ghost standard (no fills, no gradients, no pills, 2px) ---
   Shared box + typography for every action button; per-variant colour below. */
.fsa-course .btn,
.fsa-course .fsa-ws-btn,
.fsa-course .fsa-plan-save-btn {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  padding: 0.7rem 1.25rem;
  border-radius: 2px;
  min-height: 44px;
}
.fsa-course .btn { box-shadow: none; }
.fsa-course .btn-primary {
  background: transparent;
  border: 1.6px solid var(--fsa-green, #10b981);
  color: var(--fsa-green, #10b981);
  box-shadow: none;
  background-image: none;
}
.fsa-course .btn-primary:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: var(--fsa-green, #10b981);
  box-shadow: none;
}
.fsa-course .btn-secondary {
  background: transparent;
  border: 1.6px solid var(--fsa-green, #10b981);
  color: var(--fsa-green, #10b981);
  box-shadow: none;
  background-image: none;
}
.fsa-course .btn-secondary:hover {
  background: rgba(16, 185, 129, 0.08);
  box-shadow: none;
}

/* --- Worksheet download button (self-contained outline; box/type from the shared button rule) --- */
.fsa-course .fsa-ws-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  cursor: pointer;
  border: 1.6px solid var(--fsa-green, #10b981);
  background: transparent;
  color: var(--fsa-green, #10b981);
}
.fsa-course .fsa-ws-btn:hover { background: var(--color-surface); }
.fsa-course .fsa-ws-btn--secondary {
  background: transparent;
  border: 1.5px solid var(--color-border-strong, #3A3F47);
  color: var(--color-muted, #A8B0B8);
}

/* --- Plan widget (JS-injected): neutral surface + outline save button + neutral headings.
   Scoped 0,2,0 beats the fsa-plan-builder.js injected 0,1,0 rules. On Module 2 the
   per-module renderWidget carries no inline styles on its "Save My Decisions" button,
   so no !important is needed. The summary selectors are inert on Module 2 (that markup
   renders on the master-plan page) and are kept here scoped for future course use. --- */
.fsa-course .fsa-plan-widget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--fsa-green, #10b981);
  border-radius: 8px;
}
.fsa-course .fsa-plan-save-btn {
  background: transparent;
  border: 1.6px solid var(--fsa-green, #10b981);
  color: var(--fsa-green, #10b981);
  border-radius: 2px;
  box-shadow: none;
  background-image: none;
}
.fsa-course .fsa-plan-save-btn:hover { background: rgba(16, 185, 129, 0.08); }
.fsa-course .fsa-plan-summary__header h3,
.fsa-course .fsa-plan-export h4,
.fsa-course .fsa-plan-section__title { color: var(--color-text-strong); }
.fsa-course .fsa-plan-summary__header h3 {
  font-family: var(--font-sans);
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: 0;
}

/* ============================================================================
   LAYER 4 — ACCESSIBILITY (scoped).
   Migrated from the Module-2 pilot's inline a11y rules.

   Focus ring: `.fsa-course :where(...):focus-visible` is (0,2,0), which beats
   the legacy `a:focus-visible` / `button:focus-visible` (0,1,1) in fsa-theme.css
   and fsa-brand.css by specificity — so the emerald course ring wins without
   depending on source order. `:where()` keeps the inner list at zero specificity.

   Reduced motion: scoped to the course subtree (`.fsa-course *`). Whole-page
   reduced-motion is ALSO guaranteed by the global blocks already in fsa-theme.css
   and fsa-brand.css (which cover the out-of-<main> nav + footer), so scoping the
   course copy is value-identical. `!important` here is the legitimate, defensive
   a11y pattern (the one place it is allowed in the course layers).

   Tap targets (≥44px) already come from the global fsa-theme.css control rule and
   the Layer-3 scoped button rule, so no new tap-target rule is added (a broad one
   would risk changing existing element sizes). aria-live/role=status on
   #calculator-results and input <label>s stay in the module markup.
   ============================================================================ */

/* Visible emerald focus ring on every focusable control inside a course module. */
.fsa-course :where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--fsa-green, #10b981);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect reduced-motion for course-subtree animation/transition/scroll. */
@media (prefers-reduced-motion: reduce) {
  .fsa-course *,
  .fsa-course *::before,
  .fsa-course *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   LAYER 6 — DENSITY NORMALIZATION (scoped; MUST remain the last block).
   Retighten migrated modules to the homepage editorial scale (16px / 1.6,
   840px column = homepage --maxw). Shared, `.fsa-course`-scoped; overrides each
   module's inline base sizing by specificity (`.fsa-course .x` (0,2,0) beats the
   module's own `.x` (0,1,0); `.fsa-course` (0,1,0) beats bare `main`). No module
   HTML/JS edits; no worksheet/print rules; no colour/gradient/button-fill changes.
   Accessibility: Layer-3 button `min-height:44px` is untouched (tap targets stay
   >=44px); calculator inputs (.form-input/.form-group) are NOT tightened.
   Covers the repeated legacy card/heading/spacing selectors the first pass missed
   (.outcome, .scenario-*, quiz-*, the build/bank/mindset/consolidation/myth
   accordion families, result boxes, comparison tables). Single-module additions
   (.insurance-card, .method-name, .stage-title, .cta-title) are grouped in, not
   hacked per-module. See the report for the full selector audit.
   ============================================================================ */

/* Wider desktop workspace column (was a narrow 840; chosen 960 = calmer reading
   margin than 1080 while still giving 2-3 column card grids). Reading text is
   capped separately below so prose never stretches. */
.fsa-course {
  font-size: 16px;
  line-height: 1.6;
  max-width: 960px;
  padding: 1.5rem 1.25rem;
}

/* Header + section rhythm — kills the big vertical gaps / excess scroll */
.fsa-course .module-header { padding: 1.25rem; margin-bottom: 1.5rem; }
.fsa-course .section { margin-bottom: 1.5rem; }
.fsa-course .section-title { font-size: 1.4rem; margin-bottom: 0.85rem; padding-bottom: 0.3rem; }

/* Repeated legacy CARD / CONTAINER surfaces (were 2rem / 1.5rem) -> ~1rem-1.15rem */
.fsa-course .content-block,
.fsa-course .calculator,
.fsa-course .scenario,
.fsa-course .scenario-container,
.fsa-course .quiz,
.fsa-course .outcome,
.fsa-course .result-display,
.fsa-course .scenario-choice,
.fsa-course .result-box,
.fsa-course .insurance-card {
  padding: 1rem 1.15rem;
}
.fsa-course .content-block,
.fsa-course .calculator,
.fsa-course .scenario,
.fsa-course .scenario-container,
.fsa-course .quiz,
.fsa-course .outcome,
.fsa-course .result-display { margin-top: 1.25rem; margin-bottom: 1.25rem; }

/* Accordion families (build / bank / mindset / consolidation / myth) — same pattern */
.fsa-course .build-header, .fsa-course .bank-header, .fsa-course .mindset-header,
.fsa-course .consolidation-header, .fsa-course .myth-header,
.fsa-course .build-content, .fsa-course .bank-content, .fsa-course .mindset-content,
.fsa-course .consolidation-content, .fsa-course .myth-content { padding: 0.9rem 1.1rem; }
.fsa-course .build-item, .fsa-course .bank-item, .fsa-course .mindset-item,
.fsa-course .consolidation-item, .fsa-course .myth-item { margin-bottom: 0.75rem; }

/* Card body text ~0.95-1rem, tighter leading + inner margins */
.fsa-course .content-block { line-height: 1.55; }
.fsa-course .content-block p,
.fsa-course .content-block li,
.fsa-course .scenario-text { font-size: 0.98rem; line-height: 1.5; margin-bottom: 0.6rem; }
.fsa-course .content-block ul,
.fsa-course .content-block ol { margin-bottom: 0.6rem; }

/* Card headings ~1-1.1rem (major section titles handled above) */
.fsa-course .content-block h3,
.fsa-course .build-header h3, .fsa-course .bank-header h3,
.fsa-course .mindset-header h3, .fsa-course .consolidation-header h3,
.fsa-course .myth-header h3,
.fsa-course .quiz-question,
.fsa-course .choice-title,
.fsa-course .outcome-title,
.fsa-course .method-name,
.fsa-course .stage-title { font-size: 1.05rem; margin-bottom: 0.5rem; }
.fsa-course .cta-title { font-size: 1.35rem; margin-bottom: 0.6rem; }

/* Quiz / scenario option lists — tighter gaps */
.fsa-course .quiz-options,
.fsa-course .scenario-choices { gap: 0.6rem; margin-top: 1rem; }
.fsa-course .quiz-feedback { margin-top: 0.6rem; }

/* Comparison tables — tighter cells */
.fsa-course .comparison-table th,
.fsa-course .comparison-table td { padding: 0.6rem 0.75rem; }

/* Buttons — less bulky (min-height:44px tap target preserved from Layer 3) */
.fsa-course .btn,
.fsa-course .fsa-ws-btn,
.fsa-course .fsa-plan-save-btn { padding: 0.5rem 1rem; font-size: 0.9rem; }

/* --- DESKTOP LAYOUT: use the wider column; keep reading text a comfortable measure ---
   Container is 960px (above). All cards are full container width (uniform); only the
   prose line-length is capped, so text-heavy and tool/grid cards line up. Grids fill
   the width. Mobile is unaffected (grids are desktop-only; caps are max-widths). */

/* Cards stay FULL container width (uniform with the tool/grid cards). Only the
   PROSE line-length is capped so text stays readable in the wide column — cap the
   text, not the card (this fixes the earlier narrow-card inconsistency where some
   cards looked narrower AND larger than their siblings). */
.fsa-course .content-block p,
.fsa-course .content-block li,
.fsa-course .scenario-text,
.fsa-course .reflection-question .question-text,
.fsa-course .build-content p, .fsa-course .bank-content p,
.fsa-course .mindset-content p, .fsa-course .consolidation-content p,
.fsa-course .myth-content p { max-width: 72ch; }

/* Escaping card TYPOGRAPHY the first groups missed (local font-size on card
   headings/body). Headings -> ~1.1rem, body -> ~1rem. Big stat NUMBERS
   (.result-*, .flow-amount, .method-value, .factor-percentage) and accordion
   toggle icons are intentionally left large. */
.fsa-course .reflection-question .question-header,
.fsa-course .pros h4, .fsa-course .cons h4,
.fsa-course .scam-title,
.fsa-course .protection-title,
.fsa-course .calculator-title { font-size: 1.1rem; margin-bottom: 0.5rem; }
/* Calculator headings are INLINE-styled (font-size: var(--font-size-2xl)) in 8 of
   10 modules; an inline size can only be overridden with !important. This is the
   single, intentional !important in the density pass — it normalizes the last
   oversized card heading without any module HTML edit. */
.fsa-course .calculator h3 { font-size: 1.1rem !important; }
.fsa-course .reflection-question .question-text,
.fsa-course .cta-feature,
.fsa-course .cta-description,
.fsa-course .flow-description { font-size: 1rem; }
.fsa-course .module-header .subtitle { font-size: 1.05rem; }

/* Class-based reflection / narrative cards -> shared serious style: sans, upright,
   neutral ink. Kills the legacy decorative italic + white/emerald on header + text.
   NOTE: inline class-less narrative divs (e.g. "Alex's real question...") are NOT
   reachable here — they carry inline font-style + a literal emoji and need the small
   HTML cleanup called out in the report. */
.fsa-course .reflection-question .question-header {
  font-family: var(--font-sans); font-style: normal;
  font-size: 1.1rem; color: var(--color-text-strong);
}
.fsa-course .reflection-question .question-text {
  font-family: var(--font-sans); font-style: normal;
  font-size: 1rem; line-height: 1.55; color: var(--color-text);
}
.fsa-course .reflection-question .question-subtitle {
  font-family: var(--font-sans); font-style: normal;
  font-size: 0.95rem; color: var(--color-muted);
}

/* Keep calculator inputs a comfortable width inside the now-wider card */
.fsa-course .calculator .form-group { max-width: 480px; }

/* Option / decision lists become responsive grids on desktop; 1 column on mobile.
   The module card grids (.calculator-results, .insurance-grid, .scam-grid,
   .priority-grid, .protection-grid, .factors-grid, .result-breakdown) already use
   auto-fit, so the wider container gives them more columns automatically. */
@media (min-width: 760px) {
  .fsa-course .quiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .fsa-course .scenario-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}