/* askNib's BOOK READER (ADR-020 step 4, #508): what a book adds on top of the READ player's look (read.css on the
   books' sheet, book.css): the contents, chapter heads, the quick review's mini pages, the cheat sheet, the Ask box.
   Every colour is a token (public/ink/tokens.css); Shantell Sans speaks, Caveat only in Nib's ink and his marks. */

.bookpage .hero .bookacts, .chacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 1rem 0 0; }
.bookacts a, .chacts a { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: .98rem; text-decoration: none; }
.bookacts a.go, .chacts a.go { color: var(--sheet); background: var(--ink); }
.bookacts a.go:hover, .chacts a.go:hover { color: var(--sheet); transform: translateY(-1px); }
.bookacts a.ghost, .chacts a.ghost { color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--hair2); }
.bookacts a.ghost:hover, .chacts a.ghost:hover { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.chacts { justify-content: flex-start; margin-top: .8rem; }

/* THE BOOK'S LOCK (#559): who can find this book, three quiet words on its owner's reader; its link while shared */
.booklock { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin: 1.1rem 0 0; font-size: .95rem; color: var(--ink-3); }
.booklock .lbl { font-weight: 650; }
.booklock .picks { display: inline-flex; gap: 2px; }
.booklock .picks button, .booklock .booklink { min-height: 36px; padding: 0 10px; border: 0; background: none; font: inherit; font-weight: 650; color: var(--ink-3); cursor: pointer; border-radius: 8px; }
.booklock .picks button:hover, .booklock .booklink:hover { color: var(--accent); }
.booklock .picks button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: default; }
.booklock .booklink { color: var(--ink-2); }
.booklock .booklink { display: inline-flex; align-items: center; gap: 5px; }
.booklock .booklink svg { width: 15px; height: 15px; }
/* only me: the link sits dimmed, no words (#580) */
.booklock .booklink:disabled { opacity: .4; cursor: default; }
.booklock .booklink:disabled:hover { color: var(--ink-2); }
.booklock .lockmsg:empty { display: none; }
.booklock .lockmsg { flex-basis: 100%; text-align: center; font-weight: 600; color: var(--ink-2); }

/* the contents: numbered chapters, each with its one idea */
.contents { margin-top: 2rem; }
.contents .lblh { font-family: var(--read-face); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .6rem; }
.contents ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.contents li { padding: 8px 0; border-top: 1px solid var(--hair); }
.contents li:first-child { border-top: 0; }
.contents a { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; font-weight: 650; min-height: 32px; }
.contents a:hover .t, .contents a.here .t { color: var(--accent); }
.contents .no { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--hair2); font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; flex: none; }
.contents a.here .no { color: var(--sheet); background: var(--ink); box-shadow: none; }
.contents .a { display: block; margin: .15rem 0 0 2.2rem; color: var(--ink-2); font-size: 1rem; line-height: 1.45; }

/* a chapter: its head, then its steps exactly as a lesson's READ page has them */
.chapter { margin-top: 3.4rem; scroll-margin-top: 70px; }
.chhead .chk, .mini .chk { margin: 0 0 .2rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.chhead h2 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin: 0 0 .2rem; }
.chhead .short { margin-top: .8rem; }
h3.followup { margin-top: 2.4rem; font-size: 1.25rem; }
h3.followup .lbl { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* the answer to a check, folded until asked */
.aside.check p { margin: 0; }
.aside details.answer { margin-top: .4rem; }
.aside details.answer summary { cursor: pointer; font-weight: 650; color: var(--blueberry); min-height: 32px; display: inline-flex; align-items: center; }
.aside details.answer p { margin-top: .25rem; }

/* Ask Nib about this chapter: one quiet line, the board opens under it */
.chask { display: flex; gap: 8px; margin: 1.6rem 0 0; }
.chask input { flex: 1; min-width: 0; min-height: var(--hit); font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 0; border-radius: 999px; padding: 0 18px; box-shadow: inset 0 0 0 1.5px var(--hair2); }
.chask input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.chask button { flex: none; min-height: var(--hit); padding: 0 20px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; color: var(--sheet); background: var(--ink); cursor: pointer; }

/* quick review: a mini page per chapter */
.review, .sheet { margin-top: 3.6rem; scroll-margin-top: 70px; }
.review .dek, .sheet .dek { color: var(--ink-2); margin: 0 0 1.2rem; }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.mini { padding: 16px 18px 18px; border-radius: 20px; background: var(--paper); }
.mini h3 { margin: 0 0 .4rem; font-size: 1.2rem; line-height: 1.25; }
.minifig { margin: .2rem 0 .5rem; }
.minifig svg.fig { display: block; width: 100%; height: auto; max-height: 220px; }
html:not(.nb-js) .minifig { display: none; }
.miniaha { font-weight: 650; margin: 0 0 .4rem; line-height: 1.45; }
.mini .keys { margin: 0 0 .7rem; padding-left: 1.1rem; color: var(--ink-2); font-size: 1rem; line-height: 1.45; }
.hear { 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: inherit; font-weight: 650; font-size: .93rem; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--hair2); }
.hear svg { width: 15px; height: 15px; }
.hear:hover { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.hear.playing { color: var(--sheet); background: var(--ink); box-shadow: none; }

/* the cheat sheet: key drawing + key line, a printable grid */
.sheetgrid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px 22px; }
.sheetcard { border-top: 1.5px solid var(--hair2); padding-top: 10px; }
.sheetcard p { margin: .2rem 0 0; font-size: 1rem; line-height: 1.45; }
.printit { font: inherit; font-weight: 650; color: var(--ink-2); background: none; border: 0; border-bottom: 1.5px dashed var(--ink-3); cursor: pointer; padding: 0; }

/* the review bundle's notes (never on a published page) */
.reviewnote { margin: 1rem 0 0; padding: 10px 14px; border-radius: 14px; font-size: .95rem; line-height: 1.45; background: color-mix(in srgb, var(--pistachio) 12%, var(--paper)); }
.reviewnote[data-status="flagged"] { background: color-mix(in srgb, var(--strawberry) 14%, var(--paper)); }
.reviewnote .lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.reviewnote p { margin: 0; }
.reviewnote ul { margin: .3rem 0 0; padding-left: 1.1rem; }

@media (max-width: 520px) {
  .readbook .booknav a.c2 { display: none; } /* the Books crumb yields on a phone, so Play, Read and Ask fit (#559) */
  .minis, .sheetgrid { grid-template-columns: 1fr; }
  .chask button { padding: 0 16px; }
}

@media print {
  body.printsheet .booknav, body.printsheet .bookfoot, body.printsheet .hero, body.printsheet .contents, body.printsheet .chapter,
  body.printsheet .review, body.printsheet svg.end, body.printsheet .printit { display: none !important; }
  body.printsheet .sheet { margin: 0; }
  .sheetcard { break-inside: avoid; }
}
.bookfoot .tm { margin: 0 auto .6rem; max-width: 34rem; font-size: .82rem; line-height: 1.4; color: var(--ink-3); }
.sheettm { font-size: .8rem; color: var(--ink-3); margin-top: 1rem; }

/* A COURSE YOU START IS YOUR BOOK (#523): a chapter not taught yet keeps its place, quietly (flush on the paper, no
   frame: a fainter title), with the one press that teaches it (the board's resume card; nothing is spent until its
   Resume). The cost is said where the press is. */
.bookacts a .cost, .chacts a .cost { font-weight: 600; opacity: .8; }
.toteach .chhead h2 { color: var(--ink-3); }
.toteach .notyet { margin: .1rem 0 0; color: var(--ink-3); font-weight: 650; }
.notyet.unheard { margin: .7rem 0 0; color: var(--ink-3); font-size: .95rem; }
.notyet.unheard a { color: var(--ink-2); font-weight: 700; }
.toteach .chacts { margin-top: .9rem; }
.contents li.todo .t { color: var(--ink-2); }
.contents li.todo .no { box-shadow: inset 0 0 0 1.5px var(--hair); color: var(--ink-3); }
.contents li.todo .a { color: var(--ink-3); font-style: normal; }