/* ------------------------------------------------------------------ deck -- */

/* One slide is one screen. The deck ran 93-294px past the fold at four of five
   sizes, which cut off the slide's own nav — the control a viewer needs to see
   the next slide was below the bottom of the window.

   The section padding was sized like a page's (128px at 1440), not a deck's.
   A deck is a frame and its controls; the room around it is chrome. */
.deck {
    /* The deck's vertical rhythm, once, from the room it has. Every gap
       inside a slide — under the title, between paragraphs, above the impact
       line, around the contact box — was a fixed rem or a WIDTH-based clamp,
       so a 1440x700 window got the same air as a 1440x900 one and slides 1,
       5 and 13 ran 35-87px past it with their Next button. A plant fills the
       pot it is in: at 1080 this is 24px, at 900 about 21, at 700 about 16,
       and the slide fits by construction rather than by a breakpoint. */
    --deck-air: clamp(0.4rem, 2.3vh, 1.5rem);
    /* The frame's one horizontal inset: chrome and slide both read it. */
    --deck-pad: clamp(1.25rem, 3vw, 2.25rem);
    --deck-pad-block: clamp(1.75rem, 4vw, 3rem);
    padding-top: clamp(0.5rem, 1.6vh, 1.5rem);
    padding-bottom: clamp(1rem, 2vw, 2rem);
    /* The deck owns the screen it is on. With the frame sized to its content,
       a short slide left the site footer's four link columns sitting in frame
       under the card — and a presentation with a footer beside it stops
       reading as a presentation. The section holds the viewport; the frame
       sits in the middle of it and stays content-sized. */
    display: grid;
    align-content: center;
    min-height: calc(100svh - var(--header-height));
}

.deck-frame {
    display: flex;
    flex-direction: column;
    /* A floor the shortest slide can actually reach. At 640px the frame
       reserved space no slide had to fill, `.slide { flex: 1 1 auto }` handed
       the whole surplus to the slide, and with nothing distributing it the
       shortfall pooled as one gap above the controls — 225px of bare
       parchment under slide 5, a third of the frame, on a file that quotes
       "a plant fills the pot it is in" at itself. Do not re-impose a ceiling
       to stop the Next button moving between slides: the note below records
       why that was removed. */
    /* A FLOOR, not a ceiling. The note below is about a max-height, which
       bought the fold by turning the slide into a silent scroll container, and
       it still stands. This is the opposite: a height the short slides grow UP
       to, so a tall slide is never clipped and the chrome stops riding the
       content.

       A reviewer measured what shrink-wrapping costs: "footer-bar tops at
       y=764 / 648 / 697 on desktop — Back and Next jump 116px between slide 1
       and slide 5. Clicking Next moves the Next button out from under the
       pointer." Measured across all thirteen it was 141px on desktop and 137
       at 1920. In vh, so the floor is a share of the screen the deck is being
       read on rather than a number chosen for one monitor. */
    min-height: min(80vh, 760px);
    /* No ceiling, and nothing here hides. An earlier pass capped this frame so
       the deck would fit the fold, and bought that fit by turning the slide
       into a silent scroll container: 13 of 13 slides on a phone hid a mean
       309px, worst 488px, with offsetWidth - clientWidth = 0, so there was not
       even a scrollbar to hint at it. A sheared headline with no cue reads as
       a bug. The fold is not worth a word of the argument. */
    border-radius: var(--radius-lg);
    background: var(--surface-day);
    box-shadow: var(--membrane-day);
    /* The frame's surface is within a few points of the page it sits on, so
       its edge existed only as a shadow. A hairline says where the deck
       ends and the page begins. */
    border: 1px solid color-mix(in srgb, var(--day-rule) 80%, transparent);
    /* clip, not hidden. Both trim the illustration to the rounded corner, but
       `hidden` establishes a scroll container and a scroll container disables
       position:sticky inside it — which is why the controls went off screen on
       the taller slides even after the slide stopped scrolling. `clip` does the
       same trimming without becoming a scrollport. */
    overflow: clip;
}

/* The controls stick instead. That was the real requirement all along — round
   ten's finding was never "the page must not scroll", it was that the Back and
   Next buttons were below the bottom of the window. A long slide now makes the
   PAGE scroll, which is ordinary and expected, while the controls ride the
   bottom of the viewport and stay reachable the whole way down.

   Gated by .dream-loop/deckfold.mjs, which asserts BOTH that the controls are
   on screen and that no slide hides any of its own content. The previous gate
   only measured the box, so it certified a build whose slides were shearing
   their own headlines. */
.deck-frame > .slide {
    flex: 1 1 auto;
    min-height: 0;
    /* The slide gives, so the frame can fit a screen. */
    padding-bottom: clamp(0.75rem, 2vh, 1.5rem);
    /* And its content stands in the middle of the room it has. The frame has
       a floor so Back and Next stay put between slides, and a short slide
       packed at the top of that floor left "260px of empty card", "the bottom
       half of the slide empty — it looks unfinished", in the words of both
       design judges. Centred, the spare room is shared above and below the
       content, the way a slide is composed; the controls do not move. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.deck-frame > .deck-header {
    flex: 0 0 auto;
}

/* NOT sticky. Sticky kept the nav reachable and paid for it in words: an opaque
   bar floating at the window's bottom covers whatever is under it at ANY scroll
   position on a slide taller than the screen, and 22 of 65 slide/shape pairs
   had text sheared behind it. Reserving the bar's height under the slide does
   not help either — that protects the slide's END, and the bar floats over its
   MIDDLE.

   The contract this file already states is "one slide is one screen". A bar at
   the frame's own bottom occludes nothing, and the way to keep it in view is to
   make the slide fit, not to float the bar over the slide. */
.deck-frame > .deck-controls {
    flex: 0 0 auto;
    border-top: 1px solid var(--day-rule-soft);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.deck-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem var(--deck-pad);
    border-bottom: 1px solid var(--day-rule-soft);
    background: color-mix(in srgb, var(--honey) 14%, transparent);
}

.deck-brand {
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--day-ink-soft);
}

.deck-count {
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--day-ink-soft);
    font-variant-numeric: tabular-nums;
}

.deck-count .indicator-current {
    color: var(--copper-ink);
}