/* ══════════════════════════════════════════════════════════════
 * Illusia Modals — Glass Surface Override
 *
 * Override visual CSS-only dos modais do Fictioneer. Nenhum
 * template PHP é sobrescrito — todo o markup permanece original.
 * Aplica Glass Surface (§7), tokens de design, tipografia
 * editorial e amber como acento único (§1 Contenção).
 *
 * Seções:
 *  1. Overlay
 *  2. Wrapper (Glass Surface)
 *  3. Shimmer Line (Regra #10)
 *  4. Header
 *  5. Close Button
 *  6. Description
 *  7. Inputs (§8)
 *  8. Actions / Buttons
 *  9. HR Dividers
 * 10. Login Modal
 * 11. Site Settings Modal
 * 12. Sharing Modal
 * 13. BBCodes Modal
 * 14. Formatting / Reader Settings
 * 15. Age Confirmation
 * 16. Suggestions
 * 17. Chapter Changelog
 * 18. Light Mode
 * 19. Responsive
 * 20. Reduced Transparency
 * 21. Reduced Motion
 *
 * Tokens: bridge (--bg-* / --fg-*), glass (--glass-*),
 * border (--border-*), space (--space-*), type (--ff-*, --text-*),
 * motion (--t-*, --ease-*), radius (--r-*).
 *
 * NOTA: O modal TTS Settings é estilizado em illusia-tts.css.
 *
 * @since 1.23.0
 * ══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 1. OVERLAY
 *
 * Escurece e desfoca o fundo ao abrir qualquer modal.
 * reader-settings não recebe blur (overlay transparente).
 * ═══════════════════════════════════════════════════════════════ */

:root {
  --modal-overlay: hsl(var(--bg-950-free) / .72);
  --modal-box-shadow: none;
}

.modal:not(.reader-settings) {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* ═══════════════════════════════════════════════════════════════
 * 2. WRAPPER — Glass Surface (§7)
 *
 * background: var(--glass-bg)
 * backdrop-filter: var(--glass-blur)
 * border: 1px solid var(--glass-border)
 * border-radius: var(--r-xl) — §6: "Cards principais, modais"
 * box-shadow: none — Contenção: sem sombras decorativas.
 * ═══════════════════════════════════════════════════════════════ */

.modal__wrapper {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════
 * 3. SHIMMER LINE (Regra #10)
 *
 * Gradiente amber de 1px no topo do card. Assinatura visual
 * obrigatória: "transparent → hsl(amber / .12) → transparent".
 * ═══════════════════════════════════════════════════════════════ */

.modal__wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .12),
    transparent
  );
  pointer-events: none;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════
 * 4. HEADER
 *
 * Playfair Display serifado (§4: "Títulos, nomes de obra").
 * Peso 600, cor --fg-200 — protagonista na hierarquia visual.
 * ═══════════════════════════════════════════════════════════════ */

.modal__header {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--fg-200);
  letter-spacing: .02em;
}


/* ═══════════════════════════════════════════════════════════════
 * 5. CLOSE BUTTON
 *
 * Hover amber sutil (--amber-halo). Focus ring com
 * --border-active. Raio casa com canto superior-direito
 * do wrapper (--r-xl).
 * ═══════════════════════════════════════════════════════════════ */

.modal .close {
  color: var(--fg-500);
  border-radius: 0 var(--r-xl) 0 var(--r-sm);
  transition: color var(--t-fast) var(--ease-std),
              background var(--t-fast) var(--ease-std);
}

.modal .close:hover {
  color: var(--amber);
  background: var(--amber-halo);
}

.modal .close:focus-visible {
  outline: 2px solid var(--border-active);
  outline-offset: -2px;
}


/* ═══════════════════════════════════════════════════════════════
 * 6. DESCRIPTION
 *
 * Textos descritivos em UI font (Syne, §4), cor subdued.
 * ═══════════════════════════════════════════════════════════════ */

.modal__description {
  font-family: var(--ff-ui);
  color: var(--fg-600);
}

.modal__description p {
  font-size: var(--text-xs);
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
 * 7. INPUTS (§8)
 *
 * Range/Checkbox: accent-color amber.
 * Text/Number/Select: var(--input-background), borda
 * --border-1 (repouso) → --border-amber (foco) + halo
 * difuso 3px (§8: "box-shadow: 0 0 0 3px amber/.08").
 * ═══════════════════════════════════════════════════════════════ */

/* ── Range slider ── */
.modal input[type="range"] {
  accent-color: var(--amber);
}

/* ── Checkboxes ── */
.modal input[type="checkbox"] {
  accent-color: var(--amber);
}

/* ── Number inputs ── */
.modal input[type="number"] {
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  color: var(--fg-300);
  background: var(--input-background);
  border: 1px solid var(--border-1);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: border-color var(--t-fast) var(--ease-std);
}

.modal input[type="number"]:focus {
  border-color: var(--border-amber);
  box-shadow: 0 0 0 3px hsl(var(--amber-free) / .08);
  outline: none;
}

/* ── Text inputs ── */
.modal input[type="text"] {
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  color: var(--fg-300);
  background: var(--input-background);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease-std);
}

.modal input[type="text"]:focus {
  border-color: var(--border-amber);
  box-shadow: 0 0 0 3px hsl(var(--amber-free) / .08);
  outline: none;
}

/* ── Select dropdowns ── */
.modal select {
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
  color: var(--fg-300);
  background: var(--input-background);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease-std);
}

.modal select:focus {
  border-color: var(--border-amber);
  box-shadow: 0 0 0 3px hsl(var(--amber-free) / .08);
  outline: none;
}

/* ── Checkbox labels ── */
.modal__setting-toggle {
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
  color: var(--fg-400);
  transition: color var(--t-fast) var(--ease-std);
}

.modal__horizontal-input-group._with-checkbox:hover .modal__setting-toggle {
  color: var(--fg-200);
}

/* ── Reset icons ── */
.modal .reset {
  color: var(--fg-600);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-std);
}

.modal .reset:hover {
  color: var(--amber);
}

/* ── Row icons ── */
.modal__row > :is(i, .icon),
.modal__horizontal-input-group > :is(i, .icon) {
  color: var(--fg-600);
  transition: color var(--t-fast) var(--ease-std);
}


/* ═══════════════════════════════════════════════════════════════
 * 8. ACTIONS / BUTTONS
 *
 * Vazio. O `.button` canônico (v1.75.0) já provê tipografia
 * Observatory Mono (Fira Code 500/600 uppercase .08em). Modais
 * usam markup padrão `<button class="button">` (CTA) +
 * `<button class="button _quick">` (cancelar/sair).
 * ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 9. HR DIVIDERS
 *
 * Separadores hairline usando --glass-border (§7).
 * ═══════════════════════════════════════════════════════════════ */

.modal__wrapper hr {
  border-color: var(--glass-border);
}


/* ═══════════════════════════════════════════════════════════════
 * 10. LOGIN MODAL
 * ═══════════════════════════════════════════════════════════════ */

.login.modal {
  --modal-width: 340px;
}

.login__options {
  gap: var(--space-2xs);
}

.login .modal__description a {
  color: var(--amber);
  text-decoration: underline transparent;
  transition: text-decoration-color var(--t-fast) var(--ease-std);
}

.login .modal__description a:hover {
  text-decoration-color: currentColor;
}


/* ═══════════════════════════════════════════════════════════════
 * 11. SITE SETTINGS MODAL
 * ═══════════════════════════════════════════════════════════════ */

.site-settings.modal {
  --modal-width: 340px;
}

.site-settings__description p {
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
  color: var(--fg-700);
}


/* ═══════════════════════════════════════════════════════════════
 * 12. SHARING MODAL
 * ═══════════════════════════════════════════════════════════════ */

.sharing.modal {
  --modal-width: 340px;
}

.sharing .media-buttons__item {
  transition: color var(--t-fast) var(--ease-std),
              opacity var(--t-fast) var(--ease-std);
}

.sharing .media-buttons__item:hover {
  opacity: .85;
}

.sharing input[type="text"] {
  cursor: pointer;
}

.sharing input[type="text"]:hover {
  border-color: var(--border-2);
}


/* ═══════════════════════════════════════════════════════════════
 * 13. BBCODES MODAL
 * ═══════════════════════════════════════════════════════════════ */

.bbcodes.modal {
  --modal-width: 340px;
}

.modal__description._bbcodes > div {
  background: var(--input-background);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
}

.modal__description._bbcodes code {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  color: var(--amber);
}

.modal__description._bbcodes blockquote {
  background: hsl(var(--bg-950-free) / .4);
  border-left-color: hsl(var(--amber-free) / .35);
}


/* ═══════════════════════════════════════════════════════════════
 * 14. FORMATTING / READER SETTINGS
 * ═══════════════════════════════════════════════════════════════ */

.reader-settings.modal {
  --modal-width: 320px;
}

.reader-settings .font-stepper,
.reader-settings .font-color-stepper {
  background: var(--input-background);
  border: 1px solid var(--border-1);
  color: var(--fg-400);
  transition: color var(--t-fast) var(--ease-std),
              border-color var(--t-fast) var(--ease-std);
}

.reader-settings .font-stepper:hover,
.reader-settings .font-color-stepper:hover {
  color: var(--amber);
  border-color: var(--border-amber);
}

.reader-settings__toggle {
  transition: color var(--t-fast) var(--ease-std);
}

.reader-settings__toggle:hover {
  color: var(--amber);
}

.reader-settings .toggle-light-mode[aria-checked="true"] {
  color: var(--amber);
}


/* ═══════════════════════════════════════════════════════════════
 * 15. AGE CONFIRMATION
 *
 * Sem close button — padding simétrico no header.
 * Botão "Leave" ghost, "Confirm" amber CTA.
 * ═══════════════════════════════════════════════════════════════ */

.age-confirmation.modal {
  --modal-width: 420px;
}

.age-confirmation .modal__header {
  text-align: center;
  padding-right: var(--space-sm);
}

.age-confirmation .modal__description {
  text-align: center;
}

/* `[type=reset]` bridge: parent markup não adiciona `._quick` class,
 * então mapeamos o seletor por type pro look ghost canônico. `[type=submit]`
 * herda o default âmbar do canônico (sem override necessário). */
.age-confirmation .modal__actions .button[type="reset"] {
  background: hsl(var(--bg-800-free) / .3);
  border-color: var(--border-1);
  color: var(--fg-400);
}
.age-confirmation .modal__actions .button[type="reset"]:hover {
  background: var(--amber-halo);
  border-color: var(--border-amber);
  color: var(--amber);
}


/* ═══════════════════════════════════════════════════════════════
 * 16. SUGGESTIONS
 *
 * Largura maior (480px) para exibir texto confortavelmente.
 * Diff: ins→sage, del→crimson (papéis semânticos, §3).
 * ═══════════════════════════════════════════════════════════════ */

.suggestions.modal {
  --modal-width: 480px;
}

.suggestions__box {
  background: var(--input-background);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
}

.suggestions__text {
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
  color: var(--fg-300);
  line-height: 1.6;
}

.suggestions textarea {
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
  color: var(--fg-200);
  background: transparent;
  border: none;
}

.suggestions textarea:focus {
  outline: none;
}

.suggestions__diff ins {
  color: var(--sage);
  text-decoration: none;
}

.suggestions__diff del {
  color: var(--crimson);
}

/* `[type=reset]` bridge — mesma lógica de age-confirmation §15. */
.suggestions__actions .button[type="reset"] {
  background: hsl(var(--bg-800-free) / .3);
  border-color: var(--border-1);
  color: var(--fg-400);
}
.suggestions__actions .button[type="reset"]:hover {
  background: var(--amber-halo);
  border-color: var(--border-amber);
  color: var(--amber);
}


/* ═══════════════════════════════════════════════════════════════
 * 17. CHAPTER CHANGELOG
 *
 * Textarea readonly com log. Fira Code (§4: metadados),
 * scrollbar amber sobre fundo glass.
 * ═══════════════════════════════════════════════════════════════ */

.chapter-changelog.modal {
  --modal-width: 420px;
}

.modal__textarea._changelog {
  font-family: var(--ff-mono);
  color: var(--fg-400);
  background: var(--input-background);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  padding: var(--space-xs);
  scrollbar-color: hsl(var(--amber-free) / .25) transparent;
}


/* ═══════════════════════════════════════════════════════════════
 * 18. LIGHT MODE
 *
 * Glass surface invertida — fundo claro translúcido.
 * Bridge tokens (--bg-*, --fg-*) + --illusia-border-base
 * ajustam automaticamente. Acentos usam --amber-dim (§3).
 * ═══════════════════════════════════════════════════════════════ */

:root[data-mode=light] {
  --modal-overlay: hsl(var(--bg-950-free) / .5);
}

:root[data-mode=light] .modal__wrapper {
  background: hsl(var(--bg-50-free) / .95);
  border-color: var(--border-2);
  box-shadow: none;
}

:root[data-mode=light] .modal__header {
  color: var(--fg-500);
}

:root[data-mode=light] .modal .close {
  color: var(--fg-700);
}

:root[data-mode=light] .modal .close:hover {
  color: var(--amber-dim);
  background: hsl(var(--amber-free) / .08);
}

:root[data-mode=light] .modal__description {
  color: var(--fg-700);
}

/* Inputs light */
:root[data-mode=light] .modal input[type="number"],
:root[data-mode=light] .modal input[type="text"],
:root[data-mode=light] .modal select {
  background: hsl(var(--bg-200-free) / .5);
  border-color: var(--border-1);
  color: var(--fg-600);
}

:root[data-mode=light] .modal input[type="number"]:focus,
:root[data-mode=light] .modal input[type="text"]:focus,
:root[data-mode=light] .modal select:focus {
  border-color: var(--border-amber);
}

/* Checkbox labels light */
:root[data-mode=light] .modal__setting-toggle {
  color: var(--fg-600);
}

:root[data-mode=light] .modal__horizontal-input-group._with-checkbox:hover .modal__setting-toggle {
  color: var(--fg-500);
}

/* Reset icons light */
:root[data-mode=light] .modal .reset {
  color: var(--fg-700);
}

:root[data-mode=light] .modal .reset:hover {
  color: var(--amber-dim);
}

/* HR light */
:root[data-mode=light] .modal__wrapper hr {
  border-color: var(--border-1);
}

/* BBCodes light */
:root[data-mode=light] .modal__description._bbcodes > div {
  background: hsl(var(--bg-200-free) / .5);
  border-color: var(--border-1);
}

:root[data-mode=light] .modal__description._bbcodes code {
  color: var(--amber-dim);
}

:root[data-mode=light] .modal__description._bbcodes blockquote {
  background: hsl(var(--bg-200-free) / .4);
}

/* Suggestions light */
:root[data-mode=light] .suggestions__box {
  background: hsl(var(--bg-200-free) / .5);
  border-color: var(--border-1);
}

:root[data-mode=light] .suggestions__text {
  color: var(--fg-600);
}

:root[data-mode=light] .suggestions textarea {
  color: var(--fg-500);
}

/* Changelog light */
:root[data-mode=light] .modal__textarea._changelog {
  background: hsl(var(--bg-200-free) / .5);
  border-color: var(--border-1);
  color: var(--fg-600);
}

/* Age confirmation light */
:root[data-mode=light] .age-confirmation .modal__actions .button[type="reset"] {
  border-color: var(--border-1);
  color: var(--fg-600);
}

:root[data-mode=light] .age-confirmation .modal__actions .button[type="reset"]:hover {
  border-color: var(--border-2);
  color: var(--fg-500);
}

/* Range sliders light — borda visível no track */
:root[data-mode=light] .modal input[type="range"] {
  accent-color: var(--amber-dim);
}

:root[data-mode=light] .modal input[type="range"]::-webkit-slider-runnable-track {
  background: hsl(var(--bg-300-free) / .6);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xs);
}

:root[data-mode=light] .modal input[type="range"]::-moz-range-track {
  background: hsl(var(--bg-300-free) / .6);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xs);
}

/* Reader settings steppers light */
:root[data-mode=light] .reader-settings .font-stepper,
:root[data-mode=light] .reader-settings .font-color-stepper {
  background: hsl(var(--bg-200-free) / .5);
  border-color: var(--border-1);
  color: var(--fg-600);
}

:root[data-mode=light] .reader-settings .font-stepper:hover,
:root[data-mode=light] .reader-settings .font-color-stepper:hover {
  color: var(--amber-dim);
  border-color: var(--border-amber);
}

/* Light mode `[type=submit]` text color é delegado pro `.button`
 * canônico (já vira --fg-100 em [data-mode=light] §14 de illusia-buttons.css). */


/* ═══════════════════════════════════════════════════════════════
 * 19. RESPONSIVE
 *
 * Mobile: modais full-width com margem mínima (2× --space-sm).
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .modal {
    --modal-width: calc(100vw - 2 * var(--space-sm));
  }

  .modal__header {
    font-size: var(--text-sm);
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 20. REDUCED TRANSPARENCY
 *
 * Usuários que ativaram "Reduzir transparência" no SO (iOS/macOS/
 * Windows) não devem pagar custo de GPU com blur, e o frosted
 * desorienta. Desabilita o backdrop-filter do overlay (§1) e do
 * wrapper (§2), tornando a superfície opaca. Espelha os tokens
 * `--glass-bg` (bg-900 no dark, bg-50 no light) em alpha cheio.
 * Pattern canônico dos audits S9/S11/S12/S13.
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-transparency: reduce) {
  .modal:not(.reader-settings) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .modal__wrapper {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-900);
  }

  :root[data-mode=light] .modal__wrapper {
    background: var(--bg-50);
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 21. REDUCED MOTION
 *
 * Desabilita transições para acessibilidade (§8 WCAG).
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .modal .close,
  .modal .reset,
  .modal input[type="number"],
  .modal input[type="text"],
  .modal select,
  .modal__setting-toggle,
  .reader-settings__toggle,
  .reader-settings .font-stepper,
  .reader-settings .font-color-stepper,
  .sharing .media-buttons__item,
  .suggestions__actions .button,
  .age-confirmation .modal__actions .button {
    transition: none;
  }
}