/* ==========================================================
   SPA CORE — ENTERPRISE STANDARD
   styles/spa.css
   ==========================================================
   Responsibility:
   - Design tokens (colors, spacing, breakpoints, safe-area).
   - Global reset.
   - App shell + page structure.
   - Mount containers (topbar / hero / calendar / match / footer).
   - Shell-level layout coordinator vars consumed by fragments.
   - Responsive utilities.
   ========================================================== */

/* ==========================================================
   CSS CUSTOM PROPERTIES — DESIGN TOKENS
   ========================================================== */

:root {
    /* Viewport */
    --vp-width: 100vw;
    --vp-height: 100vh;
    --vp-height-dynamic: 100dvh;
    --vp-min-height: 100svh;

    /* Safe area (CSS fallback; JS overrides at runtime) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* Container widths */
    --container-max-mobile: 480px;
    --container-max-tablet: 768px;
    --container-max-desktop: 1024px;

    /* Breakpoints (documentation only — media queries are literal) */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 375px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;

    /* Typography scale */
    --font-xs: clamp(8px, 1.5vw, 10px);
    --font-sm: clamp(10px, 2vw, 12px);
    --font-md: clamp(12px, 2.5vw, 16px);
    --font-lg: clamp(16px, 3vw, 20px);
    --font-xl: clamp(20px, 4vw, 28px);

    /* Spacing scale */
    --space-xs: clamp(2px, 0.5vw, 4px);
    --space-sm: clamp(4px, 1vw, 8px);
    --space-md: clamp(8px, 2vw, 16px);
    --space-lg: clamp(12px, 3vw, 24px);
    --space-xl: clamp(16px, 4vw, 32px);

    /* ==========================================================
       SHELL LAYOUT CONTRACT
       These are written at runtime by viewport/rootlayout.js.
       Defaults below are the design-time fallbacks.
       ========================================================== */

    --viewport-height: 100dvh;
    --available-height: auto;
    --header-stack-bottom: 358px;
    /* topbar 64 + hero 240 + calendar 52 + safe-top fallback */
    --scroll-area-height: auto;

    /* ==========================================================
       MATCHCARD SCALE (small viewport adaptation)
       Written by JS: min(1, 100vw / 390). Default 1.
       ========================================================== */
    --matchcard-scale: 1;

    /* Layout tokens (written by viewport/layoutengine.js) */
    --layout-columns: 1;
    --layout-gap: 8px;
    --layout-max-width: 480px;

    /* ==========================================================
       FADE BAND
       Height of the vertical fade where content meets the
       bottom edge of the fixed header stack.
       ========================================================== */
    --fade-band: 24px;
}

/* ==========================================================
   GLOBAL RESET
   ========================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    min-height: var(--vp-min-height);
    overflow: hidden;
    /* page does not scroll — the fixed panel does */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    width: 100%;
    background: #000000;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
}

/* ==========================================================
   APP SHELL — MASTER CONTAINER
   ========================================================== */

#app-shell {
    position: relative;
    width: 100%;
    height: var(--vp-height-dynamic);
    background: #000000;
    overflow: hidden;
    margin: 0;
}

/* ==========================================================
   HEADER STACK — FIXED
   Contains topbar + hero + calendar.
   Sits above the scroll panel. Content scrolls underneath.

   NOTE:
   The three fragments inside are position: absolute and
   stacked via their own top values (0 / 65 / 306). They
   are anchored to this element (which is a containing block
   for absolute descendants because it is position: fixed).

   Because all children are out of flow, this element's
   intrinsic height would be 0. We declare an explicit
   height so the box occupies its real size in the layout
   tree and future features (resize observers, hide-on-scroll)
   measure correctly.
   ========================================================== */

#headerStack {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--header-stack-bottom, 358px);
    z-index: 1000;
    display: block;
    background: #000000;
    /* isolates paint — prevents bleed-through on iOS */
    transform: translateZ(0);
    will-change: transform;
}

/* ==========================================================
   PAGE CONTENT — FIXED SCROLL PANEL
   Pinned below the header stack. Scrolls internally.
   The mask-image in match.css fades content at its top edge.
   ========================================================== */

#pageContent {
    position: fixed;
    top: var(--header-stack-bottom);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* smooth momentum scroll on iOS */
    overscroll-behavior: contain;
    /* prevents scroll chaining to the page */
}

/* ==========================================================
   MOUNT CONTAINERS
   Each mount declares only its height contribution.
   Absolute positioning happens inside each fragment.
   ========================================================== */

#topbarMount {
    width: 100%;
    position: relative;
    z-index: 1000;
    padding-top: var(--safe-top);
    flex-shrink: 0;
}

#heroMount {
    width: 100%;
    position: relative;
    flex-shrink: 0;
}

#calendarMount {
    width: 100%;
    position: relative;
    z-index: 500;
    flex-shrink: 0;
}

#matchMount {
    width: 100%;
    position: relative;
    padding-bottom: calc(var(--safe-bottom) + 80px);
    /* room for the floating footer dock */
}

/* Footer floats as its own fixed element — no flow impact */
#footerMount {
    width: 100%;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
    /* children re-enable as needed */
    padding-bottom: var(--safe-bottom);
}

#footerMount>* {
    pointer-events: auto;
}

/* ==========================================================
   RESPONSIVE — App Shell
   ========================================================== */

@media (min-width: 768px) {
    #app-shell {
        height: 100dvh;
    }
}

/* ==========================================================
   LANDSCAPE — SHORT VIEWPORTS
   ========================================================== */

@media (orientation: landscape) and (max-height: 500px) {
    #app-shell {
        height: 100dvh;
    }
}

@media (orientation: landscape) and (max-height: 400px) {
    #pageContent {
        font-size: 0.9rem;
    }
}

/* ==========================================================
   HIGH DPI DISPLAY SUPPORT
   ========================================================== */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ==========================================================
   APPLICATION THEME
   ========================================================== */

body,
#app-shell {
    background: #000000;
}

/* ==========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================
   PRINT SUPPORT
   ========================================================== */

@media print {
    #app-shell {
        width: 100%;
        max-width: none;
        height: auto;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ==========================================================
   RESPONSIVE VISIBILITY UTILITIES
   ========================================================== */

.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: initial;
    }
}

.hide-tablet {
    display: initial;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none;
    }
}

.hide-desktop {
    display: initial;
}

@media (min-width: 1024px) {
    .hide-desktop {
        display: none;
    }
}

.show-mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .show-mobile-only {
        display: none;
    }
}

.show-tablet-only {
    display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .show-tablet-only {
        display: block;
    }
}

.show-desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .show-desktop-only {
        display: block;
    }
}