/* Three-pane docs theme for the HTML weaver. */
/* NOTE: Copied from `web/style.css` in XekriRedmane's `ultima1_reveng`; see `scripts/PROVENANCE.md`. */
:root {
  /* Parchment light theme: cream paper, sepia ink, rubric-red accent,
     blue-ink links -- an illuminated-manuscript palette. */
  --bg: #eae0c2; --fg: #3b3327; --muted: #786b53; --line: #d4c5a0;
  --accent: #b22f12; --link: #0f5bbd; --panel: #e1d5b0; --code-bg: #e4d8b6;
  --kw: #6f42c1; --dir: #0b5394; --num: #2f7d32; --str: #a05a2c;
  --cm: #897a5c; --lbl: #985a16; --sym: #3b3327; --sidebar: 17rem; --outline: 14rem;
}
:root[data-theme="dark"] {
  --bg: #15171a; --fg: #e6e8ea; --muted: #9aa3ab; --line: #2a2e33;
  --accent: #e06a5c; --link: #6ca8ff; --panel: #1b1e22; --code-bg: #1d2024;
  --kw: #c699ff; --dir: #79b8ff; --num: #7ee787; --str: #ff7b8a;
  --cm: #8b949e; --lbl: #ffa657; --sym: #e6e8ea;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 17px; line-height: 1.6;
}
/* Subtle paper grain, light mode only (delete this block for flat parchment). */
:root[data-theme="light"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .asm, .num, .mn, .dir { font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; }

/* topbar */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center;
  gap: .75rem; padding: .5rem .9rem; background: var(--panel);
  border-bottom: 1px solid var(--line); font-family: system-ui, sans-serif;
}
.brand { font-weight: 700; font-family: system-ui, sans-serif; }
.iconbtn { background: none; border: 1px solid var(--line); color: var(--fg);
  border-radius: 6px; padding: .25rem .5rem; cursor: pointer; font-size: 1rem; }
.search { position: relative; margin-left: auto; }
.search input { width: 16rem; max-width: 40vw; padding: .35rem .6rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
  color: var(--fg); font-family: system-ui, sans-serif; }
#results { position: absolute; right: 0; top: 2.4rem; width: 28rem; max-width: 80vw;
  max-height: 60vh; overflow: auto; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); display: none; }
#results.show { display: block; }
#results a { display: block; padding: .5rem .7rem; border-bottom: 1px solid var(--line);
  color: var(--fg); font-family: system-ui, sans-serif; }
#results a:hover { background: var(--panel); text-decoration: none; }
#results .k { font-size: .72rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; }

/* layout (page-grid is the three-pane container; kept distinct from any
   author content class such as table.layout to avoid display collisions) */
.page-grid { display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr) var(--outline);
  align-items: start; }
.left { position: sticky; top: 3.1rem; height: calc(100vh - 3.1rem); overflow: auto;
  padding: 1rem .75rem; border-right: 1px solid var(--line);
  font-family: system-ui, sans-serif; font-size: .92rem; }
.right { position: sticky; top: 3.1rem; height: calc(100vh - 3.1rem); overflow: auto;
  padding: 1rem .75rem; font-family: system-ui, sans-serif; font-size: .86rem; }
main { padding: 1.2rem 2rem 6rem; max-width: 52rem; }

/* toc / outline */
.toc, .outline ul { list-style: none; margin: 0; padding-left: .6rem; }
.toc > li { margin: .15rem 0; }
.toc ul { list-style: none; padding-left: .9rem; }
.toc a { color: var(--fg); }
.toc a.current { color: var(--accent); font-weight: 700; }
.toc-aux { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.outline-title { font-weight: 700; color: var(--muted); text-transform: uppercase;
  font-size: .72rem; letter-spacing: .05em; margin-bottom: .4rem; }
.outline li.lvl3 { padding-left: .8rem; }
.outline a { color: var(--muted); }
.outline a.active { color: var(--accent); font-weight: 600; }

/* prose */
main h1 { font-size: 1.9rem; border-bottom: 2px solid var(--line); padding-bottom: .3rem; }
main h2 { font-size: 1.4rem; margin-top: 2rem; }
main h3 { font-size: 1.15rem; }
.hlink { opacity: 0; margin-left: .4rem; color: var(--muted); font-weight: 400; }
h1:hover .hlink, h2:hover .hlink, h3:hover .hlink { opacity: 1; }
/* section/chapter numbers, and the bare cross-references that cite them */
.secnum { color: var(--muted); font-weight: 400; }
a.xref { font-variant-numeric: tabular-nums; white-space: nowrap; }
main table { border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
main th, main td { border: 1px solid var(--line); padding: .35rem .7rem; text-align: left; }
main thead th { background: var(--panel); }
table.layout td code { background: none; }
.addr { background: var(--code-bg); border-radius: 4px; padding: 0 .25rem; color: var(--muted); }
/* memory-band table (memory-map figures) */
table.memmap td:first-child { font-family: "SF Mono", Menlo, Consolas, monospace; white-space: nowrap; }
table.memmap tr.hot td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
table.memmap tr.hot td:first-child { border-left: 3px solid var(--accent); }
.dim { color: var(--muted); font-size: .85em; }
/* byte-field / structure-of-arrays tables */
table.bytefield td:nth-child(1), table.bytefield td:nth-child(2) {
  font-family: "SF Mono", Menlo, Consolas, monospace; white-space: nowrap; text-align: right; }
table.bytefield td:nth-child(2) { color: var(--muted); }
table.soa td:first-child { font-family: "SF Mono", Menlo, Consolas, monospace; white-space: nowrap; }
blockquote { border-left: 3px solid var(--line); margin: 1rem 0; padding: .2rem 1rem; color: var(--muted); }
main img { max-width: 100%; height: auto; }
/* sprite pixel grids (Chapter 3): one cell per pixel, colours as in main.nw */
main table.spritegrid { border-collapse: collapse; margin: 1rem 0; }
main table.spritegrid td { width: 12px; height: 12px; padding: 0; border: none; }
main table.spritegrid td.row { width: auto; padding-right: .5rem; text-align: right; line-height: 12px;
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: .7rem; color: var(--muted); }
table.spritegrid td.k { background: #000000; }
table.spritegrid td.b { background: #1BA1E2; }
table.spritegrid td.w { background: #E6E6E6; }
table.spritegrid td.o { background: #FF8000; }
/* sprite catalog (Chapter 3): captioned grids that flow across the page */
.sprite-catalog { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 1rem 0; }
.sprite-catalog figure.sprite { margin: 0; }
.sprite-catalog figcaption { font-size: .8rem; color: var(--muted); text-align: center; margin-bottom: .25rem; }
.sprite-catalog table.spritegrid { margin: 0; }
.sprite-catalog table.spritegrid td { width: 10px; height: 10px; }
/* level catalog (Chapter 6): linked thumbnails of all levels that flow across the page */
.level-catalog { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.level-catalog figure.level { margin: 0; }
.level-catalog figcaption { font-size: .8rem; color: var(--muted); text-align: center; margin-bottom: .25rem; }
.level-catalog img { display: block; image-rendering: pixelated; }
pre.verbatim { background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px;
  padding: .8rem 1rem; overflow: auto; font-size: .88rem; }
.mermaid { margin: 1.2rem 0; text-align: center; }
:not(pre) > code { background: var(--code-bg); border-radius: 4px; padding: 0 .25rem; font-size: .9em; }

/* code chunks */
.chunk { border: 1px solid var(--line); border-radius: 8px; margin: 1.1rem 0;
  overflow: hidden; background: var(--bg); }
.chunk-head { display: flex; align-items: center; gap: .5rem; background: var(--panel);
  border-bottom: 1px solid var(--line); padding: .35rem .6rem;
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: .85rem; }
.chunk-title { color: var(--accent); font-weight: 600; }
.pageref { color: var(--muted); font-weight: 400; }
.collapse { width: 1.1rem; height: 1.1rem; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); cursor: pointer; color: var(--muted); padding: 0; line-height: 1; }
.collapse::before { content: "\2212"; }            /* minus */
.chunk.collapsed .collapse::before { content: "+"; }
.chunk.collapsed .chunk-body, .chunk.collapsed .chunk-foot { display: none; }
.chunk-body { overflow: auto; }
pre.asm { margin: 0; padding: .7rem 1rem; font-size: .85rem; line-height: 1.5; white-space: pre; }
.chunk-foot { border-top: 1px solid var(--line); background: var(--panel);
  padding: .4rem .7rem; font-family: system-ui, sans-serif; font-size: .8rem; color: var(--muted); }
.chunk-foot > div { margin: .1rem 0; }
.used-in.not-used { font-style: italic; }

/* asm token colors */
.asm .mn { color: var(--kw); font-weight: 600; }
.asm .dir { color: var(--dir); }
.asm .num { color: var(--num); }
.asm .str { color: var(--str); }
.asm .cm { color: var(--cm); font-style: italic; }
.asm .lbl { color: var(--lbl); font-weight: 600; }
.asm .sym { color: var(--sym); }
.asm .idlink { color: var(--link); font-weight: 600; text-decoration: none; border-bottom: 1px dotted var(--link); }
.asm .chunkref, .chunkref { color: var(--accent); font-weight: 600; }
/* Inline prose refs ([[ ]] chunk/symbol links) read stronger when bolder. */
.ref { font-weight: 600; }

.index-list { columns: 2; font-family: "SF Mono", Menlo, monospace; font-size: .9rem; }

/* popover */
.popover { position: absolute; z-index: 50; max-width: 32rem; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.2);
  padding: .5rem .7rem; font-family: system-ui, sans-serif; font-size: .82rem; }
.popover .pop-name { color: var(--accent); font-weight: 600; font-family: monospace; }
.popover .pop-page { color: var(--muted); }
.popover pre { background: var(--code-bg); border-radius: 6px; padding: .4rem .6rem;
  margin: .4rem 0 0; overflow: auto; font-size: .8rem; }

/* responsive */
#menu-toggle { display: none; }
@media (max-width: 1100px) { .right { display: none; } .page-grid { grid-template-columns: var(--sidebar) 1fr; } }
@media (max-width: 760px) {
  #menu-toggle { display: inline-block; }
  .page-grid { grid-template-columns: 1fr; }
  .left { position: fixed; left: 0; top: 3.1rem; width: 80vw; background: var(--bg);
    z-index: 25; transform: translateX(-100%); transition: transform .2s; }
  .left.open { transform: translateX(0); }
  main { padding: 1rem 1.1rem 5rem; }
}