/* ============================================
   AgriTerra Scout — Landing page styles
   Extracted from index.html inline <style> block.
   Brand colors, spacing, and typography come
   from design-tokens.css — do not redefine.
   ============================================ */

/* ===== Base layout ===== */
body { margin: 0; font-family: var(--font-family); display: flex; height: 100vh; overflow: hidden; background: var(--bg-sidebar); }

#sidebar { width: 380px; background: var(--bg-sidebar); padding: 25px; box-shadow: 2px 0 10px rgba(0,0,0,0.1); z-index: 1000; overflow-y: auto; display: flex; flex-direction: column; }
#map { flex-grow: 1; z-index: 1; background: #e5e7eb; }

/* ===== Typography & Branding ===== */
h1 { color: var(--dark-slate); font-size: 1.6rem; margin: 0 0 15px 0; }
.brand { color: var(--brand-green); font-weight: bold; }
.badge { background: var(--error); color: white; font-size: 0.7rem; padding: 3px 6px; border-radius: 4px; vertical-align: middle; margin-left: 5px; text-transform: uppercase; }

/* ===== Sidebar header (replaces inline style attributes) ===== */
.sidebar-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; gap: 12px; }
.sidebar-header-title { min-width: 0; }
.sidebar-title { margin-bottom: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.brand-name { white-space: nowrap; }
.peek-state-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.change-state-link { font-size: 0.7rem; color: var(--brand-green); font-weight: 600; text-decoration: none; }
.sidebar-auth { flex-shrink: 0; }

/* ===== Mobile hint (replaces inline style attribute) ===== */
.mobile-hint { display: none; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.4; }

/* ===== Guide ===== */
#guide { background: white; border: 2px solid #edf2f7; border-radius: 12px; padding: 18px; margin-bottom: 20px; }
#guide h3 { margin: 0 0 12px 0; font-size: 0.85rem; color: var(--brand-green); text-transform: uppercase; }
.instruction-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; }
.step-num { background: var(--brand-green); color: white; min-width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; }

/* ===== Controls ===== */
.search-container { display: flex; gap: 8px; margin-bottom: 20px; }
.search-wrapper { position: relative; flex-grow: 1; }
.search-wrapper input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95rem; box-sizing: border-box; }
.search-container button { background: var(--dark-slate); color: white; border: none; padding: 0 15px; border-radius: 8px; cursor: pointer; font-weight: bold; min-height: 44px; }

/* ===== Autocomplete dropdown ===== */
#suggestions { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 2000; max-height: 260px; overflow-y: auto; }
.suggestions-footer { padding: 4px 12px 6px; text-align: right; border-top: 1px solid #f1f5f9; }
.suggestions-footer img { height: 14px; opacity: 0.6; }
.suggestion-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f1f5f9; min-height: 44px; }
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover, .suggestion-item.active { background: #f1f5f9; }
.suggestion-main { font-size: 0.9rem; font-weight: 500; color: var(--dark-slate); }
.suggestion-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.btn-main { background: var(--brand-green); color: white; border: none; padding: 16px; border-radius: 8px; cursor: pointer; width: 100%; font-size: 1.1rem; font-weight: bold; margin-bottom: 15px; transition: background 0.2s; min-height: 44px; }
.btn-main:hover:not(:disabled) { background: var(--brand-green-hover); }
.btn-main:disabled { background: var(--border); cursor: not-allowed; }

/* ===== Results & Cards ===== */
.report-card { background: white; border-radius: 10px; padding: 15px; margin-top: 15px; border-left: 5px solid #ddd; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.card-solar { border-left-color: var(--solar); }
.card-wind { border-left-color: var(--wind); }
.card-conservation { border-left-color: var(--brand-green); }
.card-water { border-left-color: var(--water); }
.metric-title { font-weight: bold; font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.metric-value { font-size: 1.4rem; font-weight: bold; color: var(--dark-slate); }
.metric-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; height: 80px; margin-top: 15px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Premium Grid ===== */
.premium-header { margin-top: 25px; font-weight: bold; color: var(--dark-slate); border-top: 1px solid var(--border-light); padding-top: 15px; }
.premium-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; cursor: pointer; font-weight: bold; font-size: 0.85rem; color: var(--dark-slate); }
.premium-toggle .chevron { transition: transform 0.3s; font-size: 0.7rem; color: var(--text-muted); }
.premium-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.premium-collapse { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.premium-collapse.open { max-height: 500px; }
.premium-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; margin-bottom: 30px; }
.premium-box { background: white; border: 1px solid var(--border-light); padding: 10px; border-radius: 6px; text-align: center; font-size: 0.75rem; color: var(--dark-slate); text-decoration: none; font-weight: bold; transition: all 0.2s; }
.premium-box:hover { background: var(--dark-slate); color: white; border-color: var(--dark-slate); }

/* ===== State & alert elements ===== */
#loading { text-align: center; padding: 20px; display: none; font-style: italic; color: var(--text-muted); }
#urbanWarning { display: none; }
#parcelAdvisory { display: none; }
#alertBanner { display: none; border-radius: 8px; padding: 10px 14px; font-size: 0.82rem; margin-bottom: 12px; line-height: 1.5; align-items: flex-start; gap: 8px; }
#alertBanner.visible { display: flex; }
#alertBanner.alert-warning { background: var(--warning-bg); border: 1px solid #fbbf24; color: #92400e; }
#alertBanner.alert-info { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; }
#alertBanner .alert-icon { flex-shrink: 0; font-size: 1rem; line-height: 1.4; }
#alertBanner .alert-content { flex: 1; }
#alertBanner .alert-secondary { font-size: 0.78rem; margin-top: 4px; opacity: 0.85; }
#alertBanner .alert-dismiss { background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 2px; opacity: 0.5; flex-shrink: 0; color: inherit; }
#alertBanner .alert-dismiss:hover { opacity: 1; }

/* ===== Trust bar ===== */
#trustBar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
#trustBar span { font-size: 0.72rem; color: var(--text-secondary); background: #e8f4f0; padding: 3px 8px; border-radius: 12px; font-weight: 600; }

/* ===== CTA buttons ===== */
.btn-paid-report { display: block; background: var(--dark-slate); color: white; text-align: center; padding: 15px; border-radius: 8px; text-decoration: none; font-weight: bold; font-size: 0.95rem; transition: background 0.2s; margin-top: 20px; margin-bottom: 8px; border: 2px solid var(--brand-green); min-height: 44px; }
.btn-paid-report:hover { background: var(--dark-slate-hover); }
.btn-full-report { display: block; background: var(--brand-green); color: white; text-align: center; padding: 12px; border-radius: 8px; text-decoration: none; font-weight: bold; font-size: 0.9rem; transition: background 0.2s; margin-bottom: 6px; min-height: 44px; }
.btn-full-report:hover { background: var(--brand-green-hover); }

/* ===== State Picker Landing ===== */
#statePicker {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg-sidebar);
    display: flex; flex-direction: column; align-items: center;
    overflow-y: auto;
    /* Respect notch/Dynamic Island and home indicator on iOS PWA mode.
       In normal Safari the URL bar absorbs the inset so env() is 0. */
    padding-top: max(40px, env(safe-area-inset-top, 0px));
    padding-right: 20px;
    padding-bottom: max(60px, env(safe-area-inset-bottom, 0px));
    padding-left: 20px;
}
#statePicker.hidden { display: none; }
.picker-header { text-align: center; margin-bottom: 30px; }
.picker-header h1 { font-size: 2rem; margin: 0 0 8px 0; }
.picker-header p { color: var(--text-secondary); font-size: 1rem; margin: 0; }
#stateSearch {
    width: 100%; max-width: 420px;
    padding: 14px 18px; font-size: 1rem;
    border: 2px solid var(--border-light); border-radius: 10px;
    outline: none; margin-bottom: 24px;
    transition: border-color 0.2s;
}
#stateSearch:focus { border-color: var(--brand-green); }
.state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px; width: 100%; max-width: 900px;
}
.state-card {
    background: white; border: 2px solid var(--border-light);
    border-radius: 10px; padding: 14px 16px;
    text-align: center; cursor: pointer;
    text-decoration: none; color: var(--dark-slate);
    font-weight: 600; font-size: 0.95rem;
    transition: all 0.15s; min-height: 44px;
}
.state-card:hover { border-color: var(--brand-green); background: #e8f4f0; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.state-card .state-code { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; font-weight: 400; text-transform: uppercase; }
.state-card-saved { border-color: var(--brand-green); background: #e8f4f0; }

/* "Continue with X" CTA — surfaces the user's previously-selected state at
   the top of the picker so returning visitors get a one-tap path back without
   silently bypassing the picker (Prompt 3). */
.picker-continue { width: 100%; max-width: 420px; margin-bottom: 16px; }
.picker-continue-btn {
    display: block; width: 100%; box-sizing: border-box;
    background: var(--brand-green); color: white;
    text-align: center; padding: 16px 20px;
    border-radius: 10px; text-decoration: none;
    font-weight: 700; font-size: 1rem; min-height: 48px;
    transition: background 0.2s;
}
.picker-continue-btn:hover { background: var(--brand-green-hover); }
.picker-continue-btn strong { font-weight: 800; }
.picker-continue-hint { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin: 8px 0 0; }

/* Alphabet section dividers (mobile list only) */
.alpha-divider { display: none; }

@media (max-width: 768px) {
    #statePicker {
        padding-top: max(24px, env(safe-area-inset-top, 0px));
        padding-right: 16px;
        padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
        padding-left: 16px;
    }
    .picker-header h1 { font-size: 1.5rem; }
    .state-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
    .state-card { padding: 12px; font-size: 0.88rem; }
}
@media (max-width: 480px) {
    #statePicker { padding: 0; align-items: stretch; }
    .picker-header {
        padding-top: max(20px, env(safe-area-inset-top, 0px));
        padding-right: 16px;
        padding-bottom: 12px;
        padding-left: 16px;
        margin-bottom: 0;
    }
    .picker-header h1 { font-size: 1.3rem; }
    .picker-header p { font-size: 0.88rem; }
    #stateSearch {
        position: sticky; top: 0; z-index: 1;
        max-width: none; margin: 0;
        border-radius: 0; border-left: none; border-right: none;
        background: white; padding: 12px 16px;
    }
    .state-grid {
        display: flex; flex-direction: column;
        gap: 0; max-width: none;
        /* Keep the last state card above the home indicator on iOS PWA. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .state-card {
        display: flex; align-items: center; justify-content: space-between;
        border: none; border-bottom: 1px solid var(--border-light);
        border-radius: 0; padding: 14px 16px;
        text-align: left; min-height: 48px;
        font-size: 0.95rem; font-weight: 600;
    }
    .state-card:hover { transform: none; box-shadow: none; background: #f0f9f4; border-color: var(--border-light); }
    .state-card:active { background: #e8f4f0; }
    .state-card .state-code {
        display: block; margin-top: 0; font-size: 0.82rem;
        color: var(--text-muted); font-weight: 400;
        order: 1; flex-shrink: 0;
    }
    .alpha-divider {
        display: block;
        padding: 6px 16px;
        font-size: 0.72rem; font-weight: 700;
        color: var(--text-muted); text-transform: uppercase;
        letter-spacing: 0.06em;
        background: #f1f5f9;
        border-bottom: 1px solid var(--border-light);
    }
    /* Continue CTA — full-width on small mobile, inline with picker padding. */
    .picker-continue { max-width: none; margin: 0; padding: 4px 16px 12px; }
    .picker-continue-hint { margin: 6px 0 0; }
}

/* ===== Mobile Bottom Sheet ===== */
#sheet-handle { display: none; }
#sheet-backdrop { display: none; }

@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 0 18px 24px;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -2px 16px rgba(0,0,0,0.12);
        z-index: 1001;
        height: 140px;
        max-height: 85vh;
        overflow: hidden;
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #sidebar.sheet-half {
        height: 45vh;
        overflow-y: auto;
    }

    #sidebar.sheet-expanded {
        height: 80vh;
        overflow-y: auto;
    }

    #sidebar.sheet-dragging {
        transition: none;
        will-change: height;
        overflow: hidden;
    }

    #sheet-handle {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 0;
        cursor: grab;
        margin: 0 -18px;
        flex-shrink: 0;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
    }

    #sheet-handle::after {
        content: '';
        width: 40px;
        height: 5px;
        background: #94a3b8;
        border-radius: 3px;
    }

    #sheet-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.3);
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s;
    }
    #sheet-backdrop.visible {
        display: block;
        opacity: 1;
    }

    #guide { display: none; }
    #mobileHint { display: block !important; }

    h1 { font-size: 1.2rem; margin-bottom: 10px; }
    .search-container { margin-bottom: 12px; }
    /* iOS Safari auto-zooms inputs with font-size < 16 px on focus.
       Pin to 16 px so tapping the address input doesn't zoom the page. */
    .search-container input { padding: 10px; font-size: 16px; }
    .btn-main { padding: 13px; font-size: 1rem; margin-bottom: 10px; }

    /* Scale the whole draw section to grow buttons + icons together.
       The Leaflet sprite has icons at a 30 px stride with a 300x30 sprite
       sheet, so forcing button width to 48 px (which we used to do) made
       the sprite reveal the neighboring icon — visible as ghost duplicates.
       Scaling the section instead keeps the icon-to-button ratio intact;
       30 * 1.5 = 45 px touch target, just above the 44 px iOS minimum. */
    .leaflet-draw-section { transform: scale(1.5); transform-origin: top left; }

    /* Prompt 14: Enforce 48px minimum touch targets */
    .suggestion-item { min-height: 48px; padding: 12px; }
    .search-container button { min-height: 48px; min-width: 48px; }
    .btn-main { min-height: 48px; }
    .leaflet-control-layers-toggle { width: 48px !important; height: 48px !important; }
    .premium-box { min-height: 48px; display: flex; align-items: center; justify-content: center; }
    .premium-toggle { min-height: 48px; }
    .alert-dismiss { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

    /* Prompt 15: Sticky mobile CTA */
    #sidebar { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
    .btn-main { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -4px 12px rgba(0,0,0,0.08); }

    /* Prompt 18: Collapsed sheet peek content — sticky so badge + search
       stay visible above scrolling results when the sheet is half/expanded.
       Tight padding so badge row + search input fit inside the 140 px
       collapsed sheet alongside the drag handle. */
    #sheetPeek {
        display: block;
        position: sticky;
        top: 0;
        background: var(--bg-sidebar);
        z-index: 2;
        margin: 0 -18px;
        padding: 4px 18px 6px;
    }
    #sheetPeek .search-container { margin-bottom: 0; }
    /* Mobile portrait: pill at top-left of the map carries the state badge
       + Change link, so the in-peek row is redundant. Hide it here so
       the peek is just the search row. iPad/landscape keep the in-peek
       row (their pill is hidden). */
    #sheetPeek .peek-state-row { display: none; }
    /* When the autocomplete dropdown is open, the sticky Generate Report
       CTA was occluding the lower suggestions. Hide the CTA's visual but
       keep its layout slot so the sheet height doesn't jump. */
    #sidebar.suggestions-open .btn-main { visibility: hidden; }
}

/* "Change state" pill (Prompt 6) — floats over the top-left of the map on
   mobile portrait so users can leave the current state without first opening
   the bottom sheet. Hidden on desktop/tablet/landscape (the in-sidebar
   Change link in the peek serves those layouts). */
#changePill {
    display: none;
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
    z-index: 999;
    background: white;
    border-radius: 999px;
    padding: 6px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
}
#changePill .change-pill-badge {
    background: var(--error);
    color: white;
    font-size: 0.7rem;
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    line-height: 1;
}
#changePill .change-pill-action {
    color: var(--brand-green);
    text-decoration: none;
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0 4px;
}
#changePill .change-pill-action:hover { text-decoration: underline; }

@media (max-width: 768px) and (orientation: portrait) {
    #changePill { display: inline-flex; }
    /* Push Leaflet's top-left controls (zoom + draw) below the pill so
       they don't sit under it. */
    .leaflet-top.leaflet-left { top: calc(48px + env(safe-area-inset-top, 0px)); }
}

/* Honor reduced-motion preference: snap the mobile sheet instantly
   between collapsed/half/expanded instead of running the 300 ms ease.
   The pulse cue (Prompt 5) is already gated by prefers-reduced-motion;
   this is the matching gate for the more impactful sheet animation. */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    #sidebar { transition: none; }
}

/* Drag-up affordance (Prompt 5): pulse the handle pill so first-time
   mobile users notice the sheet is draggable. JS adds .pulse-cue once per
   session and removes it after 5 s or on first interaction. The animation
   itself only runs when prefers-reduced-motion is not set; reduced-motion
   users see the static pill. transform + opacity only — no layout shift. */
@keyframes sheet-handle-pulse {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    50%      { transform: scaleX(1.5); opacity: 0.55; }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    #sheet-handle.pulse-cue::after {
        animation: sheet-handle-pulse 1.5s ease-in-out infinite;
        transform-origin: center;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* iPad portrait — restore side panel with narrower sidebar. */
    #sidebar {
        position: static;
        width: 320px;
        height: auto;
        max-height: none;
        padding: 20px;
        border-radius: 0;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        overflow-y: auto;
        transition: none;
    }
    #sidebar.sheet-half,
    #sidebar.sheet-expanded { height: auto; }
    #sheet-handle,
    #sheet-backdrop,
    #changePill { display: none; }
    #sheetPeek { display: block; position: static; background: transparent; margin: 0 0 12px; padding: 0; }
    /* iPad mini portrait is exactly 768 px wide — both the mobile-portrait
       rule (which hides .peek-state-row in favor of the pill) and the
       iPad-portrait rule (which hides the pill) match. Without this
       override the user has no Change link at all on iPad mini. Restore
       the in-peek row here since the pill is hidden. */
    #sheetPeek .peek-state-row { display: flex; }
    #guide { display: block; }
    #mobileHint { display: none !important; }

    h1 { font-size: 1.4rem; margin-bottom: 12px; }
    .search-container { margin-bottom: 16px; }
    .search-container input { padding: 11px; }
    .btn-main {
        padding: 15px;
        font-size: 1.05rem;
        position: static;
        box-shadow: none;
    }
    .leaflet-draw-section { transform: scale(1.15); }
}

/* Prompt 11: Unified layers control */
.agri-layers-control { position: relative; }
.agri-layers-btn { display: flex; align-items: center; background: white; border: none; padding: 8px 12px; cursor: pointer; font-weight: 600; color: var(--dark-slate); border-radius: 4px; min-height: 44px; }
.agri-layers-btn:hover { background: #f1f5f9; }
.agri-layers-panel { position: absolute; top: 100%; right: 0; margin-top: 4px; background: white; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); padding: 6px 0; min-width: 180px; z-index: 1000; }
.agri-layers-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 0.85rem; color: #334155; min-height: 44px; }
.agri-layers-row:hover { background: #f8fafc; }
.agri-layers-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-green); }

/* Peek container at the top of the bottom sheet (mobile) and at the
   top of the side panel (desktop/tablet). Holds the state badge + Change
   link and the address search. Mobile-portrait styles below add sticky
   positioning so it stays visible while the sheet contents scroll. */
#sheetPeek { display: block; margin-bottom: 12px; }

/* Prompt 19: Landscape phone — convert bottom sheet to side panel */
@media (max-width: 768px) and (max-height: 500px) {
    #sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        right: auto;
        width: 300px;
        height: 100vh !important;
        max-height: 100vh;
        border-radius: 0;
        box-shadow: 2px 0 10px rgba(0,0,0,0.15);
        overflow-y: auto;
        transform: none;
        transition: none;
        padding: 12px 16px;
    }
    #sidebar.sheet-half, #sidebar.sheet-expanded {
        height: 100vh !important;
    }
    #sheet-handle { display: none !important; }
    #changePill { display: none; }
    #sheetPeek { display: block; position: static; background: transparent; margin: 0 0 12px; padding: 0; }
    #map { margin-left: 300px; }
}

/* ===== Offline banner (replaces inline style attribute) ===== */
.offline-banner { display: none; position: fixed; top: 0; left: 0; right: 0; background: var(--warning); color: #78350f; text-align: center; padding: 6px 12px; font-size: 0.82rem; font-weight: 600; z-index: 10000; }