/* ================================================================
   mobile_premium.css
   Source for mobile premium overrides (split by state on 2026-06-03 — 7 files, cascade order preserved).
   The 7-way split (chrome/state/surfaces/focus/idle/map_summary/this
   file) was collapsed on 2026-06-02 because the chrome/state/surfaces
   files all targeted 6-8 of the same data-panel-surface values with
   overlapping concerns, making it unclear where a new rule belonged.

   State taxonomy (each section has a single, named concern):
     1. IDLE          body[data-panel-surface="idle"]
     2. SEARCH        body[data-panel-surface="search"]
     3. FOCUS         body[data-panel-surface="focus"] and "focus-search"
     4. DIVE          body[data-panel-surface="semantic-dive"]
     5. MAP           body[data-panel-surface^="map-"]
     6. CROSS-CUTTING chrome / state / surfaces (touch multiple states)

   Sections are kept in their original import order to preserve the
   CSS cascade. If a new state is added, add a section here, not a
   new file. If the file crosses ~5,000 lines, split by state.

   All rules inside this file are mobile-only; base styles for the
   same components live in their respective base files.
   ================================================================ */

/* ─── FOCUS / DIVE STATES ──────────────────────────── */

@media (max-width: 768px) {
    /* ----------------------------------------------------------------
       1. Scroll / overflow baseline
       ---------------------------------------------------------------- */
    body.is-active[data-panel-surface='focus-search'],
    body.is-active[data-panel-surface='semantic-dive'] {
        overflow: hidden;
    }

    /* ----------------------------------------------------------------
       1a. UI-2: Hide legend panel in focus mode on mobile
            to prevent bottom-left collision with focus-stage-card.
       ---------------------------------------------------------------- */
    body:is([data-panel-surface='focus'], [data-panel-surface='focus-search'], [data-panel-surface='semantic-dive'])
        #legend-panel {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    /* ----------------------------------------------------------------
       2. Journey compass — core layout
          Shared across focus-search and dive states.
       ---------------------------------------------------------------- */
    /* Specificity 0,4,1 to beat surfaces.css position:relative (0,4,1) via source order.
       Without position:fixed the compass flows in the document; left/right become offsets
       instead of edge constraints, so width stays at 100% and overflows by the left offset. */
    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']) .journey-compass,
    body.is-active[data-panel-surface='semantic-dive']:not([data-panel-surface^='map-']) .journey-compass {
        position: fixed;
        display: grid;
        top: calc(10px + env(safe-area-inset-top, 0px));
        left: 16px;
        right: 16px;
        width: auto;
        min-width: 0;
        min-height: 58px;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 9px 9px 9px 11px;
        border-radius: 8px;
        border-color: rgba(166, 239, 228, 0.2);
        background:
            linear-gradient(180deg, rgba(8, 20, 25, 0.78), rgba(4, 10, 14, 0.7)),
            radial-gradient(circle at 88% 0%, rgba(255, 220, 118, 0.1), transparent 42%);
        box-shadow:
            inset 0 1px 0 var(--glass-reflection-muted),
            0 12px 34px var(--shadow-penumbra);
        backdrop-filter: blur(18px) saturate(1.12);
        transform: none;
        opacity: 0.96;
        color: rgba(238, 250, 248, 0.9);
    }

    /* Field-node: suppress journey-compass to prevent 93% overlap with #focus-stage.
       Specificity 0,4,1 matches the rule above; source-order win hides compass when
       data-focus-panel-mode='field-node' is set. hasBlockingOverlay returns false for
       display:none, so the overlay:journey-compass contract check passes. */
    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node'] .journey-compass,
    body.is-active[data-panel-surface='semantic-dive'][data-focus-panel-mode='field-node'] .journey-compass {
        display: none;
    }

    /* Pseudo-element glow baseline */
    body.is-active[data-panel-surface='focus-search'] .journey-compass::before,
    body.is-active[data-panel-surface='semantic-dive'] .journey-compass::before {
        opacity: 0.24;
    }

    /* Hidden sub-elements (kick, note, rail) */
    body.is-active[data-panel-surface='focus-search'] .journey-compass-kicker,
    body.is-active[data-panel-surface='semantic-dive'] .journey-compass-kicker,
    body.is-active[data-panel-surface='focus-search'] .journey-compass-note,
    body.is-active[data-panel-surface='semantic-dive'] .journey-compass-note,
    body.is-active[data-panel-surface='focus-search'] .journey-compass-rail,
    body.is-active[data-panel-surface='semantic-dive'] .journey-compass-rail {
        display: none;
    }

    /* Flex cell reset */
    body.is-active[data-panel-surface='focus-search'] .journey-compass-copy,
    body.is-active[data-panel-surface='semantic-dive'] .journey-compass-copy {
        min-width: 0;
    }

    /* Compass title */
    body.is-active[data-panel-surface='focus-search'] .journey-compass-title,
    body.is-active[data-panel-surface='semantic-dive'] .journey-compass-title {
        margin: 0;
        font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: 0;
        color: rgba(246, 255, 252, 0.96);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Focus/dive journey compass state refinements */
    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']) .journey-compass-title,
    body.is-active[data-panel-surface='semantic-dive']:not([data-panel-surface^='map-']) .journey-compass-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Compass actions cell */
    body.is-active[data-panel-surface='focus-search'] .journey-compass-actions,
    body.is-active[data-panel-surface='semantic-dive'] .journey-compass-actions {
        grid-column: auto;
        justify-content: flex-end;
        gap: 6px;
        width: auto;
        min-width: 0;
    }

    /* Compass action buttons (shared) */
    body.is-active[data-panel-surface='focus-search'] .journey-compass-action,
    body.is-active[data-panel-surface='semantic-dive'] .journey-compass-action,
    body.is-active[data-panel-surface='focus-search'] .journey-compass-action.primary,
    body.is-active[data-panel-surface='semantic-dive'] .journey-compass-action.primary {
        flex: 0 0 auto;
        min-width: 88px;
        min-height: 44px;
        padding: 0 12px;
        border-radius: 8px;
        font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
        color: rgba(246, 239, 204, 0.92);
        background: linear-gradient(180deg, rgba(255, 223, 132, 0.14), rgba(9, 18, 22, 0.58)), rgba(9, 20, 24, 0.64);
        border-color: rgba(255, 226, 132, 0.26);
        box-shadow: inset 0 1px 0 var(--glass-reflection-muted);
    }

    body.is-active[data-panel-surface='semantic-dive'] .journey-compass-action:not(.primary) {
        display: none;
    }

    /* Inside mode owns actions from the focus-stage card, not the compass. */
    body.is-active[data-panel-surface='semantic-dive'] .journey-compass-actions {
        display: none;
    }

    /* In semantic-dive the focus-stage card owns the neighborhood UI.
       The top compass title is intentionally empty (per journey-compass-state
       insideActive), so the pill would render as an empty outlined shell.
       Hide it entirely on mobile — the focus-stage card is the surface. */
    body.is-active[data-panel-surface='semantic-dive'] .journey-compass.glass-heavy[data-density='compact'] {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    body.is-active:is([data-panel-surface='focus-search'], [data-panel-surface='semantic-dive']) #mode-grid,
    body.is-active:is([data-panel-surface='focus-search'], [data-panel-surface='semantic-dive']) .mode-grid {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    body.is-active[data-panel-surface='focus-search']:not(
            [data-panel-surface^='map-']
        )[data-focus-panel-mode='field-node']
        .journey-compass.glass-heavy {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 7px;
        max-height: none;
        overflow: visible;
    }

    body.is-active[data-panel-surface='focus-search']:not(
            [data-panel-surface^='map-']
        )[data-focus-panel-mode='field-node']
        .journey-compass.glass-heavy
        .journey-compass-copy {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    body.is-active[data-panel-surface='focus-search']:not(
            [data-panel-surface^='map-']
        )[data-focus-panel-mode='field-node']
        .journey-compass.glass-heavy
        .journey-compass-actions {
        display: grid;
        flex: 0 0 58px;
        width: 44px;
        grid-template-columns: 44px;
        gap: 6px;
        min-width: 44px;
        justify-content: stretch;
    }

    body.is-active:is([data-panel-surface='focus-search'], [data-panel-surface='search']):not(
            [data-panel-surface^='map-']
        )[data-focus-panel-mode='field-node']
        .journey-compass-action {
        width: auto;
        min-width: 44px;
        height: 44px;
        min-height: var(--mobile-touch-min);
        padding: 0 7px;
        border-radius: 999px;
        font-size: 0;
        letter-spacing: 0;
        overflow: hidden;
    }

    body.is-active:is([data-panel-surface='focus-search'], [data-panel-surface='search']):not(
            [data-panel-surface^='map-']
        )[data-focus-panel-mode='field-node']
        .journey-compass-action::before {
        font-size: 10.5px;
        line-height: 1;
        letter-spacing: 0.02em;
        text-transform: none;
        white-space: nowrap;
    }

    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']) .journey-compass.glass-heavy {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 7px;
        max-height: none;
        overflow: visible;
    }

    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-'])
        .journey-compass.glass-heavy
        .journey-compass-copy {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding-right: 50px;
    }

    body.is-active:is([data-panel-surface='focus-search'], [data-panel-surface='semantic-dive']):not(
            [data-panel-surface^='map-']
        )
        .journey-compass:is(.glass-heavy, [data-density='compact'])
        .journey-compass-title {
        font-size: 12px;
        line-height: normal;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        padding-bottom: 2px;
        width: 100%;
    }

    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-'])
        .journey-compass.glass-heavy
        .journey-compass-rail {
        display: none;
    }

    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']) .journey-compass-action.primary,
    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-'])
        .journey-compass.glass-heavy
        .journey-compass-action.primary {
        flex-basis: 58px;
        min-width: 58px;
        min-height: 44px;
    }

    @media (max-width: 480px) {
        body.is-active[data-panel-surface='semantic-dive']:not([data-panel-surface^='map-'])
            .journey-compass[data-density='compact'] {
            height: auto;
            min-height: 78px;
            padding: 8px 9px 9px 12px;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            gap: 5px;
            z-index: var(--z-toast-above);
            pointer-events: auto;
        }

        body.is-active[data-panel-surface='semantic-dive']:not([data-panel-surface^='map-'])
            .journey-compass[data-density='compact']
            .journey-compass-copy {
            flex: 0 0 auto;
            width: 100%;
            padding-right: 0;
        }

        body.is-active[data-panel-surface='semantic-dive']:not([data-panel-surface^='map-'])
            .journey-compass[data-density='compact']
            .journey-compass-copy::after {
            display: none;
        }

        body.is-active[data-panel-surface='semantic-dive']:not([data-panel-surface^='map-'])
            .journey-compass[data-density='compact']
            .journey-compass-rail {
            display: none;
            width: 100%;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 4px;
            padding: 2px;
            pointer-events: auto;
            z-index: var(--z-base-raised);
        }

        body.is-active[data-panel-surface='semantic-dive']:not([data-panel-surface^='map-'])
            .journey-compass[data-density='compact']
            .journey-compass-step {
            min-width: 0;
            min-height: 36px;
            padding: 0 3px;
            font-size: 6.5px;
            line-height: 1.05;
            letter-spacing: 0;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            pointer-events: auto;
        }
    }

    /* ----------------------------------------------------------------
       3. Focus stage — shared layout
       ---------------------------------------------------------------- */
    body.is-active[data-panel-surface='focus'] .focus-stage,
    body.is-active[data-panel-surface='focus-search'] .focus-stage,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage {
        left: 10px;
        right: 10px;
        bottom: 0;
        width: auto;
        max-width: none;
        transform: none;
        color: rgba(238, 250, 248, 0.9);
    }

    /* Focus stage card */
    body.is-active[data-panel-surface='focus'] .focus-stage-card,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-card,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        max-height: none;
        padding: 14px 10px 10px;
        gap: 7px;
        border-radius: 8px;
        border-color: rgba(143, 229, 218, 0.18);
        background:
            linear-gradient(180deg, rgba(7, 22, 27, 0.86), rgba(4, 11, 15, 0.78)),
            radial-gradient(circle at 16% 0%, rgba(var(--color-primary-tint-rgb), 0.1), transparent 36%);
        box-shadow:
            inset 0 1px 0 var(--glass-reflection-muted),
            0 -10px 34px var(--shadow-penumbra);
        backdrop-filter: blur(18px) saturate(1.1);
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-card {
        border-color: rgba(255, 210, 77, 0.3);
        background:
            radial-gradient(circle at 16% 0%, rgba(255, 210, 77, 0.1), transparent 36%),
            linear-gradient(180deg, rgba(18, 19, 15, 0.88), rgba(4, 11, 15, 0.78)),
            radial-gradient(circle at 84% 110%, rgba(var(--color-primary-tint-rgb), 0.08), transparent 34%);
        box-shadow:
            inset 0 1px 0 var(--glass-reflection-muted),
            0 -10px 34px var(--shadow-penumbra),
            0 0 22px rgba(255, 210, 77, 0.08);
        /* Position card flush with viewport bottom for bottom-flush contract */
        bottom: 0;
        max-height: 62dvh;
        overflow-y: auto;
    }

    /* Focus stage card — top bar pseudo-element */
    body.is-active[data-panel-surface='focus-search'] .focus-stage-card::before,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-card::before {
        top: 8px;
        width: 32px;
        height: 3px;
        opacity: 0.46;
    }

    /* ----------------------------------------------------------------
       3b. Focus stage action/button primitives
       ---------------------------------------------------------------- */
    .journey-compass-action,
    .focus-stage-action-btn,
    .focus-stage-dive-btn,
    .focus-stage-journey-btn,
    .focus-thread-inspector-btn,
    .action-btn {
        appearance: none;
        -webkit-appearance: none;
        font: inherit;
        cursor: pointer;
    }

    body.is-active[data-panel-surface]:not([data-panel-surface^='map-']) .focus-stage-action-btn {
        min-height: 44px;
        height: 44px;
        border-radius: 10px;
        background: linear-gradient(180deg, var(--glass-reflection-muted), rgba(255, 255, 255, 0.028));
        border: 1px solid rgba(160, 232, 220, 0.14);
        color: #fff;
        font-size: 10.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.035em;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
            transform 0.2s ease,
            background 0.2s ease,
            border-color 0.2s ease;
    }

    .focus-stage-action-btn:active {
        transform: scale(0.96);
        background: var(--color-border-muted);
    }

    body.is-active[data-panel-surface]:not([data-panel-surface='semantic-dive']):not([data-panel-surface^='map-'])
        .focus-stage-dive-btn {
        width: calc(100% - 32px);
        margin: 0 16px 12px;
        min-height: 44px;
        height: 48px;
        border-radius: 12px;
        background: var(--color-primary, var(--color-primary-alt));
        color: #0d141c;
        font-size: 12.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 18px rgba(var(--color-primary-alt-rgb), 0.18);
    }

    body.is-active[data-panel-surface='search']:not([data-panel-surface^='map-']) .focus-stage-dive-btn {
        display: none;
    }

    body.is-active[data-panel-surface]:not([data-panel-surface^='map-']) .focus-thread-inspector-btn {
        min-height: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .focus-thread-inspector.active .focus-thread-inspector-btn {
        min-width: 44px;
        min-height: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .action-btn,
    .focus-stage-journey-btn {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--glass-reflection-muted);
        border: 1px solid var(--glass-reflection-strong);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    /* Focus stage — content order */
    body.is-active[data-panel-surface='focus-search'] .focus-stage-name,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-name {
        order: 10;
    }

    body.is-active[data-panel-surface='focus-search'] #focus-stage-auxiliary-surfaces {
        order: 30;
    }


    /* ----------------------------------------------------------------
       4. Focus stage — focus-search journey block
       ---------------------------------------------------------------- */
    body.is-active[data-panel-surface='focus-search'] .focus-stage-journey.active {
        order: 20;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: center;
        gap: 8px;
        min-height: 58px;
        margin-top: 1px;
        padding: 6px 7px 6px 12px;
        border-radius: 8px;
        border-color: rgba(var(--color-primary-tint-rgb), 0.2);
        background:
            linear-gradient(180deg, rgba(8, 30, 33, 0.78), rgba(4, 13, 17, 0.72)),
            radial-gradient(circle at 0% 50%, rgba(255, 226, 132, 0.12), transparent 45%);
        box-shadow: inset 0 1px 0 var(--glass-reflection-muted);
    }

    body.is-active[data-panel-surface='focus-search'] .focus-stage-journey-meta {
        min-width: 0;
        padding: 0;
    }

    body.is-active[data-panel-surface='focus-search'] .focus-stage-journey-kicker {
        margin-bottom: 3px;
        font-size: 8px;
        letter-spacing: 0.08em;
        color: rgba(255, 226, 132, 0.74);
    }

    body.is-active[data-panel-surface='focus-search'] .focus-stage-route {
        grid-template-columns: 7px minmax(52px, 1fr) 7px;
        gap: 7px;
    }

    body.is-active[data-panel-surface='focus-search'] .focus-stage-journey-progress,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-next,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-journey-progress,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-next {
        font-size: 8.5px;
        line-height: 1.05;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.is-active[data-panel-surface='focus-search'] .focus-stage-journey-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 8px;
    }

    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']):not(
            [data-focus-panel-mode='field-node']
        )
        .focus-stage-journey.active {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        margin: 0 0 8px;
        min-height: 50px;
        max-height: 58px;
        padding: 6px 8px 6px 10px;
        border-radius: 12px;
        overflow: hidden;
    }

    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']):not(
            [data-focus-panel-mode='field-node']
        )
        .focus-stage-journey-meta {
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']):not(
            [data-focus-panel-mode='field-node']
        )
        .focus-stage-journey-kicker {
        display: none;
    }

    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']):not(
            [data-focus-panel-mode='field-node']
        )
        .focus-stage-journey-progress {
        display: block;
        max-width: 100%;
        color: rgba(231, 246, 244, 0.82);
        font-size: 10px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']):not(
            [data-focus-panel-mode='field-node']
        )
        .focus-stage-next {
        display: block;
        max-width: 100%;
        margin-top: 3px;
        color: rgba(143, 229, 220, 0.74);
        font-size: 8px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']):not(
            [data-focus-panel-mode='field-node']
        )
        #btn-focus-prev,
    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']):not(
            [data-focus-panel-mode='field-node']
        )
        #btn-focus-next {
        display: none;
    }

    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']) .focus-stage-journey-btn {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    /* ----------------------------------------------------------------
       5. Focus stage — dive button + neighbors
       ---------------------------------------------------------------- */
    body.is-active[data-panel-surface='focus-search'] .focus-stage-dive-btn {
        order: 40;
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        min-height: 44px;
        margin: 0;
        border-radius: 8px;
        font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        color: rgba(249, 255, 252, 0.94);
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search'])
        #btn-focus-dive.focus-stage-dive-btn {
        position: fixed;
        z-index: var(--z-compass);
        pointer-events: auto;
    }

    body[data-panel-surface='focus-search'] #btn-focus-dive.focus-stage-dive-btn:not([hidden]) {
        position: fixed;
        z-index: var(--z-compass);
        left: max(12px, env(safe-area-inset-left, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        width: auto;
        min-height: 44px;
        pointer-events: auto;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']) .focus-stage-neighbors.active {
        order: 54;
        display: block;
        margin: 0;
        padding: 5px 0 0;
        border-top: 1px solid rgba(var(--color-primary-tint-rgb), 0.12);
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']) .focus-stage-neighbor-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 5px;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']) .focus-stage-neighbor-list {
        display: grid;
        gap: 6px;
        max-height: none;
        overflow-y: visible;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not([data-focus-panel-mode='field-node'])
        .focus-stage-neighbor-count {
        display: none;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not([data-focus-panel-mode='field-node'])
        .focus-stage-neighbor-list {
        max-height: 54px;
        overflow: hidden;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not([data-focus-panel-mode='field-node'])
        .focus-stage-neighbor-list
        > :nth-child(n + 2) {
        display: none;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search'])
        .focus-stage-neighbor-list::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']) .focus-stage-neighbor-pill {
        display: flex;
        min-height: var(--focus-stage-neighbor-row-min, 44px);
        border-radius: 10px;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']) .focus-stage-neighbor-main {
        min-width: 0;
        padding: 5px 7px;
        grid-template-columns: 24px minmax(0, 1fr);
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']) .focus-stage-neighbor-index {
        width: 22px;
        height: 22px;
        border-radius: 8px;
        font-size: 8px;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']) .focus-stage-neighbor-actions {
        display: none;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-panel-surface^='map-']
        )
        #focus-stage
        .focus-pocket {
        display: flex;
        flex-direction: column;
        align-content: stretch;
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-panel-surface^='map-']
        )
        #focus-stage
        .focus-stage-note,
    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-panel-surface^='map-']
        )
        #focus-stage
        .focus-stage-actions,
    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-panel-surface^='map-']
        ):not([data-focus-panel-mode='field-node'])
        #focus-stage
        .trail-controls,
    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-panel-surface^='map-']
        )
        #focus-stage
        .focus-stage-what,
    body.is-active[data-panel-surface='focus']:not([data-panel-surface^='map-'])
        #focus-stage
        .focus-stage-journey.active {
        display: none;
    }

    body.is-active:is(
            [data-panel-surface='focus'],
            [data-panel-surface='focus-search']
        )[data-thread-inspect-surface='idle']:not([data-panel-surface^='map-'])
        #focus-stage
        .focus-thread-inspector,
    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-panel-surface^='map-']
        )
        #focus-stage
        .focus-thread-inspector[aria-hidden='true']:not(.active) {
        display: none;
    }

    body.is-active:is([data-panel-surface='focus-search']):not(
            [data-panel-surface^='map-']
        )[data-focus-panel-mode='field-node']
        #focus-stage
        .focus-stage-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    body.is-active:is([data-panel-surface='focus-search']):not(
            [data-panel-surface^='map-']
        )[data-focus-panel-mode='field-node']
        #focus-stage
        .focus-stage-card {
        overflow: visible;
        overscroll-behavior: contain;
    }

    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node'] .focus-stage-kicker,
    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node'] .focus-stage-name,
    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node'] .focus-stage-what,
    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node'] .focus-stage-meta,
    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node'] .focus-stage-note,
    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node'] .focus-stage-dive-btn,
    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node'] .focus-stage-neighbors {
        display: none;
    }

    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node'] .focus-stage-journey.active {
        display: flex;
        gap: 12px;
        margin: 0 10px 12px;
        padding: 10px 14px;
        width: auto;
    }

    /* Field-node bottom-flush: pin the focus card to the viewport bottom.
       The card must overlap the journey-compass (which collapses in field-node
       via the .journey-compass visibility rule in surfaces.css) and stay
       flush with the viewport edge. */
    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node']
        #focus-stage
        .focus-stage-card {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: calc(100vh - 96px); /* don't overflow past the stage top */
        overflow-y: auto;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-panel-surface^='map-']
        )
        #focus-stage
        .focus-stage-dive-btn {
        min-height: 44px;
        height: 44px;
        margin-bottom: 4px;
        flex-shrink: 0;
    }

    body.is-active[data-panel-surface='focus']:not([data-panel-surface^='map-']) #focus-stage .focus-stage-dive-btn {
        display: none;
    }

    body.is-active:is(
            [data-panel-surface='focus'],
            [data-panel-surface='focus-search']
        )[data-thread-inspect-surface]:not([data-thread-inspect-surface='idle']):not([data-panel-surface^='map-'])
        #focus-stage
        .focus-stage-dive-btn {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-panel-surface^='map-']
        )
        #focus-stage
        .focus-stage-neighbors.active {
        display: block;
        flex: 0 1 auto;
    }

    /* ----------------------------------------------------------------
       6. Focus stage — shared typography
       ---------------------------------------------------------------- */
    body.is-active[data-panel-surface='focus-search'] .focus-stage-kicker,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-kicker {
        font-size: 8.5px;
        line-height: 1;
        letter-spacing: 0.08em;
    }

    body.is-active[data-panel-surface='focus-search'] .focus-stage-name,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-name {
        flex: 0 0 auto;
        min-height: 16px;
        font-size: 13px;
        line-height: 1.18;
        letter-spacing: 0;
        overflow: visible;
    }

    body.is-active[data-panel-surface='focus-search'] .focus-stage-what,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-what {
        font-size: 15px;
        line-height: 1.18;
    }

    body.is-active[data-panel-surface='focus-search']:not([data-panel-surface^='map-']):not(
            [data-focus-panel-mode='field-node']
        )
        #focus-stage
        .focus-stage-what {
        margin: 0 20px 18px;
        font-size: 14px;
        line-height: 1.18;
        color: rgba(255, 255, 255, 0.7);
        display: block;
        height: auto;
        min-height: 18px;
        max-height: none;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ----------------------------------------------------------------
       7. Focus stage — dive / inside state
          data-panel-surface="semantic-dive" hides non-essential elements
          and restyles the journey block.

          Semantic-dive inside HUD density owner: keep status/control
          compactness here, not in late surface backstops.
       ---------------------------------------------------------------- */
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-status {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 7px;
        position: fixed;
        top: max(6px, env(safe-area-inset-top, 0px));
        left: 0;
        right: 0;
        z-index: var(--z-max);
        width: 100vw;
        min-height: 30px;
        margin: 0;
        padding: 5px 10px;
        border-radius: 8px;
        border-color: rgba(255, 210, 77, 0.22);
        background: rgba(6, 18, 22, 0.4);
        box-shadow: none;
        pointer-events: auto;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-status-copy {
        font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        color: rgba(230, 244, 238, 0.86);
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-status::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: rgba(255, 210, 77, 0.72);
        box-shadow:
            0 0 10px rgba(255, 210, 77, 0.38),
            0 0 4px rgba(var(--color-primary-tint-rgb), 0.28);
        animation: insideStatusPulse 2.4s ease-in-out infinite;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-controls {
        position: fixed;
        top: max(42px, calc(36px + env(safe-area-inset-top, 0px)));
        left: 0;
        right: 0;
        z-index: var(--z-max);
        width: 100vw;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        min-height: 96px;
        margin: 0;
        order: 38;
        pointer-events: auto;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-btn {
        position: relative;
        z-index: var(--z-max);
        height: 44px;
        min-height: 44px;
        border-radius: 8px;
        font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        box-shadow: none;
        pointer-events: auto;
    }

    body.is-active[data-panel-surface='semantic-dive'] #canvas-container,
    body.is-active[data-panel-surface='semantic-dive'] #canvas-container canvas {
        pointer-events: none;
    }

    body.is-active[data-panel-surface='semantic-dive'] #canvas-container {
        filter: brightness(3.2) contrast(2.35) saturate(1.45);
    }

    body.is-active[data-panel-surface='semantic-dive'] #canvas-container::after {
        opacity: 0.58;
        background:
            radial-gradient(circle, rgba(var(--color-primary-tint-rgb), 0.18) 0 2.4px, transparent 3.6px) 0 0 / 26px 26px,
            radial-gradient(circle, rgba(90, 150, 255, 0.14) 0 2px, transparent 3.2px) 13px 9px / 34px 34px,
            linear-gradient(
                90deg,
                rgba(6, 9, 13, 0.42) 0%,
                rgba(6, 9, 13, 0.22) 18%,
                rgba(6, 9, 13, 0) 48%
            );
        mix-blend-mode: screen;
    }

    body.is-active[data-panel-surface='semantic-dive'] #focus-stage-inside-controls,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-btn {
        pointer-events: auto;
    }

    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-next.focus-stage-inside-btn,
    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-map.focus-stage-inside-btn,
    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-county.focus-stage-inside-btn {
        position: fixed;
        z-index: var(--z-max);
    }

    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-next.focus-stage-inside-btn {
        top: max(42px, calc(36px + env(safe-area-inset-top, 0px)));
        left: 0;
        width: calc(50vw - 4px);
    }

    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-map.focus-stage-inside-btn {
        top: max(42px, calc(36px + env(safe-area-inset-top, 0px)));
        right: 0;
        width: calc(50vw - 4px);
    }

    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-county.focus-stage-inside-btn {
        top: max(94px, calc(88px + env(safe-area-inset-top, 0px)));
        left: 0;
        right: 0;
        width: 100vw;
    }

    /* Premium focus owns focus-search meta suppression; semantic-dive hides meta with the main-stage content below. */
    body.is-active[data-panel-surface='focus-search'] .focus-stage-meta {
        display: none;
    }

    /* Hide main-stage content in dive state */
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-name,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-what,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-meta,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-note,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-kicker,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-actions,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-dive-btn,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-journey,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-neighbors {
        display: none;
    }

    /* Restyled journey block in dive state */
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-journey.active {
        order: 46;
        grid-template-columns: minmax(0, 1fr);
        min-height: 46px;
        margin-top: 5px;
        padding: 7px 12px;
        border-color: rgba(var(--color-primary-tint-rgb), 0.14);
        background:
            linear-gradient(180deg, rgba(9, 25, 29, 0.56), rgba(4, 12, 16, 0.46)),
            radial-gradient(circle at 100% 50%, rgba(var(--color-primary-tint-rgb), 0.08), transparent 44%);
        box-shadow: none;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-journey-btn {
        display: none;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-journey-meta {
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-journey-kicker {
        margin-bottom: 3px;
        font-size: 7.8px;
        letter-spacing: 0.08em;
        color: rgba(255, 226, 132, 0.8);
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-route {
        grid-template-columns: 7px minmax(0, 1fr) 7px;
        gap: 7px;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-journey-progress,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-next {
        font-size: 8.5px;
        line-height: 1.08;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ----------------------------------------------------------------
       8. Focus stage - suppress journey in combined states
       ---------------------------------------------------------------- */
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-journey.active {
        display: none;
    }

    body.is-active[data-panel-surface='semantic-dive'] #focus-stage-auxiliary-surfaces {
        display: grid;
        gap: 6px;
        margin: 0;
    }

    body.is-active[data-panel-surface='semantic-dive']
        #focus-stage-auxiliary-surfaces
        > :not(#focus-stage-inside-status):not(#focus-stage-inside-controls) {
        display: none;
    }

    /* ----------------------------------------------------------------
       9. Relocated focus-stage-card mobile overrides
       ---------------------------------------------------------------- */
    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-panel-surface^='map-']
        )
        #focus-stage.focus-stage {
        display: block;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    body.is-active[data-panel-surface]:not([data-panel-surface^='map-']) .focus-stage-card {
        display: grid;
        gap: 6px;
        left: 0;
        right: 0;
        bottom: 0;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        padding: 20px 16px 14px;
        border-radius: 28px 28px 0 0;
        background: var(--glass-bg);
        backdrop-filter: blur(var(--glass-blur)) saturate(1.12);
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.12);
        border: var(--glass-border);
        border-bottom: none;
        border-left: none;
        border-right: none;
        box-shadow: var(--shadow-glass);
        margin: 0 0 calc(env(safe-area-inset-bottom, 0px));
        transform: translateY(0);
        animation-name: none;
        animation-duration: 0s;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: var(--z-panels-elevated);
        pointer-events: auto;
    }

    body.is-active[data-panel-surface]:not([data-panel-surface^='map-']) .focus-stage-card * {
        font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
        box-sizing: border-box;
    }

    body.is-active[data-panel-surface]:not([data-panel-surface^='map-']) .focus-stage-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                120deg,
                rgba(255, 255, 255, 0.07),
                transparent 24%,
                transparent 78%,
                rgba(255, 226, 132, 0.045)
            ),
            radial-gradient(circle at 50% 105%, rgba(var(--color-primary-tint-rgb), 0.055), transparent 52%);
        opacity: 0.38;
        pointer-events: none;
        border-radius: inherit;
        z-index: var(--z-underlay);
    }

    body.is-active[data-panel-surface]:not([data-panel-surface^='map-']) .focus-stage-card::after {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--glass-reflection-glow);
        z-index: var(--z-overlay);
    }

    body.is-active[data-panel-surface='focus'] .focus-stage-card,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-card {
        max-height: var(--focus-stage-card-max-height, min(46dvh, 400px));
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-thread-inspect-surface='idle']
        ) {
        --focus-stage-card-max-height: min(37dvh, 300px);
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-thread-inspect-surface='idle']
        )
        .focus-thread-inspector.active {
        max-height: min(14dvh, 112px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px 9px;
        gap: 4px;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-thread-inspect-surface='idle']
        )
        .focus-thread-inspector-copy {
        display: none;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-thread-inspect-surface='idle']
        )
        .focus-thread-inspector-meta {
        display: none;
    }

    @media (prefers-reduced-motion: reduce) {
        body .focus-stage-card,
        body.is-active[data-panel-surface]:not([data-panel-surface^='map-']) .focus-stage-card,
        body[data-panel-surface]:not([data-panel-surface^='map-']) .focus-stage-card {
            transition: none;
            animation-name: none;
        }
    }

    /* ----------------------------------------------------------------
       10. Narrow portrait: bottom-sheet card with internal scroll
       ---------------------------------------------------------------- */
    @media (max-width: 390px) {
        body.is-active[data-panel-surface='focus-search'] .focus-stage,
        body.is-active[data-panel-surface='semantic-dive'] .focus-stage {
            bottom: 0;
        }

        body.is-active[data-panel-surface='focus-search'] .focus-stage-card,
        body.is-active[data-panel-surface='semantic-dive'] .focus-stage-card {
            max-height: min(38dvh, 310px);
            overflow-y: auto;
            padding: 11px 9px 9px;
            border-radius: 20px 20px 0 0;
        }

        body.is-active[data-panel-surface='focus-search'] .focus-stage-journey.active {
            min-height: 52px;
            max-height: 68px;
            overflow-y: auto;
            margin: 0 0 6px;
            padding: 5px 6px;
            border-radius: 7px;
        }

        body.is-active[data-panel-surface='focus-search'] .focus-stage-journey-btn {
            width: 44px;
            min-width: 44px;
            min-height: 44px;
            height: 44px;
            border-radius: 7px;
        }

        body.is-active[data-panel-surface='focus-search'] .focus-stage-dive-btn {
            min-height: 44px;
            height: 44px;
            margin: 0 auto 10px;
            padding: 8px 10px;
            border-radius: 7px;
            font-size: 11px;
        }

        body.is-active[data-panel-surface='semantic-dive'] .focus-stage-card {
            max-height: min(24dvh, 205px);
            overflow-y: hidden;
        }

        body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-controls {
            overflow-y: auto;
        }
    }

    /* When trail is idle, focus-stage sits above the info-panel peek sheet */
    body.is-active[data-panel-surface='focus-search']:not([data-focus-panel-mode='field-node'])[data-trail-state='idle']
        #focus-stage.focus-stage {
        bottom: calc(108px + env(safe-area-inset-bottom, 0px));
        max-height: min(39dvh, 330px);
        overflow: hidden;
    }

    /* Field node also needs to clear the info-panel in focus-search idle state */
    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node'][data-trail-state='idle']
        #focus-stage.focus-stage {
        bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    }

    /* When trail is active, info-panel is hidden, so focus-stage returns to bottom */
    body.is-active[data-panel-surface='focus-search']:not([data-focus-panel-mode='field-node'])[data-trail-state='active']
        #focus-stage.focus-stage {
        bottom: max(0px, env(safe-area-inset-bottom, 0px));
        max-height: min(39dvh, 330px);
        overflow: hidden;
    }

    /* Focus-search active trail uses two mobile lanes:
       the selected business card stays readable at the top, and journey
       chrome starts below it. Without this explicit contract the fixed
       focus card can be clipped above the viewport while journey chrome
       cuts across the card footer/contact rows. */
    body[data-panel-surface='focus-search'][data-trail-state='active']
        .focus-card.focus-stage-card {
        top: max(10px, env(safe-area-inset-top, 0px));
        bottom: auto;
        max-height: min(22dvh, 186px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body[data-panel-surface='focus-search'][data-trail-state='active']
        #journey-chrome.journey-chrome {
        position: fixed;
        top: clamp(214px, 27dvh, 240px);
        bottom: auto;
        max-height: calc(100dvh - 294px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }

    /* Field node returns to bottom when trail is active */
    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node'][data-trail-state='active']
        #focus-stage.focus-stage {
        bottom: env(safe-area-inset-bottom, 0px);
    }

    body.is-active[data-panel-surface='focus-search']:not([data-focus-panel-mode='field-node']) .focus-stage-card {
        max-height: 100%;
        overflow-y: auto;
        padding: 18px 16px 12px;
        border-radius: 24px;
        border-left: var(--glass-border);
        border-right: var(--glass-border);
        border-bottom: var(--glass-border);
    }

    body.is-active[data-panel-surface='focus-search']:not([data-focus-panel-mode='field-node'])
        #focus-stage
        .focus-pocket {
        max-height: min(42.5dvh, 360px);
    }

    /* ----------------------------------------------------------------
       Short-landscape (≤900px wide, ≤420px tall): cap focus-stage
       height so the card bottom clears the viewport with room for
       the safe-area inset and a 6px visual breathing gap.
       ---------------------------------------------------------------- */
    @media (max-width: 900px) and (max-height: 420px) {
        body.is-active[data-panel-surface='focus-search'] .focus-stage,
        body.is-active[data-panel-surface='semantic-dive'] .focus-stage {
            max-height: calc(100dvh - 96px);
        }

        body.is-active[data-panel-surface='focus-search'] .focus-stage-card,
        body.is-active[data-panel-surface='semantic-dive'] .focus-stage-card {
            max-height: 100%;
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        body.is-active[data-panel-surface='focus-search'] .focus-stage-note,
        body.is-active[data-panel-surface='focus-search'] .focus-stage-actions,
        body.is-active[data-panel-surface='focus-search'] .focus-stage-journey.active {
            display: none;
        }

        body.is-active[data-panel-surface='focus-search'] .focus-stage-neighbor-list {
            max-height: 118px;
        }
    }
} /* end @media focus/dive states */

@media (max-width: 900px) and (max-height: 420px) and (orientation: landscape) {
    body.is-active:is(
            [data-panel-surface='focus'],
            [data-panel-surface='focus-search'],
            [data-panel-surface='semantic-dive']
        )
        .journey-compass[data-density='compact'] {
        --journey-compact-rail-display: none;
        max-height: 64px;
        overflow: hidden;
        padding: 10px 12px;
        grid-template-columns: minmax(0, 1fr);
    }

    body.is-active:is(
            [data-panel-surface='focus'],
            [data-panel-surface='focus-search'],
            [data-panel-surface='semantic-dive']
        )
        .journey-compass[data-density='compact']
        > :not(.journey-compass-copy) {
        display: none;
    }

    body.is-active:is(
            [data-panel-surface='focus'],
            [data-panel-surface='focus-search'],
            [data-panel-surface='semantic-dive']
        )
        .journey-compass[data-density='compact']
        #journey-compass-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
    }

    body.is-active[data-panel-surface='focus'] .info-panel,
    body.is-active[data-panel-surface='focus-search'] .info-panel,
    body.is-active[data-panel-surface='semantic-dive'] .info-panel {
        display: none;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    body.is-active[data-panel-surface='focus'] .focus-stage,
    body.is-active[data-panel-surface='focus-search'] .focus-stage,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage,
    body.is-active #focus-stage.active {
        left: 10px;
        right: 10px;
        top: auto;
        bottom: max(0px, env(safe-area-inset-bottom, 0px));
        width: auto;
        max-height: calc(100dvh - 96px);
        overflow: hidden;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-panel-surface^='map-']
        )
        #focus-stage.focus-stage {
        display: block;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Field-node flex-column override: must appear after the display:block
       Svelte override above so cascade order restores flex layout.
       margin-top:auto on the card anchors it to the viewport bottom. */
    body.is-active[data-panel-surface='focus-search'][data-focus-panel-mode='field-node']
        #focus-stage.focus-stage {
        display: flex;
        flex-direction: column;
    }

    body.is-active[data-panel-surface='focus'] .focus-stage-card,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-card,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-card,
    body.is-active #focus-stage.active .focus-stage-card {
        box-sizing: border-box;
        color: rgba(249, 254, 255, 0.94);
        display: var(--short-landscape-focus-card-display, block);
        height: auto;
        min-height: var(--short-landscape-focus-card-min-height, min(146px, calc(100dvh - 238px)));
        max-height: var(--short-landscape-focus-card-max-height, min(154px, calc(100dvh - 220px)));
        overflow-y: var(--short-landscape-focus-card-overflow-y, auto);
        gap: var(--short-landscape-focus-card-gap, normal);
        grid-template-columns: var(--short-landscape-focus-card-grid-template-columns, none);
        align-items: var(--short-landscape-focus-card-align-items, normal);
        padding: var(--short-landscape-focus-card-padding, 14px 16px 16px);
        border-radius: 20px;
    }

    body.is-active[data-panel-surface='focus-search'] #focus-stage.focus-stage {
        bottom: max(0px, env(safe-area-inset-bottom, 0px));
    }

    body.is-active[data-panel-surface='semantic-dive'] #focus-stage.focus-stage {
        bottom: max(6px, env(safe-area-inset-bottom, 0px));
    }

    body.is-active[data-panel-surface='focus'] .focus-stage-what,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-what,
    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-what {
        color: rgba(225, 245, 243, 0.88);
    }

    body.is-active[data-panel-surface='focus'] .focus-stage-note,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-note,
    body.is-active[data-panel-surface='focus'] .focus-stage-what,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-what,
    body.is-active[data-panel-surface='focus'] .focus-stage-meta,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-meta,
    body.is-active[data-panel-surface='focus']:not([data-focus-panel-mode='field-node']) .focus-stage-journey-meta,
    body.is-active[data-panel-surface='focus-search']:not([data-focus-panel-mode='field-node']) .focus-stage-journey-meta,
    body.is-active[data-panel-surface='focus']:not([data-focus-panel-mode='field-node']) .focus-stage-journey-progress,
    body.is-active[data-panel-surface='focus-search']:not([data-focus-panel-mode='field-node']) .focus-stage-journey-progress,
    body.is-active[data-panel-surface='focus']:not([data-focus-panel-mode='field-node']) .focus-stage-next,
    body.is-active[data-panel-surface='focus-search']:not([data-focus-panel-mode='field-node']) .focus-stage-next,
    body.is-active[data-panel-surface='focus'] .focus-thread-inspector,
    body.is-active[data-panel-surface='focus-search'] .focus-thread-inspector,
    body.is-active[data-panel-surface='focus']:not([data-focus-panel-mode='field-node']) #trail-controls,
    body.is-active[data-panel-surface='focus-search']:not([data-focus-panel-mode='field-node']) #trail-controls,
    body.is-active[data-panel-surface='focus']:not([data-focus-panel-mode='field-node']) .trail-controls,
    body.is-active[data-panel-surface='focus-search']:not([data-focus-panel-mode='field-node']) .trail-controls,
    body.is-active[data-panel-surface='focus']:not([data-focus-panel-mode='field-node']) .focus-stage-actions,
    body.is-active[data-panel-surface='focus-search']:not([data-focus-panel-mode='field-node']) .focus-stage-actions,
    body.is-active[data-panel-surface='focus'] .focus-stage-journey.active,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-journey.active {
        display: none;
    }

    body.is-active[data-panel-surface='focus'] .focus-thread-inspector.active,
    body.is-active[data-panel-surface='focus-search'] .focus-thread-inspector.active {
        display: grid;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search']):not(
            [data-thread-inspect-surface='idle']
        )
        .focus-thread-inspector.active
        .focus-thread-inspector-copy {
        display: none;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
    }

    body.is-active[data-panel-surface='focus'][data-thread-inspect-surface='idle'] .focus-thread-inspector,
    body.is-active[data-panel-surface='focus-search'][data-thread-inspect-surface='idle'] .focus-thread-inspector,
    body[data-panel-surface='focus'][data-thread-inspect-surface='idle'] .focus-thread-inspector,
    body[data-panel-surface='focus-search'][data-thread-inspect-surface='idle'] .focus-thread-inspector,
    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search'])
        .focus-thread-inspector[aria-hidden='true']:not(.active) {
        display: none;
    }

    body.is-active[data-panel-surface='focus-search'] .info-panel {
        display: none;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    body.is-active #info-panel.info-panel {
        box-sizing: border-box;
        left: max(10px, env(safe-area-inset-left, 0px));
        right: max(10px, env(safe-area-inset-right, 0px));
        bottom: max(10px, env(safe-area-inset-bottom, 0px));
        width: calc(100vw - max(10px, env(safe-area-inset-left, 0px)) - max(10px, env(safe-area-inset-right, 0px)));
        max-width: calc(100vw - max(10px, env(safe-area-inset-left, 0px)) - max(10px, env(safe-area-inset-right, 0px)));
        max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }

    body.is-active:not(
            [data-panel-surface^='map-']
        )[data-panel-surface='focus-search'][data-focus-panel-mode='field-node']
        #focus-stage
        .focus-stage-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    body.is-active[data-panel-surface='focus'] .focus-stage-neighbors.active,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-neighbors.active {
        display: block;
        margin-top: 0;
        padding-top: 0;
        max-height: 54px;
        overflow: hidden;
        border-top-width: 1px;
        scrollbar-width: none;
    }

    body.is-active[data-panel-surface='focus'] .focus-stage-neighbors.active::-webkit-scrollbar,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-neighbors.active::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    body.is-active[data-panel-surface='focus'] .focus-stage-neighbors.active .focus-stage-neighbor-header,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-neighbors.active .focus-stage-neighbor-header {
        display: none;
    }

    body.is-active[data-panel-surface='focus'] .focus-stage-neighbor-list,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-neighbor-list {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        max-height: 54px;
        margin-top: 0;
        overflow: hidden;
        scrollbar-width: none;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search'])
        .focus-stage-neighbor-list
        > :nth-child(n + 2) {
        display: none;
    }

    body.is-active[data-panel-surface='focus'] .focus-stage-neighbor-pill,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-neighbor-pill {
        min-height: 54px;
        height: 54px;
        max-height: 54px;
    }

    body.is-active[data-panel-surface='focus'] .focus-stage-neighbor-main,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-neighbor-main {
        padding-block: 6px;
    }

    body.is-active:not([data-panel-surface='semantic-dive']) .focus-stage-inside-status,
    body.is-active:not([data-panel-surface='semantic-dive']) .focus-stage-inside-controls {
        display: none;
    }

    body.is-active[data-panel-surface='semantic-dive'] #focus-stage-auxiliary-surfaces {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 0.82fr) minmax(260px, 1.18fr);
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-controls {
        position: relative;
        z-index: 1200;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-column: 2;
        align-items: stretch;
        gap: 7px;
        margin: 0;
    }

    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-next.focus-stage-inside-btn:not([hidden]) {
        grid-column: auto;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-btn {
        position: relative;
        z-index: 1201;
        box-sizing: border-box;
        min-height: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.is-active[data-panel-surface='semantic-dive'] #focus-stage.focus-stage.active,
    body.is-active[data-panel-surface='semantic-dive'] #focus-stage.focus-stage {
        display: block;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        --short-landscape-focus-card-display: grid;
        --short-landscape-focus-card-min-height: 96px;
        --short-landscape-focus-card-max-height: min(104px, calc(100dvh - 202px));
        --short-landscape-focus-card-overflow-y: hidden;
        --short-landscape-focus-card-gap: 10px;
        --short-landscape-focus-card-grid-template-columns: minmax(0, 0.82fr) minmax(280px, 1.18fr);
        --short-landscape-focus-card-align-items: center;
        --short-landscape-focus-card-padding: 12px 16px;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-status {
        display: grid;
        grid-column: 1;
        min-height: 30px;
        margin: 0;
        padding: 5px 10px;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-status-copy {
        display: block;
        font-size: 9.5px;
        line-height: 1.15;
        letter-spacing: 0;
        text-transform: none;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.is-active[data-panel-surface='semantic-dive'] #focus-stage .focus-stage-name,
    body.is-active[data-panel-surface='semantic-dive'] #focus-stage .focus-stage-what,
    body.is-active[data-panel-surface='semantic-dive'] #focus-stage .focus-stage-meta,
    body.is-active[data-panel-surface='semantic-dive'] #focus-stage .focus-stage-note,
    body.is-active[data-panel-surface='semantic-dive'] #focus-stage .focus-stage-kicker,
    body.is-active[data-panel-surface='semantic-dive'] #focus-stage .focus-stage-actions,
    body.is-active[data-panel-surface='semantic-dive'] #focus-stage .focus-stage-dive-btn,
    body.is-active[data-panel-surface='semantic-dive'] #focus-stage .focus-stage-journey,
    body.is-active[data-panel-surface='semantic-dive'] #focus-stage .focus-stage-neighbors,
    body.is-active[data-panel-surface='semantic-dive'] #focus-thread-inspector {
        display: none;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-journey-btn,
    body.is-active[data-panel-surface='semantic-dive'] #trail-controls,
    body.is-active[data-panel-surface='semantic-dive'] .trail-controls {
        display: none;
    }
}

/* Relocated Semantic Dive mobile rules (Slice 4) */
@media (max-width: 768px) {
    body[data-panel-surface='semantic-dive'] .info-panel {
        transform: translateX(calc(-100% + 24px));
        opacity: 0.12;
    }

    body[data-panel-surface='semantic-dive'] .focus-stage {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: var(--z-panels-elevated);
        pointer-events: none;
    }

    body[data-panel-surface='semantic-dive'] .focus-stage-card {
        position: relative;
        box-sizing: border-box;
        padding: 18px 14px 10px;
        margin-bottom: calc(env(safe-area-inset-bottom, 0px));
        border-radius: 22px 22px 0 0;
        border-width: 1px 0 0 0;
        border-color: rgba(var(--color-primary-tint-rgb), 0.2);
        background:
            radial-gradient(circle at 50% 0%, rgba(var(--color-primary-tint-rgb), 0.12), transparent 44%),
            linear-gradient(180deg, rgba(8, 18, 25, 0.82), rgba(5, 12, 18, 0.9));
        box-shadow:
            0 -8px 30px var(--shadow-penumbra),
            inset 0 1px 0 var(--glass-reflection-muted);
        backdrop-filter: blur(18px) saturate(1.12);
        pointer-events: auto;
        max-height: 196px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    body[data-panel-surface='semantic-dive'] .focus-stage-card::after {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 34px;
        height: 3px;
        border-radius: 2px;
        background: var(--glass-reflection-strong);
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-journey.active {
        min-height: 42px;
        margin-top: 6px;
        padding: 6px 10px;
        border-radius: 16px;
        background: rgba(7, 17, 22, 0.38);
        box-shadow: none;
    }

    /* Inside control buttons — warm amber gradient on Next Stop */
    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-next.focus-stage-inside-btn {
        border-color: rgba(255, 210, 77, 0.32);
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 210, 77, 0.18), transparent 55%),
            linear-gradient(180deg, rgba(42, 32, 10, 0.38), rgba(12, 18, 24, 0.42));
        box-shadow:
            inset 0 1px 0 var(--glass-reflection-soft),
            0 4px 14px var(--shadow-antumbra);
        color: rgba(255, 235, 180, 0.96);
    }

    /* County button: subtle exit-style treatment when inside mode active */
    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-map.focus-stage-inside-btn,
    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-county.focus-stage-inside-btn {
        border-color: rgba(var(--color-primary-tint-rgb), 0.22);
        background:
            radial-gradient(circle at 50% 0%, rgba(var(--color-primary-tint-rgb), 0.1), transparent 55%),
            rgba(5, 16, 21, 0.32);
        color: rgba(199, 238, 235, 0.82);
    }

    /* Disabled state: Next Stop muted amber (trail complete) */
    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-next.focus-stage-inside-btn:disabled {
        border-color: rgba(255, 210, 77, 0.14);
        background: rgba(255, 210, 77, 0.06);
        color: rgba(255, 210, 77, 0.38);
        box-shadow: none;
        pointer-events: none;
    }

    /* Disabled state: County button muted but still legible */
    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-map.focus-stage-inside-btn:disabled,
    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-county.focus-stage-inside-btn:disabled {
        border-color: rgba(var(--color-primary-tint-rgb), 0.1);
        background: rgba(var(--color-primary-tint-rgb), 0.04);
        color: rgba(199, 238, 235, 0.36);
        box-shadow: none;
        pointer-events: none;
    }

    /* Mobile focus chip overrides */
    body.is-active[data-panel-surface='focus'] .focus-stage-chip,
    body.is-active[data-panel-surface='focus-search'] .focus-stage-chip {
        padding: 3px 6px;
        font-size: 7px;
        letter-spacing: 0.3px;
    }

    @keyframes insideStatusPulse {
        0%,
        100% {
            opacity: 0.7;
            transform: translateY(-50%) scale(0.9);
        }
        50% {
            opacity: 1;
            transform: translateY(-50%) scale(1.05);
        }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-status::before {
            animation: none;
        }
    }
}

/* Short-landscape (≤900px wide, ≤430px tall): suppress #btn-share-view
   via its own ID-scoped rule so the share button is hidden without
   inflating the .controls selector's specificity. Contract:
   tests/mobile-chrome-ownership-contract.mjs. */
@media (max-width: 900px) and (max-height: 430px) and (orientation: landscape) {
    body.is-active:is(
            [data-panel-surface='focus'],
            [data-panel-surface='focus-search'],
            [data-panel-surface='semantic-dive']
        )
        #btn-share-view {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search'])
        .focus-stage-dive-btn:not([hidden]) {
        position: fixed;
        z-index: var(--z-compass);
        left: max(12px, env(safe-area-inset-left, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        bottom: max(10px, env(safe-area-inset-bottom, 0px));
        width: auto;
        height: 44px;
        min-height: 44px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        pointer-events: auto;
    }

    body[data-panel-surface='focus-search'] .focus-stage-dive-btn:not([hidden]) {
        position: fixed;
        z-index: var(--z-compass);
        left: max(12px, env(safe-area-inset-left, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        bottom: max(10px, env(safe-area-inset-bottom, 0px));
        width: auto;
        height: 44px;
        min-height: 44px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        pointer-events: auto;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search'])
        .focus-stage-dive-btn:not([hidden])
        .focus-stage-dive-copy {
        display: none;
    }

    body.is-active:is([data-panel-surface='focus'], [data-panel-surface='focus-search'])
        .focus-stage-dive-btn:not([hidden])
        .focus-stage-dive-label {
        display: block;
        line-height: 1;
        white-space: nowrap;
    }

    body.is-active[data-active-view='galaxy']:is([data-panel-surface='focus'], [data-panel-surface='focus-search'])
        #canvas-container {
        filter: brightness(1.75) contrast(1.35) saturate(1.25);
    }

    body.is-active[data-active-view='galaxy']:is([data-panel-surface='focus'], [data-panel-surface='focus-search'])
        #canvas-container::after {
        opacity: 0.42;
    }

    body[data-panel-surface='focus'] #info-panel.info-panel {
        pointer-events: none;
    }

    body[data-panel-surface='focus'] #focus-stage.focus-stage {
        position: fixed;
        inset: 0;
        z-index: var(--z-compass);
        width: 100vw;
        height: 100dvh;
        pointer-events: none;
    }

    body[data-panel-surface='focus'] #canvas-container,
    body[data-panel-surface='focus'] #canvas-container canvas {
        pointer-events: none;
    }

    body.is-active[data-active-view='galaxy'][data-panel-surface='semantic-dive'] #focus-stage.focus-stage {
        position: fixed;
        inset: 0;
        z-index: var(--z-compass);
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100dvh;
        overflow: visible;
        pointer-events: none;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-status {
        position: fixed;
        top: max(6px, env(safe-area-inset-top, 0px));
        left: max(10px, env(safe-area-inset-left, 0px));
        right: max(10px, env(safe-area-inset-right, 0px));
        z-index: var(--z-max);
        width: auto;
        min-height: 30px;
        margin: 0;
        pointer-events: auto;
    }

    body.is-active[data-panel-surface='semantic-dive'] .focus-stage-inside-controls {
        position: fixed;
        top: max(42px, calc(36px + env(safe-area-inset-top, 0px)));
        left: max(10px, env(safe-area-inset-left, 0px));
        right: max(10px, env(safe-area-inset-right, 0px));
        z-index: var(--z-max);
        width: auto;
        min-height: 44px;
        height: 44px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
        pointer-events: auto;
    }

    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-next.focus-stage-inside-btn,
    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-map.focus-stage-inside-btn,
    body.is-active[data-panel-surface='semantic-dive'] #btn-inside-county.focus-stage-inside-btn {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        min-width: 0;
        height: 44px;
        min-height: 44px;
        margin: 0;
    }
}