/* ============================================================
   ANABA — Accessibility Widget
   Standalone — does not depend on style.css
   ============================================================ */

/* ── FAB ─────────────────────────────────────────────────── */
#a11y-widget {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 9900;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
}

#a11y-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0A0A1A;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: background 0.2s, transform 0.15s;
  position: relative;
  z-index: 1;
}
#a11y-fab:hover { background: #1a1a2e; transform: scale(1.06); }
#a11y-fab:focus-visible {
  outline: 3px solid #C9A96E;
  outline-offset: 3px;
}
#a11y-fab svg { width: 26px; height: 26px; }

/* ── Panel ──────────────────────────────────────────────── */
#a11y-panel {
  position: absolute;
  bottom: 64px;
  left: 0;
  width: 340px;
  max-height: 540px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #0A0A1A;
}
#a11y-panel[hidden] { display: none; }

/* ── Panel Header ────────────────────────────────────────── */
.a11y-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem 0.7rem;
  border-bottom: 1px solid #ebebeb;
  flex-shrink: 0;
  background: #0A0A1A;
  color: #fff;
}
.a11y-hdr h2 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  font-family: inherit;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
}
.a11y-close-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.a11y-close-btn:hover { background: rgba(255,255,255,0.3); }
.a11y-close-btn:focus-visible { outline: 2px solid #C9A96E; outline-offset: 2px; }

/* ── Tabs ────────────────────────────────────────────────── */
.a11y-tabs {
  display: flex;
  border-bottom: 2px solid #ebebeb;
  flex-shrink: 0;
  background: #fafafa;
}
.a11y-tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 0.6rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
  font-family: inherit;
}
.a11y-tab-btn:hover { color: #0A0A1A; }
.a11y-tab-btn[aria-selected="true"] { color: #0A0A1A; }
.a11y-tab-btn[aria-selected="true"]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: #0A0A1A;
  border-radius: 2px;
}
.a11y-tab-btn:focus-visible { outline: 2px solid #0A0A1A; outline-offset: -2px; }

/* ── Tab panels ──────────────────────────────────────────── */
.a11y-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.1rem 0.5rem;
  scrollbar-width: thin;
}
.a11y-panel-body[hidden] { display: none; }

/* ── Section heading ─────────────────────────────────────── */
.a11y-sect-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #767676;
  margin: 0 0 0.55rem;
}

/* ── Profile grid ────────────────────────────────────────── */
.a11y-profiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}
.a11y-profile-btn {
  background: #f4f4f4;
  border: 2px solid transparent;
  border-radius: 9px;
  padding: 0.6rem 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  text-align: center;
  line-height: 1.35;
  transition: all 0.15s;
  font-family: inherit;
}
.a11y-profile-btn:hover {
  background: #e8e8ef;
  border-color: #0A0A1A;
  color: #0A0A1A;
}
.a11y-profile-btn.active {
  background: #0A0A1A;
  border-color: #0A0A1A;
  color: #fff;
}
.a11y-profile-btn:focus-visible { outline: 2px solid #0A0A1A; outline-offset: 2px; }

/* ── Stepper row ─────────────────────────────────────────── */
.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
  gap: 0.5rem;
}
.a11y-row-lbl {
  font-size: 0.82rem;
  font-weight: 600;
  color: #222;
  flex: 1;
}
.a11y-stepper {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.a11y-step-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #ddd;
  background: #fff;
  font-size: 1rem;
  font-weight: 700;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s;
  font-family: inherit;
}
.a11y-step-btn:hover { border-color: #0A0A1A; color: #0A0A1A; background: #e8e8ef; }
.a11y-step-btn:focus-visible { outline: 2px solid #0A0A1A; outline-offset: 2px; }
.a11y-step-val {
  min-width: 38px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #222;
}

/* ── Toggle row ──────────────────────────────────────────── */
.a11y-tog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  gap: 0.5rem;
}
.a11y-tog-lbl {
  font-size: 0.82rem;
  font-weight: 600;
  color: #222;
  flex: 1;
}
.a11y-sw {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.a11y-sw input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.a11y-sw-track {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s;
}
.a11y-sw-track::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.a11y-sw input:checked + .a11y-sw-track { background: #0A0A1A; }
.a11y-sw input:checked + .a11y-sw-track::before { transform: translateX(18px); }
.a11y-sw input:focus-visible + .a11y-sw-track {
  outline: 2px solid #0A0A1A;
  outline-offset: 2px;
}

/* ── Divider ─────────────────────────────────────────────── */
.a11y-divider {
  height: 1px;
  background: #ebebeb;
  margin: 0.75rem 0;
}

/* ── Color filter pills ──────────────────────────────────── */
.a11y-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.a11y-filter-btn {
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  border: 2px solid #ddd;
  background: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.a11y-filter-btn:hover { border-color: #0A0A1A; color: #0A0A1A; }
.a11y-filter-btn.active { background: #0A0A1A; border-color: #0A0A1A; color: #fff; }
.a11y-filter-btn:focus-visible { outline: 2px solid #0A0A1A; outline-offset: 2px; }

/* ── Swatches ────────────────────────────────────────────── */
.a11y-swatches {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.a11y-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #ddd;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  background: #fff;
}
.a11y-swatch:hover { transform: scale(1.18); box-shadow: 0 0 0 2px #0A0A1A; }
.a11y-swatch.active { border-color: #0A0A1A; box-shadow: 0 0 0 2px #0A0A1A; }
.a11y-swatch:focus-visible { outline: 2px solid #0A0A1A; outline-offset: 2px; }

/* ── Reset button ────────────────────────────────────────── */
.a11y-reset-all {
  display: block;
  width: calc(100% - 2.2rem);
  margin: 0.5rem 1.1rem 0.9rem;
  padding: 0.55rem;
  background: #f6f6f6;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  flex-shrink: 0;
}
.a11y-reset-all:hover { background: #fff0f0; border-color: #e00; color: #c00; }
.a11y-reset-all:focus-visible { outline: 2px solid #0A0A1A; outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════
   APPLIED EFFECT CLASSES
══════════════════════════════════════════════════════════ */
#page-content.a11y-hide-images img,
#page-content.a11y-hide-images video { visibility: hidden; }

#page-content.a11y-hi-links a {
  outline: 3px solid #FF6600 !important;
  outline-offset: 2px;
}
#page-content.a11y-hi-headings h1,
#page-content.a11y-hi-headings h2,
#page-content.a11y-hi-headings h3,
#page-content.a11y-hi-headings h4,
#page-content.a11y-hi-headings h5,
#page-content.a11y-hi-headings h6 {
  outline: 3px solid #7B00D4 !important;
  outline-offset: 2px;
}

body.a11y-big-cursor,
body.a11y-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M5 3l23 20-9 1 5 9-4 2-5-9-5 6z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 5 3, auto !important;
}

/* ── Reading Guide ───────────────────────────────────────── */
#a11y-guide {
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  background: #0A0A1A;
  pointer-events: none;
  z-index: 9800;
  opacity: 0.75;
  display: none;
}

/* ── Reading Mask ────────────────────────────────────────── */
#a11y-mask-top,
#a11y-mask-bot {
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;
  z-index: 9799;
  display: none;
}
#a11y-mask-top { top: 0; }
#a11y-mask-bot { bottom: 0; }

/* ── Text Magnifier ──────────────────────────────────────── */
#a11y-magnifier {
  position: fixed;
  background: #fff;
  border: 2px solid #0A0A1A;
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  font-size: 1.6rem;
  font-weight: 600;
  max-width: 320px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 9890;
  display: none;
  word-break: break-word;
  line-height: 1.3;
  color: #0a0a1a;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 420px) {
  #a11y-panel { width: calc(100vw - 2.5rem); }
  #a11y-widget { left: 1rem; bottom: 1.25rem; }
}