/* Shared design tokens — site + check-in consumers */
:root {
    --accent-red: #a30000;
    --retro-blue: #008080;
    --retro-gray: #c0c0c0;
    --win95-teal: #008080;
    --win95-face: #c0c0c0;
    --win95-title: #000080;
    --win95-title-end: #1084d0;
    --text-yellow: #ffff00;
    --text-dim: #d3d3d3;
    --base-font-size: 16px;
    --gutter: 1rem;

    /*
     * Breakpoints — use these numbers in every @media (not the CSS vars; custom
     * media queries are not portable enough yet).
     *   phone:     max-width 480px
     *   phone-up:  min-width 481px   (avoids double-match at exactly 480)
     *   phablet:   640px
     *   tablet:    769px
     *   desktop:   1025px
     * Short desktop height bands: max-height 900px / 720px (with min-width 1025).
     */
    --bp-phone: 480px;
    --bp-phablet: 640px;
    --bp-tablet: 769px;
    --bp-desktop: 1025px;

    /* Safe areas (notch / home indicator / status bar in standalone PWA) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* Radio footer bar + page clearance (single source for layout) */
    --footer-bar: 80px;
    --footer-bar-tablet: 84px;
    --footer-bar-desktop: 90px;
    --footer-bar-phone: 68px;
    --footer-safe: var(--safe-bottom);
    --footer-clearance: calc(var(--footer-bar) + var(--footer-safe));
    /* Popup sits just above the bar */
    --footer-popup-bottom: var(--footer-clearance);

    /*
     * Home desktop panel height — fill available space (live-like ~408–560px),
     * still capped so short laptops don’t clip the footer. Short-height media
     * queries in pages/home.css tighten this further.
     * Chrome estimate: banner + marquee + nav + gaps ≈ 7–8rem.
     */
    --home-panel-max-h: min(560px, calc(100dvh - var(--footer-clearance) - 7rem));
    --home-panel-min-h: min(408px, var(--home-panel-max-h));
    --home-content-max-w: 1600px;

    /* Legacy aliases */
    --footer-height-mobile: var(--footer-bar);
    --footer-height-desktop: var(--footer-bar-desktop);

    /* Site system */
    --site-bg-image: url("/nc_assets/img/background.GIF");
    --site-font: "OCR-A", "Courier New", monospace, "Noto Sans JP", sans-serif;
    /* SPA soft-nav (always available; never put these only in site.css) */
    --spa-load: 0;
    --spa-nav-opacity: 1;
    --spa-nav-sat: 1;
}

/* Align footer token with the bar height used in each media range.
   ≤640px: extra ~20px for the progress + timestamp row under the main controls. */
@media (max-width: 640px) {
    :root {
        --footer-bar: calc(var(--footer-bar-phone) + 20px);
    }
}
@media (min-width: 769px) {
    :root {
        --footer-bar: var(--footer-bar-tablet);
    }
}
@media (min-width: 1025px) {
    :root {
        --footer-bar: var(--footer-bar-desktop);
    }
}

/* Dual-shell + SPA transition — lives in tokens so skin toggles cannot orphan them */
#site-shell[hidden],
#checkin-root[hidden] {
    display: none !important;
}

/*
 * Soft-nav fade: opacity ONLY, and only while html.spa-navigating.
 * Do NOT use filter/transform here — either creates a containing block for
 * position:fixed descendants and breaks Check-In fixed UI / Art popup.
 */
html.spa-navigating #site-main,
html.spa-navigating #checkin-root:not([hidden]) {
    opacity: var(--spa-nav-opacity, 1);
    pointer-events: none;
}

/*
 * Banner + marquee soft-hide MUST live here (always loaded).
 * Check-In disables site.css via SPA skin mode; if is-stashed only lived in
 * site.css, the banner reappeared on the desktop, stole layout height, and
 * offset window drag by ~header height. Clip without display:none so marquee
 * animation state can resume on Home/About.
 */
#site-banner-chrome.is-stashed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    max-width: 1px !important;
    max-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    z-index: -9999 !important;
    flex: 0 0 0 !important;
    contain: strict;
}

/* Art portals — hide off Art; .active open state uses inline styles from art.js */
body:not(.page-art) #art-curator-popup:not(.active),
body:not(.page-art) .art-lightbox,
body.checkin-desktop #art-curator-popup,
body.checkin-desktop .art-lightbox {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Marquee keyframes always available (site.css may load later; never disable) */
@keyframes marquee {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(calc(-100vw - var(--text-width))); }
}

/* Single OCR-A face for all site pages — do not redeclare in page CSS */
@font-face {
    font-family: "OCR-A";
    src: url("/nc_assets/fonts/ocr-a-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "W95FA";
    src: url("/fonts/W95FA.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}