/* ============================================================
   A Traveler's Companion to the Mazes of Menace
   Stylesheet for screen (responsive) and print (5″ handbook)
   ============================================================ */

/* --- Font faces -------------------------------------------- */
/* EB Garamond is loaded from Google Fonts via <link> in the HTML.
   The LaTeX/PDF build uses fontspec with local .ttf files directly,
   so no @font-face declarations are needed here. */

/* --- Fonts & Variables -------------------------------------- */

:root {
  --font-body: 'EB Garamond', 'Garamond', 'Georgia', serif;
  --font-mono: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", monospace;
  --color-text: #1a1a1a;
  --color-bg: #fffff8;
  --color-accent: #6b2c2c;
  --color-rule: #c4a882;
  --color-code-bg: #f5f0e8;
  --color-table-border: #c4a882;
  --color-table-stripe: #fcfaf5;
  --color-link: #4a2020;
  --color-blockquote-border: #c4a882;
  --color-blockquote-bg: #faf6ef;
}

/* --- Base --------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 38em;
  padding: 2em 1.5em 4em;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

/* --- Headings ----------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 2em;
  margin-bottom: 0.5em;
  color: var(--color-text);
}

/* Title */
h1 {
  font-size: 2.4em;
  font-weight: 700;
  text-align: center;
  margin-top: 1.5em;
  margin-bottom: 0.3em;
  letter-spacing: 0.01em;
}

/* Parts: "Part One: Before You Set Out" */
h2 {
  font-size: 1.6em;
  font-weight: 600;
  margin-top: 2.5em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid var(--color-rule);
}

/* Chapters: "Choosing Your Expedition" */
h3 {
  font-size: 1.3em;
  font-weight: 600;
  margin-top: 2em;
}

/* Sections within chapters */
h4 {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 1.5em;
}

h5 {
  font-size: 1em;
  font-weight: 600;
  font-style: italic;
}

.nobr {
  white-space: nowrap;
}

.download-box {
  border: 1px solid var(--color-rule, #d0d0d0);
  border-radius: 6px;
  padding: 0.7em 1em;
  margin: 1.5em 0;
  background: #fafaf6;
  font-size: 0.95em;
  line-height: 1.45;
}

@media print {
  .download-box {
    display: none;
  }
}

/* --- Paragraphs --------------------------------------------- */

p {
  margin: 0.8em 0;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* --- Links -------------------------------------------------- */

a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

a:hover {
  border-bottom-color: var(--color-link);
}

/* --- Blockquotes -------------------------------------------- */

blockquote {
  margin: 1.5em 0;
  padding: 1em 1.2em;
  background: var(--color-blockquote-bg);
  border-left: 3px solid var(--color-blockquote-border);
  border-radius: 0 4px 4px 0;
  font-style: italic;
}

blockquote p {
  margin: 0.5em 0;
}

blockquote p:first-child {
  margin-top: 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* Bold inside blockquote (attribution headers) stays upright */
blockquote strong {
  font-style: normal;
}

/* --- Horizontal Rules --------------------------------------- */

hr {
  border: none;
  border-top: 1px solid var(--color-rule);
  height: 0;
  margin: 2em auto;
  max-width: 8em;
  position: relative;
  overflow: visible;
}

/* Decorative diamond centered on the rule */
hr::after {
  content: '\25C6'; /* ◆ */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 2px));
  color: var(--color-rule);
  font-size: 1.2em;
  line-height: 1;
  background: var(--color-bg);
  padding: 0 0.3em;
}

/* --- Code --------------------------------------------------- */

code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--color-code-bg);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

pre {
  font-family: var(--font-mono);
  font-size: 0.78em;
  line-height: 1.125;
  background: var(--color-code-bg);
  padding: 1em 1.2em;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1.2em auto;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
}

/* --- Tables ------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 0.92em;
  line-height: 1.4;
}

thead {
  border-bottom: 2px solid var(--color-table-border);
}

th {
  font-weight: 600;
  text-align: left;
  padding: 0.5em 0.7em;
  white-space: nowrap;
}

td {
  padding: 0.4em 0.7em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: top;
}

/* Zebra striping */
tbody tr:nth-child(even) {
  background: var(--color-table-stripe);
}

/* Dense reference tables in the appendices (Weapons, Armor, Bestiary).
   Many narrow numeric columns + one long Notes column read better at
   a smaller type size with tighter padding, so the rows don't break
   on every adjective. The wrapping div is emitted by the build_*.py
   parsers; the rule cascades through inherited padding too. */
.dense-table table {
  font-size: 0.68em;
  line-height: 1.3;
}
.dense-table th,
.dense-table td {
  padding: 0.25em 0.45em;
}
.dense-table th {
  white-space: normal;
}

/* Useful Corpse Effects tables (Corpse | Effect): widen the Corpse
   column so entries like "Black pudding (glob)" and "Gelatinous cube †"
   stay on one line. Same proportion as the LaTeX colspec override. */
/* Intrinsic and Extrinsic Tables (4 cols: Property | What it does |
   Intrinsic sources | Extrinsic sources). Narrow the Property column
   by ~33% so the three description columns have more room. */
#intrinsic-and-extrinsic-tables table th:first-child,
#intrinsic-and-extrinsic-tables table td:first-child { width: 12%; }
#intrinsic-and-extrinsic-tables table th:nth-child(2),
#intrinsic-and-extrinsic-tables table td:nth-child(2) { width: 28%; }
#intrinsic-and-extrinsic-tables table th:nth-child(3),
#intrinsic-and-extrinsic-tables table td:nth-child(3) { width: 28%; }
#intrinsic-and-extrinsic-tables table th:nth-child(4),
#intrinsic-and-extrinsic-tables table td:nth-child(4) { width: 32%; }

/* The Wand Table (5 cols): halve the Wand column and give the
   Engrave-test result column the slack. */
#the-wand-table table th:nth-child(1),
#the-wand-table table td:nth-child(1) { width: 10%; }
#the-wand-table table th:nth-child(2),
#the-wand-table table td:nth-child(2) { width: 20%; }
#the-wand-table table th:nth-child(3),
#the-wand-table table td:nth-child(3) { width: 12%; }
#the-wand-table table th:nth-child(4),
#the-wand-table table td:nth-child(4) { width: 15%; }
#the-wand-table table th:nth-child(5),
#the-wand-table table td:nth-child(5) { width: 43%; }

#useful-corpse-effects table th:first-child,
#useful-corpse-effects table td:first-child {
  width: 40%;
}
#useful-corpse-effects table th:nth-child(2),
#useful-corpse-effects table td:nth-child(2) {
  width: 60%;
}

/* --- Lists -------------------------------------------------- */

ul, ol {
  margin: 0.8em 0;
  padding-left: 1.5em;
}

main ul {
  list-style: none;
}

main ul > li::before {
  content: '\25C6'; /* ◆ */
  font-size: 0.5em;
  position: relative;
  top: -0.1em;
  margin-left: -1.5em;
  margin-right: calc(1.5em - 0.5em);
  display: inline-block;
  width: 0.5em;
}

li {
  margin: 0.3em 0;
}

li > p {
  margin: 0.4em 0;
}

/* Nested lists */
li > ul, li > ol {
  margin: 0.2em 0;
}

/* Hide the decorative HR right after Part headings on screen —
   the h2 border-bottom already provides a visual break */
h2 + hr {
  display: none;
}

/* --- Strong / Emphasis -------------------------------------- */

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

/* --- Sections (pandoc --section-divs) ----------------------- */

/* The opening epigraph — first blockquote in the document */
section.level1 > blockquote:first-of-type {
  text-align: center;
  border-left: none;
  background: none;
  font-size: 1.1em;
  padding: 0.5em 2em;
  margin: 0 auto 1em;
  max-width: 28em;
}

/* --- Table of Contents -------------------------------------- */

section#table-of-contents h2 {
  border-bottom: none;
  text-align: center;
  font-size: 1.3em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1em;
}

section#table-of-contents p strong {
  /* Part headers in TOC */
  display: block;
  margin-top: 1.2em;
  margin-bottom: 0.2em;
  font-size: 0.95em;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

section#table-of-contents ol,
section#table-of-contents ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.5em;
}

section#table-of-contents li {
  margin: 0.15em 0;
  padding-left: 2.2em;
  text-indent: -2.2em;
  line-height: 1.5;
}

section#table-of-contents a {
  color: var(--color-text);
  border-bottom: none;
}

section#table-of-contents a:hover {
  color: var(--color-link);
  background: var(--color-code-bg);
  border-radius: 2px;
}

/* --- Colophon (final lines) --------------------------------- */

section.level1 > p:last-of-type,
section.level1 > p:nth-last-of-type(2) {
  text-align: center;
}

/* --- Page-fold corner badge -------------------------------- */
/*
   A triangle in the upper-left of the page that looks like the
   corner of physical parchment folded down toward the reader.
   Sits in normal flow at the top of <main>, so it scrolls off
   as the reader scrolls down. Anchored just outside the body's
   left padding, brushing up against the table-of-contents
   sidebar on wide screens.
*/
body { position: relative; }

.page-fold {
  position: absolute;
  top: -0.2em;
  /* Anchor to the viewport's left edge — touching the TOC sidebar
     when it's visible (≥1200px), or the browser edge otherwise.
     Body is `margin: 0 auto`, so to reach the viewport's left edge
     from inside body we walk back by half its margin: -50vw + 50%
     (where 50% is half of body's own width). */
  left: calc(50% - 50vw);
  width: 6em;
  height: 6em;
  display: block;
  text-decoration: none;
  /* The triangle of the fold (upper-left corner: top-left vertex,
     top-right, bottom-left). The diagonal hypotenuse is the
     fold-line. */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  /* Burgundy underside of the fold, matching the accent color
     used for highlights throughout the document. */
  background: var(--color-accent);
  box-shadow:
    /* fold's drop shadow onto the page below it */
    0.15em 0.15em 0.6em rgba(40, 25, 8, 0.35);
  transition: transform 0.2s ease, filter 0.2s ease;
  z-index: 5;
}

.page-fold-text {
  position: absolute;
  /* Center the text on the perpendicular bisector of the
     diagonal — i.e., the midpoint between the upper-left corner
     and the diagonal fold line. Then rotate -45deg so the text
     reads along the fold. The trailing translate pushes the
     text away from the diagonal toward the corner so it doesn't
     ride the fold edge. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg) translate(0, -1.7em);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.72em;
  line-height: 1.6;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.page-fold:hover {
  transform: scale(1.04) translate(-0.05em, -0.05em);
  filter: brightness(1.05);
}

@media screen and (min-width: 1200px) {
  /* When the TOC sidebar is visible (240px wide, fixed at the
     left edge), shift the fold rightward by that amount so its
     left edge brushes the TOC's right edge instead of hiding
     behind it. */
  .page-fold {
    left: calc(50% - 50vw + 240px);
  }
}

/* --- Responsive --------------------------------------------- */

@media screen and (max-width: 640px) {
  html {
    font-size: 16px;
  }

  body {
    padding: 1em 1em 3em;
  }

  h1 {
    font-size: 1.8em;
  }

  h2 {
    font-size: 1.4em;
  }

  pre {
    font-size: 0.72em;
    padding: 0.8em;
  }

  table {
    font-size: 0.85em;
  }

  th, td {
    padding: 0.3em 0.4em;
  }

  blockquote {
    padding: 0.7em 0.8em;
    margin-left: 0;
    margin-right: 0;
  }
}

@media screen and (max-width: 420px) {
  html {
    font-size: 15px;
  }

  h1 {
    font-size: 1.6em;
  }

  pre {
    font-size: 0.65em;
    padding: 0.5em 0.4em;
    border-radius: 0;
    margin-left: -1em;
    margin-right: -1em;
  }

  table {
    font-size: 0.78em;
    display: block;
    overflow-x: auto;
  }
}

/* ============================================================
   SEARCH TERM HIGHLIGHTING (all screen sizes)
   ============================================================ */

/* Search term highlighting in content */
.search-highlight {
  background: var(--color-accent);
  color: white;
  padding: 0.1em 0.2em;
  border-radius: 2px;
  font-weight: 600;
  animation: search-highlight-pulse 0.6s ease-out;
}

@keyframes search-highlight-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(107, 44, 44, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(107, 44, 44, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(107, 44, 44, 0);
  }
}

/* ============================================================
   SIDEBAR NAVIGATION & SEARCH
   ============================================================ */

/* --- Hidden by default (narrow screens) --------------------- */

#sidebar-toc,
#sidebar-search {
  display: none;
}

/* --- Wide screens: show TOC on left ------------------------- */

@media screen and (min-width: 1200px) {
  #sidebar-toc {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5em 0.8em 2em 1em;
    font-size: 13px;
    line-height: 1.35;
    background: var(--color-bg);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 10;
    scrollbar-width: thin;
    scrollbar-color: var(--color-rule) transparent;
  }

  #sidebar-toc::-webkit-scrollbar {
    width: 4px;
  }

  #sidebar-toc::-webkit-scrollbar-thumb {
    background: var(--color-rule);
    border-radius: 2px;
  }

  .sidebar-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.8em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--color-rule);
  }

  #sidebar-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #sidebar-toc-list li {
    margin: 0;
  }

  #sidebar-toc-list li a {
    display: block;
    padding: 0.2em 0.5em;
    color: var(--color-text);
    border-bottom: none;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #sidebar-toc-list li a:hover {
    background: var(--color-code-bg);
    color: var(--color-link);
  }

  /* Part headings in TOC sidebar */
  #sidebar-toc-list li.toc-part {
    margin-top: 0.8em;
  }

  #sidebar-toc-list li.toc-part a {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--color-accent);
    padding: 0.25em 0.5em;
  }

  /* Chapter headings */
  #sidebar-toc-list li.toc-chapter a {
    padding-left: 1em;
    font-size: 12.5px;
  }

  /* Active section highlight */
  #sidebar-toc-list li.active > a {
    background: var(--color-accent);
    color: white;
  }

  #sidebar-toc-list li.toc-part.active > a {
    background: var(--color-accent);
    color: white;
  }
}

/* --- Wide screens (1200px+): also show search on right ------ */

@media screen and (min-width: 1200px) {
  /* Adjust body margins to account for both sidebars while staying centered */
  body {
    margin-left: max(280px, calc((100vw - 38em) / 2));
    margin-right: max(280px, calc((100vw - 38em) / 2));
  }

  #sidebar-search {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 270px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5em 1em 2em 0.8em;
    font-size: 13px;
    line-height: 1.4;
    background: var(--color-bg);
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 10;
    scrollbar-width: thin;
    scrollbar-color: var(--color-rule) transparent;
  }

  #sidebar-search::-webkit-scrollbar {
    width: 4px;
  }

  #sidebar-search::-webkit-scrollbar-thumb {
    background: var(--color-rule);
    border-radius: 2px;
  }

  #sidebar-search .sidebar-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.8em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--color-rule);
  }

  .search-wrapper {
    position: relative;
    margin-bottom: 0.6em;
  }

  #search-input {
    width: 100%;
    padding: 0.45em 0.6em;
    padding-right: 1.8em;
    font-family: var(--font-body);
    font-size: 13px;
    border: 1px solid var(--color-rule);
    border-radius: 4px;
    background: white;
    color: var(--color-text);
    outline: none;
  }

  #search-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(107, 44, 44, 0.15);
  }

  #search-input::placeholder {
    color: #aaa;
    font-style: italic;
  }

  #search-clear {
    position: absolute;
    right: 0.35em;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 16px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0.15em 0.35em;
    border-radius: 3px;
  }

  #search-clear:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text);
  }

  #search-clear[hidden] {
    display: none;
  }

  /* Search results */
  .search-result {
    display: block;
    padding: 0.4em 0.5em;
    margin-bottom: 0.2em;
    border-radius: 3px;
    border-bottom: none;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.15s;
  }

  .search-result:hover {
    background: var(--color-code-bg);
  }

  .search-result-title {
    display: block;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--color-link);
  }

  .search-result-snippet {
    display: block;
    font-size: 11.5px;
    color: #777;
    margin-top: 0.15em;
    line-height: 1.3;
  }

  .search-empty {
    padding: 1em 0.5em;
    color: #999;
    font-style: italic;
    text-align: center;
    font-size: 12.5px;
  }

  .search-hint {
    font-size: 11px;
    color: #bbb;
  }

  .search-more {
    padding: 0.3em 0.5em;
    color: #999;
    font-size: 11.5px;
    font-style: italic;
  }

  /* Humorous index */
  .humorous-index {
    margin-top: 0.3em;
  }

  .index-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    font-style: italic;
    color: var(--color-accent);
    margin-bottom: 0.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .index-entry {
    display: block;
    padding: 0.15em 0.4em;
    font-size: 12px;
    color: var(--color-text);
    border-bottom: none;
    text-decoration: none;
    transition: color 0.15s;
  }

  .index-entry:hover {
    color: var(--color-link);
    background: var(--color-code-bg);
    border-radius: 2px;
  }
}

/* ============================================================
   PRINT / PDF STYLES — 5″ × 8″ handbook
   ============================================================ */

/* Print-only blocks: hidden on screen, shown in print. */
.print-only {
  display: none;
}

@media print {

  /* Hide the "New! Updated for 5.0" page-fold badge in print. */
  .page-fold {
    display: none !important;
  }

  /* Show print-only conversion tables and notes. */
  .print-only {
    display: block;
  }

  /* Hide the interactive Cha/Sell/Tourist/Angry toolbars; the
     print-only conversion table above the price tables stands
     in for them. */
  .price-id-toolbar {
    display: none !important;
  }

  /* --- Page setup ------------------------------------------- */

  @page {
    size: 148mm 210mm; /* A5 */
    margin: 0.55in 0.5in 0.65in 0.6in; /* top right bottom left(inner) */

    @bottom-center {
      content: counter(page);
      font-family: 'EB Garamond', 'Georgia', serif;
      font-size: 9pt;
      color: #888;
    }
  }

  @page :first {
    margin-top: 0;
    @bottom-center {
      content: none;
    }
  }

  @page :left {
    margin-left: 0.5in;
    margin-right: 0.6in;
  }

  @page :right {
    margin-left: 0.6in;
    margin-right: 0.5in;
  }

  /* --- Hide sidebars ---------------------------------------- */

  #sidebar-toc,
  #sidebar-search {
    display: none !important;
  }

  /* --- Base ------------------------------------------------- */

  :root {
    --color-bg: white;
  }

  html {
    font-size: 10pt;
  }

  body {
    font-family: var(--font-body);
    color: black;
    background: white;
    max-width: none;
    padding: 0;
    margin: 0;
    line-height: 1.45;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* --- Title page ------------------------------------------- */

  h1 {
    font-size: 22pt;
    margin-top: 2.2in;
    margin-bottom: 0.3em;
    page-break-before: avoid;
    text-align: center;
  }

  /* Opening epigraph in print */
  section.level1 > blockquote:first-of-type {
    border-left: none;
    text-align: center;
    font-size: 10.5pt;
    margin: 0.5em auto 0;
    padding: 0;
    max-width: none;
    page-break-after: always;
  }

  /* --- Part headings ---------------------------------------- */

  h2 {
    font-size: 15pt;
    page-break-before: always;
    margin-top: 1.5in;
    padding-top: 0;
    padding-bottom: 0.15em;
    border-bottom: 0.5pt solid #999;
    text-align: center;
  }

  /* Don't break before the very first h2 ("Before You Read Further") */
  section.level1 > section.level2:first-of-type > h2 {
    page-break-before: avoid;
    margin-top: 0;
    text-align: left;
  }

  /* --- Chapter headings ------------------------------------- */

  h3 {
    font-size: 13pt;
    page-break-before: always;
    margin-top: 0.5em;
    page-break-after: avoid;
  }

  /* Don't page-break before the first chapter in a part */
  section.level2 > section.level3:first-of-type > h3 {
    page-break-before: avoid;
  }

  h4 {
    font-size: 11pt;
    page-break-after: avoid;
    margin-top: 1.2em;
  }

  h5 {
    font-size: 10pt;
    page-break-after: avoid;
  }

  /* --- Table of Contents (print) ----------------------------- */

  section#table-of-contents > h2 {
    page-break-before: always;
    margin-top: 1.6in;
    margin-bottom: 0.5in;
    font-size: 14pt;
    border-bottom: none;
  }

  section#table-of-contents p strong {
    color: black;
    font-size: 10pt;
  }

  section#table-of-contents ol,
  section#table-of-contents ul {
    font-size: 9.5pt;
  }

  section#table-of-contents li {
    line-height: 1.5;
  }

  /* TOC page numbers via target-counter */
  section#table-of-contents li a[href^="#"]::after {
    content: target-counter(attr(href), page);
    float: right;
    font-variant-numeric: tabular-nums;
  }

  section#table-of-contents {
    page-break-after: always;
  }

  /* --- Widow / orphan control ------------------------------- */

  p {
    orphans: 3;
    widows: 3;
  }

  h2, h3, h4, h5 {
    orphans: 4;
    widows: 4;
  }

  /* --- Blockquotes ------------------------------------------ */

  blockquote {
    background: none;
    border-left: none;
    padding: 0.3em 0;
    margin: 0.8em 0;
    page-break-inside: avoid;
    font-size: 9.5pt;
    font-style: italic;
  }

  /* --- Horizontal rules ------------------------------------- */

  hr {
    border-top-color: #aaa;
    margin: 0.5in auto;
  }

  /* Restore HRs after Part headings in print */
  h2 + hr {
    display: block;
  }

  hr::after {
    background: white;
    color: #aaa;
  }

  /* --- Code ------------------------------------------------- */

  pre {
    font-size: 7pt;
    line-height: 1.3;
    background: none;
    border: 0.5pt solid #ccc;
    padding: 0.5em 0.6em;
    page-break-inside: avoid;
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  code {
    font-size: 0.85em;
    background: none;
    padding: 0;
  }

  /* --- Tables ----------------------------------------------- */

  table {
    font-size: 8pt;
    page-break-inside: avoid;
    margin: 0.8em 0;
    width: 100%;
  }

  thead {
    border-bottom: 1pt solid black;
  }

  th {
    font-size: 8pt;
    padding: 0.25em 0.35em;
    font-weight: 600;
  }

  td {
    padding: 0.2em 0.35em;
    border-bottom: 0.5pt solid #ddd;
  }

  tbody tr:nth-child(even) {
    background: none;
  }

  /* --- Links ------------------------------------------------ */

  a {
    color: black;
    border-bottom: none;
  }

  /* --- Lists ------------------------------------------------ */

  /* Allow lists to break across pages to avoid large gaps */
  ul, ol {
    page-break-inside: auto;
  }

  /* But keep individual list items together */
  li {
    page-break-inside: avoid;
  }

  /* --- Colophon --------------------------------------------- */

  section.level1 > p:last-of-type,
  section.level1 > p:nth-last-of-type(2) {
    text-align: center;
    font-size: 10pt;
  }
}

/* --- Price-ID widget (interactive shop-price calculator) ---- */
.price-id-widget {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em;
  margin: 0.8em 0;
  font-family: var(--font-body);
  font-size: 0.95em;
}
.price-id-label {
  color: var(--color-rule);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.2em;
}
.price-id-sep {
  color: var(--color-rule);
  margin: 0 0.4em;
}
.price-id-widget button {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  color: var(--color-text);
  padding: 0.15em 0.55em;
  font-family: var(--font-body);
  font-size: 0.9em;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.3;
}
.price-id-widget button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.price-id-widget button.active {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-link);
}
td.pi-col, th.pi-col { white-space: nowrap; text-align: center; }
td.pi-price { color: var(--color-accent); font-weight: 500; }
.pi-alt { color: var(--color-rule); font-size: 0.85em; font-weight: normal; }
.pi-sep { color: var(--color-rule); }

/* Print: keep the widget out of the PDF (it's interactive) */
@media print {
  .price-id-widget { display: none; }
}

/* Sokoban flip toolbar: two toggle buttons inserted under each level
 * heading. State is shared across all levels — clicking any "Flip
 * horizontal" button mirrors every map at once. */
.sokoban-flipbar {
  display: flex;
  gap: 0.5em;
  margin: 0.4em 0 0.6em;
  align-items: center;
}
.sokoban-flipbar button {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  color: var(--color-text);
  padding: 0.15em 0.6em;
  font-family: var(--font-body);
  font-size: 0.9em;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.3;
}
.sokoban-flipbar button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.sokoban-flipbar button.active {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-link);
}
@media print {
  .sokoban-flipbar { display: none; }
}

/* Sokoban level layout (HTML only — the print build has its own
 * pagination via xelatex). Float each map left so the numbered
 * solution list flows alongside it. Headings, paragraphs, and the
 * flip toolbar clear the float so they don't wrap around the map. */
@media screen {
  #sokoban-solutions .sokoban-level pre {
    display: inline-block;
    float: left;
    margin-right: 32px;
    margin-top: 8px;
    clear: both;
  }
  #sokoban-solutions h4,
  #sokoban-solutions p,
  #sokoban-solutions blockquote,
  #sokoban-solutions .sokoban-flipbar {
    clear: both;
  }
  /* Make the solution list a block formatting context so it sits as a
   * column to the right of the floated map instead of letting orphaned
   * words at the tail end wrap back under the map. */
  #sokoban-solutions .sokoban-level ol {
    display: flow-root;
    padding-left: 5px;
  }
  /* Level 3A has a small map with a long solution list — keep default
   * flow so items past the map's bottom can reclaim the full width
   * instead of being stuck in a narrow right-of-map column. */
  #sokoban-solutions #level-3-version-a ol {
    display: block;
  }

  /* Coordinate cross-highlighting (JS-decorated, screen only). Hovering a
   * map square lights the square plus its row/column numbers; hovering a
   * coordinate in the solution prose lights the matching square. */
  #sokoban-solutions .soko-cell,
  #sokoban-solutions .soko-coord {
    cursor: crosshair;
  }
  #sokoban-solutions .soko-hl {
    background: #ffe066;
    box-shadow: 0 0 0 1px #d4a017;
    border-radius: 2px;
  }
  #sokoban-solutions .soko-axis-hl {
    background: #ffe066;
    color: var(--color-accent);
    font-weight: 700;
    border-radius: 2px;
  }
  #sokoban-solutions .soko-coord-active {
    background: #ffe066;
    border-radius: 2px;
  }
}