/* ============================================================================ Accessibility layer — Entry & Splat whitelists Loaded AFTER whitelist-styles.css so these rules win without !important. Phase 1: unconditional repairs. Nothing here is opt-in — it applies to every applicant. Preference-driven theming arrives in Phase 2 under [data-a11y-*]. This file must never change question text, order, or requirements. ============================================================================ */ /* ============================================================================ PHASE 2 — preference-driven presentation. Everything below reacts to data-a11y-* attributes stamped on . Those are set two ways that must agree: an inline bootstrap in each page's (before the stylesheets, to avoid a flash) and the preference panel in a11y.js. Defaults reproduce the current look exactly, so a page with no stored preferences is visually unchanged. ============================================================================ */ /* --- Self-hosted fonts. woff2 + OFL license live in assets/fonts/. ---------- */ @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2'); } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2'); } @font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2'); } @font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2'); } /* --- Font tokens. The whitelist stylesheet now reads these (var fallbacks keep it rendering if this file is ever missing). Default = the original fonts, so nothing changes until the applicant opts in. --------------------------- */ :root { --wl-font-heading: 'Cinzel', serif; --wl-font-body: 'Crimson Text', Georgia, serif; } /* "Readable" — Atkinson Hyperlegible, chosen for character disambiguation. The system fallbacks (Verdana/Tahoma) are themselves highly legible, so the mode still helps even before the webfont loads. */ html[data-a11y-font="readable"] { --wl-font-heading: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif; --wl-font-body: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif; } /* "Dyslexia-friendly" — OpenDyslexic, with Comic Sans MS as the fallback (a genuine dyslexia aid that ships on Windows and macOS), so the mode degrades to something useful rather than a generic sans if the webfont is unavailable. */ html[data-a11y-font="dyslexic"] { --wl-font-heading: 'OpenDyslexic', 'Comic Sans MS', 'Comic Sans', sans-serif; --wl-font-body: 'OpenDyslexic', 'Comic Sans MS', 'Comic Sans', sans-serif; } /* wod-theme.css:1192 forces `font-family: 'Crimson Text', serif !important` on every input/textarea/select. The answer boxes are the single most important reading+writing surface for a dyslexic applicant, so the token has to win there too — hence !important, pointed at the same token. */ .wl-page input, .wl-page textarea, .wl-page select { font-family: var(--wl-font-body) !important; } /* --- Text size. Scales the root, so every rem-based size on the page grows together. Layout is mostly px padding, so it holds. --------------------- */ html[data-a11y-size="112"] { font-size: 112.5%; } html[data-a11y-size="125"] { font-size: 125%; } html[data-a11y-size="140"] { font-size: 140%; } html[data-a11y-size="160"] { font-size: 160%; } /* --- Line height, letter/word spacing, reading measure. Scoped to the reading surfaces so we don't disturb buttons, badges, or the nav. --------------- */ html[data-a11y-leading="relaxed"] .wl-question-text, html[data-a11y-leading="relaxed"] .wl-question-sub, html[data-a11y-leading="relaxed"] .wl-question textarea, html[data-a11y-leading="relaxed"] .wl-checkbox-label, html[data-a11y-leading="relaxed"] .wl-section-note, html[data-a11y-leading="relaxed"] .wl-splat-card-desc { line-height: 1.85 !important; } html[data-a11y-leading="loose"] .wl-question-text, html[data-a11y-leading="loose"] .wl-question-sub, html[data-a11y-leading="loose"] .wl-question textarea, html[data-a11y-leading="loose"] .wl-checkbox-label, html[data-a11y-leading="loose"] .wl-section-note, html[data-a11y-leading="loose"] .wl-splat-card-desc { line-height: 2.2 !important; } html[data-a11y-spacing="slight"] .wl-question-text, html[data-a11y-spacing="slight"] .wl-question-sub, html[data-a11y-spacing="slight"] .wl-question textarea, html[data-a11y-spacing="slight"] .wl-checkbox-label, html[data-a11y-spacing="slight"] .wl-section-note { letter-spacing: 0.03em !important; word-spacing: 0.08em !important; } html[data-a11y-spacing="wide"] .wl-question-text, html[data-a11y-spacing="wide"] .wl-question-sub, html[data-a11y-spacing="wide"] .wl-question textarea, html[data-a11y-spacing="wide"] .wl-checkbox-label, html[data-a11y-spacing="wide"] .wl-section-note { letter-spacing: 0.07em !important; word-spacing: 0.16em !important; } /* Cap the reading measure of question prose (not the textarea — a narrower input box makes long answers feel worse). */ html[data-a11y-measure="narrow"] .wl-question-text, html[data-a11y-measure="narrow"] .wl-question-sub, html[data-a11y-measure="narrow"] .wl-section-note { max-width: 66ch; } /* ---------------------------------------------------------------------------- Skip link — first focusable element on the page. ---------------------------------------------------------------------------- */ .wl-skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 12px 20px; background: #8B5CF6; color: #fff; font-family: 'Cinzel', serif; font-size: 0.9rem; text-decoration: none; border-radius: 0 0 6px 0; } .wl-skip-link:focus { left: 0; } /* ---------------------------------------------------------------------------- Visible focus. Two layers remove the native ring: whitelist-styles.css:439 (outline:none on textareas) and, the real culprit, wod-theme.css:1198 which sets `input:focus, textarea:focus, select:focus { outline: none !important }` globally. Because that override is !important, the restored ring has to be !important too — specificity alone can't beat it. :focus-visible keeps the ring off for mouse users. ---------------------------------------------------------------------------- */ .wl-page a:focus-visible, .wl-page button:focus-visible, .wl-page [role="button"]:focus-visible, .wl-page [role="radio"]:focus-visible, .wl-page [role="checkbox"]:focus-visible, .wl-page select:focus-visible, .wl-page input:focus-visible, .wl-page textarea:focus-visible, .wl-question textarea:focus-visible { outline: 3px solid #A78BFA !important; outline-offset: 2px !important; border-radius: 4px; } /* The cards are dark; an inner shadow lifts the ring off the background. */ .wl-splat-card:focus-visible, .wl-subtype-card:focus-visible, .wl-choice-card:focus-visible { outline: 3px solid #A78BFA; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.25); } /* Fallback for browsers without :focus-visible support. */ @supports not selector(:focus-visible) { .wl-page a:focus, .wl-page button:focus, .wl-page [role="button"]:focus, .wl-page [role="radio"]:focus, .wl-page [role="checkbox"]:focus, .wl-page textarea:focus, .wl-page input:focus { outline: 3px solid #A78BFA; outline-offset: 2px; } } /* ---------------------------------------------------------------------------- Non-colour signalling. Splat cards (whitelist-styles.css:570) and subtype cards (:1057) already carry a checkmark badge, so selection there is shape-encoded and fine. These three are not: - .wl-choice-card.selected — border colour + background tint only - .wl-progress-dot.active — border/text colour only - textarea.error — border colour only ---------------------------------------------------------------------------- */ /* Choice cards ("Mortal" vs "Supernatural") get a badge and a heavier border. */ .wl-choice-card { position: relative; } /* The "Selected" badge (below) is the non-colour cue for choice cards — shape plus the literal word "Selected", on top of the existing colour tint. We deliberately don't try to also override the card border/shadow here: those are governed by !important rules elsewhere in the theme and the badge already carries the meaning. */ .wl-choice-card.selected::after { content: 'Selected'; position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 24px; background: #8B5CF6; color: #fff; font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.05em; border-radius: 3px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); background-size: 13px; background-repeat: no-repeat; background-position: 7px center; } /* Current step gets a ring, so it differs from future steps by shape not hue. */ .wl-progress-dot.active { box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.28); font-weight: 700; } /* Completed steps swap the numeral for a tick. */ .wl-progress-dot.completed { font-size: 0; } .wl-progress-dot.completed::after { content: '✓'; font-size: 1rem; line-height: 1; color: #fff; } /* Errors get a bar and, via the counter element, literal text. wod-theme.css:1188 sets `input, textarea, select { border: ...!important }`, and an !important border shorthand is painful to override predictably per side. An inset box-shadow sidesteps the border cascade entirely and paints a red bar down the left edge that reads as "problem here" without colour being the only signal (the counter text below spells out what's wrong). */ .wl-question textarea.error, .wl-question textarea[aria-invalid="true"] { box-shadow: inset 4px 0 0 0 #ef4444 !important; } .wl-checkbox-label.error { border-left-width: 4px; border-left-style: solid; border-left-color: #ef4444; } /* ---------------------------------------------------------------------------- Character counters. .wl-question-charcount already existed in whitelist-styles.css:507 but was never rendered by any builder. It is now populated by a11y.js. ---------------------------------------------------------------------------- */ .wl-question-charcount { display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-height: 1.2em; font-family: 'Crimson Text', Georgia, serif; transition: color 0.2s; } .wl-question-charcount.is-empty { color: #666; } /* Short, but they haven't left the field yet — stay neutral while typing. */ .wl-question-charcount.is-under { color: #8a8a8a; } /* Short, and they've moved on. Now it's worth flagging. */ .wl-question-charcount.is-under.is-touched { color: #f59e0b; font-weight: 600; } .wl-question-charcount.is-under.is-touched::before { content: '⚠'; font-size: 0.9rem; } .wl-question-charcount.is-met { color: #10B981; } .wl-question-charcount.is-met::before { content: '✓'; font-weight: 700; } /* ---------------------------------------------------------------------------- Overall progress summary, injected above the submit button. ---------------------------------------------------------------------------- */ .wl-answered-summary { margin: 24px 0 8px; padding: 12px 16px; background: rgba(10, 10, 20, 0.6); border: 1px solid rgba(139, 92, 246, 0.2); border-left: 4px solid rgba(139, 92, 246, 0.5); border-radius: 6px; color: #b8b8c8; font-family: 'Crimson Text', Georgia, serif; font-size: 0.95rem; } .wl-answered-summary strong { color: #e0e0e0; } .wl-answered-summary.is-complete { border-left-color: #10B981; } /* ---------------------------------------------------------------------------- Screen-reader-only utility. ---------------------------------------------------------------------------- */ .wl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------------------- Reduced motion. The page has 19+ transitions plus two infinite animations (wl-spin, wl-pulse). Honour the OS setting. ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .wl-page *, .wl-page *::before, .wl-page *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* The loading spinner still needs to read as "working", so let it turn — just slowly and without the sharp strobe of the original. */ .wl-spinner { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; } } /* Manual "reduce motion" toggle, for applicants whose OS setting is off but who still want stillness. Mirrors the media-query block above. */ html[data-a11y-motion="reduce"] .wl-page *, html[data-a11y-motion="reduce"] .wl-page *::before, html[data-a11y-motion="reduce"] .wl-page *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html[data-a11y-motion="reduce"] .wl-spinner { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; } /* ============================================================================ High-contrast themes. Two palettes, one rule set: each theme defines the --hc-* variables and the shared rules below consume them. Scoped to html[data-a11y-theme^="hc-"] and liberal with !important because the base theme (wod-theme.css) locks page, input, and border colours with !important of its own. These are "high contrast", not a full art-directed light re-skin — the goal is legibility, not a second visual identity. ============================================================================ */ html[data-a11y-theme="hc-dark"] { --hc-bg: #000000; --hc-surface: #0c0c0c; --hc-text: #ffffff; --hc-muted: #d6d6d6; --hc-accent: #ffd400; /* amber — survives all three common CVD types */ --hc-accent-ink: #000000; --hc-border: #ffffff; --hc-danger: #ff6b6b; --hc-ok: #4ade80; } html[data-a11y-theme="hc-light"] { --hc-bg: #ffffff; --hc-surface: #f1f1f4; --hc-text: #111111; --hc-muted: #333333; --hc-accent: #0b5fff; /* blue — strong on white, CVD-safe */ --hc-accent-ink: #ffffff; --hc-border: #111111; --hc-danger: #c81e1e; --hc-ok: #067647; } /* Page + base text. body.wl-page beats wod-theme.css:74/84's !important bg. */ html[data-a11y-theme^="hc-"] body.wl-page { background: var(--hc-bg) !important; color: var(--hc-text) !important; } html[data-a11y-theme^="hc-"] .wl-container, html[data-a11y-theme^="hc-"] .wl-title, html[data-a11y-theme^="hc-"] .wl-subtitle, html[data-a11y-theme^="hc-"] .wl-question-number, html[data-a11y-theme^="hc-"] .wl-question-text, html[data-a11y-theme^="hc-"] .wl-question-sub, html[data-a11y-theme^="hc-"] .wl-checkbox-label, html[data-a11y-theme^="hc-"] .wl-section-note, html[data-a11y-theme^="hc-"] .wl-progress-label, html[data-a11y-theme^="hc-"] .wl-splat-card-name, html[data-a11y-theme^="hc-"] .wl-splat-card-desc, html[data-a11y-theme^="hc-"] .wl-subtype-name, html[data-a11y-theme^="hc-"] .wl-choice-title, html[data-a11y-theme^="hc-"] .wl-topbar-username { color: var(--hc-text) !important; } /* Headings, links and the top-bar title carry the accent for emphasis. */ html[data-a11y-theme^="hc-"] .wl-section-title, html[data-a11y-theme^="hc-"] .wl-topbar-title, html[data-a11y-theme^="hc-"] .wl-topnav a, html[data-a11y-theme^="hc-"] .wl-answered-summary strong { color: var(--hc-accent) !important; } /* Surfaces: sections, cards, status boxes, top bar. */ html[data-a11y-theme^="hc-"] .wl-section, html[data-a11y-theme^="hc-"] .wl-splat-card, html[data-a11y-theme^="hc-"] .wl-subtype-card, html[data-a11y-theme^="hc-"] .wl-choice-card, html[data-a11y-theme^="hc-"] .wl-error-box, html[data-a11y-theme^="hc-"] .wl-success-box, html[data-a11y-theme^="hc-"] .wl-revision-box, html[data-a11y-theme^="hc-"] .wl-pending-box, html[data-a11y-theme^="hc-"] .wl-save-warning, html[data-a11y-theme^="hc-"] .wl-answered-summary, html[data-a11y-theme^="hc-"] .wl-topbar { background: var(--hc-surface) !important; border-color: var(--hc-border) !important; color: var(--hc-text) !important; } /* Inputs — override wod-theme.css:1188's !important field colours. */ html[data-a11y-theme^="hc-"] .wl-page input, html[data-a11y-theme^="hc-"] .wl-page textarea, html[data-a11y-theme^="hc-"] .wl-page select { background: var(--hc-bg) !important; color: var(--hc-text) !important; border: 2px solid var(--hc-border) !important; } html[data-a11y-theme^="hc-"] .wl-page textarea::placeholder { color: var(--hc-muted) !important; opacity: 1; } /* Buttons. Primary is a filled accent; secondary is an accent outline. */ html[data-a11y-theme^="hc-"] .wl-btn { background: var(--hc-surface) !important; color: var(--hc-text) !important; border: 2px solid var(--hc-accent) !important; } html[data-a11y-theme^="hc-"] .wl-btn-primary { background: var(--hc-accent) !important; color: var(--hc-accent-ink) !important; border-color: var(--hc-accent) !important; } /* Progress dots. */ html[data-a11y-theme^="hc-"] .wl-progress-dot { background: var(--hc-surface) !important; border-color: var(--hc-border) !important; color: var(--hc-text) !important; } html[data-a11y-theme^="hc-"] .wl-progress-dot.active { border-color: var(--hc-accent) !important; color: var(--hc-accent) !important; box-shadow: 0 0 0 4px var(--hc-accent) !important; } html[data-a11y-theme^="hc-"] .wl-progress-dot.completed { background: var(--hc-accent) !important; border-color: var(--hc-accent) !important; } html[data-a11y-theme^="hc-"] .wl-progress-dot.completed::after { color: var(--hc-accent-ink) !important; } /* Selected cards: accent border + accent badge. */ html[data-a11y-theme^="hc-"] .wl-splat-card.selected, html[data-a11y-theme^="hc-"] .wl-subtype-card.selected, html[data-a11y-theme^="hc-"] .wl-choice-card.selected { border-color: var(--hc-accent) !important; } html[data-a11y-theme^="hc-"] .wl-splat-card.selected::after, html[data-a11y-theme^="hc-"] .wl-subtype-card.selected::after, html[data-a11y-theme^="hc-"] .wl-choice-card.selected::after { background-color: var(--hc-accent) !important; } /* Counter states, kept legible on the new backgrounds. */ html[data-a11y-theme^="hc-"] .wl-question-charcount.is-empty, html[data-a11y-theme^="hc-"] .wl-question-charcount.is-under { color: var(--hc-muted) !important; } html[data-a11y-theme^="hc-"] .wl-question-charcount.is-under.is-touched { color: var(--hc-danger) !important; } html[data-a11y-theme^="hc-"] .wl-question-charcount.is-met { color: var(--hc-ok) !important; } /* ============================================================================ Preference panel chrome (floating button + dialog). Injected by a11y.js. Sized in px so the text-size slider doesn't balloon the controls it lives in. ============================================================================ */ .a11y-fab { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: #8B5CF6; color: #fff; border: 2px solid #fff2; border-radius: 999px; font-family: 'Atkinson Hyperlegible', Verdana, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .a11y-fab:hover { background: #7c4ddb; } .a11y-fab span[aria-hidden] { font-size: 18px; line-height: 1; } @media (max-width: 560px) { /* Collapse to an icon-only pill on small screens. */ .a11y-fab-text { display: none; } .a11y-fab { padding: 12px; } } .a11y-panel { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 2px solid rgba(139, 92, 246, 0.5); border-radius: 12px; background: #14141c; color: #ececf2; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); overflow: auto; } .a11y-panel::backdrop { background: rgba(0, 0, 0, 0.6); } .a11y-panel-form { font-family: 'Atkinson Hyperlegible', Verdana, sans-serif; padding: 20px 22px 24px; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .a11y-panel-head h2 { margin: 0; font-size: 20px; color: #fff; } .a11y-panel-close { background: transparent; border: none; color: #b8b8c8; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .a11y-panel-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .a11y-panel-intro { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: #b8b8c8; } .a11y-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .a11y-field label { font-size: 14px; font-weight: 700; color: #ececf2; } .a11y-field select { width: 100%; padding: 9px 10px; font-family: inherit; font-size: 14px; background: #0c0c12 !important; color: #ececf2 !important; border: 1px solid rgba(139, 92, 246, 0.5) !important; border-radius: 6px; cursor: pointer; } .a11y-panel-actions { margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .a11y-reset { padding: 9px 14px; background: transparent; color: #c9a9ff; border: 1px solid rgba(139, 92, 246, 0.6); border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .a11y-reset:hover { background: rgba(139, 92, 246, 0.12); } /* In the light high-contrast theme, flip the panel too so it isn't a dark box floating on a white page. */ html[data-a11y-theme="hc-light"] .a11y-panel { background: #ffffff !important; color: #111111 !important; border-color: #111111 !important; } html[data-a11y-theme="hc-light"] .a11y-panel-head h2, html[data-a11y-theme="hc-light"] .a11y-field label { color: #111111 !important; } html[data-a11y-theme="hc-light"] .a11y-panel-intro, html[data-a11y-theme="hc-light"] .a11y-panel-close { color: #333333 !important; } html[data-a11y-theme="hc-light"] .a11y-field select { background: #ffffff !important; color: #111111 !important; border-color: #111111 !important; } html[data-a11y-theme="hc-light"] .a11y-reset { color: #0b5fff; border-color: #0b5fff; } /* ============================================================================ Save-and-return drafts: restore banner + "saved" indicator. ============================================================================ */ .wl-draft-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; padding: 14px 18px; background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.4); border-left: 4px solid #8B5CF6; border-radius: 8px; } .wl-draft-banner-text { color: #d8d8e2; font-family: 'Crimson Text', Georgia, serif; font-size: 1rem; line-height: 1.5; flex: 1 1 260px; } .wl-draft-banner-text strong { color: #fff; } .wl-draft-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; } .wl-draft-banner-actions .wl-btn { margin: 0; } .wl-draft-status { margin: 10px 0 0; text-align: right; color: #7bdca0; font-family: 'Crimson Text', Georgia, serif; font-size: 0.85rem; min-height: 1.1em; } html[data-a11y-theme^="hc-"] .wl-draft-banner { background: var(--hc-surface) !important; border-color: var(--hc-accent) !important; border-left-color: var(--hc-accent) !important; } html[data-a11y-theme^="hc-"] .wl-draft-banner-text, html[data-a11y-theme^="hc-"] .wl-draft-banner-text strong { color: var(--hc-text) !important; } html[data-a11y-theme^="hc-"] .wl-draft-status { color: var(--hc-ok) !important; } /* ============================================================================ Focus mode + read-aloud controls (Phase 4). ============================================================================ */ /* Focus mode DIMS other questions — it never hides them. Everything stays in the DOM, in tab order, and findable with Ctrl+F; assessment is unchanged. */ html[data-a11y-focus="dim"] .wl-question { opacity: 0.4 !important; transition: opacity 0.2s ease; } html[data-a11y-focus="dim"] .wl-question:focus-within, html[data-a11y-focus="dim"] .wl-question:hover { opacity: 1 !important; } .wl-read-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; } .wl-read-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(139, 92, 246, 0.12); color: #cbb8f5; border: 1px solid rgba(139, 92, 246, 0.45); border-radius: 6px; font-family: 'Atkinson Hyperlegible', Verdana, sans-serif; font-size: 0.8rem; cursor: pointer; } .wl-read-btn:hover { background: rgba(139, 92, 246, 0.22); color: #fff; } .wl-read-btn-stop { color: #e0a0a0; border-color: rgba(224, 120, 120, 0.5); background: rgba(224, 120, 120, 0.1); } .wl-read-btn-stop:hover { background: rgba(224, 120, 120, 0.2); color: #fff; } html[data-a11y-theme^="hc-"] .wl-read-btn { background: var(--hc-surface) !important; color: var(--hc-text) !important; border-color: var(--hc-accent) !important; } .a11y-tts-fields:not(:empty) { margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* ============================================================================ Predictability copy ("what happens next" / "before you start"). ============================================================================ */ .wl-next-steps { margin: 0 0 24px; padding: 18px 22px; background: rgba(139, 92, 246, 0.06); border: 1px solid rgba(139, 92, 246, 0.25); border-radius: 8px; color: #cfcfdb; font-family: 'Crimson Text', Georgia, serif; font-size: 1rem; line-height: 1.6; } .wl-next-steps h2 { margin: 0 0 10px; font-family: 'Cinzel', serif; font-size: 1.05rem; color: #c9b8f5; } .wl-next-steps ol { margin: 0 0 10px; padding-left: 22px; } .wl-next-steps li { margin-bottom: 6px; } .wl-next-steps strong { color: #efeff5; } .wl-next-steps-save { margin: 0; font-style: italic; color: #a9a9bd; } html[data-a11y-theme^="hc-"] .wl-next-steps { background: var(--hc-surface) !important; border-color: var(--hc-border) !important; color: var(--hc-text) !important; } html[data-a11y-theme^="hc-"] .wl-next-steps h2 { color: var(--hc-accent) !important; } html[data-a11y-theme^="hc-"] .wl-next-steps strong { color: var(--hc-text) !important; }