/* ═══════════════════════════════════════════
   shubh-vivah: the card shell (bridge-owned)

   A SCROLL CARD, not a deck (screens.md, "Card contract"): #sv-card is the one
   native scroller, holding the six .screen sections in card order. No section is
   ever display:none for navigation and there is no .screen.active contract here.
   The only hidden section is an empty programme (its own [hidden], its own CSS).

   This file owns: html/body, #sv-card (scroll, snap, the scroll lock until the
   cover tap, the centred column and its inline-size container), .screen's
   positioning, and the card chrome (mute button, scroll hint). It never styles a
   module's classes.
   ═══════════════════════════════════════════ */

html {
    height: 100%;
    background: var(--void);
}

body {
    width: 100%;                     /* reset.css sets 100vw, which counts a desktop scrollbar */
    height: 100%;
    min-height: 0;
    overflow: hidden;                /* the card scrolls, never the page */
    background: var(--void);         /* desktop gutters */
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ───── The card: the one scroller ─────
   Locked (overflow-y hidden) until app.js's __svCardOpen() writes
   data-sv-opened="true" at the cover tap. Every page is a 100dvh snap area
   (scroll-snap-align: start; scroll-snap-stop: always, in the modules), so one
   swipe moves exactly one page. The column is the inline-size container that
   every module's cqi sizes resolve against (tokens.css). */
.sv-card {
    position: relative;
    width: 100%;
    max-width: var(--card-max);
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
    container-type: inline-size;
    background: var(--bg-primary);
    scrollbar-width: none;           /* a desktop scrollbar would narrow the column (and every cqi) */
    -webkit-tap-highlight-color: transparent;
}

.sv-card::-webkit-scrollbar {
    display: none;
}

.sv-card[data-sv-opened="true"] {
    overflow-y: auto;
}

/* A later section paints above an earlier set's sticky stack. */
.screen {
    position: relative;
}

/* ───── Chrome: laid over the card's column, above every page ───── */
.sv-chrome {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: var(--card-max);
    margin: 0 auto;
    pointer-events: none;
    z-index: var(--z-chrome);
}

@keyframes sv-chrome-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Mute: fixed top-right, a 48 x 48 hit area holding a 38 px glass disc.
   Shown (hidden removed) 600 ms after the cover tap; fades in on display. */
.sv-mute {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 10px;
    width: var(--hit-min);
    height: var(--hit-min);
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--chrome-ink);
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    animation: sv-chrome-fade-in 400ms var(--ease-silk) both;
}

.sv-mute[hidden] {
    display: none;
}

.sv-mute-disc {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    box-shadow: var(--chrome-shadow);
    transition: transform 160ms var(--ease-snap);
}

.sv-mute:active .sv-mute-disc {
    transform: scale(0.94);
}

.sv-mute-icon {
    display: block;
    width: 20px;
    height: 20px;
}

.sv-mute-icon--off,
.sv-mute[aria-pressed="true"] .sv-mute-icon--on {
    display: none;
}

.sv-mute[aria-pressed="true"] .sv-mute-icon--off {
    display: block;
}

.sv-mute:focus {
    outline: none;
}

.sv-mute:focus-visible .sv-mute-disc {
    outline: 2px solid var(--accent-warm);
    outline-offset: 3px;
}

/* Scroll hint: a cream pill at bottom centre, a chevron above "Swipe up".
   Decorative (aria-hidden) and click-through; data-reveel-avoid in the markup
   keeps the platform badge off it while it is visible. */
.sv-hint {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    height: 44px;
    padding: 0 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 22px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    box-shadow: var(--chrome-shadow);
    color: var(--chrome-ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--type-hint);
    line-height: 1;
    letter-spacing: var(--tracking-kicker);
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms var(--ease-silk), visibility 0s linear 250ms;
}

.sv-hint.sv-hint--shown {
    opacity: 1;
    visibility: visible;
    transition: opacity 400ms var(--ease-silk), visibility 0s;
}

.sv-hint-chevron {
    display: block;
    flex: none;
    width: 14px;
    height: 14px;
    animation: sv-hint-bob 1.6s var(--ease-breath) infinite alternate paused;
}

.sv-hint.sv-hint--shown .sv-hint-chevron {
    animation-play-state: running;
}

.sv-hint-text {
    display: block;
    padding-left: var(--tracking-kicker);   /* optically centre the tracked caps */
}

@keyframes sv-hint-bob {
    from { transform: translateY(-3px); }   /* a 6 px travel, centred in the gap above the words */
    to { transform: translateY(3px); }
}

/* ───── Reduced motion: the hint does not bob; chrome fades stay (opacity only) ───── */
@media (prefers-reduced-motion: reduce) {
    .sv-hint-chevron {
        animation: none;
    }
    .sv-mute-disc {
        transition: none;
    }
}