exhibits.css

/* Interactive exhibits — online edition only.
   Namespaced under .fp-exhibit; nothing here touches the book's own styles,
   except the cross-reference links that split.py generates (a.xref below). */

/* Cross-reference links (Chapter N, Prop. N.N, Appendix X…), generated by
   split.py at build time. Muted on purpose: label density is high, and
   default link styling would turn the page blue. */
a.xref { color: inherit; text-decoration: underline dotted 1px; text-underline-offset: 2px; }
a.xref:hover { color: #005a9c; text-decoration-style: solid; }

/* Part-page frontispieces (title page and partN pages) — the SVG plates
   referenced from the source markdown. */
img.fp-frontispiece { display: block; margin: 2.75rem auto 0; max-width: 100%; height: auto; }
img.fp-spot { display: block; margin: 2.4rem auto; max-width: 100%; height: auto; }

.fp-exhibit { display: none; }
.fp-exhibit.fp-live {
  display: block;
  margin: 1.6rem 0 0.4rem;
  --fp-ink: #1b1e22;
  --fp-muted: #5a6270;
  --fp-line: #d8dce1;
  --fp-accent: #005a9c;
  --fp-accent-soft: #e3eef7;
  --fp-card: #ffffff;
  --fp-code: #eef1f4;
  --fp-ok: #2e7d4f;
  --fp-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.9rem;
}

.fp-exhibit .fp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 0.8rem 0; }
@media (max-width: 720px) { .fp-exhibit .fp-cols { grid-template-columns: 1fr; } }

.fp-exhibit .fp-panel { background: var(--fp-card); border: 1px solid var(--fp-line);
  border-radius: 5px; margin: 0.8rem 0; overflow: hidden; }
.fp-exhibit .fp-cols .fp-panel { margin: 0; display: flex; flex-direction: column; }
.fp-exhibit .fp-head { font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--fp-muted); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--fp-line);
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fp-exhibit .fp-body { padding: 0.6rem 0.8rem; overflow-x: auto; }

.fp-exhibit textarea { font-family: var(--fp-mono); font-size: 0.78rem; line-height: 1.6;
  border: 0; background: transparent; color: var(--fp-ink); padding: 0.6rem 0.8rem;
  width: 100%; min-height: 170px; resize: vertical; display: block; }
.fp-exhibit textarea:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: -2px; }
.fp-exhibit textarea.fp-short { min-height: 96px; }
.fp-exhibit textarea[readonly] { opacity: 0.5; cursor: not-allowed; }

.fp-exhibit pre.fp-out { font-family: var(--fp-mono); font-size: 0.78rem; line-height: 1.65;
  margin: 0; padding: 0.6rem 0.8rem; overflow-x: auto; background: transparent; border: 0; }

.fp-exhibit .fp-tok-name { color: var(--fp-accent); }
.fp-exhibit .fp-tok-lit { color: var(--fp-ok); }
.fp-exhibit .fp-tok-var { font-style: italic; }
.fp-exhibit .fp-tok-kw { color: var(--fp-muted); }
.fp-exhibit .fp-dup { opacity: 0.45; text-decoration: line-through; }
.fp-exhibit .fp-add { background: color-mix(in srgb, var(--fp-ok) 14%, transparent); }
.fp-exhibit .fp-new { background: var(--fp-accent-soft); }
.fp-exhibit .fp-dim { opacity: 0.5; }

.fp-exhibit button { font-size: 0.72rem; font-family: inherit; cursor: pointer;
  background: var(--fp-card); color: var(--fp-ink); border: 1px solid var(--fp-line);
  border-radius: 4px; padding: 0.25rem 0.6rem; }
.fp-exhibit button:hover { border-color: var(--fp-accent); color: var(--fp-accent); }
.fp-exhibit button:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: 1px; }
.fp-exhibit .fp-btns { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }

.fp-exhibit .fp-controls { display: flex; gap: 0.6rem; align-items: center;
  flex-wrap: wrap; margin: 0.8rem 0; }
.fp-exhibit .fp-note { font-size: 0.78rem; color: var(--fp-muted); margin: 0.5rem 0; }
.fp-exhibit .fp-note code, .fp-exhibit .fp-head code { font-size: 0.72rem; text-transform: none; }

.fp-exhibit .fp-seg { display: inline-flex; border: 1px solid var(--fp-line);
  border-radius: 5px; overflow: hidden; flex-wrap: wrap; }
.fp-exhibit .fp-seg label { padding: 0.3rem 0.7rem; color: var(--fp-muted);
  background: var(--fp-card); font-size: 0.72rem; cursor: pointer; margin: 0; }
.fp-exhibit .fp-seg label + label { border-left: 1px solid var(--fp-line); }
.fp-exhibit .fp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fp-exhibit .fp-seg input:checked + span { color: var(--fp-accent); font-weight: 600; }
.fp-exhibit .fp-seg label:has(input:checked) { background: var(--fp-accent-soft); }
.fp-exhibit .fp-seg input:focus-visible + span { outline: 2px solid var(--fp-accent); outline-offset: 2px; }

.fp-exhibit table.fp-res { border-collapse: collapse; font-family: var(--fp-mono); font-size: 0.78rem; }
.fp-exhibit table.fp-res th { font-family: inherit; font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fp-muted); text-align: left; font-weight: 600; }
.fp-exhibit table.fp-res th, .fp-exhibit table.fp-res td { padding: 0.25rem 1rem 0.25rem 0;
  border-bottom: 1px solid var(--fp-line); border-left: 0; border-right: 0; border-top: 0; }
.fp-exhibit table.fp-res tr:last-child td { border-bottom: 0; }

.fp-exhibit svg.fp-graph { width: 100%; height: auto; display: block; }
.fp-exhibit svg.fp-graph .fp-edge { stroke: var(--fp-line); stroke-width: 1.2; }
.fp-exhibit svg.fp-graph .fp-edge-lbl { font: 9px sans-serif; fill: var(--fp-muted); }
.fp-exhibit svg.fp-graph circle { fill: var(--fp-accent-soft); stroke: var(--fp-accent); stroke-width: 1.3; }
.fp-exhibit svg.fp-graph .fp-lit rect { fill: var(--fp-code); stroke: var(--fp-line); }
.fp-exhibit svg.fp-graph text.fp-n-lbl { font: 10px var(--fp-mono); fill: var(--fp-ink); }

/* ——— the rendered page (present) — self-contained looks, deliberately unlike the book ——— */
.fp-exhibit .fp-render { border-top: 1px solid var(--fp-line); }
.fp-exhibit .fp-rendered { padding: 1rem 1.2rem; }

.fp-exhibit .fp-theme-editorial .fp-rendered { background: #fbfaf7; color: #22211e;
  font-family: Georgia, "Times New Roman", serif; }
.fp-exhibit .fp-theme-editorial .fp-rendered h3 { font-size: 1.02rem; margin: 0 0 0.15rem;
  font-family: inherit; color: inherit; }
.fp-exhibit .fp-theme-editorial .fp-rendered .fp-card { border-bottom: 1px solid #ddd9cf; padding: 0.6rem 0; }
.fp-exhibit .fp-theme-editorial .fp-rendered .fp-card:last-child { border-bottom: 0; }
.fp-exhibit .fp-theme-editorial .fp-rendered dl { margin: 0.15rem 0; }
.fp-exhibit .fp-theme-editorial .fp-rendered dt { display: inline; font-style: italic; color: #6b675c; }
.fp-exhibit .fp-theme-editorial .fp-rendered dd { display: inline; margin: 0 0.8rem 0 0.3rem; }
.fp-exhibit .fp-theme-editorial .fp-rendered table { border-collapse: collapse; font-family: inherit; }
.fp-exhibit .fp-theme-editorial .fp-rendered th, .fp-exhibit .fp-theme-editorial .fp-rendered td {
  border: 0; border-bottom: 1px solid #ddd9cf; padding: 0.3rem 1.1rem 0.3rem 0; text-align: left; }

.fp-exhibit .fp-theme-console .fp-rendered { background: #101318; color: #d7dee7;
  font-family: var(--fp-mono); font-size: 0.8rem; }
.fp-exhibit .fp-theme-console .fp-rendered h3 { font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: #7fb4e8; margin: 0 0 0.25rem; font-family: sans-serif; }
.fp-exhibit .fp-theme-console .fp-rendered .fp-card { background: #171c23; border: 1px solid #262e38;
  border-radius: 4px; padding: 0.6rem 0.8rem; margin: 0 0 0.6rem; }
.fp-exhibit .fp-theme-console .fp-rendered .fp-card:last-child { margin-bottom: 0; }
.fp-exhibit .fp-theme-console .fp-rendered dt { color: #6c7788; }
.fp-exhibit .fp-theme-console .fp-rendered dt::after { content: ":"; }
.fp-exhibit .fp-theme-console .fp-rendered dd { margin: 0 0 0.2rem; color: #8fe3b4; }
.fp-exhibit .fp-theme-console .fp-rendered table { border-collapse: collapse; width: 100%; }
.fp-exhibit .fp-theme-console .fp-rendered th { color: #6c7788; font-family: sans-serif;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; text-align: left; }
.fp-exhibit .fp-theme-console .fp-rendered th, .fp-exhibit .fp-theme-console .fp-rendered td {
  border: 0; border-bottom: 1px solid #232b35; padding: 0.28rem 1rem 0.28rem 0; }

/* style stripped: browser defaults, more or less */
.fp-exhibit .fp-plain .fp-rendered { background: #fff; color: #000;
  font-family: "Times New Roman", Times, serif; font-size: 1rem; }
.fp-exhibit .fp-plain .fp-rendered h3 { font-size: 1.17rem; font-weight: bold; margin: 0.8rem 0 0.4rem; }
.fp-exhibit .fp-plain .fp-rendered dl { margin: 0.4rem 0; }
.fp-exhibit .fp-plain .fp-rendered dt { font-weight: normal; }
.fp-exhibit .fp-plain .fp-rendered dd { margin: 0 0 0.2rem 2.2rem; }
.fp-exhibit .fp-plain .fp-rendered .fp-card { margin: 0 0 0.6rem; }