/* ============================================================
   nvllst reader — page chrome + prose styles
   Sits on top of tokens.css (loaded first). Adheres to design
   system §6 (reader-specific patterns).
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100dvh; background: var(--bg); }

/* Default section-break ornament — overridden per-book via <style> in <head> */
:root { --scene-break-url: url('/images/section-break.svg'); }

/* ── Compact scrollbar ────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
body {
  background: var(--bg);
  color: var(--text-prose);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

/* ── Selection in prose uses the accent dim. ─────────────── */
::selection { background: var(--selection-bg); }

/* ════════════════════════════════════════════════════════════
   Shared library chrome (used on /, /{author}, etc.)
   ════════════════════════════════════════════════════════════ */

.lib-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border-quiet);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.brand-link.compact { gap: 0; }
.brand-mark { height: 22px; width: auto; display: block; }
.brand-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Adaptive logo swap. */
.logo-dk { display: none; }
[data-theme="dark"] .logo-lt { display: none; }
[data-theme="dark"] .logo-dk { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-lt { display: none; }
  :root:not([data-theme="light"]) .logo-dk { display: inline; }
}

.header-spacer { flex: 1; }

.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.crumb-link { color: var(--text-sub); text-decoration: none; }
.crumb-link:hover { color: var(--accent); }
.crumb-sep { color: var(--text-muted); }
.crumb-current { color: var(--text); }
.crumb-pos { font-size: 0.85em; color: var(--text-muted); }

.theme-toggles { display: flex; gap: 4px; align-items: center; }
.chip-sep { color: var(--text-muted); padding: 0 6px; }

.chip {
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
  transition: color 0.1s, background 0.1s, border-color 0.1s;
}
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* ── Reader identity (name + auth actions in header) ──────── */
.reader-name {
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Auth pages ───────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius-md);
  padding: 36px 32px;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--text) 6%, transparent);
}
.auth-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.auth-sub  { font-size: 14px; color: var(--text-sub); margin: 0 0 24px; line-height: 1.5; }
.auth-note { font-size: 13px; color: var(--text-muted); margin-top: 20px; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-label { font-family: var(--font-cond); font-size: 11px; font-weight: 600;
              text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.auth-input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
  font-family: var(--font-sans); font-size: 15px; color: var(--text);
  outline: none; transition: border-color 0.12s;
}
.auth-input:focus { border-color: var(--accent); }
.auth-input[readonly] { opacity: 0.6; cursor: default; }
.auth-btn {
  margin-top: 4px; padding: 10px 16px; border: 0;
  border-radius: var(--radius-sm); background: var(--accent);
  color: var(--accent-on); font-family: var(--font-sans);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: opacity 0.12s;
}
.auth-btn:hover { opacity: 0.88; }
.auth-error  { color: var(--danger); font-size: 13px; margin: 0 0 16px; }
.auth-errors { color: var(--danger); font-size: 13px; margin: 0 0 16px; padding-left: 20px; }
.magic-link-box {
  background: var(--well); border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 16px 0; word-break: break-all;
}
.magic-link { font-size: 13px; color: var(--accent); text-decoration: none; }

/* ── Reader access checklist ─────────────────────────────── */
.access-series { margin-bottom: 20px; }
.access-books  { margin: 4px 0 0 24px; display: flex; flex-direction: column; gap: 6px; }

/* ── Admin dashboard ──────────────────────────────────────── */
.admin-section { margin-bottom: 40px; }
.admin-section-title {
  font-family: var(--font-cond); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-quiet);
}
.invite-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.invite-form .auth-input { max-width: 280px; margin: 0; }
.admin-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.admin-table th {
  font-family: var(--font-cond); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted);
  text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--border-quiet);
}
.admin-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border-quiet); color: var(--text); }
.admin-table tr.used td { opacity: 0.45; }
.invite-link { color: var(--accent); font-family: var(--font-mono); font-size: 12px; }

.lib-main { max-width: 1100px; margin: 0 auto; padding: 40px 32px 80px; }

.lib-page-header { margin-bottom: 32px; }
.page-title {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 12px;
  text-wrap: balance;
}

.section-tag {
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-40);
  margin: 0 0 12px;
}
.section-intro { font-size: 16px; color: var(--text-sub); max-width: 640px; line-height: 1.6; }

.empty {
  font-family: var(--font-cond);
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 40px 20px;
}

/* ── Library tree ────────────────────────────────────────── */

.lib-tree { max-width: 680px; }

/* Strip wa-details card chrome so entries blend with the page */
.lib-tree wa-details::part(base) {
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.lib-tree .lib-author::part(base) {
  border-top: 1px solid var(--border-quiet);
}
.lib-tree .lib-author:first-of-type::part(base) {
  border-top: none;
}

/* Summary slot content — flex row inside wa-details */
.lib-author-summary,
.lib-series-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lib-author-identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.lib-author-bio-link {
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: none;
  width: fit-content;
}
.lib-author-bio-link:hover { text-decoration: underline; }

.lib-series-list { padding: 0 0 4px 8px; }

/* Book list */
.lib-books { list-style: none; padding: 4px 0 8px 16px; margin: 0; }
/* ── Cover page ──────────────────────────────────────────── */
.cover-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 56px - 72px); /* viewport - navbar - chapter-nav */
  padding: 24px 16px;
}
.cover-page-img {
  max-height: calc(100dvh - 56px - 72px - 48px);
  max-width: min(100%, 480px);
  width: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--text) 16%, transparent);
}

.lib-book-cover {
  width: 36px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}


.lib-book {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 6px;
  border-top: 1px solid var(--border-quiet);
}
.lib-book:first-child { border-top: 0; }
.lib-book-link {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
a.lib-book-link:hover { color: var(--accent); }
.lib-book-link--empty { color: var(--text-muted); cursor: default; }

/* Shared text styles */
.lib-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.015em;
}
.lib-name--sm { font-size: 17px; }
.lib-count {
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.lib-book-ann { color: var(--accent); }

/* Chevron — rotates when details is open */

/* Headshot inline in author row */
.lib-headshot {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Card grids (authors, series, books) ─────────────────── */

.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.12s, transform 0.12s;
}
.card:hover { border-color: var(--accent); transform: translateY(-1px); }
.card-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.card-title:hover { color: var(--accent); }
.card-meta {
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.card-desc { font-size: 14px; color: var(--text-sub); line-height: 1.55; margin: 0; }

/* Author cards specifically */
.author-card { align-items: center; text-align: center; padding-top: 24px; }
.headshot {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  object-fit: cover;
  background: var(--well);
}
.headshot--lg {
  width: 120px;
  height: 120px;
}
.headshot-link { display: block; }

/* Book covers */
.book-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--well);
}
.cover--lg { max-width: 220px; height: auto; }
.cover-link { display: block; }

/* ── Author / book hero blocks ───────────────────────────── */

.author-hero, .book-hero {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 32px;
}
.author-hero-text, .book-hero-text { flex: 1; }

.social { list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 12px; }
.social a {
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-decoration: none;
}
.social a:hover { color: var(--accent-hover); }

.bio.prose {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-prose);
  max-width: 64ch;
  margin: 0 0 40px;
}

/* ── Book library page ───────────────────────────────────── */

.book-hero {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  margin-bottom: 40px;
}
.book-hero-cover {
  width: 180px;
  flex-shrink: 0;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--text) 20%, transparent);
}
.book-hero-text { flex: 1; padding-top: 4px; }
.book-subtitle {
  font-family: var(--font-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--text-sub);
  margin: 4px 0 0;
  letter-spacing: -0.01em;
}
.book-status-badge {
  display: inline-block;
  margin: 10px 0 0;
  padding: 3px 9px;
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--radius-sm);
}
.book-status-badge--draft       { background: var(--well); color: var(--text-muted); }
.book-status-badge--forthcoming { background: var(--accent-dim); color: var(--accent); }
.book-description-short {
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  color: var(--text-sub);
  line-height: 1.5;
  max-width: 52ch;
  margin: 12px 0 0;
}
.book-facts { margin-top: 16px; margin-bottom: 0; }
.read-start-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 9px 22px;
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.read-start-btn:hover { background: var(--accent-hover); }
.book-chapters { max-width: 680px; }

/* ── Author page details ─────────────────────────────────── */

.author-pronouns {
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 4px 0 0;
}
.author-location {
  font-family: var(--font-cond);
  font-size: 13px;
  color: var(--text-sub);
  margin: 6px 0 0;
}
.author-bio-short {
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  color: var(--text-sub);
  line-height: 1.5;
  max-width: 52ch;
  margin: 10px 0 0;
}
.author-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 14px 0 0;
}
.author-link {
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-decoration: none;
}
.author-link:hover { color: var(--accent-hover); }

.author-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  margin: 0 0 36px;
  padding: 16px 0;
  border-top: 1px solid var(--border-quiet);
  border-bottom: 1px solid var(--border-quiet);
}
.author-fact { display: flex; flex-direction: column; gap: 3px; }
.fact-label {
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.fact-value {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
}

.author-influences { margin-bottom: 40px; }
.influences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px 32px;
}
.influence-type-label {
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.influence-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.influence-list li {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-sub);
}

.author-catalog { margin-bottom: 40px; }
.catalog-series {
  padding: 20px 0;
  border-top: 1px solid var(--border-quiet);
}
.catalog-series:last-child { border-bottom: 1px solid var(--border-quiet); }
.catalog-series-header { margin-bottom: 4px; }
.catalog-series-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.catalog-series-name:hover { color: var(--accent); }
.catalog-series-desc {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.5;
  margin: 4px 0 12px;
  max-width: 56ch;
}
.catalog-books {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 12px;
}
.catalog-book {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.1s;
}
.catalog-book:hover { background: var(--accent-dim); }
.catalog-book-cover {
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: top center;
  border-radius: 3px;
  background: var(--well);
  flex-shrink: 0;
}
.catalog-book-cover--empty { opacity: 0.3; }
.catalog-book-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.catalog-book:hover .catalog-book-title { color: var(--accent); }
.catalog-book-meta {
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.catalog-empty {
  font-family: var(--font-cond);
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 0 0;
}

/* ── Chapter list (on book page) ─────────────────────────── */

.ch-list { list-style: none; padding: 0; margin: 0; }
.ch-row { border-top: 1px solid var(--border-quiet); }
.ch-row:first-child { border-top: 0; }
.ch-link {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--text);
  transition: color 0.1s, background 0.1s;
}
.ch-link:hover { color: var(--accent); background: var(--accent-dim); border-radius: 4px; padding-left: 12px; padding-right: 12px; }
.ch-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}
.ch-title { font-family: var(--font-serif); font-size: 18px; letter-spacing: -0.01em; }
.ch-duration { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.mono { font-family: var(--font-mono); }

/* ════════════════════════════════════════════════════════════
   Reader page
   ════════════════════════════════════════════════════════════ */

/* Chapter transition — body starts invisible; JS adds .chapter-loaded
   to fade in. When navigating to the next chapter, .chapter-exit fades
   out before window.location changes. bfcache restores are handled in JS. */
.reader-body {
  opacity: 0;
  transition: opacity 0.35s ease-in;
  padding-bottom: 120px;
}
.reader-body.chapter-loaded { opacity: 1; }
.reader-body.chapter-exit   { opacity: 0; transition: opacity 0.25s ease-out; }

.reader-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--border-quiet);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
  transition: opacity 0.2s;
}

.crumb-compact { gap: 6px; font-size: 11px; }

.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 32px; height: 32px;
  color: var(--text-sub);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;            /* sets the FA icon size */
  line-height: 1;
}
.icon-btn i { display: block; }   /* kill the inherited line-height baseline shift */
/* Hover: subtle background only — no accent color, so the button
   doesn't look "active" just because the cursor is over it. */
.icon-btn:hover { background: var(--well); }
.icon-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

/* Active state: accent fill distinguishes from hover clearly. */
.icon-btn[aria-pressed="true"],
.icon-btn[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* Chapter progress — 2px bar pinned to the bottom edge of the
   sticky header, filling left→right with brand color as the chapter
   scrolls. Hidden along with the header in distraction-free mode. */
.chapter-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.chapter-progress-fill {
  height: 100%;
  background: var(--brand-50);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform 0.05s linear;
}

/* Reader main layout: prose centered, prefs sidebar tucked alongside on wide screens. */
.reader-main {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 32px 60px;
}

/* The chapter itself — prose container, reader-controlled width.
   Default font is sans per design system §6; explicit data-font
   values override. */
.chapter {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-prose);
  max-width: var(--reader-measure, 68ch);
  margin: 0 auto;
}

[data-font="sans"]     .chapter { font-family: var(--font-sans);  }
[data-font="serif"]    .chapter { font-family: var(--font-serif); }
[data-font="mono"]     .chapter { font-family: var(--font-mono); font-size: 0.97em; }
[data-font="atkinson"] .chapter { font-family: 'Atkinson Hyperlegible', var(--font-sans); }
[data-font="lora"]     .chapter { font-family: 'Lora', Georgia, serif; }

[data-size="sm"] .chapter { font-size: 16px; }
[data-size="lg"] .chapter { font-size: 20px; }
[data-size="xl"] .chapter { font-size: 22px; }

[data-spacing="tight"] .chapter { line-height: 1.55; }
[data-spacing="loose"] .chapter { line-height: 1.95; }

[data-measure="narrow"] .chapter { --reader-measure: 55ch; }
[data-measure="wide"]   .chapter { --reader-measure: 80ch; }

[data-align="justify"] .chapter p,
[data-align="justify"] .chapter blockquote { text-align: justify; hyphens: auto; }

/* Block-level prose elements rendered by the transcribe pipeline.
   These are story text — they inherit the reader's font axis choice
   from .chapter rather than locking to Serif. (Originally headings
   were Serif per the design system, but the reader's "font" pref is
   meant to apply to all story text, not just body paragraphs.) */
.chapter .heading,
.chapter h1, .chapter h2, .chapter h3, .chapter h4, .chapter h5, .chapter h6 {
  font-family: inherit;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 1.4em;
  text-wrap: balance;
}
.chapter h1, .chapter .heading { font-size: 1.7em; text-align: center; margin-top: 0.4em; }
.chapter h2 { font-size: 1.45em; }
.chapter h3 { font-size: 1.25em; font-weight: 500; }
.chapter h4 { font-size: 1.1em; font-weight: 600; }
.chapter h5 {
  font-size: 0.92em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.chapter-eyebrow {
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 0.6em;
}

.chapter p, .chapter .para { margin: 0 0 1.05em; text-wrap: pretty; }
.chapter p:last-child, .chapter .para:last-child { margin-bottom: 0; }

/* Scene break — SVG ornament painted in the current text colour so it
   adapts to light/dark mode without any filter tricks.
   Default SVG is /images/section-break.svg; books can supply their own
   via --scene-break-url injected in <head>. */
.chapter hr.scene-break {
  display: block;
  border: 0;
  height: 24px;
  max-width: 216px;
  width: 100%;
  margin: 3lh auto;
  background-color: var(--text);
  -webkit-mask-image: var(--scene-break-url);
          mask-image: var(--scene-break-url);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.chapter blockquote {
  border-left: 3px solid var(--brand-60);
  padding: 4px 0 4px 22px;
  margin: 1em 0;
  font-style: italic;
  color: var(--text);
}
.chapter blockquote p { margin-bottom: 0.6em; }
.chapter blockquote p:last-child { margin-bottom: 0; }

.chapter ul, .chapter ol { margin: 0 0 1.05em; padding-left: 1.6em; }
.chapter li { margin-bottom: 0.3em; }

.chapter code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--well);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.chapter em { font-style: italic; }
.chapter strong { font-weight: 600; }

/* Incipit: small caps on the first 3 words of the opening paragraph. */
.chapter .incipit {
  font-variant: small-caps;
  letter-spacing: 0.02em;
}

/* Per-word spans emitted by transcribe. Word click seeks audio
   (when the player is open) and centers the word in view. Hover
   doesn't highlight individual words — the paragraph hover rule
   below provides feedback at the block level instead. */
.chapter .w {
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.08s, color 0.08s;
}
.chapter .w.active {
  background: var(--accent);
  color: var(--accent-on);
}

/* Paragraph-level highlight: the current paragraph (closest to the
   viewport center) always carries a subtle tint, so the reader can
   see "where they are." Hover gives the same treatment so the cursor
   target reads consistently. */
.chapter p.current,
.chapter blockquote.current,
.chapter h1.current,
.chapter h2.current,
.chapter h3.current,
.chapter h4.current,
.chapter h5.current,
.chapter h6.current,
.chapter p:hover,
.chapter blockquote:hover,
.chapter h1:hover,
.chapter h2:hover,
.chapter h3:hover,
.chapter h4:hover,
.chapter h5:hover,
.chapter h6:hover {
  background: color-mix(in srgb, var(--accent-dim) 60%, transparent);
  border-radius: var(--radius-sm);
}
.chapter p.bookmarked,
.chapter blockquote.bookmarked {
  background: var(--accent-dim);
  border-radius: var(--radius-sm);
  padding-inline: 6px;
  margin-inline: -6px;
}

/* ── Contrast axis ────────────────────────────────────────
   High: lightest neutral bg + darkest neutral text.
   Low:  2nd-lightest bg + 2nd-darkest text. */

[data-contrast="high"] { --bg: var(--parch-light); --text-prose: var(--stone-dark); }
[data-contrast="low"]  { --bg: var(--parchment);   --text-prose: var(--stone-light); }

/* Dark mode: the normal palette already uses stone-dark as bg, so
   "high" must go beyond the neutral scale to be visibly different.
   Pure black bg + warm near-white text gives a clear step up.
   "Low" softens by using a lighter dark surface + dimmer text. */
[data-theme="dark"][data-contrast="high"] { --bg: #000; --text-prose: #F5F4EF; }
[data-theme="dark"][data-contrast="low"]  { --bg: var(--stone); --text-prose: var(--ash-light); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-contrast="high"] { --bg: #000; --text-prose: #F5F4EF; }
  :root:not([data-theme="light"])[data-contrast="low"]  { --bg: var(--stone); --text-prose: var(--ash-light); }
}

/* ── Reader prefs popover ────────────────────────────────── */

/* The menu is hidden by default (the [hidden] attr in the template
   does that, but we also need styles when JS toggles visibility). It
   pops out from under the gear icon and stays fixed-positioned at the
   top-right corner of the viewport. */
.reader-prefs {
  position: fixed;
  top: 56px;
  right: 24px;
  width: 252px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  z-index: 60;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 8%, transparent);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.reader-prefs[hidden] { display: none; }
.reader-prefs.shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Small arrow pointing up to the gear button. */
/* Arrow removed — menu can appear at cursor position (right-click), not always below a button. */

/* Listen + Fullscreen quick-action buttons inside the options panel */
.prefs-actions { display: flex; gap: 8px; }
.prefs-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-sub);
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.prefs-action-btn:hover:not(:disabled) { background: var(--well); }
.prefs-action-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Icon-only variant — square, no text, fits three in a row */
.prefs-action-icon {
  flex: 0 0 40px;
  width: 40px;
  padding: 0;
  font-size: 16px;
}

/* Bottom actions row — centered borderless icons */
.prefs-bottom-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 4px;
}
.prefs-bottom-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.1s;
}
.prefs-bottom-btn:hover:not(:disabled) { color: var(--accent); }
.prefs-bottom-btn[aria-pressed="true"]  { color: var(--accent); }
.prefs-bottom-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Section group labels (Reading / Audio / Appearance) */
.prefs-group-label {
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-40);
  margin: 0 0 10px;
}
.prefs-action-btn[aria-pressed="true"] {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

/* Separator between quick actions and reading prefs */
.prefs-sep {
  border: 0;
  border-top: 1px solid var(--border-quiet);
  margin: 12px 0 4px;
}

.prefs-section { margin-bottom: 14px; }
.prefs-section:last-child { margin-bottom: 0; }
.prefs-label {
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Floating audio player ─────────────────────────────────
   Pill shape, bottom-center of viewport. Custom controls
   (the native ones expose a download menu in the kebab). */

.audio-player {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%, 16px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 8px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-quiet);
  border-radius: 9999px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 12%, transparent);
  z-index: 45;
  width: min(540px, calc(100vw - 32px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}
.audio-player[hidden] { display: none; }
.audio-player.visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* hide the underlying <audio> element entirely — it stays in DOM as
   the playback engine, but the custom UI above is what users see. */
.audio-player audio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ap-btn {
  width: 32px; height: 32px;
  border: 0;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--accent-on);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.ap-btn:hover { background: var(--accent-hover); }
.ap-btn i { display: block; }

.ap-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-sub);
  white-space: nowrap;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.ap-seek {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  height: 16px;
  cursor: pointer;
  min-width: 80px;
}
.ap-seek::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--ap-progress, 0%),
    var(--border) var(--ap-progress, 0%),
    var(--border) 100%
  );
}
.ap-seek::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--border);
}
.ap-seek::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.ap-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: -4.5px;
  cursor: grab;
  border: 2px solid var(--surface);
}
.ap-seek::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: grab;
  border: 2px solid var(--surface);
}
.ap-seek:active::-webkit-slider-thumb,
.ap-seek:active::-moz-range-thumb { cursor: grabbing; }

/* ── Floating Table of Contents ─────────────────────────── */

.reader-toc {
  position: fixed;
  top: 56px;
  right: 24px;
  width: 320px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  z-index: 60;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 8%, transparent);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.toc-divider { border-top: 1px solid var(--border-quiet); margin: 12px 0; }
.reader-toc[hidden] { display: none; }
.reader-toc.shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Arrow removed. */

.toc-list { list-style: none; padding: 0; margin: 4px 0 0; }
.toc-item { border-top: 1px solid var(--border-quiet); }
.toc-item:first-child { border-top: 0; }
.toc-link {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 10px 4px;
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: background 0.1s, color 0.1s;
}
.toc-link:hover { background: var(--accent-dim); color: var(--accent); }
.toc-current .toc-link {
  background: var(--accent-dim);
  color: var(--accent);
}
.toc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.toc-current .toc-num { color: var(--accent); }
.toc-title { font-family: var(--font-serif); font-size: 15px; letter-spacing: -0.005em; }
.toc-duration { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* ── Chapter nav (between chapters) ──────────────────────── */

.chapter-nav {
  max-width: var(--reader-measure, 68ch);
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border-quiet);
}
.ch-nav-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  padding: 12px;
  border-radius: var(--radius-md);
  transition: background 0.1s;
}
.ch-nav-link:hover { background: var(--accent-dim); }
.ch-nav-link.next { text-align: right; }
.ch-nav-dir {
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.ch-nav-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ch-nav-empty { /* placeholder so the grid keeps its 3 columns when prev/next is missing */ }
.ch-nav-position {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Distraction-free mode ───────────────────────────────── */

[data-focus="true"] [data-distraction-target] { opacity: 0; pointer-events: none; }
[data-focus="true"] .reader-prefs { display: none; }

/* ══════════════════════════════════════════════════════════
   New features — appended below existing rules
   ════════════════════════════════════════════════════════ */

/* ── Alignment ───────────────────────────────────────────── */
[data-align="justify"] .chapter p,
[data-align="justify"] .chapter blockquote { text-align: justify; hyphens: auto; }

/* ── Skip buttons in the audio player ───────────────────── */
.ap-btn--skip {
  background: transparent;
  border: 0;
  width: auto;
  height: 28px;
  padding: 0 4px;
  color: var(--text-sub);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: color 0.1s;
}
.ap-btn--skip:hover { color: var(--accent); }

/* ── Time remaining in player ────────────────────────────── */
.ap-time-left {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  padding-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* ── Sleep timer countdown ───────────────────────────────── */
.sleep-remaining {
  font-size: 11px;
  color: var(--accent);
  margin-top: 4px;
  min-height: 14px;
}

/* ── Search panel ────────────────────────────────────────── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--well);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.search-icon { color: var(--text-muted); font-size: 13px; }
.search-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  outline: none;
}
.search-input::placeholder { color: var(--text-muted); }
.search-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.search-nav {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
/* Highlighted search matches */
.chapter .w.search-match {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 2px;
}
.chapter .w.search-current {
  background: var(--accent);
  color: var(--accent-on);
}

/* ── Highlights ──────────────────────────────────────────────
   box-shadow fills the inter-word gap so adjacent highlighted
   spans read as a continuous band. border-radius: 0 removes
   the rounded corners that create a dotted appearance.     */
.chapter .w.hi-yellow { background: rgba(255,214,  0,0.35); border-radius:0; cursor:pointer; box-shadow: 4px 0 0 rgba(255,214,  0,0.35),-4px 0 0 rgba(255,214,  0,0.35); }
.chapter .w.hi-green  { background: rgba( 74,222,128,0.35); border-radius:0; cursor:pointer; box-shadow: 4px 0 0 rgba( 74,222,128,0.35),-4px 0 0 rgba( 74,222,128,0.35); }
.chapter .w.hi-blue   { background: rgba( 96,165,250,0.35); border-radius:0; cursor:pointer; box-shadow: 4px 0 0 rgba( 96,165,250,0.35),-4px 0 0 rgba( 96,165,250,0.35); }
.chapter .w.hi-pink   { background: rgba(251,113,133,0.35); border-radius:0; cursor:pointer; box-shadow: 4px 0 0 rgba(251,113,133,0.35),-4px 0 0 rgba(251,113,133,0.35); }
/* Keep active (playing) overlay visible over highlights */
.chapter .w.hi-yellow.active,
.chapter .w.hi-green.active,
.chapter .w.hi-blue.active,
.chapter .w.hi-pink.active { background: var(--accent); color: var(--accent-on); }
/* Note indicator dot */
/* Note indicator icon — inserted as a real element before the first
   highlighted word so it's visible and hoverable, not just a dot. */
.note-icon,
.bookmark-icon {
  font-size: 0.78em;
  color: var(--accent);
  margin-right: 3px;
  vertical-align: baseline;
}
.note-icon     { cursor: pointer; }
.bookmark-icon { cursor: pointer; }
.bookmark-icon:hover { opacity: 0.7; }

/* ── Selection toolbar ───────────────────────────────────── */
.selection-toolbar {
  position: fixed;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius-full);
  padding: 4px 8px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 12%, transparent);
}
.selection-toolbar[hidden] { display: none; }
.sel-btn {
  width: 28px; height: 28px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-sub);
  transition: background 0.1s;
}
.sel-btn:hover { background: var(--well); }
.hi-swatch {
  display: block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}
.hi-yellow { background: rgba(255,214,  0,0.8); }
.hi-green  { background: rgba( 74,222,128,0.8); }
.hi-blue   { background: rgba( 96,165,250,0.8); }
.hi-pink   { background: rgba(251,113,133,0.8); }
.sel-divider { width: 1px; height: 18px; background: var(--border-quiet); margin: 0 2px; }
.sel-btn--cancel { color: var(--text-muted); }

/* ── Note popup ──────────────────────────────────────────── */
.note-popup {
  position: fixed;
  z-index: 75;
  background: var(--surface);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  width: 260px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 10%, transparent);
}
.note-popup[hidden] { display: none; }
.note-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--well);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 6px 8px;
  resize: vertical;
  outline: none;
  margin-bottom: 8px;
}
.note-input:focus { border-color: var(--accent); }
.note-popup-actions { display: flex; gap: 6px; }

/* ── Inline annotations (bookmarks + notes) under TOC chapters ── */
.toc-annotations {
  list-style: none;
  padding: 0 0 6px 38px;   /* indent to align with chapter title, past the number col */
  margin: 0;
}
.toc-annotation {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
  border-top: 1px solid var(--border-quiet);
  font-size: 12px;
  color: var(--text-sub);
}
.toc-annotation:first-child { border-top: 0; }
.toc-annotation > i {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.toc-annotation-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  color: var(--text-sub);
  cursor: pointer;
  line-height: 1.35;
}
.toc-annotation-link:hover { color: var(--accent); }
.toc-annotation-text { display: block; }
.toc-annotation-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.toc-annotation-del {
  border: 0; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: 12px; padding: 0 2px;
  flex-shrink: 0; line-height: 1; margin-top: 1px;
}
.toc-annotation-del:hover { color: var(--danger); }

/* ── Note tooltip ────────────────────────────────────────── */
.note-tooltip {
  position: fixed;
  z-index: 72;
  background: var(--surface);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  max-width: 240px;
  font-size: 13px;
  color: var(--text-prose);
  line-height: 1.5;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 8%, transparent);
  pointer-events: none;
}

/* ── Author overlay: reader notes ────────────────────────── */
/* Dotted underline sits below highlight backgrounds without conflicting */
.chapter .w.reader-note-hi {
  border-bottom: 1px dotted color-mix(in srgb, var(--brand-50) 65%, transparent);
}

.reader-note-badge {
  display: inline-block;
  font-family: var(--font-cond);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--brand-50);
  color: var(--accent-on);
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
  margin-right: 3px;
  cursor: default;
}

/* ── Highlight action menu (click on highlighted word) ── */
.hi-menu {
  position: fixed;
  z-index: 71;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius-full);
  padding: 4px 8px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 10%, transparent);
}
.hi-menu[hidden] { display: none; }
.sel-btn--danger { color: var(--danger); }
.sel-btn--danger:hover { background: var(--danger-dim); }
