/*
 * The accessibility themes on the public sites, and the control that chooses
 * one (a11y.js; a11y-boot.js and the Worker's theme.js put the theme on the
 * page before it is painted).
 *
 * ONE ATTRIBUTE, ONE SET OF NAMES (7 Oct 2026, OPEN_ITEMS 216). The theme is
 * <html data-theme="...">, by the names the platform's branding API uses:
 * standard, a11y-calm, a11y-high-contrast, a11y-large-text,
 * a11y-deuteranopia, a11y-tritanopia, a11y-dyslexia. The Worker writes the attribute on the
 * first byte from the visitor's cookie (worker/src/theme.js), so there is no
 * moment in the standard look first. (Until 7 Oct the themes were classes on
 * <html> and the attribute carried the phase-1 site theme by other names:
 * two conventions for one thing. They are one now.)
 *
 * THE SAME SIX AS THE PORTAL, and NOT interchangeable: each serves a
 * different need (docs/SETUP_GUIDE.md 12). Colours, spacing and rules are the
 * portal's own (lib/40-themes-css.sh, static/themes/a11y-*.css), so a person
 * gets the same accommodation on the portal and on a tenant's site.
 *
 * ONE FILE FOR EVERY SITE'S LOOK, BUILT ON TOKENS. The sites are drawn by
 * three stylesheet families with their own custom properties -- site.css
 * (--ink, --paper, --brand, ...; the four vertical sites and sf-vertical.css),
 * camc.css (the Club's, with --teal and --paper-grey; sf-club.css) and sf.css
 * (--sf-*; a composed page with no brand kit). Each theme states its colours
 * once, as --a11y-* tokens, and one mapping block hands them to all three
 * families, so every component that uses a family's token follows the theme
 * without a rule of its own. THE TENANT'S BRAND STAYS WHERE THE NEED ALLOWS:
 * Large Text changes no colour; Calm and Dyslexia keep the tenant's hues,
 * muted or deepened just enough to hold AA on their off-white ground; High
 * Contrast and the two colour-blind themes replace the brand and status
 * colours, because that is the whole of what they are for. The logo and the
 * photographs stay the tenant's in every theme.
 *
 * WHY THE TOKENS SIT ON <body>, NOT <html>. Calm and Dyslexia derive
 * from the tenant's own brand colour. A custom property cannot be redefined
 * from itself on the same element (a cycle; the value is dropped), so <html>
 * passes the tenant's colours down as --a11y-*-src and <body> mixes them.
 *
 * EVERY PAIR IS MEASURED, not chosen by eye: test/a11y.test.mjs computes each
 * theme's text and background pairs from these tokens, against every
 * tenant's palette, and holds them to AA -- AAA (7:1) for High Contrast --
 * and test/theme.test.mjs simulates both red/green forms of colour blindness
 * on the red/green theme's status and action colours.
 *
 * THE VISITOR'S DEVICE IS HEARD BEFORE ANYBODY CHOOSES: Windows contrast
 * themes (forced-colors: the system's colours win, and this file stands
 * aside for them), reduced motion and reduced transparency are media queries
 * at the end of this file, inside whatever theme is drawn; more contrast
 * chooses High Contrast as the start (theme.js, a11y-boot.js). DARK MODE
 * DOES NOT CHANGE THE THEME (the owner, 7 Oct 2026): a device set to dark
 * gets the site's own look, and there is no dark theme here.
 *
 * STATUS IS NEVER COLOUR ALONE (a glyph beside every state, in every theme)
 * and Calm removes motion outright, because it is chosen by somebody who
 * wants stillness.
 */

/* ---- the control: a button in the corner, a panel above it ---------- */
/* FIXED, SO DRAWING IT MOVES NOTHING (the pages are held to CLS 0.1) and it
   is always within reach, whatever has been scrolled. Its own colours, so it
   reads on a light page and on a dark one, in every theme. */
.a11y {
  --a11y-ui-bg: var(--a11y-surface, #ffffff);
  --a11y-ui-ink: var(--a11y-text, #1a1a1a);
  --a11y-ui-soft: var(--a11y-muted, #454545);
  --a11y-ui-line: var(--a11y-control, #6b6b6b);
  --a11y-ui-pick: var(--a11y-link, #0b57a4);
  font-family: inherit;
  line-height: 1.4;
}
.a11y-toggle {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; min-width: 44px; margin: 0; padding: .45rem .95rem .45rem .7rem;
  border: 2px solid var(--a11y-ui-bg); border-radius: 999px;
  /* A DARK PILL WITH A LIGHT RIM: the rim is what shows on a dark page,
     the pill on a light one. */
  background: var(--a11y-ui-ink); color: var(--a11y-ui-bg);
  box-shadow: 0 0 0 1px var(--a11y-ui-ink), 0 2px 8px rgba(0, 0, 0, .25);
  font: inherit; font-size: .95rem; font-weight: 700; letter-spacing: normal;
  cursor: pointer;
}
.a11y-icon { flex: none; }
.a11y-toggle[aria-expanded="true"] { background: var(--a11y-ui-bg); color: var(--a11y-ui-ink);
  border-color: var(--a11y-ui-ink); }
/* THE FOCUS RING IS TWO RINGS, light inside dark, so it shows on any page. */
.a11y-toggle:focus-visible {
  outline: 3px solid var(--a11y-ui-bg); outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--a11y-ui-ink);
}
.a11y-panel {
  position: fixed; left: 1rem; bottom: 4.5rem; z-index: 60;
  width: min(25rem, calc(100vw - 2rem));
  max-height: calc(100vh - 6rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem 1rem .9rem;
  background: var(--a11y-ui-bg); color: var(--a11y-ui-ink);
  border: 2px solid var(--a11y-ui-ink); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  text-align: left;
}
.a11y-panel[hidden] { display: none; }
.a11y-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.a11y-title { padding: 0; margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 800; color: var(--a11y-ui-ink); }
/* EACH CHOICE IS ONE <label> WRAPPING ITS RADIO (WCAG 2.2 2.5.8, 7 Oct
   2026): the whole row is the target, at least 44px tall -- the portal's
   size, not the 24px minimum -- and the radio itself is 24px, so even the
   circle alone passes. The assessment of 6 Oct found the radios at 20px. */
.a11y-option { display: flex; align-items: flex-start; gap: .7rem;
  min-height: 44px; box-sizing: border-box;
  padding: .6rem .65rem; margin: 0 0 .4rem; border: 1px solid var(--a11y-ui-line); border-radius: 8px;
  cursor: pointer; }
.a11y-option input { flex: none; width: 24px; height: 24px; margin: 0;
  accent-color: var(--a11y-ui-pick); cursor: pointer; }
.a11y-words { display: block; flex: 1; min-width: 0; }
.a11y-name { display: block; font-weight: 700; color: var(--a11y-ui-ink); }
.a11y-desc { display: block; margin-top: .15rem; font-size: .88rem; color: var(--a11y-ui-soft); }
/* "FOLLOW MY SYSTEM" SITS APART from the themes: it is not a look, it is
   letting the device decide. */
.a11y-option-system { margin-bottom: .75rem; border-style: dashed; }
/* THE CHOSEN ROW SAYS SO WITH A SHAPE as well as a colour: a thicker edge
   and a tick, beside the filled radio. */
.a11y-option:has(input:checked) { border: 2px solid var(--a11y-ui-pick); padding: calc(.6rem - 1px) calc(.65rem - 1px); }
.a11y-option input:checked + .a11y-words .a11y-name::after { content: "\00a0\2713\FE0E"; }
.a11y-option:has(input:focus-visible) { outline: 3px solid var(--a11y-ui-pick); outline-offset: 2px; }
.a11y-status { margin: .5rem 0 0; font-size: .88rem; color: var(--a11y-ui-soft); }
.a11y-status:empty { display: none; }
.a11y-close {
  margin: .6rem 0 0; min-height: 44px; min-width: 44px; padding: .45rem 1rem;
  border: 2px solid var(--a11y-ui-ink); border-radius: 999px;
  background: var(--a11y-ui-bg); color: var(--a11y-ui-ink);
  font: inherit; font-weight: 700; cursor: pointer;
}
.a11y-close:focus-visible { outline: 3px solid var(--a11y-ui-pick); outline-offset: 2px; }
@media print { .a11y { display: none; } }
/* ROOM AT THE FOOT OF THE PAGE, so the button never sits on the footer's
   last line once a person has scrolled to the end. */
body:has(> .a11y) > footer:last-of-type { padding-bottom: max(4.5rem, 5vh); }

/* ---- the tenant's own colours, handed down for the themes to derive from */
:root {
  --a11y-brand-src: var(--brand, var(--sf-brand, #1a5f7a));
  --a11y-accent-src: var(--accent, var(--sf-brand, #1a5f7a));
  --a11y-teal-src: var(--teal, var(--a11y-accent-src));
}

/* ---- each theme's colours ---------------------------------------------- */

/* CALM (reduced distraction): ADHD, autism, anyone who finds dense pages
   tiring. The portal's off-white ground and muted slate; the tenant's hues
   kept but pulled two-thirds of the way to that slate, so the brand is
   recognisable and nothing shouts. */
html[data-theme="a11y-calm"] body {
  --a11y-bg: #f7f6f3;
  --a11y-surface: #fdfcfa;
  --a11y-surface-alt: #f2f1ed;
  --a11y-text: #2b3338;
  --a11y-muted: #55616a;
  --a11y-line: #d9d6cf;
  --a11y-control: #7a8288;
  --a11y-focus: #4a7c8c;
  --a11y-ok: #3f6640;
  --a11y-ok-bg: #eef3ee;
  --a11y-bad: #8a4433;
  --a11y-bad-bg: #f7efec;
  --a11y-brand: color-mix(in srgb, var(--a11y-brand-src) 65%, #56616a);
  --a11y-accent: color-mix(in srgb, var(--a11y-accent-src) 65%, #56616a);
  --a11y-teal: color-mix(in srgb, var(--a11y-teal-src) 65%, #56616a);
  --a11y-brand-deep: color-mix(in srgb, var(--a11y-brand-src) 30%, #2b3338);
  --a11y-link: color-mix(in srgb, var(--a11y-brand-src) 65%, #56616a);
}

/* HIGH CONTRAST: low vision. WCAG AAA (7:1) for every word, black on white,
   the portal's blue for links and actions. The brand gives way here: that
   is what the person asked for. */
html[data-theme="a11y-high-contrast"] body {
  --a11y-bg: #ffffff;
  --a11y-surface: #ffffff;
  --a11y-surface-alt: #ffffff;
  --a11y-text: #000000;
  --a11y-muted: #1a1a1a;
  --a11y-line: #000000;
  --a11y-control: #000000;
  --a11y-focus: #cc0000;
  --a11y-ok: #006600;
  --a11y-ok-bg: #ffffff;
  /* DARKER THAN THE PORTAL'S #cc0000, which is 5.9:1 on white: a word in
     this theme has to clear 7:1. */
  --a11y-bad: #a30000;
  --a11y-bad-bg: #ffffff;
  --a11y-brand: #0000cc;
  --a11y-accent: #000000;
  --a11y-teal: #003d3d;
  --a11y-brand-deep: #000000;
  --a11y-link: #0000cc;
}

/* COLOUR BLIND, RED/GREEN -- DEUTERANOPIA AND PROTANOPIA (about 8% of men
   between them). Both lose the red/green difference and keep blue against
   yellow, so everything that carries meaning moves onto that axis: actions
   and "confirmed" in blue, the accent and "problem" in a dark orange that a
   protanope -- who also sees reds darker -- still reads as a distinct dark
   ochre, never as the blue. Not red, not green, no red/green pair anywhere.
   test/theme.test.mjs simulates both forms (Machado et al. 2009, full
   severity) and holds the blue and the orange apart under each. */
html[data-theme="a11y-deuteranopia"] body {
  --a11y-bg: #f4f6f8;
  --a11y-surface: #ffffff;
  --a11y-surface-alt: #eef2f6;
  --a11y-text: #14263b;
  --a11y-muted: #3d5570;
  --a11y-line: #b8c6d4;
  --a11y-control: #6b7f94;
  --a11y-focus: #b35300;
  --a11y-ok: #0058a3;
  --a11y-ok-bg: #e3eefa;
  --a11y-bad: #ad5100;
  --a11y-bad-bg: #fff1e3;
  --a11y-brand: #0058a3;
  --a11y-accent: #ad5100;
  --a11y-teal: #004481;
  --a11y-brand-deep: #14263b;
  --a11y-link: #0058a3;
}

/* COLOUR BLIND, BLUE/YELLOW (tritanopia): the portal's red/teal axis, the
   one a tritanope keeps. */
html[data-theme="a11y-tritanopia"] body {
  --a11y-bg: #f8f6f6;
  --a11y-surface: #ffffff;
  --a11y-surface-alt: #f4eeee;
  --a11y-text: #2b1616;
  --a11y-muted: #5c3a3a;
  --a11y-line: #d4bcbc;
  --a11y-control: #9a7f7f;
  --a11y-focus: #a4133c;
  --a11y-ok: #006466;
  --a11y-ok-bg: #e0f2f2;
  --a11y-bad: #a4133c;
  --a11y-bad-bg: #fae8ed;
  --a11y-brand: #a4133c;
  --a11y-accent: #006466;
  --a11y-teal: #006466;
  --a11y-brand-deep: #3d1f1f;
  --a11y-link: #a4133c;
}

/* DYSLEXIA FRIENDLY: the portal's cream ground and soft ink, which cut the
   glare and the "rivers" of white; the tenant's hues kept, deepened a
   little so every one of them still reads as a word on cream. */
html[data-theme="a11y-dyslexia"] body {
  --a11y-bg: #fdf6e3;
  --a11y-surface: #fffdf6;
  --a11y-surface-alt: #f7f0dd;
  --a11y-text: #2f2e2b;
  --a11y-muted: #4f4d47;
  --a11y-line: #d6ccb0;
  --a11y-control: #8a8272;
  --a11y-focus: #1f6f8b;
  --a11y-ok: #4a7043;
  --a11y-ok-bg: #eef3ec;
  --a11y-bad: #9c3b2e;
  --a11y-bad-bg: #f9ece9;
  --a11y-brand: color-mix(in srgb, var(--a11y-brand-src) 85%, #1a1a1a);
  --a11y-accent: color-mix(in srgb, var(--a11y-accent-src) 85%, #1a1a1a);
  --a11y-teal: color-mix(in srgb, var(--a11y-teal-src) 85%, #1a1a1a);
  --a11y-brand-deep: color-mix(in srgb, var(--a11y-brand-src) 35%, #2f2e2b);
  --a11y-link: color-mix(in srgb, var(--a11y-brand-src) 85%, #1a1a1a);
}

/* ---- the colours, handed to every site's own tokens ------------------- */
/* LARGE TEXT IS NOT HERE: it changes size, never colour, so the tenant's
   whole palette -- the arena's dark page included -- stays as it is. */
html:is([data-theme="a11y-calm"], [data-theme="a11y-high-contrast"], [data-theme="a11y-deuteranopia"],
        [data-theme="a11y-tritanopia"], [data-theme="a11y-dyslexia"]) body {
  /* site.css, the four vertical sites */
  --paper: var(--a11y-bg);
  --paper-warm: var(--a11y-surface-alt);
  --ink: var(--a11y-text);
  --ink-soft: var(--a11y-muted);
  --line: var(--a11y-line);
  --control-line: var(--a11y-control);
  --brand: var(--a11y-brand);
  --brand-deep: var(--a11y-brand-deep);
  --accent: var(--a11y-accent);
  --accent-soft: var(--a11y-surface-alt);
  --brand-text: var(--a11y-link);
  --accent-text: var(--a11y-accent);
  --ok: var(--a11y-ok);
  --bad: var(--a11y-bad);
  /* camc.css, the Club's (its words in a brand colour read --brand-text,
     --teal-text and --accent-text first) */
  --brand-dark: var(--a11y-brand-deep);
  --accent-dark: var(--a11y-accent);
  --teal: var(--a11y-teal);
  --teal-dark: var(--a11y-teal);
  --teal-text: var(--a11y-teal);
  --paper-grey: var(--a11y-surface-alt);
  --line-soft: var(--a11y-line);
  /* sf.css, a composed page with no brand kit */
  --sf-brand: var(--a11y-brand);
  --sf-ink: var(--a11y-text);
  --sf-muted: var(--a11y-muted);
  --sf-bg: var(--a11y-bg);
  --sf-band: var(--a11y-surface-alt);
  --sf-line: var(--a11y-control);
  --sf-on-brand: #ffffff;
  --sf-focus: var(--a11y-focus);
  background: var(--a11y-bg);
  color: var(--a11y-text);
}
/* STATUS BOXES in the theme's own status colours. The arena's are drawn for
   its dark page, and a green box beside a red one is the pair the
   colour-blind themes exist to separate. */
html:is([data-theme="a11y-calm"], [data-theme="a11y-high-contrast"], [data-theme="a11y-deuteranopia"],
        [data-theme="a11y-tritanopia"], [data-theme="a11y-dyslexia"]) .ok {
  background: var(--a11y-ok-bg); color: var(--a11y-ok); border-color: var(--a11y-ok);
}
html:is([data-theme="a11y-calm"], [data-theme="a11y-high-contrast"], [data-theme="a11y-deuteranopia"],
        [data-theme="a11y-tritanopia"], [data-theme="a11y-dyslexia"]) .bad {
  background: var(--a11y-bad-bg); color: var(--a11y-bad); border-color: var(--a11y-bad);
}
/* A PLAIN LINK takes the theme's link colour, which the arena's own rule
   (its light purple, drawn for a dark page) would otherwise keep. */
html:is([data-theme="a11y-calm"], [data-theme="a11y-high-contrast"], [data-theme="a11y-deuteranopia"],
        [data-theme="a11y-tritanopia"], [data-theme="a11y-dyslexia"]) main a:not([class]) {
  color: var(--a11y-link);
}
/* COLOURS A KIT STATES OUTRIGHT rather than through a token -- a gold star,
   a dark red note, a tinted notice box, a white card -- follow the theme too:
   words in the theme's own text colours, boxes on its own surfaces. Without
   this a gold star misses AAA and a white card ignores Calm's off-white. */
html:is([data-theme="a11y-calm"], [data-theme="a11y-high-contrast"], [data-theme="a11y-deuteranopia"],
        [data-theme="a11y-tritanopia"], [data-theme="a11y-dyslexia"])
  :is(.site-notice, .site-terms-changed, .mem-people-band, .sf-card, .shop-card) {
  background: var(--a11y-surface-alt); color: var(--a11y-text);
}
html:is([data-theme="a11y-calm"], [data-theme="a11y-high-contrast"], [data-theme="a11y-deuteranopia"],
        [data-theme="a11y-tritanopia"], [data-theme="a11y-dyslexia"])
  :is(.stars, .rate-note) { color: var(--a11y-muted); }

/* ---- status is never colour alone --------------------------------------- */
/* A GLYPH BESIDE EVERY STATE, in every theme -- the portal's shapes -- so a
   state survives colour blindness, greyscale and a print-out. The words
   were always there; this is the second channel. */
html[data-theme^="a11y-"] :is(.ok, .state-confirmed)::before { content: "\2713\FE0E\00a0"; font-weight: 700; }
html[data-theme^="a11y-"] .bad::before { content: "\26A0\FE0E\00a0"; font-weight: 700; }
html[data-theme^="a11y-"] :is(.state-held, .state-requested)::before { content: "\25CB\00a0"; font-weight: 700; }
html[data-theme^="a11y-"] :is(.state-cancelled, .state-expired)::before { content: "\2717\FE0E\00a0"; font-weight: 700; }

/* ---- CALM: looser, quieter, still ---------------------------------------- */
/* NO MOTION AT ALL, whatever the device says: this theme is chosen by
   somebody who wants stillness. */
html[data-theme="a11y-calm"] *, html[data-theme="a11y-calm"] *::before, html[data-theme="a11y-calm"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-theme="a11y-calm"] body { line-height: 1.75; }
/* A COMFORTABLE MEASURE where the site set none; :where() keeps it weightless,
   so a narrower one the site chose (a hero's 52ch) still stands. */
:where(html[data-theme="a11y-calm"]) :where(main) :where(p, li) { max-width: 70ch; }
html[data-theme="a11y-calm"] :is(.grid, .cards, .card-grid) { gap: 1.75rem; }
/* DEPTH CUES ARE CLUTTER: shadows go (the control keeps its own, so it can
   still be found), and the photographs are quieter. */
html[data-theme="a11y-calm"] body *:not(.a11y-toggle):not(.a11y-panel) { box-shadow: none !important; }
html[data-theme="a11y-calm"] :is(.hero-photo, .hero-media img, .hero img, .card img, .mem-hero img) { filter: saturate(.55); }

/* ---- HIGH CONTRAST: every edge seen, every word at 7:1 ------------------- */
/* EVERY BOUNDARY VISIBLE, not implied by a tint -- in the control's own text
   colour, so a white-lettered button on the black hero has a white edge and
   a black-lettered one on the page a black edge (the first walk found the
   arena's "Book a box" as bare words on black). */
html[data-theme="a11y-high-contrast"] :is(input, select, textarea, .btn, .slot, .card, .booker, .chip, .nav-toggle, .menu-toggle, .sf-btn) {
  border: 2px solid currentColor !important;
}
html[data-theme="a11y-high-contrast"] a { text-decoration-thickness: 2px; text-underline-offset: .15em; }
/* A HINT IN A FIELD IS WORDS TOO: the browser's pale grey is about 4.6:1. */
html[data-theme="a11y-high-contrast"] ::placeholder { color: #333333; opacity: 1; }
html[data-theme="a11y-high-contrast"] main a:not([class]) { text-decoration-line: underline; }
html[data-theme="a11y-high-contrast"] *:focus-visible { outline: 4px solid var(--a11y-focus) !important; outline-offset: 3px !important; }
html[data-theme="a11y-high-contrast"] body *:not(.a11y-toggle):not(.a11y-panel) { box-shadow: none !important; text-shadow: none !important; }
/* THE HEADER IS SOLID, not a frosted glass the page shows through. */
html[data-theme="a11y-high-contrast"] :is(.masthead, .mainnav) { background: var(--a11y-bg); backdrop-filter: none; }
html[data-theme="a11y-high-contrast"] .masthead { border-bottom: 2px solid var(--a11y-text); }
/* WORDS ON A PHOTOGRAPH get a near-solid black floor under them: a graded
   scrim has no contrast to measure, and 7:1 needs one. White words in full,
   never faded. */
html[data-theme="a11y-high-contrast"] .hero::after { display: none; }
html[data-theme="a11y-high-contrast"] :is(.hero-photo, .hero-media, .finder-hero-media, .mem-hero-media)::after {
  background: rgba(0, 0, 0, .86) !important;
}
/* ONLY THE DARK BANDS (1 Oct 2026). `.band` alone is the Club site's plain
   white section -- checkout, the account pages and most others -- and naming
   it here turned every word on them white on white: the checkout's lines and
   totals vanished. The dark ones are named. */
html[data-theme="a11y-high-contrast"] :is(.hero, .mem-facts-band, .mem-film-band, .mem-final, body > footer, .mem-hero, .finder-hero) :is(p, .lede, .colophon, .eyebrow, .kicker, span) {
  color: #ffffff; opacity: 1;
}
html[data-theme="a11y-high-contrast"] .eyebrow { background: #000000; border: 2px solid #ffffff; }

/* ---- LARGE TEXT: bigger, and scaling WITH the browser's zoom ------------- */
/* THE PORTAL'S OWN SCALE, set on the root in rem, so everything sized in rem
   grows with it -- spacing too -- and the browser's zoom and its font size
   setting still multiply it rather than being fought. */
html[data-theme="a11y-large-text"] { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.5rem); }
html[data-theme="a11y-large-text"] body { font-size: 1.0625rem; line-height: 1.75; overflow-wrap: break-word; }
/* LONG LABELS WRAP rather than being cut off: truncation hides words from
   exactly the people who most need them. */
html[data-theme="a11y-large-text"] * { text-overflow: clip !important; }
html[data-theme="a11y-large-text"] :is(.btn, .nav a, .chip) { white-space: normal; }

/* ---- DYSLEXIA FRIENDLY: space between letters and words, never justified - */
/* THE PORTAL'S VALUES (static/themes/a11y-dyslexia.css): line height 1.9,
   tracking .06em, word spacing .16em, a 66ch measure, a plain face. */
html[data-theme="a11y-dyslexia"] body {
  --font: Verdana, Tahoma, "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--font);
  line-height: 1.9;
  word-spacing: .16em;
}
/* ONE CLEAR FACE, EVEN SPACING, EVERYWHERE -- headings and buttons too, which
   the sites set tighter than body text. */
html[data-theme="a11y-dyslexia"] body, html[data-theme="a11y-dyslexia"] body *:not(.a11y-icon):not(.a11y-icon *) {
  font-family: Verdana, Tahoma, "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: .06em !important;
}
html[data-theme="a11y-dyslexia"] :is(p, li, dd, dt, blockquote, td, th, label, legend) { text-align: left !important; }
:where(html[data-theme="a11y-dyslexia"]) :where(main) :where(p, li) { max-width: 66ch; }
/* BOLD RATHER THAN ITALIC: slanted letters are harder to track; and no
   capitals-only headings, whose even outline hides each word's shape. */
html[data-theme="a11y-dyslexia"] :is(i, em, cite) { font-style: normal !important; font-weight: 700; }
html[data-theme="a11y-dyslexia"] :is(h1, h2, h3, h4) { line-height: 1.3; text-transform: none; }

/* ---- wider words still fit ------------------------------------------------ */
/* BIGGER OR WIDER-SPACED TEXT REFLOWS, never spills (WCAG 1.4.10, 1.4.12).
   A form field and a grid cell are as wide as their content unless told
   otherwise, and at these sizes the Club's two date fields pushed out of the
   finder (found in the visual walk, 30 Sep 2026). A date keeps its usual
   spacing: its mask is a fixed pattern, not words to track. */
html:is([data-theme="a11y-dyslexia"], [data-theme="a11y-large-text"]) :is(input, select, textarea) { max-width: 100%; min-width: 0; }
html:is([data-theme="a11y-dyslexia"], [data-theme="a11y-large-text"]) :is(.finder-dates, .finder-actions, .book-bar, .booker-head, .grid) > * { min-width: 0; }
html[data-theme="a11y-dyslexia"] input[type="date"] { letter-spacing: normal !important; }

/* ---- the device's own settings, in every theme --------------------------- */

/* MOTION: none for a device that asks for less. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* TRANSPARENCY: a device that asks for less gets solid surfaces -- no frosted
   header the page shows through, no see-through panel over a photograph. */
@media (prefers-reduced-transparency: reduce) {
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  :is(.masthead, .mainnav) { background-color: var(--a11y-bg, var(--paper, var(--sf-bg, #ffffff))); }
  :is(.mem-member, .seg label, .finder-tabs button) { background-color: var(--teal-dark, #005c5c); }
  /* the home hero's panel (camc.css), solid: no photograph shows through */
  .hero-words { background-color: #1d241f; }
}

/* WINDOWS CONTRAST THEMES (forced-colors: active). The person's own system
   colours replace every colour on the page, and that is right: this file
   does not fight them. What it adds is only what the system cannot know --
   an edge on every control whose shape was a fill, a ring on every focus,
   the control drawn in the system's own button colours, and the words on a
   photograph on a solid floor. */
@media (forced-colors: active) {
  .a11y-toggle, .a11y-panel, .a11y-close, .a11y-option { border: 2px solid CanvasText; }
  .a11y-toggle { background: ButtonFace; color: ButtonText; box-shadow: none; }
  .a11y-option:has(input:checked) { border: 3px solid Highlight; }
  :is(.btn, .sf-btn, .slot, .chip, .seg label, .finder-tabs button, .menu-toggle, .nav-toggle) { border: 2px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; }
  :is(.hero-photo, .hero-media, .finder-hero-media, .mem-hero-media)::after { background: Canvas !important; opacity: .85; }
  :is(.ok, .bad, .state-confirmed, .state-cancelled) { border: 1px solid CanvasText; }
}