@charset "UTF-8";
/* ============================================================================
   CloudTAK - Program Update - 2026 TAK Offsite
   DFPC Center of Excellence for Advanced Technology Aerial Firefighting

   Reveal.js theme. Loaded after `reveal/reveal.css`, which it overrides.
   No build step, no preprocessor.

   This is the deck sibling of the CloudTAK BSAR white paper
   (`2026-08-05-cloudtak-bsar/assets/styles.css`) and deliberately reuses its
   tokens, type ramp and component vocabulary - .eyebrow, .sect-num, .card,
   .stat, .pill, .pull, .diagram, .note, .ph all mean the same thing here.

   Two differences from the paper, both because this is projected rather than
   read:
     - The deck is dark in every scheme. The paper's cover was already dark in
       both, so its cover palette becomes the deck's base palette (§1) and
       there is no prefers-color-scheme block at all.
     - Sizing is fixed, not fluid. Reveal scales a 1280x720 stage to the
       display, so every value below is a real pixel on that stage. No clamp().

   CONTENTS
     1.  Design tokens
     2.  Reveal overrides & stage
     3.  Slide frame
     4.  Deck chrome
     5.  Typography
     6.  Eyebrows, tags & chips
     7.  Cover
     8.  Section dividers
     9.  Stat band & screenshots
     10. Cards
     11. Numbered themes & recommendations
     12. Lists
     13. Split layouts
     14. Tables & status pills
     15. Pull quotes
     16. Architecture diagram
     17. Callouts & placeholders
     18. Fragments
     19. Print / PDF export
   ========================================================================= */


/* ============================================================================
   1. DESIGN TOKENS
   The paper's cover palette, promoted to the deck's base palette.
   ========================================================================= */

:root {
  /* ---- ground ------------------------------------------------------------ */
  --ink:            #0A0E14;
  --ink-2:          #111A26;
  --ink-3:          #18222E;

  /* ---- text -------------------------------------------------------------- */
  --heading:        #FFFFFF;
  --body:           #C3CEDB;
  --muted:          #93A6BC;
  --faint:          #7B8CA1;
  --strong:         #E8EFF6;

  /* ---- rules & surfaces -------------------------------------------------- */
  --rule:           rgba(255,255,255,.10);
  --rule-strong:    rgba(255,255,255,.20);
  --surface:        rgba(255,255,255,.035);
  --surface-2:      rgba(255,255,255,.06);

  /* ---- CloudTAK accent --------------------------------------------------- */
  --gold:           #FFD700;
  --amber:          #FF9820;
  --amber-ink:      #FFC15E;         /* accent text on dark */
  --grad:           linear-gradient(115deg, #FF9820 0%, #FFCE04 46%, #FFD700 62%);

  /* ---- distribution marking ---------------------------------------------
     Deliberately not the status green below: this is a marking, not a state,
     and it must read as opaque and flat rather than as a UI badge. */
  --distro:         #1B6B3A;

  /* ---- status ------------------------------------------------------------ */
  --ok:    #5BD08D;  --ok-bg:   rgba(91,208,141,.13);
  --warn:  #E8B061;  --warn-bg: rgba(232,176,97,.13);
  --info:  #7FB2F0;  --info-bg: rgba(127,178,240,.13);

  /* ---- diagram ----------------------------------------------------------- */
  --diagram-core:        #1E2C3D;
  --diagram-core-stroke: #46607D;

  /* ---- type ramps -------------------------------------------------------- */
  --sans:    "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Inter Tight", "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:   "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- stage metrics ----------------------------------------------------- */
  --pad-x:   80px;
  --pad-top: 56px;
  --pad-bot: 64px;   /* clears the deck chrome in §4 */
}


/* ============================================================================
   2. REVEAL OVERRIDES & STAGE
   ========================================================================= */

.reveal-viewport {
  background-color: var(--ink);
  background-image:
    radial-gradient(110% 80% at 82%  4%, rgba(255,152,32,.10), transparent 60%),
    radial-gradient( 80% 70% at  4% 98%, rgba(  0, 64,140,.22), transparent 64%),
    linear-gradient(168deg, #0F1926 0%, #0A0E14 52%, #080C12 100%);
  background-attachment: fixed;
}

.reveal {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
}

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

/* Reveal toggles section display between none and block. Only the present
   slide may become a flex column, or every slide in the deck would show at
   once - hence `.present` rather than a bare section selector. */
.reveal .slides > section,
.reveal .slides > section > section { padding: 0; }

.reveal a { color: var(--amber-ink); text-decoration: none; }

/* progress bar and controls, tinted to the brand */
.reveal .progress { height: 3px; color: var(--amber); background: rgba(255,255,255,.07); }
.reveal .progress span { background: var(--grad); }
.reveal .controls { color: var(--faint); }

.reveal .slide-number {
  right: 26px;
  bottom: 22px;
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(255,255,255,.06);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--faint);
}
.reveal .slide-number a { color: inherit; }


/* ============================================================================
   3. SLIDE FRAME
   Every slide is `<section><div class="s"> ... </div></section>`. The inner
   div, not the section, is the flex column - see the note in §2.
   ========================================================================= */

.reveal .s {
  position: relative;                  /* the containing block for §7's textures */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 720px;                       /* the configured stage height */
  padding: var(--pad-top) var(--pad-x) var(--pad-bot);
  overflow: hidden;                    /* the stage is fixed; nothing bleeds out of it */
}
.reveal .s--center { justify-content: center; }
.reveal .s--flush  { padding-inline: 0; }

/* Pushes an element to the bottom of the slide. On a slide whose content
   already fills the stage the auto margin resolves to zero, so the preceding
   element carries the minimum gap rather than letting the two meet flush. */
.reveal .s-push { margin-top: auto; }
.reveal .s > *:has(+ .s-push) { margin-bottom: 18px; }

/* the body of a slide, below its heading block */
.reveal .s-body { margin-top: 30px; }
.reveal .s-body--tight { margin-top: 20px; }


/* ============================================================================
   4. DECK CHROME
   Sits outside `.slides` so it keeps a constant size while the stage scales.
   ========================================================================= */

.deck-chrome {
  position: absolute;
  inset: auto auto 20px 26px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.deck-chrome img { display: block; width: auto; height: 18px; opacity: .85; }
.deck-chrome span { padding-top: 1px; }

/* Distribution marking. Bottom centre on every slide, which is where a running
   marking belongs, and a sibling of `.slides` so it is stated once rather than
   repeated in the markup of all 24 slides. Fully opaque - a marking must not
   pick up whatever happens to sit behind it - and it survives into the PDF
   export, unlike the rest of the chrome. */
.distro {
  position: absolute;
  inset: auto auto 20px 50%;
  z-index: 40;
  transform: translateX(-50%);
  padding: 5px 13px;
  border-radius: 5px;
  background: var(--distro);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  color: #FFFFFF;
  pointer-events: none;
}


/* ============================================================================
   5. TYPOGRAPHY
   ========================================================================= */

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.022em;
  text-transform: none;
  color: var(--heading);
}
.reveal h2 { font-size: 46px; letter-spacing: -.028em; }
.reveal h3 { font-size: 20px; letter-spacing: -.014em; }
.reveal h4 { font-size: 16px; letter-spacing: -.008em; }

.reveal p { margin: 0 0 .9em; }
.reveal p:last-child { margin-bottom: 0; }
.reveal strong { font-weight: 600; color: var(--strong); }
.reveal em { font-style: italic; }

/* the standfirst under a slide heading */
.reveal .lead {
  max-width: 62ch;
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}
.reveal .lead b { font-weight: 400; color: var(--strong); }

/* running prose, held to a readable measure */
.reveal .prose { max-width: 54ch; font-size: 18px; line-height: 1.62; }
.reveal .prose--wide { max-width: 72ch; }

/* gradient-filled run inside a headline */
.reveal .hl {
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ============================================================================
   6. EYEBROWS, TAGS & CHIPS
   ========================================================================= */

.reveal .eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.reveal .eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(255,215,0,.8);
}
.reveal .eyebrow .sep { width: 14px; height: 1px; background: var(--rule-strong); }

/* section counter above a slide heading, with the brand rule */
.reveal .sect-num {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.reveal .sect-num::before {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

.reveal .version-chip,
.reveal code {
  padding: 2px 7px;
  border: 1px solid rgba(255,152,32,.42);
  border-radius: 4px;
  background: rgba(255,152,32,.10);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--amber-ink);
}
.reveal code { border-color: var(--rule); background: rgba(255,255,255,.05); }


/* ============================================================================
   7. COVER
   ========================================================================= */

.cover-topo,
.cover-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.cover-topo {
  inset: -10% -4% auto -4%;
  height: 128%;
  opacity: .26;
  -webkit-mask-image: linear-gradient(175deg, #000 5%, rgba(0,0,0,.55) 45%, transparent 88%);
          mask-image: linear-gradient(175deg, #000 5%, rgba(0,0,0,.55) 45%, transparent 88%);
}
.cover-topo img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .55; }

.cover-grid {
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(100% 75% at 50% 30%, #000, transparent 78%);
          mask-image: radial-gradient(100% 75% at 50% 30%, #000, transparent 78%);
}

/* Content sits above the texture layers. The two texture layers must keep the
   `position: absolute` they are given above - they carry a 128% height and
   would otherwise be laid out in the slide's flex flow as an 900px-tall
   block - so they are named explicitly rather than left to the `*` rule. */
.reveal .s > .cover-topo,
.reveal .s > .cover-grid { position: absolute; z-index: 0; }
.reveal .s > * { position: relative; z-index: 1; }

.reveal .lockup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.reveal .lockup-group { display: flex; align-items: center; gap: 16px; }
.reveal .lockup img { display: block; width: auto; }
.reveal .lockup .em      { height: 46px; }
.reveal .lockup .em-wide { height: 30px; }
.reveal .lockup-div { flex: none; width: 1px; height: 38px; background: var(--rule-strong); }
.reveal .lockup-spacer { flex: 1 1 20px; }

.reveal .lockup-role {
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}
.reveal .lockup-name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--strong);
}
.reveal .lockup-name span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.reveal .cover h1 {
  max-width: 17ch;
  margin: 0 0 22px;
  font-size: 74px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.038em;
}

.reveal .cover .deck {
  max-width: 60ch;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}
.reveal .cover .deck b { font-weight: 400; color: var(--strong); }

.reveal .docmeta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--rule);
}
.reveal .docmeta div { padding: 12px 15px; background: rgba(10,14,20,.62); }
/* two presenter lines need more room than a fifth of the row gives them */
.reveal .docmeta-authors { grid-column: span 2; }
.reveal .docmeta dt {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}
.reveal .docmeta dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--strong);
}


/* ============================================================================
   8. SECTION DIVIDERS
   ========================================================================= */

.reveal .divider .d-num {
  font-family: var(--display);
  font-size: 132px;
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.05em;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.reveal .divider h2 {
  max-width: 20ch;
  margin: 18px 0 0;
  font-size: 60px;
  letter-spacing: -.034em;
}
.reveal .divider .lead { margin-top: 20px; font-size: 25px; }
.reveal .divider .d-rule {
  width: 96px;
  height: 3px;
  margin-bottom: 34px;
  border-radius: 2px;
  background: var(--grad);
}


/* ============================================================================
   9. STAT BAND & SCREENSHOTS
   ========================================================================= */

.reveal .stats {
  display: grid;
  flex: none;                          /* never squeezed by a flexible sibling */
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--rule);
}
.reveal .stats--4 { grid-template-columns: repeat(4, 1fr); }
.reveal .stat { padding: 26px 22px; background: var(--ink-2); }
.reveal .stat .n {
  display: flex;
  align-items: baseline;
  gap: .06em;
  margin-bottom: 8px;
  font-family: var(--display);
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: #fff;
}
.reveal .stat .n .u {
  font-size: .42em;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--gold);
}
.reveal .stat .l { font-size: 13px; line-height: 1.45; color: var(--muted); }
.reveal .stat .l b {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--strong);
}

/* A product screenshot that takes whatever vertical space the slide has left
   over, cropping rather than letterboxing so it stays flush with the columns
   above and below it. */
.reveal .shot {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--ink-2);
}
.reveal .shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;         /* keeps the app chrome, crops the map */
}

.reveal .band-label {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}


/* ============================================================================
   10. CARDS
   ========================================================================= */

.reveal .grid { display: grid; gap: 14px; }
.reveal .g2 { grid-template-columns: repeat(2, 1fr); }
.reveal .g3 { grid-template-columns: repeat(3, 1fr); }
.reveal .g4 { grid-template-columns: repeat(4, 1fr); }

.reveal .card {
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
}
.reveal .card h3 { margin-bottom: 7px; }
.reveal .card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.reveal .card p + p { margin-top: 8px; }

/* the version a capability landed in, set above its title */
.reveal .card-tag {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--amber-ink);
}

.reveal .card-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border: 1px solid rgba(255,152,32,.28);
  border-radius: 9px;
  background: rgba(255,152,32,.10);
  color: var(--amber-ink);
}
.reveal .card-ico svg { width: 17px; height: 17px; stroke-width: 1.7; }

/* a card carrying the accent as a full left edge, for the one that matters */
.reveal .card--lead {
  border-color: rgba(255,152,32,.35);
  background: rgba(255,152,32,.07);
}


/* ============================================================================
   11. NUMBERED THEMES & RECOMMENDATIONS
   ========================================================================= */

.reveal .themes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reveal .themes li { padding-top: 18px; border-top: 3px solid var(--amber); }
.reveal .themes-n {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--amber-ink);
}
.reveal .themes p {
  margin: 0;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.006em;
  color: #DCE5EF;
}
.reveal .themes em { font-style: italic; font-weight: 500; color: #FFFFFF; }

.reveal .recs {
  display: grid;
  gap: 1px;
  counter-reset: r;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--rule);
}
.reveal .recs li {
  position: relative;
  counter-increment: r;
  margin: 0;
  padding: 18px 22px 18px 62px;
  background: var(--ink-2);
}
.reveal .recs li::before {
  content: counter(r, decimal-leading-zero);
  position: absolute;
  left: 24px;
  top: 20px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--amber-ink);
}
.reveal .recs b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--heading);
}
.reveal .recs span { font-size: 15px; line-height: 1.55; color: var(--muted); }


/* ============================================================================
   12. LISTS
   ========================================================================= */

.reveal ul, .reveal ol { margin: 0; padding-left: 1.2em; }
.reveal li { margin-bottom: .4em; }
.reveal li::marker { color: var(--faint); }
.reveal li:last-child { margin-bottom: 0; }

/* checked list - a brand tick instead of a bullet */
.reveal .ticks { list-style: none; padding: 0; }
.reveal .ticks li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 30px;
  font-size: 17px;
  line-height: 1.5;
}
.reveal .ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber);
  transform: rotate(-45deg);
}
.reveal .ticks b { color: var(--strong); }

/* label / value rows for a dense capability list */
.reveal .rows { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none;
  overflow: hidden; border: 1px solid var(--rule); border-radius: 12px; background: var(--rule); }
.reveal .rows li {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 20px;
  align-items: baseline;
  margin: 0;
  padding: 13px 20px;
  background: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.reveal .rows b {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--strong);
}


/* ============================================================================
   13. SPLIT LAYOUTS
   ========================================================================= */

.reveal .split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.reveal .split--wide-left  { grid-template-columns: 1.25fr 1fr; }
.reveal .split--wide-right { grid-template-columns: 1fr 1.35fr; }

.reveal .panel {
  padding: 24px 26px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
}
.reveal .panel h4 {
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}


/* --- QR code -------------------------------------------------------------
   The code itself keeps a literal white quiet zone rather than inheriting the
   slide's dark ground - inverted codes are unreliable across scanners, and a
   projected code only gets one attempt. */

.reveal .qr {
  display: flex;
  gap: 18px;
  align-items: center;
  align-self: start;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
}
.reveal .qr img {
  flex: none;
  width: 128px;
  height: 128px;
  padding: 7px;
  border-radius: 8px;
  background: #FFFFFF;
  image-rendering: pixelated;          /* keep module edges hard when scaled */
}
.reveal .qr b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--heading);
}
.reveal .qr span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }


/* ============================================================================
   14. TABLES & STATUS PILLS
   ========================================================================= */

.reveal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.reveal thead th {
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}
.reveal tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.45;
  color: var(--muted);
}
.reveal tbody tr:last-child td { border-bottom: 0; }
.reveal td.need {
  width: 28%;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--strong);
}

.reveal .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.reveal .pill::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.reveal .pill.ok  { color: var(--ok);   background: var(--ok-bg); }
.reveal .pill.dev { color: var(--warn); background: var(--warn-bg); }
.reveal .pill.new { color: var(--info); background: var(--info-bg); }


/* ============================================================================
   15. PULL QUOTES
   ========================================================================= */

.reveal .pull { max-width: 30ch; }
.reveal .pull p {
  margin: 0;
  font-family: var(--serif);
  font-size: 54px;
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--heading);
}
.reveal .pull em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.reveal .pull-attr {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}


/* ============================================================================
   16. ARCHITECTURE DIAGRAM
   Scoped to .diagram so the very generic class names (.box, .lbl, .flow)
   cannot leak into the rest of the deck.
   ========================================================================= */

.reveal .diagram { width: 100%; }
.reveal .diagram svg { display: block; width: 100%; height: auto; }

.reveal .diagram .box {
  fill: var(--surface-2);
  stroke: var(--rule-strong);
  stroke-width: 1.25;
  rx: 10;
}
.reveal .diagram .box-core { fill: var(--diagram-core); stroke: var(--diagram-core-stroke); }
.reveal .diagram .box-hot  { fill: rgba(255,152,32,.12); stroke: rgba(255,152,32,.5); }

.reveal .diagram .lbl {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.2px;
  fill: var(--heading);
}
.reveal .diagram .lbl-sm { font-size: 12.5px; }
.reveal .diagram .sub { font-family: var(--sans); font-size: 11px; fill: var(--muted); }
.reveal .diagram .sub-sm { font-size: 10px; }

.reveal .diagram .zone {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  fill: var(--faint);
}
.reveal .diagram .zbox {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  rx: 14;
}

.reveal .diagram .flow { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; marker-end: url(#ah); }
.reveal .diagram .flow-g { fill: none; stroke: #FFB300; stroke-width: 2; marker-end: url(#ahg); }
.reveal .diagram .flowlbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .5px; fill: var(--faint); }


/* ============================================================================
   17. CALLOUTS & PLACEHOLDERS
   ========================================================================= */

.reveal .note {
  padding: 14px 18px;
  border-left: 3px solid var(--amber);
  border-radius: 0 10px 10px 0;
  background: rgba(255,152,32,.09);
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
}
.reveal .note b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber-ink);
}

/* Unresolved placeholder: deliberately loud. Every one of these is a value the
   presenter must fill in before the deck is shown. Same convention as the
   white paper. */
.reveal .ph {
  padding: 1px 7px;
  border: 1px dashed rgba(255,193,94,.5);
  border-radius: 4px;
  background: repeating-linear-gradient(
    135deg,
    rgba(255,152,32,.16) 0 6px,
    transparent 6px 12px
  );
  font-family: var(--mono);
  font-size: .85em;
  white-space: nowrap;
  color: var(--amber-ink);
}


/* ============================================================================
   18. FRAGMENTS
   Reveal's default fragment fade is a step change. Adding a small rise makes
   a build read as one motion from the back of a room.
   ========================================================================= */

.reveal .fragment.rise { opacity: 0; transform: translateY(12px); transition: all .3s cubic-bezier(.22,1,.36,1); }
.reveal .fragment.rise.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal .fragment.rise { transition: none; }
}


/* ============================================================================
   19. PRINT / PDF EXPORT
   Reveal's `?print-pdf` path. The deck keeps its dark fills on paper - it is
   a slide handout, not a document, and the light-on-dark type is the design.
   ========================================================================= */

@media print {
  .reveal-viewport,
  .reveal .s {
    -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  }
  .deck-chrome { display: none; }
  .reveal .fragment.rise { opacity: 1; transform: none; }

  /* The presentation chrome goes; the distribution marking must not. A fixed
     element repeats on every printed page, which an absolute one - anchored
     once to a container holding all 24 stacked pages - would not. */
  .distro { position: fixed; bottom: 14px; }
}