/* =============================================
   ACCESSIBILITY TOOLBAR — Haven
   ============================================= */

/* ── Trigger Button ── */
.a11y-toolbar__trigger {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-ink, #0F1C2E);
  color: var(--c-bg, #F8F7F4);
  border: 3px solid #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(10, 10, 10, 0.25);
  transition: transform 0.15s ease-out, box-shadow 0.25s ease-out;
}

.a11y-toolbar__trigger::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--c-accent, #2A5FBF);
  opacity: 0;
  animation: a11y-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) 1.5s 2 forwards;
  pointer-events: none;
}

@keyframes a11y-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .a11y-toolbar__trigger::after { animation: none; }
}

.a11y-toolbar__trigger:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(10, 10, 10, 0.2);
}

.a11y-toolbar__trigger:active { transform: scale(0.96); }

.a11y-toolbar__trigger:focus-visible {
  outline: 3px solid var(--c-accent, #2A5FBF);
  outline-offset: 3px;
}

/* ── Panel ── */
.a11y-toolbar__panel {
  position: fixed;
  bottom: calc(1.5rem + 60px);
  right: 1.5rem;
  z-index: 10000;
  width: 280px;
  background: var(--c-bg, #F8F7F4);
  border: 1px solid var(--c-border, rgba(15,28,46,0.12));
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(10, 10, 10, 0.12);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.a11y-toolbar__panel[hidden] { display: none; }

/* ── Header ── */
.a11y-toolbar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.a11y-toolbar__title {
  font-family: var(--font-display, 'Instrument Serif', serif);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--c-ink, #0F1C2E);
}

.a11y-toolbar__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-mid, rgba(15,28,46,0.65));
  transition: background 0.15s ease-out;
}

.a11y-toolbar__close:hover { background: var(--c-bg-section, #F0EEE9); }

.a11y-toolbar__close:focus-visible {
  outline: 3px solid var(--c-ink, #0F1C2E);
  outline-offset: 2px;
}

/* ── Groups ── */
.a11y-toolbar__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.a11y-toolbar__group-label {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-faint, rgba(15,28,46,0.35));
}

/* ── Size controls row ── */
.a11y-toolbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.a11y-toolbar__size-value {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-weight: 500;
  font-size: 0.875rem;
  min-width: 3em;
  text-align: center;
  color: var(--c-ink, #0F1C2E);
}

/* ── Buttons ── */
.a11y-toolbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--c-border, rgba(15,28,46,0.12));
  border-radius: 8px;
  background: var(--c-bg, #F8F7F4);
  color: var(--c-ink, #0F1C2E);
  cursor: pointer;
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background 0.15s ease-out, border-color 0.15s ease-out;
}

.a11y-toolbar__row .a11y-toolbar__btn {
  width: 36px;
  height: 36px;
  padding: 0;
}

.a11y-toolbar__btn--toggle {
  padding: 0.625rem 0.75rem;
  justify-content: flex-start;
}

.a11y-toolbar__btn:hover {
  background: var(--c-bg-section, #F0EEE9);
  border-color: var(--c-border-strong, rgba(15,28,46,0.25));
}

.a11y-toolbar__btn:focus-visible {
  outline: 3px solid var(--c-ink, #0F1C2E);
  outline-offset: 2px;
}

.a11y-toolbar__btn--active {
  background: var(--c-accent-light, #EEF3FB);
  border-color: var(--c-accent, #2A5FBF);
  color: var(--c-accent, #2A5FBF);
}

.a11y-toolbar__btn--active:hover {
  background: rgba(42, 95, 191, 0.14);
}

/* Reset button */
.a11y-toolbar__btn--reset {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--c-ink-faint, rgba(15,28,46,0.35));
  border-color: transparent;
  background: transparent;
  justify-content: center;
}

.a11y-toolbar__btn--reset:hover {
  color: var(--c-ink, #0F1C2E);
  background: var(--c-bg-section, #F0EEE9);
}

/* ── Reading guide ruler ── */
.a11y-ruler {
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-accent, #2A5FBF);
  opacity: 0.5;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(42, 95, 191, 0.2);
}

.a11y-ruler[hidden] { display: none; }

/* ── Global modifier classes ── */
.a11y-text-spacing {
  letter-spacing: 0.05em;
  word-spacing: 0.12em;
}

.a11y-text-spacing p,
.a11y-text-spacing li,
.a11y-text-spacing td,
.a11y-text-spacing dd {
  line-height: 1.8;
}

.a11y-high-contrast {
  --c-ink: #000000;
  --c-ink-mid: #333333;
  --c-ink-faint: #555555;
  --c-bg: #FFFFFF;
  --c-bg-section: #F0F0F0;
  --c-border: rgba(0, 0, 0, 0.2);
  --c-border-strong: rgba(0, 0, 0, 0.4);
  --c-accent: #1a5fa0;
  --c-accent-light: rgba(26, 95, 160, 0.15);
}

.a11y-large-cursor,
.a11y-large-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 2l8 24 3-9 9-3z' fill='%230A0A0A' stroke='%23FFF' stroke-width='1.5'/%3E%3C/svg%3E") 5 2, auto;
}

.a11y-large-cursor a,
.a11y-large-cursor button,
.a11y-large-cursor [role="button"],
.a11y-large-cursor input[type="submit"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M10 5v18h3l2-5h8' fill='none' stroke='%230A0A0A' stroke-width='2.5'/%3E%3Cpath d='M10 5v18h3l2-5h8' fill='none' stroke='%23FFF' stroke-width='1'/%3E%3C/svg%3E") 10 5, pointer;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .a11y-toolbar__panel {
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    bottom: calc(1.5rem + 56px);
  }

  .a11y-toolbar__trigger {
    right: 0.75rem;
    bottom: 0.75rem;
    width: 44px;
    height: 44px;
  }
}