/* From Tokens to Tasks — deck styles
   Off-white paper theme. System Helvetica + Times only — no remote fonts.
   Built against reveal.js 5.x at 1920x1080 logical canvas. */

:root {
  --bg: #faf8f1;
  --ink: #1a1a1a;
  --ink-muted: #5e5e58;
  --rule: #bcb6a8;
  --accent: #c84e4e;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Times New Roman", Times, serif;

  /* Override reveal.js theme variables */
  --r-background-color: var(--bg);
  --r-main-color: var(--ink);
  --r-main-font: var(--sans);
  --r-main-font-size: 40px;
  --r-heading-color: var(--ink);
  --r-heading-font: var(--sans);
  --r-heading-font-weight: 600;
  --r-heading-text-transform: none;
  --r-heading-letter-spacing: -0.01em;
  --r-link-color: var(--accent);
  --r-link-color-hover: var(--accent);
  --r-selection-background-color: rgba(200, 78, 78, 0.25);
  --r-selection-color: var(--ink);
}

html, body {
  background: var(--bg);
}

.reveal {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.3;
}

.reveal .slides {
  text-align: left;
}

/* Reveal forces padding: 0 !important on every section. We need !important
   on layout-class padding to win the cascade. Reveal also positions each section
   absolutely with top: 50% + translate(0, -50%); we keep that centering for short
   slides, and opt into 100% height for slides that need to fill the canvas. */
.reveal .slides section {
  box-sizing: border-box;
  width: 100%;
  padding: 1.6em 2.4em !important;
}

/* Headings */
.reveal h1 { font-size: 2.4em; line-height: 1.1; margin-bottom: 0.4em; }
.reveal h2 { font-size: 1.6em; line-height: 1.15; margin-bottom: 0.5em; }
.reveal h3 { font-size: 1.2em; line-height: 1.2; margin-bottom: 0.4em; color: var(--ink-muted); }

/* Body and lists */
.reveal p { line-height: 1.45; margin: 0.5em 0; }
.reveal ul { list-style: none; padding-left: 0; }
.reveal ul li {
  padding-left: 1.4em;
  position: relative;
  margin: 0.45em 0;
  line-height: 1.4;
}
.reveal ul li::before {
  content: "—";
  color: var(--ink-muted);
  position: absolute;
  left: 0;
}
.reveal strong { font-weight: 600; }
.reveal em { font-style: italic; }

/* Section title — minimal title cards (slide 2, transitions). Reveal handles vertical centering. */
.reveal .section-title .kicker {
  font-size: 0.7em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.2em;
}
.reveal .section-title h1 {
  font-size: 3.2em;
  letter-spacing: -0.02em;
  margin: 0;
}
.reveal .section-title .meta {
  font-size: 0.8em;
  color: var(--ink-muted);
  margin-top: 1.5em;
}

/* Quote slides — 12 and 13 (Karpathy pair). Editorial blockquote, large serif.
   No flex/height tricks — let reveal vertically center the natural content height. */
.reveal .quote-slide {
  padding: 0 2em;
}
.reveal .quote-slide .quote-intro {
  font-family: var(--sans);
  font-size: 0.7em;
  color: var(--ink-muted);
  margin-bottom: 1.5em;
}
.reveal .quote-slide blockquote {
  font-family: var(--serif);
  font-size: 1.05em;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  max-width: 26em;
  color: var(--ink);
  width: auto;
  display: block;
}
.reveal .quote-slide blockquote .punch {
  font-weight: 700;
}
.reveal .quote-slide .attribution {
  font-family: var(--sans);
  font-size: 0.55em;
  color: var(--ink-muted);
  margin-top: 1.6em;
  letter-spacing: 0.02em;
}
.reveal .quote-slide.compact blockquote { font-size: 2em; max-width: 16em; }

/* Tweet screenshot slide — slide 12. Authentic screenshot in place of typeset quote.
   Reveal centers the section vertically; we just constrain the image. */
.reveal .tweet-slide {
  text-align: center;
}
.reveal .tweet-slide img {
  max-width: 58%;
  max-height: 82vh;
  width: auto;
  height: auto;
  display: inline-block;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.10);
  border-radius: 6px;
  background: #fff;
}

/* Synthesis slide — slide 15. Single line, lots of whitespace. Reveal centers vertically. */
.reveal .synthesis-slide p {
  font-family: var(--serif);
  font-size: 2.4em;
  line-height: 1.3;
  text-align: center;
  max-width: 18em;
  margin: 0 auto;
}

/* Diagram slides — full-bleed SVG/PNG (10, 11, 16, 17). Reveal centers vertically. */
.reveal .diagram-slide h2 {
  font-size: 1.2em;
  margin-bottom: 0.6em;
}
.reveal .diagram-slide .figure {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.reveal .diagram-slide .figure svg,
.reveal .diagram-slide .figure img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  display: block;
}
.reveal .diagram-slide .caption {
  font-size: 0.7em;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 0.5em;
}
.reveal .diagram-slide .source {
  font-size: 0.55em;
  color: var(--ink-muted);
  text-align: right;
  margin-top: 0.4em;
}
.reveal .diagram-slide .lead {
  font-size: 0.95em;
  line-height: 1.4;
  color: var(--ink);
  max-width: 26em;
  margin: 0 0 0.6em;
}

/* Token slide — slide 5. Side-by-side: raw text → tokens with IDs. */
.reveal .token-slide .tokenize-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em;
  margin: 1em 0 1.2em;
}
.reveal .token-slide .side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
}
.reveal .token-slide .side-label {
  font-size: 0.45em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.reveal .token-slide .raw-text {
  font-family: var(--serif);
  font-size: 1.6em;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.reveal .token-slide .arrow {
  font-size: 1.5em;
  color: var(--ink-muted);
  font-weight: 300;
  margin-top: 1em;
}
.reveal .token-slide .token-row {
  display: flex;
  gap: 0.5em;
}
.reveal .token-slide .token {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5em 0.8em;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  min-width: 2.2em;
}
.reveal .token-slide .token .frag {
  font-family: var(--serif);
  font-size: 1em;
  color: var(--ink);
  line-height: 1;
}
.reveal .token-slide .token .id {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.65em;
  color: var(--ink-muted);
  margin-top: 0.5em;
  letter-spacing: 0.04em;
  line-height: 1;
}
.reveal .token-slide .caption {
  text-align: center;
  font-style: italic;
  color: var(--ink);
  font-size: 0.95em;
  margin: 1.2em auto 0;
  max-width: 22em;
}

/* Boris reel slide — slide 14. Reveal centers the section vertically. */
.reveal .reel-slide {
  text-align: center;
}
.reveal .reel-slide video {
  max-width: 60%;
  max-height: 70vh;
  background: #000;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  display: inline-block;
}
.reveal .reel-slide .caption {
  font-size: 0.65em;
  color: var(--ink-muted);
  margin-top: 1em;
  letter-spacing: 0.02em;
}

/* Cue card — slide 1 (the deck doesn't show ianjoshua.com itself; speaker switches tabs) */
.reveal .cue-slide {
  text-align: center;
}
.reveal .cue-slide .cue-arrow {
  font-size: 3em;
  color: var(--ink-muted);
  margin-bottom: 0.3em;
}
.reveal .cue-slide .cue-label {
  font-size: 1.4em;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.reveal .cue-slide .cue-hint {
  font-size: 0.7em;
  color: var(--ink-muted);
  margin-top: 1em;
  font-style: italic;
}

/* Persistent footer — Slido room + QR on left, slide number on right.
   Lives outside reveal's scaled .slides; sized in screen pixels. */
.deck-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px 16px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-muted);
  pointer-events: none;
  background: linear-gradient(to top, var(--bg) 60%, rgba(250, 248, 241, 0));
}
.deck-footer .slido {
  display: flex;
  align-items: center;
  gap: 14px;
}
.deck-footer .slido img {
  width: 44px;
  height: 44px;
  background: #fff;
  padding: 3px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--rule);
}
.deck-footer .slido .label {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.deck-footer .slido .label .lead {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.deck-footer .slido .label .room {
  font-size: 16px;
  color: var(--ink);
  font-feature-settings: "tnum";
  letter-spacing: 0.02em;
}
.deck-footer .slide-no {
  font-feature-settings: "tnum";
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

/* Reveal's progress bar — keep, but match palette */
.reveal .progress {
  height: 2px;
  color: var(--accent);
  background: rgba(0, 0, 0, 0.06);
}

/* Hide reveal's built-in slide number — we render our own in the footer */
.reveal .slide-number { display: none; }

/* Print / PDF export tweaks (Cmd+P from ?print-pdf) */
@media print {
  .deck-footer {
    background: transparent;
  }
}