/* Первая глава, цитаты-карточки и «атмосфера» на странице книги. */

/* ---------- чтение первой главы ---------- */
.read-progress { position: sticky; top: 0; z-index: 5; height: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.read-progress i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.chapter .wrap { max-width: 44rem; padding-block: 26px 60px; }
.read-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.read-back { color: var(--muted); text-decoration: none; font-size: .92rem; }
.read-back:hover { color: var(--accent); }
.read-tools { display: flex; gap: 6px; }
.read-tools button {
  min-width: 40px; height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  font: 600 .8rem var(--font-text); color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid var(--line);
}
.read-tools button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chapter .kicker { display: block; margin-top: 30px; }
.chapter h1 { font-size: clamp(1.8rem, 6vw, 2.8rem) !important; margin: 6px 0 30px; }
.chapter-body {
  font-family: Lora, Georgia, serif; font-size: var(--read-size, 1.12rem); line-height: 1.8;
  hyphens: auto; text-wrap: pretty; overflow-wrap: break-word;
}
.chapter-body p { margin: 0 0 1.05em; text-indent: 1.4em; }
.chapter-body > p:first-of-type { text-indent: 0; }
.chapter-body > p:first-of-type::first-letter {
  float: left; font-family: var(--font-display); font-size: 3.4em; line-height: .85; padding: .06em .1em 0 0; color: var(--accent);
}
.chapter-body hr { border: 0; margin: 1.8em 0; text-align: center; color: var(--muted); }
.chapter-body hr::after { content: "✦  ✦  ✦"; letter-spacing: .4em; font-size: .8rem; }
.read-end { text-align: center; font-size: 1.6rem; color: var(--accent); margin: 1.2em 0 0; }
.chapter.paper .wrap { background: #f4ecdc; color: #2b2118; border-radius: var(--radius); padding-inline: clamp(18px, 5vw, 48px); margin-block: 18px; box-shadow: 0 30px 80px -30px #000; }
.chapter.paper { --ink: #2b2118; --muted: #7a6a58; --line: #dccdb4; }
.chapter.paper h1, .chapter.paper h2 { background: none; color: #2b2118; -webkit-text-fill-color: #2b2118; }
.chapter.paper .btn.ghost { color: #2b2118; border-color: #2b211855; background: none; }

.chapter-buy {
  display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: center;
  margin-top: 40px; padding: 22px; border-radius: var(--radius);
  border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.chapter-buy h2 { font-size: clamp(1.2rem, 4vw, 1.7rem) !important; margin: 0 0 8px; }
.chapter-buy p { margin: 0 0 16px; }
@media (max-width: 520px) {
  .chapter-buy { grid-template-columns: 1fr; }
  .chapter-buy .cover { max-width: 120px; }
}

/* ---------- атмосфера ---------- */
.mood { display: grid; gap: 16px; }
.audio, .playlist {
  padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.audio { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.audio-play {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 30px -6px var(--accent);
}
.audio-play svg { width: 22px; height: 22px; }
.audio-play svg:first-child { margin-left: 3px; }
.audio-play .pause, .audio.playing .audio-play svg:first-child { display: none; }
.audio.playing .audio-play .pause { display: block; }
.audio-main { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; min-width: 0; }
.audio-main strong { grid-column: 1 / -1; font-size: .98rem; }
.audio-main input { width: 100%; accent-color: var(--accent); margin: 0; }
.audio-time { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.playlist { display: grid; gap: 14px; }
.playlist p { margin: 4px 0 0; font-size: .92rem; }
.playlist iframe { width: 100%; height: 360px; border: 0; border-radius: 10px; }
.playlist .btn { justify-self: start; }

/* ---------- цитаты и карточки ---------- */
.quotes { display: grid; gap: 16px; }
.quote {
  margin: 0; padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  display: grid; gap: 12px; justify-items: start;
}
.quote-mark svg { width: 30px; height: 30px; color: var(--accent); }
.quote blockquote { margin: 0; font-family: Lora, Georgia, serif; font-style: italic; font-size: clamp(1.15rem, 3.4vw, 1.4rem); line-height: 1.5; }
.quote figcaption { color: var(--muted); font-size: .88rem; }

.card-dlg {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 18px; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.card-dlg::backdrop { background: #000b; backdrop-filter: blur(6px); }
.card-dlg[open] { display: grid; gap: 14px; justify-items: center; }
.card-dlg canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 58dvh; border-radius: 10px; box-shadow: 0 20px 50px -20px #000; }
.card-dlg .actions { justify-content: center; }
.card-tabs { display: flex; gap: 6px; }
.card-tabs button {
  height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: 600 .8rem var(--font-text); color: var(--ink); background: none; border: 1px solid var(--line);
}
.card-tabs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }