/* ==========================================================================
 * ILLUSIA SINGLE CHAPTER — CSS Override
 * Última modificação: 2026-06-08 (S3 — §17 print + reduced-transparency)
 *
 * Override do template single-fcn_chapter.php do Fictioneer.
 * Hooks PHP em includes/illusia-single-chapter.php.
 * Largura controlada pelo reader settings do Fictioneer — sem max-width forçado.
 *
 * Índice:
 *  1. Progress bar
 *  2. Top/bottom actions bar
 *  3. Foreword / global note / warning (infobox)
 *  4. Chapter header (identity)
 *  5. Chapter content (reading area)
 *  6. Footnotes (illusia-fn-*)
 *  7. Afterword + support links
 *  8. Comment rules card
 *  9. Paragraph tools (floating)
 * 10. Comments section
 * 11. Password form + timer + tier
 * 12. Chapter index modal
 * 13. Light mode
 * 14. Responsive
 * 15. Reduced motion
 * 16. Entry animations
 * 17. Print styles
 * ========================================================================== */


/* ==========================================================================
 * 1. PROGRESS BAR
 * Parent: .progress, .progress__bar
 * ========================================================================== */

.chapter .progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
  background: hsl(var(--bg-900-free) / .4);
}

.chapter .progress__bar {
  height: 100%;
  background: linear-gradient(90deg, hsl(var(--amber-free) / .6), var(--amber));
  border-radius: 0 2px 2px 0;
  transition: width 100ms linear;
  box-shadow: 0 0 8px hsl(var(--amber-free) / .3);
}


/* ==========================================================================
 * 2. TOP / BOTTOM ACTIONS BAR
 * Parent: .chapter__actions, .chapter__actions--top, .chapter__actions--bottom
 *         .chapter__actions-container, -left, -center, -right
 *         .chapter__footer
 *         Buttons: .button._secondary
 * ========================================================================== */

.chapter .chapter__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--r-lg);
  background: hsl(var(--bg-900-free) / .5);
  border: 1px solid var(--border-1);
  position: relative;
}

/* Decorative gradient line */
.chapter .chapter__actions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--amber-free) / .08), transparent);
  pointer-events: none;
}

.chapter .chapter__actions-container {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

/* All buttons inside actions bar — toolbar denso (ícones).
 * Remapeia o `.button` parent-markup pro look `._quick._icon._sm`
 * canônico (Fira Code 500 ghost) + min-size pra área de toque WCAG. */
.chapter .chapter__actions .button {
  --btn-size:   var(--text-2xs);
  --btn-pad-y:  var(--space-2xs);
  --btn-pad-x:  var(--space-xs);
  --btn-radius: var(--r-sm);
  --btn-bg:     transparent;
  --btn-fg:     var(--fg-800);
  --btn-border: transparent;
  --btn-bg-hover:     hsl(var(--amber-free) / .04);
  --btn-fg-hover:     var(--fg-300);
  --btn-border-hover: var(--border-1);
  --btn-weight: 500;
  min-width: 32px;
  min-height: 32px;
}

.chapter .chapter__actions .button._active {
  --btn-fg:     var(--amber);
  --btn-border: var(--border-amber);
}

.chapter .chapter__actions .button i { font-size: .85em; }

/* Nav buttons (prev/next) — herdam `._navigation` canônico se
 * o markup do parent adicionar a classe. Quando não adicionar,
 * scope override abaixo garante o look correto. */
.chapter .chapter__actions .button._navigation {
  --btn-pad-x: var(--space-sm);
}

.chapter .chapter__actions .button._navigation i { font-size: .75em; }

/* Bottom actions spacing */
.chapter .chapter__actions--bottom {
  margin-top: var(--space-xl);
}


/* ==========================================================================
 * 3. FOREWORD / GLOBAL NOTE / WARNING
 * Parent: .infobox, .infobox--warning, .chapter__foreword, .chapter__warning,
 *         .chapter__global-note, .chapter__afterword
 * ========================================================================== */

.chapter .infobox {
  position: relative;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  border-radius: var(--r-lg);
  background: hsl(var(--bg-900-free) / .4);
  border: 1px solid var(--border-1);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--fg-400);
}

/* Decorative gradient line top */
.chapter .infobox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--amber-free) / .06), transparent);
  pointer-events: none;
}

/* Warning variant */
.chapter .infobox.infobox--warning {
  border-color: hsl(var(--crimson-free) / .15);
  background: hsl(var(--crimson-free) / .04);
}

.chapter .infobox.infobox--warning::before {
  background: linear-gradient(90deg, transparent, hsl(var(--crimson-free) / .12), transparent);
}

/* Warning title — prominent */
.chapter .chapter__warning-title {
  font-family: var(--ff-ui);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--fg-200);
  margin-bottom: var(--space-xs);
}

.chapter .chapter__warning-title strong {
  color: hsl(var(--crimson-free) / .85);
  font-weight: 700;
}

/* Warning instructions — secondary */
.chapter .chapter__warning-instructions {
  font-size: var(--text-xs);
  color: var(--fg-700);
  line-height: 1.6;
}


/* ==========================================================================
 * 4. CHAPTER HEADER (IDENTITY)
 * Parent: .chapter__headline, .chapter__title, .chapter__story-link,
 *         .chapter__author
 * Custom: .chapter__identity-meta, .chapter__identity-item (injected via filter)
 * ========================================================================== */

.chapter .chapter__headline {
  text-align: center;
  padding: var(--space-lg) 0 var(--space-xl);
  position: relative;
}

.chapter .chapter__story-link {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--amber-dim);
  margin-bottom: var(--space-sm);
  transition: color var(--t-fast);
}

.chapter .chapter__story-link:hover {
  color: var(--amber);
}

/* Eyebrow "Capítulo N" — número sequencial derivado da posição na obra.
 * Ver includes/illusia-chapter-number.php (fictioneer_filter_chapter_identity). */
.chapter .chapter__number {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--amber);
  margin-bottom: var(--space-xs);
}

.chapter .chapter__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.15;
  color: var(--fg-100);
  margin-bottom: var(--space-sm);
  letter-spacing: -.01em;
}

.chapter .chapter__author {
  display: block;
  font-family: var(--ff-ui);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--fg-800);
  font-weight: 400;
}

.chapter .chapter__author a {
  color: var(--fg-600);
}

.chapter .chapter__author a:hover {
  color: var(--amber);
}

/* Identity meta — views + story rating (injected via fictioneer_filter_chapter_identity) */
.chapter__identity-meta {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.chapter__identity-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  color: var(--fg-800);
  letter-spacing: .04em;
}

.chapter__identity-item i {
  font-size: .85em;
  color: var(--fg-900);
}

.chapter__identity-item._highlight {
  color: var(--amber-dim);
}

.chapter__identity-item._highlight i {
  color: var(--amber-dim);
}

/* Credits (role-based author line) */
.chapter__credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
}

.chapter__credits-primary {
  font-family: var(--ff-ui);
  font-size: var(--text-sm);
  color: var(--fg-400);
}

.chapter__credits-primary a {
  color: var(--fg-300);
  font-weight: 500;
}

.chapter__credits-primary a:hover {
  color: var(--amber);
}

.chapter__credits-secondary {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-800);
}

.chapter__credits-secondary a {
  color: var(--fg-600);
}

.chapter__credits-secondary a:hover {
  color: var(--amber);
}

/* Decorative divider after headline */
.chapter .chapter__headline::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber-dim), transparent);
  margin: var(--space-lg) auto 0;
}


/* ==========================================================================
 * 5. CHAPTER CONTENT — READING AREA
 * Parent: .chapter__content, .resize-font, .chapter-formatting
 * ========================================================================== */

.chapter .chapter__content {
  padding: 0 var(--space-md);
}

/* Propriedades controladas pelo modal de formatação (slider/select/toggle) —
 * herdam de `.chapter-formatting` ou consomem var setada pelo controller.
 * Defaults editoriais (line-height 1.8, paragraph-spacing 1.4em, justify on)
 * vivem em `illusia_chapter_default_formatting` no PHP, para que o JS do
 * Fictioneer os aplique no carregamento e os controles sigam funcionais. */
.chapter .chapter__content p {
  font-family: inherit;                              /* select de fonte */
  font-size: 1em;
  line-height: inherit;                              /* slider line-height */
  color: var(--text-chapter, var(--fg-300));         /* select de cor */
  margin-bottom: var(--paragraph-spacing, 1.5em);    /* slider paragraph-spacing */
  hyphens: auto;
}

.chapter .chapter__content p:last-child {
  margin-bottom: 0;
}

/* Reaplica text-indent em `.wp-block-paragraph` —
 *
 * O Gutenberg moderno gera todos os <p> de capítulo com a classe
 * `wp-block-paragraph`. A regra do parent que aplica `text-indent: 1.5rem`
 * exclui `[class*="wp-block-"]`, então em obras editadas no editor de
 * blocos o indent nunca era aplicado e o toggle do modal ficava sem efeito.
 *
 * Esta regra reaplica o indent nesses parágrafos preservando as exclusões
 * tipográficas (primeiro parágrafo, alinhamentos não-justificáveis). A regra
 * `.chapter-formatting.no-indent p { text-indent: 0 !important }` do parent
 * continua zerando o indent quando o toggle é desativado. */
.chapter__content .chapter-formatting p.wp-block-paragraph:not(:first-of-type, .has-text-align-center, [align="center"], [align="right"]) {
  text-indent: 1.5rem;
}

/* Drop cap */
.chapter .chapter__content .has-drop-cap::first-letter {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 3.6em;
  float: left;
  line-height: .85;
  margin-right: .08em;
  margin-top: .05em;
  color: var(--amber);
}

/* Headings in content */
.chapter .chapter__content h2 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--fg-100);
  margin: 2em 0 .8em;
  line-height: 1.3;
}

/* Emphasis */
.chapter .chapter__content em {
  font-style: italic;
  color: var(--fg-200);
}

.chapter .chapter__content strong {
  font-weight: 600;
  color: var(--fg-100);
}

/* Blockquote */
.chapter .chapter__content blockquote {
  position: relative;
  margin: 1.5em 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 2px solid var(--amber-dim);
  background: hsl(var(--amber-free) / .03);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic;
  color: var(--fg-400);
}

/* Scene break */
.chapter .chapter__content hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, var(--border-2) 40%, var(--border-2) 60%, transparent 90%);
  margin: 2.5em auto;
  max-width: 200px;
}

/* Links in content */
.chapter .chapter__content a:not(.illusia-fn-ref) {
  color: var(--amber-dim);
  text-decoration: underline;
  text-decoration-color: hsl(var(--amber-free) / .25);
  text-underline-offset: 3px;
}

.chapter .chapter__content a:not(.illusia-fn-ref):hover {
  color: var(--amber);
  text-decoration-color: var(--amber);
}

/* Selected paragraph (TTS / paragraph tools) */
.chapter .chapter__content p.selected-paragraph {
  position: relative;
}

.chapter .chapter__content p.selected-paragraph::after {
  content: '';
  position: absolute;
  inset: -.25em -.5em;
  width: auto;
  max-width: none;
  transform: none;
  background: hsl(var(--amber-free) / .06);
  border-radius: var(--r-sm);
  border-left: 2px solid hsl(var(--amber-free) / .25);
  pointer-events: none;
  z-index: -1;
}


/* ==========================================================================
 * 6. FOOTNOTES
 * Plugin output: .illusia-fn-sup, .illusia-fn-ref, .illusia-fn-container,
 *                .illusia-fn-separator, .illusia-fn-list, .illusia-fn-item,
 *                .illusia-fn-tooltip
 * ========================================================================== */

/* --- 6a. Inline superscript reference --- */
.illusia-fn-sup {
  font-size: .7em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -.4em;
  margin: 0 .1em;
}

.illusia-fn-ref {
  display: inline-block;
  color: var(--amber);
  text-decoration: none;
  font-weight: 600;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -.02em;
  padding: .1em .25em;
  margin: 0 .05em;
  border-radius: var(--r-xs);
  background: transparent;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}

.illusia-fn-ref:hover {
  color: var(--fg-100);
  background: hsl(var(--amber-free) / .15);
  transform: translateY(-1px);
}

.illusia-fn-ref:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* --- 6b. Endnotes container --- */
.illusia-fn-container {
  position: relative;
  margin-top: var(--space-2xl);
  padding: var(--space-lg) 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--fg-600);
}

/* Ornamental separator — fleuron with gradient lines */
.illusia-fn-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  color: var(--fg-900);
  font-size: var(--text-xs);
}

.illusia-fn-separator::before,
.illusia-fn-separator::after {
  content: '';
  flex: 1;
  height: 1px;
}

.illusia-fn-separator::before {
  background: linear-gradient(90deg, transparent, var(--border-2));
}

.illusia-fn-separator::after {
  background: linear-gradient(90deg, var(--border-2), transparent);
}

.illusia-fn-separator span {
  opacity: .6;
  line-height: 1;
}

/* --- 6c. Footnotes list --- */
.illusia-fn-list {
  margin: 0;
  padding: 0 0 0 var(--space-lg);
  list-style-type: decimal;
  list-style-position: outside;
}

.illusia-fn-item {
  position: relative;
  margin-bottom: var(--space-xs);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xs);
  background: hsl(var(--bg-900-free) / .3);
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: background var(--t-mid), border-color var(--t-mid);
}

.illusia-fn-item::marker {
  color: var(--amber);
  font-weight: 600;
  font-feature-settings: "tnum" 1;
}

.illusia-fn-item:hover {
  background: hsl(var(--bg-900-free) / .5);
}

/* :target — when clicking a footnote number scrolls here */
.illusia-fn-item._target,
.illusia-fn-item:target {
  border-left-color: var(--amber);
  background: hsl(var(--amber-free) / .06);
  animation: fn-highlight .4s var(--ease-expo);
}

@keyframes fn-highlight {
  from { opacity: .6; }
  to { opacity: 1; }
}

.illusia-fn-content {
  color: var(--fg-600);
}

/* Backlink arrow */
.illusia-fn-backlinks {
  display: inline;
  margin-left: var(--space-2xs);
}

.illusia-fn-backref {
  color: var(--amber-dim);
  text-decoration: none;
  opacity: .5;
  transition: opacity var(--t-fast);
  font-size: .85em;
}

.illusia-fn-backref:hover {
  opacity: 1;
}

/* --- 6d. Tooltip (hover on superscript) --- */
.illusia-fn-tooltip {
  position: absolute;
  z-index: 50;
  max-width: 320px;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-400);
  background: hsl(var(--bg-900-free) / .92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px hsl(0 0% 0% / .3);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease-std), transform var(--t-fast) var(--ease-std);
}

.illusia-fn-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Amber shimmer — topo do popup (mesmo padrão dos stats) */
.illusia-fn-tooltip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--amber-free) / .25), transparent);
  border-radius: var(--r-md) var(--r-md) 0 0;
  pointer-events: none;
}

/* Arrow pointing down */
.illusia-fn-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: hsl(var(--bg-900-free) / .92) transparent transparent transparent;
}


/* ==========================================================================
 * 7. AFTERWORD + SUPPORT LINKS
 * Parent: .chapter__afterword.infobox (uses section 3 styles)
 *         .chapter__support, .chapter__support-message, .chapter__support-links
 * ========================================================================== */

.chapter .chapter__support {
  margin: var(--space-xl) 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--r-lg);
  background: hsl(var(--bg-900-free) / .4);
  border: 1px solid var(--border-1);
  text-align: center;
  position: relative;
}

.chapter .chapter__support::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--amber-free) / .06), transparent);
  pointer-events: none;
}

.chapter .chapter__support-message {
  font-size: var(--text-sm);
  color: var(--fg-600);
  margin-bottom: var(--space-sm);
}

.chapter .chapter__support-links {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.chapter .chapter__support-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-600);
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}

.chapter .chapter__support-links a:hover {
  color: var(--amber);
  border-color: var(--border-amber);
  background: hsl(var(--amber-free) / .04);
}

.chapter .chapter__support-links a i {
  font-size: .9em;
  color: var(--fg-800);
  transition: color var(--t-fast);
}

.chapter .chapter__support-links a:hover i {
  color: var(--amber);
}

.chapter .chapter__support-links a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}


/* ==========================================================================
 * 8. COMMENT RULES CARD
 * Custom: .illusia-comment-rules (injected via fictioneer_chapter_before_comments)
 * ========================================================================== */

.illusia-comment-rules {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--r-lg);
  background: hsl(var(--bg-900-free) / .3);
  border: 1px solid var(--border-0);
  position: relative;
}

.illusia-comment-rules::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--amber-free) / .04), transparent);
  pointer-events: none;
}

.illusia-comment-rules__title {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-800);
  margin-bottom: var(--space-xs);
}

.illusia-comment-rules__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.illusia-comment-rules__list li {
  font-size: var(--text-sm);
  color: var(--fg-600);
  line-height: 1.5;
  padding-left: var(--space-sm);
  position: relative;
}

.illusia-comment-rules__list li::before {
  content: '\2023';
  position: absolute;
  left: 0;
  color: var(--amber-dim);
  font-weight: 600;
}

.illusia-comment-rules__bell {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--fg-800);
}

.illusia-comment-rules__bell i {
  color: var(--amber-dim);
  margin: 0 .2em;
}


/* ==========================================================================
 * 9. PARAGRAPH TOOLS (floating)
 * Parent: .paragraph-tools, .paragraph-tools__actions, .button
 * ========================================================================== */

/* Positioning inherited from Fictioneer: position:absolute above the <p>.
   We only override visual styling (glass). */

.chapter .paragraph-tools__actions {
  gap: 2px;
  padding: var(--space-2xs);
  border-radius: var(--r-lg);
  background: hsl(var(--bg-700-free) / .88);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
  filter: none;
}

/* Paragraph-tools dentro de .chapter — override mais sutil que o
 * default de `illusia-tts.css` (sem border, sem bg, pra parecer
 * "menu flutuante" e não toolbar agrupada). Mantém ff-mono canônico. */
.chapter .paragraph-tools__actions .button {
  --btn-size:   var(--text-2xs);
  --btn-pad-y:  var(--space-2xs);
  --btn-pad-x:  var(--space-sm);
  --btn-radius: var(--r-md);
  --btn-bg:     transparent;
  --btn-fg:     var(--fg-600);
  --btn-border: transparent;
  --btn-bg-hover:     hsl(var(--amber-free) / .08);
  --btn-fg-hover:     var(--fg-200);
  --btn-border-hover: transparent;
  --btn-weight: 500;
  white-space: nowrap;
}

.chapter .paragraph-tools__actions .button i { font-size: .85em; }

/* Close button */
.chapter .paragraph-tools__actions #button-close-paragraph-tools {
  color: var(--fg-900);
  padding: var(--space-2xs);
}

.chapter .paragraph-tools__actions #button-close-paragraph-tools:hover {
  color: var(--crimson);
  background: hsl(var(--crimson-free) / .08);
}

/* Suggestion floating button (appears on text selection)
   Note: .suggestion-tools is output via fictioneer_chapter_after_main,
   outside .chapter — so no .chapter ancestor in selector. */
.suggestion-tools button {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--r-md);
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  background: hsl(var(--bg-700-free) / .88);
  backdrop-filter: var(--glass-blur);
  color: var(--fg-400);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-md);
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}

.suggestion-tools button:not(.current, [disabled]):hover {
  color: var(--amber);
  border-color: hsl(var(--amber-free) / .25);
  background: hsl(var(--bg-700-free) / .95);
}


/* ==========================================================================
 * 10. COMMENTS SECTION
 * Parent: .chapter__comments.comment-section
 * ========================================================================== */

.chapter .chapter__comments {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-0);
}


/* ==========================================================================
 * 11. PASSWORD FORM + TIMER + TIER MESSAGE
 * Custom: .illusia-password-form, .illusia-password-form__card,
 *         .illusia-password-form__timer, .illusia-tier-message
 * ========================================================================== */

.illusia-password-form {
  text-align: center;
}

.illusia-password-form__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--r-xl);
  background: hsl(var(--bg-900-free) / .5);
  border: 1px solid var(--border-1);
  position: relative;
}

.illusia-password-form__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--amber-free) / .1), transparent);
  pointer-events: none;
}

.illusia-password-form__icon {
  font-size: var(--text-xl);
  color: var(--amber-dim);
  margin-bottom: var(--space-sm);
}

.illusia-password-form__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--fg-200);
  margin-bottom: var(--space-xs);
}

.illusia-password-form__desc {
  font-size: var(--text-sm);
  color: var(--fg-600);
  margin-bottom: var(--space-lg);
  max-width: 400px;
}

.illusia-password-form__row {
  display: flex;
  gap: var(--space-xs);
  max-width: 360px;
  width: 100%;
}

.illusia-password-form__input {
  flex: 1;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  background: hsl(var(--bg-900-free) / .5);
  color: var(--fg-300);
  font-family: var(--ff-ui);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--t-fast);
}

.illusia-password-form__input:focus {
  border-color: var(--border-amber);
}

.illusia-password-form__input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.illusia-password-form__submit {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--r-md);
  background: var(--amber);
  color: var(--fg-inverted);
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  border: none;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.illusia-password-form__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px hsl(var(--amber-free) / .25);
}

.illusia-password-form__submit:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* --- 11b. Countdown timer --- */
.illusia-password-form__timer {
  margin-top: var(--space-md);
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  color: var(--fg-800);
  letter-spacing: .04em;
}

.illusia-password-form__timer-value {
  color: var(--amber);
  font-weight: 500;
}

/* Live region (role="status") que anuncia UMA vez quando o countdown zera.
   O timer em si é role="timer" (aria-live off implícito — correto pra tick
   por segundo); este irmão sr-only recebe o texto de liberação via JS.
   Escondido via utility global `.illusia-sr-only` (v2.5.0/S14). */

/* --- 11c. Tier message (Patreon upsell) --- */
/* max-width + margin-inline preservam a geometria centrada que vinha do
   bloco legado de illusia-patreon.css, deletado em v2.3.0 (S11) — este
   é o único dono do seletor agora. */
.illusia-tier-message {
  max-width: 500px;
  margin-top: var(--space-lg);
  margin-inline: auto;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--r-lg);
  background: hsl(var(--amber-free) / .04);
  border: 1px solid var(--border-amber);
  text-align: center;
}

.illusia-tier-message__badge {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--r-sm);
  background: var(--amber);
  color: var(--fg-inverted);
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--space-xs);
}

.illusia-tier-message__notice {
  font-size: var(--text-sm);
  color: var(--fg-600);
  margin-bottom: var(--space-sm);
}

/* `.illusia-tier-message__button` migrou pro `.button._secondary`
 * canônico (v1.75.0 PR2). Estilos delegados pro vocabulário. */


/* ==========================================================================
 * 12. CHAPTER INDEX MODAL
 * Parent: .dialog-modal._chapter-index, .dialog-modal__wrapper,
 *         .chapter-index, .chapter-index__list, .chapter-index__control
 * ========================================================================== */

.dialog-modal._chapter-index {
  --modal-width: 420px;
  background: hsl(var(--bg-900-free) / .92);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  color: var(--fg-300);
}

.dialog-modal._chapter-index .dialog-modal__header {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-800);
  padding: var(--space-md) var(--space-lg) var(--space-sm);
  border-bottom: 1px solid var(--border-0);
}

.dialog-modal._chapter-index .dialog-modal__close {
  color: var(--fg-800);
  transition: color var(--t-fast);
}

.dialog-modal._chapter-index .dialog-modal__close:hover {
  color: var(--amber);
}

.dialog-modal._chapter-index .dialog-modal__row {
  padding: var(--space-sm) var(--space-md);
}

/* Chapter list container */
.dialog-modal._chapter-index .chapter-index {
  font-size: var(--text-sm);
  line-height: 1.5;
}

.dialog-modal._chapter-index .chapter-index__control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.dialog-modal._chapter-index .chapter-index__back-link {
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--amber-dim);
  transition: color var(--t-fast);
}

.dialog-modal._chapter-index .chapter-index__back-link:hover {
  color: var(--amber);
}

.dialog-modal._chapter-index .chapter-index__order {
  color: var(--fg-800);
  font-size: var(--text-xs);
  background: transparent;
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  padding: var(--space-2xs);
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), border-color var(--t-fast);
  cursor: pointer;
}

.dialog-modal._chapter-index .chapter-index__order:hover {
  color: var(--amber);
  border-color: var(--border-amber);
}

/* Chapter list items */
.dialog-modal._chapter-index .chapter-index__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 400px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.dialog-modal._chapter-index .chapter-index li {
  border-radius: var(--r-sm);
  background: transparent;
  transition: background var(--t-fast);
}

.dialog-modal._chapter-index .chapter-index li a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  color: var(--fg-600);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--t-fast);
}

.dialog-modal._chapter-index .chapter-index li a:hover {
  color: var(--fg-200);
}

.dialog-modal._chapter-index .chapter-index li:hover {
  background: hsl(var(--bg-900-free) / .5);
}

.dialog-modal._chapter-index .chapter-index li i,
.dialog-modal._chapter-index .chapter-index li .icon,
.dialog-modal._chapter-index .chapter-index li .text-icon {
  color: var(--fg-900);
  font-size: .85em;
  min-width: 20px;
  text-align: center;
}

/* Current chapter highlight */
.dialog-modal._chapter-index .chapter-index li.current {
  background: hsl(var(--amber-free) / .08);
  border-left: 2px solid var(--amber);
}

.dialog-modal._chapter-index .chapter-index li.current a {
  color: var(--amber);
  font-weight: 600;
}

.dialog-modal._chapter-index .chapter-index li.current i,
.dialog-modal._chapter-index .chapter-index li.current .icon,
.dialog-modal._chapter-index .chapter-index li.current .text-icon {
  color: var(--amber);
}

/* Password-protected chapters */
.dialog-modal._chapter-index .chapter-index li.has-password i {
  color: var(--fg-900);
}


/* ==========================================================================
 * 13. LIGHT MODE
 * ========================================================================== */

:root[data-mode="light"] .chapter .progress {
  background: hsl(var(--illusia-border-base) / .08);
}

:root[data-mode="light"] .chapter .progress__bar {
  box-shadow: 0 0 6px hsl(var(--amber-free) / .2);
}

:root[data-mode="light"] .chapter .chapter__actions,
:root[data-mode="light"] .chapter .infobox,
:root[data-mode="light"] .chapter .chapter__support,
:root[data-mode="light"] .illusia-comment-rules,
:root[data-mode="light"] .illusia-password-form__card {
  background: hsl(var(--bg-200-free) / .35);
  border-color: hsl(var(--illusia-border-base) / .12);
}

:root[data-mode="light"] .chapter .chapter__content blockquote {
  background: hsl(var(--amber-free) / .04);
}

:root[data-mode="light"] .illusia-fn-tooltip {
  background: hsl(var(--bg-50-free) / .95);
  border-color: hsl(var(--illusia-border-base) / .15);
  color: var(--fg-600);
}

:root[data-mode="light"] .illusia-fn-tooltip::after {
  border-color: hsl(var(--bg-50-free) / .95) transparent transparent transparent;
}

:root[data-mode="light"] .illusia-fn-tooltip::before {
  background: linear-gradient(90deg, transparent, hsl(var(--amber-free) / .35), transparent);
}

:root[data-mode="light"] .illusia-fn-item {
  background: hsl(var(--bg-200-free) / .25);
}

:root[data-mode="light"] .illusia-fn-item:hover {
  background: hsl(var(--bg-200-free) / .4);
}

:root[data-mode="light"] .chapter .chapter__content p.selected-paragraph::after {
  background: hsl(var(--amber-free) / .12);
  border-left-color: hsl(var(--amber-free) / .4);
}

:root[data-mode="light"] .chapter .paragraph-tools__actions {
  background: hsl(var(--bg-50-free) / .92);
  border-color: hsl(var(--illusia-border-base) / .15);
}

:root[data-mode="light"] .suggestion-tools button {
  background: hsl(var(--bg-50-free) / .92);
  border-color: hsl(var(--illusia-border-base) / .15);
}

:root[data-mode="light"] .dialog-modal._chapter-index {
  background: hsl(var(--bg-50-free) / .95);
  border-color: hsl(var(--illusia-border-base) / .12);
}

:root[data-mode="light"] .dialog-modal._chapter-index .chapter-index li:hover {
  background: hsl(var(--bg-200-free) / .3);
}

/* ── Texto escuro em fundo âmbar sólido ── */
:root[data-mode="light"] .illusia-password-form__submit,
:root[data-mode="light"] .illusia-tier-message__badge {
  color: var(--fg-100);
}


/* ==========================================================================
 * 14. RESPONSIVE
 * ========================================================================== */

@media (max-width: 640px) {
  .chapter .chapter__actions {
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding: var(--space-2xs);
  }

  .chapter .chapter__actions-container {
    flex: 1;
    justify-content: center;
  }

  /* Colapsa rótulos de texto pra icon-only no mobile — MAS preserva o toggle
     .on/.off do parent (botões _navigation prev/próximo). Esconder TODOS os
     spans deixava prev/próximo VAZIOS: o ícone deles vive no `.off` (não há
     <i> solto), então `span{display:none}` nukava ícone + texto. */
  .chapter .chapter__actions .button span:not(.on):not(.off) {
    display: none;
  }

  .chapter .chapter__headline {
    padding: var(--space-md) 0 var(--space-lg);
  }

  /* Desliga justificado/hífens no mobile SEM atropelar alinhamento escolhido
     no editor — `.has-text-align-*` (0,2,0) perderia pra esta regra (0,2,1),
     então parágrafos centralizados/à direita precisam escapar via :not()
     (mesmo idioma das regras de justify/indent do parent). */
  .chapter .chapter__content p:not(.has-text-align-center, .has-text-align-right, [align="center"], [align="right"]) {
    text-align: left;
    hyphens: none;
  }

  .chapter__identity-meta {
    gap: var(--space-sm);
  }

  .chapter .paragraph-tools__actions .button span {
    display: none;
  }

  .illusia-fn-tooltip {
    max-width: calc(100vw - 2rem);
  }

  .illusia-password-form__row {
    flex-direction: column;
  }

}


/* ==========================================================================
 * 15. REDUCED MOTION
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .chapter *,
  .chapter *::before,
  .chapter *::after,
  .illusia-fn-tooltip,
  .illusia-fn-item {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
 * 16. ENTRY ANIMATIONS
 * ========================================================================== */

@keyframes illusia-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Headline + content NÃO animam: o capítulo não tem hero, então o LCP é
   texto (título ou 1º parágrafo). Um fade de opacity 0→1 (420ms+delay)
   adiava o LCP em ~0.5s numa página que pinta na hora. Só os blocos
   não-LCP (barra de ações no topo + footer) mantêm a entrada. */
.chapter .chapter__actions--top {
  animation: illusia-fade-up var(--t-slow) var(--ease-expo) both;
}

.chapter .chapter__footer {
  animation: illusia-fade-up var(--t-slow) var(--ease-expo) .18s both;
}


/* ==========================================================================
 * 17. PRINT STYLES
 *
 * Capítulos longos costumam ser impressos por leitores. Reset editorial:
 * cor preta sobre branco, sem chrome (actions, progress bar, paragraph tools,
 * comentários, modal), footnotes legíveis como lista numerada plain.
 * Page breaks evitam quebrar dentro de heading / footnote / blockquote.
 * ========================================================================== */

@media print {
  /* Hide non-content chrome */
  .chapter .progress,
  .chapter .chapter__actions,
  .chapter .chapter__actions--top,
  .chapter .chapter__actions--bottom,
  .chapter .paragraph-tools__actions,
  .suggestion-tools,
  .chapter .chapter__comments,
  .illusia-comment-rules,
  .chapter .chapter__support,
  .dialog-modal._chapter-index,
  .tts-interface,
  .illusia-fn-tooltip {
    display: none !important;
  }

  /* Reset editorial colors — print is always paper white */
  .chapter,
  .chapter .chapter__content,
  .chapter .chapter__content p,
  .chapter .chapter__title,
  .chapter .chapter__author,
  .chapter .chapter__story-link,
  .chapter .infobox,
  .chapter__identity-meta,
  .chapter__identity-item,
  .chapter__credits-primary,
  .chapter__credits-secondary {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    border-color: #666 !important;
  }

  /* Headings: keep with the next paragraph */
  .chapter .chapter__title,
  .chapter .chapter__content h2,
  .chapter .chapter__content h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Avoid orphaned content blocks */
  .chapter .chapter__content p,
  .chapter .chapter__content blockquote,
  .illusia-fn-item {
    page-break-inside: avoid;
    break-inside: avoid;
    orphans: 3;
    widows: 3;
  }

  /* Footnotes: plain list, ref as inline brackets */
  .illusia-fn-sup .illusia-fn-ref {
    color: #000 !important;
    background: transparent !important;
    text-decoration: none !important;
    transform: none !important;
    font-weight: 700;
  }

  .illusia-fn-sup .illusia-fn-ref::before { content: '['; }
  .illusia-fn-sup .illusia-fn-ref::after  { content: ']'; }

  .illusia-fn-container {
    border-top: 1px solid #666;
    padding-top: 1em;
    margin-top: 2em;
    page-break-before: avoid;
    break-before: avoid;
  }

  .illusia-fn-separator { display: none !important; }

  .illusia-fn-item {
    background: transparent !important;
    border-left: none !important;
    padding-left: 0 !important;
  }

  .illusia-fn-backref {
    display: none !important;
  }

  /* Identity divider */
  .chapter .chapter__headline::after {
    background: #000 !important;
  }

  /* Drop cap stays but in black */
  .chapter .chapter__content .has-drop-cap::first-letter {
    color: #000 !important;
  }

  /* Inline links: underline + URL after for context */
  .chapter .chapter__content a:not(.illusia-fn-ref) {
    color: #000 !important;
    text-decoration: underline !important;
  }

  /* Disable entry animations */
  .chapter .chapter__actions--top,
  .chapter .chapter__headline,
  .chapter .chapter__content,
  .chapter .chapter__footer {
    animation: none !important;
  }
}