/* One slide of a deck (AB#3018): drawn by PAE.DeckRender, used by the editor now and by the Trials and Showcase
   players later. A slide is a 16:9 box whose text scales with its WIDTH (container query units), so the same slide
   reads the same in a thumbnail, the editor canvas and full screen. */

:root {
    --pae-deck-ink: #12263a;
    --pae-deck-accent: #01244d;
    --pae-deck-muted: #5b6b82;
    --pae-deck-paper: #ffffff;
    --pae-deck-line: #d7deea;
    --pae-deck-empty: #eef2f8;
}

.pae-deck-frame { container-type: inline-size; width: 100%; }

.pae-deck-slide {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 5cqw 6cqw;
    background: var(--pae-deck-paper);
    color: var(--pae-deck-ink);
    border: 1px solid var(--pae-deck-line);
    border-radius: 8px;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 2.3cqw;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 2cqw;
}
.pae-deck-title { margin: 0; font-size: 4cqw; line-height: 1.2; color: var(--pae-deck-accent); font-weight: 700; }
.pae-deck-body { min-height: 0; overflow: hidden; }
.pae-deck-body > :first-child { margin-top: 0; }
.pae-deck-body h3, .pae-deck-body h4 { font-size: 2.8cqw; margin: 0 0 1cqw; color: var(--pae-deck-accent); }
.pae-deck-body p, .pae-deck-body ul, .pae-deck-body ol { margin: 0 0 1.2cqw; }
.pae-deck-body a { color: #1d54e5; }

/* Title: centred cover */
.pae-deck-cover { margin: auto 0; text-align: center; }
.pae-deck-slide--749080000 .pae-deck-title { font-size: 5.6cqw; margin-bottom: 2cqw; }
.pae-deck-slide--749080000 .pae-deck-body { font-size: 2.8cqw; color: var(--pae-deck-muted); }

/* Picture and text: two columns */
.pae-deck-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; min-height: 0; flex: 1; align-items: start; }

/* Picture: one large picture */
.pae-deck-hero { flex: 1; min-height: 0; display: flex; }
.pae-deck-hero .pae-deck-fig { flex: 1; }

/* Whole slide picture (AB#3371): the picture is the slide, edge to edge - no padding, no border radius on the
   picture, and no title drawn (it is in the picture; .pae-deck-sr keeps it for a screen reader). */
.pae-deck-slide--749080006 { padding: 0; gap: 0; }
.pae-deck-whole { flex: 1; min-height: 0; display: flex; }
.pae-deck-whole .pae-deck-fig { flex: 1; }
.pae-deck-whole .pae-deck-fig img { border-radius: 0; }
.pae-deck-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Two pictures side by side */
.pae-deck-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; flex: 1; min-height: 0; }

/* Steps: a numbered list read as big numbered steps */
.pae-deck-steps ol { counter-reset: step; list-style: none; padding: 0; }
.pae-deck-steps ol > li { counter-increment: step; position: relative; padding-left: 5cqw; margin-bottom: 1.4cqw; }
.pae-deck-steps ol > li::before {
    content: counter(step); position: absolute; left: 0; top: 0;
    width: 3.4cqw; height: 3.4cqw; border-radius: 50%;
    background: var(--pae-deck-accent); color: #fff; font-weight: 700; font-size: 2cqw;
    display: flex; align-items: center; justify-content: center;
}

.pae-deck-fig { margin: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.8cqw; }
.pae-deck-fig img { width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 4px; }
.pae-deck-fig figcaption { font-size: 1.8cqw; color: var(--pae-deck-muted); }
.pae-deck-fig--empty {
    border: 2px dashed var(--pae-deck-line); background: var(--pae-deck-empty); border-radius: 6px;
    align-items: center; justify-content: center; color: var(--pae-deck-muted); font-size: 2cqw; min-height: 12cqw;
}

/* A thumbnail is the same slide, smaller: nothing changes but the box. */
.pae-deck-slide--compact { border-radius: 4px; pointer-events: none; }

@media (max-width: 640px) {
    .pae-deck-cols, .pae-deck-pair { grid-template-columns: 1fr; }
}

/* The deck player (AB#3021): a slide as large as the screen allows at 16:9, and a bar under it. */
.pae-deck-player { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.pae-deck-player__stage { width: min(100%, calc((100vh - 140px) * 16 / 9)); }
.pae-deck-player__notes { width: min(100%, calc((100vh - 140px) * 16 / 9)); background: #fffbea; border: 1px solid #ecd98c; border-radius: 6px; padding: 10px 14px; font-size: 15px; white-space: pre-wrap; }
.pae-deck-player__bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pae-deck-player__btn { min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: 6px; border: 1px solid #c5d0de; background: #fff; color: #01244d; font: inherit; font-weight: 600; cursor: pointer; }
.pae-deck-player__btn--primary { background: #01244d; color: #fff; border-color: #01244d; }
.pae-deck-player__btn:disabled { opacity: .45; cursor: default; }
.pae-deck-player__btn:focus-visible { outline: 3px solid #1d54e5; outline-offset: 2px; }
.pae-deck-player__pos { font-weight: 700; color: #5b6b82; }
.pae-deck-player__timer { font-variant-numeric: tabular-nums; color: #5b6b82; }
.pae-deck-player--unattended .pae-deck-player__bar { opacity: .6; }
:fullscreen .pae-deck-player { background: #0b1a2b; height: 100vh; justify-content: center; }
:fullscreen .pae-deck-player__stage { width: min(100vw, calc((100vh - 80px) * 16 / 9)); }