/* responsive.css — mobile polish for EXISTING surfaces (Phase B, stream W2).
 *
 * This file only OVERRIDES selectors owned by other files (style.css,
 * property-page.css) via the cascade -- it must be linked AFTER both of
 * those in index.html (integrator's job, not this file's). No selector here
 * is touched outside a max-width media query, so desktop is byte-for-byte
 * unaffected: every rule below either only fires under a mobile media query,
 * or is itself scoped to a mobile-only selector (e.g. .wt- classes don't
 * exist on desktop either, but those live in watch-ui.js, not here).
 *
 * Breakpoints: 768px (tablet/phone-landscape) and 480px (phone-portrait),
 * matching the SPEC-phase-b.md punch list. style.css already has its own
 * `@media (max-width: 767px)` block for #sidebar/.house-card; this file's
 * 768px rules take over the same properties for those two selectors
 * (loaded later => cascade wins on the 1px overlap at exactly 768px, and
 * on the rest via source order for equal specificity) rather than fighting
 * it with higher-specificity hacks.
 *
 * Conservative by design: selectors whose interaction with existing JS
 * state (search-box.js suggestion dropdown positioning, map-layers.js
 * filter panel internals, deck.gl canvas sizing) wasn't verifiable by
 * reading alone are left alone rather than guessed at.
 */

@media (max-width: 768px) {

    /* --- (a) search box: full-width top bar ------------------------------ */
    /* Base rule (style.css) floats a 360px card at top-left. On a phone that
       already almost spans the viewport and can visually collide with
       #auth-widget at the top-right; turn it into an actual full-width bar
       instead, with a right-hand gutter sized to clear the auth widget. */
    #search-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        z-index: 120;
        box-sizing: border-box;
        padding: 10px 60px 10px 10px;
        background: #FFFFFF;
        border-bottom: 1px solid #E8E4DE;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    }

    /* search-box.js's own root element is `max-width: 420px` by default
       (see search-box.js's injected .sb-root rule) -- let it fill the bar. */
    #search-box .sb-root {
        max-width: none;
    }

    /* --- auth widget: shrink + stay clear of the full-width search bar --- */
    #auth-widget {
        top: 8px;
        right: 8px;
        z-index: 130;
    }

    .auth-avatar-btn {
        width: 32px;
        height: 32px;
    }

    .auth-signin-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* --- (b) filter bar: horizontal-scrollable pill row below the search bar --- */
    #filter-bar {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        transform: none;
        z-index: 100;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 8px 12px;
        gap: 8px;
        box-sizing: border-box;
    }

    #filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-group {
        flex-shrink: 0;
    }

    .filter-pill {
        white-space: nowrap;
    }

    /* Dropdowns are normally anchored under their pill (position:absolute,
       top:calc(100% + 8px)). Inside a horizontally-scrolling #filter-bar an
       absolutely-positioned descendant that pops open BELOW the scroll
       container would get clipped the moment overflow-x:auto is set on an
       ancestor (setting one axis to auto forces the other to auto too, per
       the overflow spec), so an open dropdown would be invisible rather
       than merely misplaced. Promote it to a fixed bottom sheet instead --
       it escapes the scrolling ancestor entirely (position:fixed resolves
       against the viewport as long as no ancestor introduces a transform,
       and #filter-bar's transform is removed above), and reads as a
       deliberate mobile pattern rather than a clipped popover. */
    .filter-dropdown.open {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
        min-width: 0;
        max-height: 65vh;
        overflow-y: auto;
        z-index: 260;
    }

    /* --- (c) #sidebar: bottom sheet (slide from bottom), 60vh / 92vh ----- */
    /* Overrides style.css's own `@media (max-width: 767px)` block, which
       anchors #sidebar to the TOP of the screen. Same selectors, same
       !important weight (needed to beat that block's !important), later in
       the cascade -> this wins for the width this file targets. */
    #sidebar {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 0 !important;
        border-right: none !important;
        border-top: 1px solid #E8E4DE !important;
        border-radius: 16px 16px 0 0 !important;
        transition: height 0.35s ease !important;
        z-index: 2000 !important;
    }

    #sidebar.active,
    #sidebar.expanded {
        width: 100vw !important;
    }

    #sidebar.active {
        height: 60vh !important;
    }

    #sidebar.expanded {
        height: 92vh !important;
    }

    /* Small drag-handle affordance, decorative only -- pure CSS, no markup
       change needed since it's a ::before on an element we already own via
       this override. */
    #sidebar::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: #E0DBD4;
        z-index: 1;
    }

    /* --- (e) methodology link: stays clear of the sheet ------------------ */
    /* #sidebar and #map are siblings under #site-container (see index.html),
       so the general sibling combinator reaches #methodology-link (a #map
       descendant) from #sidebar's state classes without needing a shared
       ancestor selector. Lifts the link above the sheet instead of letting
       the sheet cover it. */
    #methodology-link {
        bottom: 12px;
        right: 12px;
    }

    #sidebar.active ~ #map #methodology-link {
        bottom: calc(60vh + 12px);
    }

    #sidebar.expanded ~ #map #methodology-link {
        bottom: calc(92vh + 12px);
    }

    /* --- (d) property page: full-screen on mobile ------------------------ */
    /* property-page.css's own `@media (min-width: 720px)` block adds desktop
       chrome (20px margin, 14px radius) that would otherwise apply between
       720-768px. Reset back to edge-to-edge for the whole mobile range. */
    .pp-panel {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        margin: 0;
        border-radius: 0;
    }
}

@media (max-width: 480px) {

    #search-box {
        padding: 8px 52px 8px 8px;
    }

    #auth-widget {
        top: 6px;
        right: 6px;
    }

    .auth-avatar-btn {
        width: 28px;
        height: 28px;
    }

    #filter-bar {
        top: 52px;
        gap: 6px;
        padding: 6px 8px;
    }

    .filter-pill {
        padding: 8px 12px;
        font-size: 12px;
    }

    #methodology-link {
        font-size: 10px;
        padding: 4px 8px;
    }
}