/* Accessibility menu and the display modes it switches on. Shared by every page; loaded after the page's own styles. */

/* Modes: set on <html> before paint by the inline script in <head>, and by a11y.js */
:root.a11y-contrast {
  --paper: #fff; --paper-warm: #fff; --linen: #fff; --taupe: #fff; --sand: #fff; --blush: #fff; --peach: #fff; --sea-soft: #fff; --linen-book: #fff;
  --caramel: #5a3a22; --rust: #7a2a10; --on-rust: #fff; --sea: #2f5656; --sage: #4c5a2c;
  --ink: #000; --ink-soft: #000; --focus: #000;
  --night: #000; --on-night: #fff; --on-night-soft: #fff;
  color-scheme: light;
}
:root.a11y-links a { text-decoration-line: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; }
:root.a11y-font body, :root.a11y-font body * { font-family: Arial, "Segoe UI", sans-serif !important; font-weight: 400 !important; letter-spacing: 0.01em !important; }
:root.a11y-font h1, :root.a11y-font h2, :root.a11y-font h3, :root.a11y-font strong { font-weight: 500 !important; }
:root.a11y-font p, :root.a11y-font li, :root.a11y-font blockquote, :root.a11y-font dd { line-height: 1.7 !important; }

/* The margin the page keeps clear for the tab. Pages use it on both sides (var(--strip)), so the layout stays centred
   whichever edge the tab is docked to. A tab dragged off the edge needs no margin. */
:root { --strip: 36px; }
:root[data-a11y-dock="free"] { --strip: 0px; }

/* The tab: flat against the edge it is docked to, rounded all round when it floats. a11y.js sets left/top. */
.a11y { position: fixed; z-index: 30; left: 0; top: 55vh; direction: rtl; font-family: var(--font); }
.a11y__btn { display: grid; place-items: center; width: 32px; height: 50px; padding: 0; border: 0; border-radius: 14px; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 2px var(--paper), var(--shadow-float); cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transition: transform 160ms var(--ease-out, ease-out); } /* taste-skill-ignore: a floating control needs to lift off every section */
.a11y[data-side="left"] .a11y__btn { border-radius: 0 14px 14px 0; }
.a11y[data-side="right"] .a11y__btn { border-radius: 14px 0 0 14px; }
.a11y__btn svg { width: 24px; height: 24px; }
.a11y__btn:active { transform: scale(0.96); }
.a11y.is-dragging .a11y__btn { cursor: grabbing; transform: scale(1.06); transition: none; }

/* The panel opens beside the tab, toward the middle of the screen. a11y.js sets left/top. */
.a11y__panel { position: fixed; left: 56px; top: 12px; width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--taupe), var(--shadow-float); animation: a11y-in 200ms var(--ease-out, ease-out); } /* taste-skill-ignore: floating panel */
.a11y__panel[hidden] { display: none; }
@keyframes a11y-in { from { opacity: 0; transform: scale(0.97); } }
.a11y__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a11y__panel h2 { margin: 0; font-size: calc(22px * var(--fs, 1)); font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; }
.a11y__close { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.a11y__close svg { width: 20px; height: 20px; }
.a11y__note { margin: 6px 0 16px; font-size: calc(14px * var(--fs, 1)); line-height: 1.5; color: var(--ink-soft); }
.a11y__list { display: grid; gap: 8px; }
.a11y__row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 16px 4px 6px; border-radius: 14px; background: var(--linen); font-size: calc(16px * var(--fs, 1)); }
.a11y__row > span { margin-inline-end: auto; }
.a11y__row output { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; }
.a11y__step { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); font: 400 calc(22px * var(--fs, 1))/1 var(--font); cursor: pointer; touch-action: manipulation; }
.a11y__step svg { width: 20px; height: 20px; }
.a11y__step:disabled { opacity: 0.4; cursor: default; }
.a11y__opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 4px 16px; border: 0; border-radius: 14px; background: var(--linen); color: var(--ink); font: 400 calc(16px * var(--fs, 1))/1.3 var(--font); text-align: start; cursor: pointer; touch-action: manipulation; }
.a11y__opt::after { content: ""; flex: none; margin-inline-start: auto; width: 38px; height: 22px; border-radius: 999px; background: var(--taupe) radial-gradient(circle at 11px 50%, var(--paper) 7px, transparent 7.5px) no-repeat; box-shadow: inset 0 0 0 1px var(--ink-soft); transition: background-position 160ms var(--ease-out, ease-out); }
.a11y__opt[aria-pressed="true"]::after { background-color: var(--ink); background-position: 16px 0; }
.a11y__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: calc(15px * var(--fs, 1)); }
.a11y__reset { min-height: 44px; padding: 0 16px; border: 1px solid var(--ink-soft); border-radius: 999px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.a11y__foot a { color: var(--rust); padding-block: 10px; text-underline-offset: 4px; }
.a11y :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .a11y__opt:hover, .a11y__step:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
@media (prefers-reduced-motion: reduce) { .a11y__panel { animation: none; } .a11y__btn, .a11y__opt::after { transition: none; } }
:root.still .a11y__panel { animation: none; }
:root.a11y-contrast .a11y__opt, :root.a11y-contrast .a11y__row, :root.a11y-contrast .a11y__step { box-shadow: inset 0 0 0 1.5px #000; }