/* ==================================================================
   fix-display.css — deck-16795 Shaggy Dog Market · 2026-11-02
   Display standardization: safe vertical centering of the whole
   meaningful composition (kicker/title/lead/body/cards/notes) between
   the fixed global masthead and global footer, compacting artificially
   stretched panels. Original style.css is unchanged; these are scoped
   overrides loaded after it.
   ================================================================== */

/* Generic content group: fits -> margin-block:auto centers the whole
   group between global chrome; too tall -> auto margins collapse to 0
   and content flows from the top, fully reachable by native scroll. */
.cc{display:flex;flex-direction:column;gap:clamp(10px,1.4vh,20px);margin-block:auto;min-height:0;flex:0 1 auto}

/* Slide footers on centered slides sit directly after the content group
   (the group's own auto margins own the free space). */
.slide-gap .slide-foot,
.slide-system .slide-foot,
.slide-proof .slide-foot,
.slide-roadmap .slide-foot,
.slide-engage .slide-foot,
.slide-close .slide-foot{margin-top:0}

/* Slide 3 (Gap): center the journey group + stats band; the flow grid
   no longer stretches to fill. */
.slide-gap .gap-flow{flex:0 0 auto}

/* Slide 5 (System): compact the six service cards instead of stretching
   them across the full stage height; keep rows/columns balanced. */
.slide-system .system-grid{flex:0 0 auto}
.slide-system .system-foot{flex:0 0 auto}

/* Slide 6 (Proof): size the before/after stage from the available height
   between the global chrome bars and center it in its frame, so neither
   side gets cut and no asymmetric dark strip remains. */
.slide-proof .ba-stage{width:min(100%,calc((100vh - var(--chrome-top) - var(--chrome-bottom) - 292px)*1.6));height:auto;margin-inline:auto}

/* Slide 7 (Roadmap): compact the three phase cards and the foot band. */
.slide-roadmap .road-grid{flex:0 0 auto}
.slide-roadmap .road-foot{flex:0 0 auto}

/* Slide 8 (Engagement): compact the three plan cards. */
.slide-engage .plans{flex:0 0 auto}

/* Slide 9 (Close): center the rep/scheduler composition between the
   global chrome; grid keeps its own column alignment. */
.slide-close .close-grid{flex:0 0 auto}

/* Slide 9 (Close): the .close-scrim layers at z-index:1 above the
   auto-stacked .slide-inner, dimming the whole composition. Lift the
   content group above the scrim so text, portrait and scheduler read
   at true contrast (scrim remains as the backdrop). */
.slide-close .slide-inner{z-index:2}

/* Narrow phones: keep the centered-group pattern but let tall stacks
   flow from the top exactly as the safe-centering rule requires. */
@media (max-width:860px){
  .cc{gap:clamp(12px,2vh,22px)}
}

/* ==================================================================
   Slide 3 containment repair (2026-11-02, post-live NO_PASS): the two
   .audit-tag phone callouts were absolutely positioned at left:82% of
   the phone figure and extended rightward over the TODAY six-step
   journey list, obscuring steps 02 and 05/06. Contain both callouts in
   a note column INSIDE the phone evidence figure so the callout text
   and every journey step are simultaneously visible and contained.
   ================================================================== */

/* Wide layouts: the phone evidence figure becomes a two-column grid —
   live-capture shell and caption stay in column 1; the two audit notes
   occupy a fully contained note column in column 2. */
.slide-gap .gap-phone{display:grid;grid-template-columns:clamp(140px,12.4vw,214px) minmax(150px,10.5vw);gap:8px 12px;width:auto;align-content:start}
.slide-gap .gap-phone .phone-shell{grid-column:1;grid-row:1}
.slide-gap .gap-phone figcaption{grid-column:1;grid-row:2;align-self:start}
.slide-gap .audit-tag{position:static;width:auto;margin:0}
.slide-gap .audit-tag.tag-a{grid-column:2;grid-row:1;align-self:start;margin-top:26px}
.slide-gap .audit-tag.tag-b{grid-column:2;grid-row:2;align-self:end}

/* Single-column layouts (tablet/phone): the base stylesheet hides the
   callouts entirely. They are meaningful audit text, so keep them — now
   safely contained as a stacked pair under the live capture instead of
   floating over the journey steps. */
@media (max-width:1100px){
  .slide-gap .gap-phone{display:flex;flex-direction:column;gap:8px}
  .slide-gap .audit-tag{display:block}
}