/* =============================================================================
   spine.css — the chapter spine (landing) and the links back to it (every
   figure, /explore section and /reference block). On cover.css tokens only:
   no colour value, no root-level property. Nothing here moves.

   Text pairs (WCAG 2.x, cover.css's own figures; re-checked by the SP-01
   contrast run): ink on ground 16.10 / paper 15.24; teal 8.94 / 8.46;
   muted 5.07 / 4.80. A row arrived at by its #ch- link turns paper, so every
   pair in it is read on paper too.
   ============================================================================= */

/* ---- the spine: the book's contents page, a line of flow per chapter ---- */
.spine { padding-top: var(--bk-space); }
.spine > h2 { margin: calc(var(--bk-space) * 2) 0 calc(var(--bk-space) / 2); }
.spine > h2:first-child { margin-top: calc(var(--bk-space) * 2); }
.spine .spine-intro { margin: 0 0 var(--bk-space); }

.spine-list { list-style: none; margin: 0 -0.75rem; padding: 0; border-top: 1px solid var(--bk-ring); }
.spine-row {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem;
  max-width: none; padding: var(--bk-space) 0.75rem;
  border-bottom: 1px solid var(--bk-ring);
  scroll-margin-top: var(--bk-space);
}
.spine-row:target { background: var(--bk-paper); }   /* arriving from a figure's "chapter 09" link */
.spine-num { color: var(--bk-muted); font-size: var(--bk-text-sm); padding-top: 0.3em; }
.spine-row h3 { margin: 0 0 0.5rem; }
.spine-epigraph { font-style: italic; color: var(--bk-ink); margin: 0 0 0.75rem; }
.spine-q, .spine-a { color: var(--bk-ink); margin: 0 0 0.5rem; }
.spine-lbl {
  font-family: var(--bk-hand); font-size: var(--bk-text-sm); color: var(--bk-muted);
  margin-right: 0.35rem;
}
.spine-lbl::after { content: " ·"; }

.spine-on { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.spine-on li { margin: 0; font-size: var(--bk-text-sm); line-height: 1.45; }
.spine-on a { display: inline-block; padding: 0.15rem 0; text-decoration: none; }
.spine-on a .spine-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.spine-kind { font-family: var(--bk-hand); color: var(--bk-muted); margin-right: 0.35rem; }
.spine-kind::after { content: " ·"; }

/* also on the site: a quiet list after Part Two, no chapter to go back to */
.spine > h2.spine-also-title { font-size: var(--bk-text-lg); }
.spine-also .spine-on { margin-top: 0; padding-top: 0.75rem; border-top: 1px solid var(--bk-ring); }

@media (max-width: 600px) {
  .spine-row { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 0.75rem; }
}

/* ---- the way back: a figure, a demo or a reference block names its chapter ---- */
.bk-chapter-link {
  font-family: var(--bk-hand); font-size: var(--bk-text-sm); letter-spacing: 0.01em;
  color: var(--bk-muted); margin: 0 0 0.5rem;
}
.bk-chapter-link a { color: var(--bk-teal); }
figure.bk-figure > .bk-chapter-link { margin: 0 0 var(--bk-space); }

/* /explore: the back-link, then the spine's name for the demo as its heading */
.concept-panel > .bk-chapter-link { margin: 0 0 0.25rem; }
.concept-panel > h2 { margin: 0 0 var(--bk-space); }
@media (max-width: 600px) { .concept-panel > h2 { font-size: var(--bk-text-lg); } }