/* ───────────────────────────────────────────────────────────────────
   Mob, Part II — palette: Obsidian (mob's default dark theme) + Elixir
   purple accents. Obsidian tokens come straight from the framework:
   bg gray-900, surface gray-800, primary blue-500, text gray-100.
   ─────────────────────────────────────────────────────────────────── */
:root {
  --mob-bg: #111827;          /* gray-900  — Obsidian background        */
  --mob-surface: #1f2937;     /* gray-800  — Obsidian surface           */
  --mob-raised: #374151;      /* gray-700  — Obsidian surface_raised    */
  --mob-border: #374151;
  --mob-blue: #3b82f6;        /* blue-500  — Obsidian primary           */
  --mob-blue-bright: #60a5fa;
  --elixir: #b388ff;          /* light Elixir purple, readable on dark  */
  --elixir-deep: #6e4a9e;
  --text: #f3f4f6;            /* gray-100                               */
  --muted: #9ca3af;           /* gray-400                               */
  --good: #34d399;
  --bad: #f87171;
}

.reveal {
  --r-background-color: var(--mob-bg);
  --r-main-color: var(--text);
  --r-heading-color: var(--text);
  --r-link-color: var(--mob-blue-bright);
  --r-link-color-hover: var(--elixir);
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
}
.reveal h1, .reveal h2, .reveal h3 { font-weight: 700; letter-spacing: -0.01em; }
.reveal h2 { color: var(--text); }
.reveal section { text-align: left; }
.reveal section.center { text-align: center; }
.reveal em { color: var(--elixir); font-style: normal; }
.reveal strong { color: var(--mob-blue-bright); }

/* ── Title slide ─────────────────────────────────────────────────── */
.reveal .eyebrow {
  font-size: 0.5em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mob-blue-bright);
  margin-bottom: 0.3em;
}
.reveal .title { font-size: 2.4em; line-height: 1.05; margin: 0; }
.reveal .title .accent { color: var(--elixir); }
.reveal .subtitle { color: var(--elixir); margin-top: 0.25em; font-weight: 500; }
.reveal .byline { font-size: 0.58em; color: var(--muted); }
.reveal .kicker {
  font-size: 0.52em; font-style: italic; color: #c9c9d4;
  max-width: 24em; margin: 1.3em auto 0; line-height: 1.45;
}
.reveal .fragment-highlight { color: var(--elixir); font-weight: 600; }

/* ── Code blocks — readable from the back row ────────────────────── */
.reveal pre { width: 100%; box-shadow: none; }
.reveal pre code {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.62em;
  line-height: 1.42;
  padding: 1em 1.2em;
  border-radius: 0.5em;
  max-height: 72vh;
  border: 1px solid var(--mob-border);
  background: #0c1018;
}
.reveal .code-label {
  display: inline-block;
  font-size: 0.42em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.2em 0.2em;
}

/* ── Two-up: sigil vs map ────────────────────────────────────────── */
.reveal .twoup { display: flex; gap: 1.1em; align-items: stretch; }
.reveal .twoup > div { flex: 1; min-width: 0; }
.reveal .twoup pre code { font-size: 0.5em; max-height: 64vh; }
.reveal .pane-title {
  font-size: 0.5em; text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 0.25em; font-weight: 700;
}
.reveal .pane-title.sigil { color: var(--elixir); }
.reveal .pane-title.map { color: var(--mob-blue-bright); }
.reveal .pane-note { font-size: 0.42em; color: var(--muted); margin: 0.3em 0 0; }

/* ── Mapping table (LiveView/GenServer → Mob) ────────────────────── */
.reveal table.map-table { font-size: 0.62em; margin: 0.4em auto; border-collapse: collapse; }
.reveal table.map-table th { color: var(--muted); font-weight: 600; padding: 0.35em 0.8em; border-bottom: 1px solid var(--mob-border); }
.reveal table.map-table td { padding: 0.35em 0.8em; border-bottom: 1px solid rgba(255,255,255,0.06); }
.reveal table.map-table td code { color: var(--elixir); }
.reveal table.map-table td.arrow { color: var(--muted); text-align: center; }

/* ── Myth-busting cards ──────────────────────────────────────────── */
.reveal .myths { display: flex; flex-direction: column; gap: 0.35em; max-width: 28em; margin: 0.3em auto 0; }
.reveal .myth {
  display: flex; align-items: baseline; gap: 0.6em;
  background: var(--mob-surface);
  border-left: 4px solid var(--bad);
  border-radius: 0.4em; padding: 0.38em 0.8em;
}
.reveal .myth .strike { color: var(--bad); text-decoration: line-through; font-weight: 700; min-width: 4.5em; }
.reveal .myth .truth { color: var(--text); font-size: 0.8em; }
.reveal .myth .truth b { color: var(--good); }

/* ── Big punchy statement ────────────────────────────────────────── */
.reveal .statement { font-size: 1.25em; line-height: 1.25; max-width: 18em; margin: 0.3em auto; }
.reveal .statement .accent { color: var(--elixir); }

/* ── "Steal what works" two columns ──────────────────────────────── */
.reveal .steal { display: flex; gap: 1.4em; justify-content: center; font-size: 0.8em; }
.reveal .steal .col { flex: 1; }
.reveal .steal h4 { color: var(--mob-blue-bright); margin-bottom: 0.3em; border-bottom: 1px solid var(--mob-border); padding-bottom: 0.2em; }
.reveal .steal ul { list-style: none; margin: 0; }
.reveal .steal li { padding: 0.15em 0; }
.reveal .steal li code { color: var(--elixir); }

/* ── Component swatch grid (mob primitives) ──────────────────────── */
.reveal .swatches { display: flex; flex-wrap: wrap; gap: 0.5em; justify-content: center; max-width: 26em; margin: 0.6em auto; }
.reveal .swatch {
  background: var(--mob-surface); border: 1px solid var(--mob-border);
  border-radius: 0.4em; padding: 0.35em 0.7em; font-family: monospace;
  font-size: 0.7em; color: var(--elixir);
}

/* ── Centered hero image (Claude loves Elixir) ───────────────────── */
.reveal .hero-img { max-height: 52vh; border-radius: 0.6em; border: 1px solid var(--mob-border); }
.reveal .caption { font-size: 0.5em; color: var(--muted); margin-top: 0.5em; }

/* ── Closing QR ──────────────────────────────────────────────────── */
.reveal .qr-row { display: flex; gap: 2.4em; justify-content: center; align-items: flex-start; margin-top: 0.6em; }
.reveal .qr-block { display: flex; flex-direction: column; align-items: center; gap: 0.4em; }
.reveal .qr { width: 230px; height: 230px; background: #fff; padding: 8px; border-radius: 0.5em; }
.reveal .qr-cap { font-size: 0.5em; color: var(--muted); margin: 0; }

/* tighter spacing for bullet-dense slides */
.reveal section.tight p { margin: 0.2em 0; font-size: 0.92em; }
.reveal section.tight ul { margin-top: 0.15em; }
.reveal section.tight li { font-size: 0.9em; line-height: 1.2; margin-bottom: 0.14em; }

/* dim the reveal slide-number chrome to match the palette */
.reveal .slide-number { background: transparent; color: var(--muted); }