/* ---------- slide deck (slides.html) — builds on style.css tokens ---------- */
body.deck { overflow: hidden;
  background-image: radial-gradient(circle, var(--dot) 1.2px, transparent 1.2px);
  background-size: 26px 26px; }

#progress { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 30;
  background: transparent; }
#progress span { display: block; height: 100%; width: 0; background: var(--accent, var(--lime));
  border-right: 2px solid var(--ink); transition: width .25s var(--ease); }

#stage-wrap { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px;
  transform-origin: center center; transform: translate(-50%, -50%) scale(var(--scale, 1)); }

body.deck #controls { top: auto; bottom: 16px; right: 50%; transform: translateX(50%); }
body.deck #controls .counter { min-width: 72px; }
body.deck.is-fs #controls { opacity: 0; transition: opacity .2s; }
body.deck.is-fs #controls:hover { opacity: 1; }
body.deck #controls a.btn:hover { transform: translate(1.5px, 1.5px); box-shadow: 1.5px 1.5px 0 var(--ink); }
#notesBody p { font-size: 14px; line-height: 1.65; margin: 0 0 12px; }

/* ---------- slide frame ---------- */
.slide { --fit: 1; position: absolute; inset: 0; display: none; flex-direction: column;
  padding: 56px 76px 64px; box-sizing: border-box;
  font-size: calc(28px * var(--fit)); line-height: 1.45; color: var(--ink);
  background: var(--paper); border: 3px solid var(--ink); border-radius: 26px;
  box-shadow: 12px 12px 0 var(--ink); overflow: hidden; }
.slide.active { display: flex; animation: slideIn .28s var(--ease); }
@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.slide .num { position: absolute; top: 26px; right: 30px; font-family: var(--mono);
  font-size: 15px; font-weight: 500; color: #111; background: var(--accent);
  border: 2px solid var(--ink); border-radius: 999px; padding: 3px 12px;
  box-shadow: 2px 2px 0 var(--ink); }
.slide .kicker { align-self: flex-start; font-family: var(--mono); font-size: .62em;
  font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: #111;
  background: var(--accent); border: 2px solid var(--ink); border-radius: 999px;
  padding: 4px 14px; box-shadow: 3px 3px 0 var(--ink); margin-bottom: .7em; }
.slide h1 { font-family: var(--display); font-weight: 800; font-size: 2.45em;
  letter-spacing: -.045em; line-height: 1.04; margin: 0 0 .5em; }
.slide h2 { font-family: var(--display); font-weight: 700; font-size: 1.5em;
  letter-spacing: -.03em; line-height: 1.15; margin: 0 0 .5em; color: var(--text2); }

.slide .body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .8em; }
.slide .cols { flex: 1; min-height: 0; display: flex; gap: 2.2em; }
.slide .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .55em; }
.slide .col.media { flex: 1.25 1 0; justify-content: center; }
.slide .col.diagram { flex: 1.7 1 0; position: relative; }
.slide .cols.stack { flex-direction: column; gap: 1em; }
.slide .cols.stack .col.diagram { flex: 1 1 0; min-height: 260px; }
.slide .cols.stack .col:not(.diagram) { flex: 0 0 auto; }

.slide p { margin: 0; color: var(--text2); }
.slide p.label { font-family: var(--display); font-weight: 800; font-size: 1.05em;
  color: var(--ink); letter-spacing: -.02em; margin-top: .2em; }
.slide ul, .slide ol { margin: 0; padding-left: 1.2em; }
.slide li { margin: 0 0 .38em; }
.slide li::marker { color: var(--orange); font-weight: 700; }
.slide b { font-weight: 700; color: var(--ink); }
.slide a { color: inherit; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.slide code { font-size: .8em; overflow-wrap: anywhere; }

.slide blockquote { margin: 0; padding: .65em 1em; background: var(--accent); color: #111;
  border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink);
  font-weight: 600; font-size: .95em; }
.slide blockquote b { color: #111; }
.slide blockquote code { background: #111; color: var(--lime); }

.slide table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .82em;
  border: 2.5px solid var(--ink); border-radius: 14px; overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink); }
.slide th { background: var(--ink); color: var(--paper); text-align: left;
  font-family: var(--mono); font-weight: 500; font-size: .8em; text-transform: uppercase;
  letter-spacing: .06em; padding: .55em .8em; }
.slide td { padding: .5em .8em; border-top: 1.5px solid var(--dot); vertical-align: top;
  color: var(--text2); }
.slide tr:nth-child(even) td { background: color-mix(in srgb, var(--accent) 9%, transparent); }

.slide figure { margin: 0; display: flex; flex-direction: column; gap: .4em; min-height: 0; }
.slide figure img { display: block; max-width: 100%; max-height: 600px; object-fit: contain;
  border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink);
  background: var(--bg); cursor: zoom-in; align-self: center; }
.slide figcaption { font-family: var(--mono); font-size: .55em; color: var(--muted);
  text-align: center; }
.slide .gallery { display: grid; gap: 1.4em; align-items: start; }
.slide .gallery figure img { width: 100%; aspect-ratio: 16 / 10; max-height: none;
  object-fit: cover; object-position: top left; }

.slide .mermaid-box { position: absolute; inset: 0; display: grid; place-items: center; }
.slide .mermaid-box svg { width: 100%; height: 100%; max-width: 100% !important; }
.slide .diagram-only .mermaid-box { inset: 0; }

/* ---------- title / cta ---------- */
.slide.l-title { background: var(--accent); color: #111; justify-content: center; }
.slide.l-title .num { background: var(--paper); color: var(--ink); }
.slide.l-title .kicker { background: var(--paper); color: var(--ink); }
.slide.l-title h1 { font-size: 4.6em; color: #111; margin-bottom: .2em; }
.slide.l-title h2 { font-size: 2em; color: #111; max-width: 22em; }
.slide.l-title p { color: #111; font-size: 1.2em; max-width: 46em; }
.slide.l-title b, .slide.l-title code { color: #111; }
.slide.l-title .body { flex: 0 0 auto; }

/* logo slides: text column + logo on the right */
.slide.has-logo > :not(.slide-logo):not(.num) { max-width: calc(100% - 520px); }
.slide-logo { position: absolute; right: 70px; top: 50%; width: 470px; transform: translateY(-50%);
  filter: drop-shadow(0 0 70px rgba(255, 178, 74, .38)) drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }

/* night background: sits with the purple/amber logo in both themes */
.slide.bg-night { background:
    radial-gradient(circle at 80% 48%, rgba(255, 178, 74, .16) 0, transparent 30%),
    radial-gradient(circle at 76% 45%, #4a2a8a 0, #2a1a57 38%, #170f33 72%, #110b26 100%);
  color: #f6efe0; border-color: #111; box-shadow: 12px 12px 0 var(--shadow-ink); }
.slide.bg-night h1 { color: #fff7e8; }
.slide.bg-night h2 { color: #ffd23d; }
.slide.bg-night p { color: #e4d9f7; }
.slide.bg-night b { color: #fff7e8; }
.slide.bg-night .kicker, .slide.bg-night .num { background: #ffd23d; color: #111; border-color: #111; }
.slide.bg-night::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 233, 180, .5) 1px, transparent 1.4px),
    radial-gradient(circle, rgba(200, 170, 255, .35) 1px, transparent 1.4px);
  background-size: 120px 120px, 190px 190px; background-position: 20px 30px, 80px 110px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 70%); }

.slide.l-cta h1 { font-size: 2.8em; }
.slide.l-cta .col:last-child p:last-child { margin-top: auto; font-family: var(--mono);
  font-size: .62em; color: var(--muted); }

@media print {
  body.deck { overflow: visible; background: none; }
  #controls, #progress, #notes, #lightbox { display: none !important; }
  #stage-wrap { position: static; display: block; }
  #stage { transform: none !important; width: auto; height: auto; }
  .slide { position: relative; display: flex !important; width: 1600px; height: 900px;
    margin: 0 auto 24px; break-after: page; box-shadow: none; animation: none; }
}

/* edge labels: style.css draws bordered pills that mermaid's label boxes clip */
.slide .edgeLabel { border: 0 !important; box-shadow: none !important; padding: 0 2px !important;
  font-size: 15px !important; }
.slide .node .nodeLabel, .slide .node .nodeLabel p, .slide .node .nodeLabel span { color: #111 !important; }

/* black on the palette blue is hard to read: use white text on blue fills */
.slide[data-accent="blue"] .kicker, .slide[data-accent="blue"] .num,
.slide[data-accent="blue"] blockquote, .slide[data-accent="blue"] blockquote b { color: #fff; }
.slide[data-accent="blue"] blockquote code { background: #fff; color: #111; }

/* diagram slides: a lighter heading block leaves more room for the diagram */
.slide.l-diagram { padding-top: 44px; padding-bottom: 48px; }
.slide.l-diagram h1 { font-size: 2.05em; margin-bottom: .32em; }
.slide.l-diagram .kicker { margin-bottom: .5em; }
.slide.l-diagram .body { gap: .55em; }