/* ==========================================================
   EKULIHISO · leitor (Biblioteca) e modo de texto (obras)
   Os fundos são tokens próprios do leitor: não dependem do tema do site.
   ========================================================== */

[data-reader-bg="white"] { --r-papel: #fffefb; --r-tinta: #121a24; --r-tinta-2: #646a73; --r-linha: #e2ddd2; --r-realce: #7d1a14; }
[data-reader-bg="sepia"] { --r-papel: #f4ecd8; --r-tinta: #3b2f20; --r-tinta-2: #6f6250; --r-linha: #e0d4b8; --r-realce: #8a3a12; }
[data-reader-bg="gray"]  { --r-papel: #3f4349; --r-tinta: #ebe7df; --r-tinta-2: #b9b5ad; --r-linha: #555a61; --r-realce: #f0a594; }
[data-reader-bg="black"] { --r-papel: #000;    --r-tinta: #cfcac0; --r-tinta-2: #8f8a80; --r-linha: #2a2a2a; --r-realce: #d86a5c; }

[data-reader-font="serif"] { --r-fonte: var(--f-texto); }
[data-reader-font="sans"]  { --r-fonte: "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
[data-reader-spacing="compact"] { --r-entrelinha: 1.4; }
[data-reader-spacing="normal"]  { --r-entrelinha: 1.65; }
[data-reader-spacing="wide"]    { --r-entrelinha: 1.95; }
[data-reader-margins="narrow"] { --r-margem: 16px; }
[data-reader-margins="normal"] { --r-margem: clamp(20px, 6vw, 48px); }
[data-reader-margins="wide"]   { --r-margem: clamp(32px, 12vw, 120px); }

/* ---------- Leitor de ecrã inteiro ---------- */

.reader-body { margin: 0; background: #000; }

.reader {
  --reader-scale: 1.05;
  position: fixed; inset: 0;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--r-papel); color: var(--r-tinta);
  transition: background-color .2s, color .2s;
}

.reader__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px max(12px, env(safe-area-inset-left, 0px));
  background: var(--r-papel); color: var(--r-tinta-2);
  transition: opacity .2s, transform .2s;
  z-index: 3;
}
.reader__bar--top { border-bottom: 1px solid var(--r-linha); padding-top: max(8px, env(safe-area-inset-top, 0px)); }
.reader__bar--bottom { border-top: 1px solid var(--r-linha); padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
.reader--clean .reader__bar { opacity: 0; pointer-events: none; }
.reader--clean .reader__bar--top { transform: translateY(-100%); }
.reader--clean .reader__bar--bottom { transform: translateY(100%); }
.reader--clean .reader__bar:focus-within { opacity: 1; transform: none; pointer-events: auto; }

.reader__back, .reader__tool {
  min-width: 44px; min-height: 44px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: inherit;
  font: 500 15px/1 var(--f-arquivo); text-decoration: none; cursor: pointer;
}
.reader__back:hover, .reader__tool:hover, .reader__tool[aria-expanded="true"] { background: var(--r-linha); color: var(--r-tinta); }
.reader__back:focus-visible, .reader__tool:focus-visible, .reader button:focus-visible, .reader a:focus-visible { outline: 2px solid var(--r-realce); outline-offset: 2px; }
.reader__heading { flex: 1; min-width: 0; margin: 0; text-align: center; line-height: 1.25; }
.reader__book, .reader__chapter { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reader__book { font: 500 15px var(--f-voz); color: var(--r-tinta); }
.reader__chapter { font-size: 12px; letter-spacing: .04em; }

.reader__viewport { position: relative; min-height: 0; outline: none; }
.reader__viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--r-realce); }
[data-reader-mode="scroll"] .reader__viewport { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
[data-reader-mode="paged"] .reader__viewport { overflow: hidden; }

.reader__content {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 32px var(--r-margem);
  font-family: var(--r-fonte);
  font-size: calc(1.1875rem * var(--reader-scale));
  line-height: var(--r-entrelinha);
  hyphens: auto; -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
[data-reader-mode="scroll"] .reader__content { max-width: calc(36em + 2 * var(--r-margem)); padding-bottom: 96px; }
[data-reader-mode="paged"] .reader__content { height: 100%; column-fill: auto; }
.reader__content > * { margin: 0 0 1em; }
.reader__content p + p { margin-top: -1em; text-indent: 1.4em; }
.reader__content h1, .reader__content h2, .reader__content h3 { font-family: var(--f-voz); font-weight: 500; line-height: 1.2; break-after: avoid; }
.reader__content .reader__chapter-heading { font-size: 1.6em; margin: .5em 0 1.4em; text-align: center; }
.reader__content blockquote { margin-left: 1.2em; padding-left: 1em; border-left: 2px solid var(--r-linha); font-style: italic; }
.reader__content hr { border: 0; text-align: center; margin: 1.6em 0; break-inside: avoid; }
.reader__content hr::after { content: "◇ ◇ ◇"; color: var(--r-tinta-2); letter-spacing: .6em; }
.reader__content p, .reader__content li { orphans: 2; widows: 2; }
.reader__content ::selection { background: color-mix(in srgb, var(--r-realce) 30%, transparent); }
.reader__loading { color: var(--r-tinta-2); text-align: center; font-family: var(--f-arquivo); margin-top: 30vh; }

.reader__progress { flex: 1; display: grid; gap: 4px; text-align: center; }
.reader__progress p { margin: 0; font-size: 12px; color: var(--r-tinta-2); }
.reader__progress-track { height: 3px; border-radius: 2px; background: var(--r-linha); overflow: hidden; }
.reader__progress-fill { height: 100%; width: 0; background: var(--r-realce); transition: width .3s; }

/* Painéis: índice e definições */
.reader-toc, .reader .reader-settings {
  position: absolute; z-index: 4; top: 64px; right: 12px;
  width: min(360px, calc(100vw - 24px)); max-height: calc(100% - 140px); overflow-y: auto;
  padding: 16px; border: 1px solid var(--r-linha); border-radius: 10px;
  background: var(--r-papel); color: var(--r-tinta);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.reader-toc { left: 12px; right: auto; }
.reader-toc h2 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--r-tinta-2); }
.reader-toc ol { margin: 0 0 12px; padding-left: 1.6em; }
.reader-toc li { margin: 2px 0; }
.reader-toc button { width: 100%; min-height: 40px; padding: 4px 6px; text-align: left; border: 0; border-radius: 6px; background: none; color: inherit; font: 17px var(--f-texto); cursor: pointer; }
.reader-toc button:hover { background: var(--r-linha); }
.reader-toc__locked { display: block; padding: 8px 6px; color: var(--r-tinta-2); font-family: var(--f-texto); }
.reader-toc__locked small { display: block; font-size: 11px; }

.reader-settings fieldset { border: 0; margin: 0 0 14px; padding: 0; }
.reader-settings legend { margin-bottom: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--r-tinta-2, var(--tinta-3)); }
.reader-settings__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reader-settings__value { min-width: 4em; text-align: center; font-family: var(--f-arquivo); }
.reader-settings .button--ghost { color: inherit; border-color: currentColor; }
.reader-swatch, .reader-choice {
  min-height: 40px; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  font: 500 14px var(--f-arquivo); border: 1px solid var(--r-linha, var(--linha)); background: transparent; color: inherit;
}
.reader-choice[aria-pressed="true"], .reader-swatch[aria-pressed="true"] { outline: 2px solid var(--r-realce, var(--bordo)); outline-offset: 1px; }
.reader-swatch--white { background: #fffefb; color: #121a24; }
.reader-swatch--sepia { background: #f4ecd8; color: #3b2f20; }
.reader-swatch--gray  { background: #3f4349; color: #ebe7df; }
.reader-swatch--black { background: #000; color: #cfcac0; }

/* Fim da amostra / do livro */
.reader-end {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; gap: 12px; padding: 24px;
  text-align: center; background: var(--r-papel); color: var(--r-tinta);
}
.reader-end h2 { margin: 0; font: 500 clamp(26px, 5vw, 38px)/1.15 var(--f-voz); outline: none; }
.reader-end p { max-width: 32em; margin: 0 auto; color: var(--r-tinta-2); font-family: var(--f-texto); font-size: 18px; }
.reader-end__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.reader-end .button--ghost { color: var(--r-tinta); border-color: var(--r-tinta-2); }

/* ---------- Modo de texto nas páginas das obras ---------- */

.reader-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 28px auto 0; position: relative; }
.reader-tools .reader-settings {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: min(360px, calc(100vw - 32px)); padding: 16px; text-align: left;
  border: 1px solid var(--linha); border-radius: 10px; background: var(--papel-3); color: var(--tinta);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .14);
}
.reader-text {
  font-family: var(--r-fonte);
  font-size: calc(1.22rem * var(--reader-scale) * var(--font-scale, 1));
  line-height: var(--r-entrelinha);
  background: var(--r-papel); color: var(--r-tinta);
  padding-inline: var(--r-margem); border-radius: 6px;
  transition: background-color .2s, color .2s;
}
.reader-text[data-reader-bg="white"] { background: transparent; color: inherit; }
.reader-text[data-reader-margins="narrow"] { --r-margem: 0px; }
.reader-text[data-reader-margins="normal"] { --r-margem: 16px; }
.reader-text[data-reader-margins="wide"]   { --r-margem: clamp(24px, 8vw, 96px); }
/* Nos poemas, a voz itálica fica; muda o tamanho, a entrelinha e, se pedido, a letra sem serifa. */
.reader-text.poem-page .verse { font-size: calc(clamp(1.3rem, 2.2vw, 1.7rem) * var(--reader-scale) / 1.05); line-height: calc(var(--r-entrelinha) - .1); }
.reader-text.poem-page[data-reader-font="sans"] .verse { font-family: var(--r-fonte); font-style: normal; }
.reader-tools [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .reader, .reader__bar, .reader__progress-fill, .reader-text { transition: none; }
}

/* Nas páginas largas, a página não passa de uma medida confortável. */
[data-reader-mode="paged"] .reader__viewport { width: 100%; max-width: calc(42.75rem * var(--reader-scale) + 2 * var(--r-margem)); justify-self: center; }

/* Os painéis com display próprio também têm de respeitar [hidden]. */
.reader-end[hidden], .reader-toc[hidden], .reader-settings[hidden] { display: none; }
.reader { grid-template-columns: minmax(0, 1fr); }
.reader__viewport { min-width: 0; }
[data-reader-prev], [data-reader-next] { font-size: 28px; }
.reader .button { background: var(--r-realce); border-color: var(--r-realce); color: var(--r-papel); }
.reader .button--ghost { background: transparent; color: var(--r-tinta); border-color: var(--r-tinta-2); }

/* ---------- Marcações ---------- */

.hl { color: inherit; background: var(--hl); border-radius: 2px; padding: 0.05em 0; cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl--yellow { --hl: rgba(250, 204, 21, .38); }
.hl--green  { --hl: rgba(74, 168, 96, .32); }
.hl--blue   { --hl: rgba(66, 133, 244, .28); }
.hl--pink   { --hl: rgba(232, 70, 128, .26); }
[data-reader-bg="gray"] .hl--yellow, [data-reader-bg="black"] .hl--yellow { --hl: rgba(250, 204, 21, .45); }
.hl--note { text-decoration: underline dotted; text-underline-offset: .2em; }
.hl:focus-visible { outline: 2px solid var(--r-realce, var(--bordo)); outline-offset: 1px; }

.annot-toolbar {
  position: fixed; z-index: 30; max-width: calc(100vw - 16px);
  padding: 6px; border-radius: 10px;
  background: #121a24; color: #f4f0e8; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.annot-toolbar__row { display: flex; align-items: center; gap: 4px; }
.annot-swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); cursor: pointer; }
.annot-swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px #121a24 inset; }
.annot-swatch--yellow { background: #f5c518; }
.annot-swatch--green  { background: #4aa860; }
.annot-swatch--blue   { background: #4285f4; }
.annot-swatch--pink   { background: #e84680; }
.annot-toolbar__action { min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: 500 14px var(--f-arquivo); cursor: pointer; }
.annot-toolbar__action:hover, .annot-toolbar button:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
.annot-note { display: grid; gap: 6px; margin-top: 6px; width: min(320px, calc(100vw - 32px)); }
.annot-note textarea { width: 100%; box-sizing: border-box; padding: 8px; border-radius: 6px; border: 0; font: 16px var(--f-texto); }
.annot-note .button { justify-self: end; }

.annot-invite {
  position: fixed; z-index: 31; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 10px;
  background: var(--papel-3, #fffefb); color: var(--tinta, #121a24); border: 1px solid var(--linha, #e2ddd2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}
.annot-invite p { margin: 0 0 8px; }
.annot-invite__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.annot-invite .annot-toolbar__action { color: var(--tinta-2, #4b5360); }
.annot-toolbar[hidden], .annot-invite[hidden], .reader-annotations[hidden], .annot-note[hidden] { display: none; }

.reader .reader-annotations {
  position: absolute; z-index: 4; top: 64px; right: 12px;
  width: min(400px, calc(100vw - 24px)); max-height: calc(100% - 140px); overflow-y: auto;
  padding: 16px; border: 1px solid var(--r-linha); border-radius: 10px;
  background: var(--r-papel); color: var(--r-tinta); box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.reader-tools .reader-annotations {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; padding: 16px; text-align: left;
  border: 1px solid var(--linha); border-radius: 10px; background: var(--papel-3); color: var(--tinta);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .14);
}
.reader-annotations h2 { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--r-tinta-2, var(--tinta-3)); }
.annot-list ul { list-style: none; margin: 0 0 12px; padding: 0; }
.annot-list__chapter { margin: 14px 0 6px; font-size: 12px; letter-spacing: .06em; color: var(--r-tinta-2, var(--tinta-3)); }
.annot-list__empty { color: var(--r-tinta-2, var(--tinta-3)); }
.annot-item { padding: 10px 0 10px 12px; border-left: 4px solid var(--hl-solid, var(--r-linha, var(--linha))); margin-bottom: 6px; }
.annot-item--yellow { --hl-solid: #f5c518; }
.annot-item--green  { --hl-solid: #4aa860; }
.annot-item--blue   { --hl-solid: #4285f4; }
.annot-item--pink   { --hl-solid: #e84680; }
.annot-item--bookmark { --hl-solid: var(--r-realce, var(--bordo)); }
.annot-item__kind { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--r-tinta-2, var(--tinta-3)); }
.annot-item blockquote { margin: 4px 0; font: 16px/1.45 var(--f-texto); }
.annot-item__note { margin: 4px 0; padding: 6px 8px; border-radius: 6px; background: var(--r-linha, var(--papel-2)); font-size: 15px; white-space: pre-wrap; }
.annot-item__actions { display: flex; gap: 6px; align-items: center; }
.annot-item__actions button { min-height: 36px; padding: 0 10px; border: 1px solid var(--r-linha, var(--linha)); border-radius: 6px; background: transparent; color: inherit; font: 500 13px var(--f-arquivo); cursor: pointer; }
.annot-item__orphan { font-size: 13px; color: var(--r-tinta-2, var(--tinta-3)); font-style: italic; }
[data-annot-bookmark][aria-pressed="true"] svg path { fill: var(--r-realce); stroke: var(--r-realce); }

/* Ecrãs pequenos: índice e marcações só com ícone (o nome fica para os leitores de ecrã). */
.reader__tool-icon { display: none; }
@media (max-width: 560px) {
  .reader__tool-icon { display: block; }
  .reader__tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .reader__bar--top { gap: 2px; }
}

/* Livros de poesia: estrofes separadas, versos sem recuo nem hifenização. */
[data-reader-genre="poetry"] .reader__content { hyphens: manual; -webkit-hyphens: manual; }
[data-reader-genre="poetry"] .reader__content p,
[data-reader-genre="poetry"] .reader__content p + p { margin: 0 0 1.4em; text-indent: 0; }
[data-reader-genre="poetry"] .reader__content p { break-inside: avoid; }