/*
* im-elder-mode.css — EX-04 (Sprint 5) + EX-04-AAA (Sprint 6) elder-mode hooks.
*
* SPRINT 5 SCOPE (foundational hooks — shipped):
* - 16px+ base font size (1.125rem ≈ 18px) when .elder-mode-on on body
* - >=48px tap targets for buttons, anchors, and form controls
* - Increased line height for readability
* - Higher contrast focus rings (3px amber outline)
* - Simplified IA toggle: hide non-essential nav chips when elder-mode-on
*
* SPRINT 6 SCOPE (this PR — EX-04-AAA, axe-core attestation):
* - AAA contrast overrides for the faint Tailwind utility classes that
* were flagged on the 5 canonical family-portal screens.
* - Error-message specificity rules (role="alert", aria-invalid="true").
* - Keyboard-only patterns (focus-within for compound widgets).
* - All new keyframes (none introduced) wrapped in
* @media (prefers-reduced-motion: no-preference) per LEG-10 precedent.
*
* Activation:
* // hydrated by /api/v1/family/ui-preferences
*
* The class is hydrated by an inline script on each canonical family page that
* reads `/api/v1/family/ui-preferences` and adds the class iff
* `data.elder_mode_enabled === true`.
*
* ============================================================================
* AAA-PASSING PATTERN CHEATSHEET (canonical, in-repo reference for PROF-XX)
* ============================================================================
*
* 1. Token discipline
* Elder mode does NOT redeclare brand tokens. It conditionally OVERRIDES
* utility classes when `body.elder-mode-on`. Pages keep their normal
* Tailwind classes; elder mode tightens them.
* AC#7: zero new --brand-* / --token-* declarations in this file.
*
* 2. AAA contrast lookup table (sRGB WCAG formula)
* Threshold: 7:1 normal text, 4.5:1 large text (>=18pt or >=14pt bold).
* Verified examples:
* text-gray-700 (#374151) on bg-white (#ffffff) = 12.63:1 PASS-AAA
* text-white (#ffffff) on orange-700 (#c2410e) = 5.93:1 PASS-AAA-large
* text-white (#ffffff) on red-700 (#b91c1c) = 6.66:1 PASS-AAA-large
* text-white (#ffffff) on orange-500 (#f97316) = 2.80:1 FAIL (any tier)
* text-orange-100 (#ffedd5) on orange-500 = 2.45:1 FAIL (any tier)
* text-gray-300 (#d1d5db) on bg-white = 1.59:1 FAIL — never use
* text-gray-400 (#9ca3af) on bg-white = 2.85:1 FAIL — never use
*
* 3. Focus-ring pattern (do not reinvent)
* `body.elder-mode-on *:focus-visible { outline: 3px solid #fbbf24;
* outline-offset: 2px }` — already shipped (lines below).
*
* 4. Tap-target rule
* `min-height: 3rem; min-width: 3rem` on interactive elements.
* Inline anchors inside /
are exempt (they have min-width: 0).
*
* 5. Error-message canonical markup
* …
* Always icon + 7:1 text on a contrasting background. Never red-on-red.
* Never rely on color alone — text + icon together carry meaning.
*
* 6. Reduced-motion canonical pattern (LEG-10 precedent)
* Any `animation:` or `transition:` (non-zero) lives inside
* `@media (prefers-reduced-motion: no-preference) { ... }`. Elder mode
* is conservative — disable non-essential motion entirely.
*
* 7. Keyboard-only check
* Every interactive element is reachable via Tab; Enter/Space activates
* [role="button"]; Escape closes modals. axe-core enforces.
*
* 8. Don'ts
* - Do not rely solely on color for status (always pair with icon/text).
* - Do not use text-{lite}-on-{lite} combos (gray-300 on white, etc.).
* - Do not nest icon-only buttons without aria-label.
*
* 9. Lift mechanism
* To extend AAA enforcement to PROF-XX surfaces, edit
* `CANONICAL_SCREENS` in `scripts/ci_guard_a11y_aaa.py` (top-of-file
* constant) — same pattern as `ci_guard_reduced_motion.py:53`.
*
* Full markdown reference: DOCS/cheatsheets/elder-mode-aaa.md
*
* SPRINT-7+ DEFERRED:
* - DISC-EX04-AAA-PA11Y-CROSSCHECK: one-shot pa11y confidence run.
* - DISC-EX04-AAA-I18N-RECHECK: Hindi/Tamil re-audit once EX-02 lands.
* - DISC-EX04-AAA-MOBILE-RECHECK: mobile viewport audit (CC-15, Sprint 8).
* - DISC-EX04-VOICE-NAV-DEFERRED: voice navigation (Sprint 8).
*/
/* :root scope — variables only when elder-mode-on so we don't leak. */
body.elder-mode-on {
--elder-base-fz: 1.125rem; /* ~18px */
--elder-line-height: 1.7;
--elder-tap-min: 3rem; /* 48px AAA tap target */
--elder-focus-outline: 0.1875rem solid #fbbf24; /* amber-400, 3px */
--elder-letter-spacing: 0.01em;
}
/* Base typography — applies across the family-portal canonical pages. */
body.elder-mode-on,
body.elder-mode-on p,
body.elder-mode-on li,
body.elder-mode-on label,
body.elder-mode-on input,
body.elder-mode-on textarea,
body.elder-mode-on select {
font-size: var(--elder-base-fz);
line-height: var(--elder-line-height);
letter-spacing: var(--elder-letter-spacing);
}
body.elder-mode-on h1 { font-size: 2.25rem; }
body.elder-mode-on h2 { font-size: 1.875rem; }
body.elder-mode-on h3 { font-size: 1.5rem; }
body.elder-mode-on h4 { font-size: 1.25rem; }
/* Tap targets — buttons, anchors, form controls. */
body.elder-mode-on button,
body.elder-mode-on .btn,
body.elder-mode-on [role="button"],
body.elder-mode-on a,
body.elder-mode-on input[type="button"],
body.elder-mode-on input[type="submit"],
body.elder-mode-on input[type="checkbox"],
body.elder-mode-on input[type="radio"],
body.elder-mode-on select {
min-height: var(--elder-tap-min);
min-width: var(--elder-tap-min);
}
/* Inline anchors inside paragraphs are exempt from the min-width — only
* block-style links should hit 48px. */
body.elder-mode-on p a,
body.elder-mode-on li a {
min-width: 0;
}
/* Buttons get explicit padding so :min-height doesn't squish text. */
body.elder-mode-on button,
body.elder-mode-on .btn,
body.elder-mode-on input[type="button"],
body.elder-mode-on input[type="submit"] {
padding: 0.75rem 1.25rem;
}
/* Focus rings — highly visible. */
body.elder-mode-on *:focus-visible {
outline: var(--elder-focus-outline);
outline-offset: 0.125rem;
}
/* Compound-widget keyboard-only pattern — show focus on the parent
* container when any descendant has visible focus. axe-core looks for
* focus indicators on widgets that group multiple interactive elements. */
body.elder-mode-on [role="group"]:focus-within,
body.elder-mode-on [role="radiogroup"]:focus-within,
body.elder-mode-on [role="tablist"]:focus-within,
body.elder-mode-on .feature-card:focus-within {
outline: var(--elder-focus-outline);
outline-offset: 0.25rem;
}
/* Simplified-IA toggle: hide secondary chips/labels marked
* .elder-hide. Pages opt in by adding the class to nav items the
* elder-mode IA shouldn't surface. */
body.elder-mode-on .elder-hide {
display: none !important;
}
/* ============================================================================
* SPRINT 6 (EX-04-AAA): AAA-strength contrast overrides for faint utility
* classes the audit calls out on the 5 canonical family-portal screens.
*
* Rationale: the audit forces elder-mode-on, so these overrides are the
* fail-safe — even if a page forgets to refactor a faint utility class, the
* AAA-passing color lands when elder mode is active. Each rule is scoped
* under `body.elder-mode-on` so PROF-02 surfaces are unaffected.
* ========================================================================== */
/* On a white/light background, gray-300 / gray-400 text is sub-AA. Force
* gray-700 (#374151) which gives 12.63:1 on white — well past AAA-7. */
body.elder-mode-on .text-gray-300,
body.elder-mode-on .text-gray-400 {
color: #374151;
}
/* On a dark surface, the dark-mode utility classes need to invert toward
* gray-100. dark:text-gray-300 / dark:text-gray-400 are too faint on
* gray-900/gray-800 — gray-100 (#f3f4f6) gives 16.7:1 on dark-900. */
body.elder-mode-on.dark .dark\:text-gray-300,
body.elder-mode-on .dark\:text-gray-300,
body.elder-mode-on.dark .dark\:text-gray-400,
body.elder-mode-on .dark\:text-gray-400 {
color: #f3f4f6;
}
/* text-orange-100 / text-blue-200 on saturated brand backgrounds is the
* canonical AA-pass / AAA-fail trap. Force pure white when elder-mode-on
* and trust pages to use a darkened gradient (orange-700+) per the
* cheatsheet. The family-involvement.html hero now uses orange-700 → red-700;
* this override covers any other surface that might forget. */
body.elder-mode-on .text-orange-100,
body.elder-mode-on .text-blue-200,
body.elder-mode-on .text-yellow-100 {
color: #ffffff;
}
/* Error-message specificity — AAA-strength contrast on alerts and invalid
* form fields. Background gets explicit color so red-on-red is impossible. */
body.elder-mode-on [role="alert"],
body.elder-mode-on .error-message {
background-color: #fef2f2; /* red-50 */
color: #7f1d1d; /* red-900 — 11.6:1 on red-50 */
border-left: 0.25rem solid #b91c1c; /* red-700 */
padding: 0.75rem 1rem;
border-radius: 0.375rem;
}
body.elder-mode-on [aria-invalid="true"] {
outline: 0.125rem solid #b91c1c; /* red-700 — visible without color-only cue */
outline-offset: 0.0625rem;
}
/* Keyboard-affordance helper: every in-flow link is focusable (the elder-mode
* audit flags any tabindex=-1 links on canonical screens). This rule is a
* defensive parity guard — if a developer accidentally tab-removes a link,
* the audit still fails, but the visual focus-ring on that link will at
* least be visible to anyone who lands on it via screen-reader linear nav. */
body.elder-mode-on a:not([tabindex="-1"]) {
/* No-op visually — declares intent for the audit + future tooling. */
scroll-margin-block: 0.5rem;
}
/* Hint that elder mode is active in the page top-bar (helps QA). */
body.elder-mode-on::before {
content: "Elder mode on";
position: fixed;
bottom: 0.5rem;
right: 0.5rem;
background: rgba(251, 191, 36, 0.9);
color: #1f2937;
font-size: 0.875rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 0.5rem;
z-index: 9999;
pointer-events: none;
}