/* Copyright (C) 2026 PC-DIDI Webdesign; SPDX-License-Identifier: GPL-2.0-or-later */
.pcd-a11y,
.pcd-a11y * {
  box-sizing: border-box;
}

.pcd-a11y {
  --pcd-a11y-accent: #ff792d;
  --pcd-a11y-accent-ink: #111827;
  color: #18212a;
  font: 400 16px/1.45 Arial, Helvetica, sans-serif;
  position: fixed;
  bottom: calc(var(--pcd-a11y-offset, 24px) + env(safe-area-inset-bottom));
  z-index: 10000;
  isolation: isolate;
}

.pcd-a11y[data-position="right"] { right: max(22px, env(safe-area-inset-right)); }
.pcd-a11y[data-position="left"] { left: max(22px, env(safe-area-inset-left)); }

.pcd-a11y button,
.pcd-a11y a {
  font: inherit;
}

.pcd-a11y button:focus-visible,
.pcd-a11y a:focus-visible,
.pcd-a11y__skip:focus-visible {
  outline: 3px solid #152536 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px #fff, 0 0 0 9px #111827 !important;
}

.pcd-a11y__trigger {
  align-items: center;
  background: var(--pcd-a11y-accent);
  border: 2px solid #17212b;
  border-radius: 999px;
  box-shadow: 0 5px 22px rgb(0 0 0 / 24%);
  color: var(--pcd-a11y-accent-ink);
  cursor: pointer;
  display: flex;
  gap: 9px;
  justify-content: center;
  min-height: 52px;
  padding: 9px 17px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.pcd-a11y__trigger:hover {
  box-shadow: 0 8px 28px rgb(0 0 0 / 30%);
  transform: translateY(-2px);
}

.pcd-a11y__trigger svg {
  fill: none;
  flex: 0 0 24px;
  height: 24px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 24px;
}

.pcd-a11y__trigger span { font-weight: 700; }

.pcd-a11y__panel {
  background: #fff;
  border: 1px solid #657184;
  border-radius: 16px;
  bottom: 66px;
  box-shadow: 0 16px 48px rgb(10 24 38 / 22%);
  color: #18212a;
  max-height: min(72vh, 560px);
  overflow-y: auto;
  padding: 18px;
  position: absolute;
  right: 0;
  width: min(340px, calc(100vw - 32px));
}

.pcd-a11y[data-position="left"] .pcd-a11y__panel { left: 0; right: auto; }
.pcd-a11y__panel[hidden] { display: none !important; }

.pcd-a11y__header {
  align-items: center;
  border-bottom: 1px solid #657184;
  display: flex;
  justify-content: space-between;
  margin: -2px 0 12px;
  padding: 0 0 11px;
}

.pcd-a11y__header h2 {
  color: #18212a;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0;
}

.pcd-a11y__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #26323d;
  cursor: pointer;
  display: inline-flex;
  font-size: 27px !important;
  height: 44px;
  justify-content: center;
  line-height: 1;
  width: 44px;
}

.pcd-a11y__controls { display: grid; gap: 9px; }

.pcd-a11y__control,
.pcd-a11y__reset {
  align-items: center;
  background: #fff;
  border: 1px solid #657184;
  border-radius: 10px;
  color: #18212a;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  min-height: 44px;
  padding: 9px 11px;
  text-align: left;
  width: 100%;
}

.pcd-a11y__control:hover,
.pcd-a11y__reset:hover { border-color: #17212b; }
.pcd-a11y__control[aria-pressed="true"] { border-color: #18212a; box-shadow: inset 0 0 0 1px #18212a; }

.pcd-a11y__value {
  background: #edf1f5;
  border-radius: 999px;
  color: #26323d;
  font-size: .78rem;
  font-weight: 700;
  min-width: 42px;
  padding: 3px 8px;
  text-align: center;
}

.pcd-a11y__font-group {
  align-items: center;
  border: 1px solid #657184;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  min-height: 52px;
  padding: 6px 8px 6px 11px;
}

.pcd-a11y__group-label { font-weight: 600; }
.pcd-a11y__font-buttons { display: flex; gap: 5px; }

.pcd-a11y__font-button {
  justify-content: center;
  min-height: 44px;
  padding: 5px;
  width: 44px;
}

.pcd-a11y__reset {
  color: #343f49;
  justify-content: center;
  margin-top: 12px;
  min-height: 40px;
}

.pcd-a11y__live {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.pcd-a11y__skip {
  background: #111;
  border: 2px solid #fff;
  border-radius: 0 0 8px 8px;
  color: #fff;
  left: 12px;
  padding: 12px 16px;
  position: fixed;
  top: 8px;
  transform: translateY(-160%);
  z-index: 2147483647;
}

.pcd-a11y__skip:focus { transform: translateY(0); }

html.pcd-a11y-font-scale { font-size: calc(100% * var(--pcd-a11y-font-scale, 1)) !important; }
html.pcd-a11y-underline a:not(.pcd-a11y__trigger):not(.pcd-a11y__skip) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .15em !important; }
html.pcd-a11y-readable body { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: .025em !important; line-height: 1.7 !important; }
html.pcd-a11y-text-spacing body :where(p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, label, a) {
  letter-spacing: .12em !important;
  line-height: 1.5 !important;
  word-spacing: .16em !important;
}
html.pcd-a11y-text-spacing body p { margin-block-end: 2em !important; }
html.pcd-a11y-highlight-headings body :where(h1, h2, h3, h4, h5, h6):not(#pcd-a11y-title) {
  outline: 2px solid #111827 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px #ffd400 !important;
}
html.pcd-a11y-left-align body :where(p, li, dt, dd, blockquote, figcaption) { text-align: start !important; }
html.pcd-a11y-reduce-motion *,
html.pcd-a11y-reduce-motion *::before,
html.pcd-a11y-reduce-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}

html.pcd-a11y-contrast body { background: #000 !important; color: #fff !important; }
html.pcd-a11y-contrast body :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend, th, td, blockquote, figcaption) { color: #fff !important; }
html.pcd-a11y-contrast body a:not(.pcd-a11y__trigger):not(.pcd-a11y__skip) { color: #ffef00 !important; text-decoration: underline !important; }
html.pcd-a11y-contrast body :where(input, select, textarea, button):not(.pcd-a11y__trigger):not(.pcd-a11y__control):not(.pcd-a11y__close):not(.pcd-a11y__reset) { background: #111 !important; border-color: #fff !important; color: #fff !important; }
html.pcd-a11y-contrast .pcd-a11y__panel { background: #fff !important; color: #18212a !important; }
html.pcd-a11y-contrast .pcd-a11y__panel :where(*) { color: #18212a !important; }
html.pcd-a11y-contrast .pcd-a11y__trigger { background: var(--pcd-a11y-accent) !important; color: var(--pcd-a11y-accent-ink) !important; }

@media (max-width: 480px) {
  .pcd-a11y { bottom: calc(var(--pcd-a11y-offset, 24px) + env(safe-area-inset-bottom)); }
  .pcd-a11y[data-position="right"] { right: max(14px, env(safe-area-inset-right)); }
  .pcd-a11y[data-position="left"] { left: max(14px, env(safe-area-inset-left)); }
  .pcd-a11y__trigger { min-height: 48px; padding: 8px 13px; }
  .pcd-a11y__panel { bottom: 60px; max-height: min(75vh, 560px); padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcd-a11y__trigger { transition: none; }
}