/**
 * foundation.css
 * Part of the QuarterUp design system. See docs/design-language.md.
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/press-start-2p-latin.woff2) format('woff2');
}

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

:root {
    /* === Greens (primary brand) === */
    --green:        #00ff88;
    --green-deep:   #00cc6a;                          /* hover/pressed */
    --green-rgb:    0 255 136;                        /* compose translucent variants */
    --teal-deep:        #1e5c51;                      /* btn-secondary base */
    --teal-deep-hover:  #214a42;                      /* btn-secondary hover */
    --green-dim:    rgb(var(--green-rgb) / 0.6);
    --green-glow:   rgb(var(--green-rgb) / 0.4);
    --green-veil:   rgb(var(--green-rgb) / 0.3);
    --green-soft:   rgb(var(--green-rgb) / 0.2);
    --green-faint:  rgb(var(--green-rgb) / 0.15);
    --green-tint:   rgb(var(--green-rgb) / 0.1);
    --green-ghost:  rgb(var(--green-rgb) / 0.06);

    /* === Status / accent colors === */
    --gold:         #ffd700;
    --gold-rgb:     255 215 0;
    --yellow:       #ffc107;                          /* warning */
    --yellow-rgb:   255 193 7;
    --red:          #ff4444;                          /* danger */
    --red-rgb:      255 68 68;
    --blue:         #0088ff;                          /* info / link */
    --blue-rgb:     0 136 255;
    --purple:       #8a2be2;                          /* special accent */
    --purple-rgb:   138 43 226;
    --purple-bright: #c766ff;                         /* badge / progress highlight */
    --purple-bright-rgb: 199 102 255;
    --gold-pale:    #fff2a8;                          /* coin highlight */
    --gold-deep:    #b38f00;                          /* coin shadow */

    /* === Backgrounds === */
    --bg-deep:      #0a0a15;
    --bg-deep-rgb:  10 10 21;
    --bg-mid:       #1a1a2e;
    --bg-mid-rgb:   26 26 46;
    --bg-light:     #16213e;                          /* gradients, lifted cards */
    --bg-light-rgb: 22 33 62;
    --surface-card: #12121f;                          /* home/select v2 surface */

    /* === Text + greys === */
    --white:        #fff;
    --black:        #000;
    --gray-light:   #ccc;
    --gray-soft:    #aaa;
    --gray-muted:   #888;
    --gray-muted-rgb: 136 136 136;
    --gray-faint:   #666;                             /* unifies #555 + #666 */
    --gray-faint-rgb: 102 102 102;
    --gray-dark:    #333;                             /* unifies #333 + #444 */

    /* === Translucent compose primitives + named stops === */
    --white-rgb:    255 255 255;
    --black-rgb:    0 0 0;
    --white-strong: rgb(var(--white-rgb) / 0.7);
    --white-glow:   rgb(var(--white-rgb) / 0.5);
    --white-soft:   rgb(var(--white-rgb) / 0.2);
    --white-faint:  rgb(var(--white-rgb) / 0.1);
    --white-tint:   rgb(var(--white-rgb) / 0.05);
    --black-veil:   rgb(var(--black-rgb) / 0.5);
    --black-soft:   rgb(var(--black-rgb) / 0.3);
    --black-tint:   rgb(var(--black-rgb) / 0.2);

    /* === Fonts === */
    /* Floating overlays share one bottom-right stack: sticky bars raise the
       floor, the session dock sits on the floor, the feedback bubble above the
       dock, toasts above the bubble. Every fixed overlay reads these instead
       of choosing its own inset, so they cannot land on top of each other. */
    --overlay-edge:  20px;
    --overlay-gap:   12px;
    --overlay-floor: var(--overlay-edge);
    --dock-height:   80px;
    --fab-size:      50px;
    --z-sticky-bar:  20;
    --z-dock:        1001;
    --z-fab:         1002;
    --z-toast:       10000;
    --font-arcade:  'Press Start 2P', monospace;
    --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

    /* === Design-system refinement layer (docs/design-system) === */

    /* Semantic aliases */
    --surface-page:    var(--bg-deep);
    --surface-raised:  var(--bg-mid);
    --surface-overlay: rgb(var(--bg-deep-rgb) / 0.85);   /* glass headers/docks (+ blur 12px) */
    --text-primary:    var(--white);
    --text-secondary:  var(--gray-light);
    --text-muted:      var(--gray-muted);
    --text-accent:     var(--green);
    --border-default:  rgb(var(--white-rgb) / 0.08);     /* THE card/divider border */
    --border-strong:   rgb(var(--white-rgb) / 0.14);     /* inputs, hovered cards */
    --border-active:   var(--green-veil);                /* selected / live states */

    /* Spacing — 4px scale. Every padding/gap/margin snaps to these. */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px;  --space-10: 40px;
    --space-12: 48px; --space-16: 64px;

    /* Radii — three stops + pill, nothing in between */
    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;

    /* Elevation. Dark shadow = depth. Glow has two meanings: focus and live. */
    --shadow-card:   0 2px 8px rgb(var(--black-rgb) / 0.3);
    --shadow-raised: 0 8px 24px rgb(var(--black-rgb) / 0.4);
    --shadow-modal:  0 16px 48px rgb(var(--black-rgb) / 0.6);
    --glow-focus:    0 0 0 3px rgb(var(--green-rgb) / 0.25);
    --glow-live:     0 0 24px rgb(var(--green-rgb) / 0.35);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 0.15s;
    --dur-med:  0.3s;
    --lift-hover: translateY(-2px);                     /* tokens/spacing.css; missing from foundation-additions */

    /* Type scale (Press Start 2P sizes; pair with line-height 1.5) */
    /* Press Start 2P: only multiples of 4px are crisp on 2x displays */
    --text-display: 32px; --text-title: 24px; --text-heading: 16px; --text-label: 12px; --text-label-touch: 16px; --text-micro: 8px;
    --text-eyebrow: 11px; /* mono uppercase letter-spaced — eyebrows/tags/table headers are NOT arcade font */
    --text-body-lg: 17px; --text-body: 15px; --text-body-sm: 13px; --text-caption: 12px;
    --text-score-lg: 24px; --text-score: 16px; --text-score-sm: 12px; /* score-sm: tokens/typography.css; missing from foundation-additions */
}

html {
    background: var(--bg-mid);
    overscroll-behavior: none;
    /* Prevent double-tap zoom on mobile while preserving pinch zoom */
    touch-action: manipulation;
}

body {
    font-family: var(--font-mono);
    background: linear-gradient(135deg, var(--bg-mid), var(--bg-light));
    color: var(--white);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px;
    padding-bottom: calc(20px + constant(safe-area-inset-bottom));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    /* Hidden until auth is confirmed (see body.authenticated below) */
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* iOS Safari: Force nav bar to stay visible to eliminate bottom touch dead zone */
@supports (-webkit-touch-callout: none) {
    html {
        height: 100%;
        overflow: hidden;
    }
    body {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* PWA/Standalone mode: Need safe-area-inset-top for status bar/Dynamic Island,
   but NOT bottom since viewport already excludes home indicator area */
html.standalone-mode,
body.standalone-mode {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
}

body.standalone-mode {
    padding: 20px !important;
    padding-top: calc(0px + env(safe-area-inset-top)) !important;
}

/* Now Playing view needs safe area for Dynamic Island (dialogs pad their own panel) */
body.standalone-mode .now-playing-view {
    padding-top: calc(20px + env(safe-area-inset-top)) !important;
}

/* Prevent iOS zoom on input focus (requires font-size >= 16px) */
input, select, textarea {
    font-size: 16px !important;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    margin-left: 190px;             /* room for fixed sidebar; mobile resets to 0 */
    transition: margin-left 0.3s ease;
}

.header {
    text-align: center;
    margin-bottom: 20px;
}

.header h1 {
    font-size: 2rem;
    color: var(--green);
    text-shadow: 0 0 20px var(--green);
    margin-bottom: 0;
}

body.sidebar-collapsed .container {
    margin-left: 0;
}

body.sidebar-hidden .container {
    margin-left: 0;
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

@media (max-width: 768px)  {
/* Reduce top padding on mobile - header ::before covers the gap */
    body {
        padding-top: 0;
    }
    /* But standalone mode needs safe area for Dynamic Island */
    body.standalone-mode {
        padding-top: env(safe-area-inset-top) !important;
    }

    /* PWA/Standalone mode: iOS already excludes safe areas from viewport */
    body.standalone-mode .mobile-status-bar {
        bottom: 0 !important;
    }

    /* Container on mobile: drop sidebar margin + add bottom padding for status bar */
    .container {
        margin-left: 0 !important;
        padding-bottom: calc(60px + constant(safe-area-inset-bottom));
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }

    /* PWA/Standalone mode: iOS already excludes safe areas from viewport */
    body.standalone-mode .container {
        padding-bottom: 60px !important;
    }

    /* Hide burger icon when menu is expanded */
    body.mobile-menu-open .burger-menu {
        display: none;
    }

    /* Mobile top bar: glass (design-system T05) */
    .header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 5px;
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--surface-overlay);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border-default);
        padding: 10px 0;
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Extend header background to top of viewport (covers body padding + safe area) */
    .header::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        /* 20px body padding + safe area inset */
        height: calc(20px + constant(safe-area-inset-top));
        height: calc(20px + env(safe-area-inset-top));
        background: var(--surface-overlay);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* PWA/Standalone mode: Need safe-area for status bar/Dynamic Island */
    body.standalone-mode .header {
        top: env(safe-area-inset-top) !important;
    }
    body.standalone-mode .header::before {
        /* Extend into safe area to cover content scrolling behind Dynamic Island */
        height: calc(20px + env(safe-area-inset-top)) !important;
    }

    .header h1 {
        font-size: 1.1rem;
        margin: 0.3rem 0;
    }

    /* PWA/Standalone mode: Add safe area for Dynamic Island */
    body.standalone-mode .sidebar-close-mobile {
        top: calc(15px + env(safe-area-inset-top));
    }
    body.standalone-mode .sidebar-content {
        padding-top: calc(60px + env(safe-area-inset-top));
    }

    body.sidebar-collapsed .container {
        margin-left: 0;
    }

    /* Add padding at bottom to account for status bar */
    body.mister-view-active .container {
        padding-bottom: 60px;
    }

    /* Override desktop rules that hide filter buttons based on sidebar state */
    body:not(.sidebar-collapsed) #filterToggleBtn,
    body.sidebar-collapsed #filterToggleBtn,
    body:not(.sidebar-collapsed) .select-filter-btn,
    body.sidebar-collapsed .select-filter-btn {
        display: inline-flex !important;
    }

    /* PWA/Standalone mode: iOS already excludes safe areas from viewport */
    body.standalone-mode .feedback-float {
        bottom: 15px !important;
    }}

/* Smaller screens - extra mobile optimizations */

@media (max-width: 480px)  {
.header h1 {
        font-size: 1rem;
    }}

body.authenticated {
    opacity: 1;
}

/* Hide admin-only elements for non-admin users */
body:not(.is-admin) [data-admin-only] {
    display: none !important;
}

/* Hide auth-only elements for non-authenticated users */
body:not(.authenticated) [data-auth-only] {
    display: none !important;
}

/* Hide Actions section when empty (non-admin in Organize view) */
body:not(.is-admin):not(.select-view-active) #actionsLabel,
body:not(.is-admin):not(.select-view-active) #actionsSection {
    display: none !important;
}

/* Hide original filter dropdowns in header on desktop when sidebar has filters */
body:not(.sidebar-collapsed) .search-filters-container .multi-select-container {
    display: none;
}

/* When sidebar is open, hide Filters button and make search full width */
body:not(.sidebar-collapsed) #filterToggleBtn {
    display: none;
}

body:not(.sidebar-collapsed) .select-filter-btn {
    display: none !important;
}

/* Sidebar collapsed state - show Filters button instead of inline filters */
body.sidebar-collapsed .search-filters-container .multi-select-container {
    display: none;
}

body.sidebar-collapsed #filterToggleBtn {
    display: inline-flex;
}

/* Hide sidebar filters when in profile view, but keep navigation and auth */
body.profile-view-active .sidebar-top .sidebar-section-group:not(:first-child) {
    display: none !important;
}

/* Reduced-motion safety net.
 *
 * Honors the user's system-level `prefers-reduced-motion: reduce`
 * preference for any animation or transition that doesn't already have
 * a per-rule override. Per-rule overrides (in views/) keep their
 * specific behavior because their selectors have higher specificity
 * than `*` — this rule picks up the gaps without overriding intentional
 * handling.
 *
 * Pattern: shrink durations to ~0 rather than `animation: none`, so
 * keyframe end-states still apply (e.g., a slide-in still reveals its
 * content; it just appears instantly).
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms;
        animation-iteration-count: 1;
        transition-duration: 0.001ms;
        scroll-behavior: auto;
    }
}