/* ============================================================
   TransRisk industry presentation — 16:9 deck. Version 2.

   Served from the static site, consumed by the access service at
   /presentation/<slug>. Layout and design tokens only: no industry
   copy lives here, so the file is safe to serve publicly and cache.

   Typography scales with container query units (cqw) against the
   slide box, so one set of sizes works from a phone to a projector
   without any JS measuring anything.

   Two rules run through the whole file:

     1. Navy and green. Green is the only accent — eyebrow labels,
        ticks, KPI numerals, active states, badges.
     2. Amber and red are risk states only: limit warnings, breaches
        and current-state problem markers. Never emphasis, never
        decoration.

   Tone is set per slide. `.slide--dark` and `.slide--light` each
   redefine the same --s-* surface variables, so every component below
   reads the tone it happens to sit in rather than carrying two
   variants of itself. Dark carries the hero, the divider, the
   testimonial and the close; light carries the dense analytical
   slides, where small type on a dark ground is the harder read.
   ============================================================ */

:root {
  /* The deck is dark at the document level on every host. Without this
     the browser treats the page as light, paints its own canvas white,
     and that surface shows as a pale hairline down the left and right
     edges of the viewport. */
  color-scheme: dark;

  --d-ground:      #060d14;
  --d-navy:        #0f1f2e;
  --d-navy-2:      #16293a;
  --d-green:       #008540;
  --d-green-light: #00a44e;
  --d-paper:       #f7f9fa;
  --d-paper-2:     #ffffff;
  --d-ink:         #0f1f2e;

  /* Graphic fills. These are read as colour, not as text, so they keep
     their vivid values in both tones. */
  --d-amber:       #d99a06;
  --d-red:         #d2453d;
}

/* ---- tone: dark ---------------------------------------------------- */

.slide--dark {
  --s-bg:        var(--d-navy);
  --s-ink:       #f8f9fa;
  --s-muted:     rgba(248, 249, 250, 0.74);
  --s-faint:     rgba(248, 249, 250, 0.56);
  --s-line:      rgba(255, 255, 255, 0.12);
  --s-tile:      var(--d-navy-2);
  --s-tile-line: rgba(255, 255, 255, 0.10);
  --s-accent:    var(--d-green-light);
  --s-accent-soft: rgba(0, 164, 78, 0.16);
  --s-chip:      rgba(255, 255, 255, 0.07);
  /* Risk text on a dark ground: lifted so it clears 4.5:1. */
  --s-amber:     #e8b13a;
  --s-red:       #f0766d;
}

/* ---- tone: light ---------------------------------------------------- */

.slide--light {
  --s-bg:        var(--d-paper);
  --s-ink:       var(--d-ink);
  --s-muted:     #44586a;
  --s-faint:     #5c7183;
  --s-line:      #d9e1e7;
  --s-tile:      var(--d-paper-2);
  --s-tile-line: #dfe6eb;
  --s-accent:    var(--d-green);
  --s-accent-soft: rgba(0, 133, 64, 0.10);
  --s-chip:      #eef2f5;
  /* Risk text on a light ground: darkened for the same reason. */
  --s-amber:     #9a6a00;
  --s-red:       #b3241c;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--d-ground);
  color: #f8f9fa;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.deck {
  position: relative;
  width: 100%;
  height: 100vh;
  background: var(--d-ground);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ---- slide ---------------------------------------------------------- */

.slide {
  container-type: size;
  container-name: slide;
  position: absolute;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  display: none;
  flex-direction: column;
  padding: 4.4cqw 5.2cqw 5.4cqw;
  background: var(--s-bg);
  color: var(--s-ink);
  overflow: hidden;
}

.slide[data-active] { display: flex; }

/* Focus is moved here by script so screen readers announce the slide
   and the keyboard stays in context. It is not a control, so it takes
   no focus ring — the ring would trace the full slide edge. */
.slide:focus,
.slide:focus-visible { outline: none; }

/* The cover and the section divider carry a dot grid and a soft green
   field, so they read as punctuation in the sequence rather than as
   more body slides. */
.slide--cover,
.slide--divider {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.11) 0.1cqw, transparent 0.1cqw),
    radial-gradient(ellipse 70% 55% at 26% 12%, rgba(0, 164, 78, 0.17), transparent 70%);
  background-size: 1.5cqw 1.5cqw, 100% 100%;
  background-position: 0 0, 0 0;
  justify-content: center;
}

.slide--cover .slide-body,
.slide--divider .slide-body { flex: 0 0 auto; }

/* The heading block and the footer each take an auto top margin, so the
   free space splits above and below the content and the whole block
   sits optically centred. Without the first one the footer's own auto
   margin consumes all of it and the content hugs the top. */
.slide--cover .slide-eyebrow,
.slide--divider .slide-eyebrow { margin-top: auto; }

/* ---- heading block --------------------------------------------------- */

.slide-eyebrow {
  margin: 0 0 1.3cqw;
  font-size: 1.25cqw;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--s-accent);
}

.slide-title {
  margin: 0 0 1.1cqw;
  font-size: 3.1cqw;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.021em;
  /* Long sector names must break between words, never mid-word. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

.slide--cover .slide-title { font-size: 5cqw; margin-bottom: 1.4cqw; }
.slide--divider .slide-title { font-size: 4.2cqw; }

.slide-sub {
  margin: 0 0 1.7cqw;
  max-width: 66cqw;
  font-size: 1.6cqw;
  line-height: 1.5;
  color: var(--s-muted);
}

.slide-sub--wide { max-width: 78cqw; font-size: 1.75cqw; }

.body-text {
  margin: 0 0 1.2cqw;
  font-size: 1.5cqw;
  line-height: 1.5;
  color: var(--s-muted);
}

.body-text--tight { font-size: 1.28cqw; margin-top: 0.9cqw; }

/* Content is centred in the remaining height so sparse slides sit
   balanced in the frame while dense slides still fill it. */
.slide-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* If a slide ever does overflow, fall back to top-aligned rather
     than centring the overflow and clipping the first line as well as
     the last. Ignored by browsers that do not know the keyword, which
     leaves the plain `center` above. */
  justify-content: safe center;
  gap: 1.05cqw;
}

/* The deployment schedule carries more required content than the
   default scale fits at 16:9. It steps down one notch rather than
   dropping a claim. The scope slide used this too until the flow strip
   moved off it onto the decision-layer figure, which gave it the room
   back. */
.slide--dense .bullets li,
.slide--dense .checklist li,
.slide--dense .crosslist li { font-size: 1.2cqw; margin-bottom: 0.58cqw; }
.slide--dense .cmp-table { font-size: 1cqw; }
.slide--dense .cmp-table tbody th { font-size: 1.02cqw; }
.slide--dense .deploy-card { padding: 1.15cqw 1.4cqw; }
.slide--dense .illustrative { margin-top: 0.5cqw; }

.spaced { margin-top: 0.4cqw; }
.stack { display: flex; flex-direction: column; gap: 1.3cqw; }

/* Presenter notes never render. They are in the DOM for a future
   presenter view, and are excluded from print below. */
.speaker-notes { display: none !important; }

/* ---- footer --------------------------------------------------------- */

.slide-footer {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding-top: 1.3cqw;
  margin-top: auto;
  border-top: 1px solid var(--s-line);
  font-size: 1.1cqw;
  color: var(--s-faint);
}

.slide-number { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---- labels ---------------------------------------------------------- */

.tile-label {
  margin: 0 0 0.8cqw;
  font-size: 1.08cqw;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--s-accent);
}

.tile-label--muted { color: var(--s-faint); }

/* ---- tiles ------------------------------------------------------------ */

.tile-grid {
  display: grid;
  gap: 1.2cqw;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}

.tile {
  padding: 1.6cqw 1.5cqw;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-radius: 0.9cqw;
}

.tile-title { margin: 0 0 0.6cqw; font-size: 1.45cqw; font-weight: 650; line-height: 1.25; }
.tile-text  { margin: 0; font-size: 1.2cqw; line-height: 1.45; color: var(--s-muted); }

/* ---- lists ------------------------------------------------------------- */

.bullets, .checklist, .crosslist { margin: 0; padding: 0; list-style: none; }

.bullets li, .checklist li, .crosslist li {
  position: relative;
  padding-left: 2cqw;
  margin-bottom: 0.68cqw;
  font-size: 1.28cqw;
  line-height: 1.45;
  color: var(--s-muted);
}

.bullets li:last-child, .checklist li:last-child, .crosslist li:last-child { margin-bottom: 0; }

.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55cqw;
  width: 0.62cqw;
  height: 0.62cqw;
  border-radius: 50%;
  background: var(--s-accent);
}

.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2cqw;
  font-weight: 700;
  color: var(--s-accent);
}

/* Amber, because a crosslist is always a current-state problem marker. */
.crosslist li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  top: 0.05cqw;
  font-size: 1.1cqw;
  font-weight: 700;
  color: var(--s-amber);
}

/* ---- pills -------------------------------------------------------------- */

.pill-row { display: flex; flex-wrap: wrap; gap: 0.55cqw; margin: 0; padding: 0; list-style: none; }

.pill {
  padding: 0.5cqw 1.1cqw;
  font-size: 1.15cqw;
  line-height: 1.25;
  color: var(--s-ink);
  background: var(--s-chip);
  border: 1px solid var(--s-tile-line);
  border-radius: 99cqw;
  white-space: nowrap;
}

.slide--cover .pill, .slide--divider .pill { font-size: 1.3cqw; padding: 0.6cqw 1.3cqw; }

/* A label following a pill row would otherwise sit flush against the
   last chip, so the two blocks read as one. */
.pill-row + .tile-label { margin-top: 1.1cqw; }
.bullets + .callout, .checklist + .callout, .crosslist + .callout { margin-top: 0.9cqw; }

/* ---- two columns --------------------------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4cqw;
  align-items: start;
  min-width: 0;
}

.two-col--wide { gap: 3.2cqw; }
.two-col > * { min-width: 0; }

/* ---- callout -------------------------------------------------------------- */

.callout {
  margin: 0;
  padding: 1cqw 1.3cqw;
  border-left: 0.28cqw solid var(--s-accent);
  background: var(--s-accent-soft);
  border-radius: 0 0.5cqw 0.5cqw 0;
  font-size: 1.2cqw;
  line-height: 1.45;
  color: var(--s-ink);
}

.callout--tight { font-size: 1.12cqw; padding: 0.7cqw 1cqw; }

.closing-line {
  margin: 1.4cqw 0 0;
  font-size: 2cqw;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--s-accent);
}

.closing-line--light { font-size: 1.5cqw; font-weight: 600; }

/* ---- flow diagram ---------------------------------------------------------- */

.flow { display: flex; align-items: stretch; gap: 0.6cqw; }

.flow-step {
  flex: 1;
  min-width: 0;
  padding: 1.1cqw 0.9cqw;
  text-align: center;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-radius: 0.7cqw;
  border-top: 0.24cqw solid var(--s-line);
}

/* The physical and financial legs are tinted so the two halves of an
   exposure model read apart at a glance. Neither is a risk state. */
.flow-step--physical { border-top-color: var(--s-accent); }
.flow-step--financial { border-top-color: #6f8fa8; }
.flow-step--process { border-top-color: var(--s-line); }

.flow-step-name { margin: 0; font-size: 1.18cqw; font-weight: 650; line-height: 1.25; }
.flow-step-note { margin: 0.4cqw 0 0; font-size: 1cqw; line-height: 1.3; color: var(--s-faint); }

.flow-arrow { align-self: center; font-size: 1.4cqw; color: var(--s-accent); }


/* ---- fragmented-inputs diagram (slide 3) ------------------------------------ */

.fragment-map { display: flex; flex-direction: column; gap: 1cqw; }

.fragment-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8cqw; }

.fragment-node {
  padding: 0.9cqw 1.1cqw;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-left: 0.26cqw solid var(--d-amber);
  border-radius: 0.6cqw;
  font-size: 1.22cqw;
  font-weight: 650;
}

.fragment-node span { display: block; margin-top: 0.25cqw; font-size: 1cqw; font-weight: 400; color: var(--s-faint); }

.fragment-out {
  padding: 1cqw 1.2cqw;
  border: 1px dashed var(--s-amber);
  border-radius: 0.6cqw;
  text-align: center;
}

.fragment-out-title { margin: 0; font-size: 1.35cqw; font-weight: 650; color: var(--s-amber); }
.fragment-out-note { margin: 0.3cqw 0 0; font-size: 1.08cqw; color: var(--s-faint); }

/* ---- current-state cards (slide 3) --------------------------------------------- */

.state-card {
  padding: 1.4cqw 1.5cqw;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-radius: 0.9cqw;
}

.state-card--now { border-left: 0.28cqw solid var(--d-amber); }

.state-tag {
  margin: 0 0 0.5cqw;
  font-size: 1cqw;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--s-accent);
}

.state-tag--now { color: var(--s-amber); }

.state-title { margin: 0 0 0.9cqw; font-size: 1.42cqw; font-weight: 650; line-height: 1.25; }

/* ---- three-way comparison ------------------------------------------------------ */

.cmp-table { width: 100%; border-collapse: collapse; font-size: 1.05cqw; table-layout: fixed; }

.cmp-table thead th {
  padding: 0.6cqw 0.6cqw;
  text-align: left;
  font-size: 0.95cqw;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-faint);
  border-bottom: 1px solid var(--s-line);
}

.cmp-head--trk { color: var(--s-accent); }

.cmp-table tbody th {
  padding: 0.52cqw 0.55cqw;
  text-align: left;
  font-size: 1.08cqw;
  font-weight: 600;
  color: var(--s-ink);
  border-bottom: 1px solid var(--s-line);
}

.cmp-cell {
  padding: 0.52cqw 0.55cqw;
  border-bottom: 1px solid var(--s-line);
  color: var(--s-muted);
  vertical-align: top;
}

.cmp-mark { display: inline-block; width: 1.4cqw; font-weight: 700; }
.cmp-text { display: inline; }

.cmp-cell--no      { color: var(--s-amber); }
.cmp-cell--partial { color: var(--s-faint); }
.cmp-cell--yes     { color: var(--s-ink); }
.cmp-cell--yes .cmp-mark { color: var(--s-accent); }

/* ---- numbered risk cards ---------------------------------------------------------- */

.risk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; }

.risk-card {
  padding: 1.5cqw 1.5cqw 1.6cqw;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-top: 0.3cqw solid var(--d-amber);
  border-radius: 0.9cqw;
}

.risk-card-n {
  margin: 0 0 0.7cqw;
  font-size: 1.7cqw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--s-amber);
  letter-spacing: 0.02em;
}

.risk-card-statement { margin: 0 0 0.9cqw; font-size: 1.32cqw; font-weight: 650; line-height: 1.35; color: var(--s-ink); }
.risk-card-mechanism { margin: 0; font-size: 1.18cqw; line-height: 1.45; color: var(--s-muted); }

/* ---- five delivery pillars / measures ---------------------------------------------- */

.measure-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2cqw; }

.measure {
  padding: 1.3cqw 1.4cqw;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-radius: 0.9cqw;
}

.measure-n {
  margin: 0 0 0.5cqw;
  font-size: 1.05cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--s-accent);
  font-variant-numeric: tabular-nums;
}

.measure-name { margin: 0 0 0.5cqw; font-size: 1.5cqw; font-weight: 650; }
.measure-text { margin: 0; font-size: 1.15cqw; line-height: 1.4; color: var(--s-muted); }

/* ---- company stat strip -------------------------------------------------------------- */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
  gap: 1.2cqw;
  padding-top: 1.6cqw;
  border-top: 1px solid var(--s-line);
}

.stat-value {
  margin: 0 0 0.35cqw;
  font-size: 2.7cqw;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--s-accent);
}

.stat-label { margin: 0; font-size: 1.05cqw; line-height: 1.35; color: var(--s-muted); }

/* ---- attributed quote ------------------------------------------------------------------ */

.quote { margin: 0; padding-left: 1.4cqw; border-left: 0.26cqw solid var(--s-accent); }

.quote blockquote { margin: 0; }

.quote blockquote p {
  margin: 0 0 1cqw;
  font-size: 1.32cqw;
  line-height: 1.5;
  color: var(--s-ink);
}

.quote figcaption { display: flex; flex-direction: column; gap: 0.2cqw; }
.quote-name { font-size: 1.2cqw; font-weight: 650; }
.quote-role { font-size: 1.08cqw; color: var(--s-faint); }

/* ---- risk status: the only place amber and red appear ------------------------------------ */

.status-ok     { color: var(--s-accent); }
.status-warn   { color: var(--s-amber); }
.status-breach { color: var(--s-red); }

.limit-block { display: flex; flex-direction: column; }

.limit-row {
  display: grid;
  grid-template-columns: 1.5fr 2.4fr 0.7fr;
  align-items: center;
  gap: 1cqw;
  padding: 0.62cqw 0;
  border-bottom: 1px solid var(--s-line);
  font-size: 1.1cqw;
}

.limit-name { color: var(--s-muted); }
.limit-bar { height: 0.75cqw; border-radius: 99cqw; background: var(--s-chip); overflow: hidden; }
.limit-bar span { display: block; height: 100%; border-radius: 99cqw; }
.limit-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

.alert-log { margin-top: 0.9cqw; }
.alert-log-title {
  margin: 0 0 0.45cqw;
  font-size: 0.95cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-faint);
}
.alert-line { margin: 0 0 0.35cqw; font-size: 1.04cqw; line-height: 1.35; }

/* ---- dashboard mock-up chrome -------------------------------------------------------------- */

.frame { margin: 0; }

.frame-chrome {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  padding: 0.7cqw 1cqw;
  background: var(--d-navy);
  border: 1px solid var(--d-navy-2);
  border-bottom: none;
  border-radius: 0.7cqw 0.7cqw 0 0;
}

.frame-dot {
  width: 0.6cqw;
  height: 0.6cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.frame-title {
  margin-left: 0.7cqw;
  font-size: 1cqw;
  font-weight: 600;
  color: rgba(248, 249, 250, 0.72);
}

.frame-body {
  padding: 1.1cqw 1.2cqw 1.2cqw;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-radius: 0 0 0.7cqw 0.7cqw;
}

.frame-filters { display: flex; align-items: center; gap: 0.8cqw; margin-bottom: 0.9cqw; }

.frame-filter-label {
  font-size: 0.92cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-faint);
}

.frame-filters .pill { font-size: 1cqw; padding: 0.35cqw 0.85cqw; }

/* ---- KPI tiles --------------------------------------------------------------------------- */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 0.9cqw;
  margin-bottom: 1cqw;
}

.kpi {
  padding: 0.9cqw 1cqw;
  background: var(--s-chip);
  border: 1px solid var(--s-tile-line);
  border-radius: 0.6cqw;
}

.kpi-label {
  margin: 0 0 0.4cqw;
  font-size: 0.92cqw;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s-faint);
  line-height: 1.25;
}

.kpi-value {
  margin: 0;
  font-size: 1.95cqw;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi-delta { margin: 0.25cqw 0 0; font-size: 0.98cqw; font-weight: 600; }

/* ---- margin bridge (waterfall) ------------------------------------------------------------- */

.waterfall { display: flex; align-items: flex-end; gap: 0.6cqw; height: 36cqh; padding-top: 0.8cqw; }

.wf-step { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }

.wf-track { position: relative; flex: 1; display: flex; align-items: flex-end; }

/* --offset lifts the bar off the baseline; --height is its size. Both
   are percentages of the track, computed in charts.ts and set inline. */
.wf-bar {
  width: 100%;
  height: var(--height, 10%);
  margin-bottom: var(--offset, 0%);
  border-radius: 0.25cqw;
  background: var(--d-green-light);
}

.wf-bar--down  { background: var(--d-amber); }
.wf-bar--total { background: #8ca0b4; }

.wf-name { margin: 0.6cqw 0 0; font-size: 0.95cqw; line-height: 1.25; text-align: center; color: var(--s-muted); }
.wf-value { margin: 0.2cqw 0 0; font-size: 0.98cqw; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- compact data table ---------------------------------------------------------------------- */

.mini-table { width: 100%; border-collapse: collapse; font-size: 1.08cqw; }

.mini-table caption {
  text-align: left;
  margin-bottom: 0.4cqw;
  font-size: 0.92cqw;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s-faint);
}

.mini-table th {
  padding: 0.55cqw 0.5cqw;
  text-align: left;
  font-size: 0.9cqw;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s-faint);
  border-bottom: 1px solid var(--s-line);
}

.mini-table td {
  padding: 0.55cqw 0.5cqw;
  border-bottom: 1px solid var(--s-line);
  color: var(--s-muted);
}

.mini-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--s-ink); }
.mini-table td.num.status-warn   { color: var(--s-amber); }
.mini-table td.num.status-breach { color: var(--s-red); }
.mini-table td.num.status-ok     { color: var(--s-accent); }

/* ---- scenario cards ------------------------------------------------------------------------------ */

.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1cqw; }

.scenario {
  padding: 0.95cqw 1.1cqw;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-left: 0.26cqw solid var(--s-accent);
  border-radius: 0.6cqw;
}

.scenario-shock { margin: 0 0 0.4cqw; font-size: 1.25cqw; font-weight: 650; }
.scenario-effect { margin: 0; font-size: 1.08cqw; line-height: 1.4; color: var(--s-muted); }

/* ---- deployment cards ------------------------------------------------------------------------------ */

.deploy-card {
  position: relative;
  padding: 1.3cqw 1.5cqw;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-radius: 0.9cqw;
}

.deploy-badge {
  position: absolute;
  top: -0.85cqw;
  left: 1.6cqw;
  margin: 0;
  padding: 0.25cqw 0.8cqw;
  font-size: 0.88cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--d-green);
  border-radius: 0.35cqw;
}

.deploy-title { margin: 0 0 0.75cqw; font-size: 1.6cqw; font-weight: 650; }

.deploy-best { margin: 1cqw 0 0.5cqw; font-size: 1.1cqw; line-height: 1.4; color: var(--s-muted); }
.deploy-best span { font-weight: 700; color: var(--s-faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.92cqw; }

.deploy-time { margin: 0; font-size: 1.15cqw; color: var(--s-ink); }
.deploy-time strong { color: var(--s-accent); }

.include-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5cqw 2.4cqw; }

/* ---- published diagrams ------------------------------------------------------------------------------- */

/* The decision-layer figure and the six module flows are the same
   artwork the site renders. They are authored at 16:10 (the module
   flows) and 16:9 (the decision layer), both of which are taller than
   the space left under a heading block on a 16:9 slide — so height is
   what is constrained here and width follows from it. Capping width
   instead would push the foot of the picture under the slide footer. */
.diagram-figure {
  margin: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.diagram {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  border-radius: 0.7cqw;
  border: 1px solid var(--s-tile-line);
  background: var(--d-paper-2);
}

/* One diagram's foot is cropped, and only one.

   transrisk-erp-broker-price-data-integration-flow.png ends in a row
   of "ALSO" chips, the first of which reads "Bi-directional SAP sync".
   TransRisk reads from SAP and writes nothing back, so that chip is a
   false claim — and because it is raster text, the text sweep that
   removed the same claim from the copy, the FAQ, the gated bodies and
   this deck could not see it. The picture is otherwise correct and
   carries the module's whole argument, so the chip row is clipped
   rather than the slide losing its diagram. The three legitimate chips
   beside it are carried in that slide's aside instead.

   The 11% is measured against this file: the three columns end at
   y≈865 of 1000 and the chip row begins below the rule at y≈890.
   Delete this rule, and the modifier in common.ts, the day corrected
   artwork replaces the file — it is not a general-purpose crop. */
.diagram--no-foot {
  clip-path: inset(0 0 11% 0);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.diagram-caption {
  margin: 0.7cqw 0 0;
  font-size: 1.05cqw;
  line-height: 1.4;
  text-align: center;
  color: var(--s-muted);
}

/* ---- figure slide ------------------------------------------------------------------------------------- */

/* One slide is a published figure and a heading, nothing else. The
   heading steps down so the picture is what the room reads, and the
   picture takes every pixel left between it and the footer. */
.slide--figure .slide-title { font-size: 2.35cqw; margin-bottom: 0.9cqw; }
.slide--figure .slide-body { justify-content: stretch; }

/* A grid rather than a flex column, because the picture has to take
   the height the caption does not want. As flex items the two share a
   shrink ratio, the picture takes the lot and the caption lands on the
   footer; `minmax(0, 1fr) auto` gives the caption its content height
   first and the picture whatever is left. */
.slide--figure .diagram-figure {
  flex: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  min-height: 0;
}

/* Height from the row, width from the aspect ratio — so the border
   hugs the picture instead of boxing an empty band beside it. */
.slide--figure .diagram {
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
}

/* ---- module slide: diagram beside its aside ------------------------------------------------------------ */

/* The diagram carries the module's argument; the aside carries only
   what the diagram does not — a screenshot of the running product, or
   the detail the picture leaves out. The ratio is what lets a
   1600-wide flow resolve on a projector: much narrower and its own
   body type stops being readable, which is the whole point of using
   the published artwork rather than redrawing it smaller. */
.mod-split {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 2cqw;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
}

.mod-split > * { min-width: 0; min-height: 0; }

.mod-diagram { display: flex; min-height: 0; }
.mod-diagram .diagram-figure { flex: 1; }

.mod-aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8cqw;
  min-height: 0;
}

/* Inside the aside every block is a supporting note, so the scale
   steps down one notch rather than competing with the diagram. */
.mod-aside .bullets li { font-size: 1.15cqw; margin-bottom: 0.5cqw; }
.mod-aside .shot { max-height: 26cqh; }
.mod-aside .pill { font-size: 1cqw; padding: 0.4cqw 0.9cqw; }
.mod-aside .frame-body { padding: 0.8cqw; }

/* The module diagram is height-bound, not width-bound: whatever the
   heading block takes, the picture gives up twice over, because losing
   a line of title costs it that height across its full width. So the
   six module slides run a step below the default heading scale —
   a smaller title here buys a visibly larger diagram. */
.slide:has(.mod-split) .slide-title { font-size: 2.5cqw; margin-bottom: 0.7cqw; }
.slide:has(.mod-split) .slide-sub { font-size: 1.32cqw; max-width: 76cqw; margin-bottom: 1cqw; }
.slide:has(.mod-split) .slide-body { gap: 0.6cqw; }

/* ---- role columns -------------------------------------------------------------------------------------- */

/* One column per accountability, each screen sitting under its own
   heading. The thumbnails are not there to be read — they are there to
   show that the five views are five different screens. */
.role-columns {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  gap: 1.2cqw;
  align-items: stretch;
  min-height: 0;
}

.role-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.1cqw 1.1cqw 1.2cqw;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-radius: 0.9cqw;
}

.role-col-title {
  margin: 0 0 0.5cqw;
  font-size: 1.28cqw;
  font-weight: 650;
  line-height: 1.2;
  color: var(--s-accent);
}

.role-col-text {
  margin: 0 0 0.9cqw;
  font-size: 1.02cqw;
  line-height: 1.4;
  color: var(--s-muted);
}

.role-col-shot {
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
  border-radius: 0.45cqw;
  border: 1px solid var(--s-tile-line);
  background: var(--s-chip);
}

/* ---- screenshots --------------------------------------------------------------------------------------- */

/* Height is capped rather than left to the image's own aspect: a 16:10
   screenshot dropped into a 16:9 slide beside other content overflows
   the frame once it loads. */
.shot-figure { margin: 0; }

.shot {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 40cqh;
  margin: 0 auto;
  border-radius: 0.7cqw;
  border: 1px solid var(--s-tile-line);
  background: var(--s-tile);
}

.shot-pair { display: flex; flex-direction: column; gap: 1cqw; }
.shot-pair .shot { max-height: 24cqh; }
.shot-pair .illustrative { margin-top: 0.5cqw; }

.illustrative {
  margin: 0.6cqw 0 0;
  font-size: 0.95cqw;
  line-height: 1.35;
  font-style: italic;
  color: var(--s-faint);
}

/* ---- declared future asset ------------------------------------------------------------------------------- */

.placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.6cqw;
  border: 0.15cqw dashed var(--s-faint);
  border-radius: 0.9cqw;
  background: var(--s-chip);
}

.placeholder-tag {
  margin: 0 0 0.7cqw;
  font-size: 1cqw;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--s-amber);
}

.placeholder dl { margin: 0; }

.placeholder dt {
  font-size: 0.92cqw;
  font-weight: 700;
  color: var(--s-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.6cqw;
}

.placeholder dd { margin: 0.15cqw 0 0; font-size: 1.1cqw; line-height: 1.4; color: var(--s-muted); }

/* ---- navigation chrome ------------------------------------------------------------------------------------- */

.deck-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 20;
}

.deck-progress-bar {
  height: 100%;
  width: 0;
  background: var(--d-green-light);
  transition: width 0.2s ease;
}

.deck-nav {
  position: fixed;
  bottom: 10px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 20;
}

.deck-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f8f9fa;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font-size: 17px;
  cursor: pointer;
}

.deck-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.deck-btn:disabled { opacity: 0.35; cursor: default; }
.deck-btn:focus-visible { outline: 3px solid var(--d-green-light); outline-offset: 2px; }

/* The fullscreen icon swaps once the browser reports we are actually
   fullscreen, so the control reflects the real state rather than what
   was last clicked. */
.deck-btn[data-deck-fullscreen] .icon-exit { display: none; }
body:fullscreen .deck-btn[data-deck-fullscreen] .icon-enter { display: none; }
body:fullscreen .deck-btn[data-deck-fullscreen] .icon-exit { display: block; }

.deck-counter {
  padding: 0 10px;
  font-size: 13px;
  color: rgba(248, 249, 250, 0.55);
  font-variant-numeric: tabular-nums;
}

.deck-help {
  position: fixed;
  bottom: 14px;
  left: 18px;
  z-index: 20;
  font-size: 12px;
  color: rgba(248, 249, 250, 0.32);
}

@media (prefers-reduced-motion: reduce) {
  .deck-progress-bar { transition: none; }
}

/* ============================================================
   Print / PDF export.

   On screen exactly one slide is displayed and the rest are
   display:none, so without this block a print would produce a single
   page. Every slide is restored to the flow at a fixed 16:9 page size,
   which also keeps the cqw type scale resolving — the slides stay
   container query containers, sized in mm rather than vh.
   ============================================================ */

@media print {
  @page { size: 297mm 167mm; margin: 0; }

  html, body {
    height: auto;
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .deck {
    display: block;
    height: auto;
    overflow: visible;
    background: #fff;
  }

  .slide {
    position: static;
    display: flex !important;
    width: 297mm;
    height: 167mm;
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .slide:last-child { page-break-after: auto; break-after: auto; }

  /* Chrome and presenter notes are screen-only. */
  .deck-nav,
  .deck-progress,
  .deck-help,
  .speaker-notes { display: none !important; }

  /* Lazy images are decoded on demand; a print must not race them. */
  .shot { max-height: 36cqh; }
}