/* MedExPrep Webinars — Slide deck stylesheet (Phase 7)
 *
 * One stylesheet covers all 11 layouts. Brand tint is driven by two CSS
 * custom properties set on a wrapper element:
 *     --mxpwbn-tint-from, --mxpwbn-tint-to
 * The default gradient is used when no tint is set.
 *
 * RESPONSIVE SLIDE ARCHITECTURE (Phase 7)
 * ---------------------------------------
 * Slides are designed on a FIXED 1280×720 virtual canvas so they render
 * PIXEL-IDENTICAL on iPhone, iPad, and desktop — like real slide decks,
 * not reflowed HTML. The outer `.mxpwbn-slide-frame` keeps a 16:9 box at
 * any viewport width, and the inner `.mxpwbn-slide` is a 1280×720 canvas
 * that `transform: scale()` shrinks to fit the frame. Every element inside
 * is sized in absolute pixels relative to that 1280×720 canvas.
 */

:root {
    --mxpwbn-slide-w: 1280;
    --mxpwbn-slide-h: 720;
}

/* ─── CSS variables / defaults ────────────────────────────────────────────── */

.mxpwbn-deck,
.mxpwbn-slide-frame,
.mxpwbn-slide {
    --mxpwbn-tint-from: #0891b2;
    --mxpwbn-tint-to:   #0ea5e9;
    --mxpwbn-ink:       #0b1324;
    --mxpwbn-ink-soft:  #4b5563;
    --mxpwbn-line:      #e5e7eb;
    --mxpwbn-bg:        #ffffff;
    --mxpwbn-bg-soft:   #f8fafc;
    --mxpwbn-radius:    18px;
    --mxpwbn-pad:       64px;
}

/* ─── Deck wrapper ────────────────────────────────────────────────────────── */

.mxpwbn-deck {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.mxpwbn-deck-empty {
    padding: 48px;
    text-align: center;
    color: var(--mxpwbn-ink-soft);
    background: var(--mxpwbn-bg-soft);
    border: 1px dashed var(--mxpwbn-line);
    border-radius: var(--mxpwbn-radius);
}

/* ─── Responsive frame (pixel-perfect scaling) ────────────────────────────── */

/*
 * `.mxpwbn-slide-frame` is the outer responsive wrapper. It locks 16:9 at any
 * viewport width. `cq` units on the inner canvas read the frame's width, so
 * the whole slide scales proportionally — no reflow, no layout shifts.
 */
.mxpwbn-slide-frame {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--mxpwbn-radius);
    overflow: hidden;
    background: var(--mxpwbn-bg);
    box-shadow:
        0 1px 2px rgba(17, 24, 39, .06),
        0 8px 24px -12px rgba(17, 24, 39, .18);
    container-type: size;
}

/* ─── Slide canvas (fixed 1280×720 design space) ──────────────────────────── */

.mxpwbn-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 720px;
    transform-origin: top left;
    /* Phase 13.7 — PowerPoint-style scaling. `--mxpwbn-slide-scale` is set by
     * slide-preview.js / watch.js using a ResizeObserver on the frame, so the
     * canvas is ALWAYS letter-boxed to the available width, independent of
     * browser container-query support. The `calc(100cqw / 1280)` fallback
     * still kicks in if the JS hasn't run yet (SSR / no-JS). */
    transform: scale(var(--mxpwbn-slide-scale, calc(100cqw / 1280)));
    background: var(--mxpwbn-bg);
    color: var(--mxpwbn-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: var(--mxpwbn-pad);
    line-height: 1.35;
    overflow: hidden;
}

/*
 * Fallback for browsers without container-query support (Safari <16, etc):
 * SVG-based scaling via object-fit on an iframe would be heavy. Instead we
 * fall back to the frame sizing the slide at its natural 1280×720 and
 * letting overflow clip. Users on modern browsers (>99%) get the scaled
 * canvas; older browsers get a scroll-capped fixed-size slide that still
 * looks like a slide, just not auto-fit. Acceptable trade-off.
 */
@supports not (container-type: size) {
    .mxpwbn-slide-frame {
        aspect-ratio: 16 / 9;
        overflow: auto;
    }
    .mxpwbn-slide {
        transform: none;
    }
}

.mxpwbn-slide-accent {
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    z-index: 1;
}

/* Phase 14.28 — subtle decoration on non-cover slides. A small blurred
 * gradient blob in the bottom-right corner creates quiet visual warmth
 * without competing with the slide's content. */
.mxpwbn-slide:not(.mxpwbn-slide--cover)::after {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in oklab, var(--mxpwbn-tint-from) 22%, transparent) 0%,
        color-mix(in oklab, var(--mxpwbn-tint-to)   12%, transparent) 45%,
        transparent 70%);
    filter: blur(50px);
    z-index: 0;
    pointer-events: none;
}
.mxpwbn-slide:not(.mxpwbn-slide--cover) > *:not(.mxpwbn-slide-accent) {
    position: relative;
    z-index: 1;
}

.mxpwbn-slide-header,
.mxpwbn-slide-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 16px;
    color: var(--mxpwbn-ink-soft);
}

.mxpwbn-slide-header { min-height: 36px; }

.mxpwbn-slide-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--mxpwbn-tint-from);
    font-size: 14px;
}

.mxpwbn-slide-logo {
    max-height: 40px;
    width: auto;
    object-fit: contain;
    opacity: .85;
}

.mxpwbn-slide-footer {
    color: var(--mxpwbn-ink-soft);
    opacity: .75;
    border-top: 1px solid var(--mxpwbn-line);
    padding-top: 12px;
    margin-top: 12px;
}

/* Phase 14.8 — Pin each slide child to its intended grid row explicitly.
 * Without this, when render_slide_header() returns an empty string (no logo
 * and no eyebrow → no <header>), the grid's auto-placement would put the
 * body into row 1 (auto) and the footer into row 2 (1fr, stretched), which
 * floated the footer into the middle of the slide and collapsed the mermaid
 * body. Explicit grid-row keeps layout deterministic whether or not the
 * optional header is present. */
.mxpwbn-slide-header { grid-row: 1; }
.mxpwbn-slide-body   { grid-row: 2; min-height: 0; }
.mxpwbn-slide-footer { grid-row: 3; }

.mxpwbn-slide-brand { font-weight: 600; }
.mxpwbn-slide-brand--muted { color: transparent; }
.mxpwbn-slide-pager {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ─── Body ────────────────────────────────────────────────────────────────── */

.mxpwbn-slide-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 24px 0;
    min-width: 0;
}

.mxpwbn-slide-body--centered {
    text-align: center;
    align-items: center;
    justify-content: center;
}

.mxpwbn-slide-body--two-col {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
}

.mxpwbn-slide-body--spotlight { grid-template-columns: 360px 1fr; gap: 48px; }

.mxpwbn-slide-col { min-width: 0; }

/* ─── Typography (fixed px, canvas is 1280×720) ───────────────────────────── */

.mxpwbn-slide-title {
    font-size: 54px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--mxpwbn-ink);
}
.mxpwbn-slide-title--lg { font-size: 72px; }
.mxpwbn-slide-title--xl {
    font-size: 88px;
    line-height: 1.04;
}

.mxpwbn-slide-subtitle {
    font-size: 26px;
    color: var(--mxpwbn-ink-soft);
    line-height: 1.35;
    margin: 0;
    font-weight: 500;
}

.mxpwbn-slide-date {
    margin: 4px 0 0;
    font-weight: 600;
    color: var(--mxpwbn-tint-from);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 14px;
}

/* ─── Bullets ─────────────────────────────────────────────────────────────── */

.mxpwbn-slide-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mxpwbn-slide-bullets li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    font-size: 22px;
    line-height: 1.4;
}

.mxpwbn-slide-bullet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    flex: 0 0 auto;
    margin-top: 2px;
    box-shadow: 0 1px 2px rgba(8, 145, 178, .25);
}

.mxpwbn-slide-bullet-text { color: var(--mxpwbn-ink); }

/* ─── Section divider (chapter) ───────────────────────────────────────────── */

.mxpwbn-section-num {
    font-size: 180px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: -8px;
}

/* ─── Quote ───────────────────────────────────────────────────────────────── */

.mxpwbn-slide-quote {
    margin: 0;
    font-size: 38px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--mxpwbn-ink);
    max-width: 72ch;
}
.mxpwbn-slide-quote p { margin: 0 0 12px; }
.mxpwbn-slide-quote--sm { font-size: 22px; }
.mxpwbn-quote-attr {
    display: block;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    color: var(--mxpwbn-tint-from);
}
.mxpwbn-quote-mark {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 200px;
    line-height: 0.8;
    color: var(--mxpwbn-tint-from);
    opacity: .22;
    margin-bottom: -8px;
}

/* ─── Stats ───────────────────────────────────────────────────────────────── */

.mxpwbn-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 36px;
    margin-top: 8px;
}
.mxpwbn-stats-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.mxpwbn-stats-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.mxpwbn-stats-grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }

.mxpwbn-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mxpwbn-stat-value {
    font-size: 68px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.mxpwbn-stat-label {
    font-size: 16px;
    color: var(--mxpwbn-ink-soft);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.mxpwbn-stat--lg .mxpwbn-stat-value { font-size: 96px; }

/* ─── Two-column visuals ──────────────────────────────────────────────────── */

.mxpwbn-slide-visual {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--mxpwbn-bg-soft);
    border: 1px solid var(--mxpwbn-line);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    max-height: 100%;
}
.mxpwbn-slide-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mxpwbn-slide-visual--placeholder {
    background:
        linear-gradient(135deg,
            color-mix(in oklab, var(--mxpwbn-tint-from) 12%, white),
            color-mix(in oklab, var(--mxpwbn-tint-to) 12%, white));
    border-style: dashed;
}
.mxpwbn-slide-visual--stats {
    flex-direction: column;
    padding: 36px;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--mxpwbn-tint-from) 8%, white),
        color-mix(in oklab, var(--mxpwbn-tint-to) 8%, white));
    border: none;
}
.mxpwbn-slide-visual--quote {
    flex-direction: column;
    padding: 32px;
    align-items: flex-start;
    justify-content: center;
    font-style: italic;
    font-size: 20px;
    text-align: left;
}

/* ─── Spotlight ───────────────────────────────────────────────────────────── */

.mxpwbn-spotlight-avatar {
    display: block;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow:
        0 0 0 4px color-mix(in oklab, var(--mxpwbn-tint-from) 40%, white),
        0 12px 32px -8px rgba(17, 24, 39, .22);
}
.mxpwbn-spotlight-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    color: #fff;
    font-size: 80px;
    font-weight: 800;
}
.mxpwbn-slide-eyebrow--inline {
    margin: 0;
    display: inline-block;
    padding: 4px 12px;
    background: color-mix(in oklab, var(--mxpwbn-tint-from) 15%, white);
    color: var(--mxpwbn-tint-from);
    border-radius: 999px;
    font-weight: 700;
}

/* ─── Avatars row (cover) ─────────────────────────────────────────────────── */

.mxpwbn-slide-avatars {
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.mxpwbn-slide-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    margin-right: -12px;
    box-shadow: 0 2px 6px rgba(17, 24, 39, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

/* ─── Phase 14.28: Premium cover slide ───────────────────────────────────── */
/* Cover slide is visually distinct from the rest of the deck:
 *   • Soft gradient wash on the canvas (not the stark white of body slides)
 *   • Large blurred gradient blob behind the content for depth
 *   • Subtle dot-grid texture tying the composition together
 *   • Accent mark next to the headline
 *   • Smaller, better-balanced headline size
 *
 * All decoration is wrapped in pseudo-elements so the existing content
 * structure (cover-top / cover-center / cover-presenters) is untouched
 * and just gets repositioned above the decoration via z-index. */
.mxpwbn-slide--cover {
    background:
        radial-gradient(ellipse 900px 700px at 100% 0%,
            color-mix(in oklab, var(--mxpwbn-tint-from) 14%, white) 0%,
            transparent 55%),
        radial-gradient(ellipse 700px 600px at 0% 100%,
            color-mix(in oklab, var(--mxpwbn-tint-to) 10%, white) 0%,
            transparent 55%),
        linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}
.mxpwbn-slide--cover::before {
    /* Large blurred gradient blob in the top-right corner — gives the slide
     * real depth without needing imagery. */
    content: '';
    position: absolute;
    top: -240px;
    right: -240px;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in oklab, var(--mxpwbn-tint-from) 38%, transparent) 0%,
        color-mix(in oklab, var(--mxpwbn-tint-to)   24%, transparent) 40%,
        transparent 70%);
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}
.mxpwbn-slide--cover::after {
    /* Very subtle dot-grid texture for premium feel. Tiled over the whole
     * canvas but kept faint so it reads as texture, not pattern. */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle,
        color-mix(in oklab, var(--mxpwbn-tint-from) 22%, transparent) 1px,
        transparent 1.2px);
    background-size: 30px 30px;
    opacity: .35;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, black 25%, black 75%, transparent);
            mask-image: linear-gradient(180deg, transparent, black 25%, black 75%, transparent);
}
.mxpwbn-slide--cover > * {
    position: relative;
    z-index: 1;
}

.mxpwbn-slide-body--cover {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 28px;
    padding: 4px 0 0;
    justify-content: stretch;
    align-items: stretch;
}
.mxpwbn-cover-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.mxpwbn-cover-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    border-radius: 999px;
    box-shadow: 0 4px 12px -4px rgba(8, 145, 178, .45);
}
.mxpwbn-cover-logo {
    max-height: 48px;
    width: auto;
    object-fit: contain;
    opacity: .95;
}
.mxpwbn-cover-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    min-width: 0;
}
.mxpwbn-cover-title {
    /* Phase 14.28 — was 82px, felt oversized. 64px reads as a confident
     * editorial headline without overwhelming the 1280×720 canvas. */
    font-size: 64px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.022em;
    margin: 0;
    color: var(--mxpwbn-ink);
    max-width: 24ch;
    position: relative;
    padding-left: 28px;
}
.mxpwbn-cover-title::before {
    /* Vertical gradient accent bar to the left of the headline — subtle
     * visual mark that ties back to the WEBINAR pill above. */
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 12px;
    width: 6px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    box-shadow: 0 2px 8px -2px color-mix(in oklab, var(--mxpwbn-tint-from) 40%, transparent);
}
.mxpwbn-cover-subtitle {
    font-size: 26px;
    font-weight: 500;
    color: var(--mxpwbn-ink-soft);
    line-height: 1.35;
    margin: 0 0 0 28px; /* align with accented title */
    max-width: 52ch;
}
.mxpwbn-cover-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 0 28px; /* align with accented title */
}
.mxpwbn-cover-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border: 1px solid color-mix(in oklab, var(--mxpwbn-tint-from) 18%, var(--mxpwbn-line));
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    font-size: 16px;
    color: var(--mxpwbn-ink);
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px -4px rgba(17, 24, 39, .12);
}
.mxpwbn-cover-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    flex-shrink: 0;
}
.mxpwbn-cover-presenters {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 36px;
    align-items: center;
    padding: 22px 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in oklab, var(--mxpwbn-tint-from) 10%, var(--mxpwbn-line));
    box-shadow: 0 8px 24px -12px rgba(17, 24, 39, .18);
}
.mxpwbn-cover-presenter {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.mxpwbn-cover-presenter-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px -4px rgba(17, 24, 39, .28);
    flex: 0 0 auto;
}
.mxpwbn-cover-presenter-avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    color: #fff;
    font-weight: 800;
    font-size: 20px;
}
.mxpwbn-cover-presenter-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
    min-width: 0;
}
.mxpwbn-cover-presenter-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--mxpwbn-ink);
    letter-spacing: -0.005em;
}
.mxpwbn-cover-presenter-role {
    font-size: 14px;
    color: var(--mxpwbn-ink-soft);
    font-weight: 500;
}

/* ─── Phase 14.26: Top-strip header on non-cover slides ──────────────────── */
/* Thin bar across the top of every non-cover slide: WEBINAR eyebrow +
 * webinar title on the left, logo on the right. Reinforces the brand/
 * session context on each slide without stealing focus from the body. */
.mxpwbn-slide-header--strip {
    padding: 4px 0 10px;
    border-bottom: 1px solid var(--mxpwbn-line);
    margin-bottom: 12px;
    min-height: 0;
}
.mxpwbn-slide-header-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.mxpwbn-slide-header--strip .mxpwbn-slide-eyebrow {
    flex: 0 0 auto;
}
.mxpwbn-slide-header-divider {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: var(--mxpwbn-line);
    flex: 0 0 auto;
}
.mxpwbn-slide-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mxpwbn-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    letter-spacing: 0;
    text-transform: none;
}
.mxpwbn-slide-header--strip .mxpwbn-slide-logo {
    max-height: 26px;
    flex: 0 0 auto;
}

/* ─── Agenda timeline ─────────────────────────────────────────────────────── */

.mxpwbn-agenda-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    counter-reset: mxpwbn-agenda;
}
.mxpwbn-agenda-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 18px;
    padding: 14px 18px;
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to)) 1;
    background: var(--mxpwbn-bg-soft);
    border-radius: 10px;
}
.mxpwbn-agenda-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
}
.mxpwbn-agenda-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mxpwbn-agenda-time {
    font-size: 13px;
    color: var(--mxpwbn-tint-from);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.mxpwbn-agenda-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--mxpwbn-ink);
}
.mxpwbn-agenda-sub {
    font-size: 16px;
    color: var(--mxpwbn-ink-soft);
}

/* ─── CTA button (default: still used by some places) ─────────────────────── */

.mxpwbn-slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 18px 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
    box-shadow:
        0 4px 12px -2px color-mix(in oklab, var(--mxpwbn-tint-from) 50%, transparent);
    transition: transform .18s ease, box-shadow .18s ease;
}
.mxpwbn-slide-cta:hover {
    transform: translateY(-1px);
    box-shadow:
        0 8px 24px -4px color-mix(in oklab, var(--mxpwbn-tint-from) 55%, transparent);
    color: #fff;
}

/* ─── Phase 14.29 — CTA slide (closing slide) ─────────────────────────────── */
/* Industry-standard closing layout: eyebrow + moderate title + optional
 * subtitle → takeaway checklist → soft CTA button with optional note.
 * Replaces the old "centered shout" layout that used --lg (72px) title and
 * a single big gradient pill.
 */

.mxpwbn-slide-body--cta {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 28px;
    padding: 8px 0;
    align-items: start;
    text-align: left;
}

.mxpwbn-cta-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 920px;
}

.mxpwbn-cta-eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--mxpwbn-tint-from) 10%, white);
    color: var(--mxpwbn-tint-from);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid color-mix(in oklab, var(--mxpwbn-tint-from) 20%, transparent);
}

.mxpwbn-cta-title {
    font-size: 44px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--mxpwbn-ink);
    max-width: 980px;
}

.mxpwbn-cta-sub {
    font-size: 20px;
    color: var(--mxpwbn-ink-soft);
    line-height: 1.4;
    margin: 4px 0 0;
    font-weight: 500;
    max-width: 880px;
}

/* Takeaways — 2-column checklist, compact, uses tint check mark. */
.mxpwbn-cta-takeaways {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
    align-self: center;
    width: 100%;
}

.mxpwbn-cta-takeaway {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: var(--mxpwbn-bg-soft);
    border: 1px solid var(--mxpwbn-line);
    border-radius: 10px;
}

.mxpwbn-cta-takeaway-mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    color: #fff;
}

.mxpwbn-cta-takeaway-text {
    font-size: 17px;
    line-height: 1.38;
    color: var(--mxpwbn-ink);
    font-weight: 500;
}

/* Footer row — button + inline "next step" pointer on the left, optional
 * secondary note on the right. Phase 14.30: moved subtitle inline with the
 * button so copy and action read together (e.g. "Learn more → Next step: …"). */
.mxpwbn-cta-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--mxpwbn-line);
}

.mxpwbn-cta-footer-action {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    min-width: 0;
}

.mxpwbn-cta-next {
    font-size: 16px;
    color: var(--mxpwbn-ink);
    line-height: 1.38;
    max-width: 640px;
    font-weight: 500;
}

.mxpwbn-cta-note {
    font-size: 14px;
    color: var(--mxpwbn-ink-soft);
    line-height: 1.4;
    max-width: 520px;
}

/* Soft CTA — tint-on-white pill rather than a shouty full-gradient pill.
 * Uses a 1.5px tinted border and a very light fill so it reads as a clear
 * next-step button without dominating the slide.
 */
.mxpwbn-slide-cta--soft {
    margin-top: 0;
    padding: 13px 22px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 10px;
    background: color-mix(in oklab, var(--mxpwbn-tint-from) 6%, white);
    color: var(--mxpwbn-tint-from);
    border: 1.5px solid color-mix(in oklab, var(--mxpwbn-tint-from) 40%, transparent);
    box-shadow:
        0 1px 2px color-mix(in oklab, var(--mxpwbn-tint-from) 12%, transparent);
    gap: 8px;
}
.mxpwbn-slide-cta--soft:hover {
    background: color-mix(in oklab, var(--mxpwbn-tint-from) 12%, white);
    color: var(--mxpwbn-tint-from);
    transform: translateY(-1px);
    box-shadow:
        0 4px 10px -2px color-mix(in oklab, var(--mxpwbn-tint-from) 30%, transparent);
}
.mxpwbn-slide-cta--soft .mxpwbn-slide-cta-arrow {
    transition: transform .18s ease;
}
.mxpwbn-slide-cta--soft:hover .mxpwbn-slide-cta-arrow {
    transform: translateX(3px);
}

/* ─── Recap numbered list ─────────────────────────────────────────────────── */

.mxpwbn-recap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.mxpwbn-recap-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    padding: 16px 18px;
    background: var(--mxpwbn-bg-soft);
    border-radius: 10px;
    border: 1px solid var(--mxpwbn-line);
}
.mxpwbn-recap-num {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--mxpwbn-tint-from), var(--mxpwbn-tint-to));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.mxpwbn-recap-text {
    font-size: 18px;
    line-height: 1.35;
    color: var(--mxpwbn-ink);
}

/* ─── Custom HTML slide (reset-friendly) ──────────────────────────────────── */

.mxpwbn-slide-body--custom > * + * { margin-top: 14px; }

/* ─── Layouts: table + mermaid (Phase 14) ─────────────────────────────────── */

/* Shared figure/table body — used by both layouts. */
.mxpwbn-slide-body--figure {
    display: grid;
    /* Phase 14.7 — 4 rows: optional heading (h2) / caption / body (1fr) / note.
     * Phase 14.9 — Row-track definitions alone are not enough: grid auto-placement
     * walks children in document order and drops each into the first free cell, so
     * when the optional heading is omitted the caption lands in row 1 (auto) and
     * the body wrap lands in row 2 (auto, intrinsic) instead of row 3 (1fr). The
     * wrap then collapses to its intrinsic height (~42 px) and the rendered SVG
     * sizes itself to 0×0. Pin each child to its intended grid row below so
     * placement is deterministic whether or not heading/note are present. */
    grid-template-rows: auto auto 1fr auto;
    gap: 20px;
    min-height: 0;
    width: 100%;
    max-height: 100%;
}

.mxpwbn-slide-body--figure > .mxpwbn-slide-title        { grid-row: 1; }
.mxpwbn-slide-body--figure > .mxpwbn-slide-caption      { grid-row: 2; }
.mxpwbn-slide-body--figure > .mxpwbn-slide-mermaid-wrap,
.mxpwbn-slide-body--figure > .mxpwbn-slide-table-wrap   { grid-row: 3; min-height: 0; }
.mxpwbn-slide-body--figure > .mxpwbn-slide-figure-note  { grid-row: 4; }

/* Caption: "Table 1 — Title" or "Figure 1 — Title" */
.mxpwbn-slide-caption {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--mxpwbn-ink);
    letter-spacing: -0.01em;
}
.mxpwbn-slide-caption-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--mxpwbn-tint-from, #0891b2) 18%, transparent),
        color-mix(in oklab, var(--mxpwbn-tint-to,   #0ea5e9) 14%, transparent));
    color: var(--mxpwbn-tint-from, #0891b2);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid color-mix(in oklab, var(--mxpwbn-tint-from, #0891b2) 35%, transparent);
    white-space: nowrap;
}
.mxpwbn-slide-caption-sep {
    color: rgba(0,0,0,.25);
    font-weight: 400;
}
.mxpwbn-slide-caption-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--mxpwbn-ink);
    letter-spacing: -0.015em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Note row under the figure/table — for sources, clarifications, etc. */
.mxpwbn-slide-figure-note {
    margin: 0;
    font-size: 16px;
    color: rgba(17, 24, 39, .55);
    line-height: 1.4;
    font-style: italic;
}

/* ─── Tables ──────────────────────────────────────────────────────────────── */

.mxpwbn-slide-table-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;        /* v0.44.6 — webinar slides should NEVER scroll. Auto-fit shrinks the table to fit. */
    border-radius: 14px;
    border: 1px solid color-mix(in oklab, var(--mxpwbn-tint-from, #0891b2) 18%, rgba(17,24,39,.08));
    box-shadow: 0 4px 16px -6px rgba(17, 24, 39, .1);
    background: #fff;
}

/* v0.44.6 — auto-fit transform applied via JS reads --mxpwbn-fit and scales the inner table.
 * Setting transform-origin to top-center keeps the caption-aligned table looking centered when shrunk. */
.mxpwbn-slide-table-wrap > .mxpwbn-slide-table-fit {
    transform-origin: top center;
    width: 100%;
}

/* v0.44.9 — generic auto-fit shell: any layout that wraps its content in
 * .mxpwbn-autofit-target > .mxpwbn-autofit-inner gets shrink-to-fit behavior
 * via the shared get_autofit_boot() script. Used by table, equation, and
 * calculation layouts so dense content never clips at the slide edges. */
.mxpwbn-autofit-target {
    overflow: hidden;
    min-height: 0;
    max-height: 100%;
}
/* v0.44.10 — JS sets transform-origin to top-left and applies a translateX
 * to recenter post-scale. Inner stays at its natural CSS-default width. */
.mxpwbn-autofit-target > .mxpwbn-autofit-inner {
    transform-origin: top left;
}
/* v0.44.13 (revised) — Equation/calculation slide bodies are themselves the
 * autofit-target (`.mxpwbn-autofit-bare` opts out of the body's 56px
 * padding-top so the title sits at the top of the slide naturally). The
 * autofit-inner wraps title + intro + formulas, so everything scales
 * together — title shrinks proportionally with the formulas as content
 * grows, and there's never a gap above the title. */
.mxpwbn-slide-body.mxpwbn-autofit-target.mxpwbn-autofit-bare {
    padding-top: 24px;          /* lighter breathing room (was 56px from global rule) */
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}
.mxpwbn-slide-body.mxpwbn-autofit-target.mxpwbn-autofit-bare > .mxpwbn-autofit-inner {
    flex: 1 1 auto;
    min-height: 0;
    /* Tighten the in-content gap between title, intro, and equation stack
     * so the autofit doesn't have to scale the body to compensate. */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mxpwbn-slide-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    font-size: 18px;
    color: var(--mxpwbn-ink);
}

.mxpwbn-slide-table thead tr {
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--mxpwbn-tint-from, #0891b2) 92%, black),
        color-mix(in oklab, var(--mxpwbn-tint-to,   #0ea5e9) 92%, black));
}
.mxpwbn-slide-table thead th {
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: 14px 18px;
    letter-spacing: .02em;
    font-size: 15px;
    text-transform: uppercase;
    border: none;
}

.mxpwbn-slide-table tbody tr {
    transition: background .16s ease;
}
.mxpwbn-slide-table tbody tr:nth-child(even) {
    background: color-mix(in oklab, var(--mxpwbn-tint-from, #0891b2) 5%, #fff);
}
.mxpwbn-slide-table tbody td {
    padding: 14px 18px;
    border-top: 1px solid rgba(17, 24, 39, .06);
    vertical-align: top;
    line-height: 1.45;
}
.mxpwbn-slide-table tbody tr:first-child td { border-top: none; }
.mxpwbn-slide-table tbody td:first-child {
    font-weight: 600;
    color: var(--mxpwbn-tint-from, #0891b2);
}

/* Compact density — tighter rows, smaller type. Used when density:"compact". */
.mxpwbn-slide-table-wrap.is-compact .mxpwbn-slide-table { font-size: 15px; }
.mxpwbn-slide-table-wrap.is-compact .mxpwbn-slide-table thead th,
.mxpwbn-slide-table-wrap.is-compact .mxpwbn-slide-table tbody td {
    padding: 8px 14px;
}
.mxpwbn-slide-table-wrap.is-compact .mxpwbn-slide-table thead th {
    font-size: 13px;
}

/* ─── Mermaid diagrams ────────────────────────────────────────────────────── */

.mxpwbn-slide-mermaid-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    /* Phase 14.16 — reduced from 20px to 8px 6px. Mermaid SVGs are
     * aspect-fit via preserveAspectRatio="xMidYMid meet", so removing
     * horizontal padding directly grows the usable container_width that
     * determines on-screen text size. This reclaims ~28px of width on
     * dense flowcharts, which is a ~3% boost to rendered text at fixed
     * content density. */
    padding: 8px 6px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--mxpwbn-tint-from, #0891b2) 5%, #fff),
        color-mix(in oklab, var(--mxpwbn-tint-to,   #0ea5e9) 4%, #fff));
    border: 1px solid color-mix(in oklab, var(--mxpwbn-tint-from, #0891b2) 15%, rgba(17,24,39,.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

/* Pre-render state — the raw mermaid source as monospace, centered. Rendered
 * SVG replaces this once mermaid-init.js finishes processing. */
.mxpwbn-slide-mermaid-wrap pre.mxpwbn-mermaid {
    margin: 0;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(17, 24, 39, .55);
    white-space: pre;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

/* Once mermaid has rendered the <svg>, mermaid-init.js wraps it in a
 * <div class="mxpwbn-mermaid-rendered"> and swaps that in for the <pre>.
 *
 * Phase 14.10 — That intermediate holder div had no CSS sizing rules, so it
 * collapsed to 0×0 inside the flex-centered wrap. The SVG mermaid emits with
 * `width="100%"` then computed against a 0-width parent and rendered at 0×0
 * too. Give the holder explicit fill-the-wrap sizing so the SVG's `width:100%`
 * has something to resolve against; the SVG's own viewBox +
 * preserveAspectRatio="xMidYMid meet" handles the aspect-ratio fit inside
 * those bounds. */
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* Phase 14.16 — scroll mode for diagrams that would otherwise render text
 * below our readable floor (<16px on-screen). mermaid-init.js sets
 * data-mxpwbn-overflow="scroll" + inline width on the SVG; these rules
 * flip the card from center-fit to left-aligned scroll. */
.mxpwbn-slide-mermaid-wrap[data-mxpwbn-overflow="scroll"] {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
}
.mxpwbn-slide-mermaid-wrap[data-mxpwbn-overflow="scroll"] .mxpwbn-mermaid-rendered {
    width: auto;
    min-width: 100%;
    justify-content: flex-start;
    flex: 0 0 auto;
}
.mxpwbn-slide-mermaid-wrap[data-mxpwbn-overflow="scroll"] .mxpwbn-mermaid-rendered svg {
    /* JS sets inline width; override the fit-to-container defaults. */
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    flex: 0 0 auto;
}
/* Custom scrollbar so it doesn't look like a browser leak inside the card. */
.mxpwbn-slide-mermaid-wrap[data-mxpwbn-overflow="scroll"]::-webkit-scrollbar {
    height: 8px;
}
.mxpwbn-slide-mermaid-wrap[data-mxpwbn-overflow="scroll"]::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--mxpwbn-tint-from, #0891b2) 45%, transparent);
    border-radius: 999px;
}
.mxpwbn-slide-mermaid-wrap[data-mxpwbn-overflow="scroll"]::-webkit-scrollbar-track {
    background: transparent;
}

/* ─── Phase 14.15 — Mermaid label & edge typography ───────────────────────── */
/* Typography for node labels. font-weight is 500 (medium) instead of 600
 * because mermaid measures labels at weight 400; larger deltas cause the
 * rendered text to be wider than the measured node rect, clipping the tail.
 * The mermaid-init.js pre-pads labels with 2 spaces each side, which
 * combined with weight 500 gives us a reliable fit.
 *
 * Font size is 30px (matching the 32px themeVariable with a 2px safety
 * buffer for cascade). Combined with the tighter flowchart layout in
 * 14.15, this lifts on-screen text size across all densities.
 *
 * !important is required throughout because mermaid embeds an id-scoped
 * <style> block *inside* each rendered SVG (e.g. `#mermaid-abc .nodeLabel`)
 * that otherwise out-specifies our class selectors. */
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered foreignObject > div,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered foreignObject p,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered .nodeLabel {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Edge labels are a two-element construct:
 *   <foreignObject>       ← sized by JS (expandEdgeLabelBoxes) to be oversized
 *     <div>               ← flex center (transparent, no border)
 *       <span class=edgeLabel>  ← THE pill (bg + border + padding)
 *
 * Making the INNER span the pill lets it auto-size to content — so short
 * "Yes" gets a compact pill and longer "No, reject" gets a wider pill, both
 * centered within the oversized foreignObject. overflow:visible on the
 * foreignObject (also set by JS) is a safety net in case the pill is wider
 * than our over-allocation. */
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered g.edgeLabel foreignObject {
    overflow: visible !important;
}

.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered g.edgeLabel foreignObject > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered g.edgeLabel foreignObject span,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered g.edgeLabel foreignObject .edgeLabel {
    display: inline-block !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 2px solid var(--mxpwbn-tint-from, #0891b2) !important;
    border-radius: 10px !important;
    padding: 6px 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* Pure-SVG text fallback (sequence diagrams, timelines, non-htmlLabel flows) */
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
    font-size: 30px;
}

/* Slightly thicker edges so the connection paths don't disappear after
 * scale-down. Mermaid's default stroke-width is 1.5 px which renders at
 * <0.5 px on screen — nearly invisible.
 *
 * Phase 14.12 — `!important` is required here because mermaid embeds its own
 * <style> block *inside* the generated SVG, and those rules use id-scoped
 * selectors like `#mermaid-abc123 .node rect`, which have higher specificity
 * than our class-based selectors. Without !important our stroke widths lose
 * the cascade battle and the paths stay at mermaid's 1-2 px default. */
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .flowchart-link,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg path.flowchart-link,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .messageLine0,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .messageLine1,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .edgePath path {
    stroke-width: 2.5px !important;
}

/* Node borders — 3 px instead of mermaid default 1 px so diamonds/rectangles
 * read cleanly at small scales. */
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .node rect,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .node polygon,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .node circle,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .node ellipse,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .node path {
    stroke-width: 3px !important;
}

/* Phase 14.13 — Rounded corners on rectangular nodes. SVG 2 supports rx/ry
 * as CSS properties; all current shipping browsers honor this. Diamonds
 * (polygon) and circles are shape-intrinsic, so they don't need a radius. */
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .node rect,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .node .label-container {
    rx: 10px !important;
    ry: 10px !important;
}

/* Subtle inner shadow / lift via filter so shapes have a touch of depth.
 * Uses a tiny drop-shadow that survives SVG scaling. */
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .node rect,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .node polygon,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .node ellipse,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .node circle {
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.12));
}

/* Phase 14.19 — arrowhead color. Default mermaid paints markers in the
 * same tint as the line (light sky-teal), which makes the arrow tip
 * disappear when it lands against a tint.from (primary teal) node fill.
 * Forcing a darker ink color gives a clean "thin teal line → bold dark
 * arrow tip" look that reads at any scale. Marker size is bumped at
 * render time by enhanceArrows() in mermaid-init.js. */
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg defs marker path,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg defs marker polygon,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg marker .arrowheadPath,
.mxpwbn-slide-mermaid-wrap .mxpwbn-mermaid-rendered svg .arrowheadPath {
    fill:   var(--mxpwbn-ink, #0f172a) !important;
    stroke: var(--mxpwbn-ink, #0f172a) !important;
    stroke-width: 1 !important;
}

/* While mermaid is rendering, hide the pre source to avoid a flash of code. */
.mxpwbn-slide-mermaid-wrap[data-mxpwbn-mermaid-state="rendering"] pre.mxpwbn-mermaid,
.mxpwbn-slide-mermaid-wrap[data-mxpwbn-mermaid-state="rendered"]  pre.mxpwbn-mermaid {
    display: none;
}

/*
 * NOTE: There is intentionally NO @media (max-width: 700px) reflow here.
 * Because the slide is a fixed 1280×720 canvas scaled by transform, the
 * layout is IDENTICAL at every viewport — two-col stays two-col on mobile,
 * spotlight stays spotlight, recap grid stays a 2×n grid. The whole slide
 * just scales down proportionally, like a PDF or an image would. This is
 * the guarantee the user asked for: slides look identical on iPhone, iPad,
 * and desktop.
 */

/* ─── Motion reduce ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mxpwbn-slide,
    .mxpwbn-slide *,
    .mxpwbn-slide *::before,
    .mxpwbn-slide *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ─── Text overflow guards (Phase 14.37) ─────────────────────────────
 * The slide canvas is fixed at 1280×720, so long strings without natural
 * wrap points can visually clip. These rules add soft-wrap fallbacks on
 * the text surfaces that receive untrusted user or AI-generated text. */
.mxpwbn-slide-title,
.mxpwbn-slide-eyebrow,
.mxpwbn-slide-bullet-text,
.mxpwbn-slide-bullets li,
.mxpwbn-agenda-title,
.mxpwbn-recap-text,
.mxpwbn-cta-takeaway-text,
.mxpwbn-cta-eyebrow,
.mxpwbn-cta-title {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.mxpwbn-slide-bullet-text,
.mxpwbn-agenda-title,
.mxpwbn-recap-text,
.mxpwbn-cta-takeaway-text {
    max-width: 64ch; /* Keeps reading measure comfortable at any scale. */
}

/* Tables can overflow horizontally on long column headers; enable a
 * gentle soft-wrap so long strings break before breaking the grid. */
.mxpwbn-slide table {
    table-layout: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.mxpwbn-slide th,
.mxpwbn-slide td {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* ─── Phase 14.46 · Interactive poll + quiz layouts ──────────────────────── */

.mxpwbn-slide-body--poll,
.mxpwbn-slide-body--quiz {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    max-width: 920px;
    margin: 0 auto;
}
.mxpwbn-poll-title,
.mxpwbn-quiz-title {
    font-size: 44px;
    line-height: 1.2;
    margin: 0;
    max-width: 22ch;
}
.mxpwbn-poll-sub,
.mxpwbn-quiz-sub {
    font-size: 22px;
    line-height: 1.4;
    color: color-mix(in srgb, currentColor 65%, transparent);
    margin: 0;
    max-width: 52ch;
}

/* Poll */
.mxpwbn-poll {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mxpwbn-poll-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: color-mix(in srgb, var(--mxpwbn-tint-to, #0891b2) 5%, transparent);
    border: 2px solid color-mix(in srgb, var(--mxpwbn-tint-to, #0891b2) 18%, transparent);
    border-radius: 14px;
    padding: 16px 20px;
    font-size: 22px;
    font-weight: 500;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.mxpwbn-poll-opt:hover,
.mxpwbn-poll-opt:focus-visible {
    background: color-mix(in srgb, var(--mxpwbn-tint-to, #0891b2) 12%, transparent);
    border-color: color-mix(in srgb, var(--mxpwbn-tint-to, #0891b2) 35%, transparent);
}
.mxpwbn-poll-opt-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: color-mix(in srgb, var(--mxpwbn-tint-to, #0891b2) 22%, transparent);
    border-radius: 12px 0 0 12px;
    transition: width .5s ease-out;
    z-index: 0;
}
.mxpwbn-poll-opt-label,
.mxpwbn-poll-opt-pct {
    position: relative;
    z-index: 1;
}
.mxpwbn-poll-opt-pct {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    color: color-mix(in srgb, currentColor 60%, transparent);
    opacity: 0;
    transition: opacity .2s ease;
}
.mxpwbn-poll[data-voted="1"] .mxpwbn-poll-opt-pct { opacity: 1; }
.mxpwbn-poll[data-voted="1"] .mxpwbn-poll-opt[aria-checked="true"] {
    border-color: var(--mxpwbn-tint-to, #0891b2);
    background: color-mix(in srgb, var(--mxpwbn-tint-to, #0891b2) 14%, transparent);
}
.mxpwbn-poll-foot {
    font-size: 16px;
    color: color-mix(in srgb, currentColor 55%, transparent);
    margin: 0;
}

/* Quiz */
.mxpwbn-quiz {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mxpwbn-quiz-opt-wrap { margin: 0; }
.mxpwbn-quiz-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: color-mix(in srgb, currentColor 5%, transparent);
    border: 2px solid color-mix(in srgb, currentColor 15%, transparent);
    border-radius: 14px;
    padding: 16px 20px;
    font-size: 22px;
    font-weight: 500;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background-color .15s ease, border-color .15s ease;
}
.mxpwbn-quiz-opt:hover,
.mxpwbn-quiz-opt:focus-visible {
    background: color-mix(in srgb, currentColor 9%, transparent);
    border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.mxpwbn-quiz-opt-dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, currentColor 40%, transparent);
    flex-shrink: 0;
}
.mxpwbn-quiz-opt-mark {
    margin-left: auto;
    width: 24px;
    height: 24px;
    opacity: 0;
    transition: opacity .2s ease;
}
.mxpwbn-quiz-opt[aria-checked="true"] .mxpwbn-quiz-opt-dot {
    background: var(--mxpwbn-tint-to, #0891b2);
    border-color: var(--mxpwbn-tint-to, #0891b2);
}
.mxpwbn-quiz[data-answered="1"] .mxpwbn-quiz-opt {
    cursor: default;
    pointer-events: none;
}
.mxpwbn-quiz-opt.is-correct {
    border-color: #10b981;
    background: color-mix(in srgb, #10b981 14%, transparent);
}
.mxpwbn-quiz-opt.is-correct .mxpwbn-quiz-opt-mark {
    opacity: 1;
    background: #10b981;
    border-radius: 999px;
    position: relative;
}
.mxpwbn-quiz-opt.is-correct .mxpwbn-quiz-opt-mark::after {
    content: "✓";
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mxpwbn-quiz-opt.is-wrong {
    border-color: #ef4444;
    background: color-mix(in srgb, #ef4444 14%, transparent);
}
.mxpwbn-quiz-opt.is-wrong .mxpwbn-quiz-opt-mark {
    opacity: 1;
    background: #ef4444;
    border-radius: 999px;
    position: relative;
}
.mxpwbn-quiz-opt.is-wrong .mxpwbn-quiz-opt-mark::after {
    content: "✗";
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mxpwbn-quiz-explain {
    background: color-mix(in srgb, currentColor 6%, transparent);
    border-left: 3px solid var(--mxpwbn-tint-to, #0891b2);
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 18px;
    line-height: 1.5;
    max-width: 64ch;
}

/* ─── v0.43 — equation / chart / case_vignette layouts ────────────────────── */

/* equation */
.mxpwbn-slide-body--equation { display: flex; flex-direction: column; gap: 18px; }
.mxpwbn-eq-stack { display: flex; flex-direction: column; gap: 22px; margin: 6px 0 8px; }
.mxpwbn-eq-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.mxpwbn-eq-label { font-size: 14px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.6px; }
.mxpwbn-eq-latex { font-size: 24px; color: #0f172a; min-height: 36px; width: 100%; text-align: center; }
.mxpwbn-eq-fallback {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 14px;
    color: #475569;
    background: transparent;
    padding: 0;
}
.mxpwbn-slide-lead { font-size: 20px; color: #334155; margin: 0 0 4px; line-height: 1.45; max-width: 68ch; }
.mxpwbn-slide-note { font-size: 14px; color: #64748b; margin: 8px 0 0; max-width: 72ch; }

/* chart */
.mxpwbn-slide-body--chart { display: flex; flex-direction: column; gap: 14px; }
.mxpwbn-chart-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 22px;
    position: relative;
}

/* case_vignette */
.mxpwbn-slide-body--case { display: flex; flex-direction: column; gap: 14px; }
.mxpwbn-case-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 2px 10px;
    border-radius: 10px;
    background: #dbeafe;
    color: #1e40af;
    margin-bottom: 6px;
}
.mxpwbn-case-tag--green { background: #dcfce7; color: #166534; }
.mxpwbn-case-stem {
    background: #f8fafc;
    border-left: 4px solid #0ea5e9;
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
}
.mxpwbn-case-stem p { margin: 0; font-size: 18px; line-height: 1.55; color: #0f172a; }
.mxpwbn-case-question { font-size: 20px; color: #0f172a; margin: 4px 0 0; line-height: 1.4; }
.mxpwbn-case-choices { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mxpwbn-case-choice {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 16px;
    color: #334155;
}
.mxpwbn-case-choice--correct {
    background: #f0fdf4;
    border-color: #86efac;
    color: #14532d;
    font-weight: 600;
}
.mxpwbn-case-letter {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mxpwbn-case-choice--correct .mxpwbn-case-letter { background: #16a34a; color: #fff; }
.mxpwbn-case-text { flex: 1 1 auto; }
.mxpwbn-case-mark { color: #16a34a; font-weight: 700; font-size: 18px; }
.mxpwbn-case-teaching {
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    margin-top: 6px;
}
.mxpwbn-case-teaching p { margin: 0; font-size: 16px; line-height: 1.55; color: #14532d; }

/* ─── v0.43.1 — bug fixes ─────────────────────────────────────────────────── */

/* All body titles must sit above the breadcrumb header and have enough
   clearance from it. Long wrapping titles were draping over the top
   WEBINAR | Day X bar before this. v0.43.2: use a TOP PADDING on the
   slide body itself so the header gets guaranteed vertical space, and
   give titles an opaque background so they occlude the breadcrumb rather
   than interleave with it. */
.mxpwbn-slide-body {
    padding-top: 56px;
}
.mxpwbn-slide-body > .mxpwbn-slide-title,
.mxpwbn-slide-body--equation > .mxpwbn-slide-title,
.mxpwbn-slide-body--chart > .mxpwbn-slide-title,
.mxpwbn-slide-body--case > .mxpwbn-slide-title,
.mxpwbn-slide-body--two-col > .mxpwbn-slide-col > .mxpwbn-slide-title {
    position: relative;
    z-index: 3;
    margin-top: 0;
    background: #fff;
    padding-top: 4px;
}

/* Citation superscript — appears after any term the model grounds against
   a retrieved passage. Small, subdued, clickable-looking. */
.mxpwbn-cite {
    display: inline-block;
    font-size: 0.6em;
    line-height: 1;
    vertical-align: super;
    padding: 2px 5px;
    margin: 0 1px;
    border-radius: 8px;
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 600;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.mxpwbn-cite::before { content: "["; opacity: 0.65; }
.mxpwbn-cite::after  { content: "]"; opacity: 0.65; }

/* Harden the stats layout so a runaway "value" (when the model writes a
   sentence instead of a number) can't blow out of the slide. Wrap long
   values and clip with ellipsis at a sane limit. */
.mxpwbn-stat-value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.1;
}
/* Shrink the font when the value is clearly a sentence (>20 chars). */
.mxpwbn-stat--lg .mxpwbn-stat-value { font-size: clamp(32px, 10vw, 96px); }

/* v0.43.1 — when the generator puts a sentence in a stat value, fall back
   to a callout-card treatment instead of blowing up with 96px font. */
.mxpwbn-stat--callout {
    background: #eff6ff;
    border-left: 5px solid #0ea5e9;
    border-radius: 0 14px 14px 0;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-column: 1 / -1;
    max-width: 100%;
}
.mxpwbn-stat-callout {
    margin: 0;
    font-size: 24px;
    line-height: 1.35;
    color: #0c4a6e;
    font-weight: 700;
    overflow-wrap: break-word;
}
.mxpwbn-stat--callout .mxpwbn-stat-label {
    font-size: 13px;
    color: #475569;
    font-weight: 500;
}

/* Two-col safety: if the right column ends up empty (no visual + no bullets),
   hide the empty placeholder and let the left column expand so the slide
   doesn't read as "half broken". */
.mxpwbn-slide-body--two-col .mxpwbn-slide-col:last-child:has(> .mxpwbn-slide-visual--placeholder:only-child) {
    display: none;
}
.mxpwbn-slide-body--two-col:has(> .mxpwbn-slide-col:last-child:empty) > .mxpwbn-slide-col:first-child,
.mxpwbn-slide-body--two-col:has(> .mxpwbn-slide-col:last-child > .mxpwbn-slide-visual--placeholder:only-child) > .mxpwbn-slide-col:first-child {
    grid-column: 1 / -1;
    max-width: 100%;
}

/* ─── Calculation layout (v0.44.1) ──────────────────────────────────────── */
.mxpwbn-slide-body--calculation {
    padding-top: 56px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mxpwbn-calc-problem {
    background: #f8fafc;
    border-left: 4px solid #0ea5e9;
    border-radius: 6px;
    padding: 10px 14px;
}
.mxpwbn-calc-problem-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #0369a1;
    font-weight: 700;
    margin-bottom: 4px;
}
.mxpwbn-calc-problem-text {
    font-size: 16px;
    color: #0f172a;
    line-height: 1.5;
}
.mxpwbn-calc-steps {
    list-style: none;
    counter-reset: mxpwbnStep;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mxpwbn-calc-step {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.mxpwbn-calc-step-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    font-weight: 700;
    line-height: 1.2;
    padding-top: 6px;
}
.mxpwbn-calc-step-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mxpwbn-calc-step-text {
    color: #334155;
    font-size: 15px;
    line-height: 1.55;
}
.mxpwbn-calc-step-math {
    background: #f1f5f9;
    padding: 8px 12px;
    border-radius: 6px;
    overflow-x: auto;
}
.mxpwbn-calc-answer {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.mxpwbn-calc-answer-label {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #047857;
}
.mxpwbn-calc-answer-text {
    font-size: 20px;
    font-weight: 700;
    color: #064e3b;
}
.mxpwbn-calc-pitfall {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    color: #78350f;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
}