/* Story detail, Poori Kahani and Yaad Rakho (spec §3.5, §3.6). */

/* ── Detail ─────────────────────────────────────────────── */
.detail { gap: 16px; }
.detail__cover { max-width: min(360px, 34dvh); width: 100%; justify-self: center; border-radius: var(--radius); overflow: hidden; }
.detail__body { display: grid; gap: 12px; }
.detail__teaser { font-size: 19px; }
.detail__modes { display: grid; gap: 10px; }
.btn--big { min-height: 56px; font-size: 20px; }
.detail__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.toast { min-height: 1.5em; color: var(--ink-soft); }
@media (min-width: 768px) {
  .detail { grid-template-columns: minmax(0, 360px) 1fr; align-items: start; column-gap: 32px; }
  .detail__modes { grid-template-columns: 1fr 1fr; }
}

/* ── Poori Kahani ───────────────────────────────────────── */
.reader { max-width: 720px; }
.reader__bar { display: flex; justify-content: space-between; align-items: center; }
.reader__sizes { display: flex; gap: 4px; }
.size-btn { font-family: var(--font-head); font-weight: 800; font-size: 18px; border: 2px solid var(--line); }
.size-btn:disabled { opacity: .4; cursor: default; }
.reader__text { display: grid; gap: 14px; justify-items: start; }
.story-text { margin: 0; }
.divider { justify-self: center; color: var(--glow); font-size: 18px; }
mark.refrain {
  background: none; color: inherit; font-weight: 600;
  text-decoration: underline 3px var(--glow); text-underline-offset: .28em;
  text-decoration-skip-ink: none;
}
.poochhiye {
  font-style: italic; font-size: 17px; color: var(--ink);
  padding: 10px 14px; border-radius: 14px 14px 14px 4px;
  background: color-mix(in srgb, var(--glow) 15%, var(--surface)); max-width: 20em;
}
.poochhiye strong { font-style: normal; font-family: var(--font-head); font-weight: 600; margin-right: 4px; }
.closing { padding: 16px; border-radius: var(--radius); background: var(--surface); text-align: center; display: grid; gap: 6px; }
.closing__q { font-size: 21px; font-weight: 600; }
.fold { background: var(--surface); border-radius: 12px; padding: 4px 16px; }
.fold summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-family: var(--font-head); font-weight: 600; }
.fold > :not(summary) { margin-bottom: 12px; }
.bullets { list-style: disc; padding-left: 20px; }
.told { justify-self: center; min-width: 200px; }
.told:disabled { background: var(--leaf); border-color: var(--leaf); color: #fff; opacity: 1; }
[data-theme="night"] .told:disabled { color: var(--bg); }

/* ── Yaad Rakho ─────────────────────────────────────────── */
.yaad {
  display: grid; gap: 6px; padding: 18px;
  border-radius: calc(var(--radius) + 4px); border: 2px dashed var(--glow);
  background: var(--surface);
}
.yaad__head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.yaad__title { color: var(--ink-soft); }
.yaad__label { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--ink-soft); margin-top: 8px; }
.yaad__opening, .yaad__question { font-weight: 600; }
.yaad__beats { list-style: none; counter-reset: beat; display: grid; gap: 6px; margin-top: 6px; }
.yaad__beats li { counter-increment: beat; display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; }
.yaad__beats li::before {
  content: counter(beat); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--glow); color: #2B2340; font-family: var(--font-head); font-weight: 800;
}
.yaad__refrain { font-weight: 600; text-decoration: underline 3px var(--glow); text-underline-offset: .28em; }
.page--yaad { justify-items: center; }
.yaad--full { width: min(100%, calc((100dvh - 140px) * 9 / 16), 460px); aspect-ratio: 9 / 16; overflow: auto; align-content: start; }
@media (max-width: 480px) { .yaad--full { aspect-ratio: auto; } }