/* Default design tokens — engine base layer. A consuming site's theme.css is
   appended after this by the build, so any token here can be overridden there;
   but the engine ships a complete, self-sufficient default palette so a site
   with no (or a partial) theme still renders legibly. Colors are system-color
   based (Canvas/CanvasText/…) and adapt to the user's light/dark preference. */
:root {
  color-scheme: light dark;

  --bg:       Canvas;
  --fg:       CanvasText;
  --muted:    color-mix(in srgb, CanvasText 60%, Canvas);
  --dim:      GrayText;
  --accent:   ActiveText;
  --accent-2: oklch(from var(--accent) l c calc(h + 180));
  --warning:  Mark;

  --accent-dim:  color-mix(in srgb, var(--accent) 60%, var(--bg));
  --border:      color-mix(in srgb, CanvasText 30%, Canvas);
  --border-tree: color-mix(in srgb, CanvasText 15%, Canvas);
  --border-tag:  color-mix(in srgb, CanvasText 40%, Canvas);
  --surface:     color-mix(in srgb, CanvasText 8%, Canvas);
  --surface-2:   color-mix(in srgb, CanvasText 5%, Canvas);
  --highlight:   color-mix(in srgb, CanvasText 12%, Canvas);

  --indent: 1.1rem;
  --bullet-w: 1rem;
  --tree-gap: 0.3rem;
  --tree-indent-offset: 0.4rem;
  --body-border-w: 2px;
  --md-fade-h: 2rem;
  --node-max-w: 600px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

html, body {
  background: var(--bg);
  color: var(--fg);
  height: 100vh;
  height: 100dvh; /* dynamic viewport height — adjusts for mobile browser chrome */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1rem;
}

/* ── Root layout ── */
#root {
  max-width: 960px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header, footer {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  flex-shrink: 0;
}

header { padding-top: 1rem; }
footer { padding-bottom: 1rem; }

#tree-scroll {
  flex: 1 1 0;
  overflow-x: auto;
  overflow-y: auto;
  padding-bottom: 1rem;

  /* The tree column is a size container — node widths and any "narrow column"
     responsive rules below trigger off this, not the viewport. This is what
     makes the tree reflow when an exhibit panel takes half the screen. */
  container-type: inline-size;
  container-name: tree;
  --node-w: min(var(--node-max-w), 100cqi - 1.5rem);
}

/* ── Header ── */
header {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.6rem;
}

header h1 {
  color: var(--fg);
}

header .meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

/* ── Footer ── */
footer {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

/* ── Tree chrome ── */
.tree {
  list-style: none;
  padding: 0 0.75rem;
}

.node { position: relative; }

.node-content {
  display: flex;
  align-items: baseline;
  gap: var(--tree-gap);
  padding: 0.15rem 0;
  cursor: default;
  width: var(--node-w);
  flex-shrink: 0;
}

.node-content:hover .node-id { opacity: 1; }

/* ── Toggle bullet ── */
.toggle::before { font-family: var(--node-bullet-font, 'IBM Plex Mono', 'Noto Sans Mono', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Noto Emoji', monospace); }
.toggle {
  position: relative;
  flex-shrink: 0;
  width: var(--bullet-w);
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s;
  display: inline-block;
  text-align: center;
}

/* Symbol hierarchy — all visual, no JS involvement */
/* aria-expanded lives on .node-content (the treeitem) */
.toggle::before                                                                    { content: '•'; }
.node-content[aria-expanded]:not([style*="--node-bullet"]) .toggle:not(.leaf)::before { content: '▶'; }
.node-content[style*="--node-bullet"] .toggle::before                             { content: var(--node-bullet); }

/* Subscript ▶ badge when a custom-bullet node is expandable (positions against .toggle, which is position: relative) */
.node-content[aria-expanded][style*="--node-bullet"]:not(.node-content--bullet-spins) .toggle::after {
  content: '▶';
  font-family: monospace;
  font-size: 0.75em;
  line-height: 1;
  position: absolute;
  bottom: 0.05em;
  right: -0.1em;
  color: inherit;
  transition: transform 0.15s;
  text-shadow: 0 0 0.2em var(--bg), 0 0 0.2em var(--bg), 0 0 0.2em var(--bg);
}
.node-content[aria-expanded="true"][style*="--node-bullet"]:not(.node-content--bullet-spins) .toggle::after {
  transform: rotate(90deg);
  transform-origin: center center;
  bottom: -0.1em;
  right: 0em;
}

.toggle:hover { color: var(--accent); }
.node-content[aria-expanded="true"]:not([style*="--node-bullet"]) .toggle:not(.leaf),
.node-content[aria-expanded="true"].node-content--bullet-spins .toggle:not(.leaf) { transform: rotate(90deg); }
.toggle.leaf  { cursor: default; color: var(--muted); }
.toggle.leaf:hover { color: var(--muted); }

.node-content:focus .toggle { color: var(--accent); cursor: pointer; }

/* ── Label ── */
.node-label {
  flex: 1;
  line-height: 1.5;
  word-break: break-word;
}

.node-label strong { font-weight: 700; }
.node-label em     { font-style: italic; }
.node-label a      { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.node-label code   { background: var(--surface); padding: 0 3px; border-radius: 2px; font-size: 0.85em; }
.node-label rt     { font-size: 0.7em; }
.node-label .vinculum { text-decoration: overline; }
.node-label .vinculum .vinculum { text-decoration: overline double; }
.node-label .strikethrough { text-decoration: line-through; }

/* ── Inline options (listbox) ── */
.inline-option {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.inline-option[aria-selected="true"] {
  color: var(--fg);
}

/* ── .badges: inline listbox styled as 88x31 badge strip ── */
.node-content.badges {
  align-items: center;
}
.node-content.badges .node-label[role="listbox"] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.node-content.badges .inline-option {
  display: block;
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
  line-height: 0;
}
.node-content.badges .inline-option:hover {
  outline: 1px solid var(--border);
  outline-offset: 1px;
}
.node-content.badges .inline-option[aria-selected="true"] {
  outline: 1px solid var(--muted);
  outline-offset: 1px;
}
.node-content.badges .inline-option img {
  display: block;
  image-rendering: pixelated;
  width: 88px;
  height: 31px;
}

/* ── .tabs: inline listbox styled as tab strip ── */
.node-content.tabs .node-label[role="listbox"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.node-content.tabs .inline-option {
  padding: 0.1rem 0.6rem;
  border-bottom: 2px solid var(--border-tree);
  text-decoration: none;
  font-size: 0.85rem;
  color: var(--muted);
  transition: color 0.1s, border-color 0.1s;
  cursor: pointer;
}
.node-content.tabs .inline-option:hover {
  color: var(--fg);
  border-bottom-color: var(--border);
}
.node-content.tabs .inline-option[aria-selected="true"] {
  color: var(--fg);
  border-bottom-color: var(--muted);
}

/* ── Permalink ── */
.node-id {
  font-size: 0.68rem;
  color: var(--dim);
  opacity: 0;
  transition: opacity 0.15s;
  text-decoration: none;
  margin-left: 0.3rem;
  padding: 0 0.2rem;
  flex-shrink: 0;
}
.node-id:hover { color: var(--accent); }
/* ── External link icon ── */
.ext-icon {
  width: 0.85em;
  height: 0.85em;
  vertical-align: -0.15em;
  margin-left: 0.2em;
}

/* ── Children container ── */
.node-children {
  display: none;
  margin-left: calc(var(--bullet-w) + var(--tree-gap));
}

.node:has(> .node-content[aria-expanded="true"]) > .node-children { display: block; }

/* ── Nested tree ── */
.tree .tree {
  padding: 0;
}

.node-children > * + .tree {
  margin-top: 0.5rem;
}

/* ── Selection & focus highlight ── */
/* aria-selected persists when focus moves into the node's doc zone (children content). */
.node-content[aria-selected="true"] {
  background: var(--surface-2);
  border-radius: 3px;
}
.node-content:focus {
  outline: none;
  background: var(--surface-2);
  border-radius: 3px;
}
.node-content:focus .toggle  { color: var(--accent); }
.node-content:focus .node-id { opacity: 1; color: var(--muted); }
.node-content[aria-selected="true"] .node-id { opacity: 1; }

/* ── Body mode indicator ── */
.node-content:has(.md-body-scroll:focus) { box-shadow: 0 0 0 1px var(--accent); border-radius: 3px; }
.node-content:focus .md-body { border-left-color: var(--accent-dim); }

/* ── Minor nodes ── */
.node-content.minor .node-label { color: var(--muted); }

/* ── Tag chips ── */
.node-tag {
  display: inline-block;
  font-size: 0.68rem;
  line-height: 1.2;
  padding: 0 5px;
  border: 1px solid var(--tag-color, var(--border-tag));
  border-radius: 3px;
  color: var(--tag-color, var(--muted));
  margin-right: 0.35rem;
  vertical-align: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}

.node-tag--link,
.node-label .node-tag--link {
  cursor: pointer;
  color: var(--tag-color, var(--muted));
  text-decoration: none;
}
.node-tag--link:hover {
  background: var(--tag-color, var(--border-tag));
  color: var(--bg);
}

/* ── Footer links ── */
footer a { color: inherit; text-decoration: none; }

/* Footer sections — break between interpuncts, not inside a section */
footer .footer-section { white-space: nowrap; }

/* ── Show-hidden toggle (footer) ── */
.show-hidden-toggle { cursor: pointer; user-select: none; }
/* Visually hidden but kept in tab order and accessible to screen readers */
.show-hidden-toggle input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.show-hidden-toggle::before { content: '[ ] '; }
.show-hidden-toggle:has(input:checked)::before { content: '[×] '; }
.show-hidden-toggle:has(input:focus-visible) { outline: 1px solid var(--accent); outline-offset: 1px; }

/* ── Transclusion error ── */
.node-load-error {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* ── Static content (no-JS fallback) ── */
#static-content {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 0 0.75rem 1rem;

  /* Same container setup as #tree-scroll so static nodes reflow on narrow columns */
  container-type: inline-size;
  container-name: tree;
  --node-w: min(var(--node-max-w), 100cqi - 1.5rem);
}

.static-tree {
  list-style: none;
  padding-left: var(--indent);
  margin: 0;
}

/* Top-level list has no indent */
#static-content > .static-tree {
  padding-left: 0;
}

#static-content > .static-tree > li + li {
  margin-top: 1em;
}

.static-tree > li {
  position: relative;
  font-size: 0.88rem;
  line-height: 1.5;
  word-break: break-word;
}

/* Tree bullet */
.static-tree > li::before {
  content: '•';
  position: absolute;
  left: calc(-1 * var(--bullet-w));
  width: var(--bullet-w);
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Links */
.static-tree a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.static-tree .strikethrough { text-decoration: line-through; }

/* Inline formatting */
.static-tree code {
  background: var(--surface);
  padding: 0 3px;
  border-radius: 2px;
  font-size: 0.85em;
}

/* Tag chips */
.static-tag {
  display: inline-block;
  font-size: 0.68rem;
  line-height: 1.2;
  padding: 0 5px;
  border: 1px solid var(--tag-color, var(--border-tag));
  border-radius: 3px;
  color: var(--tag-color, var(--muted));
  margin-right: 0.35rem;
  vertical-align: 0.05em;
  white-space: nowrap;
  text-decoration: none;
}

.static-tag--link {
  cursor: pointer;
}
.static-tag--link:hover {
  background: var(--tag-color, var(--border-tag));
  color: var(--bg);
}

/* Hidden nodes */
.static-hidden { display: none; }

/* Markdown body blocks */
.static-body {
  margin: 0.3rem 0 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--border-tree);
  font-size: 0.85rem;
  color: var(--fg);
}

.static-body pre {
  background: var(--surface);
  padding: 0.5rem;
  border-radius: 3px;
  overflow-x: auto;
  margin: 0.4rem 0;
}

.static-body pre code {
  padding: 0;
  background: inherit;
}

.static-body p { margin: 0.3rem 0; }

.static-body table {
  border-collapse: collapse;
  margin: 0.4rem 0;
}
.static-body th, .static-body td {
  border: 1px solid var(--border);
  padding: 0.2rem 0.5rem;
  font-size: 0.82rem;
}

/* Transclusion references — distinct from regular links */
a.static-ref {
  color: var(--muted);
  text-decoration: none;
}
a.static-ref:hover {
  text-decoration: underline;
}

/* Interpage transclusions — visually distinct from in-page jumps */
a.static-ref--interpage {
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Exhibit handle — small icon link to the underlying asset */
a.static-exhibit-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85em;
  margin-left: 0.25em;
}
a.static-exhibit-link:hover {
  color: var(--accent);
}

/* URL-mode iframe — plain link to the embedded page */
a.static-iframe-link {
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  font-family: var(--mono, monospace);
  font-size: 0.85em;
}

.static-remote {
  color: var(--muted);
  font-style: italic;
  font-size: 0.82rem;
}

/* ── Divider ── */
.node-content--hr {
  margin-left: calc(var(--bullet-w) + var(--tree-gap));
  width: calc(var(--node-w) - var(--bullet-w) - var(--tree-gap));
}

.divider-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.2rem 0;
  width: 100%;
}

/* ── Gap ── */
/* Vertical whitespace between siblings — no line, no content. */
.node-content--gap {
  height: 0.4rem;
}

/* ── Narrow page (device-level chrome) ── */
@media (max-width: 768px) and (orientation: portrait) {
  html, body {
    padding: 0.5rem;
  }
  header, footer {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ── Narrow tree column (driven by container width, not viewport) ──
   Fires whether the column is narrow because the viewport is small or
   because an exhibit/sidepanel has squeezed the tree column. */
@container tree (max-width: 600px) {
  .tree .tree { padding: 0; }
  .md-body { margin-left: 0; }
}

/* ── Hide header on mobile ── */
@media (max-width: 768px) and (orientation: portrait), (orientation: landscape) and (max-height: 540px) {
  header { display: none !important; }
}

/* ── rvmark iframe guest (embedded as iframe node in another rvmark page) ── */
html.rvmark-iframe-guest,
html.rvmark-iframe-guest body {
  padding: 0;
  height: 100%;
  overflow: hidden;
}
html.rvmark-iframe-guest footer { display: none; }
html.rvmark-iframe-guest .tree { padding: 0; }

/* ── rvmark exhibit guest (embedded in an exhibit panel) ── */
html.rvmark-exhibit-guest,
html.rvmark-exhibit-guest body {
  padding: 0;
  height: 100%;
  overflow: hidden;
}
html.rvmark-exhibit-guest #root {
  max-width: none;
  margin: 0;
}
html.rvmark-exhibit-guest header,
html.rvmark-exhibit-guest footer { display: none; }

/* ============================================================
   Merged type styles (formerly src/types/*.css).
   ============================================================ */

/* ---- markdown ---- */
/* types/markdown.css — styles for the markdown node type */

.md-body {
  /* Border aligns with centre of child bullet column (same x as node-children + bullet-w/2) */
  margin-top: 0.4rem;
  margin-left: calc(var(--bullet-w) / 2 - var(--body-border-w) / 2);
  margin-right: calc(var(--bullet-w) / 2 - var(--body-border-w) / 2);
  margin-bottom: 0.5rem;
  border-left: var(--body-border-w) solid var(--border-tree);
  min-width: 0;
  width: 100%;
}

.md-body-scroll {
  max-height: 30vh;
  overflow-y: auto;
  outline: none;
  padding: 0.4rem 0.6rem 0.4rem 0.6rem;
  line-height: 1.75;
  min-width: 0;
  overflow-x: auto;
}

/* ── Scroll fade masks ── */
.md-body[data-overflow]:not([data-scrolled-to-top]):not([data-scrolled-to-bottom]) .md-body-scroll {
  mask-image: linear-gradient(to bottom, transparent 0%, black var(--md-fade-h), black calc(100% - var(--md-fade-h)), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black var(--md-fade-h), black calc(100% - var(--md-fade-h)), transparent 100%);
}
.md-body[data-overflow][data-scrolled-to-top]:not([data-scrolled-to-bottom]) .md-body-scroll {
  mask-image: linear-gradient(to bottom, black calc(100% - var(--md-fade-h)), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--md-fade-h)), transparent 100%);
}
.md-body[data-overflow][data-scrolled-to-bottom]:not([data-scrolled-to-top]) .md-body-scroll {
  mask-image: linear-gradient(to bottom, transparent 0%, black var(--md-fade-h), black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black var(--md-fade-h), black 100%);
}

/* ── Block elements ── */
.md-body p  { margin: 0.3rem 0; }

.md-body h1, .md-body h2, .md-body h3,
.md-body h4, .md-body h5, .md-body h6 {
  margin: 0.6rem 0 0.2rem;
  font-weight: 600;
}
.md-body h2 { font-size: 1.25rem; }
.md-body h3 { font-size: 1.1rem; }
.md-body h4 { font-size: 1rem; }
.md-body h5 { font-size: 0.92rem; }
.md-body h6 { font-size: 0.85rem; color: var(--muted); }

.md-body ul, .md-body ol {
  padding-left: 1.2rem;
  margin: 0.3rem 0;
}

.md-body blockquote {
  border-left: 2px solid var(--border);
  padding-left: 0.6rem;
  color: var(--muted);
  margin: 0.3rem 0;
}

.md-body pre {
  background: var(--surface);
  padding: 0.5rem;
  border-radius: 3px;
  overflow-x: auto;
  margin: 0.4rem 0;
  line-height: 1.45;
}
.md-body pre code { padding: 0; background: inherit; }

.md-body code {
  background: var(--surface);
  padding: 0 3px;
  border-radius: 2px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85em;
}

.md-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Tables ── */
.md-body table {
  border-collapse: collapse;
  margin: 0.4rem 0;
  font-size: 0.92em;
  width: 100%;
}
.md-body th, .md-body td {
  border: 1px solid var(--border);
  padding: 0.2rem 0.5rem;
  text-align: left;
}
.md-body thead th {
  background: var(--surface-2);
  font-weight: 500;
}
.md-body tbody tr:nth-child(even) { background: var(--bg); }

/* code inside td/th: don't shrink further inside already-smaller table text */
.md-body td code,
.md-body th code {
  font-size: 1em;
}

/* ── Math blocks ── */
.md-math-block {
  text-align: center;
  margin: 0.6rem 0;
  overflow-x: auto;
}

/* ---- video ---- */
/* types/video.css — styles for the video node type */

.node-content--video {
  display: block;
  width: calc(var(--node-w) - var(--bullet-w) - var(--tree-gap));
  padding: 0;
}

.node-content--video:focus {
  box-shadow: -1px 0 0 0 var(--accent);
}

.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin: 0;
  background: #000;
}

.video-wrap iframe,
.video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
}

/* Letterbox bars on non-16:9 files render pitch black, not the page background. */
.video-wrap video {
  background: #000;
  object-fit: contain;
}

/* ---- html ---- */
/* types/html.css — styles for the html node type */

.html-body {
  max-width: calc(100% - var(--indent));
  box-sizing: border-box;
  margin-left: var(--indent);
  padding: 0.2rem 1rem 0.3rem calc(var(--bullet-w) + 0.3rem);
  border-left: 2px solid var(--border);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.html-body:focus { outline: none; }

.html-body-iframe {
  display: block;
  border: none;
  min-height: 8rem;
}

.html-body.html-body-iframe {
  padding: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

.node-content--iframe {
  padding: 0;
}

.node-content--iframe:focus {
  box-shadow: -1px 0 0 0 var(--accent);
}

.node-content--iframe-active,
.node-content--iframe-active:focus,
.node-content--iframe-focused {
  box-shadow: -1px 0 0 0 var(--muted);
  outline: none;
}

/* ---- image ---- */
/* types/image.css — styles for the image node type */

.img-body {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}

.img-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

/* dark-mode: invert — inverts the image in dark mode (useful for monochrome SVGs with black paths) */
@media (prefers-color-scheme: dark) {
  .img-body--dark-invert img {
    filter: invert(1);
  }
}

/* dark-mode: background — adds a white background in dark mode (useful for images that assume a light canvas) */
@media (prefers-color-scheme: dark) {
  .img-body--dark-background img {
    background: #fff;
    border-radius: 2px;
  }
}

/* align: left — explicit left-align (same as default, but useful with width to avoid stretching) */
.img-body--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* align: center */
.img-body--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* align: right */
.img-body--right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.img-body figcaption {
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---- exhibit ---- */
/* ── Exhibit panel ── */

.exhibit-panel {
  display: none;
  overflow: hidden;
  background: var(--bg);
  flex-direction: column;
  position: relative;
}

#exhibit-divider {
  display: none;
}

.exhibit-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.exhibit-panel:hover .exhibit-close { opacity: 1; }
@media (hover: none) { .exhibit-close { opacity: 1; } }
.exhibit-close:hover { color: var(--accent); border-color: var(--accent); }
.exhibit-close:focus { opacity: 1; outline: 1px solid var(--accent); }

/* The iframe fills all available space */
.exhibit-iframe {
  border: none;
  width: 100%;
  flex: 1;
}

.exhibit-error,
.exhibit-hint {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.exhibit-error {
  white-space: pre-wrap;
  word-break: break-word;
}

.exhibit-hint {
  white-space: pre-line;
}

@media (hover: none) and (pointer: coarse) {
  .exhibit-hint { display: none; }
}

/* ── Layout: exhibit open ── */
/*
 * body.exhibit-open: two-column grid — tree on left, exhibit on right.
 */

body.exhibit-open #root {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 1em;
}

body.exhibit-open header {
  grid-column: 1 / -1;
  grid-row: 1;
}

body.exhibit-open footer {
  grid-column: 1 / -1;
  grid-row: 3;
}

body.exhibit-open #exhibit-divider {
  display: block;
  grid-column: 2;
  grid-row: 2;
  background: var(--border);
}

body.exhibit-open #tree-scroll {
  grid-column: 1;
  grid-row: 2;
}

body.exhibit-open .exhibit-panel {
  display: flex;
  grid-column: 3;
  grid-row: 2;
}

/* ── Portrait mobile: stack vertically ── */
@media (max-width: 768px) and (orientation: portrait) {
  body.exhibit-open #root {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 1px 1fr auto;
    column-gap: 0;
    row-gap: 1em;
  }

  body.exhibit-open header { display: none !important; }

  body.exhibit-open .exhibit-panel {
    grid-column: 1;
    grid-row: 2;
  }

  body.exhibit-open #exhibit-divider {
    grid-column: 1;
    grid-row: 3;
  }

  body.exhibit-open #tree-scroll {
    grid-column: 1;
    grid-row: 4;
  }

  body.exhibit-open footer {
    grid-row: 5;
  }
}

/* ---- tr ---- */
/* ── tr row <li>: dissolve into the parent grid ── */
.tr-row {
  display: contents;
}

/* ── Toggle bullet: column 1 grid item ── */
.tr-row > .tr-toggle {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: var(--bullet-w);
}

/* ── .node-content of a tr row: subgrid row spanning columns 2+ ── */
.tr-row > .node-content {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 2 / -1;
  align-items: stretch;
  border-left: 1px solid var(--border, #ddd);
  border-right: 1px solid var(--border, #ddd);
  border-bottom: 1px solid var(--border, #ddd);
  padding: 0;
  width: auto;
}

/* Restore top border after an expansion panel */
.tr-row:has(> .node-content[aria-expanded="true"]) + .tr-row > .node-content {
  border-top: 1px solid var(--border, #ddd);
}

/* ── Individual cells ── */
.tr-cell {
  padding: 0.2em 0.5em;
  font-size: 0.9em;
  border-right: 1px solid var(--border, #ddd);
  display: block;
  align-content: center;
}

.tr-cell:last-of-type {
  border-right: none;
}

/* ── Expansion panel ── */
.tr-row > .node-children {
  grid-column: 2 / -1;
  display: none;
  margin-left: 0;
}

.tr-row:has(> .node-content[aria-expanded="true"]) > .node-children {
  display: block;
}

.tr-row > .node-children > .tree {
  padding: 0;
}

/* Toggle arrow: driven by aria-expanded on sibling .node-content */
.tr-row:has(> .node-content[aria-expanded]) > .tr-toggle:not(.leaf)::before         { content: '▶'; }
.tr-row:has(> .node-content[aria-expanded="true"]) > .tr-toggle:not(.leaf)          { transform: rotate(90deg); }

/* Recolor toggle on focus */
.tr-row:has(> .node-content:focus) > .tr-toggle { color: var(--accent); cursor: pointer; }

/* No border-radius on selection/focus for tr rows */
.tr-row > .node-content[aria-selected="true"],
.tr-row > .node-content:focus {
  border-radius: 0;
}

/* code inside cells: match .node-label code styling */
.tr-cell code {
  background: var(--surface);
  padding: 0 3px;
  border-radius: 2px;
  font-size: 0.85em;
}

/* ---- table ---- */
/* ── table-node li: the grid container ── */
.table-node {
  display: grid;
  grid-template-columns: calc(var(--bullet-w) + var(--tree-gap)) var(--table-cols, repeat(1, 1fr));
  width: var(--node-w);
}

/* ── Toggle bullet: column 1, row 1 ── */
.table-node > .table-toggle {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bullet-w);
  justify-self: start;
}

/* ── Header row: columns 2+, row 1 ── */
.node-content--table {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 2 / -1;
  grid-row: 1;
  align-items: stretch;
  border: 1px solid var(--border, #ddd);
  padding: 0;
  width: auto;
}

.node-content--table .tr-cell {
  font-weight: 500;
}

/* ── Children container: dissolve into the parent grid ── */
.node:has(> .node-content--table[aria-expanded="true"]) > .node-children {
  display: contents;
  margin-left: 0;
}

.table-node > .node-children > .tree {
  display: contents;
}

/* First tr row top border, and tr rows following a non-tr node */
.table-node > .node-children > .tree > .tr-row:first-child > .node-content,
.table-node > .node-children > .tree > .node:not(.tr-row) + .tr-row > .node-content {
  border-top: 1px solid var(--border, #ddd);
}

/* Non-tr children: span full width including bullet zone */
.table-node > .node-children > .tree > .node:not(.tr-row) {
  grid-column: 1 / -1;
}

/* Toggle: + / − driven by aria-expanded on the sibling .node-content--table */
.table-node > .table-toggle:not(.leaf)::before                                  { content: '+'; }
.table-node:has(> .node-content--table[aria-expanded="true"]) > .table-toggle:not(.leaf)::before { content: '−'; }

/* Recolor toggle on focus */
.table-node:has(> .node-content--table:focus) > .table-toggle { color: var(--accent); cursor: pointer; }

/* Selection / focus: no border-radius */
.table-node > .node-content--table[aria-selected="true"],
.table-node > .node-content--table:focus {
  border-radius: 0;
}

/* ── Fonts ── */
@font-face {
  font-family: 'Noto Sans Mono';
  src: url('_assets/fonts/NotoSansMono-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Symbols';
  src: url('_assets/fonts/NotoSansSymbols-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Symbols 2';
  src: url('_assets/fonts/NotoSansSymbols2-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Emoji';
  src: url('_assets/fonts/NotoEmoji-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ──
   We have no brand — that is the brand. Colors come from the OS via CSS
   system colors, so the site inherits the user's light/dark/high-contrast
   theme without a prefers-color-scheme block. */
:root {
  color-scheme: light dark;

  --bg:       Canvas;
  --fg:       CanvasText;
  --muted:    color-mix(in srgb, CanvasText 60%, Canvas);
  --dim:      GrayText;
  --accent:   ActiveText;
  --accent-2: oklch(from var(--accent) l c calc(h + 180));
  --warning:  Mark;

  --indent: 1.1rem;
  --bullet-w: 1rem;
  --tree-gap: 0.3rem;
  --tree-indent-offset: 0.4rem;
  --body-border-w: 2px;
  --md-fade-h: 2rem;
  --node-max-w: 600px;

  --accent-dim:  color-mix(in srgb, var(--accent) 60%, var(--bg));
  --border:      color-mix(in srgb, CanvasText 30%, Canvas);
  --border-tree: color-mix(in srgb, CanvasText 15%, Canvas);
  --border-tag:  color-mix(in srgb, CanvasText 40%, Canvas);
  --surface:     color-mix(in srgb, CanvasText 8%, Canvas);
  --surface-2:   color-mix(in srgb, CanvasText 5%, Canvas);
  --highlight:   color-mix(in srgb, CanvasText 12%, Canvas);
}

/* ── Base typography ── */
html, body {
  font-family: serif;
  font-size: 15px;
  line-height: 1.6;
}

header h1 {
  font-family: 'EB Garamond', serif;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

@media (max-width: 768px) and (orientation: portrait) {
  header h1 { font-size: 1.4rem; }
}

/* ── Euclid ── */
/* Inline listbox options inside Euclid prose (figure references such as [AB],
   and the like) read as part of the running text: no underline, italic. */
.node-content.euclid .inline-option {
  text-decoration: none;
  font-style: italic;
}

/* Cross-reference citations ([Prop. 1.4], [Def. 1.15], …) are transcluding
   options tagged `.cite`. They read as little upright inline pills rather than
   running text, so they override the italic above. */
.node-content.euclid .inline-option.cite {
  font-style: normal;
  font-size: 0.85em;
  padding: 0 0.35em;
  margin: 0 0.1em;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
  white-space: nowrap;
}
.node-content.euclid .inline-option.cite:hover {
  color: var(--fg);
  border-color: var(--accent);
}
.node-content.euclid .inline-option.cite[aria-selected="true"] {
  color: var(--fg);
  border-color: var(--muted);
}

/* ── Fun ── */
.chowder {
  position: relative;
  isolation: isolate;
}
.chowder::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -9999px;
  right: -9999px;
  background: url('_assets/chowder.png') repeat;
  background-attachment: fixed;
  z-index: -1;
}