/* askNib's READ player (ADR-020): a lesson as a book page. It sits on the books' sheet (public/books/book.css: the
   paper edge to edge, the centred column, the glass bar, dark as the one root transform) and adds only what a lesson
   page has that a hand-written book page doesn't: numbered steps, each with its drawing and a Replay, the key line,
   and the switch between the two players. Every colour is a token (public/ink/tokens.css); Shantell Sans speaks,
   Caveat appears only in Nib's ink and his marks. */

/* the switch: Play | Read, quiet glass in the bar (ADR-020: every page can be played or read) */
.prtoggle { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--hair2); }
.prtoggle a, .prtoggle span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; font-weight: 650; font-size: .95rem; color: var(--ink-2); text-decoration: none; }
.prtoggle a:hover { color: var(--accent); }
.prtoggle [aria-current] { color: var(--sheet); background: var(--ink); }
.booknav .prtoggle { margin-right: 6px; }
@media (max-width: 400px) { .prtoggle a, .prtoggle span { padding: 0 11px; } .booknav .askl { padding: 0 12px; } }

.readpage { padding-bottom: 8px; }
.read .hero .kick { text-transform: none; letter-spacing: .01em; font-size: .98rem; }
.read .hero .dek { font-size: 1.02rem; color: var(--ink-3); }
.read .hero .dek a { color: var(--ink-2); }

/* a step: its number and name, its words, then its drawing flush on the paper */
.step { margin-top: 2.1rem; scroll-margin-top: 80px; }
.part > .step:first-child, .part > .col:first-child + .step { margin-top: 1.6rem; }
.stepk { display: flex; align-items: baseline; gap: .55rem; margin: 0 0 .35rem !important; color: var(--ink-3); font-size: .92rem; font-weight: 650; }
.stepk .no { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .3rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--hair2); font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.stepk .nm { text-transform: lowercase; letter-spacing: .01em; }
.step p:not(.stepk) { margin: 0 0 .6em; font-size: 1.16rem; line-height: 1.6; }
.step.reading { transition: background .4s, box-shadow .4s; }
/* the key line: Nib's highlighter on the sentence that matters */
.keyline { font-weight: 650; }
mark.key { font-weight: 650; }

/* the drawing: the board's own ink, framed to itself, flush on the paper (no plate, no card) */
.readfig { position: relative; margin: .4rem auto 1.4rem; }
.readfig svg.fig { display: block; width: 100%; height: auto; max-height: min(var(--fig-h), 520px); overflow: hidden; }
html:not(.nb-js) .readfig { display: none; } /* no script, no ink: the words stand alone */
.readfig .was { opacity: .32; transition: opacity .4s; }
.figctl { display: flex; justify-content: flex-end; margin-top: 2px; }
.replay { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit); padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-weight: 650; font-size: .93rem; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--hair2); transition: color .15s, box-shadow .15s; }
.replay svg { width: 15px; height: 15px; }
.replay:hover { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.readfig.playing .replay { color: var(--sheet); background: var(--ink); box-shadow: none; }
.replay .i-stop, .readfig.playing .replay .i-play { display: none; }
.readfig.playing .replay .i-stop { display: block; }

/* the asides a written page may carry: the mix-up it clears up, a question to check yourself */
.aside { margin: .2rem 0 .8rem; padding: 12px 16px; border-radius: 16px; background: var(--paper); font-size: 1.04rem; line-height: 1.5; }
.aside .lbl { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .15rem; }
.aside.myth .lbl { color: var(--clay); }
.aside.check .lbl { color: var(--blueberry); }

/* a follow-up: the next question, asked on the same page */
h2.followup { margin-top: 2.8rem; font-size: 1.4rem; }
h2.followup .lbl { display: block; font-family: var(--read-face); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .2rem; }
.read .coda { font-size: 1.24rem; margin-top: 1.8rem !important; }

/* the end: play it, or ask about it */
.readend { margin-top: 0; }
.readend .acts { justify-content: center; }
/* the books' "next up" sets its link as a headline; here they are the page's two ways on, set as buttons */
.readend .acts a { display: inline-flex; margin: 0; font-family: var(--read-face); font-weight: 700; font-size: 1rem; letter-spacing: 0; line-height: 1.2; }
.readend .acts a.go:hover { color: var(--sheet); }
.readend .acts a.ghost:hover { color: var(--ink); }