/* Styles for workbench surfaces (tab renderers).
 *
 * OWNED BY THE WAVE-B FEATURE BUILDERS. index.html already links this file.
 *
 * House rules, enforced by test/design-tokens.test.js:
 *   - no colour literals; only var(--token) from styles/tokens.css
 *   - scope every rule under `.surface[data-kind="<your-kind>"]`
 *   - a surface fills its lane: use `flex: 1; min-height: 0;` not fixed heights
 */

.surface > * + * { margin-top: var(--space-3); }

.surface .surface-canvas {
  flex: 1;
  min-height: 0;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
}

.surface .surface-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap);
  align-items: center;
}

/* ==================================================================
 * B2 — the editor, image and preview surfaces
 * ------------------------------------------------------------------
 * A surface fills its lane: flex column, min-height 0, the scrolling
 * region inside rather than on the lane. Colours are tokens only.
 * ================================================================== */

.surface[data-kind="workbench"],
.surface[data-kind="markdown"],
.surface[data-kind="notes"],
.surface[data-kind="image"],
.surface[data-kind="preview"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* -- editor ------------------------------------------------------- */

.surface .editor-pane {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 12rem;
  overflow: hidden;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
}

.surface .editor-pane[data-flavour="markdown"],
.surface .editor-pane[data-flavour="notes"] { grid-template-columns: 1fr; }

.surface .editor-pane[data-flavour="markdown"][data-preview="on"] { grid-template-columns: 1fr 1fr; }

.surface .editor-gutter {
  overflow: hidden;
  padding: var(--space-3) var(--space-2);
  text-align: right;
  border-inline-end: var(--border-width) solid var(--hairline);
  background: var(--bg-sunken);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  user-select: none;
}

.surface .editor-line-no { display: block; }

.surface .editor-input {
  width: 100%;
  min-height: 12rem;
  resize: none;
  border: 0;
  padding: var(--space-3);
  background: transparent;
  color: var(--fg);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  tab-size: 2;
}

.surface .editor-pane[data-flavour="code"] .editor-input { font-family: var(--font-mono); }

.surface .editor-pane[data-flavour="markdown"] .editor-input,
.surface .editor-pane[data-flavour="notes"] .editor-input {
  font-family: var(--font-ui);
  font-size: var(--text-base);
}

.surface .editor-input:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: -2px;
}

.surface .editor-preview {
  overflow: auto;
  padding: var(--space-3);
  border-inline-start: var(--border-width) solid var(--hairline);
  background: var(--bg-sunken);
}

.surface .editor-status {
  margin: 0;
  min-height: 1.5em;
  font-size: var(--text-sm);
  color: var(--muted);
}

.surface .editor-status[data-tone="pending"] { color: var(--info-ink); }
.surface .editor-status[data-tone="saved"] { color: var(--success-ink); }
.surface .editor-status[data-tone="dirty"] { color: var(--warn-ink); }
.surface .editor-status[data-tone="error"] { color: var(--danger-ink); }

/* -- image -------------------------------------------------------- */

.surface .image-figure {
  flex: 1;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  overflow: auto;
  padding: var(--space-3);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}

.surface .image-figure[data-zoom="fit"] .image-view {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.surface .image-figure[data-zoom="actual"] .image-view { max-width: none; max-height: none; }

.surface .image-caption {
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
}

/* -- preview ------------------------------------------------------ */

.surface .preview-stage {
  flex: 1;
  min-height: 12rem;
  display: flex;
  overflow: hidden;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
}

.surface .preview-frame {
  flex: 1;
  min-height: 12rem;
  border: 0;
}

.surface .preview-status {
  margin: 0;
  min-height: 1.5em;
  font-size: var(--text-sm);
  color: var(--muted);
}

.surface .preview-status[data-tone="error"] { color: var(--danger-ink); }
.surface .preview-status[data-tone="ok"] { color: var(--success-ink); }

/* ================================================================== *
 * B3 — creative surfaces: sketchpad, blocks, notebook, experience,
 * lab, whiteboard.
 *
 * House rules kept here:
 *   - no colour literal anywhere below; only var(--token)
 *   - every rule is scoped under .b3-surface or a b3-owned class name
 *   - layouts collapse to one column at 320px, and nothing has a fixed
 *     pixel height that would clip at 200% text zoom
 *   - anything that moves is disabled under data-animation="off"
 * ================================================================== */

.b3-surface { gap: var(--space-3); padding-bottom: var(--space-6); }

/* ---- shared: the "keep this" control ----------------------------- */

.keep-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
}
.keep-fields { display: grid; gap: var(--space-3); }
.keep-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.keep-status { font-size: var(--text-sm); color: var(--muted); min-height: 1.2em; }

@media (min-width: 40rem) {
  .keep-fields { grid-template-columns: minmax(12rem, 1fr) 2fr; align-items: start; }
}

/* ---- sketchpad (s47) --------------------------------------------- */

.sketch-toolbar {
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}
.sketch-tools { flex: 1 1 18rem; min-width: 0; }
.sketch-tools .segmented { flex-wrap: wrap; }

.sketch-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
/* The chip is a piece of the page, not a piece of the theme.
 *
 * With `background: var(--bg-raise)` the "Ink" swatch — the default one —
 * came out at about 1.1:1 against its own chip in the 8bit theme and was
 * simply invisible. The ink colours are chosen to sit on white paper, so the
 * chip is painted the page colour in JS (the same "colour is data, not
 * theme" rule the fill already follows) and every ink reads against it in
 * all four themes. */
.sketch-swatch {
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  padding: 3px;
  border: var(--border-width) solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-raise);
  cursor: pointer;
}
.sketch-swatch[aria-checked="true"] { border-width: calc(var(--border-width) * 2); }
.sketch-swatch[aria-checked="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--focus-width) var(--accent-soft);
}
.sketch-swatch-fill {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--hairline);
}

/* The element box is the page.
 *
 * `.surface .surface-canvas { flex: 1 }` used to stretch this SVG to the
 * height of the lane while its viewBox stayed 960x600, so `xMidYMid meet`
 * letterboxed the white page inside a taller, theme-coloured element —
 * invisible in Classic Light, but in 8bit it read as a broken frame and left
 * it ambiguous where you were allowed to draw. `flex: none` plus an explicit
 * aspect ratio makes the element exactly the page, so there are no bands at
 * all. The inline size is capped by height so a short, wide lane does not
 * produce a page taller than the window.
 */
.surface .sketch-canvas {
  display: block;
  /* Beats `.surface .surface-canvas { flex: 1 }`, which is what used to
     stretch the page into a letterbox. */
  flex: 0 0 auto;
  align-self: center;
  inline-size: min(100%, calc(70vh * 8 / 5));
  block-size: auto;
  min-block-size: 0;
  aspect-ratio: 8 / 5;
  touch-action: none;
  cursor: crosshair;
}
.sketch-selection { stroke: var(--fg); stroke-width: 1; }
.sketch-summary { font-size: var(--text-sm); color: var(--muted); }
.sketch-status { font-size: var(--text-sm); color: var(--fg); min-height: 1.2em; }
.sketch-keep { display: grid; gap: var(--space-3); }

/* ---- blocks (s48) ------------------------------------------------ */

/* The three columns are measured against the lane, not the window.
 *
 * `@media (min-width: 60rem)` asked the wrong question: at 1440px the window
 * is well past 60rem but the centre lane is about 750px, so two fixed 15rem
 * and 20rem tracks left roughly 115px for the scripts. Block labels wrapped
 * to three lines, "-120" clipped to "-12", and the columns painted over each
 * other. Every track is now `minmax(0, …)` so a track can shrink instead of
 * overflowing into its neighbour, and the breakpoints are the lane's.
 */
.blocks-layout {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

/* Two columns: blocks beside the script, the stage full width underneath. */
@container surface (min-width: 34em) {
  .blocks-layout { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
  .blocks-stage-column { grid-column: 1 / -1; }
}

/* Three columns only once the script column can still be the widest one. */
@container surface (min-width: 62em) {
  .blocks-layout { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) minmax(0, 16rem); }
  .blocks-stage-column { grid-column: auto; }
}

.blocks-heading { font-size: var(--text-md); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); }
.blocks-hint { font-size: var(--text-sm); color: var(--muted); }
.blocks-column-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}
.blocks-column-head > .blocks-heading { flex: 1 1 auto; min-width: 0; }

.blocks-categories { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.blocks-category {
  min-block-size: var(--tap-min);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--bg-raise);
  color: var(--fg);
  cursor: pointer;
}
.blocks-category[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.blocks-palette-list { display: grid; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.blocks-palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--accent-ghost);
  cursor: grab;
}
.blocks-palette-label { font-size: var(--text-sm); }

.blocks-scripts { display: grid; gap: var(--space-3); }
.blocks-script {
  padding: var(--space-3);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
}
.blocks-script[data-active="true"] { border-color: var(--accent); }
.blocks-script-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}
.blocks-script-title { font-size: var(--text-base); flex: 1 1 8rem; min-width: 0; overflow-wrap: break-word; }

.blocks-body { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.blocks-body[data-drop-target="true"] { outline: var(--focus-width) dashed var(--accent); outline-offset: var(--focus-offset); }
.blocks-empty { font-size: var(--text-sm); color: var(--muted); padding: var(--space-2); }

.blocks-block {
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  padding: var(--space-2);
}
.blocks-block[data-selected="true"] { border-color: var(--accent); background: var(--accent-soft); }
.blocks-block-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
/* The block is the thing, not the button that deletes it. The remove control
   is an icon at the end of the row, so a script no longer reads as a column
   of the word "Remove". */
.blocks-block-remove { flex: none; margin-inline-start: auto; opacity: 0.6; }
.blocks-block:hover .blocks-block-remove,
.blocks-block[data-selected="true"] .blocks-block-remove,
.blocks-block-remove:focus-visible { opacity: 1; }
.blocks-block-pick {
  min-block-size: var(--tap-min);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--hairline-strong);
  border-radius: var(--control-radius);
  background: var(--bg-raise);
  color: var(--fg);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.blocks-block-pick[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* Wide enough for a four-character signed number plus the spinner Chrome
   draws inside it; "-120" used to render as "-12". */
.blocks-param { inline-size: 7.5rem; max-inline-size: 100%; }
.blocks-condition { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.blocks-nest { margin-block-start: var(--space-2); padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--accent-soft); }
.blocks-nest-label { font-size: var(--text-xs); color: var(--muted); }

.blocks-stage {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  border: var(--border-width) solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
  overflow: hidden;
}
.blocks-sprite { position: absolute; transform: translate(-50%, -50%); font-size: var(--text-3xl); }
.blocks-sprite[data-visible="false"] { opacity: 0.25; }
.blocks-sprite-say {
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--text-sm);
  background: var(--bg-sunken);
  color: var(--fg);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
}

.blocks-watchers, .blocks-log { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.blocks-log { max-block-size: 14rem; overflow: auto; font-size: var(--text-sm); }
.blocks-log li { padding-block: 2px; border-block-end: var(--border-width) solid var(--hairline); }
.blocks-watcher { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--bg-sunken); }
.blocks-watcher-value { font-family: var(--font-mono); }
.blocks-status { font-size: var(--text-sm); color: var(--fg); min-height: 1.2em; }
.blocks-stage-column, .blocks-script-column, .blocks-palette {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
}

/* ---- notebook ---------------------------------------------------- */

.notebook-cells { display: grid; gap: var(--space-3); }
.notebook-cell {
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}
.notebook-cell-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); justify-content: space-between; }
.notebook-cell[data-type="code"] .notebook-editor { font-family: var(--font-mono); font-size: var(--text-md); }
.notebook-output { display: grid; gap: var(--space-2); }
.notebook-log, .notebook-value {
  margin: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  color: var(--code-fg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.notebook-value { border: var(--border-width) solid var(--code-border); }
.notebook-timing, .notebook-pending, .notebook-status { font-size: var(--text-sm); color: var(--muted); }
.notebook-runner { position: absolute; inline-size: 1px; block-size: 1px; border: 0; opacity: 0; pointer-events: none; }
.notebook-keep { display: grid; gap: var(--space-3); }

/* ---- generated experience (s31) ---------------------------------- */

.experience-body { display: grid; gap: var(--space-4); }
.experience-prose { line-height: var(--leading-body); }
.experience-goal { font-size: var(--text-lg); line-height: var(--leading-snug); }
.experience-items { display: grid; gap: var(--space-4); padding-inline-start: var(--space-5); }
.experience-item { display: grid; gap: var(--space-2); }
.experience-section { display: grid; gap: var(--space-2); }
.experience-verdict { font-size: var(--text-sm); color: var(--fg); min-height: 1.2em; }
.experience-hint summary { cursor: pointer; font-size: var(--text-sm); }
.experience-hint-text { font-size: var(--text-sm); color: var(--muted); }
.experience-openers { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.experience-openers li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); justify-content: space-between; }
.experience-opener { flex: 1 1 12rem; }
.experience-passage { padding: var(--space-3); border-inline-start: 3px solid var(--accent-soft); }
.experience-code {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  color: var(--code-fg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.experience-response { display: grid; gap: var(--space-3); }
.experience-status { font-size: var(--text-sm); color: var(--muted); min-height: 1.2em; }

/* An evaluation must look different from a lesson at a glance (s13). */
.experience-body[data-evaluation="true"] { outline: 2px solid var(--warn); outline-offset: var(--space-2); border-radius: var(--radius-md); }

/* ---- lab --------------------------------------------------------- */

.lab-layout { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 55rem) {
  .lab-layout { grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); }
}
.lab-panel, .lab-result { display: grid; gap: var(--space-3); align-content: start; }
.lab-controls { display: grid; gap: var(--space-3); }
.lab-control { display: grid; gap: var(--space-1); }
.lab-label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.lab-unit { color: var(--muted); font-weight: var(--weight-regular); }
.lab-control-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.lab-slider { flex: 1 1 8rem; min-inline-size: 6rem; block-size: var(--tap-min); accent-color: var(--accent); }
.lab-number { inline-size: 6rem; }
.lab-readout { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
.lab-chart { inline-size: 100%; block-size: auto; background: var(--bg-raise); border-radius: var(--radius-md); border: var(--border-width) solid var(--hairline); }
.lab-axis { stroke: var(--hairline-strong); stroke-width: 1; }
.lab-series { stroke: var(--accent); stroke-width: 2.5; }
.lab-tick { fill: var(--muted); font-size: 11px; font-family: var(--font-ui); }
.lab-heading { font-size: var(--text-md); }
.lab-notes ul { padding-inline-start: var(--space-5); }
.lab-data { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.lab-data th, .lab-data td { text-align: start; padding: var(--space-1) var(--space-2); border-block-end: var(--border-width) solid var(--hairline); }
.lab-status { font-size: var(--text-sm); color: var(--muted); min-height: 1.2em; }
.lab-keep { display: grid; gap: var(--space-3); }
.lab-assumes summary { cursor: pointer; font-size: var(--text-sm); }

/* ---- whiteboard -------------------------------------------------- */

.whiteboard-board {
  position: relative;
  inline-size: 100%;
  min-block-size: 24rem;
  aspect-ratio: 16 / 9;
  border: var(--border-width) solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
  overflow: auto;
}
.whiteboard-empty { padding: var(--space-4); color: var(--muted); font-size: var(--text-sm); max-inline-size: 28rem; }
.whiteboard-card {
  position: absolute;
  inline-size: 13rem;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--hairline-strong);
  background: var(--bg-sunken);
  box-shadow: var(--shadow-soft);
}
.whiteboard-card[data-tone="idea"] { background: var(--accent-soft); }
.whiteboard-card[data-tone="question"] { background: var(--warn-soft); }
.whiteboard-card[data-tone="done"] { background: var(--success-soft); }
.whiteboard-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.whiteboard-handle {
  min-block-size: var(--tap-min);
  padding-inline: var(--space-2);
  border: var(--border-width) solid var(--hairline-strong);
  border-radius: var(--control-radius);
  background: var(--bg-raise);
  color: var(--fg);
  font-size: var(--text-xs);
  cursor: grab;
  touch-action: none;
}
.whiteboard-text { inline-size: 100%; font-size: var(--text-sm); }
.whiteboard-sync, .whiteboard-status { font-size: var(--text-sm); color: var(--muted); min-height: 1.2em; }
.whiteboard-keep { display: grid; gap: var(--space-3); }

/* ---- motion (s62) ------------------------------------------------ *
 * Nothing in these surfaces animates by default, and the two places a
 * transition would be natural are switched off entirely when the
 * learner has asked for no motion. */

.blocks-sprite, .whiteboard-card { transition: none; }
[data-animation="full"] .blocks-sprite { transition: left var(--dur-instant) linear, top var(--dur-instant) linear; }
[data-animation="off"] .blocks-sprite,
[data-animation="off"] .whiteboard-card { transition: none !important; }

/* ---- 320px ------------------------------------------------------- */

@media (max-width: 26rem) {
  .blocks-param, .lab-number { inline-size: 4.5rem; }
  .whiteboard-card { inline-size: 10rem; }
  .keep-actions { flex-direction: column; align-items: stretch; }
}

/* ================================================================== *
 * B7 — the reading surface
 *
 * Scoped under `.surface[data-kind="book"]`. A reading surface has one job
 * the rest of the workbench does not: it has to be comfortable to read for a
 * long time. That means a measure around 62 characters, generous line height,
 * and a text size the reader controls on top of the s62 presentation
 * properties rather than instead of them.
 * ================================================================== */

.surface[data-kind="book"] .book-body {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
  gap: var(--space-5);
  flex: 1;
  min-height: 0;
}

.surface[data-kind="book"] .book-toc {
  align-self: start;
  position: sticky;
  top: 0;
  max-height: 100%;
  overflow-y: auto;
  padding-right: var(--space-2);
  border-right: var(--border-width) solid var(--divider);
}

.surface[data-kind="book"] .book-toc-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--muted);
}

.surface[data-kind="book"] .book-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.surface[data-kind="book"] .book-toc-item[data-level="2"] { padding-left: var(--space-3); }
.surface[data-kind="book"] .book-toc-item[data-level="3"] { padding-left: var(--space-5); }
.surface[data-kind="book"] .book-toc-item[data-level="4"],
.surface[data-kind="book"] .book-toc-item[data-level="5"],
.surface[data-kind="book"] .book-toc-item[data-level="6"] { padding-left: var(--space-6); }

.surface[data-kind="book"] .book-toc-item .btn {
  justify-content: flex-start;
  text-align: left;
}

.surface[data-kind="book"] .book-toc-item .btn[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.surface[data-kind="book"] .book-reading {
  min-width: 0;
  overflow-y: auto;
}

.surface[data-kind="book"] .book-page {
  max-width: 62ch;          /* the measure that makes long reading bearable */
  margin: 0 auto;
  font-family: var(--font-ui);
  line-height: var(--leading-body);
}

.surface[data-kind="book"] .book-page:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.surface[data-kind="book"] .book-heading {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
}

.surface[data-kind="book"] .book-para {
  margin: 0 0 var(--space-4);
  overflow-wrap: break-word;
}

.surface[data-kind="book"] .book-para-empty { color: var(--muted); }

.surface[data-kind="book"] .book-para.is-found {
  padding: var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  color: var(--info-ink);
}

.surface[data-kind="book"] .book-para:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* A highlight is real markup, not a colour laid over the text, so it survives
 * copy-and-paste and is announced to a screen reader. */
.surface[data-kind="book"] .book-mark {
  background: var(--warn-soft);
  color: var(--warn-ink);
  border-radius: var(--radius-sm);
  padding: 0 0.15em;
}

.surface[data-kind="book"] .book-mark:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Reader-controlled size. These multiply whatever the s62 density and control
 * size properties already set, rather than overriding them. */
.surface[data-kind="book"] .book-reading[data-reading-size="small"] .book-page { font-size: var(--text-sm); }
.surface[data-kind="book"] .book-reading[data-reading-size="medium"] .book-page { font-size: var(--text-md); }
.surface[data-kind="book"] .book-reading[data-reading-size="large"] .book-page { font-size: var(--text-lg); }
.surface[data-kind="book"] .book-reading[data-reading-size="large"] .book-page { line-height: var(--leading-body); }

.surface[data-kind="book"] .book-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap);
  align-items: center;
}

.surface[data-kind="book"] .book-status {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.surface[data-kind="book"] .book-selection {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: var(--row-gap);
  max-width: 62ch;
  margin: var(--space-4) auto 0;
  padding: var(--space-3);
  border: var(--border-width) solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
  box-shadow: var(--shadow-lift);
}

.surface[data-kind="book"] .book-selection[hidden] { display: none; }

.surface[data-kind="book"] .book-selection-quote {
  margin: 0;
  font-style: italic;
  color: var(--fg-strong);
  overflow-wrap: anywhere;
}

.surface[data-kind="book"] .book-notes-section {
  max-width: 62ch;
  margin: var(--space-6) auto 0;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--divider);
}

.surface[data-kind="book"] .book-notes-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--muted);
}

.surface[data-kind="book"] .book-note {
  padding: var(--space-3);
  border-left: var(--space-1) solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}

.surface[data-kind="book"] .book-note + .book-note { margin-top: var(--space-3); }

.surface[data-kind="book"] .book-note-quote {
  margin: 0 0 var(--space-2);
  font-style: italic;
  color: var(--muted);
}

.surface[data-kind="book"] .book-note-text { margin: 0; }

/* One column once the contents list would squeeze the measure — this is the
 * 320px case, and it is also what 200% text zoom produces on a laptop. */
@media (max-width: 44rem) {
  .surface[data-kind="book"] .book-body { grid-template-columns: minmax(0, 1fr); }
  .surface[data-kind="book"] .book-toc {
    position: static;
    max-height: 12rem;
    padding-right: 0;
    padding-bottom: var(--space-3);
    border-right: 0;
    border-bottom: var(--border-width) solid var(--divider);
  }
}