/* Pool Buddy – Accessibility layer */
:root {
  --pb-focus: #004e70;
  --pb-focus-soft: rgba(14, 165, 233, 0.28);
}

.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 999px;
  background: #0b1c30;
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
  box-shadow: 0 8px 24px rgba(11, 28, 48, 0.24);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
}

:where(a, button, input, textarea, select, summary, [role="button"], [role="switch"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--pb-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px var(--pb-focus-soft) !important;
}

:where(input, textarea, select).pool-input:focus-visible,
:where(input, textarea, select).edit-list-input:focus-visible {
  border-color: #004e70 !important;
}

[aria-disabled="true"],
button:disabled {
  cursor: not-allowed !important;
}

[aria-hidden="true"].icon,
img[aria-hidden="true"] {
  pointer-events: none;
}

.info-row[role="button"], .info-row:is(button) {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  color: inherit;
}

@media (forced-colors: active) {
  :where(a, button, input, textarea, select, summary, [role="button"], [role="switch"]):focus-visible {
    outline: 3px solid CanvasText !important;
    box-shadow: none !important;
  }
}


/* i18n language switch */
.pp-lang-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.pp-lang-btn{border:2px solid #bec8d2;background:#fff;color:#0b1c30;border-radius:1rem;padding:.85rem 1rem;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;text-align:center;transition:border-color .15s,background .15s,transform .15s}
.pp-lang-btn:active{transform:scale(.97)}
.pp-lang-btn.pp-lang-active{border-color:#006591;background:#c9e6ff;color:#00344e}


/* WCAG 2.2 AA add-on layer -------------------------------------------------
   2.4.11 Focus Not Obscured, 2.5.8 Target Size, robust focus appearance,
   and contrast-safe primary CTAs. */
html {
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 88px);
  scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 132px);
}

/* Unerwünschtes Overscroll & horizontales Scrollen unterbinden.
   Verhindert Rubber-Band-Effekt auf iOS Safari (PWA & Browser), Pull-to-
   Refresh auf Android, und schließt versehentliches horizontales Scrollen
   aus, wenn ein Element minimal über den Viewport ragt. */
html, body {
  overscroll-behavior: none;
  overflow-x: hidden;
}

:where(a, button, input, textarea, select, summary, [role="button"], [role="switch"], [role="checkbox"], [role="radio"], [tabindex]:not([tabindex="-1"])) {
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 88px);
  scroll-margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 132px);
}

:where(button, a, input, select, textarea, summary, [role="button"], [role="switch"], [role="checkbox"], [role="radio"], .platform-tab, .feedback-cat-card, .choice-btn, .answer-btn, .settings-level-card, .edit-choice-card, .maint-chip) {
  min-width: 44px;
  min-height: 44px;
}

/* Exception: the toggle switches are a slim 48x24 slider by design. The 44px
   rule above (AAA target size) stretched the track into a blob. 24px height
   already satisfies 2.5.8 Target Size (Minimum, AA); the comfortable tap area
   is provided by the surrounding padded row. */
.toggle-track {
  min-width: 48px;
  min-height: 24px;
}

:where(input.pool-input, input.edit-list-input, textarea.pool-input, textarea.edit-list-input, .dose-input) {
  min-height: 48px;
}

:where(button.bg-primary-container.text-white, a.bg-primary-container.text-white, .bg-primary-container.text-white) {
  background: #006591 !important;
  color: #fff !important;
}

:where(button.bg-primary-container.text-white, a.bg-primary-container.text-white):hover {
  background: #005276 !important;
}

:where(.bg-primary-container.text-white) .icon {
  color: currentColor;
}

:where([role="dialog"]) {
  outline: none;
}

:where([role="dialog"]):focus-visible {
  outline: 3px solid var(--pb-focus) !important;
  outline-offset: -6px !important;
}

.pb-consistent-help {
  margin: 1.25rem var(--page-gutter, 1rem) 1rem;
  padding: 1rem;
  border: 1px solid rgba(190, 200, 210, .85);
  border-radius: 1rem;
  background: #fff;
  color: #0b1c30;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}
.pb-consistent-help strong { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 14px; }
.pb-consistent-help a { color: #006591; text-decoration: underline; font-weight: 700; }
.pb-consistent-help p + p { margin-top: .35rem; }

@media (max-width: 380px) {
  .pb-consistent-help { margin-left: .75rem; margin-right: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.transition-transform, .transition-all, .transition-opacity, .transition-colors, [style*="transition"]) {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── Kontrast (WCAG 2.2 AA) ──────────────────────────────────────────────────
   Wird nach tailwind.css geladen und überschreibt deren Grautöne, die im
   Hellmodus knapp unter 4,5:1 lagen (z. B. Navigationslabels auf #f6f8ff).
   Der Dunkelmodus bleibt unberührt: dark.css nutzt html[data-theme="dark"]
   und damit höhere Spezifität. */
.text-outline { color: #5f6971; }

/* Inline gesetzte Grün-/Grautöne auf hellen Flächen nachschärfen. */
[style*="color:#2e7d5b"] { color: #276b4e !important; }
[style*="color:#6e7881"] { color: #5f6971 !important; }

/* Fehlende Utility: .bg-tertiary wurde nie in tailwind.css erzeugt (nur
   .bg-tertiary-fixed und .bg-tertiary/10). Dadurch stand der weiße Text der
   Hero-Blöcke auf 8 Seiten faktisch auf dem hellen Seitenhintergrund und war
   unsichtbar. Farbwert abgeleitet aus .bg-tertiary/10 = rgba(133,83,0,.1). */
.bg-tertiary { background-color: #855300; }