/* ──────────────────────────────────────────────────────────────────────
   Mythal presentation — compact slide-per-viewport system.
   Optimized for 1280×720 laptop viewports. Each .slide section fits 100vh.
   Keyboard nav (↑/↓/PgUp/PgDn/Home/End/F/T) lives in app.js.
   Three themes (csx default · salesforce · aurora) mirror the console.
   ────────────────────────────────────────────────────────────────────── */

:root,
[data-theme="csx"] {
  --bg:           #081627;
  --bg-2:         #0a1c30;
  --surface:      #0d2138;
  --surface-2:    #102a44;
  --elevated:     #133153;
  --border:       #1f456e;
  --border-soft:  #143257;
  --text:         #f5efdc;
  --text-2:       #c4cedc;
  --text-3:       #92a1b6;
  --text-4:       #6a7a91;
  --accent:       #f4c430;
  --accent-2:     #ffe082;
  --accent-soft:  rgba(244, 196, 48, 0.10);
  --link:         #ffd966;
  --success:      #4ade80;
  --warn:         #fbbf24;
  --critical:     #f87171;
  --ring:         rgba(244, 196, 48, 0.28);
  --shadow-card:  0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 20px rgba(0, 8, 24, 0.45);
  --brand-grad:   linear-gradient(135deg, #f4c430 0%, #d4a017 100%);
  --hero-grad:    radial-gradient(700px 360px at 10% -10%, rgba(244,196,48,0.16) 0%, transparent 60%),
                  radial-gradient(600px 360px at 90% 10%, rgba(31,69,110,0.55) 0%, transparent 70%);
  --code-bg:      #061321;
  --code-border:  #14304f;
  --code-text:    #d1e2f4;
}

[data-theme="salesforce"] {
  --bg:           #f5f7fb;
  --bg-2:         #ffffff;
  --surface:      #ffffff;
  --surface-2:    #f7f8fa;
  --elevated:     #fafaf9;
  --border:       #dddbda;
  --border-soft:  #ecebea;
  --text:         #16325c;
  --text-2:       #3e3e3c;
  --text-3:       #706e6b;
  --text-4:       #969492;
  --accent:       #0176d3;
  --accent-2:     #1589ee;
  --accent-soft:  rgba(1, 118, 211, 0.08);
  --link:         #014486;
  --success:      #2e844a;
  --warn:         #fe9339;
  --critical:     #c23934;
  --ring:         rgba(21, 137, 238, 0.32);
  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.04);
  --brand-grad:   linear-gradient(135deg, #1589ee 0%, #0176d3 100%);
  --hero-grad:    radial-gradient(700px 360px at 10% -10%, rgba(21,137,238,0.10) 0%, transparent 60%),
                  radial-gradient(600px 360px at 90% 10%, rgba(1,118,211,0.06) 0%, transparent 70%);
  --code-bg:      #f8fafc;
  --code-border:  #e1e5ea;
  --code-text:    #1f2937;
}

[data-theme="aurora"] {
  --bg:           #0a0a0b;
  --bg-2:         #111114;
  --surface:      #111114;
  --surface-2:    #17171c;
  --elevated:     #17171c;
  --border:       #26262d;
  --border-soft:  #1c1c22;
  --text:         #f5f5f7;
  --text-2:       #c5c5cb;
  --text-3:       #a1a1aa;
  --text-4:       #71717a;
  --accent:       #3b82f6;
  --accent-2:     #60a5fa;
  --accent-soft:  rgba(59,130,246,0.10);
  --link:         #93c5fd;
  --success:      #10b981;
  --warn:         #f59e0b;
  --critical:     #ef4444;
  --ring:         rgba(59, 130, 246, 0.28);
  --shadow-card:  0 1px 2px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.45);
  --brand-grad:   linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  --hero-grad:    radial-gradient(700px 360px at 10% -10%, rgba(59,130,246,0.12) 0%, transparent 60%),
                  radial-gradient(600px 360px at 90% 10%, rgba(30,64,175,0.28) 0%, transparent 70%);
  --code-bg:      #0a0a0b;
  --code-border:  #1c1c22;
  --code-text:    #e5e7eb;
}

/* ── Reset + base ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: 'Inter', 'SF Pro Text', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11','ss01','ss03';
  line-height: 1.45;
  font-size: 14.5px;
}
a { color: var(--link); text-decoration: none; transition: opacity 0.12s; }
a:hover { opacity: 0.85; }
.mono { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Mono', monospace; font-feature-settings: 'ss01','cv01'; letter-spacing: -0.005em; }

/* ── Compact topbar (44px tall) ───────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px;
  background: rgba(8, 22, 39, 0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  min-height: 44px;
}
[data-theme="salesforce"] .topbar { background: rgba(255,255,255,0.85); }
[data-theme="aurora"]     .topbar { background: rgba(10,10,11,0.85); }

.topbar .brand { display: flex; align-items: center; gap: 9px; }
.topbar .mark { width: 22px; height: 22px; border-radius: 5px; background: var(--brand-grad); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); }
.topbar .brand-name { font-weight: 700; letter-spacing: -0.01em; font-size: 13px; }
.topbar .brand-tag { font-size: 10px; color: var(--text-4); margin-left: 2px; text-transform: uppercase; letter-spacing: 0.08em; }
.topbar nav { display: flex; gap: 14px; align-items: center; }
.topbar nav a { font-size: 12px; color: var(--text-3); }
.topbar nav a:hover { color: var(--text); opacity: 1; }
.topbar nav a.current { color: var(--accent); }
.topbar .right { display: flex; gap: 10px; align-items: center; }

.theme-switch { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.theme-switch button { background: transparent; border: 0; color: var(--text-3); padding: 3px 9px; border-radius: 999px; font: inherit; font-size: 10.5px; font-weight: 500; cursor: pointer; }
.theme-switch button.active { background: var(--accent); color: white; box-shadow: 0 2px 6px var(--ring); }
[data-theme="csx"] .theme-switch button.active { color: #081627; font-weight: 700; }

/* ── Slide system — each .slide fits one viewport ─────────────────────── */
:root { --topbar-h: 44px; --counter-h: 30px; }

body.deck {
  scroll-snap-type: y proximity;
  height: 100vh;
  overflow-y: auto;
}
body.deck.locked { scroll-snap-type: y mandatory; }

.slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  padding: 18px 28px 56px;
  position: relative;
}
.slide + .slide { border-top: 1px solid var(--border-soft); }
.slide-inner { max-width: 1280px; margin: 0 auto; width: 100%; flex: 1; display: flex; flex-direction: column; gap: 12px; }

.slide-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.slide-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; font-weight: 700; color: var(--accent); }
.slide h1, .slide h2 { margin: 0; font-weight: 700; letter-spacing: -0.018em; color: var(--text); line-height: 1.12; }
.slide h1 { font-size: clamp(22px, 2.6vw, 32px); }
.slide h2 { font-size: clamp(18px, 2.0vw, 24px); }
.slide .lede { font-size: 14.5px; color: var(--text-2); line-height: 1.5; max-width: 920px; margin: 0; }

/* ── Hero slide (first slide of each page) ────────────────────────────── */
.hero {
  background: var(--hero-grad);
  border-bottom: 1px solid var(--border-soft);
}
.hero h1 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 8px; }
.hero h1 .gold { color: var(--accent); }
.hero .lede { font-size: 15px; max-width: 800px; }
.hero .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 10.5px; font-weight: 700;
  color: var(--accent);
  padding: 3px 10px;
  background: var(--accent-soft);
  border: 1px solid var(--ring);
  border-radius: 999px;
  width: fit-content;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 7px;
  font-size: 12.5px; font-weight: 500;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  transition: transform 0.06s, background 0.12s;
  cursor: pointer;
}
.btn:hover { background: var(--elevated); opacity: 1; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
[data-theme="csx"] .btn.primary { color: #081627; font-weight: 700; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 11.5px; }

/* ── Cards (dense) ────────────────────────────────────────────────────── */
.cards { display: grid; gap: 10px; }
.cards.two   { grid-template-columns: repeat(2, 1fr); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards.four  { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 4px;
}
.card h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.25; }
.card .kicker { font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--accent); font-weight: 700; }
.card p { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.card.feature { border-color: var(--ring); }

/* ── KPI tiles (dense) ────────────────────────────────────────────────── */
.kpis { display: grid; gap: 10px; }
.kpis.four  { grid-template-columns: repeat(4, 1fr); }
.kpis.five  { grid-template-columns: repeat(5, 1fr); }
.kpis.six   { grid-template-columns: repeat(6, 1fr); }
.kpis.eight { grid-template-columns: repeat(8, 1fr); }
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  box-shadow: var(--shadow-card);
}
.kpi .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-3); font-weight: 600; }
.kpi .value { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; margin-top: 4px; color: var(--accent); line-height: 1; }
.kpi .value.crit { color: var(--critical); }
.kpi .value.success { color: var(--success); }
.kpi .value.warn { color: var(--warn); }
.kpi .sub { font-size: 10.5px; color: var(--text-4); margin-top: 4px; }

/* ── Tables (compact) ─────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-card); }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; padding: 8px 12px; background: var(--surface-2); color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 700; border-bottom: 1px solid var(--border); }
td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); vertical-align: top; line-height: 1.45; }
tr:last-child td { border-bottom: 0; }
td strong { color: var(--text); }

/* ── Code blocks (compact) ────────────────────────────────────────────── */
code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--code-bg); border: 1px solid var(--code-border);
  color: var(--code-text);
}
pre {
  background: var(--code-bg); border: 1px solid var(--code-border);
  border-radius: 10px; padding: 12px 14px;
  overflow-x: auto; line-height: 1.45;
  font-size: 11.5px;
  color: var(--code-text);
  margin: 0;
}
pre code { background: transparent; border: 0; padding: 0; }

/* ── Pull quote (compact) ─────────────────────────────────────────────── */
.pullquote {
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.pullquote .body { font-size: 15px; line-height: 1.4; letter-spacing: -0.012em; color: var(--text); font-weight: 500; }
.pullquote .by { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }

/* ── Tags (compact) ───────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); font-weight: 500; }
.tag.gold { background: var(--accent-soft); border-color: var(--ring); color: var(--accent); }
.tag.crit { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.30); color: var(--critical); }
.tag.warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.30); color: var(--warn); }
.tag.ok   { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.30); color: var(--success); }

/* ── Step list (timed) ────────────────────────────────────────────────── */
.steps { display: grid; gap: 6px; }
.step {
  display: grid; grid-template-columns: 76px 1fr; gap: 12px;
  padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.step .t { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 700; font-size: 11.5px; }
.step h4 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.step p { margin: 0; font-size: 12px; color: var(--text-3); line-height: 1.45; }

/* ── Agent grid (compact 12-up) ───────────────────────────────────────── */
.agent-grid { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); }
.agent {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  box-shadow: var(--shadow-card);
}
.agent .num { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.agent h4 { margin: 2px 0 3px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.agent p { margin: 0; font-size: 11px; color: var(--text-3); line-height: 1.4; }
.agent.feature { border-color: var(--ring); background: var(--accent-soft); }

/* ── Slide counter (bottom right of each .slide) ──────────────────────── */
.slide-counter {
  position: fixed; bottom: 12px; right: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-3);
  background: var(--surface); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 999px;
  box-shadow: var(--shadow-card);
  z-index: 40; pointer-events: none;
}
.slide-help {
  position: fixed; bottom: 12px; left: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: var(--text-4);
  background: var(--surface); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 999px;
  z-index: 40;
}
.slide-help kbd {
  display: inline-block; padding: 1px 5px; margin: 0 1px;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface-2); color: var(--text-2); font-size: 9.5px;
}

/* ── Pipe diagram (compact) ───────────────────────────────────────────── */
.pipe-diagram {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  font-size: 11px;
}
.pipe-step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px;
}
.pipe-step .num { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 10px; font-weight: 700; }
.pipe-step .name { font-weight: 600; color: var(--text); font-size: 12px; margin-top: 2px; }
.pipe-step .desc { color: var(--text-3); margin-top: 2px; line-height: 1.35; }

/* ── Long-form doc (primer) — distinct from slide deck ────────────────── */
.doc {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 28px 56px;
}
.toc {
  position: sticky; top: 60px; align-self: start;
  max-height: calc(100vh - 80px); overflow-y: auto;
  font-size: 12.5px;
  padding-right: 6px;
}
.toc .toc-title { text-transform: uppercase; letter-spacing: 0.10em; font-size: 10px; font-weight: 700; color: var(--text-3); margin-bottom: 8px; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin: 4px 0; }
.toc li::before { content: counter(toc, decimal-leading-zero) "  "; color: var(--text-4); font-family: 'JetBrains Mono', monospace; font-size: 10px; margin-right: 3px; }
.toc a { color: var(--text-2); display: inline; }
.toc a:hover { color: var(--accent); opacity: 1; }
.doc article { max-width: 760px; }
.doc article p, .doc article li { font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
.doc article p { margin: 10px 0; }
.doc article h2 { margin-top: 32px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: 22px; line-height: 1.18; }
.doc article h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.doc article h3 { font-size: 16px; margin-top: 20px; margin-bottom: 4px; }
.doc article h4 { font-size: 14px; margin-top: 14px; margin-bottom: 4px; color: var(--text); }

.callout {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px;
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.callout .icon { width: 26px; height: 26px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.callout .body { font-size: 13px; line-height: 1.55; color: var(--text-2); }
.callout .body strong { color: var(--text); }
.callout .body p:first-child { margin-top: 0; }
.callout .body p:last-child { margin-bottom: 0; }
.callout .body .label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--accent); font-weight: 700; margin-bottom: 3px; }
.callout.parallel  { border-left-color: #818cf8; }
.callout.parallel .icon { background: rgba(129,140,248,0.10); color: #a5b4fc; }
.callout.parallel .body .label { color: #a5b4fc; }
.callout.warn      { border-left-color: var(--warn); }
.callout.warn .icon { background: rgba(245,158,11,0.10); color: var(--warn); }
.callout.warn .body .label { color: var(--warn); }
.callout.insight   { border-left-color: var(--success); }
.callout.insight .icon { background: rgba(16,185,129,0.10); color: var(--success); }
.callout.insight .body .label { color: var(--success); }

/* ── Inputs / footer ──────────────────────────────────────────────────── */
.input { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 6px; font: inherit; font-size: 12px; }
footer { padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface); text-align: center; color: var(--text-4); font-size: 11px; }
footer .mark { display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: var(--brand-grad); vertical-align: middle; margin-right: 4px; }

/* ── Print (PDF export) ───────────────────────────────────────────────── */
@media print {
  :root, [data-theme] {
    --bg: #ffffff !important; --surface: #ffffff !important; --surface-2: #ffffff !important;
    --text: #0b1e3f !important; --text-2: #1f2937 !important; --text-3: #475569 !important;
    --border: #cbd5e1 !important; --border-soft: #e2e8f0 !important;
    --accent: #003478 !important; --link: #003478 !important;
    --hero-grad: none !important; --shadow-card: none !important;
  }
  .topbar, .theme-switch, .slide-counter, .slide-help, .hero .actions { display: none !important; }
  .slide { min-height: auto; padding: 16px 0; break-inside: avoid; page-break-after: always; }
  body.deck { overflow: visible; height: auto; scroll-snap-type: none; }
}

/* ── Small-laptop tuning (1280×720 zone) ──────────────────────────────── */
@media (max-height: 760px) {
  .slide { padding: 14px 24px 48px; }
  .slide-inner { gap: 10px; }
  .hero h1 { font-size: clamp(24px, 3.5vw, 34px); }
  .kpi .value { font-size: 22px; }
  .agent-grid { gap: 6px; }
  .agent { padding: 8px 10px; }
  .card { padding: 12px 14px; }
}

@media (max-width: 1100px) {
  .kpis.six, .kpis.eight { grid-template-columns: repeat(4, 1fr); }
  .kpis.five { grid-template-columns: repeat(3, 1fr); }
  .agent-grid { grid-template-columns: repeat(3, 1fr); }
  .cards.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .kpis.six, .kpis.eight, .kpis.five, .kpis.four { grid-template-columns: repeat(2, 1fr); }
  .cards.three, .cards.two { grid-template-columns: 1fr; }
  .agent-grid { grid-template-columns: repeat(2, 1fr); }
  .doc { grid-template-columns: 1fr; gap: 18px; }
  .toc { position: static; max-height: none; }
  .pipe-diagram { grid-template-columns: repeat(3, 1fr); }
  .topbar nav { display: none; }
}