/* Part of the mobile_premium cascade — see mobile_premium__focus-dive.css for the cascade header. */

/* ─── STATE-MACHINE STYLES ─────────────────────────── */
@media (max-width: 640px) {
    body.is-active #canvas-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        z-index: var(--z-base);
        overflow: hidden;
        overscroll-behavior: none;
        scrollbar-width: none;
    }

    body.is-active #canvas-container::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    body.is-active:is(
            [data-panel-surface='focus-search'],
            [data-panel-surface='map-focus-search']
        )
        #canvas-container {
        pointer-events: none;
    }

    /* Primary sheet base styling */
    body.is-active .info-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        top: auto;
        height: auto;
        background: var(--glass-bg-deep);
        backdrop-filter: blur(var(--glass-blur-deep));
        -webkit-backdrop-filter: blur(var(--glass-blur-deep));
        border-top: var(--glass-border-glow);
        border-radius: var(--glass-radius-panel) var(--glass-radius-panel) 0 0;
        z-index: var(--z-overlay);
        transition:
            transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.3s ease;
        overflow: hidden;
        display: none; /* Shown by specific state gates below */
    }

    /* 2. IDLE STATE */
    body.is-active[data-panel-surface='idle'] .info-panel {
        display: block;
        transform: translate3d(0, 0, 0);
        opacity: 1;
        pointer-events: auto;
        max-height: 55dvh;
    }

    body.is-active[data-panel-surface='idle'] .info-content {
        padding: 20px 16px 32px;
        max-height: 48dvh;
        overflow-y: auto;
    }

    body.is-active:is(
            [data-panel-surface='search'],
            [data-panel-surface='focus-search'],
            [data-panel-surface='map-search'],
            [data-panel-surface='map-focus-search']
        )
        .demo-starters {
        display: none;
    }

    body.is-active[data-panel-surface='idle'] .stats-row {
        margin-bottom: 24px;
        display: flex;
        gap: 12px;
    }

    body.is-active[data-panel-surface='idle'] .stat-box {
        flex: 1;
        padding: 12px;
        background: var(--glass-reflection-fade);
        border: 1px solid var(--glass-reflection-muted);
        border-radius: 12px;
        text-align: center;
    }

    body.is-active:is(
            [data-panel-surface='search'],
            [data-panel-surface='focus-search'],
            [data-panel-surface='map-search'],
            [data-panel-surface='map-focus-search']
        )
        .demo-starter-row {
        display: none;
    }

    body.is-active:is(
            [data-panel-surface='search'],
            [data-panel-surface='focus-search'],
            [data-panel-surface='map-search'],
            [data-panel-surface='map-focus-search']
        )
        .demo-starter-chip {
        display: none;
    }

    /* 3. SEARCH & FOCUS-SEARCH COMMON (Mobile) */
    body.is-active[data-panel-surface='search'] .info-panel,
    body.is-active[data-panel-surface='focus-search'] .info-panel {
        display: block;
        top: auto;
        bottom: 0;
        transform: translate3d(0, 0, 0);
        opacity: 1;
        pointer-events: auto;
    }

    body.is-active[data-panel-surface='search'] .info-panel,
    body.is-active[data-panel-surface='focus-search'] .info-panel {
        background:
            linear-gradient(180deg, rgba(7, 17, 23, 0.98), rgba(3, 8, 13, 0.96)),
            radial-gradient(circle at 100% 0%, rgba(255, 226, 132, 0.1), transparent 40%);
        box-shadow:
            inset 0 1px 0 var(--glass-reflection-muted),
            0 -18px 40px var(--shadow-penumbra);
    }

    /* ----------------------------------------------------------------
       4. Search and focus-search sheet geometry
       ---------------------------------------------------------------- */
    body.is-active[data-panel-surface='search'] .info-panel {
        max-height: min(57dvh, 480px);
    }

    body.is-active[data-panel-surface='search'] .info-content {
        padding: 16px;
        height: 100%;
    }

    body[data-panel-surface='search'] .info-content,
    body[data-panel-surface='focus-search'] .info-content {
        max-height: calc(min(54vh, 456px) - 42px);
        padding: 9px 10px 10px;
        margin-bottom: calc(env(safe-area-inset-bottom, 0px));
    }

    body[data-panel-surface='search']:not([data-panel-surface-detail]) #info-panel.info-panel,
    body[data-panel-surface='search'][data-panel-surface-detail='none'] #info-panel.info-panel,
    body[data-panel-surface='search'][data-panel-surface-detail='focus-search'] #info-panel.info-panel {
        height: min(57dvh, 480px);
        max-height: min(57dvh, 480px);
    }

    body[data-panel-surface='search']:not([data-panel-surface-detail]) #info-panel .info-content,
    body[data-panel-surface='search'][data-panel-surface-detail='none'] #info-panel .info-content,
    body[data-panel-surface='search'][data-panel-surface-detail='focus-search'] #info-panel .info-content {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    body[data-panel-surface='search']:not([data-panel-surface-detail]) .search-container.has-query,
    body[data-panel-surface='search'][data-panel-surface-detail='none'] .search-container.has-query,
    body[data-panel-surface='search'][data-panel-surface-detail='focus-search'] .search-container.has-query {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    body[data-panel-surface='search']:not([data-panel-surface-detail])
        .search-container.has-query
        #search-results.active,
    body[data-panel-surface='search'][data-panel-surface-detail='none']
        .search-container.has-query
        #search-results.active {
        flex: 1 1 auto;
        min-height: 0;
        max-height: min(50vh, 400px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.is-active[data-panel-surface='search'] .info-header,
    body.is-active[data-panel-surface='focus-search'] .info-header,
    body.is-active[data-panel-surface='search'] .stat-caption,
    body.is-active[data-panel-surface='focus-search'] .stat-caption {
        display: none;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .info-panel {
        top: auto;
        bottom: 0;
        height: calc(218px + env(safe-area-inset-bottom, 0px));
        min-height: calc(218px + env(safe-area-inset-bottom, 0px));
        max-height: calc(218px + env(safe-area-inset-bottom, 0px));
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] #info-panel.info-panel {
        top: auto;
        bottom: 0;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .info-content {
        padding: 15px 12px 12px;
        overflow: hidden;
    }

    body[data-panel-surface='search'] #cluster-section,
    body[data-panel-surface='search'] #filters-section,
    body[data-panel-surface='search'] .rail-section,
    body[data-panel-surface='focus-search'] #cluster-section,
    body[data-panel-surface='focus-search'] #filters-section,
    body[data-panel-surface='focus-search'] .rail-section {
        display: none;
        visibility: hidden;
        height: 0;
        overflow: hidden;
        pointer-events: none;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-container.has-query {
        height: 100%;
        max-height: 100%;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-results.active {
        flex-basis: 72px;
        min-height: 72px;
        max-height: 72px;
        margin-top: 6px;
        padding: 8px;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-label {
        min-height: 44px;
        margin: 0 0 4px;
        padding: 0 8px;
        color: rgba(226, 246, 242, 0.82);
        letter-spacing: 0.075em;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-label-text {
        color: rgba(224, 242, 239, 0.78);
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-input-wrapper {
        overflow: hidden;
        border-radius: 12px;
        border: 1px solid rgba(var(--color-primary-tint-rgb), 0.2);
        background:
            linear-gradient(180deg, rgba(11, 26, 34, 0.92), rgba(5, 12, 20, 0.96)),
            radial-gradient(circle at 0% 50%, rgba(var(--color-primary-tint-rgb), 0.09), transparent 48%);
        box-shadow:
            0 12px 28px var(--shadow-penumbra),
            inset 0 1px 0 var(--glass-reflection-muted);
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-input {
        height: 46px;
        min-height: 46px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: rgba(246, 255, 253, 0.98);
        font-size: 14.5px;
        font-weight: 650;
        box-shadow: none;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-input::placeholder {
        color: rgba(222, 238, 236, 0.58);
        opacity: 1;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-icon {
        color: rgba(var(--color-primary-tint-rgb), 0.64);
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-clear-btn {
        top: 50%;
        right: 1px;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 11px;
        color: rgba(var(--color-primary-tint-rgb), 0.9);
        background: rgba(var(--color-primary-tint-rgb), 0.055);
    }

    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .info-panel {
        left: 10px;
        right: 10px;
        width: auto;
        max-width: calc(100% - 20px);
        height: calc(98px + env(safe-area-inset-bottom, 0px));
        min-height: calc(98px + env(safe-area-inset-bottom, 0px));
        max-height: calc(98px + env(safe-area-inset-bottom, 0px));
        border: 1px solid rgba(var(--color-primary-tint-rgb), 0.14);
        border-radius: 18px;
        opacity: 0.9;
        background: linear-gradient(180deg, rgba(7, 16, 23, 0.66), rgba(4, 9, 14, 0.76));
        box-shadow:
            0 18px 42px var(--shadow-penumbra),
            inset 0 1px 0 var(--glass-reflection-muted);
    }

    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .info-panel::before {
        width: 28px;
        height: 3px;
        opacity: 0.55;
    }

    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .info-content {
        padding: 9px 10px 8px;
    }

    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-container.has-query {
        height: 76px;
        max-height: 76px;
        overflow: hidden;
    }

    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek']
        .search-container
        #search-results.active {
        display: none;
    }

    body[data-panel-surface='focus'] .search-results.active,
    body[data-panel-surface='focus-search'] .search-results.active,
    body[data-panel-surface='semantic-dive'] .search-results.active {
        max-height: min(28vh, 180px);
        padding: 6px 8px;
        opacity: 0.94;
        visibility: visible;
        pointer-events: auto;
    }

    body[data-panel-surface='semantic-dive'] .search-container,
    body[data-panel-surface='semantic-dive'] .search-results.active,
    body[data-panel-surface='semantic-dive'] #search-results {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-results-count,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-results-count,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-result-what,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-result-what,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-result-meta,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-result-meta,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-result-cluster,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-result-cluster,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-result-context,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-result-context,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-result-bar,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-result-bar,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-result-badges,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-result-badges {
        display: none;
        visibility: hidden;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek']
        .search-result-listitem:not(:first-child),
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek']
        .search-result-listitem:not(:first-child),
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek']
        .search-result-listitem:not(:first-child)
        .search-result-item,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek']
        .search-result-listitem:not(:first-child)
        .search-result-item {
        display: none;
        visibility: hidden;
        height: 0;
        overflow: hidden;
        pointer-events: none;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-result-listitem,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-result-listitem,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-result-item,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-result-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-result-item,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-result-item {
        display: flex;
        align-items: center;
        min-height: 64px;
        color: rgba(240, 255, 252, 0.96);
        text-align: left;
        background: linear-gradient(180deg, rgba(11, 54, 58, 0.74), rgba(5, 18, 24, 0.9));
        border: 1px solid rgba(var(--color-primary-tint-rgb), 0.34);
        box-shadow:
            inset 0 1px 0 var(--glass-reflection-muted),
            0 10px 22px var(--shadow-antumbra);
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-result-row,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-result-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-result-rank,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-result-rank {
        color: rgba(255, 229, 135, 0.94);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-result-name,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-result-name {
        color: rgba(247, 255, 253, 0.98);
        text-align: left;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.08;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Search peek exposes one clean anchor row. Expanded mode owns the full
       result list; clipped secondary-row slivers are a visual regression. */

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek']
        .search-results.active:has(.search-error-state),
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek']
        .search-results.active:has(.search-error-state) {
        padding: 8px 10px;
        overflow-y: hidden;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-error-state,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-error-state {
        align-items: stretch;
        gap: 4px;
        padding: 0;
        text-align: left;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-error-kicker,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-error-kicker {
        align-self: flex-start;
        min-height: 18px;
        padding: 3px 8px;
        font-size: 8px;
        letter-spacing: 0.12em;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-error-text,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-error-text {
        max-width: none;
        margin: 0;
        font-size: 11px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-error-actions,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-error-actions {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 3px;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-error-retry-btn,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-error-dismiss-btn,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-error-retry-btn,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='peek'] .search-error-dismiss-btn {
        padding: 0 14px;
        font-size: 12px;
    }

    body.is-active[data-panel-surface='search'] .search-error-retry-btn,
    body.is-active[data-panel-surface='search'] .search-error-dismiss-btn,
    body.is-active[data-panel-surface='focus-search'] .search-error-retry-btn,
    body.is-active[data-panel-surface='focus-search'] .search-error-dismiss-btn {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    body[data-panel-surface='search'][data-panel-surface-detail='expanded'] .info-panel,
    body[data-panel-surface='focus-search'][data-panel-surface-detail='expanded'] .info-panel {
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    body[data-panel-surface='search'][data-panel-surface-detail='expanded'] .journey-compass,
    body[data-panel-surface='search'][data-panel-surface-detail='expanded'] .legend-panel,
    body[data-panel-surface='search'][data-panel-surface-detail='expanded'] .legend-toggle,
    body[data-panel-surface='focus-search'][data-panel-surface-detail='expanded'] .legend-panel,
    body[data-panel-surface='focus-search'][data-panel-surface-detail='expanded'] .legend-toggle {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    /* UI-4: Legend translated off-screen on mobile but still display:block.
       display:none frees compositor/GPU resources when not visible.
       #legend-panel ID wins over Svelte scoped .legend:not(.open) via
       equal specificity + later load order. */
    #legend-panel:not(.open) {
        display: none;
    }

    body[data-panel-surface='search'][data-panel-surface-detail='expanded'] .info-content,
    body[data-panel-surface='focus-search'][data-panel-surface-detail='expanded'] .info-content {
        height: calc(100dvh - 20px);
        max-height: none;
        padding-top: 20px;
        margin-top: calc(env(safe-area-inset-top, 0px));
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='expanded'] .stat-row,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='expanded'] .stat-row,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='expanded'] .stat-caption,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='expanded'] .stat-caption,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='expanded'] .demo-starters,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='expanded'] .demo-starters,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='expanded'] #demo-starters,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='expanded'] #demo-starters,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='expanded'] .demo-journey-steps,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='expanded'] .demo-journey-steps,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='expanded'] #btn-launch,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='expanded'] #btn-launch,
    body.is-active[data-panel-surface='search'][data-panel-surface-detail='expanded'] .surprise-btn,
    body.is-active[data-panel-surface='focus-search'][data-panel-surface-detail='expanded'] .surprise-btn {
        display: none;
    }

    body.is-active[data-panel-surface='search'] .search-container.has-query {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    body.is-active[data-panel-surface='search'] .search-results.active {
        flex: 1 1 auto;
        overflow-y: auto;
        margin-top: 10px;
    }

    body.is-active[data-panel-surface='search'][data-panel-surface-detail='peek'] .search-results.active {
        flex: 0 0 72px;
        min-height: 72px;
        max-height: 72px;
    }

    /* ----------------------------------------------------------------
       5. Legacy element suppression
       ---------------------------------------------------------------- */
    #trail-controls:not(.active) {
        display: none;
    }

    /* ----------------------------------------------------------------
       6. Map view - hide non-map chrome + compass
       ---------------------------------------------------------------- */
    body.is-active[data-panel-surface^='map-'] .time-display {
        display: none;
    }

    body[data-panel-surface='map-trail'] .view-toggle,
    body[data-panel-surface='map-trail'] .journey-compass,
    body[data-journey-navigation-owner='map-trail-strip'] .view-toggle,
    body[data-journey-navigation-owner='map-trail-strip'] .journey-compass {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    /* SD-143: Restore mobile search in Map mode. layout_base sets top/bottom/left/right
       positioning for map panels; this block handles visibility/display overrides. */
    body.is-active[data-panel-surface^='map-'] .info-panel {
        display: block; /* selector specificity already exceeds layout_base:761 */
        visibility: visible; /* no competing visibility rule in layout/strands */
        pointer-events: none;
        background: none;
        border: none;
        box-shadow: none;
        transform: none; /* overrides layout_base collapsed state through normal cascade */
        opacity: 1; /* overrides layout_base collapsed state through normal cascade */
    }

    body.is-active[data-panel-surface^='map-'] .search-container {
        position: absolute;
        display: block; /* selector specificity already exceeds layout_base:455-485 */
        visibility: visible; /* no competing visibility rule in layout/strands */
        pointer-events: auto;
        max-height: min(42dvh, 386px);
        overflow: hidden;
        background: var(--glass-bg);
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
        border-radius: var(--glass-radius-panel);
        left: 8px;
        right: 8px;
        top: calc(10px + env(safe-area-inset-top, 0px));
        bottom: auto;
        margin: 0;
        box-shadow: var(--shadow-glass);
        border: var(--glass-border-glow);
    }

    body.is-active[data-panel-surface^='map-'] .search-container .search-results.active {
        max-height: min(24dvh, 220px);
        overflow-y: auto;
    }

    body.is-active[data-panel-surface='map-search'] .search-result-item,
    body.is-active[data-panel-surface='map-search'] .search-result-item.top-result {
        display: block;
        width: 100%;
        min-height: 0;
        min-width: 0;
        padding: 10px 12px;
        color: rgba(236, 249, 246, 0.92);
        background: rgba(6, 12, 20, 0.82);
        border-color: rgba(var(--color-primary-tint-rgb), 0.16);
        text-align: left;
    }

    body.is-active[data-panel-surface='map-search'] .search-result-list,
    body.is-active[data-panel-surface='map-search'] .search-result-listitem {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body.is-active[data-panel-surface='map-search'] .search-result-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 4px 8px;
    }

    body.is-active[data-panel-surface='map-search'] .search-result-name,
    body.is-active[data-panel-surface='map-search'] .search-result-title {
        color: rgba(245, 255, 252, 0.96);
        font-size: 14px;
        line-height: 1.12;
    }

    body.is-active[data-panel-surface='map-search'] .search-result-what,
    body.is-active[data-panel-surface='map-search'] .search-result-meta,
    body.is-active[data-panel-surface='map-search'] .search-result-type,
    body.is-active[data-panel-surface='map-search'] .search-result-location {
        color: rgba(211, 228, 224, 0.76);
        font-size: 12px;
        line-height: 1.22;
    }

    body.is-active[data-panel-surface='map-search'] .search-result-badges,
    body.is-active[data-panel-surface='map-search'] .search-result-actions {
        color: rgba(164, 236, 227, 0.78);
    }

    body.is-active[data-panel-surface='map-focus-search'] .search-container {
        height: 52px;
        max-height: 52px;
    }

    body.is-active[data-panel-surface='map-focus-search'] .search-container #search-results.active {
        display: none;
    }

    /* ----------------------------------------------------------------
       7. Map IDLE
       ---------------------------------------------------------------- */
    body[data-panel-surface='map-idle'] .journey-compass {
        top: calc(76px + env(safe-area-inset-top, 0px));
        left: 12px;
        right: 12px;
        width: auto;
        min-width: 0;
        max-width: none;
        height: auto;
        min-height: 0;
        max-height: 136px;
        transform: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'copy actions'
            'rail rail';
        align-items: center;
        gap: 7px 8px;
        padding: 8px 10px;
        overflow: hidden;
        border-radius: 18px;
    }

    body[data-panel-surface='map-idle'] .journey-compass-copy {
        grid-area: copy;
        min-width: 0;
    }

    body[data-panel-surface='map-idle'] .journey-compass-kicker {
        font-size: 8px;
        line-height: 1;
    }

    body[data-panel-surface='map-idle'] .journey-compass-title {
        max-width: 100%;
        font-size: 13px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body[data-panel-surface='map-idle'] .journey-compass-note {
        display: none;
    }

    body[data-panel-surface='map-idle'] [aria-label='Journey route controls'] {
        grid-area: actions;
        display: flex;
        justify-content: flex-end;
        gap: 5px;
        min-width: 44px;
    }

    body[data-panel-surface='map-idle'] .journey-compass-action {
        min-width: 44px;
        min-height: 44px;
        height: 44px;
        padding: 0 8px;
        font-size: 0;
        letter-spacing: 0;
    }

    body[data-panel-surface='map-idle'] .journey-compass-action::before {
        font-size: 10px;
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
    }

    body[data-panel-surface='map-idle'] .journey-compass-rail {
        grid-area: rail;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 0;
        pointer-events: auto;
    }

    body[data-panel-surface='map-idle'] .journey-compass-step {
        min-width: 0;
        min-height: 44px;
        padding: 0 3px;
        font-size: 7.5px;
        line-height: 1.05;
        letter-spacing: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    body.is-active[data-panel-surface='map-idle'] .info-panel,
    body.is-active[data-panel-surface='map-idle'] .search-container {
        display: none;
        visibility: hidden;
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
    }

    /* ----------------------------------------------------------------
       8. FAB / Launch Button behavior
       ---------------------------------------------------------------- */
    body.is-active:is(
            [data-panel-surface='search'],
            [data-panel-surface='focus-search'],
            [data-panel-surface='map-search'],
            [data-panel-surface='map-focus-search']
        )
        #btn-launch {
        display: none;
    }

    /* ----------------------------------------------------------------
       9. Map Navigation Priority
       ---------------------------------------------------------------- */
    body.is-active[data-journey-navigation-owner='map-trail-strip'] .view-toggle,
    body.is-active[data-journey-navigation-owner='map-trail-strip'] .journey-compass {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }
}

/* ─── TABLET BRIDGE (641–768px) ─────────────────────
   Between layout_base.css (min-width:769px) and the phone state machine
   (max-width:640px), the info-panel needs explicit geometry to avoid
   falling back to the Svelte scoped position:absolute.
   These rules narrow the panel toward its desktop side-panel footprint
   so the 768px↔769px crossing interpolates smoothly via the transition
   added in mobile_premium__surfaces.css root-sheet-style. */
@media (min-width: 641px) and (max-width: 768px) {
    body.is-active[data-panel-surface]:not([data-panel-surface^='map-']) .info-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: min(52dvh, 440px);
        border-radius: 28px 28px 0 0;
    }

    body.is-active[data-panel-surface='idle'] .info-panel {
        max-height: min(48dvh, 400px);
    }
}

/* Map-trail state owns the full compass suppression outside the narrow
   baseline media gate; the compact map strip owns navigation instead. */
@media (min-width: 641px) and (max-width: 768px) {
    body[data-panel-surface='search'] .info-panel {
        max-height: min(23vh, 178px);
        opacity: 0.97;
    }

    body[data-panel-surface='focus-search'] .info-panel {
        opacity: 0.97;
    }

    body[data-panel-surface='search'] .info-content,
    body[data-panel-surface='focus-search'] .info-content {
        max-height: calc(min(54vh, 456px) - 42px);
        padding: 9px 10px 10px;
        margin-bottom: calc(env(safe-area-inset-bottom, 0px));
    }

    body[data-panel-surface='map-trail'] .view-toggle,
    body[data-panel-surface='map-trail'] .journey-compass,
    body[data-journey-navigation-owner='map-trail-strip'] .view-toggle,
    body[data-journey-navigation-owner='map-trail-strip'] .journey-compass {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }
}

@media (max-width: 900px) and (max-height: 430px) and (orientation: landscape) {
    body.is-active[data-panel-surface='map-trail'] .journey-compass {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }
}