/* AI Studio at S2 — slide deck styles
   Designed for 16:9 projection, high-contrast type, minimal text per slide. */

:root {
  --slide-w: 1920px;
  --slide-h: 1080px;
}

html, body { background: #0a0e14; }
body.slides-body { color: #fff; font-family: var(--font); margin: 0; overflow: hidden; }

/* Speaker notes are embedded inside each slide, but must never appear on the
   projected deck. The speaker view (press S) reads them via JS into its own
   panel, so hiding them here does not affect it. */
.facilitator-notes { display: none; }

.deck {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slide {
  width: var(--slide-w);
  height: var(--slide-h);
  background: #FAFBFC;
  color: #1A1A1A;
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center;
  display: none;
  flex-direction: column;
  padding: 96px 120px;
  box-sizing: border-box;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  border-radius: 0;
}
.slide.active { display: flex; }

/* Slide variants */
.slide.dark { background: #0F2D4A; color: #fff; }
.slide.navy { background: var(--s2-navy); color: #fff; }
.slide.accent { background: var(--s2-accent); color: #1A1A1A; }
.slide.section-break {
  background: linear-gradient(135deg, var(--s2-navy) 0%, #0F2D4A 100%);
  color: #fff;
  justify-content: center;
}
.slide.section-break .slide-eyebrow { color: var(--s2-accent); }
.slide.handoff {
  background: var(--s2-navy);
  color: #fff;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Typography inside slides */
.slide .slide-eyebrow {
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--s2-navy);
  font-weight: 700;
  margin-bottom: 24px;
}
.slide.dark .slide-eyebrow, .slide.navy .slide-eyebrow { color: var(--s2-accent); }

.slide h1 {
  font-size: 96px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  font-weight: 800;
  max-width: 28ch;
}
.slide h2 {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  font-weight: 700;
  max-width: 28ch;
}
.slide h3 { font-size: 44px; line-height: 1.15; margin: 0 0 18px; font-weight: 700; }
.slide p { font-size: 36px; line-height: 1.4; margin: 0 0 18px; max-width: 36ch; }
.slide p.lede { font-size: 44px; line-height: 1.3; max-width: 32ch; color: #444; }
/* On dark backgrounds, the dark lede/muted grays are unreadable — lighten them. */
.slide.dark p.lede, .slide.navy p.lede, .slide.section-break p.lede, .slide.handoff p.lede { color: rgba(255,255,255,0.88); }
.slide.dark p.muted, .slide.navy p.muted, .slide.section-break p.muted, .slide.handoff p.muted { color: rgba(255,255,255,0.62); }
.slide.dark .muted, .slide.navy .muted, .slide.section-break .muted, .slide.handoff .muted { color: rgba(255,255,255,0.62); }
.slide.dark p.lede, .slide.navy p.lede { color: rgba(255,255,255,0.85); }
.slide ul, .slide ol { font-size: 36px; line-height: 1.45; margin: 0 0 18px; padding-left: 1.2em; max-width: 36ch; }
.slide li { margin-bottom: 14px; }

/* Dense list slides (answer keys, failure-mode lists): smaller, tighter, and
   wider lines so 6-7 bullets fit inside the slide instead of running off the
   bottom under the HUD. */
.slide.compact h2 { font-size: 52px; margin-bottom: 20px; }
.slide.compact ul, .slide.compact ol { font-size: 29px; line-height: 1.3; max-width: 60ch; }
.slide.compact li { margin-bottom: 9px; }
.slide strong { font-weight: 800; }
.slide em { font-style: italic; }
.slide .big { font-size: 140px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; margin: 0; }
.slide .quote { font-size: 52px; line-height: 1.25; font-weight: 600; max-width: 30ch; }
.slide .quote-attr { font-size: 28px; color: #555; margin-top: 18px; }
.slide.dark .quote-attr, .slide.navy .quote-attr { color: rgba(255,255,255,0.6); }

.slide a { color: inherit; text-decoration: underline; }

/* Slide layout helpers */
.slide-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; flex: 1; align-items: center; }
.slide-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; flex: 1; align-items: stretch; }
.slide-flex { display: flex; align-items: center; gap: 48px; flex: 1; }
.slide-bottom { margin-top: auto; }

/* Number block / huge stat */
.stat {
  font-size: 220px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--s2-navy);
  margin: 0 0 16px;
}
.slide.dark .stat, .slide.navy .stat { color: var(--s2-accent); }
.stat-label { font-size: 36px; font-weight: 600; line-height: 1.3; max-width: 28ch; }

/* Five-level cards inside slides */
.slide-levels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin: 32px 0;
}
.slide-level {
  background: #fff;
  border-top: 8px solid var(--s2-navy);
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: left;
}
.slide-level .num {
  font-size: 56px;
  font-weight: 800;
  color: var(--s2-navy);
  line-height: 1;
  margin-bottom: 8px;
}
.slide-level h4 { font-size: 26px; margin: 0 0 6px; line-height: 1.2; }
.slide-level p { font-size: 20px; line-height: 1.35; color: #555; margin: 0; }
.slide-level.l1 { border-top-color: #93C5FD; }
.slide-level.l1 .num { color: #93C5FD; }
.slide-level.l2 { border-top-color: #60A5FA; }
.slide-level.l2 .num { color: #60A5FA; }
.slide-level.l3 { border-top-color: #3B82F6; }
.slide-level.l3 .num { color: #3B82F6; }
.slide-level.l4 { border-top-color: var(--s2-navy); }
.slide-level.l4 .num { color: var(--s2-navy); }
.slide-level.l5 { border-top-color: var(--s2-accent); }
.slide-level.l5 .num { color: var(--s2-accent); }
.slide-level.active-level { transform: scale(1.06); box-shadow: 0 18px 40px rgba(0,0,0,0.25); z-index: 2; position: relative; }

/* Callout on slides */
.slide-callout {
  background: rgba(31, 78, 121, 0.08);
  border-left: 8px solid var(--s2-navy);
  padding: 24px 32px;
  border-radius: 12px;
  margin: 24px 0;
  font-size: 34px;
  line-height: 1.35;
  max-width: 36ch;
}
.slide.dark .slide-callout, .slide.navy .slide-callout {
  background: rgba(255,255,255,0.08);
  border-left-color: var(--s2-accent);
}
.slide-callout strong { color: var(--s2-navy); }
.slide.dark .slide-callout strong, .slide.navy .slide-callout strong { color: var(--s2-accent); }

/* "Switch to Claude" handoff marker */
.handoff-marker {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--s2-accent);
  color: #1A1A1A;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 34px;
  margin-top: 32px;
}
.handoff-marker::before { content: "⤳"; font-size: 44px; }

/* Demo description blocks within handoff slides */
.demo-spec {
  text-align: left;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 28px 36px;
  margin-top: 24px;
  max-width: 62rem;
}
.demo-spec h3 { font-size: 32px; color: var(--s2-accent); margin: 0 0 12px; }
.demo-spec ul { font-size: 26px; margin: 0; max-width: none; }
.demo-spec li { margin-bottom: 8px; }

/* Director-only content: never shown on a slide (projector or speaker preview);
   the speaker view pulls it into the readable notes panel instead. Wrap demo
   plans, steps, and branches in it so the room sees only the prompt. */
.director { display: none; }
/* The prompt the room should see on a demo slide. */
.onscreen-prompt {
  font-size: 30px; line-height: 1.4; font-style: italic; text-align: left;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px; padding: 20px 26px; margin: 20px auto 0; max-width: 60rem;
}
.onscreen-prompt + .onscreen-prompt { margin-top: 14px; }
.onscreen-prompt .plabel {
  display: block; font-style: normal; font-weight: 700; font-size: 19px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--s2-accent);
  margin-bottom: 8px;
}
/* A stimulus (e.g. a reading passage) the room needs to see on a demo slide. */
.onscreen-passage {
  color: #fff; font-style: italic; font-size: 23px; line-height: 1.5;
  text-align: left; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 12px;
  padding: 16px 22px; margin: 20px auto 0; max-width: 62rem;
}
/* Worked example block on the "under the hood" beats. */
.beat-example { background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 14px; padding: 20px 26px; margin: 22px 0 0; }
.beat-example .eq { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 30px; color: #1A1A1A; }
.beat-example .preds { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px 16px; font-size: 26px; align-items: center; }
.beat-example .preds .chip { background: #E2E8F0; color: #334155; border-radius: 8px; padding: 4px 14px; }
.beat-example .preds .chip.top { background: var(--s2-navy); color: #fff; font-weight: 700; }
.beat-example .cap { margin-top: 12px; font-size: 22px; color: #475569; }
/* Made-up example quotes under a failure-mode list item. */
.eg { display: block; font-size: 24px; font-style: italic; color: #475569; margin-top: 6px; }
.eg::before { content: "“"; } .eg::after { content: "”"; }
/* Survey QR block on the title slide. */
.title-survey { display: flex; align-items: center; gap: 30px; margin: 34px 0 0; }
.title-survey .qr-box { background: #fff; padding: 14px; border-radius: 16px; line-height: 0; flex: 0 0 auto; }
.title-survey .qr-box img, .title-survey .qr-box canvas { display: block; width: 156px; height: 156px; }
.title-survey .tst-label { font-size: 28px; font-weight: 700; color: #fff; }
.title-survey .tst-url { font-size: 32px; font-weight: 800; color: var(--s2-accent); margin-top: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.title-survey .tst-sub { font-size: 21px; color: rgba(255,255,255,0.72); margin-top: 8px; max-width: 30ch; }
/* "Rejoin the poll" QR + address, shown on any slide where you push a poll question. */
.poll-join { display: inline-flex; align-items: center; gap: 16px; margin: 26px 0 0; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 12px 18px; }
.poll-join .qr { background: #fff; padding: 8px; border-radius: 8px; line-height: 0; flex: 0 0 auto; }
.poll-join .qr img, .poll-join .qr canvas { display: block; width: 100px; height: 100px; }
.poll-join .pj-label { font-size: 21px; color: rgba(255,255,255,0.8); }
.poll-join .pj-url { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 800; color: var(--s2-accent); font-size: 24px; margin-top: 4px; }
/* On light-background slides, flip the text colors. */
.slide:not(.dark):not(.navy):not(.section-break):not(.handoff) .poll-join { background: #F1F5F9; border-color: #E2E8F0; }
.slide:not(.dark):not(.navy):not(.section-break):not(.handoff) .poll-join .pj-label { color: #475569; }

/* Bottom HUD: progress, slide num, block name, timer */
.hud {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px;
  background: rgba(10,14,20,0.85);
  color: #fff;
  font-size: 13px;
  z-index: 100;
  border-top: 1px solid rgba(255,255,255,0.1);
  pointer-events: none;
}
.hud-left, .hud-right { display: flex; gap: 18px; align-items: center; }
.hud .pill {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.9);
}
.hud .pill.warn { background: rgba(180, 83, 9, 0.7); border-color: rgba(180, 83, 9, 1); }
.hud .pill.over { background: rgba(185, 28, 28, 0.7); border-color: rgba(185, 28, 28, 1); }
.hud progress {
  width: 220px; height: 5px;
  appearance: none;
  border: none;
}
.hud progress::-webkit-progress-bar { background: rgba(255,255,255,0.1); border-radius: 3px; }
.hud progress::-webkit-progress-value { background: var(--s2-accent); border-radius: 3px; }

/* Blank screen mode */
body.blanked .deck { background: #000; }
body.blanked .slide { display: none !important; }
body.blanked .hud { opacity: 0.4; }

/* Toolbar overlay on hover (top-right) */
.toolbar {
  position: fixed; top: 12px; right: 12px;
  display: flex; gap: 6px;
  z-index: 110;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.deck:hover ~ .toolbar, .toolbar:hover { opacity: 1; }
body { /* trigger via JS */ }
body.show-ui .toolbar { opacity: 1; }
.toolbar button {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.toolbar button:hover { background: rgba(255,255,255,0.2); }

/* Help overlay */
.help {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  color: #fff;
  display: none;
  align-items: center; justify-content: center;
  z-index: 200;
  padding: 32px;
}
.help.show { display: flex; }
.help-card {
  background: #14213a;
  border-radius: 16px;
  padding: 36px 44px;
  max-width: 560px;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.15);
}
.help-card h2 { color: var(--s2-accent); margin: 0 0 16px; font-size: 24px; }
.help-card kbd {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  padding: 2px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  margin-right: 4px;
}
.help-card .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 14px; }
.help-card .row:last-child { border-bottom: 0; }

/* Speaker (presenter) view — responsive; slide previews are scaled miniatures */
body.speaker-view {
  background: #0F172A; color: #fff; margin: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 12px; padding: 12px;
  box-sizing: border-box; font-family: var(--font); overflow: hidden;
}
.sv-top {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  background: #1E293B; border-radius: 12px; padding: 10px 20px;
}
.sv-top .sv-block { color: var(--s2-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; }
.sv-top .sv-count { color: rgba(255,255,255,0.55); font-size: 15px; margin-left: 12px; }
.sv-top .sv-timer { font-family: ui-monospace, Menlo, monospace; font-size: 30px; font-weight: 700; }
.sv-top .sv-timer.warn { color: #FCD34D; }
.sv-top .sv-timer.over { color: #FCA5A5; }
.sv-mid { flex: 0 0 auto; display: flex; gap: 16px; align-items: flex-start; }
.sv-current { flex: 0 0 56%; }
.sv-next { flex: 0 0 30%; }
.sv-panel-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.5); margin: 0 0 6px; font-weight: 700; }
.sv-scale { position: relative; width: 100%; overflow: hidden; border-radius: 10px; background: #0b1220; }
.sv-scale .slide { position: absolute; top: 0; left: 0; transform-origin: top left; margin: 0; box-shadow: none; display: flex; }
.sv-notes {
  flex: 1 1 auto; min-height: 0; background: #1E293B; border-radius: 12px;
  padding: 18px 24px; overflow-y: auto;
}
.sv-notes-body { font-size: 23px; line-height: 1.55; }
.sv-notes-body ul { margin: 0 0 14px; padding-left: 24px; }
.sv-notes-body li { margin-bottom: 11px; }
.sv-notes-body h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--s2-accent); margin: 10px 0 6px; }
.sv-notes-body em { opacity: 0.6; }
body.speaker-view .hud, body.speaker-view .toolbar, body.speaker-view .help { display: none; }

/* Jump-to-slide overview grid */
.overview {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(8,12,20,0.96); padding: 3vh 3vw; box-sizing: border-box; overflow-y: auto;
}
.overview.show { display: block; }
.overview h2 { color: #fff; font-size: 20px; margin: 0 0 4px; }
.overview .ov-hint { color: rgba(255,255,255,0.5); font-size: 13px; margin: 0 0 18px; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ov-item { cursor: pointer; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: #0b1220; }
.ov-item.current { border-color: var(--s2-accent); }
.ov-item:hover { border-color: rgba(255,255,255,0.4); }
.ov-thumb { position: relative; width: 100%; overflow: hidden; background: #0b1220; }
.ov-thumb .slide { position: absolute; top: 0; left: 0; transform-origin: top left; margin: 0; box-shadow: none; display: flex; }
.ov-cap { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; font-size: 12px; color: rgba(255,255,255,0.8); }
.ov-cap .n { color: var(--s2-accent); font-weight: 700; }