/*
 * Turing Codex deck theme for reveal.js 6.
 *
 * A reveal theme is NOT just a set of --r-* custom properties. Core reveal.css
 * contains no typography at all -- it never references --r-main-color or
 * --r-heading-color -- so every theme also ships the base rules that consume
 * them: heading colour and size, body colour, paragraph margins, lists, links,
 * the nav arrows and the progress bar. Declaring only the variables leaves
 * reset.css's `font: inherit` in charge, and headings render at body size in
 * near-black. Hence the "base layer" section below; it is required, not decor.
 *
 * Written out rather than imported so we avoid the stock themes' cost:
 * black.css/white.css are ~575 KB each because they inline four base64 fonts.
 *
 * Everything is scoped to .reveal-viewport / .reveal, never :root. (The stock
 * dracula and serif themes declare on :root, which leaks site-wide.) The
 * palette matches assets/sketches/*.js so canvases sit flush on the slides.
 *
 * The deck is dark-only by design and does not follow Relearn's light/dark
 * variant, consistent with the existing p5 embeds.
 */

.reveal-viewport {
  --r-background-color: #0f172a; /* slate-900, same as .p5-wrapper */
  --r-main-color: #e2e8f0;
  --r-heading-color: #f8fafc;
  --r-link-color: #5eead4;
  --r-link-color-hover: #99f6e4;
  --r-link-color-dark: #14b8a6;
  --r-selection-background-color: #334155;
  --r-selection-color: #f8fafc;
  --r-bold-color: #ffffff;
  --r-italic-color: var(--r-main-color);
  --r-inline-code-color: #e2e8f0;
  --r-list-bullet-color: #5eead4;

  --r-main-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --r-heading-font: var(--r-main-font);
  --r-code-font: "Cascadia Code", "Fira Code", Consolas, Menlo, Monaco, "Liberation Mono", monospace;

  --r-main-font-size: 34px;
  --r-heading-font-weight: 700;
  --r-heading-line-height: 1.12;
  --r-heading-letter-spacing: -0.02em;
  --r-heading-text-transform: none;
  --r-heading-text-shadow: none;
  --r-heading1-text-shadow: none;
  --r-heading1-size: 2.4em;
  --r-heading2-size: 1.7em;
  --r-heading3-size: 1.2em;
  --r-heading4-size: 1em;
  --r-block-margin: 22px;
  --r-heading-margin: 0 0 24px 0;
  --r-overlay-element-bg-color: 226, 232, 240;
  --r-overlay-element-fg-color: 15, 23, 42;

  /* Semantic accents. Kept in sync with TCDeck.COL in sketches/deck/_shared.js
     so a value named `a` is the same amber on a slide and inside a canvas. */
  --tc-a: #f59e0b; /* amber  */
  --tc-b: #14b8a6; /* teal   */
  --tc-c: #8b5cf6; /* violet */
  --tc-muted: #94a3b8;
  --tc-dim: #64748b;
  --tc-line: #1e293b;
  --tc-surface: #111c33;

  background: radial-gradient(ellipse at 50% 0%, #16233f 0%, #0f172a 62%);
}

/* ═══════════════════════════════════════════════════════════════ BASE LAYER
   What every stock reveal theme provides and core reveal.css does not. Keep
   this above the deck utilities below, so those override rather than fight it.
   ════════════════════════════════════════════════════════════════════════ */

.reveal {
  font-family: var(--r-main-font);
  font-size: var(--r-main-font-size);
  font-weight: 400;
  color: var(--r-main-color);
}

.reveal ::selection {
  color: var(--r-selection-color);
  background: var(--r-selection-background-color);
  text-shadow: none;
}

.reveal .slides section,
.reveal .slides section > section {
  line-height: 1.3;
  font-weight: inherit;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: var(--r-heading-margin);
  color: var(--r-heading-color);
  font-family: var(--r-heading-font);
  font-weight: var(--r-heading-font-weight);
  line-height: var(--r-heading-line-height);
  letter-spacing: var(--r-heading-letter-spacing);
  text-transform: var(--r-heading-text-transform);
  text-shadow: var(--r-heading-text-shadow);
  word-wrap: break-word;
}

.reveal h1 { font-size: var(--r-heading1-size); text-shadow: var(--r-heading1-text-shadow); }
.reveal h2 { font-size: var(--r-heading2-size); }
.reveal h3 { font-size: var(--r-heading3-size); }
.reveal h4 { font-size: var(--r-heading4-size); }

.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
  margin-bottom: 0;
}

.reveal p {
  margin: var(--r-block-margin) 0;
  line-height: 1.3;
}

.reveal strong,
.reveal b {
  font-weight: 700;
  color: var(--r-bold-color);
}

.reveal em,
.reveal i {
  font-style: italic;
  color: var(--r-italic-color);
}

.reveal ol,
.reveal dl,
.reveal ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 1em;
}

.reveal ol { list-style-type: decimal; }
.reveal ul { list-style-type: disc; }
.reveal ul ul { list-style-type: square; }
.reveal ul ul ul { list-style-type: circle; }

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-left: 40px;
}

.reveal ul li::marker,
.reveal ol li::marker {
  color: var(--r-list-bullet-color);
}

.reveal dt { font-weight: 700; }
.reveal dd { margin-left: 40px; }

.reveal blockquote {
  display: block;
  position: relative;
  width: 70%;
  margin: var(--r-block-margin) auto;
  padding: 0.6em 1em;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--tc-b);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--r-italic-color);
}

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block;
}

.reveal q { font-style: italic; }

.reveal img,
.reveal video,
.reveal iframe {
  max-width: 95%;
  max-height: 95%;
}

.reveal img { margin: var(--r-block-margin) 0; }

.reveal sup { vertical-align: super; font-size: smaller; }
.reveal sub { vertical-align: sub; font-size: smaller; }

.reveal small {
  display: inline-block;
  vertical-align: top;
  font-size: 0.6em;
  line-height: 1.2em;
}

.reveal small * { vertical-align: top; }

.reveal a {
  color: var(--r-link-color);
  text-decoration: none;
  transition: color 0.15s ease;
}

.reveal a:hover {
  color: var(--r-link-color-hover);
  text-shadow: none;
  border: none;
}

/* The nav arrows and the progress bar take their colour from the theme too --
   this is why they render near-black without it. */
.reveal .controls {
  color: var(--r-link-color);
}

/* Core puts the slide number at bottom:8px right:8px, which is exactly where
   the nav arrows live -- they overlap out of the box. Move it to the opposite
   corner rather than nudging the arrows, which need the room to fan out. */
.reveal .slide-number {
  right: auto;
  left: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  background-color: rgba(15, 23, 42, 0.7);
  color: var(--tc-muted);
  font-family: var(--r-main-font);
  font-size: 13px;
}

.reveal .slide-number a { color: inherit; }

.reveal .progress {
  color: var(--r-link-color);
  background: rgba(0, 0, 0, 0.2);
}

/* ══════════════════════════════════════════════════════ DECK CUSTOMISATION */

.reveal .deck-kicker {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tc-b);
  margin: 0 0 0.9em 0;
}

.reveal .deck-lead {
  font-size: 1.15em;
  color: #cbd5e1;
  max-width: 20em;
  margin-left: auto;
  margin-right: auto;
}

.reveal .deck-note {
  font-size: 0.66em;
  color: var(--tc-muted);
}

.reveal .deck-hint {
  font-size: 0.5em;
  color: var(--tc-dim);
  letter-spacing: 0.06em;
}

.reveal .deck-hint kbd,
.reveal kbd {
  font-family: var(--r-code-font);
  font-size: 0.9em;
  background: var(--tc-line);
  border: 1px solid #334155;
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.1em 0.45em;
  color: #cbd5e1;
}

.reveal .t-a { color: var(--tc-a); }
.reveal .t-b { color: var(--tc-b); }
.reveal .t-c { color: var(--tc-c); }
.reveal .t-muted { color: var(--tc-muted); }

/* A word set in the code face mid-sentence, e.g. a register name. */
.reveal .mono {
  font-family: var(--r-code-font);
  font-size: 0.92em;
}

/* -------------------------------------------------------------------- chips */

.reveal .deck-chip {
  display: inline-block;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.3em 0.85em;
  margin: 0.22em;
  border-radius: 999px;
  border: 1px solid currentColor;
  /* Tint the fill from the chip's own colour so one class covers every accent. */
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.reveal .deck-chip.is-a { color: var(--tc-a); }
.reveal .deck-chip.is-b { color: var(--tc-b); }
.reveal .deck-chip.is-c { color: var(--tc-c); }

/* On the closing slide the chips are the whole slide, so they read as buttons
   rather than as annotations. */
.reveal section.title-slide .deck-chip {
  font-size: 1em;
  padding: 0.55em 1.5em;
  margin: 0.4em;
}

/* -------------------------------------------------------------------- grids */

/* align-items must stay `stretch` (the default) and the cards must NOT carry
   `height: 100%`. A percentage height on a start-aligned grid item resolves
   against a row that was itself sized by that item, so the card paints taller
   than the row it reports -- and the paragraph after the grid lands on top of
   it. Stretch equalises the cards without any percentage. */
.reveal .deck-grid {
  display: grid;
  gap: 1.1em;
  align-items: stretch;
  text-align: left;
  width: 100%;
}

.reveal .deck-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reveal .deck-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.reveal .deck-card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-line);
  border-radius: 12px;
  padding: 0.9em 1.1em;
  font-size: 0.72em;
  line-height: 1.45;
}

.reveal .deck-card h4 {
  font-size: 1.05em;
  margin: 0 0 0.4em 0;
  color: var(--r-heading-color);
}

.reveal .deck-card.is-a { border-color: color-mix(in srgb, var(--tc-a) 45%, var(--tc-line)); }
.reveal .deck-card.is-b { border-color: color-mix(in srgb, var(--tc-b) 45%, var(--tc-line)); }
.reveal .deck-card.is-c { border-color: color-mix(in srgb, var(--tc-c) 45%, var(--tc-line)); }

/* ------------------------------------------------------------------- tables */

.reveal table {
  font-size: 0.66em;
  border-collapse: collapse;
  margin: 0 auto;
}

.reveal table th,
.reveal table td {
  border: none;
  border-bottom: 1px solid var(--tc-line);
  padding: 0.5em 1em;
  text-align: left;
}

.reveal table th {
  color: var(--tc-muted);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82em;
}

/* --------------------------------------------------------------------- code */

/* `position: relative` is load-bearing, not cosmetic: reveal's stepped
   highlighting (data-line-numbers="1|2|3") renders each step as
   `.hljs:not(:first-child).fragment { position: absolute; top: 0; left: 0 }`.
   Without a positioned ancestor those steps escape the block and pile up on
   top of the slide. */
.reveal pre {
  display: block;
  position: relative;
  width: 100%;
  margin: var(--r-block-margin) auto;
  text-align: left;
  font-family: var(--r-code-font);
  font-size: 0.5em;
  line-height: 1.35;
  word-wrap: break-word;
  box-shadow: none;
  background: #0b1120;
  border: 1px solid var(--tc-line);
  border-radius: 12px;
  overflow: hidden;
}

.reveal pre code {
  display: block;
  padding: 1.1em 1.3em;
  max-height: none;
  overflow: auto;
  word-wrap: normal;
  background: transparent;
  border-radius: 12px;
}

/* The highlight plugin puts `code-wrapper` on the <pre>. */
.reveal .code-wrapper { white-space: normal; }
.reveal .code-wrapper code { white-space: pre; }

/* Core reveal.css pins highlighted code to 15pt with
   `html:not(.print-pdf) .reveal .hljs`, which outranks any `.reveal pre code`
   rule -- so the override has to match that selector to take effect. */
html:not(.print-pdf) .reveal .hljs {
  font-size: 20pt;
  line-height: 1.4;
}

.reveal code {
  font-family: var(--r-code-font);
  text-transform: none;
  tab-size: 2;
  color: var(--r-inline-code-color);
}

.reveal :not(pre) > code {
  background: var(--tc-line);
  border-radius: 5px;
  padding: 0.12em 0.4em;
  font-size: 0.88em;
  color: #e2e8f0;
}

/* Reveal's stepped highlighting dims the non-current lines; monokai's default
   dim is too subtle on this background. */
.reveal .hljs.has-highlights tr:not(.highlight-line) {
  opacity: 0.32;
}

/* ------------------------------------------------------------ canvas slides */

/* The host reveal-deck.js mounts a p5 instance into. Reveal lays the deck out
   at a fixed 1280x720 and scales the whole thing to the window, so these are
   absolute sizes in deck space and stay correct at every window size.

   Sized with an explicit height rather than flex on purpose: reveal writes
   `display` inline on every loaded slide (and with !important when configured
   that way), so any `display: flex` on a section either loses to reveal or, if
   forced, defeats the display:none that hides inactive slides -- which would
   show every canvas slide at once. Normal block flow sidesteps that entirely.
   The canvas simply fills the host, the same contract assets/sketches/*.js
   already expect from .p5-canvas-target. */
.reveal .deck-sketch {
  width: 100%;
  height: 480px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  border: 1px solid var(--tc-line);
}

.reveal .deck-sketch canvas {
  display: block;
  touch-action: none;
}

/* A slide that is mostly canvas: trim the heading and caption so the canvas
   gets the height. 36 + 500 + 40 fits inside the 677px of usable deck height. */
.reveal section.canvas-slide > h2,
.reveal section.canvas-slide > h3 {
  font-size: 1.05em;
  margin: 0 0 12px 0;
}

.reveal section.canvas-slide .deck-sketch {
  height: 500px;
}

.reveal section.canvas-slide > .deck-caption {
  font-size: 0.55em;
  color: var(--tc-muted);
  margin: 12px 0 0 0;
}

/* --------------------------------------------------------------- title slide */

/* background-clip: text clips the gradient to the element's box, and the tight
   heading line-height (1.12) puts the box above the descenders -- the tail of a
   `g` gets cut off. The extra line-height and padding give the box room to
   contain them. */
.reveal section.title-slide h1 {
  letter-spacing: -0.03em;
  line-height: 1.24;
  padding-bottom: 0.08em;
  background: linear-gradient(100deg, #f8fafc 10%, var(--tc-b) 55%, var(--tc-c) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------------- topbar */

.deck-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1rem;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.82rem;
  color: #cbd5e1;
  background: linear-gradient(to bottom, rgba(10, 16, 30, 0.92), rgba(10, 16, 30, 0));
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Auto-hidden while presenting; reveal-deck.js drops the class on activity.
   pointer-events goes with it so the invisible bar can't eat clicks meant for
   a canvas underneath. */
.deck-topbar.is-hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.deck-topbar a,
.deck-topbar button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 0.3rem 0.55rem;
  font: inherit;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Hover only where hovering exists: on touch the compat mouseover fires on tap
   and never unsets, leaving the control stuck lit. */
@media (hover: hover) {
  .deck-topbar a:hover,
  .deck-topbar button:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.08);
  }
}

.deck-topbar a:focus-visible,
.deck-topbar button:focus-visible {
  opacity: 1;
  outline: 2px solid var(--tc-b);
  outline-offset: 1px;
}

.deck-topbar-home {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.deck-topbar-home img {
  border-radius: 5px;
}

.deck-topbar-spacer {
  flex: 1 1 auto;
}

.deck-topbar-btn[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .deck-topbar-home span {
    display: none;
  }
}

/* Reveal's own controls sit bottom-right; nudge the progress bar off the very
   edge so it does not read as a browser loading bar. */
.reveal .progress {
  height: 3px;
  color: var(--tc-b);
}

/* ---------------------------------------------------------------- print-pdf */

@media print {
  .deck-topbar {
    display: none;
  }
}