/* ==========================================================
   orz-slides · BASE.CSS
   Structural + content styling for the rendered-slide DOM contract
   (docs/dom-contract.md). Each theme file `@import`s this and then
   defines ONLY the design tokens in its own :root{}.

   This file loads alongside reveal.js + reveal.css. It styles our
   contract classes (.orz-slide, .orz-title, .orz-content, .orz-split,
   .orz-region, .orz-footer, .orz-float) and the .markdown-body content
   inside regions. ALL colors and fonts are driven from CSS variables so
   a theme only sets :root tokens.

   CSS-VARIABLE CONTRACT (a theme sets these in :root):
     --accent            brand / accent color
     --ink               body text color
     --bg                slide background
     --font-heading      heading font stack
     --font-body         body font stack
     --heading-color     text color of the h2 title band
     --heading-bg        background of the h2 title band
     --slide-gap         grid gap between regions (e.g. 28px)
     --slide-pad         slide content padding (e.g. 4% 5%)
     --box-info / --box-warning / --box-danger / --box-success   (border colors)
     --box-*-bg          (callout fill backgrounds)
     --table-head-bg     table header background
     --row-highlight     highlighted-row background
   Optional (sensible fallbacks below):
     --heading-radius --heading-shadow --heading-pad --heading-align
     --heading-letter-spacing --heading-font-weight
     --box-radius --box-shadow --box-border-width
     --surface (elevated panel bg, e.g. floats/code) --muted (dim text)
     --code-bg --code-color --rule (hairline border color)
     --link-color
   Dark themes additionally override reveal's own vars:
     --r-background-color --r-main-color --r-heading-color --r-link-color
   ========================================================== */

/* ---------- Reveal-level defaults from our tokens ---------- */
/* Keep left-aligned, top-anchored slides (reveal defaults to centered). */
.reveal .slides { text-align: left; }

.reveal,
.reveal .slides section {
    font-family: var(--font-body, 'Segoe UI', system-ui, sans-serif);
    color: var(--ink, #222);
}

.reveal-viewport,
body {
    background-color: var(--bg, #ffffff);
}

/* ==========================================================
   SLIDE FRAME — the .orz-slide <section>
   ========================================================== */
.reveal .orz-slide {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: var(--slide-pad, 1% 2% 2% 2%);
    /* floats are positioned against this box; content is clipped to the slide */
    position: relative;
    overflow: hidden;
    text-align: left;
    color: var(--ink, #222);
    font-family: var(--font-body, 'Segoe UI', system-ui, sans-serif);
    /* Presentation-scale base font in slide (960×H) coordinates — reveal then
       scales the whole slide to the screen. Without this the deck inherits the
       16px document default and content looks tiny inside a full-size slide.
       Em-based content sizes (title band, bullets, code…) all derive from it. */
    font-size: 24px;
    line-height: 1.45;
}

/* Inner flex frame. reveal.js forces `display:block` (inline) on the <section>,
   which overrides any flex frame placed on .orz-slide — so the title/content/
   footer column lives on this wrapper, where reveal won't touch it. */
.reveal .orz-frame {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ---------- Title band: .orz-title h2 ---------- */
.reveal .orz-title {
    flex: 0 0 auto;
    margin-bottom: var(--slide-gap, 28px);
}
.reveal .orz-title .markdown-body { margin: 0; }

.reveal .orz-title h2 {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    font-family: var(--font-heading, 'Segoe UI', system-ui, sans-serif);
    font-weight: var(--heading-font-weight, 600);
    font-size: 1.5em;
    line-height: 1.15;
    letter-spacing: var(--heading-letter-spacing, 0);
    text-align: var(--heading-align, left);
    text-transform: none;
    color: var(--heading-color, #fff);
    background: var(--heading-bg, var(--accent, #345));
    padding: var(--heading-pad, 0.4em 0.7em);
    border-radius: var(--heading-radius, 8px);
    box-shadow: var(--heading-shadow, none);
}

/* ==========================================================
   CONTENT AREA + LAYOUT GRID
   ========================================================== */
.reveal .orz-content {
    flex: 1 1 auto;
    min-height: 0;       /* allow grid children to shrink/scroll */
    display: flex;       /* a single-region content area fills height */
    flex-direction: column;
}

/* Splits carry inline grid-template-* from the layout engine; we only
   theme the gap and make them fill the available content height. */
.reveal .orz-split {
    display: grid;
    gap: var(--slide-gap, 28px);
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    align-items: stretch;
}

/* A split nested inside another split is itself a grid item — make it
   stretch to fill its cell. */
.reveal .orz-split .orz-split { height: 100%; }

/* ---------- Region cell ---------- */
.reveal .orz-region {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    /* Fill height in the single-region case (lone region in flex .orz-content);
       harmless as a grid item (grid controls sizing). Lets WP6 detect overflow. */
    flex: 1 1 auto;
    overflow: hidden;            /* fit=scroll flips this to auto */
    display: flex;
    flex-direction: column;
    /* WP6 sets --region-scale on this element when scaling to fit. */
    font-size: calc(1em * var(--region-scale, 1));
}
.reveal .orz-slide[data-fit="scroll"] .orz-region { overflow: auto; }

/* ==========================================================
   FOOTER BAND
   ========================================================== */
.reveal .orz-footer {
    flex: 0 0 auto;
    margin-top: var(--slide-gap, 28px);
    padding-top: 0.5em;
    border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
    font-size: 0.6em;
    line-height: 1.3;
    color: var(--muted, rgba(0, 0, 0, 0.55));
}
.reveal .orz-footer .markdown-body { margin: 0; }
.reveal .orz-footer p { margin: 0; }

/* ==========================================================
   FLOAT — absolute overlay box (positioned via inline style)
   ========================================================== */
.reveal .orz-float {
    box-sizing: border-box;
    position: absolute;
    overflow: hidden;
    padding: 0.8em 1em;
    background: var(--surface, #fff);
    border: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
    border-radius: var(--box-radius, 8px);
    box-shadow: var(--box-shadow, 0 6px 20px rgba(0, 0, 0, 0.18));
    color: var(--ink, #222);
    font-size: 0.85em;
}
.reveal .orz-float .markdown-body { margin: 0; }
.reveal .orz-float > .markdown-body > :first-child { margin-top: 0; }
.reveal .orz-float > .markdown-body > :last-child { margin-bottom: 0; }

/* ==========================================================
   .markdown-body — orz-markdown content inside regions
   ========================================================== */
.reveal .markdown-body {
    line-height: 1.45;
    color: var(--ink, #222);
}
.reveal .orz-region > .markdown-body {
    margin: 0;
    height: 100%;
    /* As a flex item, default min-height:auto would force the region to grow to
       the content's height (breaking scale-to-fit). 0 lets the region clamp to
       the slide; overflow is then detectable via scrollHeight and WP6 scales. */
    min-height: 0;
}
.reveal .markdown-body > :first-child { margin-top: 0; }
.reveal .markdown-body > :last-child { margin-bottom: 0; }

/* ---------- Sub-headings h3–h6 (plain, NOT the title band) ---------- */
.reveal .markdown-body h3,
.reveal .markdown-body h4,
.reveal .markdown-body h5,
.reveal .markdown-body h6 {
    font-family: var(--font-heading, 'Segoe UI', system-ui, sans-serif);
    color: var(--accent, #345);
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0 0 0.4em;
    line-height: 1.2;
    font-weight: var(--heading-font-weight, 600);
    text-align: left;
}
.reveal .markdown-body h3 { font-size: 1.15em; }
.reveal .markdown-body h4 { font-size: 1.0em; }
.reveal .markdown-body h5 { font-size: 0.9em; }
.reveal .markdown-body h6 { font-size: 0.85em; color: var(--muted, #777); }

/* ---------- Paragraphs ---------- */
.reveal .markdown-body p {
    margin: 0 0 0.6em;
    font-size: 0.82em;
    line-height: 1.45;
}

/* ---------- Lists ---------- */
.reveal .markdown-body ul,
.reveal .markdown-body ol {
    text-align: left;
    margin: 0 0 0.6em;
    padding-left: 1.8em;   /* room for the marker (esp. two-digit ol numbers) */
}
.reveal .markdown-body li {
    font-size: 0.82em;
    line-height: 1.45;
    margin-bottom: 0.35em;
}
.reveal .markdown-body li > ul,
.reveal .markdown-body li > ol {
    margin: 0.25em 0 0.25em;
}
.reveal .markdown-body li > ul li,
.reveal .markdown-body li > ol li { font-size: 1em; }

/* ---------- Inline emphasis / links ----------
   reveal's reset.css applies `font: inherit; font-size: 100%; vertical-align:
   baseline` to strong/em/b/i/sub/sup/small, wiping their semantics — so restore
   them here. Bold is BOLD (not recolored — a color hack disappears when it
   matches the background); italic is italic; sub/sup raise and lower. */
.reveal .markdown-body strong,
.reveal .markdown-body b { font-weight: 700; }
.reveal .markdown-body em,
.reveal .markdown-body i { font-style: italic; }
.reveal .markdown-body em strong,
.reveal .markdown-body strong em { font-weight: 700; font-style: italic; }
.reveal .markdown-body s,
.reveal .markdown-body del { text-decoration: line-through; }
.reveal .markdown-body ins,
.reveal .markdown-body u { text-decoration: underline; }
.reveal .markdown-body small { font-size: 0.82em; }
.reveal .markdown-body sub,
.reveal .markdown-body sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; }
.reveal .markdown-body sub { bottom: -0.3em; }
.reveal .markdown-body sup { top: -0.5em; }
.reveal .markdown-body mark {
    background: var(--mark-bg, #fde68a);
    color: #3a2f00;
    padding: 0 0.18em;
    border-radius: 2px;
}
.reveal .markdown-body a {
    color: var(--link-color, var(--accent, #345));
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Tables ---------- */
.reveal .markdown-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74em;
    margin: 0 0 0.6em;
}
.reveal .markdown-body th {
    background: var(--table-head-bg, var(--accent, #345));
    color: var(--table-head-color, #fff);
    text-align: left;
    padding: 0.4em 0.6em;
    border-bottom: 2px solid var(--accent, #345);
    font-weight: 600;
}
.reveal .markdown-body td {
    padding: 0.4em 0.6em;
    border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
}
.reveal .markdown-body tr.row-highlight,
.reveal .markdown-body tr.row-highlight td {
    background: var(--row-highlight, rgba(0, 0, 0, 0.04));
}

/* ---------- Code ---------- */
.reveal .markdown-body code {
    font-family: var(--font-mono, ui-monospace, 'SFMono-Regular', Menlo, monospace);
    font-size: 0.85em;
    background: var(--code-bg, rgba(0, 0, 0, 0.06));
    color: var(--code-color, var(--ink, #222));
    padding: 0.1em 0.4em;
    border-radius: 4px;
}
.reveal .markdown-body pre {
    margin: 0 0 0.6em;
    padding: 0.7em 0.9em;
    background: var(--code-bg, rgba(0, 0, 0, 0.06));
    border: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
    border-radius: var(--box-radius, 8px);
    overflow: auto;
}
.reveal .markdown-body pre code {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 0.72em;
    line-height: 1.4;
    color: var(--code-color, var(--ink, #222));
    white-space: pre;
}

/* ---------- Blockquote ---------- */
.reveal .markdown-body blockquote {
    margin: 0 0 0.6em;
    padding: 0.5em 1em;
    border-left: 4px solid var(--accent, #345);
    background: var(--surface, rgba(0, 0, 0, 0.03));
    color: var(--ink, #222);
    font-style: italic;
}
.reveal .markdown-body blockquote p { margin: 0; }

/* ---------- Horizontal rule ---------- */
.reveal .markdown-body hr {
    border: 0;
    border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
    margin: 0.8em 0;
}

/* ==========================================================
   CALLOUT BOXES  .box-info / .box-warning / .box-danger / .box-success
   ========================================================== */
.reveal .markdown-body .box-info,
.reveal .markdown-body .box-warning,
.reveal .markdown-body .box-danger,
.reveal .markdown-body .box-success {
    text-align: left;
    padding: 0.7em 0.9em;
    margin: 0 0 0.6em;
    border: var(--box-border-width, 2px) solid currentColor;
    border-radius: var(--box-radius, 8px);
    box-shadow: var(--box-shadow, none);
    font-size: 0.92em;
}
.reveal .markdown-body .box-info {
    border-color: var(--box-info, #2b6cb0);
    background: var(--box-info-bg, rgba(43, 108, 176, 0.08));
}
.reveal .markdown-body .box-warning {
    border-color: var(--box-warning, #c79a2e);
    background: var(--box-warning-bg, rgba(199, 154, 46, 0.10));
}
.reveal .markdown-body .box-danger {
    border-color: var(--box-danger, #c0392b);
    background: var(--box-danger-bg, rgba(192, 57, 43, 0.08));
}
.reveal .markdown-body .box-success {
    border-color: var(--box-success, #2e8b57);
    background: var(--box-success-bg, rgba(46, 139, 87, 0.08));
}
/* keep box text in the ink color (the border colors it, not the text) */
.reveal .markdown-body .box-info,
.reveal .markdown-body .box-warning,
.reveal .markdown-body .box-danger,
.reveal .markdown-body .box-success { color: var(--ink, #222); }

.reveal .markdown-body .box-info > :first-child,
.reveal .markdown-body .box-warning > :first-child,
.reveal .markdown-body .box-danger > :first-child,
.reveal .markdown-body .box-success > :first-child { margin-top: 0; }
.reveal .markdown-body .box-info > :last-child,
.reveal .markdown-body .box-warning > :last-child,
.reveal .markdown-body .box-danger > :last-child,
.reveal .markdown-body .box-success > :last-child { margin-bottom: 0; }

/* Headings inside callouts: strip the sub-heading accent, keep inline */
.reveal .markdown-body .box-info :is(h3,h4,h5,h6),
.reveal .markdown-body .box-warning :is(h3,h4,h5,h6),
.reveal .markdown-body .box-danger :is(h3,h4,h5,h6),
.reveal .markdown-body .box-success :is(h3,h4,h5,h6) {
    color: inherit;
    margin-top: 0;
    font-size: 1em;
}

/* ==========================================================
   GENERATED CONSTRUCTS (mermaid / smiles / qrcode / math wrappers)
   ========================================================== */
.reveal .markdown-body .mermaid,
.reveal .markdown-body .smiles-render,
.reveal .markdown-body .qrcode,
.reveal .markdown-body .katex-display {
    text-align: center;
    margin: 0 auto 0.6em;
    max-width: 100%;
}
/* Async graphics (mermaid SVG, smiles + chart canvases, qr SVG) must never
   overflow their region — cap to the container width. */
.reveal .markdown-body .mermaid svg,
.reveal .markdown-body .smiles-render canvas,
.reveal .markdown-body canvas[data-smiles],
.reveal .markdown-body canvas.orz-chart,
.reveal .markdown-body .qrcode svg,
.reveal .markdown-body .qrcode img {
    max-width: 100%;
    height: auto;
}

/* ---- QR code: white plate + click-to-expand ---- */
.reveal .markdown-body .qrcode {
    display: inline-block; position: relative; cursor: pointer;
    background: #fff; padding: 6px; border-radius: 4px; line-height: 0;
    vertical-align: middle;
}
.reveal .markdown-body .qrcode svg { display: block; width: 160px; }
.reveal .markdown-body .qrcode__icon {
    position: absolute; top: 3px; right: 3px; z-index: 1;
    font-size: 13px; line-height: 1; color: #444;
    background: rgba(255, 255, 255, 0.85); border-radius: 3px; padding: 1px 3px;
    opacity: 0; transition: opacity 0.15s;
}
.reveal .markdown-body .qrcode:hover .qrcode__icon { opacity: 1; }

/* fullscreen QR overlay (built by browser-entry on click) */
.orz-qr-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.8); cursor: zoom-out;
}
.orz-qr-overlay svg {
    width: min(78vh, 78vw); height: auto;
    background: #fff; padding: 20px; border-radius: 10px;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.5);
}

/* ---- YouTube embed: fill the container width at 16:9 ---- */
.reveal .markdown-body .youtube-embed {
    position: relative; width: 100%; max-width: 100%;
    aspect-ratio: 16 / 9; margin: 0 auto 0.6em;
}
.reveal .markdown-body .youtube-embed iframe,
.reveal .markdown-body .youtube-embed .youtube-facade {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; border-radius: 4px;
}
/* file:// fallback poster (see fixYouTube): thumbnail + play button, opens youtube.com */
.reveal .markdown-body .youtube-embed .youtube-facade {
    display: flex; align-items: center; justify-content: center;
    background: #000 center / cover no-repeat; cursor: pointer;
}
.reveal .markdown-body .youtube-facade .youtube-facade-play {
    width: 16%; aspect-ratio: 1; border-radius: 50%;
    background: rgba(0,0,0,0.65); transition: background 0.15s;
    position: relative;
}
.reveal .markdown-body .youtube-facade:hover .youtube-facade-play { background: #f00; }
.reveal .markdown-body .youtube-facade .youtube-facade-play::after {
    content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
    border-style: solid; border-width: 0.5em 0 0.5em 0.85em;
    border-color: transparent transparent transparent #fff;
}

/* ---- task lists (- [ ] / - [x]): drop the bullet, keep the checkbox ---- */
.reveal .markdown-body ul.contains-task-list { list-style: none; padding-left: 0.2em; }
.reveal .markdown-body li.task-list-item { list-style: none; }

/* ---- on-deck clock + elapsed-timer overlay (toggled with T) ---- */
.orz-timer {
    position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
    z-index: 60; display: flex; gap: 14px; align-items: baseline;
    padding: 5px 14px; border-radius: 999px;
    background: rgba(0, 0, 0, 0.62); color: #fff;
    font: 500 15px/1 system-ui, -apple-system, sans-serif;
    font-variant-numeric: tabular-nums; pointer-events: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.orz-timer .orz-timer-clock { opacity: 0.7; }
.orz-timer .orz-timer-elapsed { font-size: 18px; font-weight: 700; }
.reveal .markdown-body .task-list-item-checkbox {
    margin-right: 0.45em; vertical-align: middle; pointer-events: none;
}

/* ---- table of contents ({{toc}}) ---- */
.reveal .markdown-body .toc-list { list-style: none; padding-left: 0; }
.reveal .markdown-body .toc-list a { text-decoration: none; }
.reveal .markdown-body .toc-list a:hover { text-decoration: underline; }

/* ---- footnotes ---- */
.reveal .markdown-body .footnotes {
    margin-top: 0.8em; padding-top: 0.4em; font-size: 0.8em;
    border-top: 1px solid var(--rule, #ddd); color: var(--muted, #777);
}
.reveal .markdown-body .footnote-ref a,
.reveal .markdown-body .footnote-backref { text-decoration: none; }

/* ==========================================================
   TEMPLATE SLIDES (title / section / outline / closing)
   Generic helpers; themes restyle via the same tokens.
   ========================================================== */
.reveal .orz-slide[data-kind="template"] .orz-frame { justify-content: center; }
.reveal .orz-template {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35em;
}

/* ---------- title — v1 (default): centered with an accent rule ---------- */
.reveal .orz-template-title { text-align: center; align-items: center; }
.reveal .orz-title-main {
    font-family: var(--font-heading, 'Segoe UI', system-ui, sans-serif);
    font-weight: 800;
    font-size: 2.7em;
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--ink, #1a1a1a);
    margin: 0;
}
.reveal .orz-template-title .orz-title-main::after {
    content: ""; display: block;
    width: 2.2em; height: 4px; margin: 0.5em auto 0;
    background: var(--accent, #345); border-radius: 2px;
}
.reveal .orz-title-sub {
    font-size: 1.3em; font-weight: 500;
    color: var(--muted, #6b7280);
    margin: 0.7em 0 0;
}
.reveal .orz-title-meta { font-size: 0.85em; color: var(--muted, #6b7280); margin-top: 1.5em; }
.reveal .orz-title-meta p { margin: 0.15em 0; }

/* title — v2: left-aligned with an accent bar */
.reveal .orz-template-title.orz-v2 {
    text-align: left; align-items: flex-start;
    padding-left: 0.7em; border-left: 6px solid var(--accent, #345);
}
.reveal .orz-template-title.orz-v2 .orz-title-main { font-size: 3em; }
.reveal .orz-template-title.orz-v2 .orz-title-main::after { display: none; }
.reveal .orz-template-title.orz-v2 .orz-title-sub { margin-top: 0.5em; }

/* title — v3: an uppercase kicker above the title */
.reveal .orz-template-title.orz-v3 .orz-title-sub {
    order: -1; margin: 0 0 0.7em;
    font-size: 0.8em; font-weight: 700; font-style: normal;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--accent, #345);
}
.reveal .orz-template-title.orz-v3 .orz-title-main::after { display: none; }

/* ---------- section dividers ---------- */
.reveal .orz-template-section { text-align: left; align-items: flex-start; }
.reveal .orz-section-main {
    font-family: var(--font-heading, 'Segoe UI', system-ui, sans-serif);
    font-weight: 800; font-size: 2.5em; line-height: 1.1;
    color: var(--ink, #1a1a1a);
    border-bottom: 4px solid var(--accent, #345);
    padding-bottom: 0.18em;
}
.reveal .orz-section-meta { color: var(--muted, #6b7280); margin-top: 0.6em; }

/* section — v2: centered, accent title, no rule */
.reveal .orz-template-section.orz-v2 { text-align: center; align-items: center; }
.reveal .orz-template-section.orz-v2 .orz-section-main {
    border: none; font-size: 3.1em; color: var(--accent, #345);
}

/* ---------- closing (centered, tighter) ---------- */
.reveal .orz-template-closing { text-align: center; align-items: center; }
.reveal .orz-template-closing .orz-title-main { font-size: 2.2em; }
.reveal .orz-template-closing .orz-title-main::after { margin-top: 0.45em; }

/* ---------- outline (agenda list) ---------- */
.reveal .orz-template-outline { text-align: left; align-items: stretch; }
.reveal .orz-template-outline .orz-outline { font-size: 1.2em; line-height: 1.8; }
.reveal .orz-template-outline .orz-outline ol,
.reveal .orz-template-outline .orz-outline ul { padding-left: 1.2em; }

/* ==========================================================
   EXTRA TEMPLATE VARIANTS (v=4…) — colored panels, borders, frames.
   All use theme tokens (--accent / --surface / --rule / --ink) so they adapt
   to light and dark themes.
   ========================================================== */

/* title v4 — SPLIT: a bold full-height accent band on the left, title on the right */
.reveal .orz-slide:has(.orz-template-title.orz-v4) {
    background: linear-gradient(90deg, var(--accent, #345) 0 34%, var(--bg, #fff) 34%);
}
.reveal .orz-template-title.orz-v4 { text-align: left; align-items: flex-start; padding-left: 40%; }
.reveal .orz-template-title.orz-v4 .orz-title-main { font-size: 3em; }
.reveal .orz-template-title.orz-v4 .orz-title-main::after { margin-left: 0; }

/* title v5 — FULL-COLOR COVER: bold background, title anchored bottom-left */
.reveal .orz-slide:has(.orz-template-title.orz-v5) { background: var(--cover-bg, var(--ink, #1a1a1a)); }
.reveal .orz-template-title.orz-v5 { text-align: left; align-items: flex-start; margin-top: auto; }
.reveal .orz-template-title.orz-v5 .orz-title-main {
    color: var(--cover-ink, var(--bg, #fff)); font-size: 3.6em; line-height: 1;
}
.reveal .orz-template-title.orz-v5 .orz-title-main::after {
    margin-left: 0; background: var(--cover-accent, var(--accent, #345));
}
.reveal .orz-template-title.orz-v5 .orz-title-sub { color: var(--cover-accent, var(--accent, #345)); }
.reveal .orz-template-title.orz-v5 .orz-title-meta { color: var(--cover-ink, var(--bg, #fff)); opacity: 0.72; }

/* title v6 — OVERSIZED EDITORIAL: huge left title with a kicker, bottom-anchored */
.reveal .orz-template-title.orz-v6 { text-align: left; align-items: flex-start; margin-top: auto; }
.reveal .orz-template-title.orz-v6 .orz-title-main {
    font-size: 4.4em; line-height: 0.96; letter-spacing: -0.03em; font-weight: 800;
}
.reveal .orz-template-title.orz-v6 .orz-title-main::after { display: none; }
.reveal .orz-template-title.orz-v6 .orz-title-sub {
    order: -1; margin: 0 0 0.35em;
    text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.62em;
    font-weight: 700; font-style: normal; color: var(--accent, #345);
}
.reveal .orz-template-title.orz-v6 .orz-title-meta { margin-top: 0.9em; font-size: 0.8em; }

/* section v3 — surface band with a left accent bar */
.reveal .orz-template-section.orz-v3 { text-align: left; align-items: stretch; }
.reveal .orz-template-section.orz-v3 .orz-section-main {
    background: var(--surface, #f4f4f4);
    border: none;
    border-left: 7px solid var(--accent, #345);
    border-radius: 0 8px 8px 0;
    padding: 0.45em 0.7em;
}

/* section v4 — outlined box */
.reveal .orz-template-section.orz-v4 { text-align: center; align-items: center; }
.reveal .orz-template-section.orz-v4 .orz-section-main {
    border: 3px solid var(--accent, #345); border-bottom-width: 3px;
    border-radius: 10px; padding: 0.4em 0.9em; background: transparent;
}

/* outline v2 — each item as a surface card with an accent left edge */
.reveal .orz-template-outline.orz-v2 .orz-outline ol,
.reveal .orz-template-outline.orz-v2 .orz-outline ul { list-style: none; padding-left: 0; }
.reveal .orz-template-outline.orz-v2 .orz-outline li {
    background: var(--surface, #f4f4f4);
    border-left: 4px solid var(--accent, #345);
    border-radius: 0 8px 8px 0;
    padding: 0.35em 0.7em; margin: 0.35em 0;
}

/* outline v3 — two balanced columns */
.reveal .orz-template-outline.orz-v3 .orz-outline ol,
.reveal .orz-template-outline.orz-v3 .orz-outline ul {
    column-count: 2; column-gap: 2em;
}
.reveal .orz-template-outline.orz-v3 .orz-outline li { break-inside: avoid; }

/* closing v2 — FULL-COLOR COVER sign-off */
.reveal .orz-slide:has(.orz-template-closing.orz-v2) { background: var(--cover-bg, var(--ink, #1a1a1a)); }
.reveal .orz-template-closing.orz-v2 { text-align: center; align-items: center; }
.reveal .orz-template-closing.orz-v2 .orz-title-main { color: var(--cover-ink, var(--bg, #fff)); font-size: 3em; }
.reveal .orz-template-closing.orz-v2 .orz-title-main::after { background: var(--cover-accent, var(--accent, #345)); }
.reveal .orz-template-closing.orz-v2 .orz-title-meta { color: var(--cover-ink, var(--bg, #fff)); opacity: 0.85; }
.reveal .orz-template-closing.orz-v2 .orz-title-meta a,
.reveal .orz-template-closing.orz-v2 a { color: var(--cover-accent, var(--accent, #345)); }

/* closing v3 — OVERSIZED: huge thanks, bottom-left */
.reveal .orz-template-closing.orz-v3 { text-align: left; align-items: flex-start; margin-top: auto; }
.reveal .orz-template-closing.orz-v3 .orz-title-main {
    font-size: 4.2em; line-height: 0.97; letter-spacing: -0.03em; font-weight: 800;
}
.reveal .orz-template-closing.orz-v3 .orz-title-main::after { margin-left: 0; }
.reveal .orz-template-closing.orz-v3 .orz-title-meta { margin-top: 0.8em; }

/* ==========================================================
   orz-markdown CONTAINERS & INLINE PLUGINS
   The slide base styled only plain markdown; these restore the
   ::: admonitions / cols / tabs / spoiler and {{sp[...]}} spans,
   using the theme's --box-* / --rule / --surface / --accent tokens.
   ========================================================== */

/* ---- admonition callouts: ::: info | success | warning | danger ---- */
.reveal .markdown-body div.info,
.reveal .markdown-body div.success,
.reveal .markdown-body div.warning,
.reveal .markdown-body div.danger {
    border-radius: var(--box-radius, 6px);
    border-left: var(--box-border-width, 4px) solid;
    box-shadow: var(--box-shadow, none);
    padding: 0.5em 0.8em;
    margin: 0.5em 0;
}
.reveal .markdown-body div.info    { background: var(--box-info-bg, #eef4fb);    border-left-color: var(--box-info, #2b6cb0); }
.reveal .markdown-body div.success { background: var(--box-success-bg, #effaf3); border-left-color: var(--box-success, #2f9e44); }
.reveal .markdown-body div.warning { background: var(--box-warning-bg, #fdf6e3); border-left-color: var(--box-warning, #d9a300); }
.reveal .markdown-body div.danger  { background: var(--box-danger-bg, #fdecec);  border-left-color: var(--box-danger, #e03131); }
.reveal .markdown-body div.info > :last-child,
.reveal .markdown-body div.success > :last-child,
.reveal .markdown-body div.warning > :last-child,
.reveal .markdown-body div.danger > :last-child { margin-bottom: 0; }

/* ---- inline colour spans: {{sp[red|green|blue|yellow] …}} ---- */
.reveal .markdown-body span.red    { color: var(--span-red, #e03131); }
.reveal .markdown-body span.green  { color: var(--span-green, #2f9e44); }
.reveal .markdown-body span.blue   { color: var(--span-blue, #1971c2); }
.reveal .markdown-body span.yellow { color: var(--span-yellow, #d9a300); }

/* ---- inline badges: {{sp[success|info|warning|danger] …}} ---- */
.reveal .markdown-body span.info,
.reveal .markdown-body span.success,
.reveal .markdown-body span.warning,
.reveal .markdown-body span.danger {
    display: inline-flex; align-items: center; line-height: 1; white-space: nowrap;
    padding: 0.15em 0.55em; border-radius: 999px; font-size: 0.82em; font-weight: 600;
    border: 1px solid;
}
.reveal .markdown-body span.info    { color: var(--box-info, #2b6cb0);    background: var(--box-info-bg, #eef4fb);    border-color: var(--box-info, #2b6cb0); }
.reveal .markdown-body span.success { color: var(--box-success, #2f9e44); background: var(--box-success-bg, #effaf3); border-color: var(--box-success, #2f9e44); }
.reveal .markdown-body span.warning { color: var(--box-warning, #d9a300); background: var(--box-warning-bg, #fdf6e3); border-color: var(--box-warning, #d9a300); }
.reveal .markdown-body span.danger  { color: var(--box-danger, #e03131);  background: var(--box-danger-bg, #fdecec);  border-color: var(--box-danger, #e03131); }

/* ---- alignment containers: ::: left | center | right ---- */
.reveal .markdown-body div.left   { text-align: left; }
.reveal .markdown-body div.center { text-align: center; }
.reveal .markdown-body div.right  { text-align: right; }

/* ---- column container: ::: cols / ::: col ---- */
.reveal .markdown-body .cols {
    display: grid; gap: 0.8em; margin: 0.5em 0;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.reveal .markdown-body .cols > .col > :last-child { margin-bottom: 0; }

/* ---- tabs: ::: tabs / ::: tab Label (JS in browser-entry adds the bar) ---- */
.reveal .markdown-body .tabs { margin: 0.5em 0; }
.reveal .markdown-body .tabs-bar {
    display: flex; flex-wrap: wrap; gap: 0.3em;
    margin-bottom: 0.5em; border-bottom: 1px solid var(--rule, #ddd);
}
.reveal .markdown-body .tabs-bar-btn {
    font: inherit; font-size: 0.85em; cursor: pointer;
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    padding: 0.3em 0.7em; color: var(--muted, #777);
}
.reveal .markdown-body .tabs-bar-btn.active {
    color: var(--accent, #345); border-bottom-color: var(--accent, #345); font-weight: 600;
}
.reveal .markdown-body .tabs[data-js] > .tab { display: none; }
.reveal .markdown-body .tabs[data-js] > .tab.active { display: block; }
.reveal .markdown-body .tabs:not([data-js]) > .tab { display: block; }
.reveal .markdown-body .tabs:not([data-js]) > .tab::before {
    content: attr(data-label); display: block;
    font-weight: 700; color: var(--accent, #345); font-size: 0.85em; margin: 0.3em 0 0.2em;
}
.reveal .markdown-body .tabs > .tab > :last-child { margin-bottom: 0; }

/* ---- spoiler: ::: spoil Title ---- */
.reveal .markdown-body details.spoil {
    border: 1px solid var(--rule, #ddd); border-radius: var(--box-radius, 6px);
    padding: 0.35em 0.7em; margin: 0.5em 0; background: var(--surface, #f6f6f6);
}
.reveal .markdown-body details.spoil > summary { cursor: pointer; font-weight: 600; color: var(--accent, #345); }
.reveal .markdown-body details.spoil > :not(summary) { margin-top: 0.4em; }