/* Accessibility menu: one floating control, shared by the site and the app.
   Preferences are classes on <html> (set by a11y.js before first paint). */

/* ── Preferences ── */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-3 { font-size: 137.5%; }

:root.a11y-contrast, html.theme-light.a11y-contrast {
  --text-secondary: var(--text-primary);
  --text-muted: var(--text-primary);
  --border-subtle: var(--border-medium);
}
html.a11y-contrast.theme-light { --border-medium: #1c2340; --sun-text: #6b3d00; }
html.a11y-contrast:not(.theme-light) { --border-medium: #eceef5; }
html.a11y-contrast ::placeholder { color: var(--text-primary); opacity: .85; }

html.a11y-links a:not(.a11y-fab) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .2em !important; }

html.a11y-font body, html.a11y-font body *:not(svg):not(svg *) { font-family: Arial, 'Heebo', system-ui, sans-serif !important; letter-spacing: .01em; word-spacing: .08em; }

html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1.2L16 21l-3 1.3-3.4-6.6L4 20z' fill='%231c2340' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.a11y-cursor a, html.a11y-cursor button, html.a11y-cursor [role="button"], html.a11y-cursor label, html.a11y-cursor select, html.a11y-cursor summary {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V4.5a1.5 1.5 0 0 1 3 0V10m0-.5v-1a1.5 1.5 0 0 1 3 0V11m0-1a1.5 1.5 0 0 1 3 0v4.5a6.5 6.5 0 0 1-6.5 6.5h-.6a6 6 0 0 1-4.4-1.9L4.7 16a1.6 1.6 0 0 1 2.3-2.2L9 15.5' fill='%23fff' stroke='%231c2340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 14 4, pointer !important;
}

html.a11y-focus :focus-visible, html.a11y-focus :focus:not(:focus-visible):is(input, select, textarea) {
  outline: 3px solid var(--sun) !important; outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--text-primary) !important;
}

/* ── The control ── */
.a11y-fab {
  position: fixed; z-index: 65; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  /* Side safe areas (landscape notch) when the page opts into viewport-fit=cover; 0 otherwise. */
  inset-inline-end: calc(20px + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--text-primary); color: var(--bg-primary);
  /* Page-coloured 1px ring: invisible on the page, a faint edge where the button crosses the dark footer. */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-primary) 50%, transparent), 4px 5px 0 rgb(var(--cast-rgb) / 35%); cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease;
}
.a11y-fab svg { width: 28px; height: 28px; }
.a11y-fab:hover { background: var(--shade-deep, var(--text-primary)); }
.a11y-fab:active { transform: scale(.96); }
.a11y-fab:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.a11y-fab[aria-expanded="true"] { background: var(--sun); color: var(--sun-ink); }
/* Stay clear of the cookie notice while it is on screen. */
body:has(.cookie-banner) .a11y-fab { bottom: calc(20px + env(safe-area-inset-bottom, 0px) + var(--a11y-lift, 0px)); }

.a11y-panel {
  position: fixed; z-index: 66; bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: calc(20px + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
  width: min(340px, calc(100vw - 32px)); max-height: calc(100dvh - 120px); overflow: auto;
  padding: 16px; border: 1px solid var(--border-medium); border-radius: var(--radius-lg);
  background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-xl);
  font-family: var(--font-sans); font-size: 1rem; text-align: start;
  transform-origin: bottom left;
  transition: opacity var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out), visibility 0s linear 0s;
}
.a11y-panel[hidden] { display: block; visibility: hidden; opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none;
  transition: opacity var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui); }
body:has(.cookie-banner) .a11y-panel { bottom: calc(80px + env(safe-area-inset-bottom, 0px) + var(--a11y-lift, 0px)); }
.a11y-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--text-primary); }
.a11y-panel-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.a11y-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-medium); border-radius: var(--radius-md); background: transparent; color: var(--text-primary); cursor: pointer; }
.a11y-close svg { width: 18px; height: 18px; }
.a11y-close:hover { background: var(--bg-secondary); }

.a11y-size { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 6px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.a11y-size span:first-child { font-weight: 600; font-size: .92rem; }
.a11y-size output { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; }
.a11y-size button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-medium); border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary); font: 700 1rem/1 var(--font-sans); cursor: pointer; }
.a11y-size button:disabled { opacity: .4; cursor: default; }

.a11y-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.a11y-option {
  position: relative; display: grid; justify-items: center; gap: 6px; width: 100%; min-height: 76px; padding: 10px 8px;
  border: 1px solid var(--border-medium); border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary);
  font: 600 .86rem/1.25 var(--font-sans); text-align: center; cursor: pointer;
  transition: border-color var(--dur-ui) ease, background-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
.a11y-option svg { width: 24px; height: 24px; }
.a11y-option:hover { border-color: var(--text-primary); }
.a11y-option:active { transform: scale(.97); }
.a11y-option[aria-pressed="true"] { border: 2px solid var(--sun); background: var(--brand-soft); padding: 9px 7px; }
.a11y-option[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 6px; inset-inline-start: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%231c2340' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.a11y-option:focus-visible, .a11y-size button:focus-visible, .a11y-close:focus-visible, .a11y-foot a:focus-visible, .a11y-reset:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-subtle); font-size: .88rem; }
.a11y-foot a { color: var(--text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.a11y-reset { min-height: 36px; padding: 6px 12px; border: 1px solid var(--border-medium); border-radius: var(--radius-md); background: transparent; color: var(--text-primary); font: 600 .86rem/1 var(--font-sans); cursor: pointer; }
.a11y-reset:hover { background: var(--bg-secondary); }

@media (max-width: 600px) {
  .a11y-fab { inset-inline-end: calc(12px + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))); width: 44px; height: 44px; }
  .a11y-panel { inset-inline: calc(12px + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))); width: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  body:has(.cookie-banner) .a11y-panel { bottom: calc(70px + env(safe-area-inset-bottom, 0px) + var(--a11y-lift, 0px)); }
  /* Touch-sized controls inside the panel. */
  .a11y-close, .a11y-size button { width: 44px; height: 44px; }
  .a11y-reset { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .a11y-panel, .a11y-panel[hidden] { transition: none; }
}
@media print { .a11y-fab, .a11y-panel { display: none !important; } }