/*
 * BallnX mobile-premium design tokens
 * ------------------------------------------------------------------
 * Sprint mobile-ux-premium-p0 (2026-05-14) — Linear-inspired baseline
 * for mobile surfaces. Tokens defined here are the contract that
 * downstream sprints (P1 card_detail, P2 me_collection) reproduce so
 * the system stays cohesive without each surface re-inventing values.
 *
 * Anything that would otherwise be a magic number on a mobile surface
 * (spacing, sheet animation, touch target floor, safe-area padding,
 * mobile typography scale) is exposed as a CSS custom property so it
 * can be edited once here and propagate everywhere.
 *
 * Loaded unconditionally from base.html. Custom properties are inert
 * until used — zero cost for pages that don't reference them.
 *
 * Design contract documented at docs/mobile_premium_design_tokens.md.
 */

:root {
    /* Spacing scale — rem-relative, 4-pt grid */
    --mp-space-1: 0.25rem;  /*  4px */
    --mp-space-2: 0.5rem;   /*  8px */
    --mp-space-3: 0.75rem;  /* 12px */
    --mp-space-4: 1rem;     /* 16px */
    --mp-space-5: 1.5rem;   /* 24px */
    --mp-space-6: 2rem;     /* 32px */
    --mp-space-7: 3rem;     /* 48px */

    /* Bottom-sheet shape + motion */
    --mp-sheet-radius: 16px;
    --mp-sheet-max-height: 80vh;
    --mp-sheet-duration: 0.28s;
    --mp-sheet-easing: cubic-bezier(0.22, 1, 0.36, 1);  /* ease-out feel */
    --mp-sheet-handle-width: 3rem;
    --mp-sheet-handle-height: 4px;
    --mp-sheet-handle-color: rgba(255, 255, 255, 0.18);

    /* Backdrop scrim */
    --mp-backdrop-color: rgba(0, 0, 0, 0.55);
    --mp-backdrop-blur: 4px;
    --mp-backdrop-duration: 0.2s;

    /* Mobile typography scale (smaller than desktop, denser line-height) */
    --mp-font-h1-size: 1.625rem;
    --mp-font-h1-family: 'Instrument Serif', serif;
    --mp-font-h1-style: italic;
    --mp-font-h1-weight: 400;
    --mp-font-body-size: 0.9rem;
    --mp-font-body-family: 'Inter', sans-serif;
    --mp-font-small-size: 0.78rem;

    /* Touch targets — iOS HIG floor */
    --mp-touch-min: 44px;

    /* Sticky CTA bar in sheet — respect iPhone notch via safe-area inset */
    --mp-sticky-cta-padding-y: 1rem;
    --mp-sticky-cta-padding-x: 1rem;
    --mp-safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Sheet z-index layering (backdrop below sheet, sheet below toasts) */
    --mp-sheet-backdrop-z: 90;
    --mp-sheet-z: 100;
}

/*
 * Reusable bottom-sheet pattern.
 * P0 identify_upload uses these classes plus surface-specific
 * positioning overrides on .id-crop-choice / .id-drag-shell. P1 + P2
 * should use these classes directly when adding their own sheets.
 *
 * Pattern:
 *   <div class="mp-sheet-backdrop" data-sheet-state="closed"></div>
 *   <div class="mp-sheet" data-sheet-state="closed"> ... </div>
 *
 * JS toggles data-sheet-state="open" on both elements simultaneously.
 */
@media (max-width: 600px) {
    .mp-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: var(--mp-backdrop-color);
        backdrop-filter: blur(var(--mp-backdrop-blur));
        -webkit-backdrop-filter: blur(var(--mp-backdrop-blur));
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--mp-backdrop-duration) ease-out;
        z-index: var(--mp-sheet-backdrop-z);
    }
    .mp-sheet-backdrop[data-sheet-state="open"] {
        opacity: 1;
        pointer-events: auto;
    }

    .mp-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: var(--mp-sheet-max-height);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: var(--mp-sheet-radius) var(--mp-sheet-radius) 0 0;
        transform: translateY(100%);
        transition: transform var(--mp-sheet-duration) var(--mp-sheet-easing);
        z-index: var(--mp-sheet-z);
        padding-bottom: calc(var(--mp-sticky-cta-padding-y) + var(--mp-safe-bottom));
    }
    .mp-sheet[data-sheet-state="open"] {
        transform: translateY(0);
    }
    /* Handle bar (the iOS-familiar pill at top of the sheet). */
    .mp-sheet::before {
        content: "";
        position: sticky;
        top: 0;
        display: block;
        width: var(--mp-sheet-handle-width);
        height: var(--mp-sheet-handle-height);
        margin: var(--mp-space-3) auto var(--mp-space-2);
        background: var(--mp-sheet-handle-color);
        border-radius: 999px;
    }
}

/* Accessibility — honor user OS-level reduced-motion preference.
   The animation collapses to an instant state swap; opacity + transform
   transitions are disabled so the sheet appears/disappears without
   movement, which is critical for vestibular-disorder users. */
@media (prefers-reduced-motion: reduce) {
    .mp-sheet,
    .mp-sheet-backdrop {
        transition: none !important;
    }
}

/* Body scroll lock while a sheet is open. JS toggles this class on
   <body>; we use a class (not inline style) so future surfaces can
   compose with it without fighting inline styles. */
body.mp-sheet-locked {
    overflow: hidden;
    touch-action: none;
}