/* Code presentation layer on top of presentation.css: JetBrains Mono
   examples on a semi-transparent dark "looking glass" panel floating
   over the animated shader background. */

/* The deck title reads better at heading scale than at the engine's
   full display size. */
.slide h1 {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
}

.slide pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(0.95rem, 2vw, 1.35rem);
  line-height: 1.55;
  text-align: left;
  color: #e8ecf3;
  background: rgba(10, 13, 18, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1.1em 1.5em;
  margin: 0.4em 0 0.8em;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  max-width: 88vw;
  overflow-x: auto;
  /* Overflow stays scrollable, but the scrollbar chrome would pierce the
     glass panel — hide it. */
  scrollbar-width: none;
  /* The glass panel provides its own contrast — the slide-wide shadow
     would just blur the glyph edges. */
  text-shadow: none;
}

.slide pre::-webkit-scrollbar {
  display: none;
}

/* Longer program listings — tighter type, so the whole block fits the
   slide together with its heading and note. */
.slide pre.dense {
  /* vh-based so tall listings shrink with the window instead of clipping */
  font-size: clamp(0.55rem, 1.9vh, 0.95rem);
  line-height: 1.45;
}

/* Beside a side title the listing may take the whole slide height, so it
   scales by height alone, and the body column rather than the 88vw cap
   bounds its width. 2.4vh keeps a 24-line listing inside the 92vh body. */
.side-title pre.dense {
  font-size: clamp(0.6rem, 2.4vh, 1.5rem);
  max-width: 100%;
  margin: 0;
}

.slide pre code {
  font-family: inherit;
  white-space: pre;
}

/* Inline code in prose and lists. */
.slide p code,
.slide li code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85em;
  background: rgba(10, 13, 18, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.35em;
  padding: 0.08em 0.35em;
}

/* Inside a link the accent highlight box already frames the name —
   drop the code chip so the two boxes don't stack. */
.slide a code {
  background: none;
  border: none;
  padding: 0;
}

/* Code slides read better with the example wider than the 34ch prose cap. */
.slide pre + .note {
  max-width: 52ch;
}

/* Minimal hand-marked syntax highlighting. */
.slide pre .k { color: #c792ea; }                    /* keywords */
.slide pre .s { color: #c3e88d; }                    /* strings */
.slide pre .t { color: #82cfff; }                    /* types */
.slide pre .a { color: #ffcb6b; }                    /* annotations */
.slide pre .n { color: #f78c6c; }                    /* numbers */
.slide pre .f { color: #a882ff; }                    /* DSL verbs */
.slide pre .c { color: #7f8c9e; font-style: italic; }/* comments */
.slide pre .err { color: #ff8a80; }                  /* failure values */

/* Knowledge-graph slide: inline SVG drawn in the same glass idiom as the
   code panels. Sized by the shorter viewport dimension so the whole graph
   stays on the slide beside its heading and note. */
.slide svg.graph {
  width: min(86vw, 118vh);
  height: auto;
  overflow: visible;
  margin: 0 0 0.3em;
  font-family: "Lora", Georgia, serif;
}
.slide svg.graph line {
  stroke: rgba(168, 130, 255, 0.75);
  stroke-width: 2;
}
.slide svg.graph .pred {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 15px;
  fill: #c792ea;
  text-anchor: middle;
  dominant-baseline: middle;
  /* Dark halo lets the label sit on top of its own edge line. */
  paint-order: stroke;
  stroke: #15191f;
  stroke-width: 7px;
  stroke-linejoin: round;
}
.slide svg.graph .node rect {
  fill: rgba(10, 13, 18, 0.6);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1.5;
}
.slide svg.graph .node .name {
  font-size: 21px;
  fill: #ffffff;
  text-anchor: middle;
}
/* Node names that are code (an intent's script, a fulfillment's result). */
.slide svg.graph .node .name.code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 16px;
}
.slide svg.graph .node .type {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  fill: #82cfff;
  text-anchor: middle;
}
/* Node categories, each with its own tint and outline: actants, the
   cogitation, its enunciations (drawn as containers), and the phenomena
   they encapsulate. Memorized facts keep the plain glass. */
.slide svg.graph .node.actant rect {
  fill: color-mix(in srgb, #ffcb6b 12%, rgba(10, 13, 18, 0.6));
  stroke: rgba(255, 203, 107, 0.6);
}
.slide svg.graph .node.actant .type { fill: #ffcb6b; }
.slide svg.graph .node.cogitation rect {
  fill: color-mix(in srgb, #c3e88d 12%, rgba(10, 13, 18, 0.6));
  stroke: rgba(195, 232, 141, 0.6);
}
.slide svg.graph .node.cogitation .type { fill: #c3e88d; }
.slide svg.graph .node.enunciation rect {
  fill: rgba(195, 232, 141, 0.05);
  stroke: rgba(195, 232, 141, 0.4);
}
.slide svg.graph .node.enunciation .type { fill: #c3e88d; }
.slide svg.graph .node.phenomenon rect {
  fill: color-mix(in srgb, #f78c6c 12%, rgba(10, 13, 18, 0.6));
  stroke: rgba(247, 140, 108, 0.6);
}
.slide svg.graph .node.phenomenon .type { fill: #f78c6c; }
/* Edges routed around other nodes are paths; styled like the lines. */
.slide svg.graph path.edge {
  fill: none;
  stroke: rgba(168, 130, 255, 0.75);
  stroke-width: 2;
}
/* Beside a side title the graph is bound by the body column's width and,
   through its 1000:560 aspect, by the slide height with room for the note. */
.side-title svg.graph {
  width: min(100%, 145vh);
}
/* The graph is wider than prose, so its note may be too. */
.slide svg.graph + .note { max-width: 60ch; }
/* The pair from the previous slide, so the eye finds it first. */
.slide svg.graph .hi line,
.slide svg.graph .hi path.edge { stroke: #a882ff; stroke-width: 3; }
.slide svg.graph .node.hi rect { stroke: #a882ff; stroke-width: 2; }

@media print {
  .slide svg.graph .node rect { fill: rgba(8, 10, 14, 0.85); }
}

/* Hanging indent: the engine renders the "›" marker inline, so wrapped
   bullet lines start flush with it — reserve the marker column instead. */
.slide ul li {
  position: relative;
  padding-left: 1.2em;
}
.slide ul li::before {
  position: absolute;
  left: 0;
}

/* Bullet-heavy slides (Golem XIV, the ecosystem map): a tighter list and a
   narrower figure keep every bullet on a single line. */
.slide.compact .figure-row img {
  max-width: 30vw;
}
.slide.compact ul {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.55;
}

@media print {
  /* backdrop-filter does not print; a nearly opaque panel keeps the code
     legible over the captured shader frame. */
  .slide pre {
    background: rgba(8, 10, 14, 0.85);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}