/* The Syncreticon · lib-reader.css
   ---------------------------------
   Reader chrome for the library: progress rail, part pager, reader controls
   (text size / candle theme / quiet mode), chapter end, teaser fade,
   library search box, and the print sheet. Loaded only by the knowledge
   templates that need it. */

/* ---------------------------------------------------------------- rail */
.lib-rail {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: 60; pointer-events: none;
}
.lib-rail-bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--syn-gold-low, var(--syn-gold-low)), var(--syn-gold-hi, var(--syn-gold-hi)));
  transition: width 120ms linear;
}

/* --------------------------------------------------------------- pager */
.lib-pager-mid { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; }
.lib-pager-pos {
  font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--syn-text-mute, var(--syn-border-hi)); line-height: var(--lh-dense);
}
.lib-part-badge {
  display: inline-block; margin-left: 0.6rem; padding: 0.1rem 0.55rem;
  border: 1px solid var(--syn-border-hi, var(--syn-border-hi)); border-radius: 999px;
  color: var(--syn-gold, var(--syn-gold)); letter-spacing: 0.12em;
}
.lib-signin-hint a { color: var(--syn-gold, var(--syn-gold)); border-bottom: 1px dotted var(--syn-gold-low, var(--syn-gold-low)); }

/* -------------------------------------------------------- voice banner */
.syn-voice-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem;
  margin: 0 0 1.4rem; padding: 0.6rem 0.9rem; border-radius: 10px;
  font-size: var(--t-sm); line-height: var(--lh-dense);
  border: 1px dashed rgba(var(--syn-gold-rgb), 0.45); background: rgba(var(--syn-gold-rgb), 0.05);
  color: var(--syn-text-dim, var(--syn-text-dim));
}
.syn-voice-banner b { color: var(--syn-gold, var(--syn-gold)); font-weight: 700; }
.syn-voice-banner a { color: var(--syn-gold, var(--syn-gold)); font-weight: 600; white-space: nowrap; }
.syn-voice-banner-change { opacity: 0.75; margin-left: auto; }
.syn-voice-banner[data-retell-state="preparing"] { border-style: dotted; }

/* ---------------------------------------------------------- return link */
.lib-return {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.5rem; z-index: 55;
  padding: 0.55rem 1rem; border-radius: 999px;
  background: var(--syn-surface-2, var(--syn-surface)); border: 1px solid var(--syn-gold-low, var(--syn-gold-low));
  color: var(--syn-gold-hi, var(--syn-gold-hi)); font-size: var(--t-sm); text-decoration: none;
  box-shadow: 0 6px 22px rgba(var(--syn-void-rgb), 0.45);
}
.lib-return:hover { border-color: var(--syn-gold-hi, var(--syn-gold-hi)); }
.lib-return-arrow { font-size: var(--t-md); }

/* ---------------------------------------------------------- chapter end */
.lib-chapter-end { margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--syn-border, var(--syn-border)); }
.lib-next-chapter {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1.1rem 1.3rem; border-radius: var(--syn-r-lg, 10px);
  border: 1px solid var(--syn-gold-low, var(--syn-gold-low));
  background: linear-gradient(160deg, rgba(var(--syn-gold-rgb), 0.08), rgba(var(--syn-gold-rgb), 0.02));
  color: var(--syn-text, var(--syn-text)); text-decoration: none;
}
.lib-next-chapter:hover { border-color: var(--syn-gold-hi, var(--syn-gold-hi)); }
.lib-next-chapter-label { font-size: var(--t-2xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--syn-text-mute, var(--syn-border-hi)); }
.lib-next-chapter-title { font-family: var(--syn-serif); font-size: var(--t-lg); line-height: var(--lh-tight); }
.lib-next-chapter-cta { font-size: var(--t-sm); color: var(--syn-gold, var(--syn-gold)); }
/* THE END OF A BOOK IS SAID, NOT LEFT BLANK.
   Grandt, at the foot of the last chapter: "if I am really and truly at the
   end of the book then it should say so in the navigation instead of hiding
   the fact that there is NO next". The pager used to drop an empty span into
   the next slot, so the reader met a blank third of the row and had to infer
   the ending from its absence. */
.lib-book-done {
  padding: 1.1rem 1.3rem;
  border-radius: var(--syn-r-lg, 10px);
  border: 1px dashed var(--syn-gold-low, var(--syn-gold-low));
  color: var(--syn-text-dim, var(--syn-text-dim));
}
.lib-book-done-line { margin: 0 0 0.7rem; }
.lib-book-done-ways {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  font-size: var(--t-sm);
}
.lib-book-done-ways a { color: var(--syn-gold, var(--syn-gold)); }

/* the reading position is metadata, not a destination: it gets its own row
   so the chapter titles either side are not squeezed into a narrow column */
.lib-pager-pos { grid-column: 1 / -1; text-align: center; margin-top: 0.9rem; }

/* an edge of the book: shown, but plainly not somewhere to click */
.syn-book-pager-edge {
  border-style: dashed !important;
  color: var(--syn-text-mute, var(--syn-border-hi));
  cursor: default;
}
.syn-book-pager-edge .syn-book-pager-title { font-style: italic; }
.lib-related-title {
  margin: 1.8rem 0 0.9rem; font-size: var(--t-xs); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--syn-gold, var(--syn-gold)); font-weight: 600;
}
.lib-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
.lib-related-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem;
  padding: 0.85rem 0.7rem; border-radius: 4px;
  background: linear-gradient(160deg, var(--syn-surface) 0%, var(--syn-bg) 100%);
  border: 1px solid rgba(var(--syn-gold-rgb), 0.15); color: var(--syn-text, var(--syn-text)); text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease;
}
.lib-related-card:hover { border-color: rgba(var(--syn-gold-rgb), 0.45); transform: translateY(-2px); }
.lib-related-sigil { font-size: var(--t-xl); color: var(--syn-gold); }
.lib-related-name { font-family: var(--syn-serif); font-size: var(--t-sm); line-height: var(--lh-tight); font-weight: 600; }
.lib-related-voice { font-size: var(--t-2xs); color: var(--syn-gold); font-style: italic; }

/* ------------------------------------------------------------ controls */
.lib-controls { position: fixed; right: 1rem; bottom: 1rem; z-index: 58; font-family: var(--syn-sans); }
.lib-controls-toggle {
  width: 2.7rem; height: 2.7rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--syn-gold-low, var(--syn-gold-low)); background: var(--syn-surface-2, var(--syn-surface));
  color: var(--syn-gold-hi, var(--syn-gold-hi)); font-family: var(--syn-serif); font-size: var(--t-md);
  box-shadow: 0 6px 22px rgba(var(--syn-void-rgb), 0.45);
}
.lib-controls-toggle:hover, .lib-controls-toggle[aria-expanded="true"] { border-color: var(--syn-gold-hi, var(--syn-gold-hi)); }
.lib-controls-panel {
  position: absolute; right: 0; bottom: 3.2rem; width: 17rem; max-width: calc(100vw - 2rem);
  padding: 0.9rem 1rem 0.7rem; border-radius: var(--syn-r-lg, 10px);
  background: var(--syn-surface-2, var(--syn-surface)); border: 1px solid var(--syn-border-hi, var(--syn-border-hi));
  box-shadow: 0 10px 30px rgba(var(--syn-void-rgb), 0.5); color: var(--syn-text, var(--syn-text));
}
.lib-controls-row { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; }
.lib-controls-label { flex: 0 0 3.2rem; font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--syn-text-mute, var(--syn-border-hi)); }
.lib-controls-panel button {
  flex: 1; padding: 0.35rem 0.5rem; border-radius: var(--syn-r, 6px); cursor: pointer;
  border: 1px solid var(--syn-border-hi, var(--syn-border-hi)); background: transparent;
  color: var(--syn-text-dim, var(--syn-text-dim)); font-size: var(--t-xs); font-family: inherit;
}
.lib-controls-panel button small { font-size: 0.6em; vertical-align: super; }
.lib-controls-panel button.is-on, .lib-controls-panel button[aria-pressed="true"] {
  border-color: var(--syn-gold, var(--syn-gold)); color: var(--syn-gold-hi, var(--syn-gold-hi)); background: rgba(var(--syn-gold-rgb), 0.08);
}
.lib-controls-foot { margin: 0.2rem 0 0; font-size: var(--t-2xs); color: var(--syn-text-mute, var(--syn-border-hi)); }

/* text size steps (class on <html>) */
html.lib-size-1 .syn-book-reader-body { font-size: var(--t-md); }
html.lib-size-2 .syn-book-reader-body { font-size: var(--t-md); }
html.lib-size-3 .syn-book-reader-body { font-size: var(--t-lg); line-height: var(--lh-prose); }

/* quiet mode: the site falls away, the page stays */
html.lib-quiet .syn-header, html.lib-quiet .syn-footer { display: none; }
html.lib-quiet .syn-main { padding-top: 1.5rem; }

/* candle theme: parchment ground, scoped to the reading column and the
   main area on chapter pages; the site header and footer keep their own
   colours because the variables are set on .syn-main, not on :root. */
html.lib-theme-candle .lib-chapter-page .syn-main {
  --lib-bg: #f4ead6; --lib-text: #2a2419; --lib-dim: #6b5f4a; --lib-mute: #8f8168;
  --lib-gold: #7a5a14; --lib-border: #d9cbb0; --lib-surface: #ebdfc6;
  background: var(--lib-bg); color: var(--lib-text);
}
html.lib-theme-candle .lib-chapter-page .syn-book-reader,
html.lib-theme-candle .lib-chapter-page .syn-book-reader-body,
html.lib-theme-candle .lib-chapter-page .syn-book-reader-body p,
html.lib-theme-candle .lib-chapter-page .syn-book-reader-body li,
html.lib-theme-candle .lib-chapter-page .syn-book-reader-body em,
html.lib-theme-candle .lib-chapter-page .syn-book-reader-head h1,
html.lib-theme-candle .lib-chapter-page .syn-book-reader-body h2,
html.lib-theme-candle .lib-chapter-page .syn-book-reader-body h3,
html.lib-theme-candle .lib-chapter-page .syn-book-reader-body blockquote { color: var(--lib-text); }
html.lib-theme-candle .lib-chapter-page .syn-book-reader-body strong,
html.lib-theme-candle .lib-chapter-page .syn-book-reader-body a,
html.lib-theme-candle .lib-chapter-page .syn-book-crumbs a,
html.lib-theme-candle .lib-chapter-page .syn-book-pager-toc,
html.lib-theme-candle .lib-chapter-page .syn-voice-banner a,
html.lib-theme-candle .lib-chapter-page .syn-voice-banner b,
html.lib-theme-candle .lib-chapter-page .lib-next-chapter-cta,
html.lib-theme-candle .lib-chapter-page .lib-related-title { color: var(--lib-gold); }
html.lib-theme-candle .lib-chapter-page .syn-book-reader-pos,
html.lib-theme-candle .lib-chapter-page .lib-pager-pos,
html.lib-theme-candle .lib-chapter-page .syn-book-pager-label,
html.lib-theme-candle .lib-chapter-page .syn-book-crumbs,
html.lib-theme-candle .lib-chapter-page .syn-reader-hint,
html.lib-theme-candle .lib-chapter-page .syn-voice-banner,
html.lib-theme-candle .lib-chapter-page .syn-reference-note,
html.lib-theme-candle .lib-chapter-page .lib-book-done { color: var(--lib-dim); }
html.lib-theme-candle .lib-chapter-page .syn-book-pager-prev,
html.lib-theme-candle .lib-chapter-page .syn-book-pager-next,
html.lib-theme-candle .lib-chapter-page .lib-next-chapter {
  border-color: var(--lib-border); color: var(--lib-text); background: var(--lib-surface);
}
html.lib-theme-candle .lib-chapter-page .syn-book-pager,
html.lib-theme-candle .lib-chapter-page .syn-book-pager--top,
html.lib-theme-candle .lib-chapter-page .syn-book-reader-head,
html.lib-theme-candle .lib-chapter-page .lib-chapter-end,
html.lib-theme-candle .lib-chapter-page .syn-book-reader-body hr { border-color: var(--lib-border); }
html.lib-theme-candle .lib-chapter-page .syn-voice-banner { background: rgba(var(--syn-gold-low-rgb), 0.06); border-color: rgba(var(--syn-gold-low-rgb), 0.35); }
html.lib-theme-candle .lib-chapter-page .lib-related-card { background: var(--lib-surface); border-color: var(--lib-border); color: var(--lib-text); }
html.lib-theme-candle .lib-chapter-page .lib-related-sigil { color: var(--lib-gold); }
html.lib-theme-candle .lib-chapter-page .syn-para-mark,
html.lib-theme-candle .lib-chapter-page .syn-para-ref { color: var(--lib-gold); }
html.lib-theme-candle .lib-chapter-page .syn-messages { color: var(--lib-text); }

/* ------------------------------------------------------------- teaser */
.lib-teaser-body { position: relative; max-height: 28rem; overflow: hidden; margin: 1.6rem 0 0; }
.lib-teaser-body .syn-book-reader-body { font-family: var(--syn-serif); font-size: var(--t-md); line-height: var(--lh-prose); }
.lib-teaser-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11rem;
  background: linear-gradient(180deg, rgba(var(--syn-bg-rgb), 0) 0%, var(--syn-bg, var(--syn-bg)) 92%);
  pointer-events: none;
}
.lib-teaser-gate { margin: 0.6rem 0 2rem; padding: 1rem 1.2rem; border: 1px solid var(--syn-gold-low, var(--syn-gold-low)); border-radius: var(--syn-r-lg, 10px); text-align: center; }
.lib-teaser-gate p { margin: 0 0 0.6rem; color: var(--syn-text-dim, var(--syn-text-dim)); }
.lib-teaser-gate p:last-child { margin: 0; }

/* -------------------------------------------------------------- search */
.lib-search-launch { display: flex; gap: 0.5rem; margin: 0 0 1.6rem; }
.lib-search-launch input[type="search"] {
  flex: 1; min-width: 0; padding: 0.6rem 0.9rem; border-radius: var(--syn-r, 6px);
  background: rgba(var(--syn-gold-rgb), 0.06); color: var(--syn-text, var(--syn-text));
  border: 1px solid rgba(var(--syn-gold-rgb), 0.35); font-family: var(--syn-serif); font-size: var(--t-md);
}
.lib-search-launch input[type="search"]:focus { outline: none; border-color: rgba(var(--syn-gold-rgb), 0.75); box-shadow: 0 0 0 3px rgba(var(--syn-gold-rgb), 0.15); }
.lib-search-launch button {
  padding: 0.6rem 1rem; border: 0; border-radius: var(--syn-r, 6px); cursor: pointer;
  background: var(--syn-gold); color: var(--syn-on-gold); font-weight: 600;
}
.lib-search-launch button:hover { background: var(--syn-gold-hi); }
.lib-search-book { margin: 0 0 2rem; }
.lib-search-book-title { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.8rem; font-size: var(--t-md); }
.lib-search-book-title a { color: var(--syn-text, var(--syn-text)); text-decoration: none; border-bottom: none; }
.lib-search-book-title a:hover { color: var(--syn-gold-hi, var(--syn-gold-hi)); }
.lib-search-book-sigil { color: var(--syn-gold); }
.lib-search-book-col { font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--syn-text-mute, var(--syn-border-hi)); }

/* ------------------------------------------------- book page progress */
.lib-progress { display: block; margin: 1rem 0 1.4rem; padding: 0.8rem 1rem; border: 1px solid var(--syn-border, var(--syn-border)); border-radius: var(--syn-r-lg, 10px); color: var(--syn-text, var(--syn-text)); text-decoration: none; }
.lib-progress:hover { border-color: var(--syn-gold-low, var(--syn-gold-low)); }
.lib-progress-line { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); }
.lib-progress-line b { color: var(--syn-gold-hi, var(--syn-gold-hi)); }
.lib-progress-cta { color: var(--syn-gold, var(--syn-gold)); font-size: var(--t-xs); white-space: nowrap; }
.lib-progress-track { height: 4px; margin-top: 0.55rem; background: var(--syn-border, var(--syn-border)); border-radius: 2px; overflow: hidden; }
.lib-progress-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--syn-gold-low, var(--syn-gold-low)), var(--syn-gold-hi, var(--syn-gold-hi))); }
.lib-toc-section { margin: 1.6rem 0 0.5rem; font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--syn-gold, var(--syn-gold)); font-weight: 600; }
.lib-toc-section:first-child { margin-top: 0; }
.lib-export-link { font-size: var(--t-xs); }

@media (max-width: 640px) {
  .lib-controls { right: 0.6rem; bottom: 0.6rem; }
  .lib-return { bottom: 4.2rem; }
  .lib-progress-line { flex-direction: column; gap: 0.2rem; }
}

/* --------------------------------------------------------------- print */
@media print {
  .syn-header, .syn-footer, .syn-book-pager, .syn-book-crumbs, .syn-reader-ui,
  .lib-controls, .lib-rail, .lib-return, .lib-chapter-end, .syn-reference-note,
  .syn-voice-banner, .syn-reader-hint, .syn-reader-help, .syn-para-actions,
  .syn-messages, .syn-skip { display: none !important; }
  html, body, .syn-main, .syn-book-reader { background: #fff !important; color: #000 !important; }
  .syn-book-reader { max-width: none; padding: 0; }
  .syn-book-reader-body, .syn-book-reader-body p, .syn-book-reader-body li,
  .syn-book-reader-body blockquote, .syn-book-reader-body strong, .syn-book-reader-body em,
  .syn-book-reader-head h1, .syn-book-reader-body h2, .syn-book-reader-body h3 {
    color: #000 !important; font-family: var(--syn-serif);
  }
  .syn-book-reader-body { font-size: 11pt; line-height: var(--lh-dense); }
  .syn-book-reader-body a { color: #000; text-decoration: none; border-bottom: none; }
  .syn-book-reader-body h1, .syn-book-reader-body h2 { page-break-before: always; break-before: page; }
  .syn-book-reader-head h1 { page-break-before: auto; break-before: auto; }
  .syn-book-reader-body p, .syn-book-reader-body li { orphans: 3; widows: 3; }
  .syn-book-reader-body h2, .syn-book-reader-body h3 { page-break-after: avoid; break-after: avoid; }
  .syn-book-reader::after {
    content: attr(data-url); display: block; margin-top: 2rem; padding-top: 0.5rem;
    border-top: 1px solid #000; font-size: 9pt; color: #000;
  }
  @page { margin: 2cm; }
}

.lib-part-jump{display:inline-flex;align-items:center;gap:.3rem;font-size: var(--t-sm);color:var(--syn-text-dim)}
.lib-part-jump select{background:var(--syn-surface);color:var(--syn-text);border:1px solid var(--syn-border);border-radius:6px;padding:.15rem .3rem;font:inherit}


/* An appendix belongs to something. Arriving at one from a link or a search,
   the reader had no way back to the chapter it appends. */
.lib-appendix-of {
  margin: 0 0 1.6rem;
  padding: 0.55rem 0.9rem;
  border-left: 2px solid var(--syn-gold-low, var(--syn-gold-low));
  font-size: var(--t-sm);
  color: var(--syn-text-dim, var(--syn-text-dim));
}
.lib-appendix-of a { color: var(--syn-gold, var(--syn-gold)); }

/* ------------------------------------------------ pager on a phone
   Above the chapter the pager is a way out, not a destination: one slim row,
   no titles. Below it, the next chapter is the choice worth naming — one
   line, the rest as small links. Titles stay for screen readers and in the
   link's tooltip. */
.syn-book-pager-toc-short { display: none; }
@media (max-width: 640px) {
  .lib-chapter-page .syn-book-pager-toc-long { display: none; }
  .lib-chapter-page .syn-book-pager-toc-short { display: inline; }

  .lib-chapter-page .syn-book-pager--top {
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    margin: 0.4rem 0 1rem;
    padding-bottom: 0.6rem;
  }
  .lib-chapter-page .syn-book-pager--top .syn-book-pager-prev,
  .lib-chapter-page .syn-book-pager--top .syn-book-pager-next {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 0.7rem;
    border-color: transparent;
  }
  .lib-chapter-page .syn-book-pager--top .syn-book-pager-next { justify-content: flex-end; }
  .lib-chapter-page .syn-book-pager--top .syn-book-pager-prev .syn-book-pager-arrow { order: -1; }
  .lib-chapter-page .syn-book-pager--top .syn-book-pager-edge { visibility: hidden; }
  .lib-chapter-page .syn-book-pager--top .syn-book-pager-toc { padding: 0.5rem 0.8rem; }

  .lib-chapter-page .syn-book-pager:not(.syn-book-pager--top) {
    grid-template-columns: 1fr auto 1fr;
    gap: 0.4rem 0.5rem;
    margin-top: 2.5rem;
    padding-top: 1rem;
  }
  .lib-chapter-page .syn-book-pager:not(.syn-book-pager--top) .syn-book-pager-next {
    grid-column: 1 / -1; grid-row: 1;
    flex-direction: row; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    min-height: 44px;
    text-align: left;
  }
  .lib-chapter-page .syn-book-pager:not(.syn-book-pager--top) .syn-book-pager-next .syn-book-pager-title {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--t-sm);
  }
  .lib-chapter-page .syn-book-pager:not(.syn-book-pager--top) .syn-book-pager-prev {
    grid-row: 2; flex-direction: row; align-items: center; gap: 0.35rem;
    min-height: 44px; padding: 0 0.3rem; border-color: transparent;
  }
  .lib-chapter-page .syn-book-pager:not(.syn-book-pager--top) .lib-pager-mid { grid-row: 2; grid-column: 3; justify-self: end; }
  .lib-chapter-page .syn-book-pager:not(.syn-book-pager--top) .syn-book-pager-toc { border-color: transparent; padding: 0.5rem 0.3rem; }
  .lib-chapter-page .syn-book-pager:not(.syn-book-pager--top) .syn-book-pager-edge.syn-book-pager-prev { visibility: hidden; }
  .lib-chapter-page .syn-book-pager:not(.syn-book-pager--top) .lib-pager-pos { grid-row: 3; margin-top: 0.2rem; }

  /* the titles: hidden to the eye only */
  .lib-chapter-page .syn-book-pager--top .syn-book-pager-title,
  .lib-chapter-page .syn-book-pager:not(.syn-book-pager--top) .syn-book-pager-prev .syn-book-pager-title {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* a book's own title page, set as the printer set it: centred, lines kept */
.syn-book-reader-body .syn-title-page {
  text-align: center;
  line-height: var(--lh-prose);
  margin: 1rem 0 2.5rem;
  font-family: var(--syn-serif);
}
.syn-book-reader-body .syn-title-page strong { letter-spacing: 0.08em; }

/* an author's marginal summary, printed beside the paragraph it sums up; set
   just above it, where a narrow screen has room for it */
.syn-book-reader-body .syn-sidenote {
  font-size: var(--t-sm);
  font-style: italic;
  line-height: var(--lh-tight);
  color: var(--syn-text-dim);
  margin: 1.2rem 0 0.35rem;
}
/* a horoscope drawn the South Indian way: the twelve signs round a square,
   Meena at the top left, the middle left open for the chart's name */
.syn-book-reader-body table.syn-rasi-chart {
  table-layout: fixed;
  line-height: var(--lh-tight);
}
.syn-book-reader-body table.syn-rasi-chart tbody tr:nth-child(n) td {
  width: 4.75em;
  height: 4.25em;
  padding: 0.3em 0.2em;
  text-align: center;
  vertical-align: middle;
  border: 1px solid color-mix(in oklab, var(--syn-gold) 45%, transparent);
  background: none;
}
.syn-book-reader-body table.syn-rasi-chart td.syn-rasi-centre {
  letter-spacing: 0.08em;
  color: var(--syn-text-dim);
}
/* a table the print sets without a head: markdown has to write a head row, so
   it is written empty, and an empty head is no band at all */
.syn-book-reader-body table thead:not(:has(th:not(:empty))) {
  display: none;
}
/* a poem's line number, which the print sets in the margin and its notes
   are keyed to: at the end of the line, out of the way of the verse */
.syn-book-reader-body .syn-line-no {
  float: right;
  padding-left: 1em;
  font-size: var(--t-2xs);
  color: var(--syn-text-dim);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
/* an epigraph, or verse quoted apart, set in from both margins as the print sets it */
.syn-book-reader-body p.syn-epigraph {
  margin-left: 1.5em;
  margin-right: 1.5em;
}
/* a paragraph the print hangs: the first line out, the rest in (a play's scene, its spectacle) */
.syn-book-reader-body p.syn-hang {
  padding-left: 1.5em;
  text-indent: -1.5em;
}
/* a stage direction the print sets on its own line, to the right of the measure:
   "[Exit. Blare of Trumpets." */
/* verse, a play's speeches, and anything set line by line: never justified, never hyphenated; a line too long for a phone wraps
   ragged, and a word broken at its end is never mistaken for the poet's own hyphen */
.syn-book-reader-body p:has(br),
.syn-book-reader-body p.syn-speech {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.syn-book-reader-body p.syn-stage {
  text-align: right;
  margin-left: 3em;
}
/* the author and source set under a verse quotation */
.syn-book-reader-body .syn-verse-cite {
  text-align: right;
  font-size: var(--t-sm);
  color: var(--syn-text-dim);
  margin: -0.4rem 0 1.2rem;
}

/* a sign no typeface has, cut from the printed page: its ink is the mask, so
   it is drawn in the text's own colour in every room, light or dark */
.syn-book-reader-body .syn-glyph {
  --glyph: none;
  display: inline-block;
  height: 1.3em;
  vertical-align: -0.3em;
  background-color: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}
/* lines of signs the print sets as a block of their own (a hieroglyphic text
   quoted whole): the same cut ink, its width the print's, never wider than
   the column, its height kept to the width */
.syn-book-reader-body .syn-glyph.syn-glyph-block {
  display: inline-block;
  height: auto;
  max-width: 100%;
  margin: 0.3em 0;
  vertical-align: text-bottom;
}
/* a line of signs inside a paragraph keeps a line of its own, as the print
   sets it: the words round it are not stretched to fill the line it would
   not fit */
.syn-book-reader-body .syn-glyph.syn-glyph-row {
  display: block;
}

/* words the print sets one above the other in braces, either to be read
   ("the {Vernal / Autumnal} Equinox"): stacked in the line, between curved rules */
.syn-book-reader-body .syn-alt {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  text-align: center;
  line-height: 1.15;
  padding: 0 0.45em;
  margin: 0 0.1em;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  border-radius: 0.6em / 1.2em;
}

/* a few figures the print rules off in a box beside a line of a diary, and
   the words set against them: part of the diary's text, so it keeps to the
   text column and has no table furniture */
.syn-book-reader-body .syn-table-scroll:has(> table.syn-diary-grid) {
  width: auto;
  margin: 0.2em 0 0.8em;
  transform: none;
}
.syn-book-reader-body table.syn-diary-grid {
  width: auto;
  border-collapse: collapse;
  margin: 0;
  background: none;
  font-size: inherit;
}
.syn-book-reader-body table.syn-diary-grid tbody tr:nth-child(n) td {
  border: none;
  background: none;
  padding: 0 0.9em 0 0;
  vertical-align: top;
}
.syn-book-reader-body table.syn-diary-grid tbody tr:nth-child(n) td.syn-ruled {
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  padding: 0 0.3em;
  letter-spacing: 0.08em;
}
.syn-book-reader-body table.syn-diary-grid tbody tr:nth-child(n) td.syn-ruled + td {
  padding-left: 2em;
}
.syn-book-reader-body table.syn-diary-grid tbody tr:first-child td.syn-ruled {
  border-top: 1px solid currentColor;
}
.syn-book-reader-body table.syn-diary-grid tbody tr:last-child td.syn-ruled {
  border-bottom: 1px solid currentColor;
}

/* a list the print sets in columns, a letter and the names against it, with a
   rule before the last column: a list in the text, not a plate */
.syn-book-reader-body .syn-table-scroll:has(> table.syn-genii) {
  width: auto;
  margin: 0.4em 0 1.2em;
  transform: none;
}
.syn-book-reader-body table.syn-genii {
  margin: 0;
  background: none;
  font-size: inherit;
}
.syn-book-reader-body table.syn-genii tbody tr:nth-child(n) td {
  border: none;
  background: none;
  padding: 0.1em 0.8em 0.1em 0;
  vertical-align: baseline;
}
.syn-book-reader-body table.syn-genii tbody tr:nth-child(n) td:last-child {
  border-left: 1px solid currentColor;
  padding-left: 0.8em;
}

/* a quotation set line by line, as the print sets it: the signs of each word
   over its transliteration, the columns wrapping on a narrow screen; the
   translation follows as its own paragraph */
.syn-book-reader-body .syn-interlinear {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 0.9em;
  row-gap: 0.5em;
}
.syn-book-reader-body .syn-il {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.syn-book-reader-body .syn-il .syn-glyph { vertical-align: baseline; }
.syn-book-reader-body .syn-il-t { font-style: italic; }
.syn-book-reader-body .syn-il-n { align-self: flex-start; }

/* a name a later hand supplied where the printed text has none: set smaller,
   in the names' gold, so it reads as beside the text rather than in it */
.syn-book-reader-body .syn-later {
  font-size: 0.8em;
  letter-spacing: 0.04em;
  color: var(--syn-gold-hi);
  cursor: help;
}

/* A heading's italics are part of the heading: they take its colour. The body
   rule (em = text colour) was reaching into headings, so every rubric the
   printer set in italic — whole headings, in the old grimoires — lost the
   heading colour and read as a grey line of prose. */
.syn-book-reader-body h2 em, .syn-book-reader-body h2 i,
.syn-book-reader-body h3 em, .syn-book-reader-body h3 i { color: inherit; }
/* and a heading stands clear of the paragraph it names */
.syn-book-reader-body h2 { margin-bottom: 0.9rem; }

/* a table the print rules all round, each cell in its own box: the rules as
   the print draws them, without the plate and banding of a table of data */
.syn-book-reader-body .syn-table-scroll:has(> table.syn-ruled-grid) {
  width: auto;
  margin: 0.6em 0 1.2em;
  transform: none;
}
.syn-book-reader-body table.syn-ruled-grid {
  background: none;
  font-size: inherit;
}
.syn-book-reader-body table.syn-ruled-grid tbody tr:nth-child(n) td {
  border: 1px solid color-mix(in oklab, currentColor 40%, transparent);
  background: none;
  padding: 0.2em 0.6em;
  vertical-align: top;
}
.syn-book-reader-body table.syn-ruled-grid span[lang="he"] {
  font-size: 1.3em;
  line-height: 1;
}
/* a table of figures: each figure stands right, so units fall under units as
   the print sets them, and the heads centre over their columns */
.syn-book-reader-body table.syn-figures {
  font-variant-numeric: tabular-nums;
}
.syn-book-reader-body table.syn-figures thead th {
  text-align: center;
  vertical-align: bottom;
}
.syn-book-reader-body table.syn-figures tbody tr:nth-child(n) td {
  text-align: right;
  white-space: nowrap;
  padding: 4px 10px;
}
.syn-book-reader-body table.syn-figures tbody tr:nth-child(n) td.syn-figures-name {
  text-align: left;
}
/* a sum worked in a note, ruled as the print rules it: the working on the
   left, the figures in their columns, a rule above and below the quotient and
   a double rule under each answer; no plate and no banding */
.syn-book-reader-body .syn-table-scroll:has(> table.syn-sum) {
  width: 100%;
  margin: 0.4em 0 0.8em;
  transform: none;
}
.syn-book-reader-body table.syn-sum {
  width: 100%;
  background: none;
  margin: 0;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
}
.syn-book-reader-body table.syn-sum tbody tr:nth-child(n) td {
  background: none;
  border: 0;
  padding: 0.15em 0 0.15em 0.8em;
  vertical-align: bottom;
  text-align: right;
  white-space: nowrap;
}
.syn-book-reader-body table.syn-sum tbody tr:nth-child(n) td:first-child {
  text-align: left;
  white-space: normal;
  min-width: 9em;
  padding-left: 1.5em;
  text-indent: -1.5em;
}
@media (max-width: 699px) {
  .syn-book-reader-body table.syn-sum tbody tr:nth-child(n) td:not(:first-child) {
    padding-left: 0.4em;
  }
}
.syn-book-reader-body table.syn-sum tbody tr.syn-sum-quotient td:not(:first-child) {
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.syn-book-reader-body table.syn-sum tbody tr.syn-sum-answer td:not(:first-child) {
  border-bottom: 3px double currentColor;
}
/* passages set side by side, two columns of prose: on a phone a long word
   breaks rather than pushing the second column past the edge */
@media (max-width: 699px) {
  .syn-book-reader-body table.syn-parallel td {
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}
/* a name in the first column is one name, not broken over two lines, where
   the measure has room for it; a phone gives the room to the longer column */
@media (min-width: 700px) {
  .syn-book-reader-body table.syn-qbl-sephiroth tbody tr:nth-child(n) td:first-child,
  .syn-book-reader-body table.syn-qbl-letters tbody tr:nth-child(n) td:nth-child(2) {
    white-space: nowrap;
  }
}
/* a cipher's two lines of letters, one letter to a box, each over the one it
   stands for */
.syn-book-reader-body table.syn-qbl-temurah tbody tr:nth-child(n) td {
  text-align: center;
  padding: 0.15em 0.45em;
}

/* numbers, each with the words that add up to it: the meaning at the left,
   the word in English letters at the right, the number standing over them */
.syn-book-reader-body .syn-table-scroll:has(> table.syn-qbl-numbers) {
  width: auto;
  margin: 0.6em 0 1.4em;
  transform: none;
}
.syn-book-reader-body table.syn-qbl-numbers {
  width: 100%;
  background: none;
  font-size: inherit;
}
.syn-book-reader-body table.syn-qbl-numbers tbody tr:nth-child(n) td {
  border: none;
  background: none;
  padding: 0.05em 0;
  vertical-align: baseline;
}
.syn-book-reader-body table.syn-qbl-numbers tbody tr:nth-child(n) td:last-child {
  text-align: right;
  padding-left: 1.5em;
  /* room for the spacing a name of power carries after its last letter */
  padding-right: 0.2em;
}
.syn-book-reader-body table.syn-qbl-numbers tbody tr.syn-qbl-num td {
  padding-top: 0.9em;
  font-variant-numeric: lining-nums;
  color: var(--syn-gold-hi);
}

/* a list the print sets in columns without rules: a letter or sign and its words */
.syn-book-reader-body .syn-table-scroll:has(> table.syn-col-list) {
  width: auto;
  margin: 0.5em 0 1.1em;
  transform: none;
}
.syn-book-reader-body table.syn-col-list {
  background: none;
  font-size: inherit;
}
.syn-book-reader-body table.syn-col-list tbody tr:nth-child(n) td {
  border: none;
  background: none;
  padding: 0.05em 1.4em 0.05em 0;
  vertical-align: baseline;
}

/* the Book of Fate's folios: each Answer in its ruled box beside its Sign, the five rows of one star or two that
   the folio sets at its left */
.syn-book-reader-body .syn-table-scroll:has(> table.syn-bof-folio) {
  width: auto;
  margin: 0.6em 0 1.2em;
  transform: none;
}
.syn-book-reader-body table.syn-bof-folio {
  background: none;
  font-size: inherit;
  border-collapse: collapse;
}
.syn-book-reader-body table.syn-bof-folio tbody tr:nth-child(n) td {
  border: 1px solid color-mix(in oklab, currentColor 40%, transparent);
  background: none;
  padding: 0.45em 0.8em;
  vertical-align: middle;
}
.syn-book-reader-body table.syn-bof-folio tbody tr:nth-child(n) td.syn-bof-stars {
  text-align: right;
  white-space: nowrap;
  font-size: 0.75em;
  line-height: 1.1;
  letter-spacing: 0.25em;
  padding: 0.5em 0.6em;
}

/* a figure the text draws in words and signs: the trigrams on the Tree of Life, each in its place */
.syn-book-reader-body .syn-table-scroll:has(> table.syn-trigram-tree) {
  width: auto;
  margin: 0.8em 0 1.4em;
  transform: none;
}
.syn-book-reader-body table.syn-trigram-tree {
  background: none;
  font-size: inherit;
  margin: 0 auto;
  line-height: var(--lh-tight);
}
.syn-book-reader-body table.syn-trigram-tree tbody tr:nth-child(n) td {
  border: none;
  background: none;
  padding: 0.35em 1em;
  text-align: center;
  vertical-align: top;
}
.syn-book-reader-body .syn-trigram {
  display: inline-block;
  font-size: 1.7em;
  line-height: 1.15;
}

/* squares of letters, as the print sets them side by side: each box ruled, a
   void left unruled where the square has none, the square's number over it */
.syn-book-reader-body .syn-squares {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.2em 1.8em;
  margin: 1em 0 1.5em;
}
.syn-book-reader-body .syn-squares > .syn-table-scroll {
  width: auto;
  margin: 0;
  transform: none;
}
.syn-book-reader-body table.syn-letter-square {
  background: none;
  font-size: inherit;
  border-collapse: collapse;
  width: auto;
}
.syn-book-reader-body table.syn-letter-square caption {
  caption-side: top;
  text-align: center;
  padding-bottom: 0.3em;
  font-variant-numeric: lining-nums;
}
.syn-book-reader-body table.syn-letter-square tbody tr:nth-child(n) td {
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 0.15em;
  text-align: center;
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}
.syn-book-reader-body table.syn-letter-square tbody tr:nth-child(n) td.syn-void {
  border: none;
}
.syn-book-reader-body table.syn-letter-square.syn-framed {
  border: 1px solid color-mix(in oklab, currentColor 40%, transparent);
}

/* a square of numbers, one to a box */
.syn-book-reader-body table.syn-magic-square tbody tr:nth-child(n) td {
  text-align: center;
  padding: 0.15em 0.35em;
  font-variant-numeric: tabular-nums lining-nums;
}