/* ============================================================================
   DCC v2 Core Components — Fable pass (2026-07-03)
   ----------------------------------------------------------------------------
   Structure only references tokens.css custom properties — no hardcoded
   colour values. Patterns delivered per the locked brief:
     header w/ secure badge + A− A A+ toggle (Be Connected pattern)
     card grid w/ Time-to-Confidence labels (Senior Planet / Be Connected)
     breadcrumbs (Canada.ca / Age UK)
     focus mode (Thinkific pattern — content + Next/Back only)
     layered consent bar (Accept / Reject + Preferences reveal)
     small-wins progress (no-login micro-progression)
   ========================================================================== */

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

html {
  /* WCAG 2.2 SC 2.4.11 — focus/anchor targets never hidden by the sticky header.
     84px is a CSS-only fallback sized to the single-row header (~74px + buffer);
     the header grows taller on narrow widths where its toolbar wraps onto 2-3
     rows, so js/dcc.js measures the real header height at anchor-scroll time
     and corrects for it (S-DCC-ANCHOR-SCROLL-UX-001, 2026-07-26). This is the
     ONE offset mechanism site-wide — do not also add scroll-margin-top to
     individual heading selectors, the two stack additively per spec and
     overshoot past the header into the previous section. */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  text-align: left; /* never centre or justify prose */
  /* Long unbreakable tokens in prose (passwords.google.com, myaccount.google.com
     in module walkthroughs) overflow the page at high zoom on small screens.
     break-word only activates when a word cannot fit its line — no effect on
     normal text. (2026-08-10, S-PORTFOLIO-BRAND-AUDIT-REFRESH-001 Phase 1.) */
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--font-size-h1); color: var(--color-primary); }
h2 { font-size: var(--font-size-h2); color: var(--color-primary); }
h3 { font-size: var(--font-size-h3); color: var(--color-text); }
h4 { font-size: var(--font-size-h4); color: var(--color-text); }

p { margin: 0 0 var(--space-4); max-width: var(--content-max); }

a { color: var(--color-text-link); text-underline-offset: 3px; }
a:hover { color: var(--color-text-link-hover); }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute; left: var(--space-4); top: -60px;
  background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  z-index: calc(var(--z-nav) + 1); font-family: var(--font-heading);
  transition: top var(--motion-duration-2) var(--motion-ease);
}
.skip-link:focus { top: var(--space-2); color: var(--color-btn-primary-text); }

/* ============================================================================
   HEADER — logo · secure badge · A− A A+ · dark-mode toggle
   Same position on every page (WCAG 2.2 SC 3.2.6).
   ========================================================================== */
.site-header {
  /* MC4 (hal-stack/disciplines/ux-launch-readiness-corpus.md §9): unpinned is
     the default on content surfaces -- 14/17 benchmarked products let the
     header leave, and DCC's own live stress-test
     (hal-stack/strategy/dcc-mobile-header-launch-readiness-audit-2026-08-16.md)
     measured 67.6% of the viewport pinned at the audience's real 175%+ zoom
     (MC3's zoom corollary), plus an unreachable dyslexia-font toggle when the
     Display-settings panel opened inside a sticky header that could not grow
     past the viewport bottom (B2). No in-task exemption for pinning is
     recorded per MC4, so un-stickied 2026-08-17 (S-MOBILE-CHROME-SWEEP-001)
     -- the header now scrolls with the page like the mature-product
     benchmark lane. This is the conservative/WCAG-floor reading of the
     pinned-trust-badge taste call filed to Aaron (Notion 3bfa09cf-876a-8102-
     8abe-ca6628c8b5b9) -- provisional pending his actual pick; re-pinning
     with a recorded justification is still open to him. */
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.site-header .container {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--nav-height); flex-wrap: wrap;
  padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.brand {
  font-family: var(--font-heading); font-weight: var(--font-weight-bold);
  font-size: 23px; letter-spacing: 0.01em; color: var(--color-primary); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-target-min);
}
.brand:hover { color: var(--color-primary-hover); }
.brand-mark { width: 32px; height: 32px; flex: 0 0 auto; }

/* Padlock secure badge (CDC/FTC pattern) — icon ALWAYS paired with text */
.secure-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface-alt); color: var(--color-text);
  font-family: var(--font-heading); font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  white-space: nowrap; /* wrap-hardening (2026-07-28 rule): the pill moves as one
    unit on narrow/zoomed layouts; FR "Connexion sécurisée · Canadien" must never
    break internally. */
}
/* Extreme-narrow exception to the 2026-07-28 nowrap rule: under real browser
   zoom (150-200%, common for DCC's own audience) the CSS viewport on a phone
   shrinks below the pill's intrinsic width, and an unwrappable pill then forces
   horizontal scrolling of the whole page — worse than a two-line pill. The rule
   stands everywhere a real device can actually fit the pill.
   (2026-08-10, S-PORTFOLIO-BRAND-AUDIT-REFRESH-001 Phase 1, overlap-check matrix.) */
@media (max-width: 280px) {
  .secure-badge { white-space: normal; }
}

/* Canadian trust badge -- icon ALWAYS paired with text, same pattern as .secure-badge.
   One-time entrance only, never a loop (Two Birds master kit: "nothing loops"). */
:root { --dcc-leaf-red: #C8102E; }
html[data-theme="dark"] { --dcc-leaf-red: #FF6B5E; }
/* 2026-07-29: merged INTO the .secure-badge pill as a second segment
   (Canada.ca/US-gov pattern: one combined identity signature, not a free-
   floating label). Standalone it sat between the pill and the language link,
   where "Canadian | Français" read as a two-option language switcher. */
.ca-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-text-light);
  border-left: 1px solid var(--color-border);
  margin-left: var(--space-3); padding-left: var(--space-3);
}
.ca-leaf { width: 20px; height: 20px; flex: 0 0 auto; color: var(--dcc-leaf-red); }
/* 2026-07-28: this badge used to be opacity:0 by default, made visible only
   once a CSS entrance animation completed ("forwards" fill). Aaron reported
   it missing entirely on a live page -- root cause: a trust badge must never
   depend on an animation actually finishing to become visible (backgrounded
   tabs throttle CSS animations, so "forwards" can simply never arrive).
   Visible by default now, no animation, no failure mode. */
@media (max-width: 400px) {
  .ca-badge .ca-badge-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Language link — always visible in the header (AGENTS.md localisation rule:
   expose the other language, never hide it). */
.lang-link {
  display: inline-flex; align-items: center;
  margin-inline-start: auto; /* 2026-07-29: language toggle lives in the right-hand
    action cluster with Display settings (Canada.ca top-right convention), away
    from the Canadian identity mark it was being misread against. */
  min-height: var(--tap-target-min);
  padding: 0 var(--space-2);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm); color: var(--color-primary);
}
.lang-link:hover { color: var(--color-primary-hover); }

/* IAL4 (hal-stack/disciplines/ia-launch-readiness-corpus.md §9): the no-twin
   disclosure. Where a lang-link falls back to the other locale's hub instead
   of an exact page twin, this note discloses the downgrade AT THE POINT OF
   THE JUMP so the label's promise matches the destination -- a toggle that
   silently swaps "this page in French" for "the French homepage" is an IA3
   broken label (live-demonstrated stranding, dcc-locale-switcher-ial-audit-
   2026-08-16.md B1). Added 2026-08-17 (S-MOBILE-CHROME-SWEEP-001).
   font-size-sm is the accessibility floor (tokens.css: "absolute minimum") --
   never go smaller even for a secondary note. */
.lang-link-note {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  max-width: 240px;
}

/* Settings-gear expander — keeps the accessibility controls one tap away
   without letting them dominate the sticky header (esp. on mobile). */
.settings-toggle {
  min-height: var(--tap-target-min);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: 17px; cursor: pointer;
}
.settings-toggle:hover { background: var(--color-surface-alt); }
.settings-toggle[aria-expanded="true"] {
  background: var(--color-surface-alt); border-color: var(--color-border-strong);
}
.settings-toggle-chevron {
  display: inline-block; font-size: 12px; color: var(--color-text-light);
  transition: transform var(--motion-duration-2, 200ms) var(--motion-ease, ease);
}
.settings-toggle[aria-expanded="true"] .settings-toggle-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .settings-toggle-chevron { transition: none; }
}

.header-tools {
  width: 100%; margin-top: var(--space-2);
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.header-tools[hidden] { display: none; }

/* A− A A+ text-size toggle — prominent, in the header (Be Connected) */
.text-size-group {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-1);
}
.text-size-group .group-label {
  font-family: var(--font-heading); font-size: var(--font-size-sm);
  color: var(--color-text); padding: 0 var(--space-2);
}
.ts-btn, .theme-btn {
  min-width: var(--tap-target-min); min-height: var(--tap-target-min);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: 17px; cursor: pointer;
}
.ts-btn:hover, .theme-btn:hover { background: var(--color-surface-alt); }
.ts-btn[aria-pressed="true"] {
  background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text);
  border-color: var(--color-btn-primary-bg);
}
.theme-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); }

/* --- Breadcrumbs (Canada.ca / Age UK) -------------------------------------- */
.breadcrumbs {
  font-family: var(--font-heading); font-size: var(--font-size-sm);
  padding: var(--space-3) 0;
}
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumbs li + li::before { content: "›"; color: var(--color-text-light); }
.breadcrumbs a { color: var(--color-text-link); min-height: var(--tap-target-min); display: inline-flex; align-items: center; }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: var(--font-weight-semibold); }

/* ============================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-target); padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md); border: 2px solid transparent;
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base); line-height: 1.3;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--motion-duration-2) var(--motion-ease);
}
.btn-primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
.btn-primary:hover { background: var(--color-btn-primary-hover); color: var(--color-btn-primary-text); }
.btn-secondary {
  background: var(--color-surface); color: var(--color-text-link);
  border-color: var(--color-text-link);
}
.btn-secondary:hover { background: var(--color-surface-alt); }
.btn-quiet {
  background: transparent; color: var(--color-text-link);
  text-decoration: underline; text-underline-offset: 3px;
  border: 0; min-height: var(--tap-target-min); padding: var(--space-2) var(--space-3);
  font-family: var(--font-heading); font-size: var(--font-size-sm); cursor: pointer;
}

/* ============================================================================
   HERO (landing)
   ========================================================================== */
.hero {
  background: linear-gradient(170deg, var(--color-primary-light), var(--color-bg) 70%);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-12) 0 var(--space-12);
}
.hero .lead {
  font-size: var(--font-size-lead); line-height: var(--line-height-lead);
  max-width: 62ch;
}
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }

/* Reassurance line — the DCC signature, kept verbatim from the live product */
.reassurance {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-success-light); color: var(--color-success-deep);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  margin: 0 0 var(--space-4);
}

/* Who-pays "free" framing strip */
.who-pays {
  background: var(--color-surface-primary);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
}
.who-pays p { margin: 0; }
.who-pays .who-pays-title {
  font-family: var(--font-heading); font-weight: var(--font-weight-bold);
  color: var(--color-primary); display: block; margin-bottom: var(--space-2);
}

/* Shared-terminal exit control (S-DCC-SHARED-TERMINAL-EXIT-001, 2026-08-12) —
   visible "clear my information" control for the homepage, so patrons on a
   shared/library computer have an equivalent to the one already buried in
   privacy.html (js/data-manager.js, wired the same way). Mirrors
   .story-block/.data-manager on privacy.html (pages.css), reproduced here
   because pages.css is legal-page-only and index.html doesn't load it. */
.session-exit {
  background: var(--color-surface); border-left: 6px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-5) var(--space-6); margin: var(--space-8) 0;
}
.session-exit h2 { margin-top: 0; }
.session-exit-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 0; }
.session-exit-status { margin: var(--space-3) 0 0; font-weight: var(--font-weight-semibold); min-height: 1.4em; }
.session-exit-status.is-error { color: var(--color-error); }
.session-exit-status.is-success { color: var(--color-success-deep); }

/* ============================================================================
   CARD GRID (topic library — Senior Planet / Be Connected)
   ========================================================================== */
.card-grid {
  display: grid; gap: var(--space-6);
  /* min(290px, 100%): the 290px floor must yield when the container itself is
     narrower (real browser zoom 150-200% on small screens shrinks the CSS
     viewport below 290px) — otherwise cards force horizontal scroll.
     Found by the overlap-check width x zoom matrix, 2026-08-10. */
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  margin: var(--space-8) 0;
  padding: 0; list-style: none;
}
.topic-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  position: relative;
}
.topic-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.topic-card .card-icon {
  font-size: 34px; line-height: 1;
  width: 64px; height: 64px; border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  display: inline-flex; align-items: center; justify-content: center;
}
.topic-card h3 { margin: 0; }
.topic-card h3 a {
  color: var(--color-primary); text-decoration: none; font-weight: var(--font-weight-semibold);
}
/* Whole-card click without losing the accessible link name */
.topic-card h3 a::after { content: ""; position: absolute; inset: 0; }
.topic-card h3 a:hover { text-decoration: underline; }
.topic-card p { margin: 0; font-size: calc(var(--font-size-base) - 2px); }

/* Time-to-Confidence label — an outcome contract, not a syllabus time.
   Pill shapes never wrap gracefully -- a 2-line pill loses its lozenge
   shape and looks broken. Keep copy at roughly 35 characters or under
   (measured against real card widths, not eyeballed); if it wraps at any
   card breakpoint, shorten the copy rather than widen the card. */
.ttc {
  display: inline-flex; align-items: center; gap: var(--space-2);
  align-self: flex-start;
  background: var(--color-accent-light); color: var(--color-accent-deep);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  margin-top: auto;
}
.topic-card.card-flagship { border: 2px solid var(--color-primary); }

/* A one-card grid still inherited repeat(auto-fill, minmax(290px, 1fr)), so the
   "Start here, our most popular practice" card rendered at one third of the
   content width with two thirds of empty row beside it, and its copy (the
   longest on the page at 179 characters) crammed into 6 lines in the narrowest
   column on the page. Read as broken rather than deliberate -- Aaron, 2026-08-05,
   described it as heavy text left and heavy empty space right. Give the feature
   card the full row and lay it out horizontally once there is room for it. */
.card-grid--feature { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .card-grid--feature .topic-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon title" "icon body" "icon meta";
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-items: start;
  }
  .card-grid--feature .topic-card .card-icon { grid-area: icon; align-self: center; }
  .card-grid--feature .topic-card h3 { grid-area: title; }
  .card-grid--feature .topic-card p { grid-area: body; max-width: 70ch; }
  /* justify-self, not align-self: .ttc's own align-self:flex-start is a
     flex rule and does nothing here, so the pill stretched the full column. */
  .card-grid--feature .topic-card .ttc { grid-area: meta; margin-top: 0; justify-self: start; }
}
/* position:absolute + a fixed negative top offset means a 2-line wrap
   doesn't just look bad, it grows DOWNWARD into the card's own content
   underneath (confirmed live 2026-07-28: the FR text wrapped and covered
   the card icon). max-width alone only stops horizontal overflow, not
   this. Primary defence is keeping the text short enough to stay on one
   line in EVERY language this badge ships in -- verify each language,
   not just the one it was authored in (see ux-qa-lessons-2026-07-28.md). */
.flagship-tag {
  position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-5);
  max-width: calc(100% - (var(--space-5) * 2)); box-sizing: border-box;
  background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-caption); text-align: center;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================================
   TECH CONCIERGE / GUIDE BLOCK — persona is Aaron's call; [NAME] placeholder
   ========================================================================== */
.guide-block {
  display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  margin: var(--space-8) 0;
}
.guide-photo {
  width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto;
  background: var(--color-surface-alt);
  border: 3px solid var(--color-primary);
  display: flex; align-items: center; justify-content: center; font-size: 42px;
}
.guide-block blockquote { margin: 0; max-width: 58ch; }
.guide-block .guide-name {
  font-family: var(--font-heading); font-weight: var(--font-weight-bold);
  color: var(--color-primary); display: block; margin-top: var(--space-2);
}

/* ============================================================================
   SMALL WINS — no-login micro-progression
   ========================================================================== */
.small-wins {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
}
.small-wins .sw-label {
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm); display: flex; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-2);
}
/* Homepage aggregate summary: the count gets its own larger line so it reads
   as a plain-language sentence, and the storage note is visually demoted
   (smaller, muted, more space above) so it doesn't blur into the count as
   one confusing line. Aaron, 2026-07-29: previous single-line layout read
   as an unexplained score with an unrelated technical note crammed under it. */
.small-wins .sw-count {
  font-family: var(--font-heading); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lead); margin: 0 0 var(--space-3);
}
.small-wins .sw-note {
  margin: var(--space-3) 0 0; padding-top: var(--space-3);
  border-top: 1px solid var(--color-border); font-size: var(--font-size-sm);
  color: var(--color-text-light);
}
.sw-track {
  background: var(--color-surface-alt); border-radius: var(--radius-pill);
  height: 14px; overflow: hidden;
}
.sw-fill {
  background: var(--color-accent); height: 100%; width: 0;
  border-radius: var(--radius-pill);
  transition: width var(--motion-duration-3) var(--motion-ease);
}

/* Confidence badge — effort-based, adult, no cartoon rewards */
.confidence-badge {
  display: none; align-items: center; gap: var(--space-4);
  background: var(--color-success-light); color: var(--color-success-deep);
  border: 1px solid var(--color-success-deep);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
}
.confidence-badge.earned { display: flex; }
.confidence-badge .badge-mark {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid var(--color-success-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; font-family: var(--font-heading); font-weight: var(--font-weight-bold);
}
.confidence-badge p { margin: 0; }

/* ============================================================================
   FOCUS MODE (module shell) — content + Back/Next only, nav recedes
   ========================================================================== */
.focus-header .container { min-height: 60px; }
.focus-main {
  max-width: 820px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-16);
}
.focus-step-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-6); margin: var(--space-6) 0;
}
.step-kicker {
  font-family: var(--font-heading); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-caption); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-light); margin: 0 0 var(--space-2);
}
.focus-nav {
  display: flex; gap: var(--space-4); justify-content: space-between;
  flex-wrap: wrap; margin-top: var(--space-8);
}
.focus-nav .btn { flex: 1 1 200px; }

/* --- Content blocks (kept from the DCC pattern language) ------------------- */
.tip-block, .warning-block, .helper-note {
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
}
.tip-block { background: var(--color-surface-primary); border-left: 4px solid var(--color-primary); }
.warning-block { background: var(--color-warning-light); border-left: 4px solid var(--color-warning); color: var(--color-warning-deep); }
.warning-block strong { color: inherit; }
.helper-note { background: var(--color-accent-light); color: var(--color-text); border: 1px solid var(--color-border); }
.block-label {
  display: block; font-family: var(--font-heading);
  font-weight: var(--font-weight-bold); margin-bottom: var(--space-1);
}

/* --- Choices + feedback (helper practice) ---------------------------------- */
.choices { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.choices button {
  text-align: left; background: var(--color-surface); color: var(--color-text);
  border: 2px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); min-height: var(--tap-target);
  font-family: var(--font-body); font-size: var(--font-size-base); line-height: 1.5;
  cursor: pointer;
}
.choices button:hover { border-color: var(--color-primary); }
.choices button[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-surface-primary); }

.feedback {
  display: none; border-radius: var(--radius-md);
  padding: var(--space-5); margin-top: var(--space-4);
}
.feedback.show { display: block; }
.feedback.good { background: var(--color-success-light); color: var(--color-success-deep); border: 1px solid var(--color-success-deep); }
.feedback.risky { background: var(--color-warning-light); color: var(--color-warning-deep); border: 1px solid var(--color-warning-deep); }
.feedback h3 { color: inherit; margin-bottom: var(--space-2); }
.feedback p { color: inherit; }
.feedback p:last-child { margin-bottom: 0; }

/* Simulated device frames — visually distinct "simulation" cue (ROLESafe) */
.sim-frame { border: 3px dashed var(--color-border-strong); border-radius: var(--radius-xl); padding: var(--space-4); margin: var(--space-5) 0; }
.sim-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold); color: var(--color-text-light);
  margin-bottom: var(--space-3);
}
.phone {
  max-width: 340px; margin: 0 auto; background: #111111;
  border-radius: 34px; padding: 12px; box-shadow: var(--shadow-lg);
}
/* The simulated screen is deliberately theme-independent — it depicts a
   phone/computer, not our UI. Colours are hardcoded to the depiction. */
.phone .screen { background: #F2F4F7; border-radius: 24px; overflow: hidden; min-height: 200px; color: #22262B; }
.phone .bar {
  background: #E9ECF1; padding: 9px 14px; font-size: 15px; color: #333333;
  display: flex; justify-content: space-between; border-bottom: 1px solid #DDDDEE;
  font-family: var(--font-heading);
}
.phone .msg { padding: 16px 14px; }
.phone .bubble {
  background: #FFFFFF; border: 1px solid #E2E2E6; border-radius: 16px;
  padding: 12px 14px; font-size: 17px; line-height: 1.5;
}
.phone .sender { font-size: 14px; color: #55565C; margin: 0 0 6px 4px; max-width: none; }
.desktop { border: 1px solid #C9CCD2; border-radius: var(--radius-md); overflow: hidden; margin: 0 auto; background: #FFFFFF; color: #22262B; }
.desktop .topbar { background: #F0F2F5; padding: 8px 12px; font-size: 15px; color: #444444; border-bottom: 1px solid #DDDDEE; font-family: var(--font-heading); }
.desktop .mailbody { padding: 14px 16px; }
.desktop .sender { font-size: 15px; color: #55565C; margin: 0 0 6px; max-width: none; }
.desktop .bubble { background: #FFFFFF; border: 1px solid #E2E2E6; border-radius: 12px; padding: 12px 14px; font-size: 17px; line-height: 1.5; }

/* Pretend inbox */
.inbox { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-4); }
.mailrow {
  display: flex; gap: var(--space-3); padding: var(--space-4);
  border-bottom: 1px solid var(--color-divider); cursor: pointer;
  align-items: flex-start; background: var(--color-surface);
  width: 100%; border-left: 0; border-right: 0; border-top: 0;
  font-family: var(--font-body); font-size: var(--font-size-base);
  color: var(--color-text); text-align: left;
}
.mailrow:last-child { border-bottom: 0; }
.mailrow:hover { background: var(--color-surface-alt); }
.mailrow.done { background: var(--color-success-light); }
.mailrow .mfrom { font-weight: var(--font-weight-bold); font-family: var(--font-heading); }
.mailrow .msub { color: var(--color-text-light); font-size: calc(var(--font-size-base) - 2px); }

/* ============================================================================
   ILLUSTRATIONS — warm hand-drawn-style inline SVG, theme-aware via
   currentColor (strokes take Trust Blue in light, light blue in dark).
   ========================================================================== */
.illus { color: var(--color-primary); }
.illus svg { max-width: 100%; height: auto; }
.illus .illus-accent, .illus-accent { stroke: var(--color-accent); }
.hero-flex { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.hero-copy { flex: 1 1 480px; }
.illus-hero { flex: 0 1 240px; margin-inline: auto; }
.illus-panel { width: 180px; --illus-stroke: 4; }
.illus-spot { width: 120px; --illus-stroke: 5.5; flex: 0 0 auto; }
.illus-lesson { text-align: center; margin: var(--space-4) 0; }
@media (max-width: 767px) { .illus-spot { width: 110px; } }
@media (max-width: 559px) { .illus-spot { width: 96px; } }

/* Section opener with a Spot-tier figure beside the heading + lead copy --
   first use: "Protect your money" (S-DCC-ILLUSTRATION-CASCADE-001). */
.lesson-group-head { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.lesson-group-head > div:not(.illus) { flex: 1 1 320px; }
.lesson-group-head h2, .lesson-group-head .group-lead { margin: 0; }
.lesson-group-head .group-lead { margin-top: var(--space-2); }

/* --- Read-aloud group: button + Slower/Normal/Faster speed control ---------- */
.read-group { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rate-group {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-1);
}
.rate-btn { font-size: var(--font-size-caption); padding: 0 var(--space-2); }
/* Read-along indicator — light bolding of the current word only.
   No highlight, no background, no motion. */
.ra-word.current { font-weight: var(--font-weight-bold); }

/* --- Soft save prompt (value-first, appears after activity — never a wall) -- */
.save-prompt {
  background: var(--color-surface); border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg); padding: var(--space-6);
  margin: var(--space-6) 0;
}
.save-prompt h2 { font-size: var(--font-size-h3); }
.save-prompt label {
  display: block; font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2);
}
.save-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.save-row input[type="email"] {
  flex: 1 1 240px; min-height: var(--tap-target);
  border: 2px solid var(--color-border-strong); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body); font-size: var(--font-size-base);
  background: var(--color-surface); color: var(--color-text);
}
.save-done { color: var(--color-success-deep); font-family: var(--font-heading); font-weight: var(--font-weight-semibold); }

/* --- "Did you know" — calm, one or two lines, never fear-mongering ---------- */
.did-you-know {
  background: var(--color-surface-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
}
.did-you-know p { margin: 0; font-size: calc(var(--font-size-base) - 1px); }
.did-you-know .dyk-label { font-family: var(--font-heading); font-weight: var(--font-weight-bold); color: var(--color-primary); }
.did-you-know .dyk-source { font-size: var(--font-size-sm); color: var(--color-text-light); }

/* --- Anti-Fraud Centre — its own airspace, visually separate from lessons --- */
.cafc-block {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-12) 0 var(--space-6);
  background: var(--color-surface);
}
.cafc-block p { margin: 0; font-size: calc(var(--font-size-base) - 1px); }

/* --- Partner / institution CTA -------------------------------------------
   Three same-shaped blocks used to close the landing page: the families
   reassurance (.who-pays), this partner pitch, and the Anti-Fraud Centre
   notice (.cafc-block). This one and the fraud notice were literally the
   same class -- the commercial ask and a legal safety notice rendered
   identically, so the ask read as boilerplate and was skimmed past (Aaron,
   2026-08-05). They are differentiated by ROLE, not by decoration: PRODUCT.md
   principle 2 rules out a loud competing CTA, and nothing here is louder than
   the lesson CTAs above it. What changed is that this block now behaves like
   an offer -- named heading, its own accent edge, and a real button instead
   of an underlined link buried mid-sentence -- while the fraud notice stays
   the quietest of the three, which is correct for a notice. */
.partner-cta {
  border: 1px solid var(--color-border-strong);
  border-left: 5px solid var(--color-accent-deep, var(--color-primary));
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-12) 0 var(--space-6);
  background: var(--color-surface-alt);
}
.partner-cta h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-h3);
  color: var(--color-primary);
}
.partner-cta p { margin: 0 0 var(--space-5); max-width: 66ch; }
.partner-cta .btn { margin: 0; }

/* ============================================================================
   CONSENT — layered bar: one line + Accept / Reject / Preferences.
   Fixed to the bottom but body padding reserves the space, so it never
   covers readable content (PRODUCT.md: floating elements earn their position).
   ========================================================================== */
.consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-consent);
  background: var(--color-surface);
  border-top: 3px solid var(--color-primary);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  /* Bottom-anchored CTA row: keep the Accept/Reject buttons clear of an iOS
     home indicator / bottom browser bar (S-DCC-MODAL-CTA-BOTTOM-PADDING-001,
     2026-07-29 -- same rule as the welcome wizard's dialog padding). */
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}
body.consent-open { padding-bottom: 240px; }
.consent-bar .container {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.consent-bar p { margin: 0; flex: 1 1 320px; font-size: calc(var(--font-size-base) - 2px); }
.consent-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.consent-bar .btn { min-height: var(--tap-target-min); padding: var(--space-2) var(--space-5); }

.consent-prefs { margin-top: var(--space-4); border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
.consent-prefs[hidden] { display: none; }
.consent-prefs .container { display: block; }
.consent-option { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); max-width: var(--content-max); }
.consent-option input[type="checkbox"] { width: 28px; height: 28px; margin-top: 4px; flex: 0 0 auto; accent-color: var(--color-btn-primary-bg); }
.consent-option .opt-name { font-family: var(--font-heading); font-weight: var(--font-weight-bold); display: block; }
.consent-option p { font-size: var(--font-size-sm); margin: 0; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-6) 0 var(--space-8);
  margin-top: var(--space-12);
  font-size: var(--font-size-sm);
  text-align: center;
}
.site-footer p { color: var(--color-text); max-width: 64ch; margin-left: auto; margin-right: auto; }
.site-footer .scope-note { color: var(--color-text); }
.footer-links { display: flex; gap: var(--space-5); flex-wrap: wrap; justify-content: center; padding: 0; list-style: none; margin: var(--space-4) 0 0; }
.footer-links a { min-height: var(--tap-target-min); display: inline-flex; align-items: center; }
/* The feedback link (injected by feedback-inflow.js) reads as a stray line when it
   wraps alone on narrower rows -- a small leading mark ties it back to the row
   visually, whether it wraps or sits inline. */
.footer-links .fb-footer-item::before { content: '\2022'; margin-right: var(--space-2); color: var(--color-border); }

/* ============================================================================
   PRIMARY NAV (Sprint V2-2 shell) - grouped by plain-language destination,
   never by module number (Gord's "Protect your money" IA requirement).
   Deliberately NOT sticky: the sticky header alone stays slim so the
   accessibility controls never dominate the top of the screen (Brenda /
   Aaron's sticky-nav complaint). Wraps to a simple column on small screens.
   ========================================================================== */
.primary-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.primary-nav .container {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  padding-top: var(--space-1); padding-bottom: var(--space-1);
}
.primary-nav a {
  display: inline-flex; align-items: center;
  min-height: var(--tap-target-min); padding: var(--space-2) var(--space-4);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: 17px; color: var(--color-text-link); text-decoration: none;
  border-radius: var(--radius-sm);
}
.primary-nav a:hover { background: var(--color-surface-alt); }
.primary-nav a[aria-current="page"] {
  color: var(--color-text); background: var(--color-surface-alt);
}

/* --- Lesson-group headings on the index (named sections nav points at) ----- */
/* Chapter divider (S-DCC-MOBILE-FIRST-LOAD-JOURNEY-001, 2026-08-16): Aaron's
   2026-08-10 field report described the mobile page as "screens stacked on
   screens" with no visual cue where one section ends and the next begins.
   Books, not apps (warm-approachable-senior #8): a quiet rule + generous air
   marks each chapter without adding chrome. */
.lesson-group {
  margin: var(--space-12) 0 var(--space-6);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-8);
}
.lesson-group > h2 { margin-bottom: var(--space-2); } /* anchor-scroll offset: html scroll-padding-top + js/dcc.js, not a per-selector scroll-margin-top (see core.css:16) */
.lesson-group > .group-lead { margin-bottom: var(--space-2); color: var(--color-text); }

/* ============================================================================
   LESSON HEADER (module page) - the anxiety-first opening block.
   Reassurance line + time-boxed promise + category label + a persistent
   "Back to all lessons" escape hatch, in that reading order (Brenda).
   ========================================================================== */
.lesson-back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-target-min); margin: var(--space-4) 0 0;
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  color: var(--color-text-link); text-decoration: none;
}
.lesson-back:hover { text-decoration: underline; }
.lesson-category {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-light); margin: var(--space-6) 0 var(--space-2);
}
.lesson-time {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-accent-light); color: var(--color-accent-deep);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  margin: 0 0 var(--space-4);
}

/* ============================================================================
   FROM YOUR COACH - the per-module empathy block (kept as a signature of the
   live product; a shell slot so every generated page can carry its own).
   ========================================================================== */
.coach-block {
  display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap;
  background: var(--color-surface-primary);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6); margin: var(--space-8) 0;
}
.coach-block .coach-mark {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-surface); border: 2px solid var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 26px;
  object-fit: cover; overflow: hidden;
}
.coach-block .coach-body { flex: 1 1 320px; }
.coach-block .coach-label {
  display: block; font-family: var(--font-heading);
  font-weight: var(--font-weight-bold); color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.coach-block p { margin: 0; }

/* ============================================================================
   THE MOVE IS - every scam / money / safety lesson ends on one concrete,
   verified action, never a vague caution (Gord: accuracy is the brand).
   ========================================================================== */
.the-move {
  background: var(--color-success-light); color: var(--color-success-deep);
  border: 1px solid var(--color-success-deep); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6); margin: var(--space-8) 0;
}
.the-move .move-label {
  display: block; font-family: var(--font-heading);
  font-weight: var(--font-weight-bold); font-size: var(--font-size-h4);
  margin-bottom: var(--space-2); color: inherit;
}
.the-move p { margin: 0 0 var(--space-2); color: inherit; }
.the-move p:last-child { margin-bottom: 0; }

/* ============================================================================
   SEND THIS LESSON - Denise's forward affordance. Copy-link only, no share
   API, no account. The lesson arrives self-contained in a text message.
   ========================================================================== */
.send-lesson {
  background: var(--color-surface); border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
}
.send-lesson h2 { font-size: var(--font-size-h3); margin-bottom: var(--space-2); }
.send-lesson p { margin: 0 0 var(--space-4); }
.send-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.send-done { color: var(--color-success-deep); font-family: var(--font-heading); font-weight: var(--font-weight-semibold); }

/* ============================================================================
   TRUST ROW - Denise's 30-second safety screen. The guarantees are visible
   within one screen on every page (in the shared footer).
   ========================================================================== */
.trust-row {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  padding: 0; list-style: none; margin: 0 0 var(--space-4);
}
/* Footer is centred as a block; the shared trust row centres with it. */
.site-footer .trust-row { justify-content: center; }
.trust-row li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
.trust-row li span[aria-hidden] { color: var(--color-success); }

/* --- External-link framing - every off-site link says so, in words -------- */
.ext-note {
  font-family: var(--font-heading); font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* ============================================================================
   LESSON CONTENT BLOCKS (sample module page) - walkthrough steps, quiz,
   checklist, scam example, 3-second rule, related lessons. Token-driven so
   they carry straight into the V2-3 generator template.
   ========================================================================== */
.walkthrough {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
}
.walkthrough h4 { margin: 0 0 var(--space-4); }
.wt-step { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); }
.wt-step:last-child { margin-bottom: 0; }
.wt-step .step-num {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: 19px;
}
.wt-step .step-text { flex: 1 1 auto; min-width: 0; /* flex min-width:auto blocks
  shrinking below content min-width, overflowing the page at high zoom when a
  step contains a long domain (passwords.google.com). min-width:0 + body's
  overflow-wrap lets it wrap instead. (2026-08-10, brand-audit Phase 1.) */ }
.wt-step .step-text p:last-child { margin-bottom: 0; }

/* Fake-warning depiction - deliberately quoted, clearly labelled "not real" */
.scam-example {
  border: 2px dashed var(--color-error); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); margin: var(--space-5) 0;
  background: var(--color-error-light);
}
.scam-example .example-label {
  display: block; font-family: var(--font-heading); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm); color: var(--color-error); margin-bottom: var(--space-2);
}
.scam-example p { margin: 0; }

/* 3-Second Rule - calm, three steps, no alarm */
.three-second-rule {
  background: var(--color-surface-primary); border-radius: var(--radius-lg);
  padding: var(--space-6); margin: var(--space-6) 0;
}
.three-second-rule h3 { margin-top: 0; }
.tsr-steps { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.tsr-step { flex: 1 1 160px; }
.tsr-step .tsr-icon { font-size: 30px; }
.tsr-step .tsr-name { display: block; font-family: var(--font-heading); font-weight: var(--font-weight-bold); color: var(--color-primary); }

/* Quiz - one structured quiz per lesson (raw_html duplicate stripped, per
   SCOPE drift item 5). Options are buttons; feedback reveals on choose. */
.lesson-quiz { margin: var(--space-6) 0; }
.quiz-q {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
}
.quiz-q h3 { margin-top: 0; }
.quiz-opts { display: flex; flex-direction: column; gap: var(--space-3); }
.quiz-opt {
  text-align: left; background: var(--color-surface); color: var(--color-text);
  border: 2px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); min-height: var(--tap-target);
  font-family: var(--font-body); font-size: var(--font-size-base); line-height: 1.5; cursor: pointer;
}
.quiz-opt:hover { border-color: var(--color-primary); }
.quiz-opt.chosen-right { border-color: var(--color-success-deep); background: var(--color-success-light); color: var(--color-success-deep); }
/* Amber, not red (2026-09-02 ux-heuristic-review, Finding 1): this product's
   anxiety-first mandate bans failure-coded signals, and a red-bordered box
   after tapping an answer reads like the "flashing red warning" Module 1
   itself teaches users to distrust. Tokens are already AA-compliant here
   (--color-warning-deep is 6.1:1 on --color-warning-light). */
.quiz-opt.chosen-wrong { border-color: var(--color-warning-deep); background: var(--color-warning-light); color: var(--color-warning-deep); }
.quiz-opt:disabled { cursor: default; }
.quiz-fb {
  display: none; margin-top: var(--space-4); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.quiz-fb.show { display: block; }
.quiz-fb.good { background: var(--color-success-light); color: var(--color-success-deep); border: 1px solid var(--color-success-deep); }
.quiz-fb.try { background: var(--color-warning-light); color: var(--color-warning-deep); border: 1px solid var(--color-warning-deep); }
.quiz-fb p { margin: 0; color: inherit; }

/* Progress checklist - no-login, saves to the same Small Wins store */
.checklist { margin: var(--space-4) 0; padding: 0; list-style: none; }
.check-item {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider);
}
.check-item:last-child { border-bottom: 0; }
.check-item input[type="checkbox"] { width: 28px; height: 28px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--color-btn-primary-bg); }
.check-item label { font-family: var(--font-body); min-width: 0; /* flex item:
  allow shrink + wrap at high zoom, same fix as .wt-step .step-text */ }

.success-state {
  background: var(--color-success-light); color: var(--color-success-deep);
  border: 1px solid var(--color-success-deep); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); margin: var(--space-5) 0;
}
.success-state p { margin: 0; color: inherit; }

/* Related + within-course navigation */
.related-modules { margin: var(--space-12) 0 0; }
.related-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); /* min(): shrink below 260px at high zoom, see .card-grid note */ }
.related-card {
  display: block; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5); text-decoration: none; color: var(--color-text);
}
.related-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.related-card .related-num { display: block; font-family: var(--font-heading); font-size: var(--font-size-sm); color: var(--color-text-light); }
.related-card .related-name { display: block; font-family: var(--font-heading); font-weight: var(--font-weight-bold); color: var(--color-primary); margin: var(--space-1) 0; }
.related-card .related-desc { display: block; font-size: calc(var(--font-size-base) - 2px); }

.lesson-nav {
  display: flex; gap: var(--space-4); justify-content: space-between;
  flex-wrap: wrap; margin: var(--space-8) 0 0;
}
.lesson-nav a { flex: 1 1 240px; }

/* --- Small screens ---------------------------------------------------------- */
@media (max-width: 560px) {
  .header-tools { margin-left: 0; width: 100%; justify-content: flex-start; }
  .hero { padding: var(--space-8) 0; }
  .focus-nav .btn { flex: 1 1 100%; }
  body.consent-open { padding-bottom: 320px; }
  .primary-nav .container { flex-direction: column; gap: 0; }
  .primary-nav a { width: 100%; }

  /* Tighter header chrome on phones (S-DCC-MOBILE-FIRST-LOAD-JOURNEY-001):
     at 390px the sticky header wraps to three rows; smaller gaps claw back
     vertical room without touching tap-target floors (44px min-heights on
     .brand, buttons and links all stand). */
  .site-header .container { gap: var(--space-2); }

  /* MC6 (ux-launch-readiness-corpus.md §9): chrome must not grow additional
     visual rows by ANY mechanism, including text-wrap (not just flex-wrap).
     At 320px "Digital Confidence Centre" line-wrapped to two lines inside
     .brand, adding ~34px (live-measured 78px vs a 44px single-line row) --
     found by the stress-test audit, fixed 2026-08-17
     (S-MOBILE-CHROME-SWEEP-001). 20px keeps the wordmark on one line down to
     320px while the .brand min-height:44px tap target is untouched. */
  .brand { font-size: 20px; }

  /* Scroll-snap to section starts, phones only (Aaron, 2026-08-10: a normal
     scroll gesture should settle on the next section; a slow drag must still
     let you stop anywhere). `proximity` is the native CSS behaviour that does
     exactly that: it nudges only when a scroll ENDS near a section boundary
     and never hijacks a deliberate mid-section stop (a `mandatory` snap on
     sections taller than the viewport is the known hazard, so it is not
     used). Targets are the .lesson-group chapters ONLY: a snap-align on
     .hero made the browser auto-scroll ~83px at first paint (hero start
     minus scroll-padding), hiding the reassurance line under the sticky
     header — measured live at 390x844 before shipping. scroll-margin-top
     tops up html's static 84px scroll-padding to the real wrapped-header
     height at this width; it does NOT touch the JS anchor-offset mechanism
     (core.css:16), because anchors target the h2 IDs inside the groups, not
     the .lesson-group containers themselves. */
  html { scroll-snap-type: y proximity; }
  .lesson-group { scroll-snap-align: start; scroll-margin-top: 84px; }
}

/* Reduced-motion gate, consolidated (2026-08-10, S-PORTFOLIO-BRAND-AUDIT-REFRESH-001
   Phase 1): the baseline (warm-approachable-senior #8) mandates minimal motion for
   vestibular safety. The chevron and quiz bar were already gated individually;
   this gates the remaining transitions (skip-link slide, button background fade,
   progress fills). Colour fades are low-risk but zero-cost to disable. */
@media (prefers-reduced-motion: reduce) {
  .skip-link, .btn, .sw-fill { transition: none; }
}