/* web/template/design.css */
/* The reading design, layered after styles.css: warm paper and ink, EB Garamond
   prose, Geist interface, reading column plus a right rail, margin paragraph
   numbers. Figure and widget vocabulary colours stay as styles.css sets them. */
:root {
  --bg: #f4efee; --fg: #312f2f; --muted: #706e6e; --faint: #9b9998;
  --rule: #e9e3e2; --wash: #ece6e4;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Geist", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}
[data-theme="dark"] {
  --bg: #161413; --fg: #ebe5e3; --muted: #a39d9b; --faint: #6f6a68;
  --rule: #2d2a28; --wash: #1f1c1b;
}

body {
  display: block; font-family: var(--serif); font-size: 18px;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}

/* Top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1140px; margin: 0 auto; height: 64px; padding: 0 1rem;
  border-bottom: 1px solid var(--rule); font-family: var(--sans);
}
.brand { color: var(--fg); text-decoration: none; font-weight: 600; font-size: 15px; }
.topbar-tools { display: flex; gap: .5rem; }
#theme, .nav-toggle {
  position: static; background: none; color: var(--muted); cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px; padding: .25rem .7rem;
  font-size: 14px; line-height: 1.4;
}
#theme:hover, .nav-toggle:hover { color: var(--fg); }
.nav-toggle { display: none; }

/* Reading column and rail */
.site {
  max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
}
.prose {
  width: auto; max-width: none; margin: 0; min-width: 0;
  padding: 2.8rem 3.5rem 3rem 5rem; counter-reset: para;
}
.rail {
  border-left: 1px solid var(--rule); padding: 2.2rem 0 2rem 2.2rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  font-family: var(--sans); font-size: 14px; line-height: 1.45;
}
.rail-search { padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule); }
.rail-search pagefind-modal-trigger { display: block; }
.rail-search .pf-trigger-btn { width: 100%; justify-content: flex-start; }
/* Search (trigger and modal) takes the page's paper and ink in both themes. */
:root, [data-theme="dark"], pagefind-modal, pagefind-modal-trigger {
  --pf-background: var(--bg); --pf-text: var(--fg);
  --pf-text-secondary: var(--muted); --pf-text-muted: var(--faint);
  --pf-border: var(--rule); --pf-border-focus: var(--muted);
  --pf-hover: var(--wash); --pf-skeleton: var(--wash);
}
.rail-search .pf-trigger-shortcut { margin-left: auto; }
.rail-toc { padding: 1.2rem 0; }
.rail-toc a { display: block; color: var(--muted); text-decoration: none; padding: .28rem 0; }
.rail-toc a:hover { color: var(--fg); }
.rail-toc a.active { color: var(--fg); font-weight: 600; }
.rail-toc > a { color: var(--fg); font-weight: 500; }
.rail-toc .side-part { margin: .6rem 0 0; }
.rail-toc .side-part summary {
  color: var(--fg); font-weight: 600; cursor: pointer; padding: .28rem 0;
}
.rail-toc .side-part a { padding-left: .9rem; }
.rail-toc .side-children { margin: 0 0 .3rem 1.3rem; padding-left: .8rem; }
.rail-toc .side-part .side-children a { padding-left: 0; font-size: 13px; }
.rail-links {
  border-top: 1px solid var(--rule); padding-top: 1.2rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.rail-links a { color: var(--fg); text-decoration: none; font-weight: 500; }
.rail-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rail-links .edit-suggest {
  position: static; background: none; border: 0; padding: 0;
  font-size: inherit; color: var(--fg);
}

/* Chapter header */
.prose h2.chapterHead, .prose h2.likechapterHead {
  font-family: var(--serif); font-weight: 400; font-size: 2.6rem;
  line-height: 1.12; margin: 0 0 1.1rem; letter-spacing: -.005em;
}
.chapterHead .titlemark {
  display: block; margin-bottom: 1.8rem; font-family: var(--mono);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.chapterHead br { display: none; }
.chapter-meta, .summarize {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
}
.summarize { margin: .9rem 0 2.6rem; color: var(--faint); }
.summarize-link { display: inline-flex; color: var(--muted); opacity: .75; }
.summarize-link:hover, .summarize-link:focus-visible { color: var(--fg); opacity: 1; }

/* Prose */
.prose h3, .prose h4 {
  font-family: var(--serif); font-weight: 400; line-height: 1.25;
  margin: 2.8rem 0 1rem;
}
.prose h3 { font-size: 1.65rem; }
.prose h4 { font-size: 1.3rem; }
.prose h3 .titlemark, .prose h4 .titlemark { color: var(--faint); margin-right: .45em; }
.prose > p { margin: 0 0 1.05em; text-indent: 0; }
.prose > p.num {
  position: relative; counter-increment: para;
  text-align: justify; hyphens: auto; overflow-wrap: break-word;
}
.prose > p.num::before {
  content: counter(para) "."; position: absolute; left: -3.4rem; width: 2.2rem;
  text-align: right; color: var(--faint); font-size: .92em;
}
.prose a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px; }
.prose a:hover { text-decoration: none; }
.prose .chapterHead a, .prose h3 a, .prose h4 a { text-decoration: none; }
figcaption { font-family: var(--serif); font-size: .9rem; color: var(--muted); }
/* Only make4ht's lists: widget and ladder lists keep their own spacing. */
.prose ul.itemize1 { padding-left: 1.4rem; }
.prose li.itemize { margin: .3rem 0; }
pre.code, pre.transcript {
  font-family: var(--mono); font-size: .8rem; line-height: 1.55;
  border: 1px solid var(--rule); border-radius: 6px;
}
.code, [data-theme="dark"] .code { background: var(--wash); }
[data-theme="dark"] .code { color: var(--fg); }
.transcript-tag { font-family: var(--mono); }

/* Page end */
.prevnext { font-family: var(--sans); font-size: 14px; }
.prevnext a { color: var(--fg); }
.site-footer {
  max-width: 1140px; margin: 0 auto; padding: 1.4rem 1rem 2rem;
  border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 12px;
}

/* Home: the chapter index reads like a list of entries */
.toc { font-family: var(--sans); }
.toc > li > a, .toc-part li a {
  display: block; padding: .6rem 0; border-bottom: 1px solid var(--rule);
  color: var(--fg); text-decoration: none; font-weight: 500; font-size: 15px;
}
.toc > li > a:hover, .toc-part li a:hover { color: var(--muted); }
.toc-part h2 {
  font-family: var(--serif); font-weight: 400; font-size: 2.2rem;
  margin: 2.6rem 0 .6rem;
}
.toc-blurb { font-family: var(--serif); font-size: 18px; color: var(--fg); }
.toc-part ul { padding-left: 0; }

/* Lettered side chapters fold under their chapter: the chapter stays a link
   and a +/- button at the row's right end opens its group (native details). */
:root {
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='1.5' y='1.5' width='13' height='13' rx='3'/%3E%3Cpath d='M5 8h6M8 5v6'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='1.5' y='1.5' width='13' height='13' rx='3'/%3E%3Cpath d='M5 8h6'/%3E%3C/svg%3E");
}
.toc-group, .side-group { position: relative; }
.toc-group > a { padding-right: 2.4rem; }
.side-group > a { padding-right: 1.8rem; }
.toc-side > summary, .side-children > summary {
  position: absolute; right: 0; width: 1.8rem; height: 1lh;
  list-style: none; cursor: pointer;
}
.toc-side > summary { top: .6rem; font-size: 15px; }
.side-children > summary { top: .28rem; }
.toc-side > summary::-webkit-details-marker,
.side-children > summary::-webkit-details-marker { display: none; }
.toc-side > summary::after, .side-children > summary::after {
  content: ""; position: absolute; inset: 0; margin: auto 0 auto auto;
  width: 15px; height: 15px; background: var(--muted);
  -webkit-mask: var(--icon-plus) center / contain no-repeat;
  mask: var(--icon-plus) center / contain no-repeat;
}
.toc-side[open] > summary::after, .side-children[open] > summary::after {
  -webkit-mask-image: var(--icon-minus); mask-image: var(--icon-minus);
}
.toc-side > summary:hover::after, .side-children > summary:hover::after {
  background: var(--fg);
}
.toc-side > summary:focus-visible, .side-children > summary:focus-visible {
  outline: 1px solid var(--faint); outline-offset: 2px; border-radius: 3px;
}
.prose .toc-side li a { padding-left: 1.6rem; font-weight: 400; }
.rail-toc .side-children:not([open]) { margin-bottom: 0; }

/* One column: the rail becomes a drawer behind the menu button. */
@media (max-width: 71.875rem) {
  .site { display: block; }
  .prose { padding: 2rem 1rem 2.5rem; }
  .prose > p.num::before { display: none; }
  .nav-toggle { display: inline-block; }
  .rail {
    position: static; height: auto; border-left: 0;
    border-top: 1px solid var(--rule); padding: 1.5rem 1rem;
  }
  html.js .rail {
    position: fixed; top: 0; right: 0; z-index: 20; height: 100vh;
    width: min(85vw, 320px); background: var(--bg);
    border-left: 1px solid var(--rule); border-top: 0; padding: 1.5rem 1.2rem;
    transform: translateX(105%); transition: transform .2s ease;
  }
  html.js .rail.open { transform: none; box-shadow: -8px 0 24px rgb(0 0 0 / .12); }
}
@media (max-width: 40rem) {
  .prose h2.chapterHead, .prose h2.likechapterHead { font-size: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .rail { transition: none; }
}

/* Glossary: a figure thumbnail beside each term, filterable by layer. */
.gloss-intro { color: var(--muted); }
.gloss-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 1rem; }
.gloss-chip {
  border: 1px solid var(--rule); border-radius: 999px; background: none;
  color: var(--muted); padding: .2rem .8rem; cursor: pointer;
  font: 500 13px/1.5 var(--sans);
}
.gloss-chip[aria-pressed="true"] {
  color: var(--fg); border-color: var(--layer, var(--fg));
  background: color-mix(in srgb, var(--layer, var(--fg)) 12%, var(--bg));
}
.gloss-letters {
  display: flex; flex-wrap: wrap; gap: .2rem .8rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule); font: 500 13px/1.6 var(--sans);
}
.prose .gloss-letters a { color: var(--muted); text-decoration: none; }
.prose .gloss-letter h3 {
  font: 500 12px/1.4 var(--mono); letter-spacing: .16em; color: var(--muted);
  margin: 2.2rem 0 .2rem;
}
.gloss-entry {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.4rem;
  padding: 1.2rem 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 1rem;
}
.gloss-entry:target { background: color-mix(in srgb, var(--layer) 8%, var(--bg)); }
.gloss-entry[hidden], .gloss-letter[hidden] { display: none; }
.gloss-thumb {
  display: flex; align-items: center; justify-content: center; height: 120px;
  padding: .5rem; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--wash);
}
.gloss-thumb img { max-width: 100%; max-height: 100%; }
.gloss-thumb-empty {
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.prose h4.gloss-term {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem;
  margin: 0 0 .35rem; font: 500 1.3rem/1.25 var(--serif);
}
.gloss-layer {
  border-left: 3px solid var(--layer); padding-left: .45rem; color: var(--muted);
  font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.gloss-def { margin: 0 0 .5rem; }
.gloss-links {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0;
  color: var(--muted); font: 13px/1.5 var(--sans);
}
@media (max-width: 40rem) {
  .gloss-entry { grid-template-columns: 1fr; gap: .8rem; }
  .gloss-thumb { height: 150px; }
}

/* Concept graph (web/graph.py, graph.js): the turning sphere beside its detail panel. */
.graph { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1.5rem; align-items: start; margin: 1.5rem 0 1rem; }
.graph-canvas { display: block; width: 100%; aspect-ratio: 1; max-height: 78vh; cursor: grab; touch-action: pan-y;
  background: var(--wash); border: 1px solid var(--rule); border-radius: 12px; }
.graph-canvas:focus-visible, .graph-term:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
.graph-panel { font-family: var(--sans); font-size: .95rem; line-height: 1.45; }
.graph-hint { color: var(--muted); }
.graph-thumb img { width: 100%; max-height: 9rem; object-fit: contain; }
.graph-term { margin: .3rem 0 .4rem; padding-left: .55rem; border-left: 4px solid var(--layer);
  font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1.2; }
.graph-def { margin: 0 0 .5rem; }
.graph-links a { margin-right: .8rem; white-space: nowrap; }
.graph-panel h4 { margin: .9rem 0 .35rem; font-family: var(--sans); font-weight: 600; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.graph-rel { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.graph-rel button, .graph-matches button { font: inherit; font-size: .85rem; color: var(--fg); background: none; cursor: pointer;
  border: 1px solid var(--rule); border-left: 4px solid var(--layer); border-radius: 6px; padding: .15rem .5rem; }
.graph-rel button:hover, .graph-matches button:hover, .graph-matches button:first-of-type { background: var(--wash); }
/* Search above the canvas: its matches drop over the canvas, so typing never moves the page. */
.graph-stage { position: relative; min-width: 0; }
.graph-find { position: relative; display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; font-family: var(--sans); }
.graph-find label { font-size: .85rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.graph-find input { flex: 1; min-width: 0; font: 16px/1.3 var(--sans); color: var(--fg); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 8px; padding: .45rem .7rem; }
.graph-find input:focus-visible, .graph-zoom button:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
.graph-find input::-webkit-search-cancel-button { -webkit-appearance: none; width: 12px; height: 12px; cursor: pointer; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 2l8 8M10 2l-8 8'/%3E%3C/svg%3E") center / contain no-repeat; }
.graph-matches { position: absolute; z-index: 2; top: 100%; left: 0; right: 0; margin-top: .3rem; display: flex; flex-wrap: wrap;
  align-items: center; gap: .35rem; padding: .5rem .6rem; font-size: .85rem; color: var(--muted);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; }
.graph-matches:empty { padding: 0; border: 0; }  /* kept in the page, so the status is announced */
.graph-matches button { padding: .3rem .6rem; }
.graph-zoom { position: absolute; right: .6rem; bottom: .6rem; display: flex; flex-direction: column; gap: .35rem; }
.graph-zoom button { width: 2.5rem; height: 2.5rem; padding: 0; font: 500 1.3rem/1 var(--sans); color: var(--fg); cursor: pointer;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; }
.graph-zoom button:hover { background: var(--wash); }
.graph-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0 0 .8rem; padding: 0; list-style: none;
  font-family: var(--sans); font-size: .85rem; color: var(--muted); }
.graph-legend li::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem;
  border-radius: 50%; background: var(--layer); vertical-align: -.05rem; }
.graph-list { font-family: var(--sans); font-size: .9rem; color: var(--muted); }
@media (max-width: 900px) {
  .graph { grid-template-columns: 1fr; }
}