/* ═══════════════════════════════════════════════════════════════
   magna-mobile-chips.css — Shared mobile vocabulary
   Floating-glass language matching heliosphere hs-topbar aesthetic.
   Used by: heliosphere, cosmic-forecast, celestial-command.

   ALL rules are inside mobile media queries. Desktop untouched.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    /* ── Floating chip row: top pill bar of metrics ────────── */
    .mm-chip-row {
        position: absolute;
        top: 8px;
        left: 8px;
        right: 8px;
        z-index: 40;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0;
        pointer-events: auto;
    }
    .mm-chip-row::-webkit-scrollbar { display: none; }

    .mm-chip {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 7px 11px;
        min-width: 58px;
        background: rgba(8, 10, 14, 0.55);
        backdrop-filter: blur(20px) saturate(1.3);
        -webkit-backdrop-filter: blur(20px) saturate(1.3);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        font-family: 'DM Mono', monospace;
        color: rgba(255, 255, 255, 0.9);
        white-space: nowrap;
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s;
    }
    .mm-chip:hover,
    .mm-chip.mm-chip-active {
        border-color: rgba(212, 175, 55, 0.5);
        background: rgba(16, 18, 24, 0.7);
    }
    .mm-chip-label {
        font-size: 0.42rem;
        color: rgba(255, 255, 255, 0.45);
        text-transform: uppercase;
        letter-spacing: 1.2px;
        line-height: 1;
    }
    .mm-chip-val {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.1;
    }
    .mm-chip-unit {
        font-size: 0.38rem;
        color: rgba(255, 255, 255, 0.4);
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Alert variants */
    .mm-chip-alert {
        border-color: rgba(220, 38, 38, 0.55);
        background: rgba(28, 8, 8, 0.7);
    }
    .mm-chip-alert .mm-chip-val { color: #fca5a5; }
    .mm-chip-warn {
        border-color: rgba(234, 179, 8, 0.45);
        background: rgba(28, 20, 4, 0.7);
    }
    .mm-chip-warn .mm-chip-val { color: #fde68a; }
    .mm-chip-good {
        border-color: rgba(34, 197, 94, 0.4);
        background: rgba(6, 20, 10, 0.7);
    }
    .mm-chip-good .mm-chip-val { color: #86efac; }


    /* ── Hero zone: the visual that leads the page ─────────── */
    .mm-hero {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        max-height: 78vh;
        overflow: hidden;
        background: radial-gradient(circle at 50% 50%, rgba(20, 24, 36, 0.6) 0%, rgba(3, 5, 8, 0.95) 80%);
    }
    .mm-hero-16x9 { aspect-ratio: 16 / 9; }
    .mm-hero-4x3  { aspect-ratio: 4 / 3; }


    /* ── Bottom sheet: collapsible drawer for secondary content ── */
    .mm-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 35;
        max-height: 78vh;
        background: rgba(8, 10, 14, 0.88);
        backdrop-filter: blur(24px) saturate(1.4);
        -webkit-backdrop-filter: blur(24px) saturate(1.4);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
        /* Collapsed state shows 44px handle ABOVE home indicator */
        transform: translateY(calc(100% - 44px - env(safe-area-inset-bottom, 0px)));
        transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
        display: flex;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mm-sheet.mm-sheet-open {
        transform: translateY(0);
    }
    .mm-sheet-handle {
        flex: 0 0 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .mm-sheet-handle::before {
        content: '';
        width: 36px;
        height: 3px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.25);
    }
    .mm-sheet-title {
        font-family: 'DM Mono', monospace;
        font-size: 0.48rem;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    .mm-sheet-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 16px 24px;
    }


    /* ── Status bar: thin fixed bottom strip (heliosphere pattern) ── */
    .mm-status-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: env(safe-area-inset-bottom, 0px);
        z-index: 30;
        height: 36px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        background: rgba(8, 10, 14, 0.72);
        backdrop-filter: blur(20px) saturate(1.3);
        -webkit-backdrop-filter: blur(20px) saturate(1.3);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        font-family: 'DM Mono', monospace;
        font-size: 0.4rem;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 1px;
        white-space: nowrap;
        overflow: hidden;
    }


    /* ── Accordion: collapse long text into a toggle ───────── */
    .mm-accordion {
        background: rgba(8, 10, 14, 0.5);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        margin: 8px 0;
    }
    .mm-accordion-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        cursor: pointer;
        user-select: none;
        font-family: 'DM Mono', monospace;
        font-size: 0.5rem;
        color: rgba(255, 255, 255, 0.75);
        text-transform: uppercase;
        letter-spacing: 1.4px;
    }
    .mm-accordion-head::after {
        content: '▸';
        color: rgba(212, 175, 55, 0.7);
        transition: transform 0.24s ease;
    }
    .mm-accordion.mm-accordion-open .mm-accordion-head::after {
        transform: rotate(90deg);
    }
    .mm-accordion-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
        padding: 0 14px;
        font-size: 0.8rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.7);
    }
    .mm-accordion.mm-accordion-open .mm-accordion-body {
        max-height: 60vh;
        padding: 4px 14px 14px;
        overflow-y: auto;
    }


    /* ── Swipe deck: horizontal card carousel ──────────────── */
    .mm-swipe-deck {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 4px 12px 12px;
        scrollbar-width: none;
    }
    .mm-swipe-deck::-webkit-scrollbar { display: none; }
    .mm-swipe-card {
        flex: 0 0 82%;
        scroll-snap-align: center;
        background: rgba(12, 14, 20, 0.6);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 10px;
        padding: 14px;
    }


    /* ── Floating anchor: small corner chip (e.g. alert badge) ── */
    .mm-anchor-tl { position: absolute; top: 8px; left: 8px; z-index: 41; }
    .mm-anchor-tr { position: absolute; top: 8px; right: 8px; z-index: 41; }
    .mm-anchor-bl { position: absolute; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); left: 8px; z-index: 41; }
    .mm-anchor-br { position: absolute; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); right: 8px; z-index: 41; }


    /* ── Utility: hide desktop-only elements on mobile ─────── */
    .mm-hide-mobile { display: none !important; }
    .mm-show-mobile { display: block !important; }


    /* ── Nav safe area: ensure content doesn't hide behind unified-nav ── */
    .mm-below-nav { padding-top: 44px; }
}

/* Extra-small phones: tighten further */
@media (max-width: 430px) {
    .mm-chip { min-width: 52px; padding: 6px 9px; }
    .mm-chip-val { font-size: 0.72rem; }
    .mm-chip-label { font-size: 0.38rem; }
    .mm-sheet { max-height: 72vh; }
    .mm-swipe-card { flex-basis: 86%; }
}