/* ================================================================
   mobile.css — Mobile Web Overrides (orientation: portrait)
   Loaded only in index.html for the mobile web version.
   Does NOT affect desktop sidebar or app.html (which uses app.css).
   ================================================================ */

@media (orientation: portrait) {

    /* ── Panel Content: hidden when minimized, visible when expanded ── */
    #panel-content {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        padding-bottom: 80px; /* space for fixed ad bar */
    }
    #panel.expanded #panel-content {
        opacity: 1;
        pointer-events: auto;
    }

    /* ── Panel Footer (WDTEC): visible on mobile web ── */
    #panel-footer {
        display: block;
    }

    /* ── Segmented Controls: compact, right-aligned, larger ── */
    .seg-compact { flex: 0 1 auto; }
    .seg-compact .seg-group { min-width: 200px; height: 36px; }
    .seg-compact .seg-btn { font-size: 13px; padding: 0 10px; }

    /* ── Layer Strip: 4-column grid ── */
    #layer-strip {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        row-gap: 10px;
        padding: 20px 0 20px;
        border-bottom: none;
        margin-bottom: 0;
    }

    /* ── Layer Buttons: square tiles ── */
    .layer-btn {
        flex-direction: column; align-items: center;
        justify-content: center; gap: 10px;
        aspect-ratio: 1;
        border-radius: 14px;
        border-color: var(--layer-btn-border);
        background: var(--layer-btn-bg);
        padding: 6px 4px 8px;
        overflow: hidden;
    }
    .layer-btn.active {
        background: var(--layer-active-bg);
        border-color: var(--layer-active-border);
    }
    .layer-btn.active::before { display: none; }

    /* ── Layer Icon: sized for grid tiles ── */
    .layer-icon { width: 26px; height: 26px; }

    /* ── Layer Label: small uppercase below icon ── */
    .layer-label {
        font-size: 9px; font-weight: 400;
        text-align: center; text-transform: uppercase;
        letter-spacing: 0.02em;
        overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; max-width: 100%;
    }

    /* ── Info pill: positioned below the button, outside the border ── */
    .layer-btn.active:has(.layer-info-dot) {
        overflow: visible;
        margin-bottom: 20px;
        padding-right: 6px;
    }
    .layer-info-dot {
        position: absolute;
        bottom: -26px; left: 50%; transform: translateX(-50%);
        right: auto; top: auto;
        height: 16px;
        padding: 0 10px;
    }

    /* ── Legend: closer to searchbar ── */
    #legend-container { top: 62px; }
    :fullscreen #legend-container { top: calc(62px + env(safe-area-inset-top, 0px)); }

    /* ── Search bar: leave room for fullscreen + globe buttons on the right ── */
    #map-search {
        left: 12px; right: 112px;
        transform: none; width: auto; max-width: none;
    }
    .map-search-item { padding: 12px 18px; gap: 3px; }
    .map-search-item-name { font-size: 16px; }
    .map-search-item-sub  { font-size: 14px; }

    /* ── Fullscreen button: force GPU layer so backdrop-filter matches searchbar ── */
    #fullscreen-btn {
        -webkit-transform: translateZ(0);
    }
}