/* =====================================================================
   NSF NCAR — Reveal.js 6 theme  ·  "How I Use AI for R&D"
   Tokens generated from branding-assets/brand-guide/brand.json
   (palette, Poppins + JetBrains Mono, per-background contrast rules).
   ===================================================================== */

/* ---------- Fonts (self-hosted woff2) ---------- */
@font-face { font-family:'Poppins'; font-weight:300; font-style:normal; font-display:swap; src:url('../fonts/poppins/Poppins-Light.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/poppins/Poppins-Regular.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:400; font-style:italic;  font-display:swap; src:url('../fonts/poppins/Poppins-Italic.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/poppins/Poppins-Medium.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/poppins/Poppins-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/poppins/Poppins-Bold.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:800; font-style:normal; font-display:swap; src:url('../fonts/poppins/Poppins-ExtraBold.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:400; font-style:italic; font-display:swap; src:url('../fonts/jetbrains-mono/JetBrainsMono-Italic.woff2') format('woff2'); }

/* ---------- Brand tokens (brand.json) ---------- */
:root{
  --ncar-blue:#0057C2; --dark-blue:#00357A; --space:#011837; --light-blue:#42C0FF;
  --light-gray:#F1F0EE; --white:#FFFFFF; --orange:#FAA119; --yellow:#FFDD31;
  --ink:#E9EEF5;          /* default body text on space */
  --ink-dim:#AEBFD6;      /* secondary text on space */
  --ink-faint:#7E93B2;    /* tertiary */
  --panel:#0A2247;        /* raised panel on space */
  --panel-2:#0E2C57;      /* panel hover/alt */
  --hair:rgba(122,168,224,.22); /* hairline borders */

  /* Reveal 6 variables */
  --r-background-color:var(--space);
  --r-main-font:'Poppins',sans-serif;
  --r-main-font-size:26px;
  --r-main-color:var(--ink);
  --r-heading-font:'Poppins',sans-serif;
  --r-heading-color:var(--white);
  --r-heading-font-weight:700;
  --r-heading-line-height:1.05;
  --r-heading1-size:2.4em; --r-heading2-size:1.5em; --r-heading3-size:1.15em;
  --r-link-color:var(--light-blue);
  --r-link-color-hover:#9FD4FF;
  --r-selection-background-color:var(--ncar-blue);
  --r-code-font:'JetBrains Mono',monospace;
}

/* ---------- Base ---------- */
.reveal{ font-family:var(--r-main-font); font-weight:400; letter-spacing:.005em; }
.reveal .slides{ text-align:left; }
.reveal .slides section{ height:100%; }
.reveal h1,.reveal h2,.reveal h3{ letter-spacing:-.01em; text-transform:none; }
.reveal h2{ margin:0 0 .35em; }
.reveal strong{ color:var(--white); font-weight:600; }
.reveal em{ color:#CFE0F5; font-style:italic; }
.reveal a{ text-decoration:none; border-bottom:1px solid rgba(66,192,255,.4); }
.reveal a:hover{ color:var(--r-link-color-hover); border-bottom-color:var(--light-blue); }
.reveal code{ font-family:var(--r-code-font); font-size:.86em; background:rgba(66,192,255,.1);
  color:#BFE3FF; padding:.06em .35em; border-radius:5px; }
.reveal pre code{ font-size:.62em; line-height:1.45; border-radius:10px; padding:.9em 1.1em; }
.reveal ::selection{ background:var(--ncar-blue); color:#fff; }

/* ---------- Slide layout helpers ---------- */
.reveal .slides section.pad{ padding:6px 34px 8px; }
.slide-h{ font-size:1.46em; font-weight:700; color:var(--white); margin:0 0 .06em; line-height:1.06; }
.slide-sub{ font-size:.62em; color:var(--light-blue); font-weight:600; letter-spacing:.02em; margin:.08em 0 .42em; }
.lead{ font-size:.92em; color:#D7E2F1; max-width:24em; }
.reveal ul{ margin:0 0 .2em 1.05em; }
.reveal li{ margin:.18em 0; line-height:1.32; }
.reveal li::marker{ color:var(--light-blue); }
.small{ font-size:.74em; } .dim{ color:var(--ink-dim); } .faint{ color:var(--ink-faint); }
.center{ text-align:center; } .mt{ margin-top:.5em; } .nowrap{ white-space:nowrap; }

/* eyebrow / kicker */
.eyebrow{ font-size:.5em; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--light-blue); margin:0 0 .5em; }

/* ---------- Track tags + badges ---------- */
.tag{ display:inline-block; font-size:.42em; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; padding:.32em .8em; border-radius:999px; vertical-align:middle; }
.tag-both{ color:#BFE3FF; border:1.5px solid rgba(66,192,255,.5); }
.tag-sci{ color:#FFE7AE; border:1.5px solid rgba(250,161,25,.55); }
.tag-eng{ color:#BFE3FF; background:rgba(0,87,194,.35); }
.tag-row{ display:flex; gap:.5em; align-items:center; margin:0 0 .35em; }

.badge{ display:inline-flex; align-items:center; gap:.4em; font-size:.42em; font-weight:600;
  letter-spacing:.04em; padding:.3em .7em; border-radius:999px; }
.badge-meta{ color:var(--space); background:var(--yellow); }      /* used sparingly: 1–2x total */
.badge-honest{ color:#0c2b16; background:#7BD88F; }               /* honest-status / not-shipped */

/* ---------- Cheat-sheet link pill ---------- */
.cheat{ display:inline-flex; align-items:center; gap:.45em; font-size:.5em; font-weight:600;
  color:#BFE3FF !important; background:rgba(66,192,255,.12); border:1px solid rgba(66,192,255,.4)!important;
  padding:.34em .8em; border-radius:8px; }
.cheat:hover{ background:rgba(66,192,255,.22); }
.cheat::before{ content:"▤"; opacity:.8; }

/* ---------- Honest-status + warning callouts ---------- */
.honest{ border-left:4px solid #7BD88F; background:rgba(123,216,143,.14);
  padding:.5em .9em; border-radius:0 8px 8px 0; font-size:.78em; color:#DCF3E2; }
.warn{ border-left:4px solid var(--yellow); background:rgba(255,221,49,.13);
  padding:.5em .9em; border-radius:0 8px 8px 0; font-size:.78em; color:#FCF1C2; }
.warn b,.honest b{ color:#fff; }

/* ---------- Panels & diagram boxes (overflow-proof: boxes hug content) ---------- */
.panel{ background:var(--panel); border:1px solid var(--hair); border-radius:12px; padding:.7em .9em; }
.cols{ display:grid; gap:.7em; align-items:stretch; }
.c2{ grid-template-columns:1fr 1fr; } .c3{ grid-template-columns:repeat(3,1fr); }
.box{ background:var(--panel); border:1px solid var(--hair); border-radius:10px; padding:.55em .75em;
  font-size:.74em; min-width:0; }              /* min-width:0 lets text wrap, never overflow */
.box h4{ font-size:1em; margin:0 0 .25em; color:#fff; font-weight:600; }
.box p{ margin:.15em 0; color:var(--ink-dim); line-height:1.3; }
.box.accent{ border-color:rgba(66,192,255,.5); }
.box.blue{ background:linear-gradient(160deg,var(--ncar-blue),var(--dark-blue)); border-color:transparent; }
.box.blue p,.box.blue h4{ color:#fff; }

/* flow: a row/column of boxes joined by arrows */
.flow{ display:flex; align-items:center; gap:.45em; flex-wrap:wrap; }
.flow.col{ flex-direction:column; align-items:stretch; }
.arrow{ color:var(--light-blue); font-size:1.2em; font-weight:700; flex:0 0 auto; }
.arrow.down::after{ content:"↓"; } .arrow.right::after{ content:"→"; }

/* simple data table */
.reveal table.t{ font-size:.6em; border-collapse:collapse; width:100%; margin:.2em 0; }
.reveal table.t th,.reveal table.t td{ border:1px solid var(--hair); padding:.4em .6em; text-align:left; vertical-align:top; }
.reveal table.t th{ background:rgba(0,87,194,.3); color:#fff; font-weight:600; }
.reveal table.t td.k{ color:#BFE3FF; font-weight:600; white-space:nowrap; }
.reveal table.t tr:nth-child(even) td{ background:rgba(122,168,224,.06); }

/* relative-token bar */
.bar{ display:inline-block; height:.7em; border-radius:3px; background:var(--light-blue); vertical-align:middle; }

/* ---------- Depth gauge (vertical level indicator) ---------- */
.depth{ position:absolute; top:14px; right:18px; display:flex; flex-direction:column; gap:3px; z-index:5; }
.depth span{ font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--ink-faint);
  padding:1px 7px; border-radius:5px; border:1px solid transparent; }
.depth span.on{ color:var(--space); background:var(--light-blue); }
.lvl{ display:inline-block; font-size:.42em; font-weight:700; letter-spacing:.1em; color:var(--space);
  background:var(--light-blue); padding:.28em .7em; border-radius:6px; margin-bottom:.4em; }
.lvl.l2{ background:#7FB2FF; } .lvl.l3{ background:#FFE7AE; }

/* ---------- Act divider slides (full-bleed photography) ---------- */
section.act{ display:flex; flex-direction:column; justify-content:center; padding:0 64px !important; }
section.act .act-no{ font-size:1.0em; font-weight:800; color:var(--light-blue); letter-spacing:.04em; opacity:.85; }
section.act h2{ font-size:2.1em; max-width:15em; }
section.act .act-take{ font-size:.8em; color:#E4ECF7; max-width:22em; margin-top:.3em;
  border-left:3px solid var(--light-blue); padding-left:.7em; }

/* ---------- Cover ---------- */
section.cover{ padding:38px 70px !important; display:flex; flex-direction:column; justify-content:space-between; }
section.cover h1{ font-size:2.2em; line-height:1.0; margin:.08em 0 0; }
section.cover .who{ font-size:.62em; color:#D7E2F1; font-weight:500; }
section.cover .who b{ color:#fff; font-weight:700; }
.cover-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1em; }
.cover-top img{ height:62px; width:auto; }
.date-pill{ font-size:.42em; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#9FD4FF; border:1.5px solid rgba(66,192,255,.5); padding:.5em 1em; border-radius:999px; white-space:nowrap; }

/* ---------- Per-slide top logo + footer chrome ---------- */
.slide-logo{ position:absolute; top:14px; left:20px; height:34px; width:auto; opacity:.92; z-index:4; }
.nsf-footer{ position:fixed; bottom:8px; left:0; right:0; text-align:center; z-index:30;
  font-size:13px; color:var(--ink-faint); pointer-events:none; }
.nsf-footer .hash{ color:var(--light-blue); font-weight:600; }
.reveal .slide-number{ background:transparent; color:var(--ink-faint); font-size:14px; right:14px; bottom:30px; }

/* ---------- Multiplex / audience affordance ---------- */
#mx-banner{ position:fixed; top:0; left:0; right:0; z-index:50; text-align:center;
  font-size:13px; font-weight:600; letter-spacing:.04em; padding:4px; color:#062; background:#7BD88F; display:none; }
#mx-banner.master{ background:var(--yellow); color:var(--space); }

/* progress + controls in brand color */
.reveal .progress{ color:var(--light-blue); height:4px; }
.reveal .controls{ color:var(--light-blue); }

/* fragments / reveal links a bit calmer */
.reveal .slides section .fragment.highlight-current-blue.current-fragment{ color:var(--light-blue); }

/* keep content clear of the slide-number / controls */
.reveal .slides section.pad{ padding-bottom:22px; }

/* ---------- Photo scrim for cover + act dividers (legibility over imagery) ---------- */
section.cover::before, section.act::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(112deg, rgba(1,24,55,.94) 0%, rgba(1,24,55,.76) 52%, rgba(0,53,122,.55) 100%);
}
section.cover > *, section.act > *{ position:relative; z-index:1; }

/* honest-status badge inline with heading */
.slide-h .badge{ vertical-align:middle; margin-left:.4em; }
/* two-up comparison emphasis */
.box.win{ border-color:rgba(123,216,143,.5); } .box.win h4{ color:#9FE6AC; }
/* keying for table cost cells */
.reveal table.t td .bar{ margin-left:.2em; }