/* Wielder accessibility settings, site-wide (docs/site-agent.md, "Accessibility"). ./boot.js sets the attributes on
   <html> before first paint; nothing here applies at the defaults.

   Text size. The site's own type is set in px (the landing, the header, generated pages), so a root font-size alone
   would not move it: the root font-size scales rem-based pages, and the page's reading surfaces (the landing's card
   and footer, a generated page's header/main/footer, a product page's sheet) are zoomed, reflowing like a browser's
   zoom. The root itself is never zoomed: 100vw/100svh would overflow, and the header's flights measure the page.
   Components can also read --a11y-text (1 to 1.75). */
html[data-a11y-text] { font-size: calc(100% * var(--a11y-text, 1)); }
html[data-a11y-text] :is(.lp-inner, .lp-foot, .ph-sheet > *, body > header, body > main:not(.ph-sheet), body > footer, [data-a11y-zoom]) { zoom: var(--a11y-text, 1); }

/* Colour vision and display filters: on the root, which keeps position: fixed working (a filter on any other element
   would make it the containing block of the fixed wallpaper and header). */
html:is([data-a11y-color], [data-a11y-display]) { filter: var(--a11y-filter, none); }

/* Display: more contrast. Muted ink grows strong, glass grows denser, focus is always visible. */
/* :root:root: above the pages' own light/dark token blocks (:root:not([data-theme="light"])). */
:root:root[data-a11y-display] {
  --lp-mute: color-mix(in oklab, var(--lp-ink, #0e1a33) 86%, transparent);
  --muted: var(--ink, #161917);
  --wh-ink-soft: var(--wh-ink, #0e1a33);
}
html[data-a11y-display] :focus-visible { outline: 3px solid #ffbf1f !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px #0b0c10 !important; }
html[data-a11y-display] :is(.lp-pill, .lp-cat-n, .lp-fine, .lp-wall-credit, .eyebrow, .meta) { opacity: 1; color: inherit; }
html[data-a11y-display] a:not([class]) { text-decoration-line: underline; text-decoration-thickness: 2px; }
html[data-a11y-display] .lp-tile { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--lp-ink, #0e1a33) 34%, transparent); }
html[data-a11y-display] .lp-shade { opacity: 0.45 !important; }

/* Display: maximum. Solid surfaces instead of glass, no blur, no wallpaper photo behind the type, stronger ink. */
html[data-a11y-display="max"] *, html[data-a11y-display="max"] *::before, html[data-a11y-display="max"] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; }
html[data-a11y-display="max"] .lp-zoom { visibility: hidden; }
html[data-a11y-display="max"] .lp-wall { background-image: none !important; background-color: #0b0c10 !important; }
html[data-a11y-display="max"] .lp-tile { box-shadow: 0 0 0 2px var(--lp-ink, #0e1a33); background: var(--lp-card, #f4f0e8); }
html[data-a11y-display="max"] :is(.ag-pill, .ag-mic, .ag-chip, .ag-cta, .lp-chip button) { background: #0b0c10 !important; color: #fff !important; box-shadow: 0 0 0 2px #fff !important; }
html[data-a11y-display="max"] .ag-goo { opacity: 0 !important; }
html[data-a11y-display="max"] .card { background: var(--paper, #f4f0e8); border-width: 2px; border-color: var(--ink, #161917); }
:root:root[data-a11y-display="max"] { --lp-mute: var(--lp-ink, #0e1a33); }

/* Motion: "reduced" is html[data-motion="reduce"], which the site already honours. "none" also stops everything that
   still moves: animations end where they would, transitions jump, autoplay video is paused by boot.js. */
html[data-a11y-motion="none"] *, html[data-a11y-motion="none"] *::before, html[data-a11y-motion="none"] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* Spacing: WCAG 1.4.12's text spacing (letter 0.12em is too loose for display type, so 0.05em; words 0.16em;
   lines 1.6 in running text). The header's island is set to its own measures and keeps them. */
html[data-a11y-spacing] body :is(p, li, dd, dt, blockquote, figcaption, label, a, button, input, textarea, td, th, h1, h2, h3, h4, h5, h6, span):not(#wielder-header *, svg *) {
  letter-spacing: 0.05em !important;
  word-spacing: 0.16em !important;
}
html[data-a11y-spacing] body :is(p, li, dd, blockquote, figcaption, .article, .dek, textarea):not(#wielder-header *) { line-height: 1.6 !important; }
html[data-a11y-spacing] body :is(.article p, main p) { margin-block: 1.6em !important; }

/* Dyslexia-friendly type: a wide, open, sans-serif stack (OpenDyslexic, Atkinson Hyperlegible and Lexend when the visitor has
   them, else Verdana and its kin, which the British Dyslexia Association recommends), no italics, and the same text
   spacing as "wide". The island keeps its own type (its sizes are measured), code keeps its monospace. */
html[data-a11y-dyslexia] { --a11y-dys-font: "OpenDyslexic", "Atkinson Hyperlegible", "Lexend", Verdana, "Trebuchet MS", Tahoma, Arial, sans-serif; }
html[data-a11y-dyslexia] body :is(p, li, dd, dt, blockquote, figcaption, label, legend, a, button, input, textarea, select, td, th, summary, h1, h2, h3, h4, h5, h6, span, div, small, strong, b, em, i, cite):not(#wielder-header *, svg *, code, pre, kbd, samp) {
  font-family: var(--a11y-dys-font) !important;
}
html[data-a11y-dyslexia] body :is(em, i, cite, address):not(#wielder-header *) { font-style: normal !important; }
html[data-a11y-dyslexia] body :is(p, li, dd, dt, blockquote, figcaption, label, a, button, input, textarea, td, th, h1, h2, h3, h4, h5, h6, span):not(#wielder-header *, svg *) {
  letter-spacing: 0.05em !important;
  word-spacing: 0.16em !important;
}
html[data-a11y-dyslexia] body :is(p, li, dd, blockquote, figcaption, .article, .dek, textarea):not(#wielder-header *) { line-height: 1.6 !important; }

/* Focus and links: a thick two-tone ring on whatever has keyboard focus (visible on any colour), links underlined and lit on hover. */
html[data-a11y-focus="strong"] :focus-visible { outline: 3px solid #ffbf1f !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px #0b0c10 !important; }
html[data-a11y-focus="strong"] a[href]:not(#wielder-header *) { text-decoration-line: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 0.18em; }
html[data-a11y-focus="strong"] a[href]:not(#wielder-header *):hover { background: rgb(255 191 31 / 0.28); }

/* Reduced transparency: no blur behind any surface, whether it was asked for here or by the system. Surfaces that want a solid
   fill read html[data-a11y-transparency] (the control area does). */
html[data-a11y-transparency] *, html[data-a11y-transparency] *::before, html[data-a11y-transparency] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
@media (prefers-reduced-transparency: reduce) {
  *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Larger cursor: the arrow, the hand over links and buttons, and the text beam, drawn at 40 px (large) or 56 px (xl) with a
   white keyline so they read on any colour. Fine pointers only: a touch screen has no cursor. */
@media (any-pointer: fine) {
  html[data-a11y-cursor="large"] {
    --a11y-cur-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 32 32'%3E%3Cpath d='M4 2v23l6-5.5 4.5 9.5 4-1.8L14 18h8z' fill='black' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3;
    --a11y-cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 32 32'%3E%3Cpath d='M12 3.5c1.1 0 2 .9 2 2V14h.5v-1.6c0-1.1.9-2 2-2s2 .9 2 2V14h.5v-.9c0-1.1.9-2 2-2s2 .9 2 2V21c0 4-3 7-7 7h-2c-2.6 0-4.3-1.2-5.6-3.2L6 19.4c-.6-1-.2-2 .7-2.4s1.8-.1 2.4.7L10 19V5.5c0-1.1.9-2 2-2z' fill='white' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 15 4;
    --a11y-cur-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 32 32'%3E%3Cpath d='M11 4h10M16 4v24M11 28h10' fill='none' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M11 4h10M16 4v24M11 28h10' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 20 20;
  }
  html[data-a11y-cursor="xl"] {
    --a11y-cur-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 32 32'%3E%3Cpath d='M4 2v23l6-5.5 4.5 9.5 4-1.8L14 18h8z' fill='black' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 7 4;
    --a11y-cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 32 32'%3E%3Cpath d='M12 3.5c1.1 0 2 .9 2 2V14h.5v-1.6c0-1.1.9-2 2-2s2 .9 2 2V14h.5v-.9c0-1.1.9-2 2-2s2 .9 2 2V21c0 4-3 7-7 7h-2c-2.6 0-4.3-1.2-5.6-3.2L6 19.4c-.6-1-.2-2 .7-2.4s1.8-.1 2.4.7L10 19V5.5c0-1.1.9-2 2-2z' fill='white' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 21 6;
    --a11y-cur-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 32 32'%3E%3Cpath d='M11 4h10M16 4v24M11 28h10' fill='none' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M11 4h10M16 4v24M11 28h10' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 28 28;
  }
  html[data-a11y-cursor], html[data-a11y-cursor] * { cursor: var(--a11y-cur-arrow), auto !important; }
  html[data-a11y-cursor] :is(a[href], button, summary, select, label[for], [role="button"], [role="switch"], [role="radio"], [role="tab"], [role="link"], input:is([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="file"]), [tabindex]:not([tabindex="-1"], input, textarea)) { cursor: var(--a11y-cur-hand), pointer !important; }
  html[data-a11y-cursor] :is(textarea, [contenteditable=""], [contenteditable="true"], input:not([type]), input:is([type="text"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="password"], [type="number"])) { cursor: var(--a11y-cur-text), text !important; }
}