/* Opening book page, modelled on Gambit Studio, the digital edition of the
   Gambit opening surveys: the chapter is one column of book text (serif,
   justified, the main line in bold on its own lines, lettered alternatives
   in normal weight, diagrams with a W/B side marker) and beside it one board
   that jumps to whatever move the reader clicks. The contents tree sits on
   the left. Header, buttons and the board come from app.css and board.css;
   the page and its margin carry their own light "paper" theme by default and
   a dark one on request. */

.bookBody { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.tocSearch { flex: 1 1 240px; max-width: 420px; }
.tocSearch input { width: 100%; box-sizing: border-box; font-size: .86rem; padding: 6px 10px; }
.progress { font-size: .78rem; white-space: nowrap; }
.tocToggle { display: none; }
button.tiny { padding: 2px 9px; font-size: .72rem; border-radius: 999px; line-height: 1.4; }
.bar button.tiny[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

.bookLayout { flex: 1; min-height: 0; display: grid; grid-template-columns: 272px minmax(0, 1fr); }

/* Contents: a tree with guide lines, written chapters in full colour. */
.toc { overflow: auto; border-right: 1px solid var(--line); padding: 10px 8px 30px 6px; font-size: .84rem; background: #0f1419; }
.toc h2 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 6px 4px; }
.toc h2:first-child { margin-top: 4px; }
.toc ul.tree { list-style: none; margin: 0; padding: 0; }
.toc ul.tree ul.tree { margin-left: 11px; padding-left: 10px; border-left: 1px solid #2c3944; }
.toc ul.tree ul.tree > li { position: relative; }
.toc ul.tree ul.tree > li::before { content: ""; position: absolute; left: -10px; top: 12px; width: 7px; height: 1px; background: #2c3944; }
.toc ul.tree.d0 > li > a { font-weight: 600; }
.toc ul.tree.d2 > li > a, .toc ul.tree.d3 > li > a { font-size: .78rem; }
.toc a { display: flex; align-items: baseline; gap: 6px; color: #7d8a96; text-decoration: none; padding: 3px 6px; border-radius: 6px; line-height: 1.35; }
.toc a:hover { color: var(--text); background: #1a222b; }
.toc a.written { color: var(--text); }
.toc a.on { background: #243240; color: var(--text); }
.toc a .eco { color: #5f6f7d; font-size: .66rem; font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 6px; }
.toc a.theme .t { font-style: italic; }
.toc a.problem .t { color: #c0554f; }
.toc .groupLabel { display: block; font-size: .72rem; color: var(--muted); font-weight: 600; padding: 6px 6px 2px; }
.toc .empty { color: var(--muted); padding: 8px; }

/* The reader: page text and the board margin share one theme. */
.reader {
  --pg-bg: #f7f3ea; --pg-text: #1b1812; --pg-muted: #6d665a; --pg-rule: #d8d0c0; --pg-soft: #ece6d8; --pg-on: #f4d98a; --pg-link: #7a4d0c; --pg-btn: #3a3428;
  min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; background: var(--pg-bg); color: var(--pg-text);
}
.reader.dark { --pg-bg: #14181d; --pg-text: #e6e2d8; --pg-muted: #9a958a; --pg-rule: #2b323a; --pg-soft: #1d232a; --pg-on: #5a4a1c; --pg-link: #e0b866; --pg-btn: #e6e2d8; }

/* The page: one column of book text. */
.page {
  min-width: 0; overflow: auto; padding: 28px 44px 90px;
  font-family: Arial, Helvetica, sans-serif; font-size: 1.08rem; line-height: 1.5; color: var(--pg-text);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.page > * { max-width: 66ch; margin-left: auto; margin-right: auto; }
.page h1 { font-family: Arial, Helvetica, sans-serif; font-size: 1.85rem; font-weight: 700; letter-spacing: -.01em; margin: 6px auto 16px; text-align: left; hyphens: none; }
.page h2 { font-family: Arial, Helvetica, sans-serif; font-size: 1.15rem; font-weight: 700; margin: 26px auto 8px; text-align: left; hyphens: none; }
.page h3 { font-family: Arial, Helvetica, sans-serif; font-size: .95rem; font-weight: 700; margin: 22px auto 6px; text-align: left; }
.page p { margin: 0 auto; text-indent: 1.4em; }
.page p.first, .page p.head, .page p.move, .page p.lead, .page p.game, .page h1 + p, .page h2 + p, .page h3 + p, .page figure + p { text-indent: 0; }
.page p.head { font-weight: 700; margin-bottom: 6px; }
.page p.head .ecoTag { font-weight: 400; color: var(--pg-muted); font-size: .85em; margin-left: .6em; font-family: Arial, Helvetica, sans-serif; }
.page p.move { font-weight: 700; margin-top: 8px; padding-left: 1.4em; }
.page p.move + p { text-indent: 1.4em; }
.page p.alt { }
.page p.deeper { }
.page p.lead { margin-top: 6px; }
.page .letter { margin-right: .3em; }
.page .aim { margin-top: 6px; text-indent: 0; }
.page .aim b { font-weight: 700; }
.page .m { cursor: pointer; border-radius: 2px; padding: 0 1px; white-space: nowrap; }
.page .m:hover { background: var(--pg-soft); }
.page .m.on { background: var(--pg-on); }
.page .m.dead { cursor: default; text-decoration: line-through; opacity: .7; }
.page p.move .m.on, .page p.head .m.on { box-shadow: 0 0 0 2px var(--pg-on); }
.page .problem { color: #b0413b; font-size: .8em; font-family: Arial, Helvetica, sans-serif; }
.page .meta { color: var(--pg-muted); font-size: .84rem; font-family: Arial, Helvetica, sans-serif; text-align: left; text-indent: 0; }
.page .problems { color: #b0413b; font-size: .84rem; font-family: Arial, Helvetica, sans-serif; text-align: left; }
.page .candidateNote { border: 1px dashed #b08a3a; background: rgba(216,173,88,.12); border-radius: 6px; padding: 6px 10px; font-size: .84rem; font-family: Arial, Helvetica, sans-serif; text-align: left; text-indent: 0; margin-bottom: 12px; }
.page .stub { border: 1px dashed var(--pg-rule); border-radius: 6px; padding: 12px 16px; color: var(--pg-muted); font-size: .95rem; text-indent: 0; text-align: left; }
.page .stub code { font-family: Arial, Helvetica, sans-serif; font-size: .85em; }

/* Diagrams: the book's "(D)", a small board with the side to move at the
   left, no caption, clickable to put the position on the big board. */
.page figure.diagram { display: grid; grid-template-columns: 1.6em 1fr; align-items: start; gap: 6px; margin: 14px auto 12px; width: min(62%, 300px); cursor: pointer; }
.page figure.diagram .side { font-style: italic; font-size: .9rem; color: var(--pg-text); padding-top: 4px; }
.page figure.diagram .dg { width: 100%; }
.page figure.diagram .dg .cg-board { border-radius: 0; box-shadow: none; border: 1px solid #555; }
.page figure.diagram:hover .dg .cg-board { border-color: var(--pg-link); }
.page figure.diagram.on .dg .cg-board { outline: 2px solid var(--pg-on); }

/* The family map: each variation's title links to its chapter, its line is
   bold and clickable, and its games play on the board. */
.page p.varTitle { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1rem; margin-top: 20px; text-indent: 0; text-align: left; }
.page p.varTitle a { color: var(--pg-text); text-decoration: none; border-bottom: 1px solid var(--pg-rule); }
.page p.varTitle a:hover { color: var(--pg-link); border-color: var(--pg-link); }
.page p.varTitle .unwritten { font-weight: 400; color: var(--pg-muted); font-size: .8em; }
.page p.vgames { text-indent: 0; font-family: Arial, Helvetica, sans-serif; font-size: .82rem; color: var(--pg-muted); margin-top: 4px; text-align: left; }
.page p.vgames .vgame { color: var(--pg-link); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.page p.vgames .vgame:hover { color: var(--pg-text); }

/* Games and sources at the end of the chapter. */
.page p.game { margin-top: 10px; }
.page p.game b { font-weight: 700; }
.page p.game .ev { color: var(--pg-muted); }
.page p.game .story { display: block; text-indent: 1.4em; }
.page p.game .play { font-family: Arial, Helvetica, sans-serif; font-size: .74rem; color: var(--pg-link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; margin-left: .5em; }
.page .sources { font-size: .84rem; color: var(--pg-muted); text-indent: 0; margin-top: 22px; }
.page .sources a { color: var(--pg-muted); }
.page .pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 36px; padding-top: 12px; border-top: 1px solid var(--pg-rule); font-family: Arial, Helvetica, sans-serif; font-size: .86rem; }
.page .pager a { color: var(--pg-link); text-decoration: none; }
.page .pager a:hover { text-decoration: underline; }

/* The margin: one board that follows the reader, its move list, and the
   evidence the books do not have behind disclosures. */
.margin { min-width: 0; overflow: auto; padding: 16px 16px 30px; border-left: 1px solid var(--pg-rule); display: flex; flex-direction: column; gap: 8px; font-family: Arial, Helvetica, sans-serif; }
.margin .boardWrap { width: 100%; flex: none; aspect-ratio: 1; container-type: inline-size; }
.margin .board { width: 100cqw; }
.margin .controls { display: flex; gap: 4px; flex-wrap: wrap; }
.margin button.ghost { color: var(--pg-btn); border-color: var(--pg-rule); }
.margin button.ghost:hover { border-color: var(--pg-link); }
.margin button:disabled { opacity: .4; }
.caption { font-size: .84rem; line-height: 1.4; }
.caption:empty { display: none; }
.caption h2 { font-size: .95rem; margin: 0 0 2px; }
.caption .meta { margin: 0; font-size: .76rem; color: var(--pg-muted); }
.moves.line { font-size: .86rem; line-height: 1.7; font-family: Arial, Helvetica, sans-serif; }
.mv { cursor: pointer; padding: 0 2px; border-radius: 3px; }
.mv:hover { background: var(--pg-soft); }
.mv.on { background: var(--pg-on); font-weight: 700; }
.mv small { color: var(--pg-muted); font-size: .8em; margin-right: 1px; }

.margin details { border-top: 1px solid var(--pg-rule); padding-top: 6px; }
.margin summary { cursor: pointer; font-size: .78rem; color: var(--pg-muted); list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.margin summary::-webkit-details-marker { display: none; }
.margin summary::before { content: "▸"; font-size: .7rem; }
.margin details[open] summary::before { content: "▾"; }
.margin summary .evTitle { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.margin summary .evFacts { color: var(--pg-text); }
.margin summary .evFacts b { font-weight: 600; }
.small { font-size: .74rem; }
.status:empty { display: none; }
.evTable { width: 100%; border-collapse: collapse; font-size: .78rem; margin-top: 6px; }
.evTable th, .evTable td { padding: 2px 4px; border-bottom: 1px solid var(--pg-rule); text-align: left; white-space: nowrap; line-height: 1.4; }
.evTable thead th { color: var(--pg-muted); font-weight: 600; font-size: .68rem; }
.evTable th.num, .evTable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.evTable tbody tr { cursor: pointer; }
.evTable tbody tr:hover td { background: var(--pg-soft); }
.evTable td.san { font-weight: 700; max-width: 11em; overflow: hidden; text-overflow: ellipsis; }
.evTable td.san small { color: var(--pg-muted); font-weight: 400; margin-left: 4px; font-size: .66rem; }
.evTable td.empty { color: var(--pg-muted); text-align: right; opacity: .5; }
.engineRow { margin-top: 8px; }
.engineOut { font-size: .8rem; margin-top: 6px; }
.engineOut ol { margin: 4px 0 0; padding-left: 20px; }
.engineOut li { cursor: pointer; margin: 2px 0; }
.engineOut li:hover { color: var(--pg-link); }
.engineOut .score { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 6px; }
.engineOut .depth { color: var(--pg-muted); font-size: .7rem; margin-left: 6px; }
.topGames { list-style: none; padding: 0; margin: 6px 0 0; font-size: .8rem; }
.topGames li { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--pg-rule); flex-wrap: wrap; cursor: pointer; }
.topGames li:hover { background: var(--pg-soft); }
.topGames .players { font-weight: 600; }
.topGames .ev { color: var(--pg-muted); font-size: .72rem; }
.topGames .res { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; }
.researchList { font-size: .78rem; margin-top: 6px; }
.researchList h4 { margin: 10px 0 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pg-muted); }
.researchList .fact { padding: 5px 0; border-bottom: 1px solid var(--pg-rule); line-height: 1.45; }
.researchList .chip { display: inline-block; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; padding: 0 5px; border-radius: 999px; border: 1px solid var(--pg-rule); color: var(--pg-muted); margin-right: 4px; vertical-align: 1px; }
.researchList .status-memory .chip { border-color: #b08a3a; color: #8a5a12; }
.researchList .status-contested .chip { border-color: #b0413b; color: #b0413b; }
.researchList .sources { color: var(--pg-muted); font-size: .72rem; margin-top: 2px; padding-left: 10px; }
.researchList .sources a { color: var(--pg-link); }
.researchList .via, .researchList .when { color: var(--pg-muted); opacity: .8; }
.researchList .memory { color: #8a5a12; font-weight: 600; }
.researchList .note { font-style: italic; color: var(--pg-muted); margin-top: 2px; }
.researchList .vgame { color: var(--pg-link); cursor: pointer; text-decoration: underline; font-size: .72rem; }
.researchList .problems { font-size: .74rem; }
.researchList .warnings { font-size: .72rem; color: #8a5a12; }
.researchList .warn, .researchFacts .warn { color: #8a5a12; }
.researchList .srcQuery, .researchList .srcResult, .researchList .srcQuote { font-size: .68rem; color: var(--pg-muted); margin: 1px 0 2px 8px; white-space: pre-wrap; word-break: break-word; }
.researchList .srcResult { color: var(--pg-text); }
.researchList .srcQuote { font-style: italic; }
.researchList .check { color: var(--pg-muted); }
.researchList .check.stale { color: #b0413b; }
.hidden { display: none !important; }

@media (max-width: 1360px) {
  .tocToggle { display: inline-block; }
  .bookLayout { grid-template-columns: 1fr; }
  .toc { position: fixed; top: 0; bottom: 0; left: 0; width: 80vw; max-width: 320px; z-index: 50; box-shadow: 0 0 40px rgba(0,0,0,.6); transform: translateX(-100%); transition: transform .15s; }
  .toc.open { transform: none; }
}
@media (max-width: 1000px) {
  .reader { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .margin { order: -1; border-left: 0; border-bottom: 1px solid var(--pg-rule); flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .margin .boardWrap { width: 240px; }
  .margin details { flex: 1 1 320px; border-top: 0; }
  .margin .controls, .margin .caption, .margin .moves { flex-basis: 100%; }
  .progress { display: none; }
  .page { padding: 16px 18px 60px; }
}