/* ============================================================
   LANDINFO — Carbon-inspired geospatial UI
   Optimum Geospatial / Nairobi
   v2.1 — refined UX & mobile responsiveness
   ============================================================ */

:root {
    /* ─── Carbon-inspired palette ─────────────────────────── */
    --gray-100: #f4f4f4;
    --gray-200: #e0e0e0;
    --gray-300: #c6c6c6;
    --gray-400: #a8a8a8;
    --gray-500: #8d8d8d;
    --gray-600: #6f6f6f;
    --gray-700: #525252;
    --gray-800: #393939;
    --gray-900: #262626;
    --gray-1000: #161616;

    --white: #ffffff;
    --bg: #f4f4f4;
    --surface: #ffffff;
    --surface-2: #f9f9fb;
    --ink: #161616;
    --ink-soft: #525252;
    --ink-mute: #8d8d8d;
    --line: #e0e0e0;
    --line-strong: #c6c6c6;

    /* IBM Blue family */
    --blue-10: #edf5ff;
    --blue-20: #d0e2ff;
    --blue-40: #78a9ff;
    --blue-60: #0f62fe;
    --blue-70: #0043ce;
    --blue-80: #002d9c;
    --blue-90: #001d6c;

    /* Accents (data viz palette) */
    --acc-green: #198038;
    --acc-red:   #da1e28;
    --acc-amber: #f1c21b;
    --acc-orange:#ff832b;
    --acc-purple:#8a3ffc;
    --acc-teal:  #007d79;

    /* Typography */
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-serif: 'IBM Plex Serif', Georgia, serif;

    /* Spacing scale (4px base) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* Layout */
    --topbar-h: 48px;
    --sidebar-w: 340px;
    --statusbar-h: 28px;
    --drawer-w: 460px;

    /* Effects */
    --shadow-sm: 0 1px 0 rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 2px 4px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
    --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--blue-60);

    --t-fast: 120ms cubic-bezier(.2,0,.38,.9);
    --t-base: 200ms cubic-bezier(.2,0,.38,.9);
    --t-slow: 320ms cubic-bezier(.2,0,.38,.9);

    /* Safe-area insets (notches/punch-outs on mobile) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent the body bouncing on iOS when scrolling inside panels */
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
}

.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }
a { color: var(--blue-70); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible, consistent focus for keyboard users */
button:focus-visible,
input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }

/* ============================================================
   TOP NAVIGATION BAR
   ============================================================ */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(var(--topbar-h) + var(--safe-top));
    padding-top: var(--safe-top);
    background: var(--gray-1000);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1100;
    border-bottom: 1px solid #000;
}

.topbar__left,
.topbar__right {
    display: flex;
    align-items: stretch;
    height: var(--topbar-h);
}

.topbar__menu {
    width: 48px;
    height: 100%;
    background: transparent;
    border: 0;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255,255,255,.08);
    transition: background var(--t-fast);
    position: relative;
}
.topbar__menu:hover { background: rgba(255,255,255,.08); }
.topbar__menu[aria-expanded="true"] { background: var(--blue-60); }
.topbar__menu[aria-expanded="true"]:hover { background: var(--blue-70); }

.brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-4);
    height: 100%;
}
.brand__mark {
    color: var(--blue-40);
    display: flex;
}
.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.brand__name {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
}
.brand__sub {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gray-400);
    margin-top: 3px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.topbar__center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: var(--safe-top);
    height: var(--topbar-h);
    display: flex;
    align-items: center;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px var(--sp-3);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-300);
}
.status-pill__dot {
    width: 6px; height: 6px;
    background: #42be65;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(66,190,101,.2);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

.iconbtn {
    width: 48px;
    height: 100%;
    background: transparent;
    border: 0;
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    border-left: 1px solid rgba(255,255,255,.08);
    transition: background var(--t-fast);
    text-decoration: none;
    padding: 0 var(--sp-3);
    font-size: 13px;
}
.iconbtn:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.iconbtn--accent {
    background: var(--blue-60);
    border-left-color: var(--blue-60);
    width: auto;
    padding: 0 var(--sp-4);
}
.iconbtn--accent:hover { background: var(--blue-70); }
.iconbtn__label {
    font-size: 13px;
    font-weight: 500;
}

/* ============================================================
   STAGE (main map area)
   ============================================================ */
.stage {
    position: absolute;
    top: calc(var(--topbar-h) + var(--safe-top));
    left: 0; right: 0; bottom: 0;
    overflow: hidden;
}

#map {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #e8eaf0;
}

/* Subtle vignette overlay on map edges */
.stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(22,22,22,.04), transparent 8%, transparent 92%, rgba(22,22,22,.04)),
        linear-gradient(to bottom, rgba(22,22,22,.04), transparent 6%, transparent 94%, rgba(22,22,22,.04));
    pointer-events: none;
    z-index: 400;
}

/* Decorative crosshair — desktop only (no hover on touch) */
.crosshair {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    pointer-events: none;
    z-index: 410;
    opacity: 0;
    transition: opacity var(--t-base);
}
.crosshair span:nth-child(1),
.crosshair span:nth-child(2) {
    position: absolute;
    background: var(--ink);
}
.crosshair span:nth-child(1) {
    left: 50%; top: 0; bottom: 0;
    width: 1px;
    transform: translateX(-50%);
}
.crosshair span:nth-child(2) {
    top: 50%; left: 0; right: 0;
    height: 1px;
    transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
    .stage:hover .crosshair { opacity: .3; }
}

/* ============================================================
   BACKDROP (scrim for mobile sidebar / drawer)
   ============================================================ */
.scrim {
    position: absolute;
    inset: 0;
    background: rgba(22,22,22,.45);
    backdrop-filter: blur(2px);
    z-index: 950;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base);
}
.scrim.is-shown {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    position: absolute;
    top: 0; bottom: var(--statusbar-h);
    left: 0;
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--line);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform var(--t-slow);
    box-shadow: var(--shadow-md);
}
/* Desktop default: visible. .is-collapsed slides it out. */
.sidebar.is-collapsed {
    transform: translateX(calc(-100% - 4px));
    box-shadow: none;
}

.sidebar__scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.sidebar__foot {
    border-top: 1px solid var(--line);
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    background: var(--surface-2);
    gap: var(--sp-3);
    flex-shrink: 0;
}
.sidebar__foot .mono {
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sidebar__foot a {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ─── Active-search banner ─── */
.active-search {
    background: var(--blue-10);
    border-bottom: 1px solid var(--blue-20);
    padding: var(--sp-3) var(--sp-4);
    display: none;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
    animation: slideDown var(--t-base) ease-out;
}
.active-search.is-shown { display: flex; }
@keyframes slideDown {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.active-search__icon {
    color: var(--blue-60);
    font-size: 12px;
    flex-shrink: 0;
}
.active-search__body {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.active-search__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--blue-70);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}
.active-search__value {
    display: block;
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.active-search__clear {
    background: transparent;
    border: 1px solid var(--blue-20);
    color: var(--blue-70);
    width: 26px; height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all var(--t-fast);
    flex-shrink: 0;
}
.active-search__clear:hover {
    background: var(--blue-60);
    border-color: var(--blue-60);
    color: var(--white);
}

/* ─── Panels inside sidebar ─── */
.panel {
    border-bottom: 1px solid var(--line);
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
}
.panel:last-child { border-bottom: 0; }

.panel__head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.panel__num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--blue-60);
    font-weight: 500;
    letter-spacing: 0.05em;
}
.panel__title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    flex: 1;
}
.panel__tag {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    background: var(--gray-100);
    border: 1px solid var(--line);
}

/* ─── Fields (inputs) ─── */
.field { margin-bottom: var(--sp-4); }
.field:last-child { margin-bottom: 0; }

.field__label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
}
.field__label i { color: var(--ink-mute); font-size: 11px; }
.field__hint {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field__input,
.field__coord {
    display: flex;
    align-items: stretch;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--gray-500);
    transition: all var(--t-fast);
}
.field__input:focus-within,
.field__coord:focus-within {
    border-color: var(--blue-60);
    background: var(--white);
    box-shadow: inset 0 -2px 0 var(--blue-60);
    border-bottom-color: var(--blue-60);
}

.field__input input,
.field__coord input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 10px 12px;
    font-size: 14px;       /* >=16px on iOS prevents zoom-on-focus, but 14px in body context is OK */
    color: var(--ink);
    outline: none;
    min-width: 0;
}
.field__input input::placeholder,
.field__coord input::placeholder {
    color: var(--gray-500);
    font-family: var(--font-mono);
    font-size: 12px;
}
.field__coord input { font-family: var(--font-mono); }
.field__sep {
    display: flex;
    align-items: center;
    padding: 0 4px;
    color: var(--ink-mute);
    font-family: var(--font-mono);
}

.field__input button,
.field__coord button {
    border: 0;
    background: var(--ink);
    color: var(--white);
    padding: 0 14px;
    transition: background var(--t-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;     /* touch target */
}
.field__input button:hover,
.field__coord button:hover { background: var(--blue-60); }

/* ─── Autocomplete dropdown ─── */
.autocomplete {
    display: none;
    margin-top: 4px;
    background: var(--white);
    border: 1px solid var(--line-strong);
    max-height: 240px;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
}
.autocomplete .result-item {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    font-size: 13px;
    transition: background var(--t-fast);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.autocomplete .result-item:hover {
    background: var(--blue-10);
    color: var(--blue-80);
}
.autocomplete .result-item:last-child { border-bottom: 0; }
.autocomplete .result-item small {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
}

/* ─── Layers list ─── */
.layers { list-style: none; padding: 0; margin: 0; }
.layers__item {
    position: relative;
    border-top: 1px solid var(--line);
}
.layers__item:first-child { border-top: 0; }

.layers__item input { display: none; }

.layers__item label {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 12px 4px;
    cursor: pointer;
    user-select: none;
    transition: background var(--t-fast);
    min-height: 44px;     /* touch target */
}
.layers__item label:hover { background: var(--gray-100); }

.layers__swatch {
    position: relative;
    width: 16px; height: 16px;
    border: 1.5px solid var(--gray-500);
    background: transparent;
    flex-shrink: 0;
    transition: all var(--t-fast);
}
.layers__item input:checked + label .layers__swatch {
    background: var(--color, var(--blue-60));
    border-color: var(--color, var(--blue-60));
}
.layers__item input:checked + label .layers__swatch::after {
    content: '';
    position: absolute;
    top: 1px; left: 5px;
    width: 4px; height: 8px;
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.layers__item[data-color="#0f62fe"] { --color: #0f62fe; }
.layers__item[data-color="#198038"] { --color: #198038; }
.layers__item[data-color="#da1e28"] { --color: #da1e28; }
.layers__item[data-color="#ff832b"] { --color: #ff832b; }
.layers__item[data-color="#8a3ffc"] { --color: #8a3ffc; }

.layers__name {
    flex: 1;
    font-size: 13px;
    color: var(--ink);
}
.layers__item input:checked + label .layers__name {
    font-weight: 500;
}
.layers__meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Active accent bar (thin colored line at left) */
.layers__item input:checked + label::before {
    content: '';
    position: absolute;
    left: -16px; top: 0; bottom: 0;
    width: 3px;
    background: var(--color);
}
.layers__item { padding-left: 0; }
.layers__item label { padding-left: 4px; }

/* ─── Basemap grid ─── */
.basemap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
}
.basemap-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    transition: all var(--t-fast);
    cursor: pointer;
    text-align: left;
    min-height: 80px;
}
.basemap-tile:hover {
    border-color: var(--gray-500);
}
.basemap-tile.active {
    border-color: var(--blue-60);
    box-shadow: inset 0 0 0 1px var(--blue-60);
}
.basemap-tile__preview {
    display: block;
    width: 100%;
    height: 56px;
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.basemap-tile__preview--streets {
    background:
        linear-gradient(45deg, transparent 48%, #c6c6c6 48%, #c6c6c6 52%, transparent 52%) center / 12px 12px,
        #f4f4f4;
}
.basemap-tile__preview--satellite {
    background:
        radial-gradient(circle at 20% 30%, #3e6b2e 0%, transparent 35%),
        radial-gradient(circle at 70% 70%, #2d4a23 0%, transparent 40%),
        radial-gradient(circle at 50% 20%, #5a8a45 0%, transparent 30%),
        #1f3318;
}
.basemap-tile__preview--terrain {
    background:
        linear-gradient(135deg, #d4c4a0 0%, #a8956b 50%, #6b5d3d 100%);
}
.basemap-tile__preview--topo {
    background:
        repeating-radial-gradient(circle at 30% 50%, transparent 0, transparent 4px, #b8a890 4px, #b8a890 5px),
        #f0e8d4;
}
.basemap-tile__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.basemap-tile.active .basemap-tile__label::after {
    content: '●';
    color: var(--blue-60);
}

/* ============================================================
   MAP CONTROLS (right vertical strip on desktop, bottom on mobile)
   ============================================================ */
.map-controls {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    z-index: 800;
}
.mapctl {
    width: 40px;
    height: 40px;
    background: var(--surface);
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-fast);
    font-size: 13px;
}
.mapctl:last-child { border-bottom: 0; }
.mapctl:hover {
    background: var(--ink);
    color: var(--white);
}
.mapctl__divider {
    height: 1px;
    background: var(--line);
}

/* Leaflet defaults */
.leaflet-control-zoom { display: none !important; }
.leaflet-control-attribution {
    background: rgba(255,255,255,.85) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    padding: 2px 8px !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
    margin-bottom: var(--statusbar-h) !important;
}

/* ============================================================
   STATUS BAR (bottom)
   ============================================================ */
.statusbar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--statusbar-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--ink);
    color: var(--gray-300);
    display: flex;
    align-items: center;
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
    gap: var(--sp-5);
    z-index: 900;
    border-top: 1px solid #000;
    white-space: nowrap;
}
.statusbar__group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 11px;
}
.statusbar__group--right { margin-left: auto; }
.statusbar__label {
    color: var(--gray-500);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.statusbar__value {
    color: var(--white);
    font-weight: 500;
    font-size: 11px;
}

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */
.toast-notice {
    position: absolute;
    top: var(--sp-4);
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: var(--ink);
    color: var(--white);
    padding: var(--sp-3) var(--sp-4);
    font-size: 13px;
    z-index: 1500;
    box-shadow: var(--shadow-lg);
    border-left: 3px solid var(--blue-60);
    display: none;
    align-items: center;
    gap: var(--sp-2);
    max-width: min(480px, calc(100% - 32px));
}
.toast-notice.is-shown {
    display: flex;
    animation: toastSlideIn var(--t-base) cubic-bezier(.2,0,.38,.9) forwards;
}
.toast-notice--success { border-left-color: #42be65; }
.toast-notice--warning { border-left-color: var(--acc-amber); }
.toast-notice--error { border-left-color: var(--acc-red); }
@keyframes toastSlideIn {
    to { transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   LOADING OVERLAY
   ============================================================ */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(22,22,22,.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(2px);
}
.loading-overlay.is-shown { display: flex; }
.loading-overlay__box {
    background: var(--white);
    padding: var(--sp-5) var(--sp-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}
.loading-overlay__bars {
    display: flex;
    gap: 3px;
    height: 32px;
    align-items: center;
}
.loading-overlay__bars span {
    width: 4px;
    background: var(--blue-60);
    animation: bar-bounce 1s ease-in-out infinite;
}
.loading-overlay__bars span:nth-child(1) { animation-delay: 0s; height: 16px; }
.loading-overlay__bars span:nth-child(2) { animation-delay: .15s; height: 24px; }
.loading-overlay__bars span:nth-child(3) { animation-delay: .3s; height: 18px; }
.loading-overlay__bars span:nth-child(4) { animation-delay: .45s; height: 28px; }
@keyframes bar-bounce {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
}
.loading-overlay__text {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
}

/* ============================================================
   PARCEL INFO DRAWER (right side)
   ============================================================ */
.parcel-drawer {
    position: absolute;
    top: 0; bottom: var(--statusbar-h);
    right: 0;
    width: var(--drawer-w);
    max-width: 100%;
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow);
}
.parcel-drawer.is-open { transform: translateX(0); }
/* Legacy class name kept for JS compatibility */
.parcel-drawer.active { transform: translateX(0); }

.parcel-drawer__head {
    background: var(--ink);
    color: var(--white);
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #000;
    flex-shrink: 0;
}
.parcel-drawer__eyebrow {
    display: block;
    font-size: 10px;
    color: var(--blue-40);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.parcel-drawer__title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.parcel-drawer__close {
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-fast);
    font-size: 14px;
    flex-shrink: 0;
}
.parcel-drawer__close:hover {
    background: var(--acc-red);
    border-color: var(--acc-red);
}

.parcel-drawer__body {
    flex: 1;
    overflow-y: auto;
    background: var(--surface);
    -webkit-overflow-scrolling: touch;
}

/* ─── Tabs inside drawer ─── */
.parcel-info-tabs {
    display: flex;
    overflow-x: auto;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
    scrollbar-width: thin;
    /* Scroll affordance via gradient mask, applied conditionally below */
    -webkit-overflow-scrolling: touch;
}
.parcel-info-tabs::-webkit-scrollbar { height: 3px; }

/* Scroll-affordance shadows on the tab strip */
.parcel-drawer__body {
    position: relative;
}
.parcel-info-tabs::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    width: 24px;
    height: 100%;
    background: linear-gradient(to left, var(--surface-2), transparent);
    pointer-events: none;
    flex-shrink: 0;
    margin-left: -24px;
}

.parcel-info-tab {
    padding: 12px 14px;
    cursor: pointer;
    font-size: 12px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    transition: all var(--t-fast);
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 500;
    min-height: 44px;
}
.parcel-info-tab i { font-size: 11px; }
.parcel-info-tab:hover {
    background: var(--gray-100);
    color: var(--ink);
}
.parcel-info-tab.active {
    color: var(--blue-60);
    border-bottom-color: var(--blue-60);
    background: var(--white);
}

/* ─── Tab content ─── */
.tab-content {
    padding: var(--sp-5);
}

.info-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    gap: var(--sp-3);
    align-items: baseline;
}
.info-row:last-child { border-bottom: 0; }
.info-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
    width: 120px;
    min-width: 120px;
    flex-shrink: 0;
}
.info-value {
    flex: 1;
    font-size: 13px;
    color: var(--ink);
    word-break: break-word;
    font-weight: 500;
}

.info-section h6 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin: 0 0 var(--sp-3) 0;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line-strong);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.info-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
}

.valuation-content,
.rates-content,
.court-cases-content { padding: 0; }
.valuation-content .info-row,
.rates-content .info-row { border-bottom: 1px solid var(--line); }
.amount-value {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--blue-70);
    font-size: 15px;
}
.valuation-content .info-row:nth-child(4) .info-value {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--blue-70);
    font-size: 14px;
}

.disclaimer,
.rates-disclaimer {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: #fff8e1;
    border-left: 3px solid var(--acc-amber);
    font-size: 12px;
    color: var(--ink-soft);
}
.disclaimer p,
.rates-disclaimer p { margin: 0; }

.coming-soon {
    text-align: center;
    padding: var(--sp-7) var(--sp-5);
    color: var(--ink-mute);
}
.coming-soon i {
    font-size: 32px;
    color: var(--blue-40);
    margin-bottom: var(--sp-3);
    display: block;
}
.coming-soon p { margin: var(--sp-2) 0; }

.loading-data {
    text-align: center;
    padding: var(--sp-7) var(--sp-5);
}
.loading-data .spinner-border {
    color: var(--blue-60) !important;
    width: 36px !important;
    height: 36px !important;
    border-width: 2px;
}
.loading-data p {
    color: var(--ink-mute);
    margin-top: var(--sp-3);
    font-size: 13px;
}

/* Buttons (Bootstrap overrides) */
.retry-btn,
.btn.btn-outline-primary,
.btn.btn-primary,
.btn.btn-secondary {
    border-radius: 0 !important;
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 8px 14px;
    border: 1px solid var(--blue-60);
    background: transparent;
    color: var(--blue-60);
    transition: all var(--t-fast);
    cursor: pointer;
}
.retry-btn:hover,
.btn.btn-outline-primary:hover {
    background: var(--blue-60);
    color: var(--white);
}
.btn.btn-primary {
    background: var(--blue-60);
    color: var(--white) !important;
    border-color: var(--blue-60);
}
.btn.btn-primary:hover {
    background: var(--blue-70);
    border-color: var(--blue-70);
}
.btn.btn-primary a { color: white !important; text-decoration: none; }
.btn.btn-secondary {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}
.btn.btn-secondary:hover { background: var(--gray-700); }
.btn-xs {
    padding: 3px 8px !important;
    font-size: 11px !important;
}

/* Court case items */
.case-list { max-height: none; }
.case-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue-60);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-2);
    transition: all var(--t-fast);
}
.case-item:hover {
    border-left-color: var(--ink);
    background: var(--surface-2);
}
.case-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.case-number { font-family: var(--font-mono); color: var(--blue-60); margin-right: 4px; }
.case-link { color: var(--ink); }
.case-link:hover { color: var(--blue-60); text-decoration: underline; }
.case-date {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.case-snippet { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 6px; }
.case-info { display: flex; gap: 4px; flex-wrap: wrap; }

.badge {
    border-radius: 0 !important;
    font-family: var(--font-mono);
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 3px 6px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.search-links {
    background: var(--surface-2);
    padding: var(--sp-3);
    margin-top: var(--sp-3);
    border: 1px solid var(--line);
}
.search-links h6 {
    font-size: 11px !important;
    color: var(--ink-soft) !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: var(--sp-2) !important;
}
.gap-2 { gap: 6px !important; }

/* ============================================================
   PARCEL LABELS (on map)
   ============================================================ */
.parcel-label {
    background: rgba(22,22,22,.85);
    color: white;
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 5px;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.2);
    letter-spacing: 0.02em;
}
.parcel-label.selected {
    background: var(--blue-60);
    border-color: white;
}

.ward-label,
.subcounty-label,
.surveyblock-label,
.subzone-label {
    color: white;
    padding: 4px 8px;
    border-radius: 0;
    text-align: center;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    font-family: var(--font-sans);
    border: 1px solid rgba(255,255,255,.15);
}
.ward-label { background: rgba(25,128,56,.9); }
.subcounty-label { background: rgba(218,30,40,.9); }
.surveyblock-label { background: rgba(255,131,43,.9); }
.subzone-label { background: rgba(138,63,252,.9); }

.large-label { font-size: 14px !important; padding: 5px 10px !important; }
.small-label { font-size: 10px !important; padding: 2px 6px !important; }

/* ============================================================
   MODALS (carbon-style override)
   ============================================================ */
.modal-content--carbon {
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: var(--shadow-lg);
}
.modal-content--carbon .modal-header {
    background: var(--ink);
    color: var(--white);
    border: 0;
    padding: var(--sp-5);
    border-radius: 0;
}
.modal-content--carbon .modal-body {
    padding: var(--sp-5);
}
.modal-eyebrow {
    display: block;
    font-size: 10px;
    color: var(--blue-40);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.modal-content--carbon .modal-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}
.btn-close-carbon {
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-fast);
    font-size: 14px;
}
.btn-close-carbon:hover {
    background: var(--acc-red);
    border-color: var(--acc-red);
}

.modal-section { margin-bottom: var(--sp-5); }
.modal-section:last-child { margin-bottom: 0; }
.modal-section h6 {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 var(--sp-2);
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
}
.modal-section h6 .mono {
    font-size: 10px;
    color: var(--blue-60);
    letter-spacing: 0.06em;
}
.modal-section p {
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 var(--sp-3);
}

.btn-carbon {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--blue-60);
    color: var(--white);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 0;
    transition: background var(--t-fast);
    text-decoration: none;
    min-height: 40px;
}
.btn-carbon:hover {
    background: var(--blue-70);
    color: var(--white);
    text-decoration: none;
}
.btn-carbon--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}
.btn-carbon--ghost:hover {
    background: var(--ink);
    color: var(--white);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.contact-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--sp-3);
    background: var(--surface-2);
    border-left: 2px solid var(--blue-60);
}
.contact-item__label {
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.contact-item a,
.contact-item span:not(.contact-item__label) {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
}
.modal-cta {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* ============================================================
   LEAFLET POPUP STYLING
   ============================================================ */
.leaflet-popup-content-wrapper {
    border-radius: 0 !important;
    background: var(--ink) !important;
    color: var(--white) !important;
    border: 1px solid #000;
}
.leaflet-popup-content {
    font-family: var(--font-sans);
    font-size: 12px;
    margin: 10px 14px;
}
.leaflet-popup-content b {
    color: var(--blue-40);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.leaflet-popup-tip { background: var(--ink) !important; }
.leaflet-popup-close-button { color: var(--gray-300) !important; }

.leaflet-tooltip {
    background: var(--ink) !important;
    color: var(--white) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 6px 10px !important;
    box-shadow: var(--shadow-md) !important;
}
.leaflet-tooltip::before { border-top-color: var(--ink) !important; }
.tooltip-content strong { color: var(--blue-40); }

.pac-container {
    border-radius: 0 !important;
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-md);
    font-family: var(--font-sans);
    z-index: 10000 !important;     /* above sidebar */
}
.pac-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    min-height: 40px;
}
.pac-item:hover { background: var(--blue-10); }
.pac-item-query { font-size: 13px; color: var(--ink); }
.pac-matched { font-weight: 600; color: var(--blue-60); }

/* ============================================================
   RESPONSIVE — tablet (≤900px)
   ============================================================ */
@media (max-width: 900px) {
    :root {
        --sidebar-w: 320px;
        --drawer-w: 100%;
    }
    .topbar__center { display: none; }
    .iconbtn__label { display: none; }
    .iconbtn--accent { width: 48px; padding: 0; }
}

/* ============================================================
   RESPONSIVE — mobile (≤640px)
   ----
   Sidebar becomes an off-canvas overlay sliding in from left.
   Map controls move to bottom-right cluster above status bar.
   Status bar collapses to 3 essential values.
   Parcel drawer becomes a bottom sheet.
   ============================================================ */
@media (max-width: 640px) {
    :root {
        --topbar-h: 52px;
        --sidebar-w: 88vw;
        --statusbar-h: 32px;
    }

    /* Sidebar: hidden by default, slides in on .is-open */
    .sidebar {
        max-width: 360px;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar.is-collapsed { transform: translateX(-100%); } /* keep compatible */

    /* Map controls: bottom-right cluster, above status bar */
    .map-controls {
        top: auto;
        right: var(--sp-3);
        bottom: calc(var(--statusbar-h) + var(--safe-bottom) + var(--sp-3));
        flex-direction: column;
    }
    .mapctl { width: 44px; height: 44px; }

    /* Status bar: 3 essentials only */
    .statusbar {
        padding-left: var(--sp-3);
        padding-right: var(--sp-3);
        gap: var(--sp-3);
        justify-content: space-between;
    }
    .statusbar__group { gap: 6px; }
    .statusbar__group--right,
    .statusbar__group:nth-of-type(5) {
        display: none;          /* hide CRS + PROJ on mobile */
    }
    .statusbar__label { font-size: 9px; }
    .statusbar__value { font-size: 10px; }

    /* Brand subtitle hidden, name a bit larger */
    .brand__sub { display: none; }
    .brand__name { font-size: 15px; }

    /* Parcel drawer becomes a bottom sheet */
    .parcel-drawer {
        top: auto;
        bottom: var(--statusbar-h);
        left: 0; right: 0;
        width: 100%;
        height: 75vh;
        max-height: 75vh;
        transform: translateY(100%);
        border-left: 0;
        border-top: 1px solid var(--line);
        box-shadow: 0 -8px 24px rgba(0,0,0,.15);
    }
    .parcel-drawer.is-open,
    .parcel-drawer.active { transform: translateY(0); }
    /* Drag handle visual */
    .parcel-drawer__head {
        position: relative;
        padding-top: var(--sp-5);
    }
    .parcel-drawer__head::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: rgba(255,255,255,.25);
        border-radius: 2px;
    }

    /* Drawer tabs: smaller, with bottom-shadow scroll affordance */
    .parcel-info-tab {
        padding: 12px 12px;
        font-size: 11px;
    }
    .parcel-info-tab i { display: none; }

    /* Info row goes vertical on very narrow screens */
    .info-row {
        flex-direction: column;
        gap: 2px;
        padding: 8px 0;
    }
    .info-label { width: auto; min-width: 0; }

    /* Topbar tightens, buttons more touch-friendly */
    .topbar__menu { width: 52px; }
    .iconbtn { width: 52px; padding: 0; }

    /* Coordinate inputs stack vertically */
    .field__coord {
        flex-wrap: wrap;
        border-bottom-width: 0;
        border: 1px solid var(--gray-500);
        gap: 0;
    }
    .field__coord input {
        flex: 1 0 100%;
        min-width: 0;
        border-bottom: 1px solid var(--line);
    }
    .field__coord input:nth-of-type(2) { border-bottom: 0; }
    .field__sep { display: none; }
    .field__coord button {
        flex: 1 0 100%;
        padding: 12px;
        border-top: 1px solid var(--gray-700);
    }

    /* Toast adjusts margins */
    .toast-notice {
        top: calc(var(--topbar-h) + var(--safe-top) + var(--sp-2));
        max-width: calc(100% - 24px);
    }

    /* Contact grid: 1 column */
    .contact-grid { grid-template-columns: 1fr; }

    /* Modal padding shrinks */
    .modal-content--carbon .modal-header,
    .modal-content--carbon .modal-body { padding: var(--sp-4); }

    /* Status pill (if shown — already hidden via topbar__center) */
    .status-pill { display: none; }
}

/* Very small screens (≤380px) */
@media (max-width: 380px) {
    .brand { padding: 0 var(--sp-3); gap: var(--sp-2); }
    .panel { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
    .tab-content { padding: var(--sp-4); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    .status-pill__dot { animation: none; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-muted { color: var(--ink-mute) !important; }
.small { font-size: 11px !important; }
.fa-xs { font-size: 0.65em; }

.card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 0;
}
.card-body { padding: var(--sp-4); }
.card-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: var(--sp-2);
}
.card.bg-light { background: var(--surface-2) !important; }
.bg-light { background: var(--surface-2) !important; }

.debug-section {
    border-top: 1px solid var(--line);
    padding-top: var(--sp-4);
}
.debug-section pre {
    background: var(--ink);
    color: #c6c6c6;
    padding: var(--sp-3);
    font-family: var(--font-mono);
    font-size: 11px;
    overflow: auto;
    border-radius: 0;
}