/* ============================================================================
   private-seller-scene4-mobile.css   (v3 — simple, defensive, content-first)
   ----------------------------------------------------------------------------
   Mobile redesign for Scene 4 (Value Intelligence — "Shape your property's
   market identity"). Load LAST in _Layout.cshtml so it wins the cascade.

   v2 hid all the persona swimlanes on phones because the upstream focus-mode
   rule (.ps-cluster {display:none} at ≤900px) and my own sticky-tab overlay
   together produced an empty canvas. v3 throws that complexity out:

     • The entire .ps-workbench-left becomes the natural scroll container.
     • EVERY persona swimlane is forced visible — no focus mode on mobile.
     • Cluster tabs are HIDDEN on phones (they were the trigger for focus
       mode, and the user can just scroll through the list naturally).
     • The right rail (energy core / terminal / narrative) is hidden too —
       intelligence belongs on desktop; the phone gets a clean cluster list.
     • Visible orange scrollbar so users see there's more below.
     • Each persona becomes a native iOS-settings-style grouped card with
       44px+ chip tap targets and a glassy bottom-pinned Back / Continue nav.
   ============================================================================ */

/* ── 0. RESET any earlier overlay/sticky tricks (v2 fallout) ─────────────── */
@media (max-width: 768px) {
    #psScene3 .ps-workbench-canvas::after,
    #psScene3 .ps-workbench-canvas::before {
        display: none !important;
        content: none !important;
    }
}

/* ============================================================================
   1. SCENE SHELL — single column, the LEFT pane is the scroll container
   ============================================================================ */
@media (max-width: 768px) {

    #psScene3.ps-scene-value,
    .ps-scene-value {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        background: linear-gradient(180deg, #fafbff 0%, #ffffff 38%, #fff9f2 100%) !important;
        position: relative;
    }

        .ps-scene-value::before {
            display: none !important;
        }

        /* LEFT pane = fixed-height flex column. Header pinned at top, canvas
       scrolls in the middle, foot pinned at bottom. Mirrors the desktop UX. */
        #psScene3 > .ps-workbench-left,
        .ps-scene-value > .ps-left.ps-workbench-left {
            flex: 1 1 auto !important;
            width: 100% !important;
            max-width: 100% !important;
            min-height: 0 !important;
            height: 100% !important;
            max-height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important; /* the inner canvas is the scroller */
            padding: 14px 14px 0 !important;
            gap: 10px !important;
            position: relative;
            z-index: 1;
        }
}

/* ============================================================================
   2. HIDE the cluster tabs AND right rail on phones
   The cluster tabs trigger focus-mode which hid all but one swimlane.
   Without tabs the user just scrolls — the natural mobile gesture.
   ============================================================================ */
@media (max-width: 768px) {

    #psScene3 .ps-cluster-tabs,
    #psScene3 #psClusterTabs {
        display: none !important;
    }

    #psScene3 > .ps-right.ps-workbench-right,
    #psScene3 .ps-workbench-right,
    .ps-scene-value > .ps-right {
        display: none !important;
    }
}

/* ============================================================================
   3. HEADER — breadcrumb + title + tier pill (pinned, non-scrolling)
   Header sits as flex: 0 0 auto inside the .ps-workbench-left flex column,
   so it stays put while .ps-workbench-canvas scrolls beneath it. Mirrors
   the desktop UX where only the canvas moves.
   ============================================================================ */
@media (max-width: 768px) {

    #psScene3 .ps-breadcrumb {
        flex: 0 0 auto !important;
        align-self: flex-start;
        margin: 0 0 4px !important;
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
        background: rgba(245, 130, 32, 0.08) !important;
        border: 1px solid rgba(245, 130, 32, 0.18) !important;
        border-radius: 999px !important;
    }

    #psScene3 .ps-progress {
        flex: 0 0 auto !important;
        margin: 0 0 2px !important;
    }

    #psScene3 .ps-workbench-top {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    #psScene3 .ps-workbench-heading .ps-scene-label {
        font-size: 0.66rem !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase;
        margin: 0 0 4px !important;
        padding: 4px 10px !important;
        align-self: flex-start;
    }

    #psScene3 .ps-workbench-heading .ps-question {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
        margin: 2px 0 4px !important;
        letter-spacing: -0.015em;
        text-wrap: pretty;
    }

    #psScene3 .ps-workbench-heading .ps-subtitle {
        display: block !important;
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
        color: #64748B !important;
        margin: 0 0 4px !important;
    }

    /* Tier pill — full-width inline strip */
    #psScene3 .ps-tier-pill {
        align-self: stretch !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 14px !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #fff8f1 0%, #ffffff 100%) !important;
        border: 1px solid rgba(245, 130, 32, 0.18) !important;
        box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 12px rgba(15, 23, 42, 0.04);
    }

    #psScene3 .ps-tier-pill-icon {
        width: 34px !important;
        height: 34px !important;
        flex-shrink: 0;
    }

    #psScene3 .ps-tier-pill-meta {
        flex: 1 1 auto;
        min-width: 0;
    }

    #psScene3 .ps-tier-pill-label {
        font-size: 0.6rem !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase;
        color: #94A3B8 !important;
    }

    #psScene3 .ps-tier-pill-name {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
    }

    #psScene3 .ps-tier-pill-count {
        font-size: 1.05rem !important;
        font-weight: 900 !important;
        color: var(--sj-orange, #F58220) !important;
    }

        #psScene3 .ps-tier-pill-count small {
            font-size: 0.7em !important;
            color: #94A3B8 !important;
        }
}

/* ============================================================================
   4. THE CANVAS — content flows naturally inside the scrolling LEFT pane
   ============================================================================ */
@media (max-width: 768px) {

    #psScene3 .ps-workbench-canvas {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 6px 2px 16px 0 !important;
        margin: 4px -2px 0 0 !important;
        background: transparent !important;
        border: 0 !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(245, 130, 32, 0.55) rgba(245, 130, 32, 0.08);
    }

        #psScene3 .ps-workbench-canvas::-webkit-scrollbar {
            width: 6px !important;
            background: transparent;
        }

        #psScene3 .ps-workbench-canvas::-webkit-scrollbar-track {
            background: rgba(245, 130, 32, 0.06);
            border-radius: 999px;
        }

        #psScene3 .ps-workbench-canvas::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(245, 130, 32, 0.6), rgba(245, 130, 32, 0.9));
            border-radius: 999px;
        }
}

/* ============================================================================
   5. SWIMLANES — FORCE every persona visible (defeat focus-mode), redesign
      as native iOS-settings-style grouped cards
   ============================================================================ */
@media (max-width: 768px) {

    /* Defeat any focus-mode display:none from older rules */
    #psScene3 .ps-workbench-canvas .ps-swimlane,
    #psScene3 .ps-workbench-canvas .ps-cluster,
    #psScene3 .ps-workbench-canvas .ps-swimlane:not(.is-focus),
    #psScene3 .ps-workbench-canvas .ps-cluster:not(.is-focus) {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Swimlane card — stacked column on mobile, FULL colored border */
    #psScene3 .ps-swimlane,
    #psScene3 .ps-cluster {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        background: #ffffff !important;
        /* Full tinted border on all four sides */
        border: 1.5px solid color-mix(in srgb, var(--cluster-tint, #F58220) 32%, transparent) !important;
        border-left-width: 1.5px !important;
        border-radius: 16px !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px -10px rgba(15, 23, 42, 0.08);
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
        position: relative;
    }

        #psScene3 .ps-swimlane.is-active,
        #psScene3 .ps-cluster.is-active {
            border-color: var(--cluster-tint, #F58220) !important;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 4px rgba(15, 23, 42, 0.04), 0 10px 26px -10px color-mix(in srgb, var(--cluster-tint, #F58220) 35%, transparent);
        }

        /* Remove the left-edge accent bar — we now have a full border */
        #psScene3 .ps-swimlane::before,
        #psScene3 .ps-cluster::before {
            display: none !important;
            content: none !important;
        }

    /* LANE HEAD — full-width row with icon + name + count */
    #psScene3 .ps-lane-head,
    #psScene3 .ps-cluster-head {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px 14px 10px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
        background: transparent !important;
    }

    #psScene3 .ps-lane-icon,
    #psScene3 .ps-cluster-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 1.05rem !important;
        border-radius: 12px !important;
        background: color-mix(in srgb, var(--cluster-tint, #F58220) 14%, #ffffff) !important;
        color: var(--cluster-tint, #F58220) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0;
    }

    #psScene3 .ps-swimlane.is-active .ps-lane-icon,
    #psScene3 .ps-cluster.is-active .ps-cluster-icon {
        background: var(--cluster-tint, #F58220) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--cluster-tint, #F58220) 35%, transparent);
    }

    #psScene3 .ps-lane-meta,
    #psScene3 .ps-cluster-meta {
        flex: 1 1 auto !important;
        min-width: 0;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        align-items: flex-start !important;
    }

    #psScene3 .ps-lane-name,
    #psScene3 .ps-cluster-name {
        font-size: 0.84rem !important;
        font-weight: 800 !important;
        line-height: 1.22 !important;
        letter-spacing: -0.01em;
        color: var(--sj-dark, #1F2937) !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        text-overflow: clip !important;
        width: 100% !important;
        display: block !important;
    }

    #psScene3 .ps-lane-blurb,
    #psScene3 .ps-cluster-blurb {
        font-size: 0.7rem !important;
        line-height: 1.35 !important;
        color: #64748B !important;
        margin-top: 2px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 100% !important;
    }

    /* Right side stat — count + thin bar */
    #psScene3 .ps-lane-stat {
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        gap: 4px !important;
        min-width: 44px !important;
        flex-shrink: 0;
        padding-top: 2px;
    }

    #psScene3 .ps-lane-stat-num,
    #psScene3 .ps-cluster-pct {
        font-size: 0.95rem !important;
        font-weight: 900 !important;
        color: var(--cluster-tint, #F58220) !important;
        letter-spacing: -0.02em;
        background: transparent !important;
        padding: 0 !important;
    }

        #psScene3 .ps-lane-stat-num small {
            font-size: 0.6em !important;
            color: #94A3B8 !important;
            font-weight: 700 !important;
        }

    #psScene3 .ps-lane-stat-bar {
        width: 48px !important;
        height: 4px !important;
        background: rgba(15, 23, 42, 0.06) !important;
        border-radius: 999px !important;
        overflow: hidden;
    }

    #psScene3 .ps-lane-stat-fill {
        background: linear-gradient(90deg, color-mix(in srgb, var(--cluster-tint, #F58220) 70%, #ffffff) 0%, var(--cluster-tint, #F58220) 100%) !important;
        border-radius: 999px;
    }

    /* LANE TRACK / CHIP FLOW — the chip well */
    #psScene3 .ps-lane-track,
    #psScene3 .ps-chip-flow,
    #psScene3 .ps-feature-chips {
        flex: 1 1 auto !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-content: flex-start !important;
        gap: 8px !important;
        padding: 12px 14px 16px !important;
        overflow: visible !important;
        background: linear-gradient(180deg, rgba(248, 250, 252, 0.45) 0%, rgba(248, 250, 252, 0) 100%);
    }
}

/* ============================================================================
   6. CHIPS — big tap targets, native pill feel
   ============================================================================ */
@media (max-width: 768px) {

    #psScene3 .ps-lane-chip,
    #psScene3 .ps-feat-chip,
    #psScene3 .ps-feature-chip {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        min-height: 36px !important;
        padding: 7px 12px 7px 10px !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
        border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
        background: #ffffff !important;
        color: #334155 !important;
        gap: 6px !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(15, 23, 42, 0.03);
        transition: transform 0.16s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        line-height: 1.2;
    }

        #psScene3 .ps-lane-chip i,
        #psScene3 .ps-feat-chip i,
        #psScene3 .ps-feature-chip i {
            font-size: 0.95em !important;
            color: var(--cluster-tint, #F58220);
        }

        #psScene3 .ps-lane-chip:active,
        #psScene3 .ps-feat-chip:active,
        #psScene3 .ps-feature-chip:active {
            transform: scale(0.96);
        }

        #psScene3 .ps-lane-chip.selected,
        #psScene3 .ps-feat-chip.selected,
        #psScene3 .ps-feature-chip.selected {
            background: linear-gradient(135deg, var(--cluster-tint, #F58220) 0%, color-mix(in srgb, var(--cluster-tint, #F58220) 82%, #ffffff) 100%) !important;
            border-color: var(--cluster-tint, #F58220) !important;
            color: #ffffff !important;
            box-shadow: 0 4px 14px color-mix(in srgb, var(--cluster-tint, #F58220) 35%, transparent);
        }

            #psScene3 .ps-lane-chip.selected i,
            #psScene3 .ps-feat-chip.selected i,
            #psScene3 .ps-feature-chip.selected i {
                color: #ffffff !important;
            }
}

/* ============================================================================
   7. FOOT — sticky bottom-pinned nav, glassy, safe-area aware
   ============================================================================ */
@media (max-width: 768px) {

    #psScene3 .ps-workbench-foot {
        flex: 0 0 auto !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 12 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 10px -14px 0 !important;
        padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 38%, #ffffff 100%) !important;
        border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    #psScene3 .ps-workbench-nudge {
        display: none !important;
    }

    #psScene3 .ps-btn-ghost {
        flex: 0 0 auto !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.1) !important;
        font-weight: 700 !important;
        font-size: 0.85rem !important;
        color: var(--sj-dark, #1F2937) !important;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    #psScene3 .ps-btn-orb {
        flex: 1 1 auto !important;
        justify-content: center !important;
        min-height: 48px !important;
        padding: 0 18px !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, var(--sj-orange, #F58220) 0%, var(--sj-orange-deep, #E07210) 100%) !important;
        color: #ffffff !important;
        border: 0 !important;
        font-weight: 800 !important;
        font-size: 0.92rem !important;
        box-shadow: 0 6px 20px -6px rgba(245, 130, 32, 0.55), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
        gap: 8px;
    }

        #psScene3 .ps-btn-orb:active {
            transform: scale(0.985);
        }
}

/* ============================================================================
   8. TINY PHONES (≤380px) — squeeze chrome a little tighter
   ============================================================================ */
@media (max-width: 380px) {

    #psScene3 .ps-workbench-heading .ps-question {
        font-size: 1.12rem !important;
    }

    #psScene3 .ps-workbench-heading .ps-subtitle {
        font-size: 0.74rem !important;
    }

    #psScene3 .ps-tier-pill {
        padding: 9px 12px !important;
        gap: 10px !important;
    }

    #psScene3 .ps-tier-pill-icon {
        width: 30px !important;
        height: 30px !important;
    }

    #psScene3 .ps-lane-head,
    #psScene3 .ps-cluster-head {
        padding: 12px 14px 10px !important;
        gap: 10px !important;
    }

    #psScene3 .ps-lane-icon,
    #psScene3 .ps-cluster-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    #psScene3 .ps-lane-name,
    #psScene3 .ps-cluster-name {
        font-size: 0.9rem !important;
    }

    #psScene3 .ps-lane-blurb,
    #psScene3 .ps-cluster-blurb {
        font-size: 0.7rem !important;
        -webkit-line-clamp: 2;
    }

    #psScene3 .ps-lane-track,
    #psScene3 .ps-chip-flow,
    #psScene3 .ps-feature-chips {
        padding: 10px 12px 14px !important;
        gap: 6px !important;
    }

    #psScene3 .ps-lane-chip,
    #psScene3 .ps-feat-chip,
    #psScene3 .ps-feature-chip {
        padding: 8px 12px 8px 10px !important;
        font-size: 0.78rem !important;
        min-height: 36px !important;
    }

    #psScene3 .ps-btn-ghost span {
        display: none;
    }

    #psScene3 .ps-btn-ghost {
        min-width: 46px !important;
        padding: 0 12px !important;
    }
}

/* ============================================================================
   9. SHORT VIEWPORTS (landscape phones)
   ============================================================================ */
@media (max-width: 768px) and (max-height: 560px) {

    #psScene3 .ps-workbench-heading .ps-subtitle {
        display: none !important;
    }

    #psScene3 .ps-workbench-heading .ps-question {
        font-size: 1.05rem !important;
    }

    #psScene3 .ps-tier-pill {
        padding: 8px 12px !important;
    }

    #psScene3 .ps-breadcrumb {
        padding: 4px 9px !important;
        font-size: 0.68rem !important;
    }
}

/* ============================================================================
   9b. CONTENT-VISIBILITY SAFETY — force every persona node visible regardless
       of any upstream display:none / height:0 / overflow:hidden rule
   ============================================================================ */
@media (max-width: 768px) {

    #psScene3 .ps-swimlane,
    #psScene3 .ps-swimlane *,
    #psScene3 .ps-cluster,
    #psScene3 .ps-cluster * {
        visibility: visible !important;
        opacity: 1 !important;
    }

    #psScene3 .ps-lane-head,
    #psScene3 .ps-cluster-head {
        display: flex !important;
        height: auto !important;
        min-height: 56px !important;
    }

    #psScene3 .ps-lane-icon,
    #psScene3 .ps-cluster-icon,
    #psScene3 .ps-lane-meta,
    #psScene3 .ps-cluster-meta,
    #psScene3 .ps-lane-stat {
        display: flex !important;
    }

    #psScene3 .ps-lane-name,
    #psScene3 .ps-cluster-name,
    #psScene3 .ps-lane-blurb,
    #psScene3 .ps-cluster-blurb {
        display: block !important;
        height: auto !important;
    }

    #psScene3 .ps-lane-track,
    #psScene3 .ps-chip-flow,
    #psScene3 .ps-feature-chips {
        display: flex !important;
        height: auto !important;
        min-height: 50px !important;
    }
}

/* ============================================================================
   10. SAFETY — defeat any later absolute-positioned nav rules on mobile
   ============================================================================ */
@media (max-width: 768px) {

    #psScene3 .ps-nav,
    #psScene3 .ps-nav-dna {
        position: static !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
    }
}