/* ── The accessibility layer, per תקנות שוויון זכויות לאנשים עם מוגבלות (התאמות
      נגישות לשירות), התשע"ג-2013 and ת"י 5568 level AA.

      The effects apply to `body > *` rather than to `html` or `body` so the
      widget itself sits outside them: a panel inside an inverted, zoomed
      subtree cannot be read by the person trying to switch the inversion
      back off. ── */

body > *:not(.volA11y) {
  zoom: var(--a11y-zoom, 1);
  filter: var(--a11y-filter, none);
}

html[data-a11y-contrast="dark"] body > *:not(.volA11y) img,
html[data-a11y-contrast="dark"] body > *:not(.volA11y) video,
html[data-a11y-contrast="dark"] body > *:not(.volA11y) iframe,
html[data-a11y-contrast="dark"] body > *:not(.volA11y) [data-a11y-keep-color] {
  filter: invert(1) hue-rotate(180deg);
}

html[data-a11y-contrast="high"] {
  --g500: var(--ink);
  --g600: var(--ink);
  --hair-dark: var(--ink);
  --muted-dark: var(--ivory);
}

html[data-a11y-underline] body > *:not(.volA11y) a {
  text-decoration: underline;
}

html[data-a11y-font="readable"] {
  --sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --serif: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

html[data-a11y-font="readable"] body > *:not(.volA11y) * {
  font-family: var(--sans) !important;
}

html[data-a11y-motion="stopped"] {
  scroll-behavior: auto;
}

html[data-a11y-motion="stopped"] body > *:not(.volA11y) *,
html[data-a11y-motion="stopped"] body > *:not(.volA11y) *::before,
html[data-a11y-motion="stopped"] body > *:not(.volA11y) *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

html[data-a11y-cursor="big"] body * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'><path d='M6 2 L6 26 L12 20 L16 30 L21 28 L17 18 L26 18 Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='round'/></svg>") 4 2, auto;
}

html[data-a11y-focus="strong"] :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

html[data-a11y-spacing="wide"] body > *:not(.volA11y) p,
html[data-a11y-spacing="wide"] body > *:not(.volA11y) li,
html[data-a11y-spacing="wide"] body > *:not(.volA11y) dd,
html[data-a11y-spacing="wide"] body > *:not(.volA11y) dt {
  line-height: 1.8;
  letter-spacing: 0.02em;
  word-spacing: 0.08em;
}

/* ── the widget ── */
.volA11y {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  z-index: 2147483000;
  font-family: var(--sans);
}

.volA11y-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--ivory);
  color: var(--ink);
  box-shadow: 0 6px 24px rgba(15, 14, 13, 0.18);
}

.volA11y-panel {
  position: fixed;
  inset-block-end: 80px;
  inset-inline-end: 20px;
  width: min(330px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--ivory);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(15, 14, 13, 0.22);
}

.volA11y-panel[hidden] {
  display: none;
}

.volA11y-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.volA11y-head h2 {
  font: 500 16px/1.3 var(--sans);
}

.volA11y-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font: 400 18px/1 var(--sans);
}

.volA11y-group {
  margin-bottom: 16px;
}

.volA11y-legend {
  display: block;
  margin-bottom: 8px;
  color: var(--g600);
  font: 500 11px/1.2 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.volA11y-steps {
  display: flex;
  gap: 6px;
}

.volA11y-step {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid var(--muted-dark);
  border-radius: 6px;
  font: 400 13px/1.2 var(--sans);
}

.volA11y-step[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ivory);
}

.volA11y-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 6px;
  font: 400 14px/1.3 var(--sans);
  text-align: start;
}

.volA11y-toggle:hover,
.volA11y-close:hover {
  background: var(--band3);
}

.volA11y-mark {
  flex: none;
  width: 34px;
  height: 20px;
  border: 1px solid var(--muted-dark);
  border-radius: 10px;
}

.volA11y-toggle[aria-pressed="true"] .volA11y-mark {
  border-color: var(--ink);
  background: var(--ink);
}

.volA11y-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--muted-dark);
}

.volA11y-reset {
  padding: 8px 12px;
  border: 1px solid var(--muted-dark);
  border-radius: 6px;
  font: 400 13px/1.2 var(--sans);
}

.volA11y-statement {
  color: var(--g600);
  font: 400 13px/1.2 var(--sans);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .volA11y {
    inset-block-end: 14px;
    inset-inline-end: 14px;
  }

  .volA11y-panel {
    inset-block-end: 72px;
    inset-inline-end: 14px;
  }
}