/* ── Font size scaling ─────────────────────────────────────────────── */ html[data-fontsize="large"] { font-size: 112%; } html[data-fontsize="xlarge"] { font-size: 125%; } /* ── Reduced motion ────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── High contrast – system preference ─────────────────────────────── */ @media (prefers-contrast: more) { :root { --ink: #000000; --ink2: #000000; --ink3: #000000; --teal: #005f6b; --border: rgba(0,0,0,0.5); --light-bg: #ffffff; --paper: #ffffff; } } /* ── High contrast – manual toggle (.high-contrast on ) ───────── */ html.high-contrast { --ink: #000000; --ink2: #000000; --ink3: #000000; --teal: #005f6b; --border: rgba(0,0,0,0.5); --light-bg: #ffffff; --paper: #ffffff; } /* ── High contrast – Tailwind utility overrides ────────────────────── */ /* * Tailwind utility classes use hardcoded hex values, not CSS variables. * These rules override the most common classes in the analysis result card * and app UI so that html.high-contrast has an actual visual effect. * Scope: only under html.high-contrast to avoid affecting normal mode. */ /* Neutral text shades → pure black */ html.high-contrast .text-neutral-400, html.high-contrast .text-neutral-500, html.high-contrast .text-neutral-600, html.high-contrast .text-neutral-700, html.high-contrast .text-neutral-800 { color: #000000 !important; } /* Neutral backgrounds → white */ html.high-contrast .bg-white, html.high-contrast .bg-neutral-50, html.high-contrast .bg-neutral-100 { background-color: #ffffff !important; } /* Neutral borders → visible dark */ html.high-contrast .border-neutral-100, html.high-contrast .border-neutral-200 { border-color: rgba(0,0,0,0.4) !important; } /* Deadline chips – expired / urgent (red) */ html.high-contrast .bg-red-50, html.high-contrast .bg-red-100 { background-color: #fff0f0 !important; } html.high-contrast .text-red-700, html.high-contrast .text-red-800 { color: #7f0000 !important; } html.high-contrast .border-red-200 { border-color: #7f0000 !important; } /* Deadline chips – soon (orange) */ html.high-contrast .bg-orange-50 { background-color: #fff4e5 !important; } html.high-contrast .text-orange-700 { color: #7a3500 !important; } html.high-contrast .border-orange-200 { border-color: #7a3500 !important; } /* Deadline chips – future (green) */ html.high-contrast .bg-green-50 { background-color: #f0fff4 !important; } html.high-contrast .text-green-700 { color: #145214 !important; } html.high-contrast .border-green-200 { border-color: #145214 !important; } /* Result card disclaimer strip */ html.high-contrast .bg-bw-mint\/10 { background-color: #e6fff8 !important; } html.high-contrast .border-bw-primary\/20 { border-color: #005f6b !important; } /* bw-badge confidence labels (rendered by results.js) */ html.high-contrast .bw-badge-high { background-color: #145214 !important; color: #ffffff !important; } html.high-contrast .bw-badge-med { background-color: #7a3500 !important; color: #ffffff !important; } html.high-contrast .bw-badge-low { background-color: #444444 !important; color: #ffffff !important; } /* Tailwind-based system preference mirror */ @media (prefers-contrast: more) { .text-neutral-400, .text-neutral-500, .text-neutral-600, .text-neutral-700, .text-neutral-800 { color: #000000 !important; } .border-neutral-100, .border-neutral-200 { border-color: rgba(0,0,0,0.4) !important; } .bg-red-50, .bg-red-100 { background-color: #fff0f0 !important; } .text-red-700, .text-red-800 { color: #7f0000 !important; } .border-red-200 { border-color: #7f0000 !important; } .bg-orange-50 { background-color: #fff4e5 !important; } .text-orange-700 { color: #7a3500 !important; } .border-orange-200 { border-color: #7a3500 !important; } .bg-green-50 { background-color: #f0fff4 !important; } .text-green-700 { color: #145214 !important; } .border-green-200 { border-color: #145214 !important; } .bw-badge-high { background-color: #145214 !important; color: #ffffff !important; } .bw-badge-med { background-color: #7a3500 !important; color: #ffffff !important; } .bw-badge-low { background-color: #444444 !important; color: #ffffff !important; } } /* ── Accessibility toolbar ──────────────────────────────────────────── */ .a11y-btns { display: flex; align-items: center; gap: 4px; } .a11y-btn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; border: 1.5px solid var(--border, rgba(1,42,50,0.11)); border-radius: 7px; background: transparent; color: var(--ink2, #02454f); font-size: .78rem; font-weight: 600; font-family: 'Instrument Sans', system-ui, sans-serif; cursor: pointer; transition: border-color .15s, color .15s, background .15s; line-height: 1; } .a11y-btn:hover, .a11y-btn[aria-pressed="true"] { border-color: var(--teal, #028090); color: var(--teal, #028090); background: var(--teal-pale, #e0f4f6); } .a11y-contrast-btn svg { width: 16px; height: 16px; display: block; } /* ── Mobile Navigation ──────────────────────────────────────────────── */ /* Hamburger button – hidden on desktop, flex on mobile */ .nav-hamburger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1.5px solid var(--border, rgba(1,42,50,0.11)); border-radius: 9px; background: transparent; cursor: pointer; color: var(--deep, #012A32); flex-shrink: 0; transition: background .18s, border-color .18s; } .nav-hamburger:hover { background: var(--teal-pale, #e0f4f6); border-color: var(--teal, #028090); } .nav-hamburger svg { display: block; } /* Mobile drawer – inside