/* ============================================================================
   a11y.css - accessibility widget styles. Pairs with a11y.js.

   Self-contained: uses its own --a11y-* variables with fallbacks, so it works
   on a site with no design tokens at all. If the host site defines --accent,
   --bg, --ink etc., it adopts them automatically.

   Install:  <link rel="stylesheet" href="/a11y/a11y.css">
   ============================================================================ */

:root {
  --a11y-accent: var(--accent, #1c5d4a);
  --a11y-accent-ink: var(--accent-ink, #ffffff);
  --a11y-bg: var(--bg, #ffffff);
  --a11y-surface: var(--surface, #f4f4f5);
  --a11y-ink: var(--ink, #18181b);
  --a11y-ink-soft: var(--ink-soft, #52525b);
  --a11y-radius: var(--radius-md, 10px);
  --a11y-z: 2147483000;          /* above any site chrome, below nothing */
}

/* --- trigger --------------------------------------------------------------
   This is a third-party widget dropped into someone else's stylesheet. The
   host's CSS loads after ours and a single `button { position: static }` or a
   reset is enough to beat a plain class selector on source order.

   Measured on a live site: the trigger rendered position:static,
   display:inline-block, 44x34, sitting at y=8826 at the very bottom of the
   page. The widget was installed correctly and simply invisible.

   So every STRUCTURAL property is !important - the ones that decide whether
   the button floats at all. Colour, shadow and transition are left soft on
   purpose, so a project can still theme it.
   --------------------------------------------------------------------------- */
.a11y-fab {
  position: fixed !important;
  inset-inline-start: 16px !important;
  inset-inline-end: auto !important;
  inset-block-end: calc(16px + env(safe-area-inset-bottom)) !important;
  inset-block-start: auto !important;
  z-index: var(--a11y-z) !important;
  inline-size: 48px !important;
  block-size: 48px !important;
  min-inline-size: 48px !important;
  min-block-size: 48px !important;
  max-inline-size: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  float: none !important;
  transform: none !important;
  background: var(--a11y-accent);
  color: var(--a11y-accent-ink);
  cursor: pointer;
  box-shadow: 0 4px 16px rgb(0 0 0 / .22);
  transition: transform .18s ease;
}
/* The icon must not be resized by a host `svg { width: 100% }` rule. */
.a11y-fab > svg {
  inline-size: 28px !important;
  block-size: 28px !important;
  display: block !important;
  max-inline-size: none !important;
}
.a11y-fab:hover { transform: scale(1.06); }
.a11y-fab:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 3px; }
/* Keep clear of a sticky mobile CTA bar if the site has one. */
@media (max-width: 899px) {
  body:has(.sticky-bar) .a11y-fab { inset-block-end: calc(68px + env(safe-area-inset-bottom)); }
}

/* --- panel ---------------------------------------------------------------- */
.a11y-panel {
  position: fixed !important;
  inset-inline-start: 16px !important;
  inset-inline-end: auto !important;
  inset-block-end: calc(76px + env(safe-area-inset-bottom)) !important;
  inset-block-start: auto !important;
  z-index: calc(var(--a11y-z) + 1) !important;
  inline-size: min(330px, calc(100vw - 32px));
  max-block-size: min(76vh, 620px);
  overflow-y: auto;
  background: var(--a11y-bg);
  color: var(--a11y-ink);
  border: 1px solid color-mix(in oklab, var(--a11y-ink) 18%, transparent);
  border-radius: var(--a11y-radius);
  box-shadow: 0 18px 48px rgb(0 0 0 / .26);
  padding: 20px;
  display: grid;
  gap: 16px;
  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.a11y-panel[hidden] { display: none !important; }
.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a11y-panel__head h2 { font-size: 18px; margin: 0; font-weight: 700; }
.a11y-close {
  background: none; border: none; cursor: pointer; color: inherit;
  font-size: 26px; line-height: 1; min-inline-size: 44px; min-block-size: 44px;
}

.a11y-group { display: grid; gap: 8px; }
.a11y-group__label { font-size: 13px; font-weight: 700; color: var(--a11y-ink-soft); }
.a11y-row { display: flex; align-items: center; gap: 8px; }
.a11y-row output { flex: 1; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
/* Full width applies only to DIRECT children of a group. The text-size row is
   nested one level deeper, so its three columns are untouched - a child
   selector avoids the specificity tie that an :is()/!important pair created. */
.a11y-panel .a11y-group > button[data-a11y] { display: block !important; inline-size: 100% !important; }
.a11y-row button[data-a11y] { inline-size: 56px; flex: none; }
.a11y-row output { inline-size: auto; }

.a11y-panel button[data-a11y] {
  font: inherit;
  min-block-size: 44px;
  padding: 8px 12px;
  background: var(--a11y-surface);
  color: var(--a11y-ink);
  cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--a11y-ink) 16%, transparent);
  border-radius: 6px;
  text-align: start;
}
.a11y-panel button[data-a11y]:hover { border-color: var(--a11y-accent); }
.a11y-panel button:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; }

/* State is shown by colour AND a check mark - never colour alone. */
.a11y-panel button[aria-pressed="true"],
.a11y-panel button[aria-checked="true"] {
  background: var(--a11y-accent);
  color: var(--a11y-accent-ink);
  border-color: var(--a11y-accent);
}
.a11y-panel button[aria-pressed="true"]::after,
.a11y-panel button[aria-checked="true"]::after { content: " \2713"; font-weight: 700; }

.a11y-reset {
  font: inherit; min-block-size: 44px; cursor: pointer;
  background: none; color: inherit;
  border: 1px solid currentColor; border-radius: 6px;
}
.a11y-keys { display: grid; gap: 6px; padding-block-start: 4px;
  border-block-start: 1px solid color-mix(in oklab, var(--a11y-ink) 12%, transparent); }
.a11y-key { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--a11y-ink-soft); }
.a11y-key kbd {
  font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  padding: 4px 6px; white-space: nowrap; flex: none; min-inline-size: 92px; text-align: center;
  background: var(--a11y-surface); color: var(--a11y-ink);
  border: 1px solid color-mix(in oklab, var(--a11y-ink) 22%, transparent);
  border-radius: 4px;
}
.a11y-note { font-size: 13px; color: var(--a11y-ink-soft); margin: 0; }
.a11y-note a { color: inherit; }

/* --- applied states ------------------------------------------------------- */
html[data-a11y-contrast="on"] { filter: contrast(1.45); }
html[data-a11y-invert="on"]   { filter: invert(1) hue-rotate(180deg); }
html[data-a11y-invert="on"] :is(img, video, picture, iframe, svg[data-logo]) {
  filter: invert(1) hue-rotate(180deg);
}
html[data-a11y-links="on"] a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}
html[data-a11y-readable="on"] * {
  font-family: Arial, "Assistant", "Segoe UI", sans-serif !important;
  letter-spacing: .01em;
  word-spacing: .05em;
}
html[data-a11y-motion="off"] *,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
/* "on" lets a user opt back into motion even when the OS asks to reduce it. */
@media (prefers-reduced-motion: reduce) {
  html[data-a11y-motion="on"] * {
    animation-duration: revert !important;
    transition-duration: revert !important;
  }
}
html[data-a11y-cursor="on"], html[data-a11y-cursor="on"] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l7 18 2.5-7.5L21 10z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 4 2, auto !important;
}
.a11y-guide {
  position: fixed; inset-inline: 0;
  block-size: 2.2rem;
  z-index: calc(var(--a11y-z) - 1);
  background: color-mix(in oklab, var(--a11y-accent) 20%, transparent);
  border-block: 2px solid var(--a11y-accent);
  pointer-events: none;
}
.a11y-guide[hidden] { display: none; }

/* The widget itself must never be inverted or contrast-shifted out of use. */
html[data-a11y-invert="on"] :is(.a11y-fab, .a11y-panel) { filter: invert(1) hue-rotate(180deg); }