/* ============================================================
   SENTINEL DIGITAL AGRICULTURE — Design System
   Theme: "Harvest Intelligence" (Concept 3)
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@300;400;500;600;700&family=Cairo:wght@300;400;500;600;700&display=swap');

/* ---------- Design Tokens ---------- */
:root {
    /* Colour Palette — Nimbus Earth / Agriculture (formerly OPAL) */
    --color-bg-primary: #000000;
    --color-bg-secondary: #080808;
    --color-bg-card: rgba(10, 10, 15, 0.7);
    --color-bg-card-hover: rgba(255, 255, 255, 0.05);
    --color-bg-nav: rgba(0, 0, 0, 0.6);

    /* Content-tier borders/hovers — flip in html.light-theme */
    --color-border-subtle: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.15);
    --color-hover-tint: rgba(255, 255, 255, 0.06);
    --color-input-bg: rgba(0, 0, 0, 0.2);

    /* Instrument tier — gauges/index strip/chrome; never overridden by html.light-theme */
    --color-bg-instrument: rgba(10, 10, 15, 0.7);
    --color-text-on-instrument: #ffffff;

    /* Brand colours */
    --color-brand-cyan: var(--app-accent);
    --color-brand-navy: #2979ff;
    --color-brand-sage: #00b0ff;

    --color-emerald: var(--app-accent);
    --color-blue: #2979ff;
    --color-amber: #ffab00;
    --color-red: #ff1744;
    --color-teal-light: #111111;

    /* App accent — identifies which Nimbus Earth app this is (Agriculture = Harvest Bronze).
       Drives the brand tokens above. Contrast: 4.7:1 on black, 4.5:1 on white.
       Semantic amber (--color-amber, status/advisory "monitor") stays #ffab00. */
    --app-accent: #9A6E3C;
    --app-accent-rgb: 154, 110, 60;

    /* Typography */
    --font-tech: 'Space Grotesk', sans-serif;

    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.72);
    --color-text-muted: rgba(255, 255, 255, 0.48);

    /* Status Colours */
    --color-status-online: #00e676;
    --color-status-offline: #ffab00;
    --color-status-error: #ff1744;

    /* Advisory Colours */
    --color-advisory-irrigate: #ff1744;
    --color-advisory-monitor: #ffab00;
    --color-advisory-ok: #34d399;

    /* Gauge Colours */
    --color-gauge-red: #ff1744;
    --color-gauge-yellow: #ffeb3b;
    --color-gauge-green: #34d399;
    --color-gauge-track: rgba(255, 255, 255, 0.08);
    --color-gauge-glow: rgba(52, 211, 153, 0.25);

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Border Radius — sharp corners to match Nimbus design language */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-nav: 0 -4px 24px rgba(0, 0, 0, 0.4);
    --shadow-glow-emerald: 0 0 20px rgba(52, 211, 153, 0.3);
    --shadow-glow-red: 0 0 20px rgba(255, 23, 68, 0.3);
    --shadow-glow-amber: 0 0 20px rgba(255, 171, 0, 0.3);

    /* Font families */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: clamp(0.65rem, 1.5vw, 0.75rem);
    --font-size-sm: clamp(0.75rem, 2vw, 0.875rem);
    --font-size-base: clamp(0.875rem, 2.5vw, 1rem);
    --font-size-lg: clamp(1rem, 3vw, 1.25rem);
    --font-size-xl: clamp(1.25rem, 4vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 5vw, 2rem);
    --font-size-gauge: clamp(2rem, 8vw, 3.5rem);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-gauge: 1200ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --nav-height: 64px;
    --header-height: 56px;
    --max-width: 480px;
}

/* ---------- Light Theme ---------- */
/* Content tier goes light (page background, sidebar, field cards, modals,
   forms, soil/map panels, calendar, settings, login body). The instrument
   tier (header/brand, bottom nav, gauges, index strip, stat bars, toasts,
   Scout HUD) consumes --color-bg-instrument/--color-text-on-instrument
   instead, so it never changes here — see the tokens' definitions in :root. */

html.light-theme {
    --color-bg-primary: #e4e7eb;
    --color-bg-secondary: #dde1e6;
    --color-bg-card: #ffffff;
    --color-bg-card-hover: #f1f3f6;

    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;

    --color-border-subtle: rgba(15, 23, 42, 0.08);
    --color-border-strong: rgba(15, 23, 42, 0.15);
    --color-hover-tint: rgba(15, 23, 42, 0.04);
    --color-input-bg: #f1f5f9;
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 5px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}
.theme-toggle:hover {
    color: var(--color-text-primary);
    border-color: rgba(255, 255, 255, 0.3);
}
/* Show sun in dark mode, moon in light mode */
.theme-icon-moon { display: none; }
html.light-theme .theme-icon-sun { display: none; }
html.light-theme .theme-icon-moon { display: block; }

/* ---------- Print styles ---------- */

@media print {
    :root {
        --color-bg-primary: #ffffff;
        --color-bg-secondary: #ffffff;
        --color-bg-card: #f8f9fa;
        --color-text-primary: #0f172a;
        --color-text-secondary: #475569;
        --color-text-muted: #64748b;
        --shadow-card: none;
    }
    body::before { display: none; }
    .bottom-nav, #sidebar-open-btn, .theme-toggle { display: none !important; }
    .brand { background: transparent; border-color: rgba(0, 0, 0, 0.1); }
    .brand-tagline { color: rgba(15, 23, 42, 0.45); border-left-color: rgba(0, 0, 0, 0.12); }
    .map-history-panel, .zones-panel { background: #f8f9fa; border-top-color: rgba(0, 0, 0, 0.07); }
}



/* ---------- Reset & Base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overscroll-behavior-x: none; /* prevent browser swipe-back-to-exit gesture */
    padding-bottom: calc(var(--nav-height) + var(--space-lg));
}

/* Noise/grain overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}


/* ---------- App Container ---------- */

.app-container {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Desktop: remove mobile max-width so app can fill the screen */
/* Desktop: remove mobile max-width so app can fill the screen */
@media (min-width: 768px) {
    #app-main.app-container {
        max-width: 100% !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* app-container drops its padding on desktop, so the header needs its
       own horizontal inset to keep the brand pill off the screen edge */
    #app-main .app-header {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
}


/* ---------- Header ---------- */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
    height: var(--header-height);
}

/* Brand pill */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.brand-icon {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 2px;
    background: transparent;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-name {
    font-family: var(--font-tech);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-primary);
}

.app-accent-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--app-accent);
    flex-shrink: 0;
}

.brand-tagline {
    font-family: var(--font-family);
    font-size: 0.55rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: var(--space-sm);
    white-space: nowrap;
}

/* Plan tier badge — a filled pill so the plan is unmissable */
.brand-plan {
    font-family: var(--font-tech);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-brand-cyan);
    background: rgba(var(--app-accent-rgb), 0.14);
    border: 1px solid var(--color-brand-cyan);
    border-radius: 999px;
    padding: 3px 10px;
    margin-inline-start: var(--space-xs);
    white-space: nowrap;
}

.brand-plan:empty {
    display: none;
}

/* Upgrade button beside the plan pill (Free plan only) — filled, so it reads
   as the action next to the outlined status pill. */
.brand-upgrade {
    font-family: var(--font-tech);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    background: var(--app-accent);
    border: 1px solid var(--app-accent);
    border-radius: 999px;
    padding: 3px 10px;
    margin-inline-start: var(--space-xs);
    white-space: nowrap;
    cursor: pointer;
}

.brand-upgrade:hover,
.brand-upgrade:focus-visible {
    filter: brightness(1.12);
}

.header-end {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Online / last sync — stacked, sits between the theme toggle and avatar */
.status-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.demo-banner {
    margin: calc(var(--space-md) / 2) 0 var(--space-md);
    padding: calc(var(--space-sm) * 0.9) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    text-align: center;
    color: #92400e;
    background: rgba(253, 186, 116, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.24);
}

.status-badge {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--color-status-online);
    box-shadow: 0 0 6px var(--color-status-online);
    animation: pulse-dot 2s ease-in-out infinite;
}

.status-dot.offline {
    background: var(--color-status-offline);
    box-shadow: 0 0 6px var(--color-status-offline);
    animation: none;
}

.sync-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.85);
    }
}


/* ---------- Gauge Section ---------- */
/* Stays dark (instrument tier) regardless of theme */

.gauge-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-lg) 0 var(--space-md);
    position: relative;
    background: var(--color-bg-instrument);
}

.gauge-wrapper {
    position: relative;
    width: 220px;
    height: 220px;
}

/* "How this score works" note — under the gauge on phones (folded),
   in the left column beside it on wide screens. */
.gauge-note {
    order: 2;
    width: min(100% - 2 * var(--space-md), 420px);
    margin-top: var(--space-md);
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}
.gauge-note summary {
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand-cyan);
}
.gauge-note[open] summary { margin-bottom: 6px; }
.gauge-note p { margin: 0 0 8px; }
.gauge-note p:last-child { margin-bottom: 0; }
.gauge-note-bands {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: grid;
    gap: 2px;
}
.gauge-note-bands li {
    display: grid;
    grid-template-columns: 10px 82px 1fr;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 6px;
}
.gauge-note-bands li.is-current {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 600;
}
.gauge-note-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--swatch);
}
.gauge-note-range { font-variant-numeric: tabular-nums; }

.gauge-stale-note {
    order: 1;
    margin: var(--space-sm) var(--space-md) 0;
    font-size: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}
.gauge-context { order: 2; }
.gauge-section .gauge-note:not(.gauge-context) { order: 3; }
.gauge-context [hidden] { display: none !important; }
.gauge-context-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.gauge-context-rows li {
    display: grid;
    grid-template-columns: 10px 1fr;
    align-items: start;
    gap: 10px;
}
.gauge-context-rows .gauge-note-swatch { margin-top: 4px; }
.gauge-context-label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}
.gauge-context-value {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.gauge-context-spark {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.gauge-context-spark .gauge-context-label { margin: 0 0 4px; }
.gauge-context-spark svg {
    display: block;
    width: 100%;
    height: auto;
}
.gauge-context-spark-plot { position: relative; }
.gauge-context-spark-axis {
    position: relative;
    height: 14px;
    margin-top: 2px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
}
.gauge-context-spark-axis span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}
.gauge-context-spark-year span {
    position: absolute;
    top: 0;
    padding-left: 3px;
    font-size: 9px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 1024px) {
    .gauge-section {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        justify-items: center;
    }
    .gauge-wrapper { grid-column: 2; grid-row: 1; }
    .gauge-stale-note { grid-column: 1 / -1; grid-row: 2; }
    .gauge-note {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        width: auto;
        max-width: 340px;
        margin: 0 var(--space-lg);
    }
    .gauge-context {
        grid-column: 3;
        justify-self: end;
        width: 340px;
    }
}
/* Arabic: letter-spacing breaks joining */
[dir="rtl"] .gauge-note summary { letter-spacing: 0; }

.gauge-canvas {
    width: 100%;
    height: 100%;
}

.gauge-value-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.gauge-value {
    font-size: var(--font-size-gauge);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-text-on-instrument);
    text-shadow: 0 0 30px rgba(0, 200, 83, 0.3);
}

.gauge-label {
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--color-text-on-instrument) 72%, transparent);
    margin-top: var(--space-xs);
    font-weight: 500;
}

.gauge-sublabel {
    font-size: var(--font-size-xs);
    color: color-mix(in srgb, var(--color-text-on-instrument) 48%, transparent);
    margin-top: 2px;
}

/* ============================================================
   MAP VIEW LAYOUT — Base (Mobile-first)
   ============================================================ */

/* Remove scrolling & padding from main-content when map is showing */
.main-content:has(#view-map.active-view) {
    padding: 0;
    overflow: hidden;
}

/* Override .view.active-view { display:block } — map needs flex */
#view-map.active-view {
    display: flex !important;
    flex-direction: column;
    height: calc(100dvh - var(--header-height) - var(--nav-height));
    overflow: hidden;
}

/* Mobile: the map page scrolls as a normal document — a fixed-height
   flex column can't fit field list + map + legend + trend on a phone */
@media (max-width: 767px) {
    #view-map.active-view {
        height: auto;
        overflow: visible;
    }

    .map-view-layout,
    .map-wrapper {
        overflow: visible;
    }

    .map-wrapper .map-container {
        flex: none;
        height: 48vh;
        min-height: 250px;
        border-radius: var(--radius-md);
    }
}

.map-view-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

/* Pinned to an explicit height while the user is dragging (or has dragged)
   the resize handle below — see .map-resize-handle. */
.map-view-layout.map-view-layout--resized {
    flex: 0 0 var(--map-manual-height, auto) !important;
}

/* Panels below the map card. Natural (content) height by default; once the
   map is dragged taller, .map-lower-panels--compressed makes this area take
   whatever's left and scroll internally so nothing is lost. */
.map-lower-panels {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
}

.map-lower-panels.map-lower-panels--compressed {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Drag handle between the map card and the panels below it. The 14px box
   overlaps 7px into each neighbour (via negative margin) without changing
   their layout size, so it reads as a grab strip on the shared border. */
.map-resize-handle {
    display: none;
}

@media (min-width: 768px) {
    .map-resize-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 14px;
        margin: -7px 0;
        position: relative;
        z-index: 15;
        cursor: row-resize;
        touch-action: none;
    }

    .map-resize-grip {
        width: 48px;
        height: 4px;
        border-radius: var(--radius-full);
        background: var(--color-border-strong);
        transition: background 0.15s ease, width 0.15s ease;
    }

    .map-resize-handle:hover .map-resize-grip,
    .map-resize-handle.dragging .map-resize-grip {
        background: var(--color-brand-cyan);
        width: 68px;
    }
}

.map-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* Mobile-only header — hidden on desktop where sidebar shows */
.map-header-mobile {
    padding: var(--space-sm) var(--space-md);
}

/* ---------- Desktop / Tablet Split View ---------- */
@media (min-width: 768px) {
    .map-view-layout {
        flex-direction: row;
    }

    .map-sidebar {
        width: 320px;
        min-width: 320px;
        max-width: 350px;
        max-height: none;
        /* Floating rounded card, inset to match the map card opposite it.
           Right margin is 0 — the map card's own inset provides the gap. */
        margin: var(--space-md) 0 var(--space-md) var(--space-md);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        /* Glassmorphism & Transition */
        background: rgba(10, 10, 15, 0.85);
        backdrop-filter: blur(12px);
        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin 0.4s ease, padding 0.4s ease, opacity 0.4s ease;
        z-index: 20;
    }

    .map-sidebar.collapsed {
        width: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border: none;
        opacity: 0;
        pointer-events: none;
        /* Prevent clicks when hidden */
    }

    .map-sidebar .sidebar-header,
    .map-sidebar .sidebar-search {
        flex-shrink: 0;
        padding-left: var(--space-md);
        /* Ensure desktop padding matches */
        padding-right: var(--space-md);
        opacity: 1;
        /* Ensure visible */
        transition: opacity 0.2s ease;
    }

    .map-sidebar.collapsed .sidebar-header,
    .map-sidebar.collapsed .sidebar-search,
    .map-sidebar.collapsed #field-list {
        opacity: 0;
        pointer-events: none;
    }

    .map-sidebar .sidebar-header {
        padding-top: var(--space-md);
    }



    #field-list {
        flex: 1;
        overflow-y: auto;
        padding: 0 var(--space-md) var(--space-md) var(--space-md);
        min-height: 0;
    }

    /* Hide mobile header when sidebar is visible */
    .map-header-mobile {
        display: none !important;
    }

    /* Toolbar stack — positions the index bar + view-toggle bar as a column
       anchored to the top of the map card. Each bar keeps its own glass-card
       styling (see .index-switcher below); this wrapper only positions them. */
    .map-wrapper .map-toolbar-stack {
        position: absolute;
        top: calc(var(--space-md) + var(--space-xs));
        left: calc(var(--space-md) + var(--space-xs));
        right: calc(var(--space-md) + var(--space-xs));
        z-index: 10;
    }

    /* Index bar / view-toggle bar — floating glass capsule inside the map card */
    .map-wrapper .index-switcher {
        background: rgba(10, 10, 15, 0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-full);
        padding: var(--space-xs) var(--space-sm);
        box-shadow: var(--shadow-card);
    }

    /* Satellite pass date — standalone pill, top-right of the map card,
       independent of either bar's collapse state */
    .map-wrapper #satellite-date-pill {
        position: absolute;
        top: calc(var(--space-md) + var(--space-xs));
        right: calc(var(--space-md) + var(--space-xs));
        z-index: 10;
    }

    /* Map container — a floating rounded card inset from the wrapper */
    .map-wrapper .map-container {
        position: absolute;
        inset: var(--space-md);
        width: auto;
        height: auto;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
    }

    /* Index legend — floating glass capsule, bottom-left of the map card.
       (MapLibre nav/attribution controls live bottom-right, so this is clear.) */
    .map-wrapper .index-panel {
        position: absolute;
        left: calc(var(--space-md) + var(--space-xs));
        bottom: calc(var(--space-md) + var(--space-xs));
        right: auto;
        width: auto;
        max-width: min(460px, 60%);
        z-index: 10;
        background: rgba(10, 10, 15, 0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 18px;
        box-shadow: var(--shadow-card);
        padding: var(--space-sm) var(--space-md);
    }

    /* Legend content keeps a readable width — the panel itself shrink-wraps
       it, and still folds to the 44px handle when collapsed. */
    .map-wrapper .legend-bar-container {
        width: 340px;
        max-width: calc(60vw - 48px);
    }

    /* Index explanation — same glass capsule, top-right of the map card,
       below the toolbar stack and clear of the bottom-right map controls
       (show-all + geolocate + attribution need ~190px). */
    .map-wrapper .index-info-panel {
        left: auto;
        bottom: auto;
        right: calc(var(--space-md) + var(--space-xs));
        top: calc(var(--space-md) + var(--space-xs) + 108px);
        width: min(300px, 40%);
        max-width: none;
        max-height: calc(100% - 108px - 190px);
    }
}

/* ---------- Stat Bars ---------- */

.stats-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) 0;
}

@media (min-width: 768px) {
    .stats-section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-bar {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-bar:hover {
    background: var(--color-bg-card-hover);
}

.stat-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.stat-bar-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.stat-bar-icon {
    width: 18px;
    height: 18px;
    opacity: 0.8;
}

.stat-bar-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.stat-bar-track {
    width: 100%;
    height: 6px;
    background: var(--color-gauge-track);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    width: 0%;
    transition: width var(--transition-slow);
}

.stat-bar-fill.moisture {
    background: linear-gradient(90deg, #1565c0, #42a5f5, #81d4fa);
    box-shadow: 0 0 8px rgba(66, 165, 245, 0.4);
}

.stat-bar-fill.temperature {
    background: linear-gradient(90deg, #e65100, #ff9800, #ffcc02);
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
}

.stat-bar-fill.wind {
    background: linear-gradient(90deg, #546e7a, #90a4ae, #cfd8dc);
    box-shadow: 0 0 8px rgba(144, 164, 174, 0.3);
}


/* ---------- Action Cards ---------- */

.cards-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-sm) 0 var(--space-md);
}

.action-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.action-card:hover {
    transform: translateY(-2px);
    background: var(--color-bg-card-hover);
}

.action-card:active {
    transform: translateY(0);
}

/* Advisory Card */
.action-card.advisory {
    border-color: rgba(255, 23, 68, 0.25);
}

.action-card.advisory::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.action-card.advisory.irrigate::before {
    background: var(--color-advisory-irrigate);
    box-shadow: var(--shadow-glow-red);
}

.action-card.advisory.monitor::before {
    background: var(--color-advisory-monitor);
    box-shadow: var(--shadow-glow-amber);
}

.action-card.advisory.ok::before {
    background: var(--color-advisory-ok);
    box-shadow: var(--shadow-glow-emerald);
}

.main-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    padding-bottom: 80px;
    /* Space for bottom nav */
    max-width: 100%;
    /* Allow full width for map */
    margin: 0 auto;
    width: 100%;
}

.card-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.card-header-icon {
    width: 16px;
    height: 16px;
}

.card-header-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.advisory-status {
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.advisory-status.irrigate {
    color: var(--color-advisory-irrigate);
    text-shadow: 0 0 20px rgba(255, 23, 68, 0.3);
}

.advisory-status.monitor {
    color: var(--color-advisory-monitor);
    text-shadow: 0 0 20px rgba(255, 171, 0, 0.3);
}

.advisory-status.ok {
    color: var(--color-advisory-ok);
    text-shadow: 0 0 20px rgba(0, 200, 83, 0.3);
}

.advisory-detail {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.advisory-icon-large {
    width: 24px;
    height: 24px;
    margin-top: var(--space-sm);
    opacity: 0.5;
}

/* Forecast Card */
.action-card.forecast {
    border-color: rgba(41, 121, 255, 0.15);
}

.forecast-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.forecast-canvas {
    width: 100%;
    height: 60px;
    margin-top: var(--space-sm);
}

.forecast-detail {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-sm);
}

.forecast-detail-icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}


/* ---------- Bottom Navigation ---------- */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--color-bg-nav);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-nav);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    color: inherit;
    min-width: 60px;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.nav-item:active {
    background: rgba(255, 255, 255, 0.10);
}

.nav-icon {
    width: 22px;
    height: 22px;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.nav-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.nav-item.active .nav-icon {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(var(--app-accent-rgb), 0.5));
}

.nav-item.active .nav-label {
    font-family: var(--font-tech);
    color: var(--color-emerald);
    font-weight: 600;
}

.nav-item span {
    font-family: var(--font-tech);
}

/* Dashboard locked until a field is selected */
.nav-item--locked {
    opacity: 0.35;
    cursor: default;
    pointer-events: auto;
}

.nav-item--locked:hover {
    background: transparent;
}


/* ---------- Entrance Animations ---------- */

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gauge-section {
    animation: scale-in 600ms var(--transition-slow) both;
}

.stat-bar {
    animation: fade-in-up 500ms var(--transition-slow) both;
}

.stat-bar:nth-child(1) {
    animation-delay: 200ms;
}

.stat-bar:nth-child(2) {
    animation-delay: 350ms;
}

.stat-bar:nth-child(3) {
    animation-delay: 500ms;
}

.action-card {
    animation: fade-in-up 500ms var(--transition-slow) both;
}

.action-card:first-child {
    animation-delay: 600ms;
}

.action-card:last-child {
    animation-delay: 750ms;
}


/* ---------- Scrollbar Styling ---------- */

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
}


/* ---------- Responsive Breakpoints ---------- */

@media (min-width: 480px) {
    .app-container {
        padding: 0 var(--space-lg);
    }

    .gauge-wrapper {
        width: 260px;
        height: 260px;
    }
}

@media (max-width: 360px) {
    .cards-section {
        grid-template-columns: 1fr;
    }

    .gauge-wrapper {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 479px) {
    /* Phones: logo + accent dot (+ plan badge) only — "Agriculture" doesn't fit
       beside the status block; desktop is the main interface. */
    .brand-tagline,
    .brand-name {
        display: none;
    }
}

/* iOS safe area support */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + var(--space-lg));
    }
}


/* ============================================================
   LOGIN SCREEN
   ============================================================ */

.login-screen {
    /* Always dark — the pre-auth screen never follows the light-theme
       toggle, regardless of stored preference. Re-declaring the content
       tokens here (rather than editing every rule below) overrides the
       html.light-theme cascade for this whole subtree in one place. */
    --color-bg-primary: #000000;
    --color-bg-secondary: #080808;
    --color-bg-card: rgba(10, 10, 15, 0.7);
    --color-bg-card-hover: rgba(255, 255, 255, 0.05);
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.72);
    --color-text-muted: rgba(255, 255, 255, 0.48);
    --color-border-subtle: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.15);
    --color-hover-tint: rgba(255, 255, 255, 0.06);
    --color-input-bg: rgba(0, 0, 0, 0.2);

    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-primary);
    padding: var(--space-md);
}

.login-container {
    width: 100%;
    max-width: 380px;
    text-align: center;
    background: rgba(10, 10, 15, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: var(--space-xl) var(--space-xl);
}

.login-brand {
    margin-bottom: var(--space-xl);
}

.login-brand-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: var(--space-md);
    filter: drop-shadow(0 0 16px rgba(var(--app-accent-rgb), 0.2));
}

.login-title {
    font-family: var(--font-tech);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

/* "Agriculture" at 2rem/6px is wider than the login card on a phone */
@media (max-width: 479px) {
    .login-title {
        font-size: 1.6rem;
        letter-spacing: 4px;
    }
}

.login-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.login-origin {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.login-origin-flag {
    width: 20px;
    height: 10px;
    border-radius: 1px;
}


/* Auth Tabs */
.auth-tabs {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 3px;
    margin-bottom: var(--space-lg);
}

.auth-tab {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.auth-tab.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text-primary);
}


/* Auth Forms */
.auth-form {
    text-align: left;
}

.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast), background var(--transition-fast);
    outline: none;
}

/* Password box + 👁 show/hide toggle (auth.js setupPasswordToggles) */
.password-field {
    position: relative;
}
.password-field input {
    padding-inline-end: 48px;
}
.password-toggle {
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.form-group input[aria-invalid="true"] {
    border-color: var(--color-red);
}
.field-hint-error {
    margin-top: var(--space-xs);
    color: var(--color-red);
    font-size: var(--font-size-xs);
}

.form-group input::placeholder {
    color: var(--color-text-muted);
}

.form-group input:focus {
    border-color: var(--color-emerald);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 2px rgba(var(--app-accent-rgb), 0.15);
}

.auth-error {
    background: rgba(255, 23, 68, 0.12);
    color: var(--color-red);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-md);
    border: 1px solid rgba(255, 23, 68, 0.25);
}

.auth-error.auth-notice {
    background: rgba(var(--app-accent-rgb), 0.12);
    color: var(--color-text-primary);
    border-color: rgba(var(--app-accent-rgb), 0.35);
}

.auth-link {
    display: block;
    margin-inline-start: auto;
    margin-top: var(--space-xs);
    padding: 4px 0;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    cursor: pointer;
}

.auth-link:hover,
.auth-link:focus-visible {
    color: var(--app-accent);
    text-decoration: underline;
}

.auth-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.primary-btn {
    background: var(--color-bg-primary);
    color: var(--color-emerald);
    border: 1px solid var(--color-emerald);
    font-family: var(--font-tech);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all var(--transition-fast);
}

.primary-btn:hover {
    background: var(--color-emerald);
    color: var(--color-bg-primary);
    box-shadow: 0 0 15px rgba(var(--app-accent-rgb), 0.4);
}

.primary-btn:active {
    transform: translateY(0);
}

.primary-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}


/* Google Button */
.google-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.google-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}


/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.login-footer {
    margin-top: var(--space-xl);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.login-footer-logo {
    width: 18px;
    height: 18px;
    opacity: 0.55;
    flex-shrink: 0;
}

/* ============================================================
   ACCESS GATE SCREENS — pending / blocked
   ============================================================ */

.access-gate-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    margin-top: 8px;
}

.access-gate-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(var(--app-accent-rgb), 0.12);
    border: 1px solid rgba(var(--app-accent-rgb), 0.25);
    margin: 0 auto 20px;
    color: var(--app-accent);
}

.access-gate-icon--blocked {
    background: rgba(255, 23, 68, 0.12);
    border-color: rgba(255, 23, 68, 0.25);
    color: #ff1744;
}

.access-gate-title {
    font-family: var(--font-tech);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 10px;
    letter-spacing: -0.3px;
}

.access-gate-msg {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 12px;
}

.access-gate-email {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0 0 20px;
    word-break: break-all;
}

.access-gate-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0 0 12px;
    min-height: 18px;
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.hidden {
    display: none !important;
}


/* ============================================================
   VIEW ROUTING
   ============================================================ */

.view {
    display: none;
}

.view.active-view {
    display: block;
    animation: fade-in-up 300ms ease both;
}


/* ============================================================
   STAT CARDS (new HTML class mapping)
   ============================================================ */

/* Stays dark (instrument tier) regardless of theme — these are the "bars" */
.stat-card {
    background: var(--color-bg-instrument);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background var(--transition-fast);
    animation: fade-in-up 500ms var(--transition-slow) both;
}

.stat-card:nth-child(1) {
    animation-delay: 200ms;
}

.stat-card:nth-child(2) {
    animation-delay: 350ms;
}

.stat-card:nth-child(3) {
    animation-delay: 500ms;
}

.stat-card:hover {
    background: rgba(48, 50, 56, 0.9);
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.stat-icon {
    flex-shrink: 0;
}

.stat-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: color-mix(in srgb, var(--color-text-on-instrument) 72%, transparent);
    margin-left: var(--space-sm);
}

.stat-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-on-instrument);
}

/* Stat fill bars (new HTML class) */
.stat-bar {
    /* Override for when used as track container inside stat-card */
    width: 100%;
    height: 6px;
    background: var(--color-gauge-track);
    border-radius: var(--radius-full);
    overflow: hidden;
    padding: 0;
    border: none;
    backdrop-filter: none;
}

.stat-fill {
    height: 100%;
    border-radius: var(--radius-full);
    width: 0%;
    transition: width var(--transition-slow);
}

.stat-fill.moisture {
    background: linear-gradient(90deg, #1565c0, #42a5f5, #81d4fa);
    box-shadow: 0 0 8px rgba(66, 165, 245, 0.4);
}

.stat-fill.temperature {
    background: linear-gradient(90deg, #e65100, #ff9800, #ffcc02);
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
}

.stat-fill.wind {
    background: linear-gradient(90deg, #546e7a, #90a4ae, #cfd8dc);
    box-shadow: 0 0 8px rgba(144, 164, 174, 0.3);
}


/* ============================================================
   HEADER — User Badge & Connectivity
   ============================================================ */

.user-badge {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-sm);
    background: rgba(var(--app-accent-rgb), 0.1);
    border: 1px solid rgba(var(--app-accent-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-tech);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-emerald);
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
}

.user-badge:hover,
.user-badge:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--app-accent-rgb), 0.3);
}

.connectivity-block {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.status-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
}


/* ============================================================
   ACTION CARDS (updated selectors for new HTML)
   ============================================================ */

.actions-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-sm) 0 var(--space-md);
}

.advisory-card {
    border-color: rgba(255, 23, 68, 0.25);
    position: relative;
    overflow: hidden;
}

.advisory-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-advisory-irrigate);
    box-shadow: var(--shadow-glow-red);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.advisory-card.status-monitor::before {
    background: var(--color-advisory-monitor);
    box-shadow: var(--shadow-glow-amber);
}

.advisory-card.status-ok::before {
    background: var(--color-advisory-ok);
    box-shadow: var(--shadow-glow-emerald);
}

/* Forecast / Crop / Yield cards get the same top-accent treatment as
   Advisory, each in its own hue, so the dashboard reads as a set of
   distinct tiles rather than four identical white cards. */
.forecast-card,
.crop-card,
.yield-card {
    position: relative;
    overflow: hidden;
}

.forecast-card::before,
.crop-card::before,
.yield-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.forecast-card {
    border-color: rgba(96, 165, 250, 0.25);
}

.forecast-card::before {
    background: #60a5fa;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.35);
}

.crop-card {
    border-color: rgba(52, 211, 153, 0.25);
}

.crop-card::before {
    background: var(--color-advisory-ok);
    box-shadow: var(--shadow-glow-emerald);
}

.yield-card {
    border-color: rgba(var(--app-accent-rgb), 0.25);
}

.yield-card::before {
    background: var(--color-brand-cyan);
    box-shadow: 0 0 20px rgba(var(--app-accent-rgb), 0.3);
}

.card-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.card-icon {
    opacity: 0.7;
}

.advisory-action {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-advisory-irrigate);
    text-shadow: 0 0 20px rgba(255, 23, 68, 0.3);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-top: var(--space-xs);
}

.advisory-detail {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
    line-height: 1.4;
}

.forecast-period {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.forecast-summary {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-sm);
}

/* Phenology rows inside the yield card */
.phenology-info {
    margin-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: var(--space-sm);
}

.crop-card, .yield-card {
    padding: 20px;
}

.pheno-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-xs);
    margin-bottom: 8px;
}

.pheno-row:last-child {
    margin-bottom: 0;
}

.pheno-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.pheno-value {
    font-size: 11px;
    color: var(--color-text-secondary);
    text-align: right;
}

.forecast-canvas {
    width: 100%;
    height: 60px;
    margin-top: var(--space-sm);
}


/* ============================================================
   NAV ITEM — Updated for inline SVG icons
   ============================================================ */

.nav-item svg {
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

.nav-item.active svg {
    opacity: 1;
    stroke: var(--color-brand-cyan);
    filter: drop-shadow(0 0 4px rgba(var(--app-accent-rgb), 0.5));
}

.nav-item {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: color-mix(in srgb, var(--color-text-on-instrument) 80%, transparent);
}

.nav-item.active {
    color: var(--color-brand-cyan);
    font-weight: 600;
}


/* ============================================================
   MAP VIEW
   ============================================================ */

.map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
}

.map-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    font-family: var(--font-tech);
}

.map-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.map-add-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: rgba(var(--app-accent-rgb), 0.1);
    border: 1px solid rgba(var(--app-accent-rgb), 0.35);
    border-radius: var(--radius-full);
    color: var(--color-brand-cyan);
    font-family: var(--font-tech);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.map-add-btn:hover {
    background: rgba(var(--app-accent-rgb), 0.18);
}

/* Sidebar collapse / exit text buttons */
.sidebar-ctrl-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.sidebar-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--color-text-primary);
}

.sidebar-ctrl-btn--icon {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
}


/* Toolbar Stack — column holding the index bar + view-toggle bar, each an
   independently collapsible glass pill (see .index-switcher/.collapsed) */
.map-toolbar-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
}

/* Index Switcher — hugs its content width (just wide enough for the handle
   + pills) rather than stretching across the map; on narrow viewports where
   that content doesn't fit, it's clamped to the available width and the
   pill row scrolls/wraps instead (see .index-switcher-scroll overflow-x). */
/* Stays dark (instrument tier) regardless of theme — the desktop
   .map-wrapper override below already floats this as a dark glass capsule
   over the map; this gives the mobile (in-flow) layout the same backdrop. */
.index-switcher {
    display: flex;
    align-items: center;
    align-self: flex-start;
    width: auto;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
    min-width: 0;
    overflow: hidden;
    background: var(--color-bg-instrument);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed: the whole bar folds into a small fixed square holding just the
   handle's icon (both here and on the legend panel below) — an explicit
   size, not width/height:auto, so the fold animates instead of snapping
   (auto isn't a value CSS transitions can interpolate to/from). */
.index-switcher.collapsed,
.index-panel.collapsed {
    width: 44px;
    height: 44px;
    padding: 5px;
}

.index-switcher-scroll {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-width: 0;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateY(0);
}

.index-switcher-scroll::-webkit-scrollbar {
    display: none;
}

/* Collapse handle for the index bar / legend panel — stays visible (as a small
   square icon button once collapsed) so users always know the controls exist. */
.bar-collapse-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: none;
    color: color-mix(in srgb, var(--color-text-on-instrument) 72%, transparent);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1), width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--color-text-on-instrument);
}

.bar-collapse-icon {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

.bar-collapse-label {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    opacity: 1;
}

.bar-collapse-chevron {
    font-size: 9px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform var(--transition-fast), max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

/* Collapsed: fold the whole bar down into a small square holding just the
   icon — label, chevron and pill/legend content fade out (350ms) somewhat
   ahead of the bar itself finishing its shrink (500-600ms), so nothing
   visibly clips as the box narrows/shortens around them. Height itself is
   driven by an inline max-height on the content (see setupBarCollapse in
   map.js) so the transition animates the real content height, not a
   guessed cap. */
.index-switcher.collapsed .index-switcher-scroll {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.index-switcher.collapsed .bar-collapse-btn,
.index-panel.collapsed .bar-collapse-btn {
    padding: 0;
    width: 34px;
    height: 34px;
}

.index-switcher.collapsed .bar-collapse-label,
.index-panel.collapsed .bar-collapse-label,
.index-switcher.collapsed .bar-collapse-chevron,
.index-panel.collapsed .bar-collapse-chevron {
    max-width: 0;
    opacity: 0;
}

.index-switcher.collapsed .bar-collapse-chevron {
    transform: rotate(180deg);
}

.index-panel-content {
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
}

.index-panel.collapsed .index-panel-content {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

.index-panel.collapsed .bar-collapse-chevron {
    transform: rotate(180deg);
}

.index-pill {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    color: color-mix(in srgb, var(--color-text-on-instrument) 72%, transparent);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.index-pill:hover {
    background: rgba(255, 255, 255, 0.10);
}

.index-pill.active {
    background: var(--color-brand-cyan);
    color: #fff;
    border-color: var(--color-brand-cyan);
    box-shadow: 0 0 12px rgba(var(--app-accent-rgb), 0.3);
}


/* Map Container */
.map-container {
    width: 100%;
    flex: 1;
    min-height: 250px;
    overflow: hidden;
    background: rgba(15, 23, 36, 1);
    position: relative;
}

/* MapLibre needs its container to have explicit dimensions */
.map-container .maplibregl-map,
.map-container .maplibregl-canvas-container,
.map-container .maplibregl-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Mobile scroll-lock (#4) — transparent shield on top of the map.
   While locked it intercepts touch and lets the browser scroll the page
   (touch-action: pan-y). Long-press on the shield unlocks; map.js then
   adds .unlocked which removes pointer-events so touches reach MapLibre.
   Desktop (pointer: fine) hides the shield completely. */
#map-scroll-shield {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    touch-action: pan-y;
    cursor: default;
}
@media (pointer: coarse) {
    #map-scroll-shield { display: block; }
    #map-scroll-shield.unlocked { pointer-events: none; }
}

.map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    gap: var(--space-md);
    line-height: 1.5;
}


/* Colour Legend */
.index-legend {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    font-size: var(--font-size-xs);
    color: color-mix(in srgb, var(--color-text-on-instrument) 48%, transparent);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}


/* Pixel Inspector */
.pixel-inspector {
    position: fixed;
    bottom: calc(var(--nav-height) + var(--space-md));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(16px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--shadow-card);
    z-index: 50;
}

.pixel-index-name {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: color-mix(in srgb, var(--color-text-on-instrument) 72%, transparent);
}

.pixel-value {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-emerald);
}

.pixel-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}


/* ============================================================
   HISTORY VIEW
   ============================================================ */

.history-header,
.settings-header {
    padding: var(--space-md) 0;
}

.history-title,
.settings-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 40vh;
    text-align: center;
    color: var(--color-text-muted);
    gap: var(--space-md);
}

.coming-soon p {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.coming-soon-sub {
    font-size: var(--font-size-sm);
    line-height: 1.5;
}


/* ============================================================
   SETTINGS VIEW
   ============================================================ */

.settings-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    margin-bottom: var(--space-md);
}

.settings-user {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

/* Pills wrap onto multiple rows on narrow screens; satellite date pill
   drops into normal flow, right-aligned below the two toolbar bars */
@media (max-width: 767px) {
    /* Pills wrap onto multiple rows on narrow screens — keep the collapse
       handle pinned to the top row instead of centering across all rows */
    .index-switcher {
        align-items: flex-start;
    }

    .index-switcher-scroll {
        flex-wrap: wrap;
    }

    #satellite-date-pill {
        display: table;
        margin: 4px 0 2px auto;
    }
}

/* Sidebar — Base (Mobile: compact strip above map) */
@media (max-width: 767px) {
    .map-sidebar {
        background: var(--color-bg-secondary);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-md);
        padding: var(--space-sm) var(--space-md);
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        max-height: 600px;
        /* Sidebar wrapper doesn't scroll — only field-list does */
        overflow-y: hidden;
        flex-shrink: 0;
    }

    /* Pin the header and search so they never scroll out of view */
    .map-sidebar .sidebar-header,
    .map-sidebar .sidebar-search {
        flex-shrink: 0;
    }

    /* Only the field list scrolls */
    .map-sidebar #field-list {
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }

    /* Hide the duplicate "My Fields" heading inside map-wrapper —
       the sidebar header above already carries the title */
    .map-header-mobile {
        display: none;
    }

    /* Desktop-only controls inside the sidebar header */
    #sidebar-toggle {
        display: none;
    }
}

.sidebar-header {
    display: flex;
    align-items: center;
    padding-bottom: var(--space-sm);
}

.sidebar-header .map-controls {
    flex: 1;
    justify-content: space-between;
}

/* Field count + sort, one row above the list */
.sidebar-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 var(--space-md) 8px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.sidebar-sort label {
    flex-shrink: 0;
    margin-inline-start: auto;
}

.sidebar-sort select {
    width: auto;
    min-width: 0;
    padding: 4px 6px;
    font-size: 12px;
    height: auto;
}

.sidebar-field-count {
    white-space: nowrap;
    font-weight: 600;
}

.sidebar-search {
    margin-bottom: var(--space-sm);
    flex-shrink: 0;
}

.search-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-group:focus-within {
    border-color: var(--color-brand-cyan);
    box-shadow: 0 0 0 3px rgba(var(--app-accent-rgb), 0.12);
}

#map-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    padding: 9px 14px;
    min-width: 0;
}

#map-search-input::placeholder {
    color: var(--color-text-muted);
}

#map-search-btn {
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding: 9px 12px;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

#map-search-btn:hover {
    color: var(--color-brand-cyan);
}

#map-search-input {
    -webkit-appearance: none;
    appearance: none;
}

#map-search-btn.is-busy {
    cursor: progress;
    animation: map-search-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes map-search-pulse {
    from { opacity: 1; }
    to { opacity: 0.35; }
}

.map-search-results {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-xs);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.map-search-result {
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    text-align: start;
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-search-result:hover,
.map-search-result:focus-visible {
    background: rgba(var(--app-accent-rgb), 0.15);
    outline: none;
}

.map-search-credit {
    font-size: 10px;
    color: var(--color-text-muted);
    padding: 4px 12px;
    text-align: end;
}

/* Map credits: a plain line of text, not a box (the compact ⓘ box read as an
   empty text field). Required by the Esri imagery licence — keep it visible. */
.map-container .maplibregl-ctrl-bottom-right .maplibregl-ctrl.maplibregl-ctrl-attrib {
    background: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 10px;
    line-height: 1.3;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

.map-container .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib a {
    color: inherit;
}

.field-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.field-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
    border-inline-start: 3px solid var(--field-health-color, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    /* Vertical stack */
    gap: var(--space-sm);
}

.field-card:hover,
.field-card.active {
    background: var(--color-bg-card-hover);
    border-color: var(--color-brand-cyan);
}

.field-card-top {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    width: 100%;
}

/* Compact rows: actions + trend only on the selected field */
.field-card:not(.active) .field-actions-row,
.field-card:not(.active) .field-history-zone {
    display: none;
}

.field-snapshot {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.snapshot-svg {
    width: 100%;
    height: 100%;
    padding: 4px;
}

.field-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Name + area on one line; crop + sowing date on one muted line below */
.field-header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.field-header h4 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-area {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.field-meta {
    display: flex;
    gap: var(--space-sm);
    font-size: 11px;
    color: var(--color-text-muted);
    min-width: 0;
}

.field-meta p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-actions-row {
    display: flex;
    gap: 8px;
    margin-top: 0;
    /* managed by card gap */
    width: 100%;
}

.field-actions-row .btn-action {
    flex: 1;
    /* Distribute buttons evenly */
}

.btn-action {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: var(--color-text-secondary);
    font-size: 11px;
    padding: 6px 8px;
    justify-content: center;
    white-space: nowrap;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background var(--transition-fast);
}

.btn-action:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-text-primary);
}

.btn-delete:hover {
    background: rgba(255, 23, 68, 0.15);
    color: var(--color-red);
}

.settings-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-brand-cyan), var(--color-brand-navy));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.settings-name {
    font-size: var(--font-size-base);
    font-weight: 600;
}

.settings-email {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.settings-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.settings-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.logout-btn {
    background: rgba(255, 23, 68, 0.1);
    color: var(--color-red);
    border: 1px solid rgba(255, 23, 68, 0.2);
}

.logout-btn:hover {
    background: rgba(255, 23, 68, 0.2);
}

/* Privacy & Data controls */
.settings-hint {
    font-size: 0.82rem;
    opacity: 0.7;
    margin-bottom: var(--space-sm, 8px);
    line-height: 1.4;
}

.secondary-btn {
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin-bottom: 8px;
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.danger-btn {
    background: rgba(255, 23, 68, 0.1);
    color: var(--color-red);
    border: 1px solid rgba(255, 23, 68, 0.3);
}

.danger-btn:hover {
    background: rgba(255, 23, 68, 0.22);
}

.danger-btn:disabled,
.secondary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.danger-note {
    color: var(--color-red);
    opacity: 0.92;
    margin-top: 4px;
}

.privacy-status {
    margin-top: 10px;
    margin-bottom: 0;
}

.privacy-link {
    color: var(--color-brand-cyan);
    text-decoration: none;
}

.privacy-link:hover {
    text-decoration: underline;
}

.privacy-status.error {
    color: var(--color-red);
    opacity: 0.95;
}


/* Spray windows — full-width tile under Advisory/Forecast */
.spray-card {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    border-color: rgba(167, 139, 250, 0.25);
}

.spray-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: #a78bfa;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.35);
}

.spray-headline {
    font-weight: 600;
    margin: 4px 0 8px;
}

.spray-grid {
    display: grid;
    grid-template-columns: 2.6em 1fr;
    gap: 4px 8px;
    align-items: center;
    font-size: 0.7rem;
}

.spray-day { color: var(--color-text-secondary); }

.spray-cells {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 2px;
}

.spray-cell {
    display: block;
    height: 14px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    font: inherit;
}

button.spray-cell { cursor: pointer; }
button.spray-cell:hover { filter: brightness(1.15); }

/* The hour shown in the detail line */
.spray-cell.is-selected {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 1px;
}

/* Hours already gone — an empty outline, so they can't be mistaken for a rating */
.spray-cell.past { box-shadow: inset 0 0 0 1px var(--color-border-strong); }

@media (pointer: coarse) {
    .spray-cell { height: 20px; }
}

.spray-why {
    grid-column: 2;
    margin-top: -2px;
    color: var(--color-text-secondary);
    font-size: 0.65rem;
}

.spray-hours {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-secondary);
    font-size: 0.6rem;
}

.spray-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin: 0 4px 0 10px;
    vertical-align: -1px;
}

.spray-key:first-child { margin-inline-start: 0; }

.spray-cell.good, .spray-key.good { background: var(--color-advisory-ok); }
.spray-cell.marginal, .spray-key.marginal { background: var(--color-advisory-monitor); }
/* Poor = red AND striped, so it never relies on telling red from green
   (red-green colour blindness is common among men) */
.spray-cell.poor, .spray-key.poor {
    background: repeating-linear-gradient(135deg,
        var(--color-advisory-irrigate) 0 3px,
        rgba(255, 23, 68, 0.28) 3px 6px);
}

.spray-summary {
    margin: -4px 0 10px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.spray-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-hover-tint);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.spray-detail[hidden] { display: none; }

.spray-detail-head { font-weight: 600; color: var(--color-text-primary); }
.spray-detail-head--good { color: var(--color-advisory-ok); }
.spray-detail-head--marginal { color: var(--color-advisory-monitor); }
.spray-detail-head--poor { color: var(--color-advisory-irrigate); }

/* The value that caused a Marginal/Poor rating */
.spray-flag { color: var(--color-advisory-monitor); font-weight: 700; }

/* Light theme: the bright status colours are too faint as text on white */
.light-theme .spray-detail-head--good { color: #047857; }
.light-theme .spray-detail-head--marginal,
.light-theme .spray-flag { color: #b45309; }
.light-theme .spray-detail-head--poor { color: #c62828; }

.spray-legend, .spray-note {
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    margin: 8px 0 0;
}

.spray-note { margin-top: 4px; }

/* SFI funding card (public/incentives.js) */
.sfi-headline { font-weight: 600; margin: 4px 0 2px; }
.sfi-facts, .sfi-note { font-size: 0.65rem; color: var(--color-text-secondary); margin: 0 0 8px; }
.sfi-note { margin: 8px 0 0; }
.sfi-note a { color: var(--color-brand-cyan); }
.sfi-desig { list-style: none; margin: 0 0 8px; padding: 0; font-size: 0.72rem; }
.sfi-desig li { padding: 2px 0; }
.sfi-desig li.sfi-desig-clear { font-size: 0.65rem; color: var(--color-text-secondary); }
.sfi-desig a { color: var(--color-brand-cyan); }
.sfi-details summary { cursor: pointer; font-size: 0.75rem; color: var(--color-brand-cyan); }
.sfi-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.sfi-list li { padding: 6px 0; border-top: 1px solid var(--color-border-subtle); font-size: 0.75rem; }
.sfi-list a { color: var(--color-text-primary); text-decoration: none; display: block; }
.sfi-list a:hover { text-decoration: underline; }
.sfi-list li.sfi-group { border-top: none; padding: 10px 0 2px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.dn-list { list-style: none; margin: 4px 0 0; padding: 0; }
.dn-list > li { padding: 6px 0; border-top: 1px solid var(--color-border-subtle); font-size: 0.75rem; }
.dn-list summary { cursor: pointer; }
.dn-title { color: var(--color-text-primary); }
.dn-meta { display: block; font-size: 0.65rem; color: var(--color-text-secondary); margin-top: 2px; }
.dn-meta.dn-recent { color: var(--color-text-primary); font-weight: 600; }
.dn-meta.dn-recent::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-amber); margin-inline-end: 5px; vertical-align: middle; }
.dn-summary { font-size: 0.68rem; color: var(--color-text-secondary); margin: 6px 0; }
.dn-notes { list-style: none; margin: 4px 0 6px; padding: 0; max-height: 260px; overflow-y: auto; }
.dn-notes li { padding: 4px 0; font-size: 0.7rem; }
.dn-date { display: block; font-size: 0.62rem; font-weight: 600; color: var(--color-text-secondary); }
.dn-text { white-space: pre-line; }
.dn-list a, .notices-card .sfi-note a { color: var(--color-brand-cyan); font-size: 0.7rem; }
.dn-ogl { display: block; margin-top: 4px; }
.sfi-rate { display: block; color: var(--color-text-secondary); font-size: 0.68rem; margin-top: 2px; }

/* ============================================================
   RESPONSIVE — Additional
   ============================================================ */

@media (max-width: 360px) {
    .actions-section {
        grid-template-columns: 1fr;
    }

    .index-pill {
        padding: 5px 10px;
        font-size: 0.65rem;
    }
}

/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-container {
    transform: translateY(0);
}

/* Two-panel field setup modal */
.modal-container--panels {
    padding: 0;
    overflow: hidden;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.modal-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-panel--picker {
    display: none;
    flex: 1;
    min-height: 0;
}

/* When the picker panel is active */
.modal-container--panels.picking .modal-panel:not(.modal-panel--picker) {
    display: none;
}

.modal-container--panels.picking .modal-panel--picker {
    display: flex;
}

.modal-container--panels .modal-header,
.modal-container--panels .modal-footer {
    padding: 20px 20px 16px;
    flex-shrink: 0;
}

.modal-container--panels .modal-header {
    border-bottom: 1px solid var(--color-border-subtle);
}

.modal-container--panels .modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
}

.modal-container--panels .modal-footer {
    border-top: 1px solid var(--color-border-subtle);
    padding-top: 14px;
}

/* ── Crop Trigger Button ── */
.crop-trigger-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.crop-trigger-btn:hover,
.crop-trigger-btn:focus {
    border-color: rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.3);
    outline: none;
}

.crop-trigger-btn.has-crop {
    border-color: rgba(var(--app-accent-rgb), 0.4);
    color: var(--color-text-primary);
}

.crop-trigger-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

#crop-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Selected crop meta row */
.crop-trigger-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.crop-meta-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(var(--app-accent-rgb), 0.1);
    color: var(--color-brand-cyan);
    border: 1px solid rgba(var(--app-accent-rgb), 0.25);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}

.crop-meta-detail {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ── Toggle Groups ── */
.toggle-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.toggle-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.toggle-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--color-text-primary);
}

.toggle-btn.active {
    background: rgba(0,200,83,0.12);
    border-color: rgba(0,200,83,0.4);
    color: var(--color-emerald);
}

/* ── Crop Picker Panel ── */
.crop-picker-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px !important;
}

.crop-picker-back {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
    flex-shrink: 0;
}

.crop-picker-back:hover { color: var(--color-text-primary); }

.crop-search-row {
    padding: 0 20px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.crop-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 10px;
}

.crop-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-family: var(--font-family);
}

.crop-search-input::placeholder { color: var(--color-text-muted); }

.crop-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 2px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color 0.15s;
}

.crop-search-clear:hover { color: var(--color-text-primary); }

.crop-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    overscroll-behavior: contain;
}

.crop-cat-header {
    padding: 10px 20px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    position: sticky;
    top: 0;
    background: rgba(13,59,46,0.97);
    backdrop-filter: blur(8px);
    z-index: 1;
}

.crop-list-item {
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background 0.12s;
    border-left: 2px solid transparent;
}

.crop-list-item:hover {
    background: rgba(255,255,255,0.05);
}

.crop-list-item.selected {
    background: rgba(var(--app-accent-rgb), 0.08);
    border-left-color: var(--color-brand-cyan);
}

.crop-item-name {
    font-size: 0.875rem;
    color: var(--color-text-primary);
    font-weight: 500;
}

.crop-list-item.selected .crop-item-name {
    color: var(--color-brand-cyan);
}

.crop-item-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.crop-no-results {
    padding: 32px 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.modal-header {
    border-bottom: 1px solid var(--color-border-subtle);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.modal-body {
    margin-bottom: 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--color-input-bg);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
    font-size: 0.95rem;
}

.form-input:focus {
    border-color: var(--color-brand-cyan);
    box-shadow: 0 0 0 3px rgba(var(--app-accent-rgb), 0.15);
    outline: none;
}

.notepad-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    border: 1px solid var(--color-border-subtle);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: var(--space-md);
}

.farm-notepad {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--color-input-bg);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    margin-top: var(--space-sm);
}

.farm-notepad::placeholder {
    color: var(--color-text-muted);
}

.farm-notepad:focus {
    border-color: var(--color-brand-cyan);
    box-shadow: 0 0 0 3px rgba(var(--app-accent-rgb), 0.15);
    outline: none;
}

.notepad-status {
    margin-top: 4px;
    font-size: 0.82rem;
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.btn-secondary:hover {
    background: var(--color-hover-tint);
    color: var(--color-text-primary);
}

.btn-primary {
    background: var(--color-brand-cyan);
    border: none;
    color: #000;
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(var(--app-accent-rgb), 0.3);
}

.btn-primary:hover {
    background: #e69a00;
}
/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
#sentinel-toast-container {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

/* Stays dark (instrument tier) regardless of theme */
.sentinel-toast {
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--color-text-on-instrument);
    font-size: 13px;
    padding: 10px 18px;
    max-width: 320px;
    text-align: center;
    pointer-events: auto;
    animation: toast-in 0.2s ease;
}

.sentinel-toast.toast-error {
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.sentinel-toast.toast-info {
    border-color: rgba(96, 165, 250, 0.4);
    color: #93c5fd;
}

.sentinel-toast.toast-success {
    border-color: rgba(52, 211, 153, 0.5);
    color: #6ee7b7;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CONFIRM DIALOG
   ============================================================ */
#sentinel-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sentinel-confirm-overlay.hidden { display: none; }

.sentinel-confirm-box {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: 14px;
    padding: 24px;
    max-width: 320px;
    width: 90%;
    text-align: center;
}

.sentinel-confirm-box p {
    color: var(--color-text-primary);
    font-size: 14px;
    margin: 0 0 20px;
    line-height: 1.5;
}

.sentinel-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ============================================================
   INDEX PANEL — Legend + Description (Map view)
   ============================================================ */
.index-panel {
    padding: 10px 16px 8px;
    background: rgba(0, 0, 0, 0.75);
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.index-panel .bar-collapse-btn {
    align-self: flex-start;
    margin: -4px 0 4px -6px;
}

.index-panel.collapsed .bar-collapse-btn {
    margin: 0;
}

.legend-bar-container {
    margin-bottom: 6px;
}

/* "Your field" marker + 10th–90th percentile band over the scale, and the
   per-class breakdown below it (see computeFieldStats in map.js). The scale
   rows are inset so the end tick labels aren't clipped by the panel. */
.legend-field-row,
.legend-gradient-wrap,
.legend-bar-container .legend-ticks {
    margin-left: 10px;
    margin-right: 10px;
}

.legend-field-row {
    position: relative;
    height: 22px;
}

.legend-field-label {
    position: absolute;
    bottom: 7px;
    transform: translateX(-50%);
    font-size: 11px;
    white-space: nowrap;
    color: rgba(255,255,255,0.7);
}

.legend-field-label b {
    color: #fff;
}

.legend-field-marker {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
}

.legend-gradient-wrap {
    position: relative;
}

.legend-field-band {
    position: absolute;
    top: -3px;
    bottom: -3px;
    border: 1.5px solid rgba(255,255,255,0.9);
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.45);
    pointer-events: none;
}

.legend-breakdown {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.legend-breakdown-head {
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand-cyan);
}

.legend-breakdown-src {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255,255,255,0.45);
}

.legend-breakdown-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.legend-classes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

.legend-class i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-inline-end: 4px;
}

.legend-class b {
    color: #fff;
    font-weight: 600;
}

.legend-breakdown-hint {
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
}

/* Overview ⇄ field swap (see swapLegendContent in map.js) */
.legend-bar-container.legend-swap > * {
    animation: legend-swap-in 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.legend-bar-container.legend-swap > :nth-child(2) { animation-delay: 0.03s; }
.legend-bar-container.legend-swap > :nth-child(3) { animation-delay: 0.06s; }
.legend-bar-container.legend-swap > :nth-child(n+4) { animation-delay: 0.09s; }

@keyframes legend-swap-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .legend-bar-container.legend-swap > * { animation: none; }
}

/* Farm overview (no field selected) — each field as a health-coloured dot on
   the scale, status mix by area, and up to three fields that need attention. */
.legend-farm-dot {
    position: absolute;
    bottom: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
    transform: translateX(-50%);
}

.legend-class-n {
    color: rgba(255,255,255,0.45);
}

.legend-attn-head {
    margin-top: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

.legend-attn-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.legend-attn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 3px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.85);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.legend-attn:hover,
.legend-attn:focus-visible {
    border-color: var(--color-brand-cyan);
}

.legend-attn i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-attn b {
    color: #fff;
}

/* Selected-field chip under the toolbar bars — same glass capsule */
.selected-field-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    max-width: 100%;
    padding: 4px 4px 4px 12px;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-card);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.selected-field-chip.hidden {
    display: none;
}

.selected-field-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.selected-field-clear {
    flex-shrink: 0;
    min-height: 30px;
    padding: 4px 12px;
    border: 1px solid var(--color-brand-cyan);
    border-radius: var(--radius-full);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.selected-field-clear:hover,
.selected-field-clear:focus-visible {
    background: var(--color-brand-cyan);
}

/* Map buttons (geolocate + show all fields) — same dark glass as the
   floating panels instead of MapLibre's white squares. */
.map-container .maplibregl-ctrl-group {
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.map-container .maplibregl-ctrl-group button {
    width: 36px;
    height: 36px;
    background-color: transparent;
}

.map-container .maplibregl-ctrl-group button:not(:disabled):hover {
    background-color: rgba(var(--app-accent-rgb), 0.2);
}

.map-container .maplibregl-ctrl-group button:focus:focus-visible {
    box-shadow: inset 0 0 0 2px var(--app-accent);
}

/* MapLibre draws the idle locate icon in #333 — lighten it for the dark
   button. Active (blue) and error (red) states keep their meaning colours. */
.map-container .maplibregl-ctrl-geolocate:not(.maplibregl-ctrl-geolocate-active):not(.maplibregl-ctrl-geolocate-active-error):not(.maplibregl-ctrl-geolocate-background):not(.maplibregl-ctrl-geolocate-background-error) .maplibregl-ctrl-icon {
    filter: invert(0.9);
}

/* "Show all fields" map control (next to geolocate) */
.map-overview-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
}

/* Index explanation panel (see #index-info-panel) — scrolls inside the
   capsule when the text is taller than the space beside the map. */
.index-info-panel .index-panel-content {
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
}

.index-info-body {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255,255,255,0.7);
    animation: index-info-fade 0.35s ease;
}

.index-info-body p {
    margin: 0;
}

.info-title {
    font-weight: 700;
    color: rgba(255,255,255,0.92);
}

.info-full {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 6px;
}

.info-plain {
    color: rgba(255,255,255,0.88);
}

.info-section {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.info-head {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand-cyan);
}

/* Letter-spacing breaks Arabic letter joining */
/* The colour scale reads low → high left to right in every language, so the
   rows drawn against it (marker, ticks, breakdown bar) stay LTR too. */
.legend-field-row,
.legend-gradient-wrap,
.legend-bar-container .legend-ticks,
.legend-breakdown-bar {
    direction: ltr;
}

[dir="rtl"] .info-head,
[dir="rtl"] .legend-breakdown-head,
[dir="rtl"] .legend-attn-head {
    letter-spacing: 0;
}

@keyframes index-info-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .index-info-body { animation: none; }
}

.legend-gradient {
    height: 10px;
    border-radius: 5px;
    width: 100%;
}

.legend-ticks {
    position: relative;
    height: 28px;
    margin-top: 2px;
}

.legend-tick {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.legend-tick::before {
    content: '';
    display: block;
    width: 1px;
    height: 4px;
    background: rgba(255,255,255,0.3);
    margin-bottom: 2px;
}

.tick-main {
    font-size: 9px;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    line-height: 1.2;
}

.tick-sub {
    font-size: 8px;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    line-height: 1.2;
}

/* ============================================================
   HISTORY VIEW
   ============================================================ */
.history-header {
    padding: 16px 16px 0;
}

.history-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 2px 0 0;
}

.history-controls {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-field-select {
    width: 100%;
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
}

.history-field-select option {
    background: #080808;
    color: #fff;
}

.history-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hist-pill {
    padding: 5px 10px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.hist-pill.active {
    background: rgba(var(--app-accent-rgb), 0.15);
    border-color: var(--app-accent);
    color: var(--app-accent);
}

.hist-pill:hover:not(.active) {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
}

.history-load-btn {
    width: 100%;
    padding: 10px;
    font-size: 13px;
}

.history-load-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.history-chart-wrap {
    padding: 0 16px 80px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.history-chart-svg {
    width: 100%;
    max-width: 600px;
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.06);
    display: block;
}

.history-chart-caption {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    margin-top: 6px;
    text-align: center;
    width: 100%;
    max-width: 600px;
}

.history-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 0;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
}

.history-loading-sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0;
}

.history-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(var(--app-accent-rgb), 0.2);
    border-top-color: var(--app-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   MAP HISTORY PANEL — Inline trend below the index legend
   ============================================================ */
.map-history-panel {
    position: relative;
    padding: 8px 16px 6px;
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.map-history-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-brand-cyan);
    box-shadow: 0 0 20px rgba(var(--app-accent-rgb), 0.3);
}

.map-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    flex-wrap: wrap;
}

.map-history-title {
    font-size: 10px;
    color: color-mix(in srgb, var(--color-text-primary) 45%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.map-history-header-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.map-history-field-name {
    font-size: 10px;
    color: var(--app-accent);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Trend controls — small labelled segmented controls. Quieter than the map's
   index pills on purpose: these tune the chart, they aren't the main choice. */
.hist-controls {
    display: flex;
    align-items: center;
    gap: 6px 16px;
    flex-wrap: wrap;
}

.hist-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hist-control-label {
    font-size: 10px;
    color: color-mix(in srgb, var(--color-text-primary) 45%, transparent);
    white-space: nowrap;
}

.hist-seg {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 7px;
    background: var(--color-hover-tint);
}

.hist-seg-btn {
    padding: 3px 9px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: color-mix(in srgb, var(--color-text-primary) 60%, transparent);
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.hist-seg-btn:hover:not(.active) {
    color: var(--color-text-primary);
}

.hist-seg-btn.active {
    background: rgba(var(--app-accent-rgb), 0.22);
    color: var(--color-text-primary);
    box-shadow: inset 0 0 0 1px rgba(var(--app-accent-rgb), 0.55);
}

.hist-seg-btn:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 1px;
}

.map-history-close {
    margin-left: auto;
    background: none;
    border: none;
    color: color-mix(in srgb, var(--color-text-primary) 35%, transparent);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.map-history-close:hover {
    color: var(--color-text-primary);
    background: var(--color-hover-tint);
}

.map-history-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: color-mix(in srgb, var(--color-text-primary) 40%, transparent);
    padding: 2px 0;
}

.map-history-svg {
    width: 100%;
    height: 110px;
    display: block;
    overflow: visible;
    color: var(--color-text-primary);
}

.map-history-caption {
    font-size: 10px;
    color: color-mix(in srgb, var(--color-text-primary) 25%, transparent);
    text-align: center;
    margin: 0;
}

.map-history-filmstrip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--app-accent-rgb), 0.25) transparent;
}
.map-history-filmstrip::-webkit-scrollbar { height: 3px; }
.map-history-filmstrip::-webkit-scrollbar-thumb {
    background: rgba(var(--app-accent-rgb), 0.3);
    border-radius: 2px;
}

.snap-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.snap-img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    border: 1px solid rgba(var(--app-accent-rgb), 0.2);
    object-fit: cover;
    background: rgba(0,0,0,0.3);
    display: block;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.12s;
}
.snap-img:hover { border-color: rgba(var(--app-accent-rgb), 0.6); transform: scale(1.05); }

.snap-date {
    font-size: 9px;
    font-family: Inter, sans-serif;
    color: color-mix(in srgb, var(--color-text-primary) 35%, transparent);
    white-space: nowrap;
}

/* ---- NDVI snapshot lightbox ---- */
.snap-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.snap-lightbox.hidden { display: none; }
.snap-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
}
.snap-lightbox-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.snap-lightbox-img {
    max-width: min(80vmin, 512px);
    max-height: min(80vmin, 512px);
    border-radius: 8px;
    border: 1px solid rgba(var(--app-accent-rgb), 0.35);
    image-rendering: auto;
    display: block;
}
.snap-lightbox-label {
    font-size: 13px;
    font-family: Inter, sans-serif;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
}

/* ============================================================
   PIN INSPECTOR POPUP
   ============================================================ */
.sentinel-pin-popup .maplibregl-popup-content {
    background: rgba(9, 38, 30, 0.96);
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: 10px;
    padding: 10px 16px 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.55);
    min-width: 72px;
    text-align: center;
}
.sentinel-pin-popup .maplibregl-popup-tip {
    border-top-color: rgba(9, 38, 30, 0.96);
}
.sentinel-pin-popup .maplibregl-popup-close-button {
    color: rgba(255,255,255,0.4);
    font-size: 16px;
    line-height: 1;
    top: 4px;
    right: 6px;
}

/* Touch devices need a fingertip-sized close target */
@media (pointer: coarse) {
    .sentinel-pin-popup .maplibregl-popup-close-button {
        font-size: 22px;
        padding: 6px 10px;
        top: 0;
        right: 0;
    }
}
.sentinel-pin-popup .maplibregl-popup-close-button:hover {
    color: #fff;
    background: none;
}
.pin-popup-index {
    font-size: 10px;
    font-weight: 700;
    color: rgba(52, 211, 153, 0.65);
    letter-spacing: 0.08em;
    margin-bottom: 2px;
    font-family: var(--font-family);
}
.pin-popup-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--app-accent);
    line-height: 1;
    font-family: var(--font-family);
}
.pin-popup-label {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
    font-family: var(--font-family);
}

/* Field zones tap-inspect popup (reuses .sentinel-pin-popup container) */
.zones-pin { font-family: var(--font-family); min-width: 120px; }
.zones-pin-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.zones-pin-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.4);
}
.zones-pin-title {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.zones-pin-value {
    font-size: 16px;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.15;
}
.zones-pin-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    margin-top: 2px;
}

/* ============================================================
   SATELLITE DATE PILL — standalone, top-right of the map (#satellite-date-pill)
   ============================================================ */
.index-date-chip {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: rgba(15, 33, 55, 0.95);
    border: 1px solid rgba(96, 165, 250, 0.22);
    color: rgba(96, 165, 250, 0.85);
    font-size: 10px;
    font-family: var(--font-family);
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.index-date-chip .date-chip-label {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    margin-right: 6px;
}

.index-date-chip .date-chip-date {
    font-weight: 600;
}

/* ============================================================
   FIELD CARD SPARKLINE — Mini trend inside each sidebar card
   ============================================================ */
.field-history-zone {
    border-top: 1px solid var(--color-border-subtle);
    padding-top: 6px;
    width: 100%;
}

.field-sparkline {
    width: 100%;
    height: 52px;
    display: block;
    overflow: visible;
    color: var(--color-text-primary);
}

/* ============================================================
   RTL (Arabic) — baseline. dir="rtl" on <html> already flips text
   alignment and flex row direction; these are minimal, safe additions.
   Expand per-screen as more UI is translated (see handover i18n plan).
   ============================================================ */
[lang="ar"],
[dir="rtl"] {
    font-family: "Cairo", "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", sans-serif;
}

[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    text-align: right;
}

/* ---- RTL polish (v0.25.0 i18n) ----
   dir="rtl" flips flex row order + base text; these target the spots that
   need explicit start/end handling. Keep LTR untouched. */

/* General: cards, panels and list items read right-aligned */
[dir="rtl"] .stat-row,
[dir="rtl"] .field-meta,
[dir="rtl"] .field-card,
[dir="rtl"] .settings-card,
[dir="rtl"] .advisory-card,
[dir="rtl"] .crop-card,
[dir="rtl"] .modal-body,
[dir="rtl"] .form-group {
    text-align: right;
}

/* Forms: labels and hints align to the start (right in RTL) */
[dir="rtl"] .form-label,
[dir="rtl"] .settings-label,
[dir="rtl"] .settings-hint,
[dir="rtl"] .settings-value {
    text-align: right;
}

/* Modal footer buttons sit at the start edge */
[dir="rtl"] .modal-footer {
    flex-direction: row-reverse;
}

/* Bottom nav: keep the natural visual order (icons + labels centred already) */
[dir="rtl"] .bottom-nav {
    direction: rtl;
}

/* Sidebar header controls flip cleanly */
[dir="rtl"] .sidebar-header,
[dir="rtl"] .map-controls,
[dir="rtl"] .sidebar-sort {
    direction: rtl;
}

/* Chevrons / directional arrows point the right way in RTL */
[dir="rtl"] .sidebar-ctrl-btn svg,
[dir="rtl"] .crop-trigger-btn > svg:last-child,
[dir="rtl"] .crop-picker-back svg {
    transform: scaleX(-1);
}

/* Toggle groups + index switcher pills follow reading direction */
[dir="rtl"] .toggle-group,
[dir="rtl"] .index-switcher {
    direction: rtl;
}

/* Crop list rows: name on the right, meta on the left */
[dir="rtl"] .crop-list-item,
[dir="rtl"] .crop-cat-header {
    text-align: right;
}

/* Pixel inspector + history caption read RTL */
[dir="rtl"] .pixel-inspector,
[dir="rtl"] .map-history-caption,
[dir="rtl"] .map-history-header {
    direction: rtl;
}

/* Forecast / gauge labels stay centred (numeric); no flip needed.
   Date chip flips to keep the icon leading. */
[dir="rtl"] .index-date-chip {
    direction: rtl;
}

/* Danger note + privacy link align right */
[dir="rtl"] .danger-note,
[dir="rtl"] .privacy-link {
    text-align: right;
}

/* ============================================================
   SPOTLIGHT TOUR
   ============================================================ */

/* SVG overlay — dims everything except the hole cutout */
.sp-svg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sp-svg.sp-active { opacity: 1; }
.sp-dim { fill: rgba(0, 0, 0, 0.72); }

/* Tooltip bubble */
.sp-tooltip {
    position: fixed;
    z-index: 10000;
    /* Card tint over a solid base: the dark card colour is translucent and
       whatever sits under the tip would show through the text. */
    background: linear-gradient(var(--color-bg-card), var(--color-bg-card)), var(--color-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 18px 14px;
    width: 290px;
    max-width: calc(100vw - 16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.sp-tooltip.sp-active {
    opacity: 1;
    pointer-events: auto;
}

.sp-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary, #f1f5f9);
    margin: 0 0 6px;
    line-height: 1.3;
}
.sp-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-secondary, #94a3b8);
    margin: 0 0 14px;
}
.sp-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sp-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sp-progress {
    font-size: 12px;
    color: var(--color-text-secondary, #94a3b8);
}
.sp-skip {
    background: none;
    border: none;
    color: var(--color-text-secondary, #94a3b8);
    font-size: 13px;
    cursor: pointer;
    padding: 6px 0;
    transition: color 0.15s;
}
.sp-skip:hover { color: var(--color-text-primary, #f1f5f9); }
.sp-next {
    background: var(--app-accent);
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sp-next:hover { opacity: 0.85; }
.sp-back {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: var(--color-text-primary, #f1f5f9);
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
}
.sp-more {
    display: block;
    background: none;
    border: none;
    padding: 0;
    margin: -6px 0 12px;
    color: var(--app-accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Settings → Tips: one button per set */
.tips-replay-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 12px;
}
.tips-replay-list .secondary-btn {
    margin: 0;
    padding: 8px 12px;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* Arrow pointing toward the highlighted element */
.sp-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
}
.sp-arrow--up {
    bottom: 100%;
    border-bottom-color: var(--color-bg-secondary);
    border-top: none;
}
.sp-arrow--down {
    top: 100%;
    border-top-color: var(--color-bg-secondary);
    border-bottom: none;
}
.sp-arrow--left {
    right: 100%;
    border-right-color: var(--color-bg-secondary);
    border-left: none;
}
.sp-arrow--right {
    left: 100%;
    border-left-color: var(--color-bg-secondary);
    border-right: none;
}

/* Emerald ring on the spotlit element */
.sp-target-highlight {
    outline: 2px solid var(--app-accent) !important;
    outline-offset: 3px !important;
    z-index: 9999 !important;
}
/* Lifts the target above the dim layer; tour.js adds it only to unpositioned
   targets so fixed/absolute ones (the bottom bar) stay where they are. */
.sp-target-static {
    position: relative;
}

/* Field zones panel (zones.js) — sits below the map layout like .map-history-panel */
.zones-panel {
    padding: 8px 16px 10px;
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.zones-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.zones-panel-title {
    font-size: 10px;
    color: color-mix(in srgb, var(--color-text-primary) 40%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    flex-shrink: 0;
}
.zones-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.zones-chip {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    font-size: 11px;
    color: var(--color-text-secondary);
}
.zones-chip b { color: var(--color-text-primary); }
.zones-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.zones-headline {
    font-size: 12px;
    color: var(--color-text-primary);
}
.zones-headline:empty { display: none; }
.zones-note {
    font-size: 10px;
    color: var(--color-text-muted);
}
.zones-note:empty { display: none; }
.zones-generate-btn {
    align-self: flex-start;
    margin-top: 4px;
    padding: 5px 12px;
    font: inherit;
    font-size: 11px;
    color: var(--color-text-primary);
    background: transparent;
    border: 1px solid var(--color-border-subtle);
    border-radius: 999px;
    cursor: pointer;
}
.zones-generate-btn:hover { border-color: var(--color-text-secondary); }

/* ============================================================
   FIELD SCOUT OVERLAY
   ============================================================ */

/* Entry button in dashboard */
.scout-entry-row {
    padding: 0 var(--space-md) var(--space-sm);
}

@media (min-width: 768px) {
    .scout-entry-row { display: none; }
}

.scout-entry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: rgba(var(--app-accent-rgb), 0.07);
    border: 1px solid rgba(var(--app-accent-rgb), 0.25);
    border-radius: var(--radius-md);
    color: var(--color-brand-cyan);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.scout-entry-btn:hover {
    background: rgba(var(--app-accent-rgb), 0.13);
    border-color: rgba(var(--app-accent-rgb), 0.45);
}

/* --- Full-screen overlay shell --- */

.scout-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    overflow: hidden;
    background: #000;
}

.scout-camera {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scout--no-camera .scout-camera { display: none; }

.scout-no-camera-bg {
    display: none;
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, #0a0a1a 0%, #000 70%);
}

.scout--no-camera .scout-no-camera-bg { display: block; }

/* --- HUD layer (absolute children, not flex) --- */

.scout-hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Top bar */
.scout-top-bar {
    position: absolute;
    top: calc(76px + env(safe-area-inset-top, 0px));
    left: 16px;
    right: 72px;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
}

.scout-field-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scout-field-meta {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 2px;
}

/* Compass strip */
.scout-compass {
    position: absolute;
    top: calc(140px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    padding: 5px 14px;
    white-space: nowrap;
}

.scout-compass-dir {
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-tech);
    color: var(--app-accent);
    min-width: 24px;
    text-align: center;
}

.scout-compass-sep {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
}

.scout-compass-deg {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    min-width: 32px;
}

/* Mid row: NDVI panel · pulse · VSM panel */
.scout-mid-row {
    position: absolute;
    top: 50%;
    left: 16px;
    right: 16px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Glass data panels */
.scout-panel {
    width: 88px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    transition: border-color var(--transition-base);
}

.scout-panel-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-tech);
    color: #fff;
    line-height: 1;
    transition: color var(--transition-base);
}

.scout-panel-label {
    display: block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.38);
    margin-top: 5px;
}

.scout-panel-sub {
    display: block;
    font-size: 10px;
    font-weight: 500;
    margin-top: 3px;
    transition: color var(--transition-base);
}

/* Center pulse */
.scout-center-pulse {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.scout-pulse-ring {
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(var(--app-accent-rgb), 0.55);
    border-radius: 50%;
    animation: scout-pulse 2.4s ease-out infinite;
}

.scout-pulse-ring--delay { animation-delay: 1.2s; }

@keyframes scout-pulse {
    0%   { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* No-camera fallback message */
.scout-no-camera-msg {
    display: none;
    position: absolute;
    top: calc(50% + 52px);
    left: 0;
    right: 0;
    text-align: center;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.4);
    padding: 0 var(--space-xl);
    margin: 0;
}

.scout--no-camera .scout-no-camera-msg { display: block; }

/* Bottom advisory bar */
.scout-advisory-bar {
    position: absolute;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color var(--transition-base);
}

.scout-adv-action {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--transition-base);
}

.scout-adv-detail {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

/* Advisory state colours */
.scout-adv--irrigate { border-color: rgba(255, 23, 68, 0.4); }
.scout-adv--irrigate .scout-adv-action { color: #ff1744; }
.scout-adv--monitor  { border-color: rgba(255, 171, 0, 0.4); }
.scout-adv--monitor  .scout-adv-action { color: #ffab00; }
.scout-adv--ok       { border-color: rgba(52, 211, 153, 0.4); }
.scout-adv--ok       .scout-adv-action { color: #34d399; }

/* Close button */
.scout-close-btn {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: 16px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    color: #fff;
    cursor: pointer;
    transition: background var(--transition-fast);
    z-index: 1;
}

.scout-close-btn:hover { background: rgba(0, 0, 0, 0.72); }

/* ============================================================
   USER GUIDE OVERLAY
   Full-screen `.hidden`-toggle overlay, same tier as .scout-overlay.
   Content comes from guide-content.js via guide.js — styled here
   entirely from existing tokens so light/dark theme is automatic.
   Directional rules use logical properties (inline-start/end,
   text-align:start) so RTL/Arabic is correct with no extra overrides.
   ============================================================ */

.guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--color-bg-primary);
}

.guide-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.guide-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: calc(var(--space-sm) + env(safe-area-inset-top, 0px)) var(--space-md) var(--space-sm);
    background: var(--color-bg-nav);
    border-bottom: 1px solid var(--color-border-subtle);
}

.guide-title {
    flex: 1;
    font-family: var(--font-tech);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
}

.guide-toc-btn,
.guide-close-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.guide-toc-btn:hover,
.guide-close-btn:hover {
    background: var(--color-hover-tint);
    color: var(--color-text-primary);
}

.guide-toc {
    flex-shrink: 0;
    max-height: 40vh;
    overflow-y: auto;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-subtle);
    padding: var(--space-sm) var(--space-md);
}

.guide-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.guide-toc-list a {
    display: block;
    padding: 7px var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.guide-toc-list a:hover {
    background: var(--color-hover-tint);
    color: var(--color-text-primary);
}

.guide-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-lg) var(--space-md) var(--space-2xl);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.7;
}

.guide-section {
    scroll-margin-top: var(--space-md);
    padding-bottom: var(--space-xl);
    margin-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border-subtle);
}

.guide-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.guide-section h2 {
    font-family: var(--font-tech);
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm);
}

.guide-section h3 {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin: var(--space-lg) 0 var(--space-xs);
}

.guide-section h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: var(--space-md) 0 var(--space-xs);
}

.guide-section p,
.guide-section ul,
.guide-section ol {
    margin: 0 0 var(--space-sm);
}

.guide-section ul,
.guide-section ol {
    padding-inline-start: 1.3em;
}

.guide-section li { margin: 4px 0; }

.guide-lede {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.guide-section a {
    color: var(--color-brand-cyan);
}

.guide-ui {
    font-family: var(--font-tech);
    font-size: 0.92em;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
}

.guide-val {
    font-family: var(--font-tech);
    color: var(--color-brand-cyan);
    font-weight: 700;
}

.guide-chip {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    border-radius: 2px;
    margin-inline-end: 0.4em;
    vertical-align: -0.08em;
    border: 1px solid var(--color-border-strong);
}

/* Callouts — coloured border on the reading-start side (logical
   property, flips automatically for RTL) */
.guide-callout {
    border-inline-start: 3px solid var(--color-advisory-ok);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-md) 0;
}

.guide-callout-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    color: var(--color-advisory-ok);
}

.guide-callout p { margin: 0; }

.guide-callout--note { border-inline-start-color: var(--color-blue); }
.guide-callout--note .guide-callout-label { color: var(--color-blue); }

.guide-callout--warn { border-inline-start-color: var(--color-advisory-irrigate); }
.guide-callout--warn .guide-callout-label { color: var(--color-advisory-irrigate); }

/* Data tables */
.guide-tblwrap {
    overflow-x: auto;
    margin: var(--space-md) 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}

.guide-tblwrap table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--font-size-sm);
}

.guide-tblwrap th,
.guide-tblwrap td {
    text-align: start;
    padding: var(--space-sm);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: top;
}

.guide-tblwrap tr:last-child td { border-bottom: none; }

.guide-tblwrap th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    background: var(--color-bg-card-hover);
}

.guide-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Numbered step lists */
.guide-steps {
    counter-reset: guide-step;
    list-style: none;
    padding-inline-start: 0 !important;
}

.guide-steps > li {
    counter-increment: guide-step;
    position: relative;
    padding-inline-start: 2.4em;
    margin: 0 0 var(--space-sm) !important;
}

.guide-steps > li::before {
    content: counter(guide-step);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 1.6em;
    height: 1.6em;
    border-radius: var(--radius-full);
    background: var(--color-brand-cyan);
    color: #000;
    font-weight: 700;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* Glossary */
.guide-glossary { margin: var(--space-md) 0; }
.guide-glossary dt {
    font-weight: 700;
    color: var(--color-text-primary);
    margin-top: var(--space-md);
}
.guide-glossary dd {
    margin-inline-start: 0;
    color: var(--color-text-secondary);
}

/* "?" contextual help buttons, dropped into existing card/panel headers */
.guide-help-btn {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-card-hover);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.guide-help-btn:hover {
    background: var(--color-hover-tint);
    color: var(--color-text-primary);
}

.card-header .guide-help-btn { margin-inline-start: auto; }

/* The index-panel's toggle handle is a full-width flex-column row, so the
   help button floats in its corner rather than joining that flex flow. */
.index-panel { position: relative; }

.guide-help-btn--panel {
    position: absolute;
    top: 8px;
    inset-inline-end: 12px;
    z-index: 2;
}

/* ============================================================
   MAP ADD DROPDOWN / MENU
   ============================================================ */
.map-add-dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-full);
    overflow: visible;
}

.map-add-dropdown .map-add-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    flex-grow: 1;
}

.map-add-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-xs);
    background: rgba(var(--app-accent-rgb), 0.1);
    border: 1px solid rgba(var(--app-accent-rgb), 0.35);
    border-left: 1px solid rgba(var(--app-accent-rgb), 0.2);
    border-top-right-radius: var(--radius-full);
    border-bottom-right-radius: var(--radius-full);
    color: var(--color-brand-cyan);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.map-add-toggle:hover {
    background: rgba(var(--app-accent-rgb), 0.18);
}

.map-add-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    margin-top: 4px;
    display: none;
    flex-direction: column;
}

.map-add-menu.active {
    display: flex;
}

.map-add-menu-item {
    background: none;
    border: none;
    padding: 8px 12px;
    color: var(--color-text-on-instrument);
    font-size: var(--font-size-xs);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.map-add-menu-item:hover {
    background: rgba(var(--app-accent-rgb), 0.1);
    color: var(--color-brand-cyan);
}

.map-add-menu-item:first-child {
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}

.map-add-menu-item:last-child {
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

@keyframes slideInDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ============================================================
   BOUNDARY EDIT PANEL
   ============================================================ */
.boundary-edit-panel {
    position: absolute;
    top: 70px;
    left: 20px;
    z-index: 100;
    width: 280px;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--app-accent-rgb), 0.35);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    color: var(--color-text-on-instrument);
    animation: slideInDown 0.3s ease-out;
}

.boundary-edit-panel.hidden {
    display: none !important;
}

.be-panel-title {
    font-family: var(--font-tech);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-brand-cyan);
}

.be-panel-desc {
    font-size: var(--font-size-xs);
    color: color-mix(in srgb, var(--color-text-on-instrument) 48%, transparent);
    line-height: 1.4;
    margin: 0;
}

.be-panel-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.btn-be {
    flex: 1;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-tech);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.btn-be--cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-on-instrument);
}

.btn-be--cancel:hover {
    background: rgba(255, 255, 255, 0.12);
}

.btn-be--save {
    background: var(--color-brand-cyan);
    border: 1px solid var(--color-brand-cyan);
    color: #121212;
}

.btn-be--save:hover {
    background: #ffb300;
    box-shadow: 0 0 10px rgba(var(--app-accent-rgb), 0.35);
}

/* ============================================================
   GUIDED SELECT PANEL
   ============================================================ */
.guided-select-panel {
    position: absolute;
    top: 70px;
    left: 20px;
    z-index: 100;
    width: 280px;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    color: var(--color-text-on-instrument);
    animation: slideInDown 0.3s ease-out;
}

.guided-select-panel.hidden {
    display: none !important;
}

.gs-panel-title {
    font-family: var(--font-tech);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-brand-cyan);
}

.gs-panel-desc {
    font-size: var(--font-size-xs);
    color: color-mix(in srgb, var(--color-text-on-instrument) 48%, transparent);
    line-height: 1.4;
    margin: 0;
}

.gs-counter {
    font-family: var(--font-tech);
    font-size: var(--font-size-xs);
    font-weight: bold;
    color: var(--color-brand-cyan);
    background: rgba(var(--app-accent-rgb), 0.1);
    border: 1px solid rgba(var(--app-accent-rgb), 0.2);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    text-align: center;
    margin: var(--space-xs) 0;
}

.gs-shape-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.gs-option-title {
    font-family: var(--font-tech);
    font-size: var(--font-size-xs);
    font-weight: bold;
    color: var(--color-text-on-instrument);
}

.gs-radio-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    cursor: pointer;
    color: color-mix(in srgb, var(--color-text-on-instrument) 48%, transparent);
    transition: color var(--transition-fast);
}

.gs-radio-label:hover {
    color: var(--color-text-on-instrument);
}

.gs-radio-label input[type="radio"] {
    margin: 0;
    accent-color: var(--color-brand-cyan);
}

.gs-panel-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.btn-gs {
    flex: 1;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-tech);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.btn-gs--cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-on-instrument);
}

.btn-gs--cancel:hover {
    background: rgba(255, 255, 255, 0.12);
}

.btn-gs--generate {
    background: var(--color-brand-cyan);
    border: 1px solid var(--color-brand-cyan);
    color: #121212;
}

.btn-gs--generate:hover:not(:disabled) {
    background: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}

.btn-gs--generate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   NEWSLETTER SIGNUP CARD (Mailchimp)
   ============================================================ */

.newsletter-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: var(--space-lg);
    margin-top: var(--space-xl);
    text-align: left;
    transition: all 0.3s ease;
}

.light-theme .newsletter-card {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.newsletter-card:focus-within {
    border-color: rgba(var(--app-accent-rgb), 0.3);
}

.newsletter-card-title {
    font-family: var(--font-tech);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 6px 0;
}

.newsletter-card-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin: 0 0 var(--space-md) 0;
}

.newsletter-form-group {
    display: flex;
    gap: 8px;
    margin-bottom: var(--space-sm);
}

.newsletter-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm, 6px);
    color: var(--color-text-primary);
    padding: 10px 14px;
    font-size: var(--font-size-sm);
    outline: none;
    transition: border-color var(--transition-fast);
}

.light-theme .newsletter-input {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.newsletter-input:focus {
    border-color: var(--app-accent);
}

.newsletter-btn {
    padding: 10px 18px;
    background: var(--app-accent);
    border: 1px solid var(--app-accent);
    color: #121212;
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-tech);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.newsletter-btn:hover:not(:disabled) {
    background: #ffc107;
    box-shadow: 0 0 10px rgba(var(--app-accent-rgb), 0.35);
}

.newsletter-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.newsletter-gdpr-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
}

.newsletter-gdpr-checkbox {
    margin-top: 2px;
}

.newsletter-link {
    color: var(--app-accent);
    text-decoration: none;
}

.newsletter-link:hover {
    text-decoration: underline;
}

.newsletter-status {
    font-size: var(--font-size-xs);
    margin-top: var(--space-xs);
    display: none;
}

.newsletter-status.success {
    color: #34a853;
    display: block;
}

.newsletter-status.error {
    color: #ea4335;
    display: block;
}




/* ── Plan gating (auth.js applyPlanGates) ────────────────────────────────
   Locked = visible but dimmed; clicking shows the upgrade toast.
   Hidden = feature absent for the plan entirely. */
.plan-locked {
    opacity: 0.4;
    filter: saturate(0.4);
}

/* Locked preview (auth.js previewIf): the feature stays visible as a teaser —
   title/description readable, everything else blurred and inert; the whole
   block is the tap target for upgrading. */
.plan-preview {
    cursor: pointer;
}
.plan-preview > :not(.card-header):not(.settings-label):not(.settings-hint):not(.pro-chip) {
    filter: blur(3px);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
.pro-chip {
    display: inline-block;
    margin-inline-start: var(--space-xs);
    padding: 1px 8px;
    border: 1px solid var(--color-brand-cyan);
    border-radius: 999px;
    background: rgba(var(--app-accent-rgb), 0.14);
    color: var(--color-brand-cyan);
    font-family: var(--font-tech);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

/* ============================================================
   PLAN CHOOSER SCREEN (one-time tier selection after sign-in)
   ============================================================ */

.plan-container {
    max-width: 960px;
}

.plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md, 16px);
    width: 100%;
    margin: 12px 0 4px;
}

.plan-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: start;
}

.plan-card--featured {
    border-color: var(--app-accent);
}

.plan-card-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.plan-card-price {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.plan-card-per {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.plan-card-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0;
    flex: 1;
}

.plan-card .auth-btn {
    margin-top: 4px;
}

/* Paid plans not open yet (auth.js PAID_PLANS_OPEN): swap checkout buttons
   for a "Coming soon" label in the plan chooser and the billing card. */
.plan-coming-soon {
    display: none;
    margin: 4px 0 0;
    padding: 10px 14px;
    border: 1px dashed var(--color-border-subtle);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-text-secondary);
}
.paid-plans-soon [data-bill-plan] { display: none; }
.paid-plans-soon .plan-coming-soon { display: block; }

.plan-signout {
    max-width: 220px;
    margin-top: 12px;
}

/* ============================================================
   PLAN & BILLING SETTINGS CARD (Paddle)
   ============================================================ */

.billing-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.billing-plan-info {
    flex: 1 1 220px;
    min-width: 0;
}

.billing-plan-name {
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 2px;
}

.billing-plan-btns {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.billing-plan-btns .auth-btn {
    width: auto;
    flex-shrink: 0;
    margin-top: 0;
}

/* ============================================================
   TEAM SETTINGS CARD (Business plan)
   ============================================================ */

.team-invite-row {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-top: var(--space-sm);
}

.team-invite-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    background: var(--color-input-bg);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm, 6px);
    color: var(--color-text-primary);
    font-size: 0.85rem;
}

.team-invite-row .auth-btn {
    width: auto;
    flex-shrink: 0;
    margin-top: 0;
}

.team-member-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.team-member-email {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.team-pending-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.team-remove-btn {
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm, 6px);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    padding: 4px 10px;
    cursor: pointer;
}

.team-remove-btn:hover {
    border-color: var(--color-red);
    color: var(--color-red);
}

/* ── Private demo link (?demo=<code>, functions/demo.js) ─────────────── */
.demo-link-bar {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nav-height) + 12px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    max-width: calc(100vw - 24px);
    background: rgba(10, 10, 15, 0.92);
    border: 1px solid var(--color-brand-cyan);
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
}
.demo-link-bar.hidden { display: none; }
.demo-link-tag {
    font-family: var(--font-tech);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-brand-cyan);
}
.demo-link-ends {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}
.demo-link-bar .btn-primary,
.demo-link-bar .btn-secondary {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.875rem;
    white-space: nowrap;
}
.demo-link-exit {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}
.demo-link-exit:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
@media (max-width: 560px) {
    .demo-link-ends { display: none; }
}
.demo-save-intro {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 16px;
    line-height: 1.5;
}
.demo-save-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.875rem;
    margin: 4px 0 12px;
    cursor: pointer;
}
.demo-save-consent input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }
.demo-save-consent a { color: var(--color-brand-cyan); }
#demo-save-done-text { font-size: 0.95rem; line-height: 1.6; margin: 0; }
/* Settings → Demo links (Simon's account only) */
.demo-links-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.demo-links-row.is-off { opacity: 0.6; }
.demo-links-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.demo-links-state {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    color: var(--color-text-muted);
}
.demo-links-row:not(.is-off) .demo-links-state { color: var(--color-brand-cyan); }
.demo-links-row .team-invite-input { width: 100%; margin: 6px 0 8px; }
.demo-links-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.demo-links-actions .auth-btn { width: auto; margin-top: 0; }
.demo-links-leads { margin-top: 8px; }
.demo-links-form { margin-top: 16px; }
.demo-links-form > .team-invite-input { width: 100%; }
.demo-links-opts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-sm);
    margin: var(--space-sm) 0;
}
.demo-links-opts label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--color-text-secondary); }
.demo-links-form .auth-btn { width: auto; }