/* The codex: a phosphor terminal in the dark, a line-printer printout in the light. See the Style Guide. */
:root {
  --paper: #F4F1E6;
  --band: #E3ECD9;
  --ink: #1A1A1A;
  --dim: #63635B;
  --accent: #1E6B34;
  --alert: #A3241A;
  --rule: #B9B6A8;
  --glow: 0px;
  --trace: 3px;
  --font: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B0C0A;
    --band: #0B0C0A;
    --ink: #FFB000;
    --dim: #A87A00;
    --accent: #33FF66;
    --alert: #FF4436;
    --rule: #3A2C00;
    --glow: 3px;
    --trace: 2px;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0B0C0A;
  --band: #0B0C0A;
  --ink: #FFB000;
  --dim: #A87A00;
  --accent: #33FF66;
  --alert: #FF4436;
  --rule: #3A2C00;
  --glow: 3px;
  --trace: 2px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  /* Green-bar fanfold paper in the light; a flat screen in the dark, where band = paper. */
  background-image: repeating-linear-gradient(var(--paper) 0 72px, var(--band) 72px 144px);
  color: var(--ink);
  font: 15px/1.6 var(--font);
  padding-inline: 16px;
}
main { max-width: 860px; margin: 0 auto; padding-block: 24px 48px; display: grid; gap: 22px; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
a:hover { border-bottom-style: solid; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bar {
  max-width: 860px; margin: 0 auto; padding: 12px 0; display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: space-between; align-items: center; border-bottom: 1px solid var(--rule);
}
.bar .home { font-weight: 600; letter-spacing: .08em; border: none; color: var(--ink); }
.bar .home a { border: none; color: inherit; }
.bar nav { display: flex; gap: 16px; align-items: center; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; }
.theme { font: inherit; background: none; color: var(--ink); border: 1px solid var(--rule); border-radius: 0; padding: 2px 8px; cursor: pointer; }

.frame {
  border: 3px double var(--ink); padding: 10px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
h1 { margin: 0; font-size: clamp(18px, 4.5vw, 26px); font-weight: 600; letter-spacing: .08em; overflow-wrap: anywhere; }
.grade { font-weight: 600; letter-spacing: .06em; }
h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: .06em; }

.readout { margin: 0; }
.label { font-weight: 600; letter-spacing: .06em; margin-right: 8px; }
.alert { color: var(--alert); border-bottom-color: var(--alert); }

.block { display: grid; gap: 2px; }
dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 18px; padding-left: 2ch; }
dt { color: var(--dim); letter-spacing: .06em; white-space: nowrap; }
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dt:empty { display: none; }
dt:empty + dd { grid-column: 1 / -1; }
.block > p { margin: 0; padding-left: 2ch; }

/* A design note: the words, in normal case, set off from the readouts. */
.note { border-left: 2px solid var(--rule); padding-left: 16px; }
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }
.note h1, .note h2, .note h3 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin: 18px 0 6px; }
.note blockquote {
  margin: 12px 0; padding: 8px 14px; color: var(--dim);
  border: 1px dashed var(--rule); background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--rule) 20%, transparent) 6px 7px);
}
.note table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.note th, .note td { border: 1px solid var(--rule); padding: 4px 8px; text-align: left; }
.note code, .note pre { font-family: var(--font); }
.note pre { overflow-x: auto; border: 1px solid var(--rule); padding: 10px; }

.search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search label { font-weight: 600; letter-spacing: .06em; }
.search input {
  flex: 1; min-width: 12ch; font: inherit; color: var(--ink); background: transparent;
  border: none; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 2px 0; caret-color: var(--accent);
}
/* A checkbox sits by its label, not stretched across the row like a text box. */
.search input[type=checkbox] { flex: none; min-width: 0; }

/* Graphs: the crafting tree, and each item's own. Pointing at a node lights its chain. */
.graph-wrap { overflow-x: auto; border: 1px solid var(--rule); padding: 8px; }
.graph { display: block; max-width: none; height: auto; }
/* The whole tree is wider than the text column, so it takes the window's width, centred, and scrolls only past that. */
.graph-wrap.wide { width: calc(100vw - 32px); margin-left: calc(50% - 50vw + 16px); box-sizing: border-box; }
.graph-wrap.wide .graph { margin-inline: auto; }
.graph text { font: 13px var(--font); }
/* A halo in the page colour, so lines that pass behind a label don't cut through it. */
.graph .node:not(.lit) text { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.graph .heading { fill: var(--dim); font-weight: 600; letter-spacing: .08em; font-size: 12px; }
.graph .node text { fill: var(--accent); }
.graph .node.design text { fill: var(--ink); font-style: italic; }
.graph .node.source text { fill: var(--dim); }
.graph .node.self text { fill: var(--ink); font-weight: 600; }
.graph a.node:hover text, .graph a.node:focus text { text-decoration: underline; }
.graph .edge { fill: none; stroke: var(--rule); stroke-width: 1.2; transition: opacity .15s, stroke .15s; }
.graph.tracing .edge { opacity: .2; }
/* The full tree has too many links to read at once: its lines show only for the traced chain, or all faintly on request. */
.graph.quiet .edge { opacity: 0; }
.graph.quiet.all-lines .edge { opacity: .45; }
.graph.quiet.tracing .edge:not(.up):not(.down) { opacity: 0; }
.toggle { font: inherit; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: none; border: 1px solid var(--rule); padding: 4px 10px; cursor: pointer; }
.toggle[aria-pressed="true"] { border-color: var(--accent); }
.graph.tracing .node:not(.lit) text { fill-opacity: .35; }
.graph .edge.up { opacity: 1; stroke: var(--ink); stroke-width: 1.6; filter: drop-shadow(0 0 calc(var(--glow) * .7) var(--ink)); }
.graph .edge.down { opacity: 1; stroke: var(--accent); stroke-width: var(--trace); filter: drop-shadow(0 0 var(--glow) var(--accent)) drop-shadow(0 0 calc(var(--glow) * 2) var(--accent)); }
.graph .node.lit text { filter: drop-shadow(0 0 calc(var(--glow) * .7) currentColor); font-weight: 600; }
/* On an item's own graph every line concerns it, so they glow from the start: in as ink, out as the accent. */
.graph.local .edge { stroke: var(--accent); stroke-width: 1.6; filter: drop-shadow(0 0 calc(var(--glow) * .7) var(--accent)); }
.graph.local .edge.into { stroke: var(--ink); filter: drop-shadow(0 0 calc(var(--glow) * .7) var(--ink)); }
@media (prefers-reduced-motion: reduce) { .graph .edge { transition: none; } }

footer { max-width: 860px; margin: 0 auto; padding: 16px 0 32px; color: var(--dim); font-size: 12px; border-top: 1px solid var(--rule); }

@media (max-width: 560px) {
  body { font-size: 14px; }
  dl { gap: 2px 12px; padding-left: 0; }
}

/* A note's contents line. */
.toc { margin: 0; padding-left: 2ch; }
.note h2[id] { scroll-margin-top: 16px; }