/* book.css: in the library looks a set is an open book: the passage or argument on the left page, the answers on the right.
   The cover is the spread's border, the paper is one sheet on ::before under both pages, ::after is the leaf that turns.
   Paper and ink are fixed colors in every palette. Everything is scoped to .book-spread. Load after room.css. See book.md */

/* ---------- tokens: paper and ink, and the palette remapped so every component inside reads as ink on paper ---------- */
.book-spread {
  --bk-cover: 14px; --bk-edge: 7px; --bk-tail: 5px; --bk-t: 5px; --bk-rs: 11px; --bk-cs: 42px; --bk-rv: 8px;
  --bk-p1: #f6eed9; --bk-p2: #eee2c5; --bk-p3: #e7d8b6;
  --bk-cream: #fbf3e0; --bk-entry: #3a2a19; --bk-focus: #1f3f72; --bk-right: #1f5a38; --bk-wrong: #5a0d16;
  --bk-rubric: #7a2a18; --bk-gilt: #9c8048; --bk-seal-1: #8a5a2c; --bk-seal-2: #4f3015;
  --ink: #2a1d10; --muted: #4f3b26; --line: #c8b38b; --surface: #f8f0dc; --surface-2: #f1e6cb;
  --accent: #5e3a10; --accent-ink: var(--bk-cream); --accent-soft: #e6d6b2; --accent-2: #7a2a18;
  --good: #12432a; --good-soft: #dcd8b8; --bad: #721620; --bad-soft: #ecd3bd; --warn: #5a3d00; --warn-soft: #efdcaa;
  --on-good: var(--bk-cream); --on-bad: var(--bk-cream); --on-tone: var(--bk-cream); --learn: #1f3f72; --learn-soft: #e2dcc6;
  --shadow: none; --tone: initial;
  /* the cover: gilt fillets and corner stars (leather), or brass corners (cloth) */
  --bk-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .4 7.4 4.6 11.6 6 7.4 7.4 6 11.6 4.6 7.4.4 6 4.6 4.6Z' fill='%23dcb862'/%3E%3Ccircle cx='6' cy='6' r='1.5' fill='%233e0f15'/%3E%3C/svg%3E");
  --bk-g: linear-gradient(var(--bk-gilt), var(--bk-gilt));
  --bk-g2: linear-gradient(color-mix(in srgb, var(--bk-gilt) 55%, transparent), color-mix(in srgb, var(--bk-gilt) 55%, transparent));
  --bk-in: calc(var(--bk-t) + 3px); --bk-span: calc(100% - 2 * var(--bk-rs)); --bk-span2: calc(100% - 2 * var(--bk-in));
  --bk-gilt-tool:
    var(--bk-star) 0 0 / var(--bk-rs) var(--bk-rs) no-repeat, var(--bk-star) right 0 top 0 / var(--bk-rs) var(--bk-rs) no-repeat,
    var(--bk-star) left 0 bottom 0 / var(--bk-rs) var(--bk-rs) no-repeat, var(--bk-star) right 0 bottom 0 / var(--bk-rs) var(--bk-rs) no-repeat,
    var(--bk-g) var(--bk-rs) var(--bk-t) / var(--bk-span) 1px no-repeat, var(--bk-g) var(--bk-rs) calc(100% - var(--bk-t)) / var(--bk-span) 1px no-repeat,
    var(--bk-g) var(--bk-t) var(--bk-rs) / 1px var(--bk-span) no-repeat, var(--bk-g) calc(100% - var(--bk-t)) var(--bk-rs) / 1px var(--bk-span) no-repeat,
    var(--bk-g2) var(--bk-in) var(--bk-in) / var(--bk-span2) 1px no-repeat, var(--bk-g2) var(--bk-in) calc(100% - var(--bk-in)) / var(--bk-span2) 1px no-repeat,
    var(--bk-g2) var(--bk-in) var(--bk-in) / 1px var(--bk-span2) no-repeat, var(--bk-g2) calc(100% - var(--bk-in)) var(--bk-in) / 1px var(--bk-span2) no-repeat;
  --bk-brass: #f3da96 0, #d6b062 calc(var(--bk-cs) * .2), #a77d35 calc(var(--bk-cs) * .4), #6b4d1b calc(var(--bk-cs) * .5), #0000008c calc(var(--bk-cs) * .5 + 1px), transparent calc(var(--bk-cs) * .5 + 3px);
  --bk-rivet: #fff3c8 0 .8px, #b38a3e 1.4px 2.2px, #00000066 2.6px, transparent 3.2px;
  --bk-brass-tool:
    radial-gradient(circle at var(--bk-rv) var(--bk-rv), var(--bk-rivet)), radial-gradient(circle at calc(100% - var(--bk-rv)) var(--bk-rv), var(--bk-rivet)),
    radial-gradient(circle at var(--bk-rv) calc(100% - var(--bk-rv)), var(--bk-rivet)), radial-gradient(circle at calc(100% - var(--bk-rv)) calc(100% - var(--bk-rv)), var(--bk-rivet)),
    linear-gradient(135deg, var(--bk-brass)) left top / var(--bk-cs) var(--bk-cs) no-repeat, linear-gradient(225deg, var(--bk-brass)) right top / var(--bk-cs) var(--bk-cs) no-repeat,
    linear-gradient(315deg, var(--bk-brass)) right bottom / var(--bk-cs) var(--bk-cs) no-repeat, linear-gradient(45deg, var(--bk-brass)) left bottom / var(--bk-cs) var(--bk-cs) no-repeat;
  --bk-tool: var(--bk-gilt-tool); --bk-base: linear-gradient(#4a3426, #33241a);
  --bk-leather: radial-gradient(circle at 30% 40%, #ffffff12 0 .7px, transparent 1.3px) 0 0 / 5px 5px, radial-gradient(circle at 70% 60%, #0000004d 0 .8px, transparent 1.5px) 1px 2px / 6px 6px,
    radial-gradient(circle, #0000002e 0 1px, transparent 2px) 3px 1px / 9px 7px; --bk-tex: var(--bk-leather);
  /* the paper: the gutter, and the curl where each page rises out of it; one page turns both off */
  --bk-gutter: linear-gradient(90deg, transparent calc(50% - 60px), #50341208 calc(50% - 34px), #462d0f29 calc(50% - 12px), #2d1c0861 calc(50% - 1px), #1e12058c 50%,
    #2d1c0861 calc(50% + 1px), #462d0f29 calc(50% + 12px), #50341208 calc(50% + 34px), transparent calc(50% + 60px));
  --bk-curl: linear-gradient(90deg, transparent calc(50% - 124px), #fffdf566 calc(50% - 80px), transparent calc(50% - 50px) calc(50% + 50px), #fffdf566 calc(50% + 80px), transparent calc(50% + 124px));
}
/* Gothic Library: burgundy leather and gilt, rubricated initials, a red wax seal. Green Library: forest green bookcloth,
   brass corners, green initials, a green seal. The theme wins when the theme and the decoration disagree. */
:root[data-deco="candlelit"] .book-spread { --bk-base: linear-gradient(#57161e, #3c0e14); --bk-gilt: #d4ad57; --bk-rubric: #8a1f17; --bk-seal-1: #b23a3f; --bk-seal-2: #5c0f16; }
:root[data-deco="botanical"] .book-spread, :root[data-theme="conservatory"] .book-spread { --bk-tool: var(--bk-brass-tool); --bk-base: linear-gradient(#22432f, #173123);
  --bk-tex: repeating-linear-gradient(#ffffff0b 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, #00000024 0 1px, transparent 1px 3px);
  --bk-rubric: #1e4d34; --bk-seal-1: #3f7a52; --bk-seal-2: #163a25; }
:root[data-theme="library"] .book-spread { --bk-tool: var(--bk-gilt-tool); --bk-base: linear-gradient(#57161e, #3c0e14); --bk-gilt: #d4ad57; --bk-rubric: #8a1f17;
  --bk-seal-1: #b23a3f; --bk-seal-2: #5c0f16; --bk-tex: var(--bk-leather); }

/* ---------- the open book ---------- */
.book-spread {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 4px 0 6px; padding: 0 var(--bk-edge) var(--bk-tail); border: var(--bk-cover) solid transparent; border-radius: 10px;
  color: var(--ink); color-scheme: light;
  background: var(--bk-tool), linear-gradient(160deg, #ffffff1a, transparent 30% 65%, #0000004d), radial-gradient(120% 140% at 50% 40%, transparent 60%, #00000059),
    var(--bk-tex), var(--bk-base);
  background-origin: border-box; background-clip: border-box;
  box-shadow: 0 28px 44px -24px #000000e6, 0 6px 16px #00000073;
}
/* the paper: one sheet under both pages, so a short page never shows the cover through */
.book-spread::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--bk-gutter), var(--bk-curl),
    linear-gradient(90deg, #6e4b1e38, #6e4b1e0f 18px, transparent 48px calc(100% - 48px), #6e4b1e0f calc(100% - 18px), #6e4b1e38),
    linear-gradient(#6e4b1e1f, transparent 26px calc(100% - 34px), #6e4b1e29),
    repeating-linear-gradient(90deg, #f4e9cf 0 1.4px, #c4ad82 1.4px 2px) left top / var(--bk-edge) 100% no-repeat,
    repeating-linear-gradient(90deg, #c4ad82 0 .6px, #f4e9cf .6px 2px) right top / var(--bk-edge) 100% no-repeat,
    repeating-linear-gradient(#f4e9cf 0 1.4px, #c4ad82 1.4px 2px) left bottom / 100% var(--bk-tail) no-repeat,
    var(--paper-img, none),
    radial-gradient(circle at 12% 18%, #8b5a2b2e 0 1.5px, #8b5a2b12 4px, transparent 8px),
    radial-gradient(circle at 31% 81%, #8b5a2b26 0 2px, #8b5a2b0f 5px, transparent 9px),
    radial-gradient(circle at 43% 7%, #8b5a2b24 0 1.5px, transparent 6px),
    radial-gradient(circle at 61% 91%, #8b5a2b29 0 2.5px, #8b5a2b0d 6px, transparent 11px),
    radial-gradient(circle at 86% 24%, #8b5a2b24 0 1.5px, #8b5a2b0d 4px, transparent 8px),
    radial-gradient(circle at 94% 73%, #8b5a2b2b 0 2px, transparent 7px),
    radial-gradient(90px 60px at 90% 9%, #a06e3212, transparent 70%), radial-gradient(70px 90px at 4% 92%, #a06e3214, transparent 70%),
    radial-gradient(42% 36% at 26% 32%, #fffbeb66, transparent 70%), radial-gradient(40% 40% at 75% 60%, #fffbeb4d, transparent 70%),
    radial-gradient(36% 44% at 80% 88%, #c8a56e1f, transparent 70%),
    repeating-linear-gradient(#785a2806 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, transparent 0 31px, #785a2809 31px 32px),
    linear-gradient(175deg, var(--bk-p1), var(--bk-p2) 60%, var(--bk-p3));
  box-shadow: 0 0 0 1px #3c1e0a4d, 0 1px 3px #00000080;
}
.book-spread > .page {
  position: relative; min-width: 0; display: flex; flex-direction: column; overflow-wrap: break-word;
  padding: 34px 44px 16px 36px; font-family: var(--ui);
}
.book-spread > .page-right { padding: 34px 36px 16px 44px; }
/* folios: small, centered at the foot, old style figures between two short rules */
.book-spread .folio {
  margin-top: auto; padding-top: 20px; text-align: center; color: var(--muted);
  font: italic 400 .88rem/1 var(--display); font-variant-numeric: oldstyle-nums; letter-spacing: .06em;
}
.book-spread .folio::before, .book-spread .folio::after { content: ""; display: inline-block; width: 22px; height: 1px; margin: 0 9px; vertical-align: .3em; background: currentColor; opacity: .45; }
/* a fleuron heads the left page of an argument; a passage gets a running head instead */
.book-spread:not(.has-passage) > .page-left::before { content: "\2766"; content: "\2766" / ""; display: block; margin: -16px 0 10px; text-align: center; font-size: 1.05rem; line-height: 1; color: var(--bk-rubric); opacity: .8; }
.book-spread .page-eyebrow {
  margin: -10px 0 18px; padding-bottom: 7px; border-bottom: 1px solid var(--line); text-align: center; color: var(--muted);
  font: 600 .74rem/1.3 var(--display); letter-spacing: .26em; text-transform: uppercase;
}
.book-spread .page-left h3 { margin: 20px 0 8px; text-align: center; font: 600 1rem/1.3 var(--display); font-variant: small-caps; letter-spacing: .08em; color: var(--ink); }
.book-spread .page-left .page-eyebrow + h3 { margin-top: 0; }

/* ---------- type on paper ---------- */
.book-spread :is(.stimulus, .text) { display: flow-root; font-family: var(--read); font-size: calc(1.08rem * var(--read-scale)); line-height: 1.72; color: var(--ink); text-wrap: pretty; }
.book-spread :is(.stimulus, .text) p { margin: 0 0 .55rem; }
.book-spread :is(.stimulus, .text) p + p { text-indent: 1.4em; }
.book-spread .stimulus { margin-top: 4px; }
.book-spread .stem { margin: 18px 0 12px; font-family: var(--read); font-size: calc(1.04rem * var(--read-scale)); font-weight: 650; line-height: 1.5; color: var(--ink); }
.book-spread .page-left .stem { position: relative; padding-top: 18px; }
.book-spread .page-left .stem::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.book-spread .page-left .stimulus + .stem { margin-top: 14px; }
/* drop caps: rubricated in Gothic Library, green in Green Library */
.book-spread :is(.stimulus, .page-left .text) > p:first-child::first-letter {
  float: left; margin: .07em .1em 0 0; font: 700 3.2em/.8 var(--display); color: var(--bk-rubric); text-shadow: 1px 1px 0 #c9a24a5c;
}
@supports (initial-letter: 3) {
  .book-spread :is(.stimulus, .page-left .text) > p:first-child::first-letter { float: none; initial-letter: 3; margin: 0 .12em 0 0; font-size: inherit; line-height: normal; }
}
.book-spread mark { text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.book-spread a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-underline-offset: 3px; }
.book-spread ::selection { background: #c9a24a73; color: var(--ink); }

/* ---------- labels, buttons and the header row, as small inked labels ---------- */
.book-spread .page-right > .row.spread:first-child { margin: -10px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.book-spread .page-right > .row.spread:first-child > .tiny { font: 600 .74rem/1.3 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.book-spread .chip {
  padding: 3px 10px; border: 1px solid #54402a73; border-radius: 2px; background: #fffaec80; color: var(--ink); white-space: normal;
  font: 600 .72rem/1.35 var(--display); letter-spacing: .1em; text-transform: uppercase;
}
:root .book-spread .btn {
  border: 1px solid #54402a73; border-radius: 3px; background: #fffaec8c; color: var(--ink); font-family: var(--display); font-weight: 600; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 #ffffff80, 0 1px 1px #3c280a1f;
}
:root .book-spread .btn:hover:not(:disabled) { border-color: var(--ink); background: #fffaecd9; }
:root .book-spread .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); text-decoration: underline dotted 1px; text-underline-offset: 4px; }
:root .book-spread .btn.ghost:hover:not(:disabled) { color: var(--ink); background: #2a1d100d; border-color: #54402a40; }
:root .book-spread .btn.on, :root .book-spread .read-help .btn.on { color: var(--ink); background: #e6d6b2b3; border-color: #54402a66; text-decoration: none; }
:root .book-spread .btn.flag-on { color: var(--warn); border-color: currentColor; background: #efdcaa99; text-decoration: none; }
:root[data-theme] .book-spread .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bk-cream); box-shadow: 0 1px 2px #3c280a4d; filter: none; }
.book-spread .linkish { color: var(--accent); font-family: var(--display); }
.book-spread :is(.btn, .choice, .strike, .qnav button, summary, a, .linkish):focus-visible { outline: 2px solid var(--bk-focus); outline-offset: 2px; }
.book-spread .read-help { margin-top: 0; }
.book-spread .tip-box { margin-top: 10px; padding: 9px 12px; border-left: 2px solid var(--learn); border-radius: 0 4px 4px 0; background: #1f3f720f; color: var(--ink); }
.book-spread .sig-legend { color: var(--muted); }

/* ---------- the coach's voice: a wax seal for the monogram ---------- */
.book-spread .coach-line .avatar {
  width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; color: #f6e3c0; font-family: var(--display);
  background: radial-gradient(circle at 35% 30%, var(--bk-seal-1), var(--bk-seal-2) 75%); box-shadow: 0 1px 2px #3c140a66, inset 0 0 0 2px #0000001f;
}
.book-spread .coach-says { color: var(--ink); }

/* ---------- choices: entries in the book ---------- */
.book-spread .choices { gap: 0; margin-top: 4px; }
:root .book-spread .choice {
  grid-template-columns: 32px 1fr 36px; gap: 12px; padding: 11px 4px 11px 6px; border: 0; border-radius: 3px; background: transparent;
  font-family: var(--read); font-size: calc(1.02rem * var(--read-scale)); line-height: 1.55; color: var(--bk-entry);
}
.book-spread .choice + .choice { border-top: 1px dotted #54402a59; }
.book-spread .choice .letter {
  position: relative; width: 30px; height: 30px; border: 1.5px solid var(--ink); color: var(--ink); background: transparent;
  font: 700 .92rem/1 var(--display); box-shadow: 0 0 0 2px #f6eed9b3, 0 0 0 3px #2a1d1026;
}
.book-spread .choice .ctext { padding-top: 3px; text-decoration-thickness: 1.5px; text-underline-offset: .24em; text-decoration-skip-ink: auto; }
.book-spread .choice:not(.locked):not(.first-pick):not(.struck):hover { background: #785a280d; }
.book-spread .choice:not(.locked):not(.first-pick):not(.struck):hover .ctext { text-decoration-line: underline; text-decoration-color: #4a443c99; }
/* chosen: a filled ink circle, the darkest ink, and a manicule in the margin */
.book-spread .choice.sel { background: #8a64281c; color: #1a1108; }
.book-spread .choice.sel .ctext { -webkit-text-stroke: .25px currentColor; }
.book-spread .choice.sel .letter { background: var(--ink); border-color: var(--ink); color: var(--bk-cream); border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%; box-shadow: 0 0 0 2px #2a1d101f; }
.book-spread .choice.sel::before { content: "\261E"; content: "\261E" / ""; position: absolute; left: -36px; top: 10px; font-size: 1.55rem; line-height: 1; color: var(--ink); }
/* crossed out: a ruled pencil line */
.book-spread .choice.struck .ctext { opacity: 1; color: var(--muted); text-decoration-line: line-through; text-decoration-color: #3c3630cc; }
.book-spread .choice.struck .letter { border-style: dashed; border-color: var(--muted); color: var(--muted); box-shadow: none; }
.book-spread .choice.first-pick { opacity: 1; }
.book-spread .choice.first-pick .ctext { color: var(--muted); font-style: italic; }
.book-spread .choice.first-pick .letter { border-style: dashed; color: var(--muted); border-color: var(--muted); box-shadow: none; }
/* after the answer: the right one in green ink with a check, the wrong one in oxblood, its letter struck through */
.book-spread .choice.right { background: #12432a12; }
.book-spread .choice.right .ctext { color: var(--good); }
.book-spread .choice.right .letter { background: var(--good); border-color: var(--good); color: var(--on-good); }
.book-spread .choice.wrong { background: #72162012; }
.book-spread .choice.wrong .ctext { color: var(--bad); }
.book-spread .choice.wrong .letter { border: 2px solid var(--bad); color: var(--bad); background: #fffaec99; box-shadow: none; }
.book-spread .choice.wrong .letter::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--bad); transform: rotate(-45deg); }
.book-spread .choice:is(.right, .wrong)::before { position: absolute; right: 10px; top: 8px; font: 700 1.55rem/1 var(--display); transform: rotate(-8deg); }
.book-spread .choice.right::before { content: "\2713"; content: "\2713" / ""; color: var(--good); }
.book-spread .choice.wrong::before { content: "\2717"; content: "\2717" / ""; color: var(--bad); }
.book-spread .choice.wrong.second .letter { border-style: dashed; }
.book-spread .choice.right::after { border-radius: 4px; }
/* marginal notes */
.book-spread .choice .tag { margin-left: .45em; padding: 0; border: 0; border-radius: 0; vertical-align: .08em; color: var(--muted); font: italic 600 .8rem/1.3 var(--display); letter-spacing: .01em; }
.book-spread .choice .tag.tag-ok { color: var(--good); } .book-spread .choice .tag.tag-no { color: var(--bad); }
/* the cross-out control: a small inked mark that stays tappable */
.book-spread .strike { width: 36px; height: 36px; border: 1px solid transparent; border-radius: 50%; color: var(--muted); font-size: .9rem; }
.book-spread .strike:hover { background: #2a1d100f; border-color: #54402a40; color: var(--ink); }
.book-spread .choice.struck .strike { color: var(--ink); border-color: #54402a59; }

/* ---------- second look, and the feedback as a slip tucked into the page ---------- */
.book-spread .second-look { border: 1.5px dashed #5e3a1080; border-radius: 3px; background: #e6d6b259; color: var(--ink); }
.book-spread .second-look .eyebrow { color: var(--accent); }
.book-spread .feedback {
  position: relative; margin-top: 24px; padding: 22px 18px 16px 22px; border: 1px solid #785a2847; border-radius: 2px; color: var(--ink);
  background: radial-gradient(circle at 88% 82%, #8b5a2b1c 0 2px, transparent 6px), radial-gradient(60% 50% at 20% 10%, #ffffff66, transparent 70%),
    repeating-linear-gradient(#785a2805 0 1px, transparent 1px 3px), linear-gradient(#fbf6e8, #f5ecd7);
  box-shadow: inset 4px 0 0 var(--tone-edge, var(--line)), 0 1px 1px #3c280a1f, 0 10px 18px -10px #3c280a73;
}
.book-spread .feedback.ok { --tone-edge: var(--good); } .book-spread .feedback.no { --tone-edge: var(--bad); }
/* a steel paper clip holds the slip */
.book-spread .feedback::before {
  content: ""; position: absolute; top: -15px; right: 26px; z-index: 6; width: 15px; height: 44px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 44'%3E%3Cdefs%3E%3Cpath id='p' d='M10.5 15v19a2.5 2.5 0 0 1-5 0V7.5a4 4 0 0 1 8 0V35a6 6 0 0 1-12 0V12'/%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cuse href='%23p' stroke='%2350555a' stroke-width='2.2'/%3E%3Cuse href='%23p' stroke='%23c3c8cc' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(1px 2px 1px #3c280a59);
}
/* the verdict: a filled stamp. Right: green, a round check. Wrong: darker oxblood, hatched, square corners, a cross */
:root .book-spread .verdict-banner {
  margin: -8px -6px 16px; padding: 10px 14px; border: 0; border-radius: 4px; color: var(--bk-cream);
  outline: 1px solid #fbf3e08c; outline-offset: -5px; box-shadow: 0 4px 12px -3px #28140573;
}
.book-spread .verdict-banner.ok { background: linear-gradient(170deg, #ffffff14, transparent 60%), var(--bk-right); }
.book-spread .verdict-banner.no { background: repeating-linear-gradient(135deg, #ffffff0f 0 5px, transparent 5px 11px), var(--bk-wrong); border-radius: 0; }
.book-spread .verdict-banner .verdict-icon { background: var(--bk-cream); font-family: var(--display); box-shadow: 0 0 0 2px #00000033; }
.book-spread .verdict-banner.ok .verdict-icon { color: var(--bk-right); }
.book-spread .verdict-banner.no .verdict-icon { color: var(--bk-wrong); border-radius: 3px; }
.book-spread .verdict-banner :is(.verdict-word, .verdict-sub) { color: var(--bk-cream); }
.book-spread .verdict-word { font: 800 1.32rem/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.book-spread .why-label { font-family: var(--display); letter-spacing: .1em; }
.book-spread .why p { color: var(--ink); line-height: 1.55; }
.book-spread ol.flow li { border: 1px solid #54402a3d; border-radius: 3px; background: #fffaec99; color: var(--ink); }
.book-spread ol.flow li + li::before { color: var(--muted); }
.book-spread .flow-n { background: #1f3f721a; color: var(--learn); font-family: var(--display); }
.book-spread details.more > summary { color: var(--accent); font-family: var(--display); }
.book-spread :is(.layer, .example) { border: 1px solid #54402a38; border-radius: 3px; background: #fffaec80; color: var(--ink); }
.book-spread .trap-card { border-color: #5a3d0059; background: #efdcaa59; }
.book-spread .trap-card .example { background: #fffaecb3; }
.book-spread .irl { background: #1f3f720d; border-left-color: var(--learn); }
.book-spread .nudge { border: 1.5px dashed #5a3d0099; border-radius: 3px; background: #efdcaa4d; }
.book-spread .probe.ok { background: #12432a12; border-color: #12432a59; }
.book-spread .probe.no { background: #efdcaa59; border-color: #5a3d0059; }
.book-spread .probe-opt .tiny { color: var(--muted); }

/* ---------- the question map at the foot of the right page ---------- */
.book-spread .qnav { gap: 5px; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); }
:root .book-spread .qnav button {
  position: relative; width: 36px; height: 36px; border: 1px solid #54402a66; border-radius: 3px; background: #fffaec80; color: var(--ink);
  font: 600 .92rem/1 var(--display); font-variant-numeric: lining-nums; box-shadow: none; outline: 0;
}
:root .book-spread .qnav button.done { background: #2a1d101f; border-color: #2a1d108c; color: var(--ink); }
:root .book-spread .qnav button.cur { background: var(--ink); border-color: var(--ink); color: var(--bk-cream); box-shadow: 0 0 0 2px var(--bk-p1), 0 0 0 3px var(--ink); }
/* flagged: a silk ribbon marks the page */
.book-spread .qnav button.flag::after {
  content: ""; position: absolute; top: -4px; right: 4px; width: 7px; height: 14px; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ribbon, #9c2a30) 70%, #000), var(--ribbon, #9c2a30) 50%, color-mix(in srgb, var(--ribbon, #9c2a30) 75%, #000));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.book-spread .qnav button:focus-visible { outline: 2px solid var(--bk-focus); outline-offset: 2px; }
.book-spread .qnav-sep { color: var(--muted); font-family: var(--display); letter-spacing: .14em; }

/* ---------- long passages, wide screens: the passage page scrolls inside, so passage and answers stay side by side ---------- */
@media (min-width: 861px) {
  .book-spread.has-passage > .page-left {
    position: sticky; top: 64px; align-self: start; display: block; max-height: min(72vh, calc(100vh - 170px)); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #54402a73 transparent;
    -webkit-mask: linear-gradient(transparent, #000 18px calc(100% - 18px), transparent); mask: linear-gradient(transparent, #000 18px calc(100% - 18px), transparent);
  }
}

/* ---------- the page turn: a leaf sweeps over the spread from the gutter; nothing moves when motion is reduced ---------- */
@media (prefers-reduced-motion: no-preference) {
  .book-spread:is(.turn, .turn-back)::after {
    content: ""; position: absolute; top: 0; bottom: var(--bk-tail); z-index: 7; pointer-events: none; backface-visibility: visible;
    background: linear-gradient(90deg, #3c260c4d, #3c260c14 12%, #fffcf059 55%, #3c260c1f), linear-gradient(175deg, var(--bk-p1), var(--bk-p2) 60%, var(--bk-p3));
    box-shadow: 0 0 22px #2814053d;
  }
  .book-spread.turn::after { left: 50%; right: var(--bk-edge); transform-origin: 0 50%; animation: bk-turn .56s cubic-bezier(.42, .08, .3, 1) both; }
  .book-spread.turn-back::after { left: var(--bk-edge); right: 50%; transform-origin: 100% 50%; animation: bk-turn-back .56s cubic-bezier(.42, .08, .3, 1) both; }
  /* the shadow the lifting leaf throws on each page */
  .book-spread:is(.turn, .turn-back) > .page::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; }
  .book-spread:is(.turn, .turn-back) > .page-right::after { background: linear-gradient(90deg, #2814056b, transparent 70%); }
  .book-spread:is(.turn, .turn-back) > .page-left::after { background: linear-gradient(270deg, #2814056b, transparent 70%); }
  .book-spread.turn > .page-right::after, .book-spread.turn-back > .page-left::after { animation: bk-lift .56s ease-out both; }
  .book-spread.turn > .page-left::after, .book-spread.turn-back > .page-right::after { animation: bk-land .56s ease-in both; }
}
@keyframes bk-turn { from { transform: perspective(2400px) rotateY(0); } 82% { opacity: 1; } to { opacity: 0; transform: perspective(2400px) rotateY(-180deg); } }
@keyframes bk-turn-back { from { transform: perspective(2400px) rotateY(0); } 82% { opacity: 1; } to { opacity: 0; transform: perspective(2400px) rotateY(180deg); } }
@keyframes bk-lift { 30% { opacity: 1; } 70%, to { opacity: 0; } }
@keyframes bk-land { 0%, 45% { opacity: 0; } 80% { opacity: .85; } to { opacity: 0; } }

/* ---------- one page: below tablet width the spread becomes one continuous sheet, no gutter ---------- */
@media (max-width: 860px) {
  .book-spread { grid-template-columns: minmax(0, 1fr); --bk-gutter: none; --bk-curl: none; }
  .book-spread > .page, .book-spread > .page-right { padding: 28px 26px 14px; }
  .book-spread > .page-left { position: static; padding-bottom: 4px; }
  /* the two folios meet at the foot of the sheet: "7 of 12" */
  .book-spread > .page-left > .folio { position: absolute; bottom: 19px; right: calc(50% + 1.15em); padding: 0; }
  .book-spread > .page-left > .folio::after, .book-spread > .page-right > .folio::before { display: none; }
  .book-spread > .page-right > .folio { padding-left: calc(50% - .7em); text-align: left; }
  /* a fleuron where the reading ends and the answering begins */
  .book-spread > .page-right::before { content: "\2766"; content: "\2766" / ""; display: block; margin: -6px 0 16px; text-align: center; font-size: 1rem; line-height: 1; color: var(--bk-rubric); opacity: .8; }
  .book-spread > .page-right > .row.spread:first-child { margin-top: 0; }
  .book-spread .choice.sel::before { content: ""; left: -9px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--ink); }
  @media (prefers-reduced-motion: no-preference) {
    .book-spread:is(.turn, .turn-back) > .page::after { content: none; }
    .book-spread.turn::after, .book-spread.turn-back::after { left: var(--bk-edge); right: var(--bk-edge); transform-origin: 0 50%; }
    .book-spread.turn::after { animation-name: bk-turn-1; }
    .book-spread.turn-back::after { animation-name: bk-turn-back-1; }
  }
}
@keyframes bk-turn-1 { from { transform: perspective(2000px) rotateY(0); } 70% { opacity: 1; } to { opacity: 0; transform: perspective(2000px) rotateY(-96deg); } }
@keyframes bk-turn-back-1 { from { opacity: 0; transform: perspective(2000px) rotateY(-96deg); } 25% { opacity: 1; } 75% { opacity: 1; } to { opacity: 0; transform: perspective(2000px) rotateY(0); } }
@media (max-width: 760px) {
  .book-spread { --bk-cover: 7px; --bk-edge: 4px; --bk-tail: 3px; --bk-t: 2.5px; --bk-rs: 7px; --bk-cs: 26px; --bk-rv: 3.5px; border-radius: 6px; }
  .book-spread > .page, .book-spread > .page-right { padding: 22px 14px 12px; }
  .book-spread > .page-left { padding-bottom: 2px; }
  .book-spread > .page-left > .folio { bottom: 15px; }
  .book-spread:not(.has-passage) > .page-left::before { margin-top: -10px; }
  .book-spread :is(.stimulus, .text) { font-size: calc(1.03rem * var(--read-scale)); line-height: 1.66; }
  :root .book-spread .choice { grid-template-columns: 28px 1fr 32px; gap: 9px; padding: 10px 2px 10px 4px; }
  .book-spread .choice .letter { width: 26px; height: 26px; font-size: .84rem; }
  .book-spread .choice .ctext { padding-top: 1px; }
  .book-spread .strike { width: 32px; height: 32px; }
  .book-spread .choice:is(.right, .wrong)::before { right: 6px; font-size: 1.35rem; }
  .book-spread .feedback { padding: 20px 12px 14px 16px; }
  :root .book-spread .verdict-banner { margin-inline: -4px; }
  @supports (initial-letter: 2) { .book-spread :is(.stimulus, .page-left .text) > p:first-child::first-letter { initial-letter: 2; } }
}
/* style.css pulls the action bar 16px past main's 10px gutter on small phones, a sideways scroll; not under the book */
@media (max-width: 420px) { .book-spread ~ .actionbar { margin-inline: -10px; } }
@media (forced-colors: active) {
  .book-spread { border-color: CanvasText; }
  .book-spread::before, .book-spread::after, .book-spread > .page::after, .book-spread .feedback::before { display: none; }
  .book-spread .choice + .choice { border-top-color: CanvasText; }
}