/* OTCHealth iHEARtest App - Mobile-first styling */

/* ============================================================
   v1.5.3 — Animated launch splash.
   Mirrors the cinematic open of the beta-launch promo video: black →
   slate-teal reveal, glowing teal sine-arc draws in, "iHEARtest"
   wordmark rises, "BY OTCHEALTH" caption fades in, hold, fade out.
   5 seconds total. Per Matt's "million-dollar app" feel direction.
   ============================================================ */
.launch-splash {
    position: fixed; inset: 0; z-index: 99999;
    background: radial-gradient(ellipse 80% 60% at center,
        #1f4a55 0%, #0a1418 60%, #000 100%);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    overflow: hidden;
    /* Animate the overall overlay: visible until 4.5s, then fade out by 5.0s */
    animation: ls-overlay 5s ease-in-out forwards;
    /* Initial state: pitch black; the bg-fade animation paints in the teal */
    background-color: #000;
}
.launch-splash-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 30%, rgba(0,0,0,0.65) 95%);
    pointer-events: none; z-index: 2;
}
.launch-splash-beam {
    /* v1.5.3 fix: previous beam was a 280 px linear-gradient column that
       read as a "weird box" on the splash. Switched to a centered radial
       glow so the ambient light wraps the arc without showing visible
       rectangular edges. Same brand color, softer presence. */
    position: absolute; left: 50%; top: 50%; width: 760px; height: 760px;
    background: radial-gradient(circle at center,
        rgba(63,160,179,0.32) 0%,
        rgba(63,160,179,0.12) 40%,
        rgba(63,160,179,0) 70%);
    transform: translate(-50%, -50%);
    filter: blur(60px); z-index: 1; mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    animation: ls-beam-in 1.6s ease-out 0.4s forwards;
}
.launch-splash-stage {
    position: relative; z-index: 4;
    display: flex; flex-direction: column; align-items: center;
    gap: 28px;
    padding: 0 32px;
}
.launch-splash-arc {
    width: 60vw; max-width: 320px; height: auto; display: block;
    background: transparent;
    /* v1.5.3 fix: the drop-shadow filter used to sit on this element. iOS
       WKWebView rasterizes the filter against the SVG's bounding rect,
       which produced a faint glowing rectangle around the arc. Moving the
       filter onto the path itself (below) makes WKWebView follow the
       stroke's alpha channel correctly — clean glow, no box. */
}
.launch-splash-arc path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    /* Drop-shadow now on the path so the glow follows the stroke shape
       instead of the SVG's rectangular bounding box. */
    filter: drop-shadow(0 0 24px rgba(95,192,204,0.85))
            drop-shadow(0 0 64px rgba(95,192,204,0.4));
    animation: ls-arc-draw 1.2s ease-out 0.8s forwards,
               ls-arc-pulse 2.4s ease-in-out 2.0s infinite;
}
.launch-splash-arc-dot {
    /* v1.5.3 fix: dot now traces ALONG the curve from the start point
       (4,18) to the end (60,10) over the same 1.2s window the arc draws,
       so the curve appears to be "drawn by the dot". offset-path is a
       CSS standard supported in iOS Safari 16+. cx/cy on the circle are
       set to 0; offset-distance does the work. */
    opacity: 0;
    cx: 0; cy: 0;
    offset-path: path('M4 18 Q 18 4, 36 12 T 60 10');
    offset-distance: 0%;
    offset-rotate: 0deg;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.9));
    animation: ls-dot-trace 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}
.launch-splash-wordmark {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, system-ui, sans-serif;
    font-size: 56px; font-weight: 700; letter-spacing: -1px;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0,0,0,0.45);
    opacity: 0;
    transform: translateY(20px);
    animation: ls-rise 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.8s forwards;
}
.launch-splash-wordmark .lsw-bold { font-weight: 700; color: #FFFFFF; }
.launch-splash-wordmark .lsw-light { font-weight: 300; color: #5BC0CC; text-shadow: 0 0 28px rgba(91,192,204,0.55); }
.launch-splash-caption {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, system-ui, sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: 6px;
    color: rgba(255,255,255,0.55);
    opacity: 0;
    animation: ls-fade-in 0.8s ease-out 2.6s forwards;
}

@keyframes ls-arc-draw {
    0%   { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}
@keyframes ls-arc-pulse {
    0%, 100% { filter: drop-shadow(0 0 24px rgba(95,192,204,0.85))
                       drop-shadow(0 0 64px rgba(95,192,204,0.4)); }
    50%      { filter: drop-shadow(0 0 36px rgba(95,192,204,1.0))
                       drop-shadow(0 0 80px rgba(95,192,204,0.6)); }
}
@keyframes ls-dot-trace {
    /* The dot fades up over the first 80 ms of the trace, then rides
       offset-distance from 0% → 100% along the same Bezier the arc draws,
       so it visually leads the line being drawn. */
    0%   { opacity: 0; offset-distance: 0%; }
    8%   { opacity: 1; offset-distance: 4%; }
    100% { opacity: 1; offset-distance: 100%; }
}
@keyframes ls-beam-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes ls-rise {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes ls-fade-in {
    0%   { opacity: 0; }
    100% { opacity: 0.55; }
}
@keyframes ls-overlay {
    0%, 85%   { opacity: 1; visibility: visible; }
    98%       { opacity: 0; visibility: visible; }
    100%      { opacity: 0; visibility: hidden; }
}

/* Honor reduced-motion: skip the elaborate sequence; show a static
   logo+caption for ~1 s, then fade out. Same overall 5-s budget so any
   downstream code (e.g. analytics) sees consistent timing. */
@media (prefers-reduced-motion: reduce) {
    .launch-splash-arc path { stroke-dashoffset: 0; animation: none; }
    /* reduced-motion: park the dot at the end of the curve immediately
       instead of animating it along the path. */
    .launch-splash-arc-dot { opacity: 1; animation: none; offset-distance: 100%; }
    .launch-splash-wordmark { opacity: 1; transform: none; animation: none; }
    .launch-splash-caption { opacity: 0.55; animation: none; }
    .launch-splash-beam { opacity: 1; animation: none; }
    .launch-splash {
        animation: ls-overlay-reduced 5s ease-in-out forwards;
    }
    @keyframes ls-overlay-reduced {
        0%, 90%  { opacity: 1; visibility: visible; }
        100%     { opacity: 0; visibility: hidden; }
    }
}

/* Class added by JS after the 5-second timeout, as a belt-and-suspenders
   for stuck states (e.g. if the CSS animation never finishes for some
   reason — visibility:hidden on the parent guarantees the splash never
   blocks taps). */
.launch-splash.gone {
    display: none !important;
}

:root {
    --brand-primary: #2E7D8C;
    --brand-primary-dark: #1E5660;
    --brand-accent: #3FA0B3;
    --brand-glow: #5BC0CC;
    --brand-secondary: #1A4F5A;
    --normal-green: #4d7400;
    --bg: #ffffff;
    --bg-soft: #F2F6F7;
    --text: #1a202c;
    --text-soft: #4a5568;
    /* WS4 a11y area 5: #718096 on white bg = ~3.9:1, fails WCAG AA 4.5:1 for
       small text. Darkened to #5a6a7a ≈ 5.1:1 while keeping the same cool hue. */
    --text-muted: #5a6a7a;
    --border: #E2E8EA;
    --danger: #B84040;
    --warn: #C06020;
    --success: #2E7D8C;
    --info: #3FA0B3;
    /* Folio brand refinement (folio/brand-refinement-v1): tier gradient tokens */
    --tier-mild-start: #C8912A; --tier-mild-end: #9B6E18;
    --tier-moderate-start: #C06020; --tier-moderate-end: #9A4818;
    --tier-significant-start: #B84040; --tier-significant-end: #8B2E2E;
    /* type scale */
    --text-xs: calc(11px * var(--user-font-scale, 1)); --text-sm: calc(13px * var(--user-font-scale, 1));
    --text-base: calc(15px * var(--user-font-scale, 1)); --text-md: calc(17px * var(--user-font-scale, 1));
    --text-lg: calc(20px * var(--user-font-scale, 1)); --text-xl: calc(24px * var(--user-font-scale, 1));
    --text-2xl: calc(32px * var(--user-font-scale, 1)); --text-hero: 80px;
    /* letter spacing */
    --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.08em;
    /* line height */
    --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.55; --leading-relaxed: 1.7;
    /* border radius */
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 24px; --radius-pill: 100px;
    /* shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.14);
    --shadow-brand: 0 8px 24px rgba(46,125,140,0.25); --shadow-btn: 0 4px 14px rgba(46,125,140,0.30);
    /* motion (Folio canonical) */
    --ease-standard: cubic-bezier(0.4,0,0.2,1); --ease-out: cubic-bezier(0,0,0.2,1); --ease-in: cubic-bezier(0.4,0,1,1); --ease-spring: cubic-bezier(0.25,0.46,0.45,0.94);
    --duration-instant: 100ms; --duration-fast: 200ms; --duration-standard: 300ms; --duration-deliberate: 500ms; --duration-ceremonial: 900ms;
    --card: #ffffff;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --overlay: rgba(255,255,255,0.92);
    --backdrop: rgba(0,0,0,0.5);
    --safe-top: env(safe-area-inset-top);
    --safe-bot: env(safe-area-inset-bottom);
    /* FGL-R2 FIX-06: unified card radius token used across result-card,
       ambient-warn-msg, and other card surfaces. */
    --radius-card: 12px;
    /* v1.5.20: motion design tokens. Used for transitions across the test
       flow, screen fades, and the ear-wave visibility system below. */
    --ihx-dur-fast: 150ms;
    --ihx-dur: 240ms;
    --ihx-dur-slow: 420ms;
    --ihx-ease: cubic-bezier(.4, 0, .2, 1);
    --ihx-ease-out: cubic-bezier(0, 0, .2, 1);
}

/* Dark mode palette. Applied via `data-theme="dark"` on <html> (driven by
   I18N.applyTheme()) or automatically via prefers-color-scheme when the
   user's chosen theme is 'system'. Brand colors stay constant; surfaces +
   text invert. */
html[data-theme="dark"] {
    --brand-secondary: #6ea3d8;
    --bg: #0f1419;
    --bg-soft: #1a2330;
    --text: #e2e8f0;
    --text-soft: #a0aec0;
    --text-muted: #718096;
    --border: #2d3748;
    --card: #1a2330;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.4);
    --overlay: rgba(15,20,25,0.92);
    --backdrop: rgba(0,0,0,0.72);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --brand-secondary: #6ea3d8;
        --bg: #0f1419;
        --bg-soft: #1a2330;
        --text: #e2e8f0;
        --text-soft: #a0aec0;
        --text-muted: #718096;
        --border: #2d3748;
        --card: #1a2330;
        --card-shadow: 0 1px 3px rgba(0,0,0,0.4);
        --overlay: rgba(15,20,25,0.92);
        --backdrop: rgba(0,0,0,0.72);
    }
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* WS4 a11y area 4: global visible focus ring for keyboard / switch-access users.
   Uses the brand teal so it matches the design language and passes 3:1 contrast
   on both light and dark surfaces. outline-offset keeps the ring from
   merging with the element border. */
:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* Screen-reader-only: visually hidden but readable by VoiceOver, TalkBack, NVDA. */
/* Used for the audiogram-table alternative (Audit GAP-07). */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* MONEY-02 amplification preview card on results screen. */
.amplify-card { background: linear-gradient(135deg, #f0fdf4, #ecfeff); border: 2px solid var(--brand-primary); border-radius: 14px; padding: 18px; margin: 16px 0; }
.amplify-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.amplify-icon { font-size: 30px; }
.amplify-title { font-size: 17px; font-weight: 700; color: var(--text); }
.amplify-sub { font-size: 14px; color: var(--text-soft); margin-bottom: 12px; }
.amplify-disclosure { font-size: 11px; color: var(--text-muted); margin-top: 12px; line-height: 1.4; }

/* Music sample picker on simulator screen (Bug #2 follow-on). */
.music-picker { margin: 8px 0 16px; }
.music-picker.hidden { display: none; }

/* Mark review #13.4: WKWebView doesn't honor iOS Dynamic Type by default.
   We expose --user-font-scale (set inline in <head> on first paint, then via
   Settings text-size picker) and use it as a multiplier for the root font size.
   All component CSS that uses rem will scale. px values won't, but the body
   text/paragraph/heading scale that matters for senior readability does. */
html {
    --user-font-scale: 1;
    font-size: calc(16px * var(--user-font-scale));
    -webkit-text-size-adjust: 100%;
}
html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}
/* Scale primary paragraph + heading content with the user font scale. We use
   rem so the multiplier on html cascades. Existing px-based ad-hoc styles
   keep their fixed sizing (intentional for chrome/icons that shouldn't grow). */
.lead, .screen-inner p, .item-desc, .settings-row, .ft-desc { font-size: 1rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
.disclaimer { font-size: 0.8125rem; }

/* Mark review #3.4: visible feedback for the "I hear it" button. The button
   itself gets a press state and an overlay badge that flashes on tap.
   v1.5.20: duration standardized to --ihx-dur-fast / --ihx-ease-out tokens. */
.hear-btn { transition: transform var(--ihx-dur-fast) var(--ihx-ease-out), box-shadow var(--ihx-dur-fast) var(--ihx-ease-out); position: relative; }
.hear-btn:active { transform: scale(0.96); box-shadow: 0 2px 8px rgba(46,125,140,0.35) inset; }
.hear-btn-flash {
    position: absolute;
    top: -36px; left: 50%; transform: translateX(-50%) translateY(8px);
    padding: 6px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 700;
    background: #1A4F5A; color: #fff;
    opacity: 0; pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}
.hear-btn-flash.hear-btn-flash-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.hear-btn-flash.hear-btn-flash-ok { background: #2f855a; }
.hear-btn-flash.hear-btn-flash-wait { background: #b7791f; }

/* Mark review #9.3: family-cell is the whole tap target now. Active cell gets
   a strong outline + "Current profile" badge so the selection state is obvious;
   inactive cells show "Tap to switch" subtle hint. Edit pencil is small and
   docked to the corner so it doesn't fight the cell's tap target. */
.family-cell { position: relative; cursor: pointer; transition: transform 100ms ease-out, box-shadow 100ms ease-out; }
.family-cell:active { transform: scale(0.98); }
.family-cell.active { box-shadow: 0 0 0 3px var(--brand-primary, #2E7D8C) inset; }
/* v1.5.9 Mark review 7.1: edit affordance was a tiny ✏️ emoji that Mark
   missed entirely. Upgraded to a clearly-labelled "Edit" pill in slate teal
   so the discoverability is obvious from across the screen. */
/* WS4 a11y area 5: family-edit-btn was 26px / 12px — too small for 55+ users.
   Min-height 44px and 14px font. Still anchored to the card corner. */
.family-edit-btn {
    position: absolute; top: 6px; right: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 44px; padding: 0 12px;
    border: 1.5px solid rgba(46,125,140,0.4);
    background: rgba(46,125,140,0.10);
    color: var(--brand-primary);
    border-radius: 999px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
}
.family-edit-btn svg { stroke: currentColor; flex-shrink: 0; }
.family-current-badge { font-size: 12px; font-weight: 700; color: var(--brand-primary, #2E7D8C); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.family-tap-hint { font-size: 12px; color: var(--text-soft, #718096); margin-top: 4px; font-style: italic; }

/* Settings text-size picker (Mark review #13.4). Three buttons in a row.
   Focus-group fix #20: was hardcoded #fff/dark text — flipped to use theme
   tokens so it stays readable in dark mode and shows clear selection. */
.text-size-picker { display: flex; gap: 8px; margin-top: 8px; }
.text-size-opt {
    flex: 1; padding: 10px 8px; border: 2px solid var(--border); border-radius: 8px;
    background: var(--card); color: var(--text); font-weight: 700; cursor: pointer; font-family: inherit;
}
.text-size-opt[aria-pressed="true"], .text-size-opt[aria-checked="true"] { border-color: var(--brand-primary, #2E7D8C); background: rgba(46,125,140, 0.12); color: var(--brand-primary-dark); }
.text-size-opt[data-scale="1"]    { font-size: 14px; }
.text-size-opt[data-scale="1.25"] { font-size: 17px; }
.text-size-opt[data-scale="1.5"]  { font-size: 20px; }

#app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* WS4 area 6: single scroll axis — the outer .screen is the one scroller.
   Inner containers must NOT also be overflow:auto/scroll (produces a nested
   double-scrollbar). Extra bottom-padding ensures content clears the
   elevated center FAB (~68px pill + 4px bottom + safe area). */
.screen {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    display: none;
    padding-top: calc(20px + var(--safe-top));
    padding-bottom: calc(96px + var(--safe-bot));
}
/* v1.5.20: subtle opacity fade-in on screen activation using motion token.
   Pure opacity: no transforms that could shift layout. .ph8-entering overrides
   this with its own keyed animation (which also adds translateY). */
.screen.active { display: block; animation: screen-fade-in var(--ihx-dur-slow) var(--ihx-ease-out) both; }
.screen.ph8-entering { animation: ph8-enter 0.18s ease forwards; }
@keyframes screen-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ph8-enter {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* WS4 area 6: screen-inner must NOT have overflow:auto — the outer .screen
   is the single scroll axis. Explicit overflow:visible prevents any inherited
   overflow from creating a nested scrollbar. */
.screen-inner { max-width: 480px; margin: 0 auto; padding: 24px 20px; overflow: visible; }

/* Mark review #2.1 + #13.1: bigger logo + larger brand tag so the top of the
   home screen reads as a polished health-app, not a postage-stamp. */
/* v1.4.7 brand block: larger horizontal lockup + slogan. The previous
   green pill (.brand-tag) was a duplicate of the wordmark already inside
   the SVG, so it's been removed. .brand-tag rule kept as a no-op below
   in case any older surface still emits it. */
.brand { text-align: center; margin-bottom: 28px; }
.logo { width: 260px; height: auto; max-width: 80%; margin: 4px auto 8px; display: block; }
.brand-slogan { font-size: 14px; color: var(--text-soft); margin-top: 2px; line-height: 1.4; }
.brand-tag { display: none; }

h1 { font-size: 1.75rem; font-weight: 800; line-height: 1.2; margin-bottom: 12px; text-align: center; text-wrap: balance; }
h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 12px; text-wrap: balance; }
h3 { font-size: 1.125rem; font-weight: 700; margin: 16px 0 12px; text-wrap: balance; }
.lead { font-size: 16px; color: var(--text-soft); margin-bottom: 24px; text-align: center; text-wrap: balance; }

.checklist { background: var(--bg-soft); border-radius: 16px; padding: 16px; margin: 24px 0; }
.check-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; }
.check-item + .check-item { border-top: 1px solid var(--border); }
.check-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.check-title { font-weight: 600; margin-bottom: 2px; }
.check-sub { font-size: 14px; color: var(--text-muted); }

.confirm { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg-soft); border: 2px solid var(--border); border-radius: 12px; margin-bottom: 12px; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.confirm:has(input:checked) { border-color: var(--brand-primary); background: rgba(46,125,140, 0.08); }
.confirm input[type="checkbox"] { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--brand-primary); cursor: pointer; }

.badge { display: inline-block; background: var(--brand-secondary); color: white; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 12px; }

.eq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.eq-card { background: var(--bg-soft); border: 2px solid var(--border); border-radius: 12px; padding: 20px 12px; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; text-align: center; font-family: inherit; }
.eq-card.selected { border-color: var(--brand-primary); background: rgba(46,125,140, 0.08); }
/* Focus group fix #15: speaker-mode card spans full row, visually demoted as the fallback. */
.eq-card-speaker { grid-column: 1 / -1; border-style: dashed; opacity: 0.85; }
.eq-card-speaker.selected { opacity: 1; border-style: solid; border-color: #dd6b20; background: rgba(221, 107, 32, 0.08); }
/* Focus group fix #23: aided/unaided toggle shown for hearing-aid owners. */
.aided-toggle { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 14px 0 18px; }
.aided-toggle-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.aided-toggle-sub { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin-bottom: 12px; }
.aided-options { display: grid; gap: 8px; }
.aided-opt { background: var(--card); border: 2px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; text-align: left; }
.aided-opt.selected { border-color: var(--brand-primary); background: rgba(46,125,140, 0.08); }
.eq-icon { display: flex; align-items: center; justify-content: center; height: 88px; margin-bottom: 8px; }
.eq-name { font-weight: 700; margin-bottom: 4px; }
.eq-sub { font-size: 13px; color: var(--text-muted); }

.vol-circle { width: 200px; height: 200px; border-radius: 50%; background: var(--bg-soft); border: 4px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 32px auto; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.vol-circle.playing { background: rgba(46,125,140, 0.15); border-color: var(--brand-primary); animation: pulse 1.5s infinite; }
.vol-icon { font-size: 64px; margin-bottom: 8px; }
.vol-label { font-weight: 600; color: var(--text-soft); }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.tip { background: rgba(46,125,140, 0.08); border-left: 4px solid var(--brand-primary); padding: 12px 16px; border-radius: 8px; margin: 16px 0; font-size: 14px; }

/* FGL-R2 FIX-13: profile name indicator shown above progress bar when
   testing a non-default profile (i.e., a family member's profile). */
.testing-as-label { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 8px; }

.test-header { margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; }
.test-header .progress-track { width: 100%; }
.test-header .ear-indicator { margin-top: 12px; }
.progress-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
/* v1.5.20: width transition standardized to --ihx-dur-slow token. */
.progress-fill { height: 100%; background: var(--brand-primary); width: 0%; transition: width var(--ihx-dur-slow) var(--ihx-ease); }
.progress-label { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.ear-indicator { font-size: 32px; font-weight: 800; color: var(--brand-secondary); margin-top: 8px; }

.test-area { display: flex; flex-direction: column; align-items: center; padding: 32px 0; }
.test-instructions { font-size: 18px; font-weight: 600; margin-bottom: 32px; text-align: center; }
/* v1.5.20: transition tokens applied; opacity added for ear-wave crossfade. */
.hear-btn { width: 240px; height: 240px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); border: none; color: white; cursor: pointer; box-shadow: 0 12px 32px rgba(46,125,140, 0.35); transition: transform var(--ihx-dur) var(--ihx-ease), box-shadow var(--ihx-dur) var(--ihx-ease); font-family: inherit; }
.hear-btn:active { transform: scale(0.95); box-shadow: 0 6px 16px rgba(46,125,140, 0.35); }
.hear-btn-inner { display: flex; flex-direction: column; align-items: center; }
.hear-btn-icon { font-size: 80px; margin-bottom: 8px; }
.hear-btn-label { font-size: 22px; font-weight: 700; }
.test-status { margin-top: 32px; color: var(--text-muted); font-size: 14px; min-height: 22px; }

.result-header { text-align: center; margin-bottom: 20px; }
.result-meta { font-size: 13px; color: var(--text-muted); }
.result-card { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); color: white; border-radius: var(--radius-card); padding: 24px; text-align: center; margin-bottom: 24px; }
.result-card.warn { background: linear-gradient(135deg, var(--warn), #c05621); }
.result-card.danger { background: linear-gradient(135deg, var(--danger), #9b2c2c); }
.result-classification { display: inline-block; background: rgba(255,255,255,0.25); padding: 4px 14px; border-radius: 100px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 12px; }
.result-headline { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.result-detail { font-size: 15px; opacity: 0.95; }

.audiogram-wrap { background: var(--bg-soft); border-radius: 12px; padding: 16px; margin-bottom: 24px; }
#audiogram { width: 100%; height: auto; background: var(--card); border-radius: 8px; }
.audiogram-legend { display: flex; justify-content: center; gap: 24px; margin-top: 12px; font-size: 14px; }
.legend-item { display: flex; align-items: center; gap: 6px; }
/* v1.5.11 Mark review free-form #4: audiology-convention legend marks. */
.legend-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-weight: 700; font-size: 14px; line-height: 1;
}
.legend-mark-left { color: #1A4F5A; }
.legend-mark-right { color: #c05621; }
/* Legacy dot rules kept for any older surface (PDF preview, share card)
   that may still reference them. */
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-left { background: #1A4F5A; }
.dot-right { background: #c05621; }

.recommend { background: var(--bg-soft); border-radius: 16px; padding: 20px; margin-bottom: 24px; }
.rec-product { background: var(--card); border-radius: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--border); }
.rec-product-title { font-weight: 700; margin-bottom: 6px; font-size: 17px; }
.rec-product-price { color: var(--brand-primary); font-weight: 700; margin-bottom: 8px; }
.rec-product-desc { font-size: 14px; color: var(--text-soft); margin-bottom: 12px; }
.result-actions { display: flex; flex-direction: column; gap: 8px; }

/* WS4: button labels must never wrap — a two-line label reads as a layout
   failure on a health app. white-space: nowrap + overflow: hidden guard
   against label overflow on small viewports without breaking i18n. */
.btn { display: block; width: 100%; padding: 16px; border-radius: 12px; border: none; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; margin-bottom: 12px; transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s, opacity 0.15s; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* WS4 area 3: clearly-disabled CTAs — opacity drop makes the state
   unmistakable even at arm's length on a bright-screen device. Applied to
   ALL .btn variants; the more specific .btn-primary:disabled rule below
   also overrides the teal background with a grey palette for extra clarity. */
button:disabled, .btn:disabled, .btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.btn-primary { background: var(--brand-primary); color: white; box-shadow: 0 4px 12px rgba(46,125,140, 0.25); }
.btn-primary:active { transform: translateY(1px); }
/* Focus-group fix #20: disabled primary previously read as the same flat grey
   as the page chrome (text-muted on border-grey = ~1.7:1) which made Continue
   look broken, not gated. Use a clearly different but still AA-compliant
   palette + a forbid cursor + paired helper text below the button (rendered by
   the screen with a .btn-helper element) so users can see WHY it's disabled.
   #6b6b6b on #e2e8f0 = 4.6:1 (passes WCAG AA for body text). */
.btn-primary:disabled { background: #e2e8f0; color: #6b6b6b; box-shadow: none; cursor: not-allowed; opacity: 1; }
html[data-theme="dark"] .btn-primary:disabled,
html[data-theme="system"] .btn-primary:disabled { background: #2d3748; color: #cbd5e0; }
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .btn-primary:disabled { background: #2d3748; color: #cbd5e0; }
}
.btn-secondary { background: var(--brand-secondary); color: white; }
/* Focus-group fix #20 (linda, carlos, doris, gloria, margaret, ahmed, diane):
   ghost buttons used --text-soft on transparent with --border (#e2e8f0). The
   text passed contrast but the border was 1.3:1 — visually the button read as
   page chrome / decoration, especially in dark mode. Bump both the text and
   border to WCAG-AA-passing pairs on both themes:
     light:  #1a1a1a text + #6b6b6b border on #ffffff  → 16.9:1 text / 4.6:1 border
     dark:   #e2e8f0 text + #a0aec0 border on #0f1419  → 12.4:1 text / 7.4:1 border
   Add 2px border weight and bold weight so it reads as an actionable control. */
.btn-ghost { background: transparent; color: #1a1a1a; border: 2px solid #6b6b6b; font-weight: 700; }
.btn-ghost:active { background: rgba(0,0,0,0.04); }
html[data-theme="dark"] .btn-ghost { color: #e2e8f0; border-color: #a0aec0; }
html[data-theme="dark"] .btn-ghost:active { background: rgba(255,255,255,0.06); }
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .btn-ghost { color: #e2e8f0; border-color: #a0aec0; }
    html[data-theme="system"] .btn-ghost:active { background: rgba(255,255,255,0.06); }
}
/* Helper text shown directly below a disabled primary CTA — gives the user
   the WHY (e.g. "Check all three boxes to continue") instead of the silent
   grey wall focus-group personas described as "looks broken". */
.btn-helper { display: block; text-align: center; font-size: 13px; color: var(--text-soft); margin: -4px 0 14px; font-weight: 500; line-height: 1.4; }
.btn-helper.hidden { display: none !important; }
.btn-danger { background: var(--danger); color: white; }
.btn-hero { padding: 20px; font-size: 18px; }
/* Bundle 08 (#32): paired secondary hero CTA under the primary "Begin Test"
   button. Visually subordinate (lighter weight, no shadow) so the eye lands
   on Begin Test first but Try the Simulator stays a single tap away. */
.btn-hero-secondary { padding: 16px; font-size: 16px; background: transparent; color: var(--brand-primary-dark); border: 1.5px solid var(--brand-primary); box-shadow: none; }
.btn-hero-secondary:active { background: rgba(46,125,140, 0.08); }
/* Bundle 08 (#32): low-weight "more tools below" affordance so users know
   the welcome screen continues below the fold after the secondary CTA. */
.more-tools-hint { text-align: center; font-size: 12px; color: var(--text-muted); letter-spacing: 0.5px; margin: 4px 0 20px; opacity: 0.7; }
/* WS4 a11y area 5: btn-mini was ~26px / 11px — too small for 55+ users.
   Now 44px min-height and 14px font. */
.btn-mini { background: var(--card); border: 1px solid var(--border); padding: 4px 12px; border-radius: 100px; font-size: 14px; cursor: pointer; font-family: inherit; color: var(--text-soft); min-height: 44px; display: inline-flex; align-items: center; }

.disclaimer { font-size: 13px; color: var(--text-muted); text-align: center; margin-top: 24px; padding: 16px; background: var(--bg-soft); border-radius: 8px; line-height: 1.5; }

/* v1.4.7 tab bar: tools-centered 5-item layout with a prominent elevated
   center button ("Hearing Test"). Side tabs are equal-flex; the center
   button is wider and lifted ~22px above the bar baseline with a pulsing
   teal glow to drive engagement with the primary CTA. */
.tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--card); border-top: 1px solid var(--border);
    display: flex; align-items: flex-end;
    padding: 6px 0 calc(6px + var(--safe-bot));
    /* allow the elevated center pill to render outside the bar's top edge */
    overflow: visible;
}
.tab {
    flex: 1; background: none; border: none; padding: 6px 2px; cursor: pointer;
    font-family: inherit; color: var(--text-muted); transition: color 0.15s;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
/* v1.5.1 Mark review (Overall #4): the previous .tab.active rule was a
   subtle color tint that Mark couldn't see on his iPhone 16 Pro at arm's
   length. Adds a teal pill background + brand-color text + a small
   top-edge indicator so the active tab is unmistakable. */
.tab.active {
    color: var(--brand-primary);
    position: relative;
}
.tab.active .tab-icon,
.tab.active .tab-label {
    color: #2E7D8C;
    font-weight: 800;
}
.tab.active::before {
    content: '';
    position: absolute;
    top: 0; left: 30%; right: 30%;
    height: 3px;
    background: #2E7D8C;
    border-radius: 0 0 3px 3px;
}
.tab-icon { font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.tab-icon svg { width: 26px; height: 26px; }
.tab-label { font-size: 0.6875rem; font-weight: 600; margin-top: 2px; }

/* Center "Hearing Test" tab: elevated pill, brand-teal, pulsing glow. */
.tab.tab-center {
    flex: 1.35;  /* widen vs. siblings to give the pill room */
    padding: 0;
    overflow: visible;
    /* keep the bottom of the pill anchored to the bar baseline but
       allow the top to lift above the bar's top edge. */
    height: 0;
    align-self: flex-end;
    position: relative;
}
.tab-center-pill {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2E7D8C 0%, #3FA0B3 100%);
    color: #fff;
    border-radius: 100px;
    padding: 12px 18px 10px;
    box-shadow: 0 4px 14px rgba(46, 125, 140, 0.45);
    display: flex; flex-direction: column; align-items: center;
    min-width: 96px;
    /* v1.4.9 Mark review 10.5: iOS 26 Safari does NOT animate box-shadow
       on @keyframes — Mark reported the pulse was invisible on iPhone 16 Pro.
       Switched to a pseudo-element ring that scales + fades. transform +
       opacity are compositor properties, always animatable on iOS. */
    isolation: isolate;
}
.tab-center-pill::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 100px;
    background: radial-gradient(closest-side, rgba(63, 160, 179, 0.55) 0%, rgba(63, 160, 179, 0) 75%);
    z-index: -1;
    transform: scale(0.92);
    opacity: 0.6;
    animation: hearing-test-pulse 2.4s ease-in-out infinite;
    pointer-events: none;
    will-change: transform, opacity;
}
.tab-center-icon { font-size: 22px; line-height: 1; filter: grayscale(0); display: inline-flex; align-items: center; justify-content: center; }
.tab-center-icon svg { width: 28px; height: 28px; }
.tab-center-label {
    font-size: 12px; font-weight: 800; letter-spacing: 0.2px;
    margin-top: 2px; color: #fff;
}
@keyframes hearing-test-pulse {
    0%, 100% { transform: scale(0.92); opacity: 0.55; }
    50%      { transform: scale(1.18); opacity: 0.95; }
}
/* Active state for center tab — keep the pill colored but darken slightly
   so users can see they're inside the test flow. */
.tab.tab-center.active .tab-center-pill {
    background: linear-gradient(135deg, #245F6B 0%, #2E7D8C 100%);
}
/* Honor reduced-motion preference: stop the pulse for users who opted out. */
@media (prefers-reduced-motion: reduce) {
    .tab-center-pill::before { animation: none; }
}

.learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.learn-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 16px 12px; text-align: center; cursor: pointer; font-family: inherit; transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s; }
.learn-card:active { transform: scale(0.98); }
.learn-icon { font-size: 32px; margin-bottom: 8px; }
.learn-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.learn-sub { font-size: 12px; color: var(--text-muted); }

/* FIX #24: Shop coverage gate. Asks about VA / Medicare / TRICARE / commercial
   before showing the commercial carousel. Selection persisted to prefs. */
.coverage-gate { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
.coverage-gate-q { font-size: 15px; margin-bottom: 10px; color: var(--text-soft); }
.coverage-gate-opts { display: flex; flex-direction: column; gap: 8px; }
.coverage-opt { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; text-align: left; font-size: 15px; cursor: pointer; color: var(--text-soft); }
.coverage-opt:hover { border-color: var(--brand-primary); }
.btn-coverage-reset { margin-top: 8px; }

.coverage-panel { margin-bottom: 16px; }
.coverage-card { background: var(--bg-soft); border: 1px solid var(--border); border-left: 4px solid var(--brand-primary); border-radius: 12px; padding: 16px; }
.coverage-card.coverage-va { border-left-color: #1A4F5A; }
.coverage-card-head { font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.coverage-card ul { margin: 8px 0 12px 18px; padding: 0; }
.coverage-card li { margin-bottom: 6px; line-height: 1.5; }
.coverage-card-note { font-size: 13px; color: var(--text-muted); margin-top: 12px; font-style: italic; }

.shop-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 16px; cursor: pointer; }
.shop-card.coming-soon { opacity: 0.85; border-style: dashed; }
.shop-card-header { margin-bottom: 12px; position: relative; }
.shop-tag { display: inline-block; background: var(--brand-primary); color: white; padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.tag-soon { background: var(--text-muted) !important; }
.tag-preorder { background: #d69e2e !important; }
.shop-badge { display: inline-block; background: transparent; border: 1px solid var(--border); color: var(--text-soft); padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; margin-left: 6px; vertical-align: middle; }
.shop-badge-founding { color: #b7791f; border-color: #d69e2e; }
.shop-card-price { background: var(--card); border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-size: 13px; color: var(--text-soft); }
.shop-card-disclaimer { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.shop-card-disclaimer strong { color: var(--text-soft); }
.shop-compare, .shop-tiers { background: var(--card); border-radius: 8px; padding: 12px; margin: 12px 0; font-size: 13px; line-height: 1.8; color: var(--text-soft); }

.history-item { background: var(--bg-soft); border-radius: 12px; padding: 16px; margin-bottom: 12px; border-left: 4px solid var(--brand-primary); }
/* v1.5.2 Mark review free-form #2: tappable history rows open the full
   post-test Results screen. Visual affordance: subtle right-pointing
   chevron hint + pressed-state on tap. */
.history-item-tappable { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; -webkit-tap-highlight-color: rgba(46,125,140,0.12); }
.history-item-tappable:hover { background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.history-item-tappable:active { transform: scale(0.985); }
.history-tap-hint { margin-top: 8px; font-size: 12px; font-weight: 600; color: #2E7D8C; letter-spacing: 0.3px; }
.history-date { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.history-result { font-weight: 700; font-size: 17px; }
.history-empty { text-align: center; color: var(--text-muted); padding: 40px 20px; }

.hidden { display: none !important; }

/* Focus group fix #6: number-card is now a <button>. Reset native button
   styling so it still looks like the gradient card it always was, but
   the entire card is now an accessible tap target opening the
   "About your Hearing Number" sheet. */
.number-card { display: block; width: 100%; background: linear-gradient(135deg, #1A4F5A, #1a365d); color: white; border: 0; border-radius: 16px; padding: 20px; margin-bottom: 16px; text-align: center; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: rgba(255,255,255,0.08); }
.number-card:active { transform: scale(0.99); }
.number-card:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.number-card-label { font-size: 13px; opacity: 0.85; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px; }
.number-card-value { font-size: 64px; font-weight: 800; line-height: 1; margin: 4px 0; color: white; }
.number-card-sub { font-size: 14px; opacity: 0.9; }
/* Focus group fix #4: inline banded definition, same card, no scroll. */
.number-card-def { font-size: 13px; line-height: 1.45; opacity: 0.95; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.18); text-align: left; }
.number-card-more { font-size: 12px; opacity: 0.85; margin-top: 8px; letter-spacing: 0.3px; text-transform: uppercase; }

.hearing-number-hero { position: relative; background: linear-gradient(135deg, rgba(46,125,140,0.86), rgba(30,86,96,0.92)), url('../assets/illustrations/results-hero-bg.png'); background-size: cover; background-position: center; color: white; border-radius: 24px; padding: 28px 20px; text-align: center; margin-bottom: 16px; box-shadow: 0 8px 24px rgba(46,125,140,0.25); }
.hearing-number-hero.mild { background: linear-gradient(135deg, var(--tier-mild-start), var(--tier-mild-end)); }
.hearing-number-hero.moderate { background: linear-gradient(135deg, var(--tier-moderate-start), var(--tier-moderate-end)); }
.hearing-number-hero.significant { background: linear-gradient(135deg, var(--tier-significant-start), var(--tier-significant-end)); }
.hn-label { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.9; margin-bottom: 8px; }
.hn-value { font-size: 88px; font-weight: 800; line-height: 1; }
.hn-class { font-size: 15px; opacity: 0.95; margin-top: 6px; }
/* Focus group fix #4: inline banded definition under the Hearing Number on
   the Results screen, same card, no scroll required. */
.hn-def { font-size: 13px; line-height: 1.45; opacity: 0.95; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.22); text-align: left; }

.stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.stat { background: var(--bg-soft); border-radius: 12px; padding: 12px 8px; text-align: center; border: 1px solid var(--border); }
.stat-value { font-size: 22px; font-weight: 800; color: var(--brand-primary); }
.stat-label { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

/* Focus group fix #10: calm replacement for the Streak/Points/Badges row
   when gamification is hidden. Single line, no color treatment, no icons. */
.last-tested-row { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; color: var(--text-soft); display: flex; gap: 8px; }
.last-tested-row .lt-label { font-weight: 600; color: var(--text); }
.last-tested-row .lt-value { color: var(--text-soft); }

.profile-bar { display: flex; align-items: center; justify-content: space-between; background: var(--bg-soft); border-radius: 12px; padding: 12px; margin-bottom: 16px; border: 1px solid var(--border); }
.profile-current { display: flex; align-items: center; gap: 10px; }
.profile-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--card); border: 2px solid var(--brand-primary); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.profile-name { font-weight: 700; }
.profile-sub { font-size: 12px; color: var(--text-muted); }
.profile-switch { background: var(--brand-primary); color: white; border: none; padding: 6px 14px; border-radius: 100px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; }

.tip-card { background: rgba(44, 82, 130, 0.06); border-left: 4px solid var(--brand-secondary); border-radius: 8px; padding: 14px 16px; margin: 16px 0; }
.tip-card-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-secondary); font-weight: 700; margin-bottom: 4px; }
.tip-card-text { font-size: 14px; line-height: 1.5; color: var(--text); }

.points-earned { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(46,125,140, 0.12), rgba(46,125,140, 0.04)); border: 1px solid var(--brand-primary); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.pe-icon { font-size: 36px; }
.pe-headline { font-weight: 800; font-size: 17px; color: var(--brand-primary-dark); }
.pe-sub { font-size: 13px; color: var(--text-soft); }

.new-badges-block { margin-bottom: 20px; }
.new-badges-headline { font-weight: 700; margin-bottom: 8px; }
.new-badges-row { display: flex; flex-wrap: wrap; gap: 10px; }
.new-badge {
  background: var(--card); border: 2px solid var(--brand-primary);
  border-radius: 12px; padding: 10px; text-align: center;
  flex: 1; min-width: 100px;
  /* v1.5.9 Mark review 13.1: badge spins into place with a slight overshoot
     scale + a cyan glow-ring bursting outward. Mark saw the badges appear
     but no animation — they just popped in static. */
  position: relative;
  animation: nb-pop-in 0.85s cubic-bezier(.18, .89, .34, 1.18) both;
}
.new-badge::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 12px;
  border: 2px solid #5BC0CC;
  opacity: 0;
  pointer-events: none;
  animation: nb-glow-burst 0.9s cubic-bezier(.2, .6, .3, 1) 0.1s both;
}
.nb-icon {
  font-size: 32px;
  display: inline-block;
  animation: nb-icon-spin 0.85s cubic-bezier(.18, .89, .34, 1.18) both;
}
.nb-name { font-size: 12px; font-weight: 700; margin-top: 4px; }
@keyframes nb-pop-in {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}
@keyframes nb-icon-spin {
  0%   { transform: scale(0.3) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(15deg); opacity: 1; }
  100% { transform: scale(1.0) rotate(0deg); opacity: 1; }
}
@keyframes nb-glow-burst {
  0%   { opacity: 0; transform: scale(0.95); box-shadow: 0 0 0 0 rgba(91,192,204,0.6); }
  40%  { opacity: 1; transform: scale(1.0);  box-shadow: 0 0 0 6px rgba(91,192,204,0.4); }
  100% { opacity: 0; transform: scale(1.25); box-shadow: 0 0 0 18px rgba(91,192,204,0); }
}
@media (prefers-reduced-motion: reduce) {
  .new-badge, .new-badge::after, .nb-icon { animation: none; }
}

.reminder-card { background: var(--bg-soft); border-radius: 16px; padding: 18px; margin-bottom: 20px; display: flex; gap: 14px; }
.reminder-icon { font-size: 32px; flex-shrink: 0; }
.reminder-content { flex: 1; }
.reminder-headline { font-weight: 700; margin-bottom: 4px; }
.reminder-sub { font-size: 13px; color: var(--text-soft); margin-bottom: 12px; }
.reminder-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
/* WS4 a11y area 5: 55+ tap targets — reminder-opt was ~26px / 12px font.
   Bumped to min-height 44px and 14px font for comfortable one-tap. */
.reminder-opt { background: var(--card); border: 1.5px solid var(--border); padding: 8px 4px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-soft); min-height: 44px; display: flex; align-items: center; justify-content: center; }
.reminder-opt.selected { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }

.brand-row { margin-bottom: 8px; }
.content-tag { display: inline-block; background: linear-gradient(135deg, #2E7D8C, #1E5660); color: white; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }

.article-feature { background: linear-gradient(135deg, #1E5660, #1A4F5A); color: white; border-radius: 16px; padding: 20px; margin-bottom: 24px; cursor: pointer; }
.article-feature-tag { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; margin-bottom: 8px; }
.article-feature-title { font-size: 20px; font-weight: 800; line-height: 1.3; margin-bottom: 8px; }
.article-feature-desc { font-size: 14px; opacity: 0.9; line-height: 1.5; margin-bottom: 12px; }
.article-feature-cta { font-size: 14px; font-weight: 700; }

.content-section { margin-bottom: 28px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-head h3 { margin: 0; }
.section-link { font-size: 13px; color: var(--brand-primary); font-weight: 600; cursor: pointer; }

.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guide-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px 12px; text-align: left; cursor: pointer; font-family: inherit; transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s; }
.guide-card:active { transform: scale(0.98); }
.guide-icon { font-size: 28px; margin-bottom: 6px; }
.guide-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; line-height: 1.3; }
.guide-sub { font-size: 0.6875rem; color: var(--text-muted); line-height: 1.4; }

.topic-list { display: flex; flex-direction: column; gap: 8px; }
.topic-row { display: flex; gap: 12px; align-items: center; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; font-family: inherit; text-align: left; }
.topic-icon { font-size: 24px; flex-shrink: 0; }
.topic-content { flex: 1; }
.topic-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.topic-sub { font-size: 12px; color: var(--text-muted); }

.cta-card { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); color: white; border-radius: 14px; padding: 18px; text-align: center; }
.cta-headline { font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.cta-sub { font-size: 13px; opacity: 0.95; margin-bottom: 12px; }
.cta-card .btn { background: var(--card); color: var(--brand-primary-dark); }

/* FGL-R2 FIX-04: privacy assurance note on family screen and anywhere it's used. */
.privacy-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 6px; line-height: 1.4; }

.family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.family-cell { background: var(--bg-soft); border: 2px solid var(--border); border-radius: 14px; padding: 14px; text-align: center; }
.family-cell.active { border-color: var(--brand-primary); background: rgba(46,125,140, 0.05); }
.family-avatar { font-size: 36px; margin-bottom: 4px; }
.family-name { font-weight: 700; font-size: 14px; }
.family-age { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.family-meta { font-size: 12px; color: var(--text-soft); margin: 6px 0; }
.family-number strong { color: var(--brand-primary-dark); }
.family-actions { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }

/* Focus group fix #3/#17: replaced the gold-gradient "Family Hearing
   Olympics" card (which read as a Fitbit prize) with a calm, neutral
   "Household scores" card that matches the rest of the surface. */
.household-scores-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin: 16px 0; }
.household-scores-content { display: flex; flex-direction: column; }
.household-scores-headline { font-weight: 700; font-size: 16px; margin-bottom: 4px; color: var(--text); }
.household-scores-sub { font-size: 13px; color: var(--text-soft); margin-bottom: 12px; line-height: 1.5; }

.invite-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-top: 16px; }
.invite-headline { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.invite-sub { font-size: 13px; color: var(--text-soft); margin-bottom: 12px; line-height: 1.5; }

.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 6px; margin-top: 14px; }
.form-input { width: 100%; padding: 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 16px; font-family: inherit; background: var(--card); }
/* WS4 a11y area 4: keep the branded border-color change; replace outline:none
   with outline removal ONLY for mouse users via :focus:not(:focus-visible).
   Keyboard / switch-access users get the global :focus-visible ring below. */
.form-input:focus { border-color: var(--brand-primary); }
.form-input:focus:not(:focus-visible) { outline: none; }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 16px; }
.emoji-cell { background: var(--bg-soft); border: 2px solid var(--border); border-radius: 10px; padding: 8px; font-size: 22px; cursor: pointer; font-family: inherit; }
.emoji-cell.selected { background: rgba(46,125,140, 0.1); border-color: var(--brand-primary); }

.points-balance { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: white; border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.pb-icon { font-size: 32px; }
.pb-text { flex: 1; }
.pb-value { font-weight: 800; font-size: 18px; }
.pb-sub { font-size: 12px; opacity: 0.95; }
.points-balance .btn { width: auto; padding: 8px 16px; font-size: 13px; margin: 0; background: var(--card); color: #d97706; }

.badges-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.badge-cell { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px 8px; text-align: center; }
.badge-cell.locked { opacity: 0.4; }
.badge-cell.locked img.badge-icon { filter: grayscale(1) brightness(1.2); }
.badge-cell.earned { background: rgba(46,125,140, 0.08); border-color: var(--brand-primary); }
img.badge-icon { width: 48px; height: 48px; display: block; margin: 0 auto 4px; }
.badge-icon { font-size: 28px; }
.badge-name { font-size: 11px; font-weight: 700; margin: 4px 0 2px; line-height: 1.2; }
.badge-desc { font-size: 0.625rem; color: var(--text-muted); line-height: 1.3; }

.trend-chart-wrap { background: var(--bg-soft); border-radius: 12px; padding: 12px; margin-bottom: 20px; }
#trend-chart { width: 100%; height: 240px; background: var(--card); border-radius: 8px; }

.toast { position: fixed; top: calc(20px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) translateY(-20px); background: #1a202c; color: white; padding: 12px 18px; border-radius: 100px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.3s, transform 0.3s; z-index: 1000; max-width: 90%; display: flex; align-items: center; gap: 8px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-icon { font-size: 18px; }
.toast-points { background: linear-gradient(135deg, #fbbf24, #d97706); }
.toast-badge { background: linear-gradient(135deg, #2E7D8C, #1E5660); }

/* Focus-group fix #20: was --brand-primary-dark (#1E5660) on white = 3.0:1, fails
   WCAG AA for normal text (4.5:1). Use a darker green pair that passes AA on
   both themes, bump weight to 700 so it reads as a control, and ensure it has
   a clear active state. */
.screen-back { color: #4a6b00; font-weight: 700; cursor: pointer; margin-bottom: 12px; display: inline-block; padding: 6px 0; font-size: 15px; }
html[data-theme="dark"] .screen-back { color: #a8d65c; }
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .screen-back { color: #a8d65c; }
}
.section-title { font-size: 18px; font-weight: 700; margin: 24px 0 12px; color: var(--text); }
.lead-small { font-size: 14px; color: var(--text-soft); margin-bottom: 12px; }
.warn-card { background: rgba(221, 107, 32, 0.1); border-left: 4px solid #dd6b20; border-radius: 8px; padding: 12px 14px; margin: 14px 0; font-size: 13px; line-height: 1.5; }
.empty { text-align: center; padding: 24px; color: var(--text-muted); font-size: 14px; }

.featured-tool { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #2E7D8C, #1A4F5A); color: white; border-radius: 16px; padding: 18px; margin: 20px 0; cursor: pointer; box-shadow: 0 4px 16px rgba(76, 29, 149, 0.25); }
.ft-icon { font-size: 36px; flex-shrink: 0; }
.ft-content { flex: 1; }
.ft-tag { display: inline-block; background: rgba(255,255,255,0.25); padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: 1px; margin-bottom: 4px; }
.ft-title { font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.ft-desc { font-size: 13px; opacity: 0.92; line-height: 1.4; }
.ft-arrow { font-size: 24px; opacity: 0.7; }

.toolkit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.tool-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; font-family: inherit; }
.tool-card:active { transform: scale(0.96); }
img.tool-icon { width: 48px; height: 48px; object-fit: contain; display: block; margin: 0 auto 4px; }
.tool-icon { font-size: 28px; }
.tool-name { font-weight: 700; font-size: 13px; margin-top: 4px; }
.tool-sub { font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; }

.simulator-prompt { display: flex; gap: 14px; align-items: center; background: rgba(76, 29, 149, 0.08); border: 1.5px solid rgba(76, 29, 149, 0.3); border-radius: 14px; padding: 16px; margin: 16px 0; cursor: pointer; }
.sp-icon { font-size: 32px; }
.sp-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; color: #1E5660; }
.sp-sub { font-size: 13px; color: var(--text-soft); line-height: 1.4; }

/* WS4: Simulator profile preset cards — equal height via align-items:stretch
   on the grid so short/long names don't make a ragged bottom row. */
.sim-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; align-items: stretch; }
.sim-preset { background: var(--card); border: 1.5px solid var(--border); padding: 10px 6px; border-radius: 10px; cursor: pointer; font-family: inherit; text-align: center; display: flex; flex-direction: column; align-items: center; min-height: 88px; }
.sp-thumb { width: 48px; height: 48px; object-fit: contain; display: block; margin: 0 auto 4px; }
.sim-preset.selected { border-color: #2E7D8C; background: rgba(107, 70, 193, 0.08); }
.sp-name { font-weight: 700; font-size: 13px; }
/* WS4 area 2: clamp profile-card sub-text to 2 lines. */
.sp-pta { font-size: 10px; color: var(--text-muted); margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.preset-desc { background: var(--bg-soft); border-radius: 10px; padding: 12px 14px; margin: 12px 0 16px; font-size: 13px; line-height: 1.5; color: var(--text-soft); }

.custom-audiogram { background: var(--bg-soft); border-radius: 12px; padding: 14px; margin: 12px 0; }
.ca-help { font-size: 12px; color: var(--text-soft); margin-bottom: 10px; }
.ca-row { display: grid; grid-template-columns: 80px 1fr 60px; align-items: center; gap: 8px; margin-bottom: 8px; }
.ca-row label { font-size: 13px; font-weight: 600; }
.ca-row input { padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; }
.ca-row span { font-size: 12px; color: var(--text-muted); }

.sim-source-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--bg-soft); padding: 4px; border-radius: 10px; margin: 12px 0; }
/* WS4 a11y area 5: source-tab was ~28px / 12px font. Min-height 44px + 14px. */
.source-tab { background: transparent; border: none; padding: 8px 4px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--text-soft); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.source-tab.selected { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.speech-picker { margin: 8px 0; }

.sim-controls { background: var(--bg-soft); border-radius: 14px; padding: 16px; margin: 12px 0; }
.sim-toggle-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sim-toggle-label { font-weight: 600; }
.sim-toggle { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid var(--border); padding: 8px 12px; border-radius: 100px; cursor: pointer; font-family: inherit; }
.sim-toggle.active { background: #2E7D8C; color: white; border-color: #2E7D8C; }
.sim-toggle-on { background: var(--text-muted); color: white; padding: 2px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.sim-toggle.active .sim-toggle-on { background: var(--card); color: #2E7D8C; }
.sim-toggle-state { font-size: 13px; }

.sim-info { background: rgba(44, 82, 130, 0.06); border-left: 4px solid var(--brand-secondary); border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.5; margin: 16px 0; }

/* FIX #25: For-Someone-Else mode switch. Two side-by-side pill buttons at
   the top of the simulator screen; selected one gets the brand-purple fill. */
.sim-mode-switch { display: grid; grid-template-columns: 1fr 1.6fr; gap: 6px; background: var(--bg-soft); padding: 4px; border-radius: 100px; margin: 12px 0 8px; }
.sim-mode-btn { background: transparent; border: none; padding: 10px 12px; border-radius: 100px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer; text-align: center; }
.sim-mode-btn.selected { background: #2E7D8C; color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.sim-mode-help { background: rgba(107, 70, 193, 0.08); border-left: 4px solid #2E7D8C; border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-soft); }

/* FIX #26: Play-all progression status indicator. Lives inside .sim-controls,
   appears below the Play All button while running. */
.sim-progression-status { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; background: rgba(107, 70, 193, 0.08); border-radius: 10px; font-size: 13px; }
.sps-label { font-weight: 600; color: var(--text-soft); }
.sps-name { font-weight: 700; color: #1E5660; flex: 1; }
.sps-dots { font-size: 11px; letter-spacing: 2px; color: #2E7D8C; }

/* FGL-R2 FIX-11: OTCHealthMart upsell card below the share row. Hidden
   in "for someone else" mode via the .sim-mode-for-other screen class. */
.sim-upsell { margin: 16px 0 8px; padding: 14px 16px; background: rgba(46,125,140,0.07); border: 1px solid rgba(46,125,140,0.2); border-radius: var(--radius-card); }
.sim-upsell-text { font-size: 14px; color: var(--text-soft); margin-bottom: 10px; line-height: 1.4; }
.sim-mode-for-other .sim-upsell { display: none; }

/* FIX #25 + #27: Share-row holds the two share buttons. Stacks vertically on
   narrow screens for touch ergonomics. */
.sim-share-row { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; }

/* FIX #27: Share-as-link preview sheet. Inline (not a modal) for simplicity;
   collapses when closed. */
.sim-share-sheet { background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; padding: 16px; margin: 12px 0; }
.sss-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sss-header h3 { margin: 0; font-size: 16px; }
.sss-close { background: transparent; border: none; font-size: 24px; line-height: 1; padding: 4px 10px; cursor: pointer; color: var(--text-soft); border-radius: 8px; }
.sss-lead { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin: 0 0 12px; }
.sss-preview-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.sss-url { background: var(--bg-soft); border: 1px dashed var(--border); border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; font-size: 11px; word-break: break-all; line-height: 1.4; margin-bottom: 12px; color: var(--text); }
.sss-warn { margin: 0 0 12px; }
.sss-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Ambient noise pre-check screen */
.ambient-check-inner { text-align: center; padding-top: 32px; }
.ambient-icon-wrap { margin: 0 auto 20px; display: flex; justify-content: center; }
.ambient-meter-row { margin: 24px 0 8px; }
.ambient-db-val { font-size: 56px; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -1px; }
.ambient-db-label { font-size: 15px; color: var(--text-soft); margin-top: 6px; min-height: 20px; }
.ambient-sub { font-size: 1rem; color: var(--text-soft); margin: 8px 0 0; min-height: 1.4em; }
.ambient-pass, .ambient-warn { margin-top: 28px; }
.ambient-warn-msg { font-size: 0.95rem; line-height: 1.4; color: #b45309; background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--radius-card); padding: 12px 16px; margin-bottom: 16px; }
html[data-theme="dark"] .ambient-warn-msg { color: #fcd34d; background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.3); }
.ambient-pass .btn-primary, .ambient-warn .btn-primary { width: 100%; margin-bottom: 10px; }
.ambient-warn .btn-ghost { width: 100%; }
.ambient-approx { font-size: 11px; color: var(--text-muted); margin-top: 24px; }

.db-display { display: flex; justify-content: center; margin: 20px 0; }
.db-ring { width: 240px; height: 240px; border-radius: 50%; background: conic-gradient(#e2e8f0 0%, #e2e8f0 100%); display: flex; align-items: center; justify-content: center; position: relative; }
.db-inner { width: 200px; height: 200px; background: var(--card); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.db-value { font-size: 64px; font-weight: 800; color: var(--text); line-height: 1; }
.db-unit { font-size: 13px; color: var(--text-muted); letter-spacing: 1px; margin-top: 4px; }
.db-classification { text-align: center; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.db-stats { text-align: center; font-size: 14px; color: var(--text-soft); margin-bottom: 16px; }
.db-scale { background: var(--bg-soft); border-radius: 12px; padding: 14px; margin: 16px 0; }
.scale-row { padding: 6px 0; font-size: 13px; color: var(--text-soft); border-bottom: 1px solid var(--border); }
.scale-row:last-child { border-bottom: none; }

/* WS4: Tinnitus sound-library cards — equal height via stretch + min-height.
   Description clamped to 2 lines so the grid stays tidy regardless of copy length. */
.tinnitus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 20px; align-items: stretch; }
.tinnitus-card { background: var(--bg-soft); border: 2px solid var(--border); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; min-height: 110px; }
.tinnitus-card.playing { border-color: var(--brand-primary); background: rgba(46,125,140, 0.08); }
img.tn-icon { width: 40px; height: 40px; display: block; margin: 0 auto 6px; }
.tn-icon { font-size: 32px; }
.tn-name { font-weight: 700; font-size: 14px; margin: 4px 0 2px; }
/* WS4 area 2: clamp description to 2 lines so equal-height tinnitus cards
   maintain a consistent baseline regardless of copy length. */
.tn-desc { font-size: 11px; color: var(--text-muted); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vol-slider { width: 100%; height: 8px; background: var(--bg-soft); border-radius: 100px; margin: 12px 0 20px; }
.timer-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.timer-opt { background: var(--card); border: 1.5px solid var(--border); padding: 8px 4px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.timer-opt.selected { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }
.timer-display { text-align: center; font-size: 20px; font-weight: 700; color: var(--brand-primary-dark); margin: 12px 0; }
.timer-help { font-size: 12px; color: var(--text-muted); margin: -4px 0 8px; }

/* Focus group fix #17 (sean-tinnitus): notched-masking pitch picker block.
   Shown only when the user selects "Notched Masking" from the grid. */
.notched-controls { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin: 0 0 20px; }
.notched-controls h4 { margin: 0 0 6px; font-size: 15px; }
.notched-help { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin: 0 0 12px; }
.notched-sweep-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.notched-sweep-row .btn { flex: 1; padding: 8px 10px; font-size: 13px; }
.notched-sweep-display { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; color: var(--brand-primary-dark); min-width: 72px; text-align: right; }
.notched-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.notched-range-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: -10px; }
.notched-saved { font-size: 11px; color: var(--text-muted); font-style: italic; margin: 8px 0 0; }

/* Focus group fix #16 (sean-tinnitus): two-button action row (Dim + Stop)
   and the full-screen dim overlay for nighttime use. */
.tinnitus-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 16px; }
.tinnitus-action-row .btn { width: 100%; }
.tinnitus-note { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin: 12px 0 0; font-style: italic; }
.tinnitus-dim-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    cursor: pointer;
}
.dim-tap-hint {
    color: #222;
    font-size: 11px;
    padding: 12px;
    opacity: 0.7;
    user-select: none;
}

.win-difficulty { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 24px; }
.diff-card { background: var(--bg-soft); border: 2px solid var(--border); border-radius: 12px; padding: 16px 12px; text-align: center; cursor: pointer; font-family: inherit; }
.diff-card.selected { border-color: var(--brand-primary); background: rgba(46,125,140, 0.08); }
.diff-name { font-weight: 700; font-size: 16px; }
.diff-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.win-header { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text-soft); }
.win-snr { text-align: center; font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.win-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.win-choice { background: var(--card); border: 2px solid var(--border); border-radius: 14px; padding: 24px 16px; font-size: 18px; font-weight: 700; cursor: pointer; font-family: inherit; }
.win-choice:active { transform: scale(0.96); }
.win-choice.correct { background: rgba(46,125,140, 0.15); border-color: var(--brand-primary); color: var(--brand-primary-dark); }
.win-choice.wrong { background: rgba(229, 62, 62, 0.1); border-color: var(--danger); color: var(--danger); }
/* Focus group fix #38: small one-shot "Hear once more" button on the WIN round. */
.win-replay { width: 100%; margin: 4px 0 8px; font-size: 14px; padding: 12px; }
.win-replay:disabled { opacity: 0.5; cursor: not-allowed; }
.win-result-card { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); color: white; border-radius: 16px; padding: 24px; text-align: center; margin: 20px 0; }
.win-final-score { font-size: 48px; font-weight: 800; line-height: 1; }
.win-final-pct { font-size: 18px; opacity: 0.9; margin: 4px 0 12px; }
.win-final-msg { font-size: 14px; line-height: 1.5; opacity: 0.95; }

.content-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.content-tool-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: left; cursor: pointer; font-family: inherit; }
.ctc-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 6px; font-size: 28px; }
.ctc-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.ctc-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.glossary-list { margin-top: 12px; }
.gloss-item { background: var(--bg-soft); border-radius: 10px; padding: 14px; margin-bottom: 8px; }
.gloss-term { font-weight: 700; color: var(--brand-primary-dark); margin-bottom: 4px; font-size: 15px; }
.gloss-def { font-size: 13px; line-height: 1.5; color: var(--text); }

.benefit-list { margin: 12px 0; }
.benefit-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font-family: inherit; width: 100%; }
.benefit-label { font-weight: 600; font-size: 14px; text-align: left; }
.benefit-status { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; letter-spacing: 0.5px; }
.benefit-status.no { background: rgba(229, 62, 62, 0.15); color: var(--danger); }
.benefit-status.yes, .benefit-status.yesoftenfree { background: rgba(46,125,140, 0.15); color: var(--brand-primary-dark); }
.benefit-status.often, .benefit-status.varies, .benefit-status.variesbystate, .benefit-status.limited { background: rgba(217, 158, 46, 0.15); color: #b7791f; }
.benefit-detail { margin: 12px 0 24px; }
.benefit-detail-card { background: var(--card); border: 1.5px solid var(--brand-primary); border-radius: 12px; padding: 14px; }
.bd-label { font-weight: 700; margin-bottom: 4px; }
.bd-status { display: inline-block; background: rgba(46,125,140, 0.15); color: var(--brand-primary-dark); padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.bd-note { font-size: 13px; line-height: 1.5; }

.network-list { margin-top: 12px; }
.network-card { background: var(--bg-soft); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.network-name { font-weight: 800; font-size: 16px; color: var(--text); }
.network-owner { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.network-benefit, .network-row { font-size: 13px; line-height: 1.5; margin-bottom: 4px; }
.network-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; font-style: italic; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.hidden { display: none; }
.modal { background: var(--card); border-radius: 20px; padding: 24px; max-width: 400px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; font-size: 48px; }
.modal h2 { text-align: center; margin-bottom: 8px; }
.modal p { text-align: center; color: var(--text-soft); font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.modal .form-input { margin-bottom: 12px; }
.modal .confirm { margin-bottom: 8px; font-size: 13px; }
.modal .btn { margin-bottom: 8px; }

/* Focus group fix #6: "About your Hearing Number" sheet styling. */
.hn-modal-def { text-align: center; color: var(--text); font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
.hn-modal-bands { list-style: none; padding: 0; margin: 0 0 14px; background: var(--bg-soft); border-radius: 12px; padding: 12px 16px; }
.hn-modal-bands li { font-size: 14px; line-height: 1.7; color: var(--text); }
.hn-modal-source { text-align: center; font-size: 12px; color: var(--text-muted); font-style: italic; margin-bottom: 16px; }

/* Focus group fix #5: inline unit clarifier for the Custom Audiogram. */
.ca-unit-note { font-size: 12px; color: var(--text-muted); margin: -4px 0 12px; line-height: 1.5; }

/* V1.3 Polish: settings gear in welcome header. */
.settings-gear { position: absolute; top: calc(var(--safe-top) + 12px); right: 16px; background: transparent; border: none; font-size: 22px; cursor: pointer; padding: 6px 10px; color: var(--text-soft); font-family: inherit; }

/* V1.3 Polish: Settings screen rows + segmented controls. */
.settings-row { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; font-family: inherit; text-align: left; box-shadow: var(--card-shadow); }
.settings-row:active { transform: scale(0.99); }
.settings-row.settings-danger .sr-label { color: var(--danger); }
.sr-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 22px; line-height: 1; }
.sr-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-label { font-weight: 600; color: var(--text); font-size: 15px; }
.sr-sub { font-size: 12px; color: var(--text-muted); }
.sr-chevron { color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.sr-toggle { background: var(--bg-soft); color: var(--text-soft); padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.sr-toggle.on { background: rgba(46,125,140, 0.15); color: var(--brand-primary-dark); }
.settings-segment { display: flex; gap: 4px; background: var(--bg-soft); padding: 4px; border-radius: 12px; margin-bottom: 14px; }
.seg-opt { flex: 1; background: transparent; border: none; padding: 10px 6px; border-radius: 8px; font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--text-soft); }
.seg-opt.selected { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
.settings-version { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 12px; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; }

/* V1.3 Polish: Empty-state pattern. */
.empty-state { text-align: center; padding: 48px 24px; background: var(--bg-soft); border-radius: 16px; margin: 16px 0; }
.empty-icon { font-size: 56px; margin-bottom: 12px; opacity: 0.6; }
.empty-illustration { width: 200px; height: auto; display: block; margin: 0 auto 16px; }
.empty-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.empty-body { font-size: 14px; color: var(--text-soft); line-height: 1.5; margin-bottom: 18px; }
.empty-state .btn { width: auto; padding: 10px 22px; display: inline-block; }

/* V1.3 Polish: Generic loading skeleton. */
.skeleton { background: linear-gradient(90deg, var(--bg-soft) 0%, var(--border) 50%, var(--bg-soft) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: 8px; }
.skeleton-line { height: 14px; margin-bottom: 8px; }
.skeleton-line:last-child { margin-bottom: 0; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* V1.3 Polish: offline / error banners. */
.banner { position: fixed; top: calc(20px + env(safe-area-inset-top)); left: 16px; right: 16px; padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; z-index: 1100; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); transform: translateY(-150%); transition: transform 0.3s; }
.banner.shown { transform: translateY(0); }
.banner.banner-offline { background: var(--text); color: white; }
.banner.banner-error { background: var(--danger); color: white; }
.banner.banner-success { background: var(--brand-primary); color: white; }

/* V1.3 Polish: first-launch welcome card. */
.first-launch-card { position: relative; background: var(--card); border: 2px solid var(--brand-primary); border-radius: 16px; padding: 20px 22px; margin: 18px 0 28px; box-shadow: var(--card-shadow); }
.fl-dismiss { position: absolute; top: 8px; right: 12px; background: transparent; border: none; font-size: 22px; color: var(--text-muted); cursor: pointer; padding: 4px 10px; font-family: inherit; }
.fl-icon { font-size: 36px; margin-bottom: 6px; }
.fl-title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.fl-body { font-size: 14px; color: var(--text-soft); line-height: 1.5; }

/* ============================================================
 * Group A — V1.3 Full Experience: new screens + recommendations
 * ============================================================ */

/* Volume calibration screen (Mimi-style) */
.cal-step { background: #f7fafc; border-radius: 12px; padding: 18px 16px; margin: 16px 0; }
.cal-step-num { font-size: 12px; color: #718096; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-bottom: 4px; }
.cal-step h3 { font-size: 18px; margin: 4px 0 6px 0; }
.cal-step p { font-size: 14px; color: #4a5568; margin: 0 0 12px 0; }
/* v1.5.3 Mark review 10.2: in dark mode the "Step 1, 2 and 3" headings
   under "Calibrate your Volume" were too light to read. Boost contrast
   on the dark theme: lift the card surface, brighten the step-number
   label, and switch the h3 + body copy to bright + readable greys. */
html[data-theme="dark"] .cal-step,
html[data-theme="system"] .cal-step { background: #1f2937; }
html[data-theme="dark"] .cal-step-num,
html[data-theme="system"] .cal-step-num { color: #cbd5e0; }
html[data-theme="dark"] .cal-step h3,
html[data-theme="system"] .cal-step h3 { color: #f7fafc; }
html[data-theme="dark"] .cal-step p,
html[data-theme="system"] .cal-step p { color: #e2e8f0; }
.cal-play { margin-top: 8px; margin-right: 8px; }
.cal-verdict { background: #fff8e1; border: 1.5px solid #f0a500; border-radius: 12px; padding: 16px; margin: 16px 0; }
.cal-verdict h3 { font-size: 17px; margin: 0 0 10px 0; color: #b7791f; }
.cal-verdict .btn { display: block; width: 100%; margin: 8px 0; }

/* HHIE-S questionnaire screen */
.hhie-progress { margin: 16px 0; }
.hhie-progress-track { height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.hhie-progress-fill { height: 100%; background: var(--brand-primary, #2E7D8C); transition: width 240ms ease; }
.hhie-progress-label { font-size: 12px; color: #718096; margin-top: 6px; text-align: right; font-weight: 600; }
.hhie-question { font-size: 1.25rem; line-height: 1.45; color: #1a202c; padding: 28px 4px; min-height: 120px; font-weight: 500; }
.hhie-options .hhie-opt { display: block; width: 100%; margin: 10px 0; padding: 16px; font-size: 17px; font-weight: 700; }

/* HHIE-S comparison block on results */
.hhie-comparison { background: #f7fafc; border: 1.5px solid #cbd5e0; border-radius: 12px; padding: 18px; margin: 20px 0; }
.hhie-comparison.hidden { display: none; }
.hhie-comp-title { font-weight: 700; font-size: 15px; color: #2d3748; margin-bottom: 12px; }
.hhie-comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hhie-comp-col { background: #fff; border-radius: 8px; padding: 12px; }
.hhie-comp-label { font-size: 11px; color: #718096; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.hhie-comp-value { font-size: 15px; font-weight: 700; color: #1a202c; margin-top: 4px; }
.hhie-comp-explanation { font-size: 13px; color: #4a5568; margin-top: 12px; line-height: 1.5; }

/* Recommendations block on results */
.recommendations-block { margin: 24px 0; padding: 0; }
.rec-headline { font-size: 1.25rem; font-weight: 800; line-height: 1.3; color: #1a202c; margin-bottom: 6px; }
.rec-body { font-size: 1rem; line-height: 1.55; color: #2d3748; margin: 0 0 16px 0; }
.rec-actions { display: flex; flex-direction: column; gap: 8px; }
.rec-action { width: 100%; }

/* Welcome card list */
.fl-list { padding-left: 20px; margin: 8px 0 14px 0; line-height: 1.55; }
.fl-list li { margin: 6px 0; }

/* Word in Noise SNR explainer */
.snr-explainer { background: #f0f9ff; border-left: 4px solid #0284c7; padding: 12px 16px; margin: 12px 0; border-radius: 6px; font-size: 14px; }
.snr-list { padding-left: 20px; margin: 6px 0; line-height: 1.6; }
.snr-list li { margin: 4px 0; }

/* v1.4.2 run-2 fix #5 — Managed-profile viewing banner.
 * Persistent amber bar at top of every screen when active profile is
 * role='managed'. Distinct from header so caregivers always know whose
 * data they're viewing. Tap-to-switch-back resets to a self-role profile.
 * Safety-critical: misattributing a test corrupts a managed profile's
 * trend line (gloria, mei, priya). */
:root {
    --bg-viewing: #FFF4D6;
    --text-viewing: #6A4A09;
    --border-viewing: #C97A0F;
}
html[data-theme="dark"] {
    --bg-viewing: #4A3A08;
    --text-viewing: #FFE8A8;
    --border-viewing: #E0A04A;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --bg-viewing: #4A3A08;
        --text-viewing: #FFE8A8;
        --border-viewing: #E0A04A;
    }
}
.viewing-banner {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 16px calc(10px + env(safe-area-inset-top, 0)) 16px;
    padding-top: calc(10px + env(safe-area-inset-top, 0));
    background: var(--bg-viewing);
    color: var(--text-viewing);
    border: none;
    border-bottom: 2px solid var(--border-viewing);
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}
.viewing-banner.hidden { display: none; }
.viewing-banner .vb-label { font-size: 14px; font-weight: 800; line-height: 1.2; }
.viewing-banner .vb-switch { font-size: 12px; font-weight: 600; opacity: 0.85; line-height: 1.2; }
.viewing-banner:active { filter: brightness(0.96); }

/* v1.4.2 run-2 fix #7 — Speaker-mode amber tint on Results card.
 * Tints the entire result card amber and leads with the
 * "Preliminary — retest with headphones" caveat BEFORE the
 * classification line. Margaret: "Eileen will see the word 'normal',
 * tune out the parenthetical, and decide she doesn't need to do this
 * again." */
.result-card.results-speaker-mode {
    background: var(--bg-viewing);
    border-left: 4px solid var(--border-viewing);
    /* v1.5.13 Mark review free-form fix: the .result-card base sets color
       to white for the slate-teal gradient bg. In speaker-mode the bg
       switches to pale yellow (--bg-viewing #FFF4D6) but the white text
       was inherited from the base, giving Mark's "very pale yellow with
       white lettering — very hard to read" complaint. Override text color
       to a dark amber so headline + detail are legible on the warning
       background. */
    color: var(--text-viewing);
}
.result-card.results-speaker-mode .result-headline,
.result-card.results-speaker-mode .result-detail {
    color: var(--text-viewing);
}
.result-card.results-speaker-mode .speaker-mode-lead {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-viewing);
    margin: 0 0 8px 0;
    line-height: 1.35;
}
.speaker-mode-lead { display: none; }

/* v1.4.2 run-2 fix #9 — Caregiver "no cross-device sync yet" banner.
 * Quiet, informative one-liner shown above the Caregiver Dashboard so
 * the caregiver understands what the scaffold does and does not do.
 * Not dismissible — the honesty IS the feature. */
.caregiver-sync-banner {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.45;
    padding: 10px 14px;
    margin: 0 0 12px 0;
}
.caregiver-sync-banner.hidden { display: none; }

/* Focus group fix bundle 09 (FIX #11, #40) — caregiver mode scaffold. */
/* Profile role picker on the Add / Edit Profile screen. */
.profile-role-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.profile-role-opt { display: block; width: 100%; text-align: left; background: var(--bg-soft); border: 2px solid var(--border); border-radius: 12px; padding: 14px 16px; font-family: inherit; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.profile-role-opt:hover { border-color: var(--text-soft); }
.profile-role-opt.selected { border-color: var(--brand-primary); background: rgba(46,125,140, 0.08); }
.profile-role-opt .prp-title { font-weight: 700; font-size: 1rem; color: var(--text); margin-bottom: 4px; }
.profile-role-opt .prp-sub { font-size: 0.875rem; color: var(--text-soft); line-height: 1.4; }

/* Caregiver dashboard (Family tab in caregiver mode). */
.caregiver-dashboard { margin-top: 8px; margin-bottom: 16px; }
.caregiver-headline { font-size: 0.875rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.caregiver-card { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; font-family: inherit; text-align: left; box-shadow: var(--card-shadow); }
.caregiver-card:active { transform: scale(0.99); }
.caregiver-avatar { font-size: 36px; line-height: 1; }
.caregiver-info { min-width: 0; }
.caregiver-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.caregiver-last { font-size: 0.875rem; color: var(--text-soft); margin-top: 2px; }
.caregiver-trend { display: flex; align-items: baseline; gap: 6px; }
.caregiver-number { font-size: 1.5rem; font-weight: 800; color: var(--text); }
.caregiver-trend-icon { font-size: 1.25rem; font-weight: 800; }
.caregiver-trend.trend-good .caregiver-trend-icon { color: var(--brand-primary, #2E7D8C); }
.caregiver-trend.trend-warn .caregiver-trend-icon { color: var(--danger, #e53e3e); }
.caregiver-trend.trend-flat .caregiver-trend-icon { color: var(--text-soft); }

.caregiver-empty { background: var(--bg-soft); border: 1px dashed var(--border); border-radius: 14px; padding: 24px; text-align: center; }
.caregiver-empty-icon { font-size: 36px; margin-bottom: 8px; }
.caregiver-empty-title { font-size: 1.0625rem; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.caregiver-empty-body { font-size: 0.9375rem; color: var(--text-soft); line-height: 1.5; }

/* FIX #8: persistent commercial-relationship disclosure on the Welcome screen
   and inside the first-launch welcome card. Quiet, FTC-style plain language. */
.welcome-disclosure { font-size: 12px; color: var(--text-muted, #718096); text-align: center; margin: 16px 16px 4px; padding: 10px 14px; background: var(--bg-soft, #f7fafc); border-radius: 8px; line-height: 1.5; }
.fl-disclosure { margin-top: 12px; padding: 10px 12px; background: rgba(46,125,140, 0.08); border-left: 3px solid var(--brand-primary, #2E7D8C); border-radius: 6px; font-size: 13px; line-height: 1.5; color: var(--text-soft, #2d3748); }
.fl-disclosure strong { color: var(--text, #1a202c); }

/* Inline text link (matches body type, used in lead paragraphs to point at the
   About / Methodology screen without dropping a full button into the flow). */
.link-inline { background: transparent; border: none; padding: 0; font: inherit; color: var(--brand-primary, #2E7D8C); text-decoration: underline; cursor: pointer; }
.link-inline:hover, .link-inline:focus { color: var(--brand-primary-dark, #1E5660); }

/* FIX #14: About iHEARtest screen — advisor cards, methodology blocks. */
.about-block { background: var(--card, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 16px 18px; margin: 16px 0; }
.about-block h3 { font-size: 16px; margin: 0 0 8px 0; color: var(--text, #1a202c); }
.about-block p { font-size: 14px; line-height: 1.55; color: var(--text-soft, #2d3748); margin: 0 0 8px 0; }
.about-block p:last-child { margin-bottom: 0; }
.about-sub { font-size: 13px; color: var(--text-muted, #718096); margin-bottom: 12px !important; }
.about-list { padding-left: 20px; margin: 8px 0 0 0; line-height: 1.55; font-size: 14px; color: var(--text-soft, #2d3748); }
.about-list li { margin: 6px 0; }
.advisor-card { display: flex; gap: 12px; padding: 12px; margin: 10px 0; background: var(--bg-soft, #f7fafc); border-radius: 10px; }
.advisor-photo { width: 48px; height: 48px; border-radius: 50%; background: var(--border, #e2e8f0); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.advisor-body { flex: 1; }
.advisor-name { font-weight: 700; font-size: 15px; color: var(--text, #1a202c); }
.advisor-role { font-size: 12px; color: var(--text-muted, #718096); margin: 2px 0 6px 0; font-weight: 600; }
.advisor-bio { font-size: 13px; line-height: 1.5; color: var(--text-soft, #4a5568); }

/* ============================================================
 * Focus-group fix #28 — First-launch onboarding sheet.
 * Personas: doris-church, earl-rural, james-veteran, margaret-grandmother.
 * Quote (doris): "Put the Text Size and Contrast controls FRONT AND CENTER
 *                  on first launch, not buried in a gear icon in the corner."
 * One screen, three controls: Language, Text Size (with live preview), Dark
 * Mode. Continue → home. Shown exactly once, gated on `onboarding_seen`.
 * ============================================================ */
.onboarding-overlay {
    position: fixed; inset: 0; background: var(--bg); z-index: 2000;
    display: flex; align-items: stretch; justify-content: center;
    padding: calc(20px + var(--safe-top)) 0 calc(20px + var(--safe-bot));
    overflow-y: auto;
}
.onboarding-overlay.hidden { display: none; }
/* v1.4.5 hotfix: hide the tab bar while the onboarding overlay is showing.
   z-index alone wasn't enough on iOS — the tab bar's tap targets were
   stealing touches in the Continue-button strip and visually clipping the
   bottom of the sheet. body.ob-active is added/removed alongside the
   overlay's .hidden toggle in showOnboarding() + the Continue handler. */
body.ob-active #tabbar { display: none !important; }
.onboarding-sheet { max-width: 480px; width: 100%; padding: 20px 24px 32px; }
.ob-brand { text-align: center; margin-bottom: 18px; }
/* v1.4.5 hotfix: the new brand lockup is a 240×88 horizontal mark+wordmark.
   The previous 72×72 square sizing squished it. Render at 200px wide with
   auto height so the aspect ratio stays correct and the wordmark reads. */
.ob-logo { width: 200px; height: auto; max-height: 80px; margin-bottom: 8px; }
.ob-title { font-size: 26px; font-weight: 800; text-align: center; color: var(--text); margin-bottom: 6px; }
.ob-lead { font-size: 15px; color: var(--text-soft); text-align: center; margin-bottom: 22px; line-height: 1.45; }
.ob-section { margin-bottom: 22px; }
.ob-label { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 10px; display: block; }
.ob-sub { font-size: 13px; color: var(--text-soft); margin-top: 4px; line-height: 1.4; }
.ob-segment { display: flex; gap: 6px; background: var(--bg-soft); padding: 4px; border-radius: 12px; }
.ob-segment .seg-opt { flex: 1; background: transparent; border: none; padding: 12px 8px; border-radius: 8px; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--text-soft); }
.ob-segment .seg-opt.selected, .ob-segment .seg-opt[aria-checked="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
/* Live preview block whose font size mirrors the chosen text-size scale so
   users can SEE the change before committing. */
.ob-preview { background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 10px; font-size: 1rem; color: var(--text); line-height: 1.45; }
.ob-preview strong { color: var(--text); }
.ob-continue { margin-top: 12px; }
/* ============================================================
 * Focus-group bundle 10 — i18n / language picker / quiet hours
 * ============================================================ */

/* First-launch language picker overlay (focus-group #12). Sits above
 * everything so a Spanish-dominant user sees a Spanish-labeled button
 * before any English-only UI paints. */
.lang-picker-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 0, 0, 0.72);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    backdrop-filter: blur(4px);
}
.lang-picker-overlay.hidden { display: none; }
.lang-picker-sheet {
    background: var(--card, #fff); border-radius: 20px;
    padding: 28px 22px; width: 100%; max-width: 420px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    text-align: center;
}
.lang-picker-icon { font-size: 48px; margin-bottom: 10px; }
.lang-picker-title { font-size: 18px; font-weight: 800; color: var(--text, #1a202c); margin-bottom: 6px; line-height: 1.3; }
.lang-picker-subtitle { font-size: 13px; color: var(--text-muted, #718096); margin-bottom: 22px; line-height: 1.45; }
.lang-picker-buttons { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.lang-picker-big {
    /* Giant tap targets per focus-group spec — both buttons same size
     * so Spanish doesn't feel like the secondary choice. */
    min-height: 64px; font-size: 20px; font-weight: 800;
    border-radius: 14px;
}
.lang-picker-more { font-size: 14px; color: var(--text-muted, #718096); margin-top: 4px; }
.lang-picker-more-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; text-align: left; }
.lang-picker-more-list.hidden { display: none; }

/* Quiet hours block (focus-group #34) */
.settings-subsection {
    background: var(--card, #f7fafc);
    border-radius: 12px; padding: 12px 14px; margin: 8px 0 16px 0;
    border: 1px solid var(--border, #e2e8f0);
}
.settings-row-static { cursor: default; }
.qh-time-row { display: flex; gap: 12px; margin-top: 10px; }
.qh-time-cell { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-soft, #4a5568); }
.qh-time-label { font-size: 12px; font-weight: 700; color: var(--text-muted, #718096); text-transform: uppercase; letter-spacing: 0.5px; }
.qh-time-cell input[type="time"] {
    padding: 10px 12px; border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px; font-size: 16px; background: var(--card, #fff);
    color: var(--text, #1a202c); font-family: inherit;
}
.qh-hint { font-size: 12px; color: var(--text-muted, #718096); margin-top: 6px; font-style: italic; }
.qh-select {
    width: 100%; padding: 12px; margin-top: 10px;
    border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
    font-size: 15px; background: var(--card, #fff); color: var(--text, #1a202c);
    font-family: inherit;
}

/* Quiet-hours master toggle (CSS-only iOS-style switch) */
.qh-toggle { position: relative; width: 50px; height: 30px; flex-shrink: 0; cursor: pointer; }
.qh-toggle input { opacity: 0; width: 0; height: 0; }
.qh-toggle-slider {
    position: absolute; inset: 0; background: #cbd5e0; border-radius: 999px;
    transition: background 0.2s;
}
.qh-toggle-slider::before {
    content: ""; position: absolute; left: 3px; top: 3px;
    width: 24px; height: 24px; background: #fff; border-radius: 50%;
    transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.qh-toggle input:checked + .qh-toggle-slider { background: var(--brand-primary, #2E7D8C); }
.qh-toggle input:checked + .qh-toggle-slider::before { transform: translateX(20px); }

/* W-22 Spanish warning banner */
.win-es-warning { font-weight: 600; }
.win-es-warning.hidden { display: none; }
/* ===========================================================================
   Focus-group fix #30: Sharpen Your Hearing training program (SCAFFOLD)
   =========================================================================== */
.training-promo {
    background: linear-gradient(135deg, #fef9e7, #ecfeff);
    border: 2px solid var(--brand-primary, #2E7D8C);
    border-radius: 14px;
    padding: 18px;
    margin: 18px 0;
}
.training-promo:empty { display: none; }
.training-promo-tag { display: inline-block; background: var(--brand-primary); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; margin-bottom: 8px; }
.training-promo-title { font-size: 19px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.training-promo-sub { font-size: 14px; color: var(--text-soft); line-height: 1.5; margin-bottom: 10px; }
.training-promo-pricing { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; font-weight: 600; }
.training-promo-link { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--brand-primary-dark, #1E5660); text-decoration: none; }
.training-promo-link:hover { text-decoration: underline; }

.training-pricing-card { background: var(--bg-soft); border-radius: 12px; padding: 14px 16px; margin: 16px 0; }
.training-price-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 15px; }
.training-price-row strong { color: var(--text); }
.training-price-row span { color: var(--text-muted); font-size: 12px; }
.training-price-trial { font-size: 12px; color: var(--text-muted); margin-top: 4px; border-top: 1px solid var(--border); padding-top: 8px; }

.training-day-badge { display: inline-block; background: var(--brand-primary); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; margin-bottom: 10px; }
.training-progress { margin: 16px 0; }
.training-progress-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-soft); margin-bottom: 6px; }
.training-progress-bar { height: 6px; background: var(--border); border-radius: 100px; overflow: hidden; }
.training-progress-fill { height: 100%; background: var(--brand-primary); width: 0; transition: width 200ms ease; }
.training-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }

.training-snr-result { background: var(--bg-soft); border-radius: 12px; padding: 18px; margin: 16px 0; text-align: center; }
.training-snr-value { font-size: 38px; font-weight: 800; color: var(--brand-primary-dark, #1E5660); margin-bottom: 8px; }
.training-snr-caption { font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.training-stub-card { background: var(--bg-soft); border-radius: 12px; padding: 20px; text-align: center; margin: 16px 0; }
.training-stub-icon { font-size: 38px; margin-bottom: 8px; }
.training-stub-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; }

/* Paywall sheet (stub UI) */
.paywall-sheet { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: flex-end; justify-content: center; z-index: 1000; }
.paywall-sheet.hidden { display: none; }
.paywall-inner { background: var(--card); border-radius: 16px 16px 0 0; padding: 24px 20px calc(24px + var(--safe-bot)); max-width: 480px; width: 100%; position: relative; }
.paywall-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 28px; color: var(--text-muted); cursor: pointer; }
.paywall-inner h3 { margin: 0 0 10px; font-size: 20px; }
.paywall-inner p { font-size: 14px; color: var(--text-soft); line-height: 1.5; margin-bottom: 12px; }

/* ===========================================================================
   Focus-group fix #35: Arabic + RTL layout
   See docs/ARABIC_LOCALIZATION_DESIGN.md for the full QA pass plan. This
   block covers nav, button rows, and the Hearing Number card; deeper screen
   audits (test flow, Simulator, HHIE) remain on the to-do list there.
   =========================================================================== */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .screen-inner { direction: rtl; }
[dir="rtl"] .tabbar { flex-direction: row-reverse; }
[dir="rtl"] .stats-row { flex-direction: row-reverse; }
[dir="rtl"] .profile-bar { flex-direction: row-reverse; }
[dir="rtl"] .profile-current { flex-direction: row-reverse; }
[dir="rtl"] .number-card { text-align: center; }
[dir="rtl"] .number-card-sub { direction: rtl; }
[dir="rtl"] .settings-gear { left: 16px; right: auto; }
[dir="rtl"] .fl-list { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .section-head { flex-direction: row-reverse; }
[dir="rtl"] .article-feature-cta,
[dir="rtl"] .section-link { direction: rtl; }
/* Mirror chevrons / arrows that read as direction cues */
[dir="rtl"] .sr-chevron { transform: scaleX(-1); }
[dir="rtl"] .ft-arrow { transform: scaleX(-1); }
[dir="rtl"] .screen-back { text-align: right; }
/* Latin numerals + audiogram (charts/values) stay LTR even on RTL pages */
[dir="rtl"] .number-card-value,
[dir="rtl"] .stat-value,
[dir="rtl"] .training-snr-value,
[dir="rtl"] canvas { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .training-progress-row { flex-direction: row-reverse; }
[dir="rtl"] .training-price-row { flex-direction: row-reverse; }

/* v1.5.9 Mark review 12.1: in-context Enable Sound pill on Results.
   Looks like an inline tip, not a system banner — same visual language as
   the existing topic-row pills. */
.enable-sound-pill {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 12px 16px;
    margin: 10px 0 16px;
    background: rgba(63,160,179,0.10);
    border: 1.5px solid rgba(46,125,140,0.30);
    border-radius: 12px;
    color: var(--brand-primary);
    font-family: inherit; font-size: 14px;
    text-align: left; cursor: pointer;
}
.enable-sound-pill svg { flex-shrink: 0; }
.enable-sound-pill strong { font-weight: 700; }

/* v1.5.5: prevent iOS double-tap-zoom delay + tighten scroll-vs-tap
   detection on all interactive elements. Without this, brief finger
   contact during a scroll could trigger taps.
   v1.5.9 Mark review 13.2: also suppress the iOS long-press menu
   (Copy / Look up / Share) that fires when the user holds a button
   down — needed for the press-feedback ripple to feel responsive
   without iOS hijacking the gesture for a text-selection menu. */
.btn, .number-card, .tool-card, .featured-tool, .profile-bar, .tab,
.settings-row, .topic-row, .tinnitus-card, .sim-preset, .eq-card,
.timer-opt, .check-item, button[data-go], [class*="card"][data-go] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* v1.5.7 — cinematic result-reveal sequence
   Choreography (matches App.showResults timing):
     0.0s  result-reveal chime fires + count-up begins
     1.5s  number lands (heavy haptic)
     1.7s  classification badge fades up
     2.0s  audiogram begins drawing in left-to-right
     2.8s  the rest of the result-card content settles
*/
#hearing-number-hero.revealing .hn-value {
  display: inline-block;
  animation: hn-value-pulse 1.5s cubic-bezier(.2,.6,.3,1) forwards;
}
#hearing-number-hero.revealing .hn-class {
  opacity: 0;
  animation: hn-class-rise 0.7s cubic-bezier(.2,.7,.2,1) 1.7s forwards;
}
#hearing-number-hero.revealing::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 60% at 50% 45%,
    rgba(124,227,240,0.35) 0%, rgba(124,227,240,0) 60%);
  opacity: 0;
  animation: hn-hero-glow 1.6s ease-out 1.4s forwards;
  pointer-events: none;
}
@keyframes hn-value-pulse {
  0%   { transform: scale(0.94); opacity: 0.75; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1.00); opacity: 1; }
}
@keyframes hn-class-rise {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes hn-hero-glow {
  0%   { opacity: 0; transform: scale(0.6); }
  40%  { opacity: 0.9; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.18); }
}

/* v1.5.7 — badge unlock micro-celebration
   The badge toast already exists. Make the medallion inside spin into place
   with a glow ring burst around it. */
.toast-badge .toast-icon { position: relative; display: inline-block; }
.toast-badge.show .toast-icon {
  animation: badge-spin-in 0.9s cubic-bezier(.2,.7,.3,1.2) 0.05s backwards;
}
.toast-badge.show .toast-icon::before {
  content: ''; position: absolute; inset: -8px;
  border-radius: 50%; border: 2px solid rgba(124,227,240,0.7);
  opacity: 0;
  animation: badge-ring-burst 1.0s cubic-bezier(.2,.6,.4,1) 0.2s forwards;
  pointer-events: none;
}
@keyframes badge-spin-in {
  0%   { transform: scale(0.2) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes badge-ring-burst {
  0%   { opacity: 1; transform: scale(0.6); border-width: 4px; }
  100% { opacity: 0; transform: scale(2.2); border-width: 0.5px; }
}

/* v1.5.10 deep-dive audit fix (Tier 1 #5): the v1.5.x animation set added
   several large attention-grabbing animations (Hearing Number pulse on the
   Results screen, badge unlock spin+ring-burst, skeleton-shimmer loaders)
   without prefers-reduced-motion overrides. Users with Reduced Motion
   enabled in iOS Accessibility get vestibular discomfort from scale +
   rotate transforms in particular. These overrides keep the visual
   feedback signal (the number landing, the badge appearing) but drop the
   motion to opacity-only fades. Skeleton-shimmer is replaced with a
   subtle opacity pulse so loading states are still distinguishable from
   static placeholders. */
@media (prefers-reduced-motion: reduce) {
  .hn-value-revealing,
  .hn-class-revealing,
  .hn-hero-revealing,
  .hearing-number-hero.revealing,
  .hearing-number-hero.revealing .hn-value,
  .hearing-number-hero.revealing .hn-class {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .toast-badge.show .toast-icon,
  .toast-badge.show .toast-icon::before {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    border-width: 0 !important;
  }
  @keyframes skeleton-quiet-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
  }
  .skeleton {
    background: var(--bg-soft) !important;
    animation: skeleton-quiet-pulse 1.6s ease-in-out infinite !important;
  }
}

/* v1.5.7 — personalized insight card */
.insight-card {
  background: linear-gradient(135deg, rgba(63,160,179,0.10), rgba(46,125,140,0.04));
  border: 1.5px solid rgba(63,160,179,0.35);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 16px 0;
  position: relative;
  overflow: hidden;
}
.insight-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #5BC0CC, #2E7D8C);
}
.insight-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: #2E7D8C; margin-bottom: 6px;
}
.insight-body { font-size: 15px; line-height: 1.5; color: var(--text); }
.insight-body strong { color: #1A4F5A; font-weight: 700; }

/* v1.5.7 — onboarding intent picker */
.ob-intent { display: flex; flex-direction: column; gap: 10px; }
.intent-opt {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-soft); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 14px 16px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color 0.15s, background-color 0.15s;
}
.intent-opt[aria-checked="true"] {
  border-color: var(--brand-primary);
  background: rgba(46,125,140,0.08);
}
.intent-glyph { font-size: 28px; flex-shrink: 0; }
.intent-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.intent-text strong { font-size: 15px; font-weight: 700; color: var(--text); }
.intent-text span { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

/* v1.5.7 — clinical-advisor video card on About */
.founder-video-card {
  background: linear-gradient(135deg, #0E2A30 0%, #050D10 100%);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
/* v1.5.10 Mark review 7.1 + 7.3: iOS Safari ignores `object-fit: cover` on
   the native <video poster=> attribute. The v1.5.9 fix set object-fit on the
   video element itself, but the poster was still drawn unscaled and got
   stretched into the tall 9:16 box. Restructure so the poster is a real
   <img> overlaid on the video — object-fit applies properly to img — and
   the video sits at z-index 1 above it. On play, .is-playing is added to
   the wrapper so the poster fades out cleanly. */
.founder-video-wrapper {
  position: relative;
  /* v1.5.20: the video master is 1080x1920 (9:16). The old fixed 56vh height
     made the box WIDER than 9:16, so object-fit:cover cropped the top+bottom
     (founder's forehead got cut). Lock the wrapper to the video's own 9:16
     ratio and cap height responsively, so cover fills it with NO crop. */
  width: min(100%, calc(72vh * 9 / 16));
  aspect-ratio: 9 / 16;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.founder-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  z-index: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.founder-video-wrapper.is-playing .founder-video-poster {
  opacity: 0;
}
.founder-video-card video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
}
.video-fade-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 1s ease;
}
.founder-video-label {
  color: rgba(183,207,212,0.85);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-align: center; margin-top: 10px;
}

/* v1.5.7 — real photography for the welcome card + family empty state */
.fl-photo {
  display: block; width: calc(100% + 32px);
  height: 180px; object-fit: cover;
  margin: -16px -16px 14px -16px;
  border-radius: 16px 16px 0 0;
}
.empty-photo {
  display: block; width: 100%;
  height: 220px; object-fit: cover;
  border-radius: 14px;
  margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}

/* v1.5.7 — onboarding hero photo, microinteractions, profile depth UI */
.ob-photo {
  display: block; width: calc(100% + 48px);
  height: 220px; object-fit: cover;
  margin: -24px -24px 18px -24px;
  border-radius: 24px 24px 0 0;
}

/* Subtle ripple-style press feedback on every interactive surface */
.btn:active, .number-card:active, .tool-card:active, .featured-tool:active,
.settings-row:active, .topic-row:active, .tinnitus-card:active, .sim-preset:active,
.eq-card:active, .timer-opt:active, .intent-opt:active, .seg-opt:active {
  transform: scale(0.97);
  transition: transform 0.08s cubic-bezier(.4,.0,.4,1);
}
.btn-primary:hover, .btn-primary:focus-visible {
  box-shadow: 0 6px 18px rgba(46,125,140,0.4);
}

/* Profile-depth fields on the profile-edit screen */
.profile-depth { background: var(--bg-soft); border-radius: 14px; padding: 16px; margin: 14px 0; }
.profile-depth-title { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-primary); margin-bottom: 10px; }
.profile-depth textarea { width: 100%; min-height: 80px; padding: 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 15px; font-family: inherit; resize: vertical; background: var(--bg); color: var(--text); }
/* WS4 a11y area 4: same pattern — remove outline only for non-keyboard focus. */
.profile-depth textarea:focus { border-color: var(--brand-primary); }
.profile-depth textarea:focus:not(:focus-visible) { outline: none; }

/* v1.5.7 — tutorial video modal */
.tutorial-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(5,13,16,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
}
.tutorial-modal.hidden { display: none; }
.tutorial-modal-inner {
  position: relative; width: 100%; max-width: 420px;
  background: #0E2A30; border-radius: 18px; padding: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.tutorial-modal-inner video { width: 100%; height: auto; border-radius: 12px; display: block; }
.tutorial-close {
  position: absolute; top: -14px; right: -8px;
  width: 40px; height: 40px; border-radius: 50%;
  background: white; border: none; color: #0E2A30;
  font-size: 26px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 2;
}
.tutorial-caption {
  color: rgba(183,207,212,0.9); font-size: 13px;
  text-align: center; margin-top: 12px;
}
/* FGL-R2 FIX-01: visible skip/dismiss button below the tutorial caption. */
.tutorial-skip {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: none;
  color: rgba(183,207,212,0.65); font-size: 15px;
  padding: 10px; cursor: pointer; text-align: center;
  font-family: inherit;
}
.tutorial-skip:active { opacity: 0.6; }
/* The small "?" help affordance.
   v1.5.9 Mark review 11.1: Mark looked for a literal "?" button per the brief
   and didn't recognize the previous ▶-prefix as one. Replaced with an
   explicit "?" circle badge + play glyph, so the button reads simultaneously
   as a help/tutorial affordance AND a "watch video" CTA. */
.help-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(46,125,140,0.10); border: 1.5px solid rgba(46,125,140,0.3);
  color: var(--brand-primary); font-weight: 600; font-size: 14px;
  padding: 8px 14px 8px 8px; border-radius: 100px; cursor: pointer;
  font-family: inherit; margin: 4px 0 12px;
}
.help-btn::before {
  content: '?';
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--brand-primary);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

/* v1.5.8 — center tab pill: animated head + alternating ear waves + glow pulse
   v1.5.9 Mark review 2.2: Mark didn't see the waves pulse on device. Previous
   animation only changed opacity, which on iOS Safari at small sizes reads as
   subtle fade rather than the "pulse" Mark expected. New version pulses the
   actual scale on each side (groups grow + shrink ~25%), which reads as the
   classic radar-ring "ear is hearing" motion. Anchored at the ear so the
   waves emanate outward from the head silhouette. */
.tab-center-icon svg .tcc-wave-left,
.tab-center-icon svg .tcc-wave-right {
  transform-box: fill-box;
}
.tab-center-icon svg .tcc-wave-left  { transform-origin: 100% 50%; }
.tab-center-icon svg .tcc-wave-right { transform-origin: 0% 50%; }
@keyframes tcc-left-on {
  0%        { opacity: 0.2;  transform: scale(0.6); }
  20%       { opacity: 1;    transform: scale(1.0); }
  40%, 100% { opacity: 0.2;  transform: scale(0.6); }
}
@keyframes tcc-right-on {
  0%, 50%   { opacity: 0.2;  transform: scale(0.6); }
  70%       { opacity: 1;    transform: scale(1.0); }
  90%, 100% { opacity: 0.2;  transform: scale(0.6); }
}
.tab-center-icon svg .tcc-wave-left  { animation: tcc-left-on  2.4s ease-in-out infinite; }
.tab-center-icon svg .tcc-wave-right { animation: tcc-right-on 2.4s ease-in-out infinite; }
.tab-center-pill { box-shadow: 0 6px 18px rgba(46,125,140,0.45), 0 2px 4px rgba(0,0,0,0.10); }
.tab-center-icon svg { width: 36px; height: 36px; }

/* v1.5.10 Mark review 3.2: previously the reduced-motion media query set
   `animation: none` on all three layers, which is technically the safest
   default but means a user who has Reduced Motion enabled in iOS Accessibility
   never sees the "tap me" feedback signal at all. Mark (Reduced Motion ON)
   marked this PASS only after toggling the iOS setting off. The pulse is a
   discoverability cue, not decoration — replace the scale-and-shadow motion
   with a calm opacity-only fade that still draws the eye but doesn't violate
   the spirit of Reduced Motion (no translation, no scale, no shadow expansion). */
@media (prefers-reduced-motion: reduce) {
  @keyframes tcc-quiet-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
  }
  .tab-center-icon svg .tcc-wave-left,
  .tab-center-icon svg .tcc-wave-right {
    animation: tcc-quiet-pulse 3.2s ease-in-out infinite;
    transform: none;
  }
  .tab-center-icon svg .tcc-wave-right { animation-delay: 1.6s; }
  .tab-center-pill { animation: none; }
}

/* v1.5.8 — in-app article reader */
.article-body { font-size: 16px; line-height: 1.6; color: var(--text); }
.article-body h1 { font-size: 26px; line-height: 1.25; margin: 4px 0 8px; }
.article-body .article-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-primary); margin-bottom: 8px;
}
.article-body .article-meta { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; }
.article-body h2 { font-size: 19px; margin: 24px 0 8px; color: #1A4F5A; }
.article-body p { margin-bottom: 14px; }
.article-body ul { padding-left: 22px; margin-bottom: 14px; }
.article-body li { margin-bottom: 6px; }
.article-body strong { color: #1A4F5A; }
.article-body .pull-quote {
  background: linear-gradient(135deg, rgba(63,160,179,0.10), rgba(46,125,140,0.04));
  border-left: 4px solid var(--brand-primary);
  padding: 14px 18px; margin: 18px 0;
  border-radius: 0 12px 12px 0;
  font-style: italic; color: #1A4F5A;
}
/* v1.5.9 Mark review 8.1: citations need to read as "this is sourced," not
   visual filler. Slate-teal "References" label + slightly larger body so the
   eye lands on them at the end of every article. */
.article-body .citation {
  margin-top: 24px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #1A4F5A;
  background: rgba(63,160,179,0.06);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 8px 8px 0;
}
.article-body .citation::before {
  content: 'Clinical references';
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 6px;
}
.article-disclaimer {
  margin-top: 32px; padding: 14px; border-radius: 12px;
  background: var(--bg-soft);
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
}

/* v1.5.11 Mark review free-form #1: pre-calibration volume reminder
   visible on every entry to screen-volume, so users with hearing loss
   know to turn their device volume up before requesting tones. */
.cal-volume-reminder {
  background: #fff8d6;
  border-left: 4px solid #c9a800;
  padding: 12px 14px;
  border-radius: 0 10px 10px 0;
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #2d2200;
}
.cal-volume-reminder strong { display: block; margin-bottom: 4px; color: #1a1300; }
.cal-louder-btn {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

/* v1.5.11 Mark review 10.1 fix: asymmetric per-ear HN block. Shown
   inline within the hero card when the two ears diverge by ≥15 dB.
   Subtle inset card on a slightly-darker tint so it reads as "extra
   detail" rather than a separate banner. */
.hn-asymmetric {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  text-align: center;
}
.hn-asymmetric-caption {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 240, 200, 0.95);
  margin-bottom: 8px;
}
.hn-asymmetric-grid {
  display: flex; justify-content: space-around;
  gap: 18px; margin-bottom: 8px;
}
.hn-asymmetric-col { flex: 1; }
.hn-asymmetric-label {
  font-size: 11px; opacity: 0.85;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.hn-asymmetric-value {
  font-size: 32px; font-weight: 700; line-height: 1.1;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}
.hn-asymmetric-note {
  font-size: 11.5px; opacity: 0.82; line-height: 1.4;
}

/* Age-cohort percentile pill (shown when profile.age is set) */
.hn-age-pct {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px; padding: 6px 14px; margin: 10px auto 0;
  font-size: 13px; font-weight: 500; opacity: 0.92; max-width: 320px;
}
.hn-age-pct-icon { font-size: 14px; }
.hn-age-pct-text { line-height: 1.3; }

/* v1.5.11 Mark review 3.1 + 9.1 fix: Mark reported the Results screen
   shrinks to a small box in the upper-left corner specifically for
   Profound results. Root cause was a horizontal overflow somewhere in the
   Profound-specific subtree pushing documentElement.scrollWidth past the
   viewport, triggering iOS auto-shrink. Defensive guardrails: lock the
   screen container to 100% width with overflow-x hidden, and lock every
   direct content block to 100% width / min-width 0 so no flex/grid child
   can blow out its parent. The audiogram canvas (which had the same bug
   shape in 1.5.8 → 1.5.9) gets explicit width:100%. */
#screen-results { max-width: 100vw; overflow-x: hidden; }
#screen-results .screen-inner > *,
#screen-results .recommendations-block,
#screen-results .hhie-comparison,
#screen-results .result-actions { max-width: 100%; min-width: 0; box-sizing: border-box; }
#screen-results .call-a-pro-card,
#screen-results .result-card,
#screen-results .insight-card,
#screen-results .amplify-card,
#screen-results .audiogram-wrap,
#screen-results .reminder-card,
#screen-results .points-earned,
#screen-results .simulator-prompt { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
#audiogram { max-width: 100%; width: 100%; display: block; }

/* v1.5.10 Mark review final-page #1: Call-a-Pro card on the Results screen
   for Severe / Profound results. Slate-teal gradient draws the eye without
   reading as a danger banner (the result-card already wears .danger). */
.call-a-pro-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 16px 0 20px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1A4F5A 0%, #0E2A30 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.cap-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(91,192,204,0.18);
  display: flex; align-items: center; justify-content: center;
}
.cap-content { flex: 1; min-width: 0; }
.cap-title { font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.cap-sub { font-size: 13.5px; color: rgba(255,255,255,0.85); line-height: 1.45; margin-bottom: 12px; }
.cap-cta {
  /* Override .btn-primary's brand-teal — on a slate-teal card it disappears.
     Bright accent reads as the primary action against the dark gradient. */
  background: #5BC0CC;
  color: #0E2A30;
  font-weight: 700;
}

/* Call-a-Pro screen */
.cap-banner-coming-soon {
  display: flex; gap: 12px;
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: rgba(91,192,204,0.10);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 12px 12px 0;
}
.cap-banner-icon { font-size: 22px; flex-shrink: 0; }
.cap-banner-body { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.cap-banner-body strong { display: block; color: var(--brand-primary-dark, #1A4F5A); margin-bottom: 4px; }

.cap-form { display: flex; flex-direction: column; gap: 4px; }
.cap-form .cap-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 12px; margin-bottom: 4px;
}
.cap-form .cap-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1.5px solid var(--border, #d4dde0);
  border-radius: 10px;
  background: var(--card, #fff);
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
/* WS4 a11y area 4: outline suppressed only for non-keyboard focus. */
.cap-form .cap-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(46,125,140,0.15);
}
.cap-form .cap-input:focus:not(:focus-visible) { outline: none; }
.cap-form #btn-cap-submit { margin-top: 22px; }
.cap-otc-number {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}
.cap-otc-number a { color: var(--brand-primary-dark, #1A4F5A); font-weight: 700; text-decoration: underline; }
.cap-otc-hours { font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.02em; }

.cap-confirm {
  text-align: center;
  padding: 28px 16px;
  background: var(--bg-soft);
  border-radius: 16px;
  margin-top: 18px;
}
.cap-confirm-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 28px; font-weight: 800;
  margin-bottom: 12px;
}
.cap-confirm-title { font-weight: 700; font-size: 19px; margin-bottom: 6px; }
.cap-confirm-body { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin-bottom: 18px; }

/* ===== Buyer focus group R1 additions ===== */

/* FIX #1: Clinical trust bar on home screen */
.clinical-trust-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft, #f7f9fc);
  border: 1.5px solid var(--brand-primary, #2E7D8C);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 0 16px;
  text-decoration: none; color: var(--text-primary, #1a1a1a);
  font-size: 13.5px; cursor: pointer; width: 100%; text-align: left;
  transition: background 0.15s;
}
.clinical-trust-bar:active { background: #e8f4f5; }
.ctb-badge {
  background: var(--brand-primary, #2E7D8C); color: #fff;
  border-radius: 5px; padding: 3px 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  flex-shrink: 0;
}
.ctb-text { flex: 1; line-height: 1.35; }
.ctb-chevron { color: var(--text-muted, #718096); font-size: 18px; flex-shrink: 0; }

/* FIX #6: Privacy trust bar on home screen */
.privacy-trust-bar {
  text-align: center; font-size: 12.5px;
  color: var(--text-muted, #718096);
  margin: 4px 0 10px; padding: 0 8px;
  line-height: 1.4;
}

/* FIX #15: Phone number contact row on home screen */
.home-contact-row {
  text-align: center; margin: 6px 0 14px;
}
.home-contact-link {
  display: inline-block;
  font-size: 13px; color: var(--brand-primary, #2E7D8C);
  text-decoration: none; font-weight: 500;
}
.home-contact-link:active { opacity: 0.7; }

/* FIX #1: Advisory card in About screen */
.advisory-card {
  background: var(--bg-soft, #f7f9fc);
  border-left: 4px solid var(--brand-primary, #2E7D8C);
  border-radius: 0 10px 10px 0;
  padding: 14px 16px; margin: 10px 0 14px;
}
.advisory-name {
  font-size: 17px; font-weight: 700;
  color: var(--brand-primary, #2E7D8C);
  margin-bottom: 2px;
}
.advisory-title {
  font-size: 12.5px; font-weight: 500;
  color: var(--text-muted, #718096);
  margin-bottom: 8px; letter-spacing: 0.02em;
}
.advisory-bio {
  font-size: 13.5px; line-height: 1.5;
  color: var(--text-primary, #1a1a1a);
  margin: 0;
}

/* FIX #15: Mild/moderate results contact row */
.results-mild-contact {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px;
  background: #f0f9fa; border: 1px solid #b2dce1;
  border-radius: 10px; padding: 10px 14px;
  margin: 12px 0;
  font-size: 13px;
}
.results-mild-contact.hidden { display: none; }
.rmc-text { color: var(--text-muted, #718096); }
.rmc-number {
  font-weight: 700; color: var(--brand-primary, #2E7D8C);
  text-decoration: none;
}
.rmc-hours { font-size: 12px; color: var(--text-muted, #718096); }

/* FIX #3: Training cancel policy row */
.training-price-policy {
  font-size: 12px; color: var(--text-muted, #718096);
  margin-top: 4px; line-height: 1.4;
}

/* R2 fix #2: Trend sparkline slot on home number card */
.number-card-trend {
  min-height: 22px; display: flex; align-items: center;
  justify-content: center; margin: 4px 0 2px;
}

/* R2 fix #3: Results explainer (plain-language "What does this mean?") */
.results-explainer {
  background: var(--bg-soft, #f7f9fc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; margin: 12px 0; overflow: hidden;
}
.results-explainer-toggle {
  cursor: pointer; padding: 12px 16px;
  font-size: 14px; font-weight: 600;
  color: var(--brand-primary, #2E7D8C);
  list-style: none; user-select: none;
  display: flex; align-items: center; gap: 6px;
}
.results-explainer-toggle::before {
  content: "?"; display: inline-flex; align-items: center;
  justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--brand-primary, #2E7D8C);
  color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.results-explainer-body {
  padding: 0 16px 14px; font-size: 13.5px; line-height: 1.55;
  color: var(--text-primary, #1a1a1a);
}
.results-explainer-body p { margin: 0 0 10px; }
.results-explainer-body p:last-child { margin-bottom: 0; }

/* R2 fix #6: Phone link inside call-a-pro-card (severe/profound) */
.cap-phone {
  display: block; margin-top: 10px;
  font-size: 13px; color: var(--brand-primary, #2E7D8C);
  text-decoration: none; font-weight: 500;
  opacity: 0.9;
}
.cap-phone:active { opacity: 0.7; }

/* R3 fix #2: "What's next?" device recommendation card on results screen */
.whats-next-card {
  background: var(--bg-soft, #f0f7f9); border: 1.5px solid var(--brand-primary, #2E7D8C);
  border-radius: 12px; padding: 16px; margin: 12px 0;
}
.wnc-header {
  font-size: 15px; font-weight: 700; color: var(--brand-primary, #2E7D8C);
  margin-bottom: 8px;
}
.wnc-p { font-size: 13.5px; color: var(--text-primary, #1a1a1a); margin: 0 0 12px; line-height: 1.5; }
.wnc-devices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.wnc-device {
  background: #fff; border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; padding: 10px 12px; cursor: pointer;
  transition: background 0.15s;
}
.wnc-device:active { background: var(--bg-soft, #f0f7f9); }
.wnc-device-name { font-size: 14px; font-weight: 600; color: var(--text-primary, #1a1a1a); }
.wnc-device-meta { font-size: 12.5px; color: var(--text-secondary, #64748b); margin-top: 2px; }
.wnc-phone { font-size: 12.5px; color: var(--text-secondary, #64748b); margin: 0; line-height: 1.5; }
.wnc-tel { color: var(--brand-primary, #2E7D8C); text-decoration: none; font-weight: 600; }
.wnc-guide-btn {
  background: none; border: 1.5px solid var(--brand-primary, #2E7D8C);
  color: var(--brand-primary, #2E7D8C); border-radius: 8px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; margin-top: 4px;
}

/* R3 fix #1: Settings gamification activity panel */
.settings-gamif-panel {
  margin: 0 16px 4px; padding: 12px 14px;
  background: var(--bg-soft, #f7f9fc); border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
}
.sgp-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.sgp-row + .sgp-row { border-top: 1px solid var(--border, #e2e8f0); }
.sgp-label { font-size: 13px; color: var(--text-secondary, #64748b); }
.sgp-value { font-size: 14px; color: var(--text-primary, #1a1a1a); }

/* R3 fix #4: caregiver-mode first-launch prompt inside welcome card */
.fl-who { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border, #e2e8f0); }
.fl-who-q {
  font-size: 13px; font-weight: 600; color: var(--text-secondary, #64748b);
  margin: 0 0 10px; text-align: center;
}
.fl-who-btn { display: block; width: 100%; margin-bottom: 8px; font-size: 14px; }
.fl-who-btn:last-child { margin-bottom: 0; }

/* ===========================================================================
   WS3 contract — Test-screen ear-wave animation
   The Hearing Test nav SVG reuses groups .tcc-wave-left + .tcc-wave-right.
   When the test-screen graphic container carries .testing-left, only the
   left wave pulses; .testing-right pulses only the right wave; no class =
   both render static (no animation on the test screen graphic).

   Uses transform + opacity only (compositor-layer properties, 60 fps on iOS).
   Wrapped in prefers-reduced-motion: no-preference so users who opted into
   Reduced Motion in iOS Accessibility see the static graphic instead.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Keyframe: gentle opacity + scale pulse, ~1.2 s, ease-in-out infinite */
  @keyframes ear-wave-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.72); }
    50%       { opacity: 1;    transform: scale(1.05); }
  }

  /* Quiet (non-animated) state for a wave that is NOT the active side */
  @keyframes ear-wave-quiet {
    /* Static — no motion, reduced presence */
    0%, 100% { opacity: 0.18; transform: scale(0.65); }
  }

  /* ---- .testing-left: left wave pulses, right is quiet ---- */
  .testing-left .tcc-wave-left {
    transform-box: fill-box;
    transform-origin: 100% 50%;
    animation: ear-wave-pulse 1.2s ease-in-out infinite;
  }
  .testing-left .tcc-wave-right {
    transform-box: fill-box;
    transform-origin: 0% 50%;
    /* hide / quiet the inactive side */
    opacity: 0.18;
    transform: scale(0.65);
    animation: none;
  }

  /* ---- .testing-right: right wave pulses, left is quiet ---- */
  .testing-right .tcc-wave-right {
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: ear-wave-pulse 1.2s ease-in-out infinite;
  }
  .testing-right .tcc-wave-left {
    transform-box: fill-box;
    transform-origin: 100% 50%;
    opacity: 0.18;
    transform: scale(0.65);
    animation: none;
  }

  /* ---- No class: both waves static (no animation on test-screen graphic) ---- */
  /* Intentionally left with no animation rule so the default SVG render applies. */

}

/* ==========================================================================
   PREMIUM VIDEO PLAYER  (vp-*)
   Used by window.VideoPlayer. Added 2026-06-26.
   Brand vars: --brand-primary, --brand-primary-dark, --brand-accent,
               --card, --card-shadow, --text, --text-muted, --border,
               --safe-bot.
   ========================================================================== */

/* Full-screen dialog overlay */
.vp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.80);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
             env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* Rounded brand container */
.vp-player,
.vp-root {
    position: relative;
    width: 92%;
    max-width: 520px;
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), var(--card-shadow);
    border: 1px solid var(--border);
}

/* Video element fills the container */
.vp-player video,
.vp-root video {
    display: block;
    width: 100%;
    height: auto;
}

/* Bottom control bar — overlays the video */
.vp-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0)) 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.0) 100%);
}

/* Base circular tap-target button */
.vp-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--brand-primary);
    color: #ffffff;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.vp-btn:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
}

.vp-play-btn,
.vp-mute-btn {
    background: var(--brand-primary);
    color: #ffffff;
}

.vp-close-btn {
    background: var(--brand-primary-dark);
    color: #ffffff;
    margin-left: auto;
}

/* Progress bar wrapper */
.vp-progress-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Range input — slim brand-teal track */
.vp-progress-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.30);
    cursor: pointer;
    accent-color: var(--brand-primary);
    outline: none;
}

.vp-progress-range:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}

.vp-progress-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand-glow);
    border: 2px solid #ffffff;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.vp-progress-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand-glow);
    border: 2px solid #ffffff;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

/* Filled portion bar (pseudo-progress visual, if JS sets width) */
.vp-progress-fill {
    height: 4px;
    border-radius: 2px;
    background: var(--brand-primary);
    pointer-events: none;
}

/* Timestamp text */
.vp-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Error state */
.vp-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    font-size: 15px;
    color: var(--text-muted);
    text-align: center;
    background: var(--card);
}

/* Visibility helper */
.vp-hidden {
    display: none !important;
}

/* No-motion override: strip transitions/animations when set programmatically */
.vp-no-motion,
.vp-no-motion * {
    animation: none !important;
    transition: none !important;
}

/* Transitions — only when user has not requested reduced motion */
@media (prefers-reduced-motion: no-preference) {
    .vp-overlay {
        transition: opacity 200ms ease;
    }

    .vp-btn {
        transition: background 150ms ease, transform 100ms ease;
    }

    .vp-btn:active {
        transform: scale(0.92);
    }

    .vp-progress-range::-webkit-slider-thumb {
        transition: transform 100ms ease;
    }

    .vp-progress-range:hover::-webkit-slider-thumb {
        transform: scale(1.3);
    }
}

/* ==========================================================================
   NATIVE UI  (nui-*)
   Used by window.NativeUI. Added 2026-06-26.
   Brand vars: --brand-primary, --brand-primary-dark, --brand-accent,
               --card, --card-shadow, --text, --text-soft, --border,
               --danger, --safe-bot.
   ========================================================================== */

/* --- Toast ---------------------------------------------------------------- */

.nui-toast-container {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 8500;
    pointer-events: none;
    width: max-content;
    max-width: 90vw;
}

.nui-toast {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    max-width: 90vw;
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), var(--card-shadow);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    border-left: 4px solid var(--border);
    opacity: 0;
    transform: translateY(12px);
}

/* Variant accent borders */
.nui-toast[data-type="success"] {
    border-left-color: #2d7a22;
}

.nui-toast[data-type="error"] {
    border-left-color: var(--danger);
}

.nui-toast[data-type="info"] {
    border-left-color: var(--brand-primary);
}

/* Visibility states */
.nui-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.nui-toast--hiding {
    opacity: 0;
    transform: translateY(8px);
}

@media (prefers-reduced-motion: no-preference) {
    .nui-toast {
        transition: opacity 220ms ease, transform 220ms ease;
    }

    .nui-toast--hiding {
        transition: opacity 180ms ease, transform 180ms ease;
    }
}

/* --- Bottom Sheet --------------------------------------------------------- */

.nui-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 8000;
    opacity: 0;
    pointer-events: none;
}

.nui-sheet-backdrop--open {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .nui-sheet-backdrop {
        transition: opacity 240ms ease;
    }
}

.nui-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8100;
    background: var(--card);
    border-radius: 20px 20px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    pointer-events: none;
}

.nui-sheet--open,
.nui-sheet--visible {
    transform: translateY(0);
    pointer-events: auto;
}

.nui-sheet--closing {
    transform: translateY(100%);
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .nui-sheet {
        transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
    }
}

/* Sheet header */
.nui-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.nui-sheet-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    flex: 1 1 auto;
}

.nui-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 20px;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.nui-sheet-close:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* Sheet scrollable body */
.nui-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
}

/* Sheet action footer */
.nui-sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0)) 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.nui-sheet-action,
.nui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 12px;
    border: none;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

.nui-sheet-action:focus-visible,
.nui-btn:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}

.nui-sheet-action[data-secondary],
.nui-btn[data-secondary] {
    background: transparent;
    color: var(--brand-primary);
    border: 1.5px solid var(--brand-primary);
}

@media (prefers-reduced-motion: no-preference) {
    .nui-sheet-action,
    .nui-btn {
        transition: background 150ms ease, transform 100ms ease;
    }

    .nui-sheet-action:active,
    .nui-btn:active {
        transform: scale(0.97);
    }

    .nui-sheet-close {
        transition: background 150ms ease;
    }

    .nui-sheet-close:hover {
        background: var(--bg-soft);
    }
}

/* End of vp-* / nui-* additions */
/* v1.5.20 Mark 1.5.18 item 5.3: checklist who-panel mirrors fl-who visually */
.checklist-who-panel {
  margin: 10px 0 14px;
  padding: 12px 0 12px;
  border-top: 1px solid var(--border, #e2e8f0);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.cwp-q {
  font-size: 13px; font-weight: 600; color: var(--text-secondary, #64748b);
  margin: 0 0 10px; text-align: center;
}
.cwp-btns { display: flex; flex-direction: column; gap: 8px; }
.cwp-btn { display: block; width: 100%; font-size: 14px; }

/* ==========================================================================
   v1.5.20: Hear-button head graphic sizing + three-state ear-aware waves.
   Refined per Folio (folio/button-svg-v1). #hear-btn carries .active-left /
   .active-right (toggled by audiotest.js as each ear is tested). The SVG has
   wave-left / wave-right groups, each with three arcs (.wi inner, .wm mid,
   .wo outer). The tab-center pill is untouched (its own tcc-wave rules above).
   ========================================================================== */

/* Make the head-with-soundwaves graphic visible on the 240px button
   (previously #test-ear-graphic had no sizing, so the mark did not render). */
#test-ear-graphic { line-height: 0; margin-bottom: 10px; }
#test-ear-graphic svg { width: 104px; height: 104px; display: block; color: #FFFFFF; }

/* Default: faint ghost waves on both sides. */
#hear-btn .wave-left,
#hear-btn .wave-right {
    opacity: 0.13;
    transition: opacity 0.25s ease;
}

/* Left ear active. */
#hear-btn.active-left .wave-left   { opacity: 1; }
#hear-btn.active-left .wave-right  { opacity: 0; }

/* Right ear active. */
#hear-btn.active-right .wave-right { opacity: 1; }
#hear-btn.active-right .wave-left  { opacity: 0; }

/* Staggered outward pulse: inner -> mid -> outer. */
@keyframes ihear-wave-pulse {
    0%   { opacity: 0;    }
    14%  { opacity: 0.95; }
    50%  { opacity: 0.55; }
    80%  { opacity: 0.07; }
    100% { opacity: 0;    }
}
#hear-btn.active-left  .wave-left  .wi,
#hear-btn.active-right .wave-right .wi {
    animation: ihear-wave-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
#hear-btn.active-left  .wave-left  .wm,
#hear-btn.active-right .wave-right .wm {
    animation: ihear-wave-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) 0.30s infinite;
}
#hear-btn.active-left  .wave-left  .wo,
#hear-btn.active-right .wave-right .wo {
    animation: ihear-wave-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) 0.60s infinite;
}

@media (prefers-reduced-motion: reduce) {
    @keyframes ihear-wave-quiet {
        0%, 100% { opacity: 0.50; }
        50%      { opacity: 1.00; }
    }
    #hear-btn.active-left  .wave-left  .wi,
    #hear-btn.active-left  .wave-left  .wm,
    #hear-btn.active-left  .wave-left  .wo,
    #hear-btn.active-right .wave-right .wi,
    #hear-btn.active-right .wave-right .wm,
    #hear-btn.active-right .wave-right .wo {
        animation: ihear-wave-quiet 2.8s ease-in-out infinite;
    }
    /* General reduced-motion (kept from the Tranche-2 pass). */
    .screen.active { animation: none; }
    .hear-btn { transition: transform 1ms linear, box-shadow 1ms linear; }
    .progress-fill { transition: width 1ms linear; }
}

/* ==========================================================================
   v1.5.20: Icon system base (Folio folio/icon-system-v1). Emoji replaced by
   inline SVG (stroke=currentColor, theme-adaptive) and illustration <img>.
   Container classes above are flex-centered; svg/img sized here.
   ========================================================================== */
.btn-icon, .inline-icon, .back-icon { display: inline-flex; vertical-align: middle; flex-shrink: 0; }
svg.btn-icon, svg.inline-icon { width: 1em; height: 1em; }
.back-icon svg { width: 18px; height: 18px; }
.sr-icon svg { width: 22px; height: 22px; }
.sr-chevron svg { width: 18px; height: 18px; }
.ctc-icon svg { width: 28px; height: 28px; }
.modal-icon svg { width: 44px; height: 44px; }
.eq-icon img { width: 84px; height: 84px; object-fit: contain; }
.eq-icon svg { width: 64px; height: 44px; object-fit: contain; }
.amplify-icon svg, .reminder-icon svg, .cap-banner-icon svg, .pb-icon svg { width: 30px; height: 30px; }
.intent-glyph svg { width: 22px; height: 22px; vertical-align: middle; }
.coverage-card-head svg.inline-icon { width: 18px; height: 18px; margin-right: 6px; }

/* v1.5.20: signature motif on the About / Heritage block (Folio) */
.about-motif { display: flex; justify-content: center; margin: 6px 0 14px; }
.about-motif img { width: 96px; height: 96px; opacity: 0.95; }

/* ==========================================================================
   v1.5.20: Content-sweep "?" info chips + glossary deep-link popover.
   New component built on the brand tokens (radius/shadow/brand color).
   ========================================================================== */
.info-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; min-width: 20px; padding: 0; margin-left: 6px;
  border: 1.5px solid currentColor; border-radius: var(--radius-pill, 100px);
  background: transparent; color: inherit; opacity: 0.75;
  font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer;
  vertical-align: middle; font-family: inherit; flex-shrink: 0;
  transition: opacity var(--duration-fast, 200ms) var(--ease-standard, ease);
}
.info-chip:hover, .info-chip:focus-visible { opacity: 1; }
.hn-label .info-chip { width: 18px; height: 18px; min-width: 18px; font-size: 11px; }

.info-popover {
  position: fixed; z-index: 1000; max-width: 300px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.18));
  padding: 14px 16px; text-align: left;
  animation: info-pop-in var(--duration-fast, 180ms) var(--ease-out, ease);
}
@keyframes info-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.info-pop-term { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.info-pop-def { font-size: 13px; line-height: 1.5; color: var(--text-soft); margin-bottom: 10px; }
.info-pop-more {
  background: transparent; border: none; padding: 4px 0; cursor: pointer;
  color: var(--brand-primary); font-weight: 600; font-size: 13px; font-family: inherit;
}
.info-pop-more:hover, .info-pop-more:focus-visible { text-decoration: underline; }

.gloss-item.gloss-hit { animation: gloss-hit-pulse 2.4s var(--ease-standard, ease); border-radius: 8px; }
@keyframes gloss-hit-pulse { 0%, 100% { background: transparent; } 12%, 45% { background: rgba(91,192,204,0.18); } }
@media (prefers-reduced-motion: reduce) {
  .info-popover { animation: none; }
  .gloss-item.gloss-hit { animation: none; background: rgba(91,192,204,0.14); }
}