/* Textbook: the library grid, the reader, and PDF.js's text layer.
   Shares every colour token with css/site.css — nothing here redefines a
   palette, so dark mode comes free. */

.wrap.wide { max-width: 1440px; }

/* ── library ── */
.bookcard { border: 1px solid var(--rule); border-radius: 10px; background: var(--panel);
            margin: 10px 0; padding: 0 14px; }
.bookcard summary { cursor: pointer; padding: 12px 0; display: flex; gap: 12px;
                    align-items: baseline; flex-wrap: wrap; }
.bookcard .bt { font-weight: 600; flex: 1 1 22ch; }
.bookcard .bmeta { color: var(--ink-3); font-size: 0.82rem; font-family: var(--mono); }
.chlist { padding: 0 0 12px; }
.chrow { display: flex; gap: 12px; align-items: baseline; padding: 6px 2px;
         border-top: 1px dotted var(--rule); }
.chrow .chn { color: var(--ink-3); font-family: var(--mono); font-size: 0.8rem;
              min-width: 2.5ch; text-align: right; }
.chrow .chtitle { flex: 1 1 24ch; }
.chrow .chpages { color: var(--ink-3); font-size: 0.78rem; font-family: var(--mono);
                  white-space: nowrap; }

/* What is attached to the chapter. Three counts, each in its own colour so a
   reader can scan one kind down the column without reading the words; the
   words stay because a colour alone is not a label. A chapter with nothing
   attached prints nothing — see linkBits() in library.js. */
.chrow .chlinks { display: flex; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
.chrow .lk { font-size: 0.72rem; padding: 1px 7px; border-radius: 999px;
             border: 1px solid transparent; }
/* Lessons lead the row and are the only chip with weight on them: they are a
   route through the chapter, where the other three are counts of material in
   it. Warm against the three cool chips so the eye lands there first. */
.chrow .lk.l { background: #fdf0e3; color: #8a4b16; border-color: #f2d9bd;
               font-weight: 600; }
.chrow .lk.v { background: #eef2fb; color: #2f4b8a; border-color: #cdd9f0; }
.chrow .lk.c { background: #f3eefb; color: #57379a; border-color: #dccef2; }
.chrow .lk.q { background: #e6f2ef; color: #0c6b6b; border-color: #b9dcd5; }

/* ── reader chrome ── */
.readbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
           padding: 10px 0; border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.readbar .seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px;
                overflow: hidden; }
.readbar .seg button { border: none; background: var(--paper); color: var(--ink-2);
                       padding: 6px 12px; cursor: pointer; font-size: 0.95rem; }
.readbar .seg button:hover:not(:disabled) { background: var(--accent-bg); color: var(--accent); }
.readbar .seg button:disabled { opacity: 0.4; cursor: default; }
.readbar select { max-width: 34ch; background: var(--paper); color: inherit; font: inherit;
                  border: 1px solid var(--rule); border-radius: 8px; padding: 6px 8px; }
.readbar input[type=text] { font: inherit; background: var(--paper); color: inherit;
                            border: 1px solid var(--rule); border-radius: 8px; padding: 5px 8px; }
.readbar .pagenote { color: var(--ink-3); font-size: 0.8rem; font-family: var(--mono); }
/* Forces the second row of the bar: what you reach for while reading stays on
   the first line, the occasional things sit under it. */
.readbar-break { flex-basis: 100%; height: 0; margin: 0; }
.readbar .tidy, .readbar .rate, .readbar .pagejump { font-size: 0.85rem; color: var(--ink-2);
                                                     display: inline-flex; gap: 6px; align-items: center; }

.tocbtn { border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2);
          border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit;
          font-size: 0.9rem; text-decoration: none; }
.tocbtn:hover { border-color: var(--accent); color: var(--accent); }
.tocbtn.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }

/* The hyperlinked contents: the WHOLE book, chapter by chapter, every entry a
   jump. Opens over the page rather than beside it — on a phone there is no
   room beside it, and on a desktop it is a place you leave immediately. */
.toc { border: 1px solid var(--rule); border-radius: 10px; background: var(--panel);
       padding: 10px 16px; margin-bottom: 14px; max-height: 60vh; overflow-y: auto;
       columns: 2; column-gap: 28px; }
.tocch { break-inside: avoid; margin-bottom: 6px; }
.tocch > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline;
                   font-weight: 600; font-size: 0.9rem; padding: 3px 0; }
.tocch > summary a { flex: 1 1 auto; }
.tocsec { display: flex; gap: 8px; align-items: baseline; font-size: 0.85rem;
          padding: 2px 0 2px 14px; }
.tocsec a { flex: 1 1 auto; }
@media (max-width: 780px) { .toc { columns: 1; } }

/* The translate recipe panel. The browser does this job well and we do not
   duplicate it — this only tells the reader WHERE their own browser keeps it,
   because the step that actually matters (changing the target language) is
   buried behind a three-dot menu nobody finds by accident. */
.xlate { border: 1px solid var(--rule); border-radius: 10px; background: var(--panel);
         padding: 14px 18px; margin-bottom: 14px; max-width: 70ch; }
.xlate h3 { margin: 0 0 6px; font-size: 1rem; }
.xlate p { margin: 6px 0; font-size: 0.9rem; color: var(--ink-2); }
.xlate ol { margin: 6px 0 6px 18px; padding: 0; font-size: 0.9rem; color: var(--ink-2); }
.xlate li { margin: 3px 0; }
.xlate kbd { font-family: var(--mono); font-size: 0.82rem; background: var(--paper);
             border: 1px solid var(--rule); border-radius: 4px; padding: 1px 5px; }

/* A video in the Watch rail: 300px wide, so the clock and the channel bracket
   the title rather than sitting in columns beside it. */
.vmini { padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: 0.85rem; }
.vmini:last-of-type { border-bottom: none; }
.vmini .vdur { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3);
               margin-right: 6px; white-space: nowrap; }
.vmini a { display: inline; }
.vmini .vch { display: block; font-size: 0.75rem; color: var(--ink-3); margin-top: 1px; }

.markdel { border: none; background: none; color: var(--ink-3); cursor: pointer;
           font: inherit; font-size: 0.8rem; padding: 0 2px; opacity: 0.5; }
.markdel:hover { color: var(--alert); opacity: 1; }

.readwrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
/* The left rail only exists where there is room for it; below this the page
   would start losing width to it, and the page is the point. */
.railleft { display: none; }
@media (min-width: 1400px) {
  .readwrap { grid-template-columns: 300px minmax(0, 1fr) 300px; }
  .railleft { display: flex; }
}
@media (min-width: 1700px) {
  .wrap.wide { max-width: 1780px; }
  .readwrap { grid-template-columns: 340px minmax(0, 1fr) 320px; }
}
.pagepane { min-width: 0; position: relative; }
.stage { display: flex; justify-content: center; min-height: 60vh; }

/* Told once, then never again. Quiet enough to ignore, close enough to the
   page to be about the page. */
.turnhint {
  margin: 14px auto 0; text-align: center;
  color: var(--ink-3); font-size: 0.85rem;
}
.turnhint kbd {
  font-family: var(--mono); font-size: 0.8rem;
  border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 6px; margin: 0 1px; background: var(--panel); color: var(--ink-2);
}
.turnhint[hidden] { display: none; }

/* ── page turns beside the page ──────────────────────────────────────────
   The toolbar arrows are twenty-odd centimetres from where the eye is, and
   turning a page should not need a trip to the top of the window. These sit
   in the margin either side of the sheet.

   The strip is full height and DOES NOT TAKE CLICKS -- only the glyph does,
   so a strip that happens to overlap the page at fit width can never steal a
   selection from the text layer underneath.

   The glyph is sticky rather than centred, so it stays beside the reader's
   eye all the way down a tall page instead of sitting at the middle of the
   sheet and scrolling away. */
.turnstrip {
  position: absolute; top: 0; bottom: 0; width: 60px;
  pointer-events: none; z-index: 3;
}
.turnstrip.left { left: 0; }
.turnstrip.right { right: 0; }
.pageturn {
  pointer-events: auto;
  position: sticky; top: calc(50vh - 46px);
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 92px; margin: 0 auto; padding: 0;
  font: 500 2.1rem/1 var(--serif); color: var(--ink-2);
  background: var(--panel); border: 1px solid var(--rule); border-radius: 10px;
  cursor: pointer; opacity: 0.9;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pageturn:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }
/* Kept in place when disabled rather than removed: the page must not shift
   under the pointer on the first and last page of a chapter. */
.pageturn[disabled] { opacity: 0.25; cursor: default; color: var(--ink-3); border-color: var(--rule); }

/* A touch screen has no hover to reveal them with. */
@media (hover: none) { .pageturn { opacity: 1; } }

/* NARROW SCREENS GET NOTHING, ON PURPOSE. Below about 900px the page fills
   the pane and the margin these live in stops existing: measured on a 375px
   viewport, the sheet ran 20px to 356px and each arrow lay 36px over it --
   a tenth of the page width, on top of live text. An arrow you have to read
   around is worse than an arrow that is not there, and the toolbar pair is
   still two taps away at the top of the window. */
@media (max-width: 900px) { .turnstrip { display: none; } }
@media (prefers-reduced-motion: reduce) { .pageturn { transition: none; } }
.pageholder { position: relative; box-shadow: 0 2px 14px rgba(0,0,0,0.18);
              border-radius: 3px; overflow: hidden; background: #fff; }
.pageholder canvas { display: block; }

.rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; }
.railbox { border: 1px solid var(--rule); border-radius: 10px; background: var(--panel);
           padding: 10px 14px; }
.railbox:empty { display: none; }
.railbox h3 { margin: 2px 0 8px; font-size: 0.95rem; }
/* The RN/PN switch in the Practice rail (Matt, 2026-09-01). Same segmented
   control as the reader chrome, sized for the rail: it governs the Practice
   box it sits in AND the Case studies box below it. */
.railbox .tracksw { display: flex; gap: 8px; align-items: center; margin: 0 0 6px;
                    font-size: 0.85rem; color: var(--ink-2); }
.railbox .seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px;
                overflow: hidden; margin-left: auto; }
.railbox .seg button { border: none; background: var(--paper); color: var(--ink-2);
                       padding: 3px 12px; cursor: pointer; font: inherit;
                       font-family: var(--mono); font-size: 0.82rem; }
.railbox .seg button:hover { background: var(--accent-bg); color: var(--accent); }
.railbox .seg button.on { background: var(--accent); color: var(--paper); cursor: default; }
/* Which licence a case in the rail was written for, when it is not the track
   the reader is on. Small, monospaced, the same vocabulary as the switch. */
.railbox .tchip { font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
                  letter-spacing: 0.04em; color: var(--accent); }
.secrow { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 0.88rem; }
.secrow a { flex: 1 1 auto; }
.secrow .secpg { color: var(--ink-3); font-family: var(--mono); font-size: 0.76rem; }
.secrow.on { border-left: 3px solid var(--accent); padding-left: 7px; margin-left: -10px; }
.secrow.on a { font-weight: 600; }
.qcite { font-size: 0.85rem; color: var(--ink-2); border-left: 3px solid var(--rule);
         padding: 4px 0 4px 10px; margin: 6px 0; }

@media (max-width: 1000px) {
  .readwrap { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
}

/* ── PDF.js text layer ──
   The spans are invisible text laid exactly over the rendered page: that is
   what makes the page selectable and searchable, and it is what the read-aloud
   highlight paints on. --scale-factor is set on the container by read.js;
   PDF.js's own inline styles are written in terms of it. */
.textLayer { position: absolute; inset: 0; overflow: hidden; line-height: 1;
             text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0;
             z-index: 2; caret-color: CanvasText; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre;
                           cursor: text; transform-origin: 0% 0%; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }

/* The sentence being spoken. Painted on the invisible span, so it reads as a
   highlighter over the real printed line. */
.textLayer .spoken { background: color-mix(in srgb, var(--accent) 30%, transparent);
                     border-radius: 2px; }

/* The sentence a citation was quoting, painted the same way but in a colour
   that is not the read-aloud one — the two can be on screen together and
   they mean different things. */
.textLayer .quoted { background: color-mix(in srgb, #f0b429 55%, transparent);
                     border-radius: 2px; }
.qnote { margin: 0 0 10px; font-size: 0.9rem; }

/* Zoom: a labelled control, not two anonymous glyphs. `Fit width` sits
   outside the -/+ segment because it is not a step along the same axis --
   it is the state that tracks the window, and it is what most readers
   actually want. */
.readbar .zoomwrap { display: inline-flex; align-items: center; gap: 6px; }
.readbar .zlab { color: var(--ink-2); font-size: 13px; }
.readbar #zlevel { min-width: 4.2ch; text-align: center; font-size: 12px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
  padding: 0 6px; align-self: stretch; display: inline-flex;
  align-items: center; }
.readbar .fitbtn { border: 1px solid var(--rule); border-radius: 8px;
  background: var(--paper); color: var(--ink-2); font: inherit; font-size: 13px;
  padding: 4px 10px; cursor: pointer; }
.readbar .fitbtn:hover { background: var(--accent-bg); color: var(--accent); }

/* ── the study guide's own blocks, in the chapter rail (Matt, 2026-09-08) ── */
/* The rail carried a Practice box and a Case studies box; both now live in the
   guide, whose blocks are lifted into these rails rather than re-rendered, so
   there is one source for them instead of two that had to agree. The guide's
   own classes come with the markup — these rules only make them sit in a
   narrow column. */
.railbox .gcol > h2 { font-size: .95rem; margin: .9rem 0 .35rem; }
.railbox .gcol .sec h3 { font-size: .88rem; margin: .55rem 0 .2rem; }
.railbox .gcol ul { margin: .2rem 0 .5rem 1.05rem; padding: 0; }
.railbox .gcol li { margin: .15rem 0; font-size: .86rem; line-height: 1.35; }
.railbox .gcol .note { font-size: .8rem; }
.railbox .gcol .bar { display: grid; grid-template-columns: 1fr 3.2rem 1.4rem;
                      align-items: center; gap: .3rem; font-size: .78rem; }
.railbox .gcol .bar .tk { background: var(--line, #e6e2d8); height: .4rem;
                          border-radius: 3px; overflow: hidden; }
.railbox .gcol .bar .tk i { display: block; height: 100%; background: var(--accent, #14594b); }
.railbox .gcol .cases { list-style: none; margin-left: 0; }
.railbox .gcol .cases .cmeta { display: block; font-size: .76rem; color: var(--dim, #6b6f76); }
.railbox .gcol .drillrow { margin: .5rem 0; }
.railbox .gcol .drillrow .dnote { display: block; font-size: .76rem; }
.railbox .gswitch .seg { display: inline-flex; border: 1px solid var(--line, #cfcabc);
                         border-radius: 6px; overflow: hidden; margin-left: .3rem; }
.railbox .gswitch .seg button { border: 0; background: transparent; cursor: pointer;
                                padding: .12rem .5rem; font: inherit; font-size: .8rem; color: inherit; }
.railbox .gswitch .seg button + button { border-left: 1px solid var(--line, #cfcabc); }
.railbox .gswitch .seg button.on { background: var(--accent, #14594b); color: #fff; }
.railbox .gswitch .tracksw { font-size: .8rem; margin: .2rem 0; }
.railbox .gopen { margin-top: .6rem; }