/*
 * Vouchlog — visitor toolbar.
 * Everything is prefixed a11ylb- and sized in px so the theme cannot reach in,
 * and so the panel stays usable at every text size the visitor picks.
 */

.a11ylb-toolbar {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483600;
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #111;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: left;
}

.a11ylb-side-right { right: calc(16px + env(safe-area-inset-right, 0px)); }
.a11ylb-side-left { left: calc(16px + env(safe-area-inset-left, 0px)); }

.a11ylb-toolbar button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.a11ylb-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.a11ylb-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1a4dab;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.a11ylb-toggle:hover { background: #123a85; }

.a11ylb-icon { fill: currentColor; display: block; }

.a11ylb-toolbar :focus-visible {
  outline: 3px solid #111 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px #ffd400 !important;
}

.a11ylb-panel {
  position: absolute;
  bottom: 64px;
  width: 300px;
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px;
  border: 1px solid #444;
  border-radius: 12px;
  background: #fff;
  color: #111;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
  box-sizing: border-box;
}

.a11ylb-panel[hidden] { display: none; }
.a11ylb-side-right .a11ylb-panel { right: 0; }
.a11ylb-side-left .a11ylb-panel { left: 0; }

.a11ylb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.a11ylb-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.a11ylb-close {
  width: 44px;
  height: 44px;
  border: 1px solid #767676;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-size: 24px !important;
  line-height: 1;
}

.a11ylb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.a11ylb-size { display: inline-flex; align-items: center; gap: 6px; }

.a11ylb-size button,
.a11ylb-opt,
.a11ylb-reset {
  min-height: 44px;
  border: 1px solid #767676;
  border-radius: 8px;
  background: #f4f4f4;
  color: #111;
}

.a11ylb-size button { min-width: 48px; font-weight: 700; }

.a11ylb-size-value { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }

.a11ylb-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.a11ylb-opt { padding: 8px; text-align: center; }

.a11ylb-opt[aria-pressed="true"] {
  background: #1a4dab;
  border-color: #1a4dab;
  color: #fff;
}

.a11ylb-opt[aria-pressed="true"]::before { content: "\2713\00a0"; }

.a11ylb-reset { width: 100%; margin-top: 10px; }

.a11ylb-note { margin: 10px 0 0; font-size: 13px; color: #333; }
.a11ylb-note a { color: #1a4dab; text-decoration: underline; }

/* Phones: a bottom sheet the full width of the screen, never wider than it. */
@media (max-width: 600px) {
  .a11ylb-toolbar.is-open { left: 0; right: 0; bottom: 0; }
  .a11ylb-toolbar.is-open .a11ylb-toggle { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .a11ylb-side-right.is-open .a11ylb-toggle { right: calc(16px + env(safe-area-inset-right, 0px)); }
  .a11ylb-side-left.is-open .a11ylb-toggle { left: calc(16px + env(safe-area-inset-left, 0px)); }
  .a11ylb-toolbar.is-open .a11ylb-panel {
    left: 8px;
    right: 8px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: calc(80vh - 80px);
    max-height: calc(80dvh - 80px);
  }
}

/* ── the preferences themselves (classes on <html>) ─────────────────────── */

html.a11ylb-contrast body,
html.a11ylb-contrast body *:not(.a11ylb-toolbar):not(.a11ylb-toolbar *):not(.a11ylb-guide-bar):not(img):not(video):not(svg):not(svg *) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html.a11ylb-contrast body a:not(.a11ylb-toolbar *),
html.a11ylb-contrast body a:not(.a11ylb-toolbar *) * {
  color: #ffeb3b !important;
}

html.a11ylb-underline body a:not(.a11ylb-toolbar *) { text-decoration: underline !important; }

html.a11ylb-font body *:not(.a11ylb-toolbar):not(.a11ylb-toolbar *):not(i):not(code):not(pre):not(kbd):not([class*="icon"]):not([class*="dashicons"]):not([class*="fa-"]) {
  font-family: Verdana, Tahoma, "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: .04em !important;
  word-spacing: .14em !important;
}

html.a11ylb-font body p:not(.a11ylb-toolbar *),
html.a11ylb-font body li:not(.a11ylb-toolbar *) { line-height: 1.7 !important; }

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

html.a11ylb-focus :focus-visible,
html.a11ylb-focus :focus {
  outline: 3px solid #111 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #ffd400 !important;
}

/* The bar is .a11ylb-guide-bar, never .a11ylb-guide: <html> carries that class
   while the preference is on, and this rule on <html> kills every click. */
.a11ylb-guide-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  pointer-events: none;
  z-index: 2147483599;
  background: rgba(255, 212, 0, .22);
  border-top: 2px solid rgba(0, 0, 0, .8);
  border-bottom: 2px solid rgba(0, 0, 0, .8);
}