/*
 * Inly — Slides theme (shared)
 * ────────────────────────────────────────────────────────────────────────
 * A brand-aligned Reveal.js theme for internal + external Inly decks. Unlike
 * apps/pitch-deck/styles/inly-theme.css (which is coupled to that one deck's
 * content via [data-slide="04"]-style rules), this file is DECK-AGNOSTIC: it
 * ships the brand foundation plus a set of reusable slide *archetypes* that
 * any month/deck composes from. Per-deck CSS should be rare.
 *
 * Mirrors apps/brand (the source of truth) and inly.se:
 *   - Paper canvas (#fbfaf6) with warm ink (#1a1916)
 *   - Nyght Serif for display, Geist for body, Aeonik for product marks
 *   - Em dashes for asides, sentence case, hairline borders, generous whitespace
 *
 * Theming is per-slide: set data-theme="dark" | "white" on a <section>; the
 * runtime toggles html.theme-* so the whole viewport (and chrome) follows.
 * Fixed 1920 × 1080 canvas — no Reveal theme underneath.
 */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Aeonik";
  src: url("./assets/fonts/Aeonik-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("./assets/fonts/Aeonik-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("./assets/fonts/Aeonik-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("./assets/fonts/Aeonik-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nyght Serif";
  src: url("./assets/fonts/NyghtSerif-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nyght Serif";
  src: url("./assets/fonts/NyghtSerif-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nyght Serif";
  src: url("./assets/fonts/NyghtSerif-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nyght Serif";
  src: url("./assets/fonts/NyghtSerif-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./assets/fonts/Geist[wght].woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./assets/fonts/GeistMono[wght].woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ── Tokens (mirror apps/brand + src/app/globals.css) ──────────────────── */
:root {
  --paper: #fbfaf6;
  --canvas: #ffffff;
  --ink: #1a1916;
  --body-muted: #5c4d3c;
  --body-soft: #847463;
  --body-subtle: #a89a8a;
  --btn-dark: #272520;
  --card-fill: #faf6f0;
  --card-border: #f2ede5;
  --accent: #185edf;
  --hairline: rgba(26, 25, 22, 0.08);
  --hairline-strong: rgba(26, 25, 22, 0.14);

  /* On-dark equivalents — used by data-theme="dark" slides and the closing. */
  --paper-on-dark: rgba(251, 250, 246, 0.92);
  --muted-on-dark: rgba(251, 250, 246, 0.62);
  --hairline-on-dark: rgba(251, 250, 246, 0.14);
  --hairline-on-dark-strong: rgba(251, 250, 246, 0.22);

  /* Brand status/accent set — ink, blue, green, amber (per the brand guide's
     "status dots use the standard ink, amber, blue, and green"). The single
     vibrant accent token is blue; green/amber round out data + departments. */
  --blue: #185edf;
  --green: #198653;
  --amber: #eb9f3f;

  /* Department accents (Kvartalsmål tables) — drawn from the status set. */
  --dept-platform: var(--blue);
  --dept-salj: var(--green);
  --dept-delivery: var(--amber);

  /* Chart palette — ink first, then the vibrant accents. Never beige.
     Read by charts.js. ink-soft is the quiet monochrome comparison series
     (a faded prior period), so a two-series chart can stay ink-on-ink. */
  --chart-ink: #1a1916;
  --chart-ink-soft: rgba(26, 25, 22, 0.22);
  --chart-blue: var(--blue);
  --chart-green: var(--green);
  --chart-amber: var(--amber);
  --chart-grid: rgba(26, 25, 22, 0.08);
  --chart-label: #847463;

  --serif: "Nyght Serif", ui-serif, Georgia, serif;
  --sans: "Geist", -apple-system, system-ui, sans-serif;
  --heading: "Aeonik", -apple-system, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

/* ── Reveal.js base + per-slide theming ────────────────────────────────── */
html, body, .reveal-viewport, .reveal {
  background: var(--paper);
  color: var(--ink);
  transition: background 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.theme-white,
html.theme-white body,
html.theme-white .reveal-viewport,
html.theme-white .reveal { background: var(--canvas); }

html.theme-dark,
html.theme-dark body,
html.theme-dark .reveal-viewport,
html.theme-dark .reveal { background: var(--ink); }

.reveal {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
.reveal .slides { text-align: left; }
.reveal .slides > section {
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  color: var(--ink);
  text-transform: none;
  font-weight: 400;
  margin: 0;
}
.reveal p, .reveal li { color: var(--ink); }
.reveal a { color: inherit; text-decoration: none; }

/* ── Slide frame ───────────────────────────────────────────────────────── */
/* Standard content slide: inner frame with the wordmark + foot chrome. Bleed
   slides (cover, closing) manage their own padding. */
.slide {
  height: 100%;
  box-sizing: border-box;
  padding: 120px 112px 112px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.slide-white { background: var(--canvas); }
.slide-dark { background: var(--ink); }

/* On-dark text colours — applied when a slide opts into the dark canvas. */
[data-theme="dark"] .reveal h1,
[data-theme="dark"] .reveal h2,
[data-theme="dark"] .reveal h3,
[data-theme="dark"] .reveal h4,
.slide-dark h1, .slide-dark h2, .slide-dark h3, .slide-dark h4,
.slide-dark p, .slide-dark li { color: var(--paper); }

/* ── Per-slide chrome ──────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 8px;
}
.slide-dark .eyebrow,
[data-theme="dark"] .eyebrow { color: var(--paper); }

/* Top-left section label + hairline (the "Uppföljning" rule on Monthly). */
.slide-kicker {
  position: absolute;
  top: 56px;
  left: 112px;
  right: 112px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.slide-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline-strong);
}
.slide-dark .slide-kicker,
[data-theme="dark"] .slide-kicker { color: var(--paper); }
.slide-dark .slide-kicker::after,
[data-theme="dark"] .slide-kicker::after { background: var(--hairline-on-dark-strong); }

img.wordmark-top {
  position: absolute;
  top: 56px; left: 112px;
  height: 30px; width: auto;
  z-index: 5;
}

/* ── Type primitives ───────────────────────────────────────────────────── */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 108px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.note {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--body-muted);
  margin: 0;
  max-width: 42ch;
}
.muted { color: var(--body-muted); }
.subtle { color: var(--body-subtle); }
.slide-dark .note,
[data-theme="dark"] .note { color: var(--muted-on-dark); }

/* A headline whose trailing clause is de-emphasised — "Kvartalsmål Q2 2026",
   "Core-avtal Mars 2026". Wrap the period in <span class="dim">. */
.headline .dim, .display .dim { color: var(--body-subtle); }
.slide-dark .headline .dim,
[data-theme="dark"] .headline .dim { color: var(--muted-on-dark); }

/* Heading + supporting note paired at the top of a content slide. */
.slide-head {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 440px);
  gap: 72px;
  align-items: start;
}
.slide-head--solo { display: block; }
.slide-head .note { padding-top: 14px; }

/* Product lockup ("Core.") inline. */
.product-mark { display: inline-flex; align-items: center; }
.product-mark img { height: 26px; width: auto; }

/* ════════════════════════════════════════════════════════════════════════
   ARCHETYPES — the reusable slide layouts. See shared/layouts.html for a
   live gallery of each one rendered with real markup.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Cover ─────────────────────────────────────────────────────────────── */
/* Big title bottom-left, date eyebrow above it, wordmark bottom-right. Works
   on paper or (data-theme="dark") on ink. */
.cover {
  height: 100%;
  box-sizing: border-box;
  padding: 112px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}
.cover .cover-eyebrow {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--body-soft);
  margin: 0 0 18px;
}
.slide-dark .cover-eyebrow,
[data-theme="dark"] .cover-eyebrow { color: var(--muted-on-dark); }
.cover .display { font-size: 120px; }
.cover .cover-wordmark {
  position: absolute;
  right: 112px;
  bottom: 112px;
}
.cover .cover-wordmark img { height: 34px; width: auto; }

/* ── Section divider ───────────────────────────────────────────────────── */
/* A spacer/agenda slide: kicker rule on top, a large headline anchored left,
   optional supporting note. */
.divider {
  height: 100%;
  box-sizing: border-box;
  padding: 168px 112px 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.divider .headline { font-size: 96px; }

/* ── Goal / vision cards (Målsättning) ─────────────────────────────────── */
/* A row or grid of soft cards, each: bold title + dim year, paragraph, and an
   optional bullet list. Progressive-reveal friendly (drop cards across slides). */
.goal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 56px;
}
.goal-grid--single { grid-template-columns: minmax(0, 560px); }
.goal-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.goal-card {
  background: var(--card-fill);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 32px 36px;
}
.slide-dark .goal-card,
[data-theme="dark"] .goal-card {
  background: rgba(251, 250, 246, 0.05);
  border-color: var(--hairline-on-dark);
}
.goal-card h3 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.goal-card h3 .year { color: var(--body-subtle); font-weight: 400; }
.slide-dark .goal-card h3,
[data-theme="dark"] .goal-card h3 { color: var(--paper); }
.goal-card p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--body-muted);
  margin: 0;
  max-width: 56ch;
}
.slide-dark .goal-card p,
[data-theme="dark"] .goal-card p { color: var(--muted-on-dark); }
.goal-card ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.goal-card li {
  position: relative;
  padding-left: 20px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--body-muted);
  margin-top: 8px;
}
.goal-card li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--body-subtle);
}
.slide-dark .goal-card li,
[data-theme="dark"] .goal-card li { color: var(--muted-on-dark); }

/* ── Owner / status table (Kvartalsmål) ────────────────────────────────── */
/* A titled panel holding a two-column table: goal | owner. The panel title
   takes a department accent via --dept on the wrapper. */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 48px;
  align-items: start;
}
.table-panel {
  background: var(--card-fill);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 28px 32px 24px;
}
.table-panel > h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--dept, var(--ink));
  margin: 0 0 14px;
}
.table-panel--platform { --dept: var(--dept-platform); }
.table-panel--salj { --dept: var(--dept-salj); }
.table-panel--delivery { --dept: var(--dept-delivery); }
.meta-table { width: 100%; border-collapse: collapse; }
.meta-table thead th {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--body-subtle);
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}
.meta-table tbody td {
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.meta-table tbody tr:last-child td { border-bottom: none; }
.meta-table .owner {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--body-muted);
  white-space: nowrap;
}
.meta-table .owner::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--avatar, var(--body-subtle));
  flex: 0 0 18px;
}
.meta-table .owner[data-initials]::before {
  content: attr(data-initials);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0;
}

/* ── KPI + chart (Core-avtal, Omsättning) ──────────────────────────────── */
/* A card framing a chart canvas, with a label top-left and the headline figure
   top-right. Pair two side by side, or one full-width. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 48px;
  align-items: stretch;
}
.kpi-grid--single { grid-template-columns: minmax(0, 1fr); }
.kpi-card {
  background: var(--card-fill);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.kpi-card .kpi-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.kpi-card .kpi-label {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.kpi-card .kpi-label .unit { color: var(--body-subtle); font-weight: 400; }
.kpi-card .kpi-figure {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}
.chart-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.chart-frame canvas { display: block; width: 100% !important; height: 100% !important; }

/* A goal/footnote line beneath a KPI grid — "Mål 25/26: …" + "Återstår …". */
.kpi-note {
  margin-top: 36px;
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: -0.01em;
}
.kpi-note strong { font-weight: 500; color: var(--ink); }
.kpi-note .rest { color: var(--body-subtle); }
.kpi-footnote {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--body-subtle);
}

/* ── Changelog wall (Core changelog) ───────────────────────────────────── */
/* A dense flow of feature tags beside a product lockup. Reads as "everything
   we shipped this month". */
.changelog {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
  margin-top: 8px;
  height: 100%;
}
.changelog-lockup { align-self: center; }
.changelog-lockup .product-mark img { height: 44px; }
.changelog-lockup h2 {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 28px 0 0;
}
.changelog-lockup h2 .dim { color: var(--body-subtle); }
.slide-dark .changelog-lockup h2 .dim,
[data-theme="dark"] .changelog-lockup h2 .dim { color: var(--muted-on-dark); }
.changelog-list {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
}
.changelog-list .tag {
  font-family: var(--sans);
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 7px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  white-space: nowrap;
}
.changelog-list .tag.is-new {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.slide-dark .changelog-list .tag,
[data-theme="dark"] .changelog-list .tag {
  color: var(--paper);
  border-color: var(--hairline-on-dark-strong);
}
.slide-dark .changelog-list .tag.is-new,
[data-theme="dark"] .changelog-list .tag.is-new {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ── Stat row (reusable big-figure cards) ──────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 22px;
  margin-top: 56px;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px 32px 32px;
  background: var(--card-fill);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  min-width: 0;
}
.stat-item .figure-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 84px;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.stat-item .rule {
  display: block;
  width: 40px; height: 1px;
  background: var(--ink);
  margin: 24px 0 20px;
  opacity: 0.7;
}
.stat-item p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--body-muted);
  margin: 0;
  text-wrap: balance;
}

/* ── Closing ───────────────────────────────────────────────────────────── */
.closing {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
}
.closing img { height: 56px; width: auto; }

/* ── Foot chrome (optional per-slide) ──────────────────────────────────── */
.slide-foot {
  position: absolute;
  left: 112px; right: 112px; bottom: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}
.slide-foot-mark { height: 24px; width: auto; flex: 0 0 auto; }
.slide-foot .page {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--body-subtle);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.slide-dark .slide-foot .page,
[data-theme="dark"] .slide-foot .page { color: var(--muted-on-dark); }

/* ── Reveal chrome (nav arrows, progress, presentation toggle, download) ─── */
.reveal .progress { background: var(--hairline); height: 2px; color: var(--ink); }
.reveal .progress span { background: var(--ink); }
.reveal .controls {
  color: var(--ink);
  top: 56px; right: 112px; bottom: auto; left: auto;
}
.reveal .controls.on-dark { color: var(--paper); }
.reveal .controls .navigate-left,
.reveal .controls .navigate-right,
.reveal .controls .navigate-up,
.reveal .controls .navigate-down {
  top: 0 !important; bottom: auto !important;
  width: 30px; height: 30px; transform: none;
}
.reveal .controls .navigate-right { right: 0 !important; }
.reveal .controls .navigate-left { right: 46px !important; }
.reveal .controls .controls-arrow::before,
.reveal .controls .controls-arrow::after { display: none; }
.reveal .controls .controls-arrow { width: 30px; height: 30px; transform: none !important; }
.reveal .controls .controls-arrow svg { width: 100%; height: 100%; display: block; }
.reveal .controls button {
  transition:
    color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.reveal .controls .navigate-left,
.reveal .controls .navigate-right {
  visibility: visible; opacity: 0.2; transform: none; cursor: default;
}
.reveal .controls .navigate-left.enabled,
.reveal .controls .navigate-right.enabled { opacity: 0.7; cursor: pointer; }
.reveal .controls .navigate-left.enabled:hover,
.reveal .controls .navigate-right.enabled:hover { opacity: 1; }
.reveal .controls .navigate-left.enabled:hover { transform: translateX(-4px) !important; }
.reveal .controls .navigate-right.enabled:hover { transform: translateX(4px) !important; }

/* Presentation toggle + PDF download — icon buttons left of the nav arrows. */
.reveal .deck-toggle,
.reveal .deck-download {
  position: absolute;
  top: 56px;
  z-index: 20;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  border: 0;
  cursor: pointer;
  font: inherit;
  opacity: 0.7;
  text-decoration: none;
  transition:
    color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal .deck-download { right: 150px; }
.reveal .deck-toggle { right: 100px; }
.reveal .deck-toggle:hover,
.reveal .deck-download:hover,
.reveal .deck-toggle[aria-pressed="true"] { opacity: 1; }
.reveal .deck-toggle svg,
.reveal .deck-download svg { width: 100%; height: 100%; display: block; }
.reveal .deck-toggle .deck-toggle-icon--eye-slash { display: none; }
.reveal .deck-toggle[aria-pressed="true"] .deck-toggle-icon--eye { display: none; }
.reveal .deck-toggle[aria-pressed="true"] .deck-toggle-icon--eye-slash { display: block; }
html.theme-dark .reveal .deck-toggle,
html.theme-dark .reveal .deck-download { color: var(--paper); }

html.presentation-mode .reveal .deck-download { display: none; }
html.deck-fullscreen.presentation-mode .reveal .controls,
html.deck-fullscreen.presentation-mode .reveal .deck-toggle,
html.deck-fullscreen.presentation-mode .reveal .deck-download { display: none; }

/* ── Capture mode — ?capture=1 strips all chrome for the PDF screenshots. ── */
html.capture-mode .reveal .deck-toggle,
html.capture-mode .reveal .deck-download,
html.capture-mode .reveal .controls,
html.capture-mode .reveal .progress,
html.capture-mode .reveal .backgrounds { display: none !important; }

/* ── Print ─────────────────────────────────────────────────────────────── */
@page { size: 1920px 1080px; margin: 0; }
@media print {
  html, body { background: var(--paper) !important; }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}