/* The one-page reader (ReaderLayout): the Book layout. Only reader pages load this file, after global.css and
   paper.css, which hold the palettes, so the rules below follow Paper and Night. */

/* Instant jumps, the room kept clear of the sticky bar, and scroll margins: paper.css, shared with every page. */
html { background: var(--bg); }

body.reader {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.reader::before { content: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* a chapter focused after a Contents jump is a reading position, not a control */
[tabindex="-1"]:focus { outline: none; }

/* ── Top bar ───────────────────────────────────── */

.reader-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--bar-h);
  padding: 0 var(--gutter) 2px;
  background: var(--bg);
  font: 500 13px/1 var(--serif);
  color: var(--muted);
  white-space: nowrap;
}

/* only the edition's name gives way on a narrow screen, so the home link's focus ring is never clipped */
.reader-bar-title {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  min-width: 0;
  margin: 0;
}

.reader-bar-title a {
  flex: none;
  margin: 0 -6px;
  padding: 12px 6px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.reader-bar-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the bar's controls fill its height, so their rings are drawn inside them */
.reader-bar :focus-visible { outline-offset: -3px; }

.reader-contents-open {
  align-self: stretch;
  margin: 0 -10px 0 0;
  padding: 0 10px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

.reader-contents-open:hover { text-decoration-color: var(--accent); }

.reader-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rule);
}

#reader-progress {
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ── Column, title block ───────────────────────── */

.reader-main {
  width: min(100% - 2 * var(--gutter), var(--col));
  margin-inline: auto;
}

.reader-title {
  padding: 44px 0 30px;
  text-align: center;
}

.reader-kicker {
  margin: 0 0 6px;
  font: italic 400 20px/1.2 var(--serif);
  color: var(--accent);
}

.reader-title h1 {
  margin: 0 0 14px;
  font: 500 34px/1.06 var(--serif);
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* centred lines break evenly, without a word left alone on the last. The title keeps each hyphenated word whole
   (TitleBlock wraps it), or balancing would break it at the hyphen ("Load-/Bearing"). */
.reader-title h1,
.reader-standfirst,
.chapter-opener h2 { text-wrap: balance; }

.reader-title h1 .nowrap { white-space: nowrap; }

.reader-standfirst {
  margin: 0 0 18px;
  font: italic 400 19px/1.35 var(--serif);
  color: var(--ink2);
}

.reader-byline {
  margin: 0;
  font: 400 14px/1.5 var(--serif);
  color: var(--muted);
}

.reader-byline span { display: block; }

.reader-byline a,
.reader-end a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* ── Chapters ──────────────────────────────────── */

.chapter { padding: 26px 0 8px; }
.chapter + .chapter { padding-top: 40px; }

.chapter-opener {
  margin: 0 0 22px;
  padding-top: 10px;
  text-align: center;
}

.chapter-opener .numeral {
  margin: 0 0 4px;
  font: italic 400 20px/1 var(--serif);
  color: var(--accent);
}

.chapter-opener h2 {
  margin: 0;
  font: 500 26px/1.12 var(--serif);
  letter-spacing: -0.005em;
  color: var(--ink);
}

.chapter-body { color: var(--ink2); }
.chapter-body > p:first-child { color: var(--ink); }
.chapter-body p { margin: 0 0 1em; }

/* The page opens once: a drop cap in the accent and a small-caps first line, on the first chapter's first
   paragraph, and only when the chapter opens with one. */
.chapter:first-of-type .chapter-body > p:first-child { display: flow-root; }

.chapter:first-of-type .chapter-body > p:first-child::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.chapter:first-of-type .chapter-body > p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.08em 0 0;
  font: 600 3.3em/0.82 var(--serif);
  letter-spacing: 0;
  color: var(--accent);
}

.chapter-body :is(h3, h4, h5, h6) {
  margin: 1.8em 0 0.6em;
  font: 600 1.05em/1.3 var(--serif);
  letter-spacing: 0;
  color: var(--ink);
}

.chapter-body a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-underline-offset: 0.18em;
}

.chapter-body a:hover { color: var(--accent); }
.chapter-body strong { color: var(--ink); font-weight: 600; }

.chapter-body blockquote {
  margin: 1.4em 0;
  padding: 14px 16px;
  border-left: 2px solid var(--accent);
  background: var(--well);
  font-size: 0.93em;
  font-style: normal;
  line-height: 1.5;
  color: var(--ink2);
}

.chapter-body blockquote > :last-child { margin-bottom: 0; }

.chapter-body :is(ul, ol) {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.chapter-body li { margin-bottom: 0.35em; }
.chapter-body li > p:last-child { margin-bottom: 0; }

.chapter-body hr {
  width: 30%;
  margin: 2em auto;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* figures stay within the column; KaTeX sizes its own SVGs (root signs, stretchy delimiters) */
.chapter-body :is(figure, img, video, svg:not(.katex svg)) {
  max-width: 100%;
  height: auto;
}

.chapter-body figure { margin: 1.6em 0; }

.chapter-body figcaption {
  margin-top: 8px;
  font: 400 15px/1.45 var(--serif);
  color: var(--muted);
}

.chapter-body code { font-size: 0.82em; }

.chapter-body pre {
  border-color: var(--rule);
  background: var(--well);
  color: var(--ink2);
}

/* A wide table scrolls inside its wrapper (ReaderLayout adds it), never the page. The wrapper reaches 6px past the
   column on each side, so a focus ring inside it is drawn whole. Like a display formula's box, it is positioned:
   KaTeX's hidden MathML is absolutely placed, and would otherwise widen the page from inside the box. */
.table-scroll,
.chapter-body .katex-display { position: relative; }

.table-scroll {
  margin: 1.5em -6px;
  padding: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Each unbreakable piece of an inline formula sits in a box (ReaderLayout adds it), so a piece wider than the column
   scrolls inside it, never the page; the formula still breaks between pieces as before. A flex box takes its
   baseline from the formula, where a scrolling inline-block would sit on its bottom edge. The padding, taken back
   by the margin, keeps clear of the box's clipping edge both the ink an italic letter hangs past its piece (the
   tail of a p) and the 2px cell KaTeX hangs past a subscript, so a piece that fits never scrolls. */
.math-box {
  display: inline-flex;
  box-sizing: content-box;
  max-width: 100%;
  padding: 0.2em;
  margin: -0.2em;
  overflow-x: auto;
  overflow-y: hidden;
}

.table-scroll table {
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.82em;
  line-height: 1.45;
}

.chapter-body :is(th, td) {
  padding: 0.45em 0.7em;
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.chapter-body th {
  background: var(--well);
  font-weight: 600;
  color: var(--ink);
}

.chapter-body :is(th, td) > p:first-child { margin-top: 0; }
.chapter-body :is(th, td) > p:last-child { margin-bottom: 0; }

/* ── End block ─────────────────────────────────── */

.reader-end {
  margin-top: 10px;
  padding: 26px 0 calc(48px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  font: 400 15px/1.5 var(--serif);
  color: var(--muted);
}

.reader-end h2 {
  margin: 0 0 8px;
  font: 600 17px/1.3 var(--serif);
  letter-spacing: 0;
  color: var(--ink);
}

.reader-end p { margin: 0 0 12px; }
.reader-end .reader-next { margin-bottom: 24px; color: var(--ink); }

.reader-citation code {
  display: block;
  padding: 10px 12px;
  background: var(--well);
  font: 400 12.5px/1.5 var(--font-mono);
  color: var(--ink2);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ── Contents sheet ────────────────────────────── */

.reader-contents {
  width: 100%;
  max-width: none;
  max-height: 85dvh;
  margin: auto 0 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior: contain;
}

.reader-contents::backdrop { background: var(--scrim); }

.contents-sheet { padding: 6px var(--gutter) calc(24px + env(safe-area-inset-bottom)); }

.contents-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}

.contents-head h2 {
  margin: 0;
  font: italic 400 20px/1.2 var(--serif);
  letter-spacing: 0;
  color: var(--accent);
}

.contents-head form { margin: 0; }

.contents-close {
  min-height: 44px;
  margin-right: -10px;
  padding: 0 10px;
  border: 0;
  background: none;
  font: 500 14px/1 var(--serif);
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

/* the space above a group is its own, so the sheet opens at this page's group with that space below the head */
.contents-group { padding-top: 18px; }

.contents-group-label {
  margin: 0 0 2px;
  font: 400 14px/1.4 var(--serif);
  color: var(--muted);
}

.contents-group-label a { color: inherit; text-decoration: none; }
.contents-group-label a:hover,
.contents-group-label a[aria-current="page"] { color: var(--ink); }

.contents-group ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contents-group li a {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  min-height: 44px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font: 400 17px/1.35 var(--serif);
  color: var(--ink);
  text-decoration: none;
}

.contents-group li a:hover { color: var(--accent); }

.contents-group .numeral {
  flex: none;
  min-width: 2.2em;
  font-style: italic;
  color: var(--accent);
}

/* ── Rail (desktop) ────────────────────────────── */

#rail { display: none; }

/* ── Desktop ───────────────────────────────────── */

@media (min-width: 720px) {
  body.reader { font-size: 21px; }
  .reader-bar { padding-inline: 28px; font-size: 14px; }
  .reader-title { padding-top: 70px; }
  .reader-title h1 { font-size: 52px; }
  .reader-kicker { font-size: 22px; }
  .reader-standfirst { font-size: 22px; }
  .chapter + .chapter { padding-top: 56px; }
  .chapter-opener .numeral { font-size: 22px; }
  .chapter-opener h2 { font-size: 34px; }

  .reader-contents {
    width: min(560px, 100% - 48px);
    max-height: min(80dvh, 760px);
    margin: auto;
    border-bottom: 1px solid var(--rule);
    border-radius: 12px;
  }
  .contents-sheet { padding-inline: 28px; }
}

@media (min-width: 1100px) {
  #rail {
    position: fixed;
    top: calc(var(--bar-h) + 80px);
    bottom: 60px;
    left: 34px;
    z-index: 5;
    display: block;
    width: 150px;
  }

  #rail::before,
  .rail-fill {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6px;
    width: 1px;
    background: var(--rule);
  }

  .rail-fill {
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: 50% 0;
  }

  #rail ol {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #rail li { flex: 1 1 0; min-height: 0; }

  /* each dot is centred on its k/n mark */
  #rail a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transform: translateY(-50%);
    font: italic 400 13px/1 var(--serif);
    color: var(--muted);
    text-decoration: none;
  }

  #rail a::before {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: var(--bg);
  }

  #rail a:hover,
  #rail a[aria-current="true"] { color: var(--ink); }

  #rail a[aria-current="true"]::before {
    border-color: var(--accent);
    background: var(--accent);
  }
}

@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .rail-fill { transition: transform 0.2s ease-out; }
  #rail a::before { transition: background-color 0.2s ease, border-color 0.2s ease; }
}