/* a11y.css – Accessibility widget for NewPasswordGenerator
   Namespaced. Does not change existing UI beyond a11y settings. */

/* ===== DEFAULTS (mapped from html attributes) ===== */
:root, html {
  --a11y-font-scale: 1;
  --a11y-line-height: 1.6;
  --a11y-letter-spacing: 0;
  --a11y-link-underline: 0;
  --a11y-focus-size: 2px;
}

/* Font scale */
html[data-a11y-font="100"] { --a11y-font-scale: 1; }
html[data-a11y-font="110"] { --a11y-font-scale: 1.1; }
html[data-a11y-font="120"] { --a11y-font-scale: 1.2; }
html[data-a11y-font="130"] { --a11y-font-scale: 1.3; }

/* Line height */
html[data-a11y-line="normal"] { --a11y-line-height: 1.6; }
html[data-a11y-line="relaxed"] { --a11y-line-height: 1.8; }

/* Letter spacing */
html[data-a11y-spacing="normal"] { --a11y-letter-spacing: 0; }
html[data-a11y-spacing="wide"] { --a11y-letter-spacing: 0.02em; }

/* Highlight links */
html[data-a11y-links="off"] { --a11y-link-underline: 0; }
html[data-a11y-links="on"] { --a11y-link-underline: 1; }

/* High contrast */
html[data-a11y-contrast="default"] { --a11y-focus-size: 2px; }
html[data-a11y-contrast="high"] {
  --a11y-focus-size: 3px;
  --c-text: #0f172a;
  --c-text-muted: #334155;
  --c-border: #64748b;
  --c-primary: #1d4ed8;
  --c-primary-hover: #1e40af;
}
html[data-theme="dark"][data-a11y-contrast="high"] {
  --c-text: #f1f5f9;
  --c-text-muted: #cbd5e1;
  --c-border: #94a3b8;
  --c-primary: #60a5fa;
  --c-primary-hover: #93c5fd;
}

/* Apply to site */
html { font-size: calc(100% * var(--a11y-font-scale)); }
body {
  line-height: var(--a11y-line-height);
  letter-spacing: var(--a11y-letter-spacing);
}

/* Highlight links when enabled */
html[data-a11y-links="on"] a:not(.btn):not(.social-icon) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* Reduce motion (site level override) – excludes password display border (draws eye to output) */
html[data-a11y-motion="reduce"] *:not(.password-display-wrapper):not(.password-display-wrapper *),
html[data-a11y-motion="reduce"] *:not(.password-display-wrapper):not(.password-display-wrapper *)::before,
html[data-a11y-motion="reduce"] *:not(.password-display-wrapper):not(.password-display-wrapper *)::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Respect prefers-reduced-motion (fallback if user has not set a11y) – excludes password display border */
@media (prefers-reduced-motion: reduce) {
  html:not([data-a11y-motion]) *:not(.password-display-wrapper):not(.password-display-wrapper *),
  html:not([data-a11y-motion]) *:not(.password-display-wrapper):not(.password-display-wrapper *)::before,
  html:not([data-a11y-motion]) *:not(.password-display-wrapper):not(.password-display-wrapper *)::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== WIDGET UI (namespaced) ===== */
.a11y-launcher {
  position: fixed;
  left: 12px;
  bottom: clamp(16px, 96px, 20vh);
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 2px solid var(--c-border, #e2e8f0);
  border-radius: 50%;
  background: var(--c-surface, #ffffff);
  color: var(--c-text, #1a202c);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 950;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.a11y-launcher:hover {
  background: var(--c-secondary, #e2e8f0);
  border-color: var(--c-primary, #2563eb);
}
.a11y-launcher:focus-visible {
  outline: 3px solid var(--c-primary, #2563eb);
  outline-offset: 2px;
}
.a11y-launcher svg {
  width: 24px;
  height: 24px;
}

.a11y-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 960;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.a11y-backdrop.a11y-open {
  opacity: 1;
  visibility: visible;
}
.a11y-backdrop[hidden] {
  display: none !important;
}

.a11y-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 90vw;
  height: 100%;
  background: var(--c-surface, #ffffff);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  z-index: 970;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}
.a11y-panel.a11y-open {
  transform: translateX(0);
}
.a11y-panel[hidden] {
  display: block !important;
  visibility: hidden;
  transform: translateX(-100%);
  pointer-events: none;
}
.a11y-panel:not([hidden]).a11y-open {
  visibility: visible;
  pointer-events: auto;
}

.a11y-panel__inner {
  padding: var(--space-lg, 1.5rem);
  padding-bottom: 2rem;
}

.a11y-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md, 1rem);
  gap: var(--space-sm, 0.5rem);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--c-surface, #ffffff);
  padding-bottom: var(--space-sm, 0.5rem);
  flex-shrink: 0;
}

.a11y-panel__header h2 {
  margin: 0;
  font-size: var(--text-xl, 1.25rem);
  font-weight: 700;
}

.a11y-close {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--c-text, #1a202c);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.a11y-close:hover {
  background: var(--c-secondary, #e2e8f0);
}
.a11y-close:focus-visible {
  outline: 2px solid var(--c-primary, #2563eb);
  outline-offset: 2px;
}
.a11y-close svg {
  width: 24px;
  height: 24px;
}

.a11y-help {
  margin-bottom: var(--space-lg, 1.5rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--c-text-muted, #64748b);
}

.a11y-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 1.5rem);
}

.a11y-form__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
}

.a11y-form__section-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  color: var(--c-text, #1a202c);
  margin: 0;
}

.a11y-form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.5rem);
  position: relative;
}

.a11y-form__radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 0.25rem);
  padding: 8px 12px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  font-size: var(--text-sm, 0.875rem);
  border: 2px solid var(--c-border, #e2e8f0);
  background: transparent;
}
.a11y-form__radio-label:hover {
  border-color: var(--c-primary, #2563eb);
}
.a11y-form__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.a11y-form__radio:checked + .a11y-form__radio-label {
  border-color: var(--c-primary, #2563eb);
  background: var(--c-primary, #2563eb);
  color: var(--c-primary-text, #ffffff);
}
.a11y-form__radio:focus-visible + .a11y-form__radio-label {
  outline: 2px solid var(--c-primary, #2563eb);
  outline-offset: 2px;
}

.a11y-form__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md, 1rem);
  padding: 10px 12px;
  border-radius: var(--radius-sm, 6px);
  border: 2px solid var(--c-border, #e2e8f0);
  cursor: pointer;
}
.a11y-form__toggle:hover {
  border-color: var(--c-primary, #2563eb);
}
.a11y-form__toggle input {
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  accent-color: var(--c-primary, #2563eb);
}
.a11y-form__toggle input:focus-visible {
  outline: 2px solid var(--c-primary, #2563eb);
  outline-offset: 2px;
}
.a11y-form__toggle-label {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
}

.a11y-note {
  margin-top: var(--space-lg, 1.5rem);
  font-size: var(--text-xs, 0.75rem);
  color: var(--c-text-muted, #64748b);
}

.a11y-credit {
  margin-top: var(--space-lg, 1.5rem);
  padding-top: var(--space-md, 1rem);
  border-top: 1px solid var(--c-border, #e2e8f0);
  font-size: var(--text-xs, 0.75rem);
  color: var(--c-text-muted, #64748b);
  line-height: 1.5;
}
.a11y-credit a {
  color: var(--c-primary, #2563eb);
  text-decoration: underline;
}
.a11y-credit a:hover {
  text-decoration-thickness: 2px;
}

.a11y-reset {
  margin-top: var(--space-md, 1rem);
  padding: 10px 16px;
  border: 2px solid var(--c-border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--c-text, #1a202c);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}
.a11y-reset:hover {
  background: var(--c-secondary, #e2e8f0);
  border-color: var(--c-text-muted, #64748b);
}
.a11y-reset:focus-visible {
  outline: 2px solid var(--c-primary, #2563eb);
  outline-offset: 2px;
}

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