/* ============================================================================
 * Inventory app chrome — header, layouts.
 * Independent of pages/base.html (homepage is narrow text; this is full-width).
 * ============================================================================
 */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.45;
    color: #1a1a1a;
}

/* ---- Top header (shared across all inventory pages) ---- */
.inv-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    z-index: 20;
}
.inv-brand {
    color: #5D4037;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.inv-brand-logo {
    height: 32px;
    width: auto;
    display: block;
}
.inv-page-title {
    margin-left: 14px;
    color: #888;
    font-size: 13px;
    font-weight: 500;
}
.inv-header-nav {
    margin-left: auto;
    display: flex;
    gap: 14px;
}
.inv-header-nav a {
    color: #555;
    text-decoration: none;
    font-size: 13px;
}
.inv-header-nav a:hover { color: #1a1a1a; }

/* Login / logout / signed-in name in the inventory header */
.inv-header-nav .inv-user-name {
    color: #888;
    font-size: 12px;
    align-self: center;
    margin-left: 4px;
}
.inv-header-nav .inv-logout-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.inv-header-nav .inv-logout-btn {
    background: none;
    border: none;
    padding: 0;
    color: #555;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}
.inv-header-nav .inv-logout-btn:hover { color: #1a1a1a; }
.inv-header-nav .inv-login-link { color: #5D4037; font-weight: 600; }

/* ---- Map page layout: sidebar + main ---- */
body.inv-map-body {
    overflow: hidden;
}
.inv-sidebar {
    position: absolute;
    top: 44px;
    left: 0;
    width: 240px;
    bottom: 0;
    background: #f5f5f5;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Pinned strip: always visible, sits above the tab row. */
.inv-pinned {
    padding: 8px 12px;
    border-bottom: 1px solid #e0d8ca;
    background: #efe9dd;
    flex: 0 0 auto;
}
.inv-pinned-row { margin-bottom: 6px; }
/* Explorer hand-off notice (#ids= selection). `.hidden` is scoped per
   component in this file rather than global, so it needs its own rule. */
.inv-pinned-row:last-child { margin-bottom: 0; }
#ids-notice.hidden { display: none; }
#ids-notice {
    display: flex;
    align-items: center;
    padding: 4px 7px;
    background: #fdf6e3;
    border: 1px solid #e6d9b8;
    border-radius: 3px;
}
.inv-pinned-basemap {
    width: 100%;
    padding: 3px 6px;
    font-size: 12px;
    border: 1px solid #c5beae;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

/* Tab row above the panel content. */
.inv-tabs {
    display: flex;
    flex: 0 0 auto;
    border-bottom: 1px solid #d4cdc0;
    background: #ece5d6;
}
.inv-tab {
    flex: 1 1 0;
    padding: 7px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c5e4a;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.inv-tab:hover { background: rgba(0,0,0,0.04); }
.inv-tab.active {
    color: #5D4037;
    border-bottom-color: #5D4037;
    background: #f5f5f5;
}

/* One panel visible at a time; non-active panels collapsed. */
.inv-panel {
    flex: 1 1 auto;
    overflow-y: auto;
    background: #f5f5f5;
}
.inv-panel.hidden { display: none; }

/* Reference maps panel: grid of thumbnail tiles per basemap. */
.refmaps-category {
    padding: 8px 14px 4px;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.refmaps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 0 14px 10px;
}
.refmap-option {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.12s;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.refmap-option:hover { border-color: #c5beae; }
.refmap-option.active { border-color: #5D4037; }
.refmap-thumb {
    width: 100%;
    height: 64px;
    object-fit: cover;
    background: linear-gradient(135deg, #e8e2d5 0%, #d4cdc0 100%);
    display: block;
}
.refmap-thumb-placeholder {
    width: 100%; height: 64px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #e8e2d5, #d4cdc0);
    color: #888; font-size: 10px;
}
.refmap-label {
    padding: 3px 4px;
    font-size: 11px;
    line-height: 1.2;
    color: #333;
    background: #f5efe2;
}
.refmap-option.active .refmap-label {
    background: #5D4037;
    color: #fff;
    font-weight: 600;
}

/* Analysis panel button styling. */
.inv-analysis-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    margin-bottom: 6px;
    font-size: 13px;
    background: #fff;
    border: 1px solid #d4cdc0;
    border-radius: 3px;
    cursor: pointer;
    color: #333;
}
.inv-analysis-btn:hover { background: #f7f3eb; border-color: #5D4037; }
.inv-analysis-btn.active {
    background: #5D4037;
    color: #fff;
    border-color: #5D4037;
}
.inv-nav {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}
.inv-nav .nav-item.title {
    padding: 8px 15px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
    font-weight: 600;
}
.inv-nav .nav-item.separator {
    height: 1px;
    background: #e0e0e0;
    margin: 6px 12px;
}

/* ---- Map content area ---- */
#inventory-content {
    position: absolute;
    top: 44px;
    left: 240px;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* ---- Article page layout: centered content below header ---- */
body.inv-article-body {
    padding-top: 44px;  /* clear absolute-positioned header */
    background: #fafafa;
}

/* ---- Map fills the content area (positioned by chrome rules above) ---- */
#map {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

/* ---- Detail panel — absolute within #inventory-content (the map container (.inv-main)) ---- */
.detail-panel {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 300px;
    max-width: calc(100% - 20px);    /* never wider than the map area */
    max-height: calc(100% - 60px);   /* never taller than the map area */
    overflow-y: auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.28);
    z-index: 10;                     /* above map tiles */
}

.detail-panel.hidden {
    display: none;
}

#close-panel {
    position: sticky;
    top: 0;
    float: right;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    padding: 8px 10px 4px;
    cursor: pointer;
    color: #666;
    z-index: 1;
}

#detail-content {
    padding: 10px 14px 14px;
    clear: both;
}

#detail-content h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px;
    word-break: break-word;
    line-height: 1.3;
}
#detail-content h3 .landslide-permalink {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed #bbb;
}
#detail-content h3 .landslide-permalink:hover {
    color: #1a4f8b;
    border-bottom-color: #1a4f8b;
}

.type-badge {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    margin-bottom: 8px;
}
.type-badge.slow         { background: #1E88E5; }
.type-badge.catastrophic { background: #E53935; }

.class-badge {
    display: inline-block;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #eee;
    color: #555;
    margin-bottom: 8px;
    vertical-align: middle;
}

/* Planet Stories — prominent call-to-action for actively observable events */
.planet-prominent {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 12px;
    background: #e8f0fe;
    border: 1px solid #b3c8f5;
    border-radius: 5px;
    text-decoration: none;
    color: #1a56b0;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.1s;
}
.planet-prominent:hover { background: #d2e3fc; color: #0d3e8a; }
.planet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 4px;
    background: #1a73e8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* In-app Planet timelapse player. Renders archived MP4s without leaving the site. */
.planet-player {
    margin: 8px 0;
    border: 1px solid #b3c8f5;
    border-radius: 5px;
    overflow: hidden;
    background: #000;
}
.planet-video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    background: #000;
}
.planet-caption {
    padding: 5px 10px;
    background: #e8f0fe;
    color: #1a56b0;
    font-size: 11px;
    line-height: 1.3;
}
.planet-caption a {
    color: #1a56b0;
    text-decoration: underline;
    font-weight: 600;
}
.planet-caption a:hover { color: #0d3e8a; }

/* "More" disclosure at bottom of detail panel */
.more-details {
    margin-top: 10px;
    border-top: 1px solid #eee;
    padding-top: 6px;
}
.more-details summary {
    font-size: 11px;
    color: #888;
    cursor: pointer;
    padding: 2px 0;
    user-select: none;
}
.more-details summary:hover { color: #444; }

/* Imagery links block — shown immediately after the header */
.imagery-links {
    margin: 8px 0;
    padding: 8px 10px;
    background: #f8f8f8;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
}

.imagery-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 6px;
    margin-bottom: 3px;
    border-radius: 3px;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    transition: background 0.1s;
}
.imagery-btn:last-child { margin-bottom: 0; }
.imagery-btn:hover { background: #e8e8e8; color: #111; }

.imagery-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background: #555;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
/* nth-child indices include the leading "Imagery" section title at child(1) */
.imagery-btn:nth-child(2) .imagery-icon { background: #e8511a; }  /* ESRI - orange */
.imagery-btn:nth-child(3) .imagery-icon { background: #34a853; }  /* Google - green */
.imagery-btn:nth-child(4) .imagery-icon { background: #6c3483; }  /* S2 - purple */
.imagery-btn:nth-child(5) .imagery-icon { background: #444; }     /* S1 - dark */
.imagery-btn:nth-child(6) .imagery-icon { background: #0e7490; font-size: 13px; }  /* OPERA Asc - teal */
.imagery-btn:nth-child(7) .imagery-icon { background: #155e75; font-size: 13px; }  /* OPERA Desc - dark teal */

.detail-desc {
    font-size: 12px;
    color: #555;
    margin: 6px 0;
    line-height: 1.4;
}

.detail-section {
    margin-top: 10px;
    border-top: 1px solid #eee;
    padding-top: 8px;
}

.detail-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    margin-bottom: 4px;
}

.attr-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}
.attr-table td {
    padding: 3px 2px;
    vertical-align: top;
}
.attr-table td:first-child {
    color: #888;
    width: 42%;
    padding-right: 6px;
    white-space: nowrap;
}

.evidence-list {
    font-size: 11px;
    color: #444;
    line-height: 1.8;
}
.ev-sep {
    margin: 0 4px;
    color: #ccc;
}

.ext-links {
    margin-top: 4px;
    font-size: 11px;
    line-height: 2;
}
.ext-links a {
    display: inline-block;
    margin: 0 4px 2px 0;
    padding: 2px 7px;
    background: #f5f5f5;
    border-radius: 3px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
}
.ext-links a:hover { background: #e8e8e8; }

/* ---- Charts container — holds both temporal histogram panels side-by-side ---- */
/* ---- Floating susceptibility scatter panel (draggable + resizable) ---- */
/* ---- Shared floating, draggable, resizable analysis panel ---- */
/* .float-panel itself is in ls_panels.css (shared with /lidar/). */
/* Default positions/sizes — just starting points; all four are draggable. */
#hist-panel    { top: 64px;  left: 16px;  width: 480px; height: 244px; }
#timing-panel  { top: 320px; left: 16px;  width: 560px; height: 244px; }
#opera-float   { top: 90px;  right: 16px; width: 400px; height: 470px; }
/* Elevation profile panel (profile.js) */
#profile-panel { top: 64px; left: 16px; width: 640px; height: 300px; }
/* The analysis panel (analysis.js) and the permafrost patch detail (permafrost.js) */
.ls-tool-hidden { display: none !important; }
#an-float       { top: 64px; right: 16px; width: 780px; height: 440px; }
#pf-patch-float { top: 64px; left: 16px;  width: 720px; height: 520px; }
.pf-header { display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; border-bottom: 1px solid #eee;
             font-size: 11px; color: #555; flex-wrap: wrap; }
.pf-header .pf-title { font-weight: 600; color: #444; white-space: nowrap; }
#pf-patch-float .pf-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pf-header select, .pf-header input { font-size: 11px; padding: 1px 3px; }
.pf-header input#an-radius { width: 42px; }
.pf-header .pf-unit { margin-left: -3px; color: #777; }
.pf-header button { font-size: 11px; padding: 1px 7px; border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; color: #444; }
.pf-header button:hover { background: #f0ebe9; }
.pf-header button.active { background: #5D4037; color: #fff; border-color: #5D4037; }
.pf-header button#an-close, .pf-header button#pf-patch-close { border: none; font-size: 15px; line-height: 1; padding: 0 4px; }
.an-header .an-axis { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; cursor: pointer; }
.an-header .an-axis select { max-width: 12em; }
.an-header .an-grid { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: #777; }
.an-header .an-grid input[type=range] { width: 64px; height: 12px; margin: 0; }
.an-header .an-grid span { min-width: 2em; color: #444; }
.an-header #an-count { color: #777; white-space: nowrap; margin-left: auto; }
.an-header #an-clear { font-size: 11px; }
.an-header #an-clear.disabled { opacity: 0.3; pointer-events: none; }
#an-body { position: relative; flex: 1; min-height: 0; }
#an-heat { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#an-svg  { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
#an-svg circle { cursor: pointer; }
#an-note { position: absolute; right: 10px; top: 10px; font-size: 10px; color: #a33; pointer-events: none; max-width: 60%; text-align: right; }
.scatter-legend-foot .an-sample { color: #555; margin-top: 2px; line-height: 1.35; }
.inv-analysis-presets { margin: -4px 0 8px 2px; font-size: 11px; color: #888; }
.inv-analysis-presets a { margin-right: 10px; color: #5D4037; }
.pf-tip { display: none; position: absolute; z-index: 2; pointer-events: none; background: rgba(255,255,255,0.96);
          border: 1px solid #bbb; border-radius: 3px; box-shadow: 0 1px 6px rgba(0,0,0,.18); padding: 4px 8px;
          font-size: 11px; color: #333; white-space: nowrap; }
#pf-patch-body { position: relative; flex: 1; min-height: 0; }
#pf-patch-canvas { display: block; }
/* The profile chart's own rules (.profile-*) are in ls_panels.css. */
/* The analysis panel's legend footer (the old scatter's). The catch swatch sits at the left of the landslide legend bar and has no
   lower edge label, so give the bar's first cell a hairline to mark it off
   from the ramp proper. */
.scatter-legend-foot .leg-bar span:first-child { box-shadow: inset -1px 0 0 #fff; }
.scatter-legend-foot {
    flex-shrink: 0;
    border-top: 1px solid #eee;
    padding: 4px 8px 5px;
    font-size: 9px; color: #666;
    background: #fff;
}
.scatter-legend-foot .leg-row { display: flex; align-items: center; gap: 4px; margin: 1px 0; }
.scatter-legend-foot .leg-title { width: 70px; flex-shrink: 0; color: #555; }
.scatter-legend-foot .leg-bar { display: flex; flex: 1; height: 11px; }
.scatter-legend-foot .leg-bar span { flex: 1; }
.scatter-legend-foot .leg-edges { display: flex; justify-content: space-between; color: #999; font-size: 8px; }
/* The analysis panel's legend: numbers sit AT the colour boundaries, each on a tick (space-between put them
   at evenly spaced positions that were not the boundaries, and nobody could tell what they meant). */
.scatter-legend-foot .leg-scale { flex: 1; padding: 0 16px; }
.scatter-legend-foot .leg-ticks { position: relative; height: 13px; }
.scatter-legend-foot .leg-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 8px; color: #777;
                                 white-space: nowrap; text-align: center; line-height: 1; }
.scatter-legend-foot .leg-tick i { display: block; width: 1px; height: 3px; background: #999; margin: 0 auto 1px; }

/* ---- Seasonal timing histogram panel (floating; layout via .float-panel) ---- */
.hist-header {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border-bottom: 1px solid #eee;
    font-size: 11px;
    color: #666;
    flex-shrink: 0;
    gap: 8px;
}
#hist-close {
    margin-left: auto;
    background: none; border: none;
    font-size: 18px; line-height: 1;
    cursor: pointer; color: #999; padding: 0 2px;
}
#hist-close:hover { color: #333; }
#hist-canvas { display: block; width: 100%; flex: 1; }

/* ---- Timeline histogram panel (floating; layout via .float-panel) ---- */
.timing-header {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border-bottom: 1px solid #eee;
    font-size: 11px;
    color: #666;
    flex-shrink: 0;
    gap: 8px;
}
#timing-close {
    background: none; border: none;
    font-size: 18px; line-height: 1;
    cursor: pointer; color: #999; padding: 0 2px;
}
#timing-close:hover { color: #333; }
#timing-canvas { display: block; width: 100%; flex: 1; }

/* ---- Bottom-right overlay (zoom hint + Methods link) ---- */
#map-overlay-info {
    position: absolute;
    bottom: 32px;
    left: 12px;
    background: rgba(255,255,255,0.9);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
#map-overlay-info .overlay-row a {
    color: #555;
    text-decoration: none;
}
#map-overlay-info .overlay-row a:hover { color: #5D4037; }
#zoom-hint {
    color: #aaa;
    font-size: 11px;
    margin-top: 2px;
}

/* ---- Nav filter styles ---- */
.nav-filter-label {
    display: flex;
    align-items: baseline;
    padding: 2px 15px;
    font-size: 12px;
    cursor: pointer;
    color: #111;
    gap: 6px;
}
.nav-filter-label input { flex-shrink: 0; cursor: pointer; }
.nav-filter-label.small { font-size: 11px; padding: 1px 15px; }

/* Landslide features: three-way filter rows (must / neutral / exclude) */
#ft-filter .ft-group { font-size: 10px; color: #8a7a68; text-transform: uppercase;
                       letter-spacing: .04em; margin: 6px 0 2px; }
#ft-filter .ft-group:first-child { margin-top: 2px; }
#ft-filter .ft-row { display: flex; align-items: center; justify-content: space-between;
                     gap: 6px; font-size: 11px; color: #444; padding: 1px 0; }
#ft-filter .ft-row.ft-must .ft-label { color: #1a5e20; font-weight: 600; }
#ft-filter .ft-row.ft-excl .ft-label { color: #b00020; text-decoration: line-through; }
#ft-filter .ft-tri { display: inline-flex; flex: none; border: 1px solid #ccc; border-radius: 3px; overflow: hidden; }
#ft-filter .ft-tri button { border: none; background: #fff; color: #bbb; width: 20px; height: 16px;
                            font-size: 10px; line-height: 16px; padding: 0; cursor: pointer; }
#ft-filter .ft-tri button + button { border-left: 1px solid #ddd; }
#ft-filter .ft-tri button:hover { background: #f0ebe9; color: #666; }
#ft-filter .ft-tri button.on[data-s="must"]    { background: #2e7d32; color: #fff; }
#ft-filter .ft-tri button.on[data-s="neutral"] { background: #e8e4de; color: #666; }
#ft-filter .ft-tri button.on[data-s="excl"]    { background: #c62828; color: #fff; }

/* Sliders and "include only" controls */
.filter-control {
    padding: 2px 15px 6px;
}
.nav-slider {
    width: 100%;
    margin: 4px 0 2px;
    cursor: pointer;
    accent-color: #5D4037;
}
.slider-label {
    font-size: 10px;
    color: #555;
    text-align: right;
    min-height: 14px;
}

/* Dual-handle slider: two <input type="range"> overlaid; thumbs are
 * pointer-enabled while the track is pointer-transparent so each thumb
 * stays grabbable. The .dual-progress div paints the active band
 * between the two thumb positions (JS sets left/right inline). */
.dual-range {
    position: relative;
    width: 100%;
    height: 20px;
    margin: 4px 0 2px;
}
.dual-range .dual-track {
    position: absolute;
    top: 8px;
    left: 0; right: 0;
    height: 4px;
    background: #d8cfc4;
    border-radius: 2px;
}
.dual-range .dual-progress {
    position: absolute;
    top: 8px;
    height: 4px;
    background: #5D4037;
    border-radius: 2px;
    pointer-events: none;
}
.dual-range input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    background: none;
    pointer-events: none;     /* track is pass-through */
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
}
.dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #5D4037;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    cursor: grab;
    margin-top: 0;
}
.dual-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #5D4037;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    cursor: grab;
}
.dual-range input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    height: 4px;
}
.dual-range input[type="range"]::-moz-range-track {
    background: transparent;
    height: 4px;
}
.cls-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Slow (green/yellow/red) dots get a thin black outline for definition */
.cls-dot-slow {
    border: 1px solid rgba(0,0,0,0.35);
}
/* Blue catastrophic dots are darker so render slightly smaller for equal visual weight */
.cls-dot-cat {
    width: 7px; height: 7px;
}
/* The two size-only "Small …" rows: a little row of half-size dots in the
   colors their members can take (creep styles / age bands). */
.cls-dot-row {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.cls-mini {
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cls-mini-slow { border: 1px solid rgba(0,0,0,0.35); }
.cls-name { flex: 1; line-height: 1.3; }
.cls-count {
    font-size: 10px;
    color: #666;
    flex-shrink: 0;
}

.nav-class-header {
    padding: 4px 15px 1px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
}

.nav-subgroup-header {
    padding: 4px 15px 1px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    margin-top: 2px;
}

.subgroup-toggle {
    float: right;
    font-size: 10px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
}
.subgroup-toggle a { color: #777; }
.subgroup-toggle a:hover { color: #111; }

.class-toggle-all {
    float: right;
    font-size: 10px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
}
.class-toggle-all a { color: #777; }
.class-toggle-all a:hover { color: #111; }

/* ---- Methods page ---- */
.methods-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 32px 60px;
    font-size: 14px;
    line-height: 1.65;
    color: #222;
}
.methods-page h2 { margin: 0 0 8px; font-size: 22px; }
.methods-page h3 {
    margin: 32px 0 10px;
    padding-top: 14px;
    border-top: 1px solid #ddd;
    font-size: 16px;
}
.methods-page h4 { margin: 18px 0 6px; font-size: 14px; }
.methods-intro { color: #444; margin-bottom: 18px; }
.methods-toc {
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 12px 20px 12px 24px;
    display: inline-block;
    font-size: 13px;
    line-height: 1.8;
}
.methods-toc ol { margin: 6px 0 0; padding-left: 18px; }
.methods-toc a { color: #3f67b1; text-decoration: none; }
.methods-toc a:hover { text-decoration: underline; }
.methods-page ul, .methods-page ol { margin: 6px 0 12px; padding-left: 22px; }
.methods-page li { margin-bottom: 4px; }
.methods-page code {
    background: #f0f0f0;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}
.methods-page p { margin: 6px 0 10px; }
.methods-table {
    border-collapse: collapse;
    margin: 8px 0 14px;
    font-size: 13px;
    width: 100%;
}
.methods-table th, .methods-table td {
    border: 1px solid #ddd;
    padding: 5px 10px;
    text-align: left;
}
.methods-table th {
    background: #f5f5f5;
    font-weight: 600;
    font-size: 12px;
}
.m-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
}

/* --- Map-click tools (measure line/area, draw, InSAR) ---
 * ONE control group with radio semantics: these all claim the map click, so
 * at most one is live and picking another releases it. Sharing a single
 * bordered box is what says "alternatives" — as three separate groups they
 * read as three unrelated buttons that happened to fight each other.
 * See LSTools in map.js. */
.inv-tools-ctrl button {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #333;
}
/* The live tool. Same amber the measure + InSAR buttons always used. */
.inv-tools-ctrl button.active {
    background: #ffaa00;
    color: #fff;
}
/* "InSAR" is a word, not a glyph, and has to fit the 29px control square. */
.inv-tools-ctrl button.tool-text {
    font-size: 9px;
    letter-spacing: 0.01em;
}
/* Editor-only tools keep the brown cue the +data control uses, as an edge
 * rather than a fill — it must not read as the active state, which is the
 * amber above. */
.inv-tools-ctrl button.tool-editor {
    box-shadow: inset 3px 0 0 #5D4037;
}
/* Clear is an ACTION, not a mode — it never lights up, and the rule above it
 * separates it from the things that do. */
.inv-tools-ctrl button.tool-action {
    border-top: 2px solid #d8d3ce !important;
    font-size: 13px;
    color: #888;
}
.inv-tools-ctrl button.tool-action:hover { color: #333; }

/* --- "+data" upload tool (editor-only) ---
 * Compact "+data" label; brown background keeps it legible on any basemap
 * and visually distinct from the white-bg measure + zoom controls. */
.inv-newrec-ctrl {
    background: transparent !important;
    box-shadow: none !important;
}
.inv-newrec-ctrl button {
    /* Override maplibregl default 29×29 square so the text fits. */
    width: auto !important;
    min-width: 44px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 29px;
    color: #fff !important;
    background: #5D4037 !important;
    border-radius: 4px;
}
.inv-newrec-ctrl button:hover { background: #4a322a !important; }
.inv-measure-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(0,0,0,0.78);
    color: #fff;
    padding: 3px 7px;
    border-radius: 3px;
    font-size: 12px;
    font-family: system-ui, sans-serif;
    white-space: nowrap;
    z-index: 100;
    display: none;
    transform: translate(10px, -50%);
}

/* Class checkbox with zero matching records — visible but inert */
.nav-filter-label.nav-filter-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.nav-filter-label.nav-filter-disabled input { cursor: not-allowed; }

/* Editor-only "Manage" gear in the map detail panel popup */
.manage-gear {
    margin-left: 8px;
    font-size: 14px;
    color: #5D4037;
    text-decoration: none;
    opacity: 0.65;
}
.manage-gear:hover { opacity: 1; }

/* --- "PNG" high-res export tool ---
 * Text label (like "+data") rather than a glyph: an icon is ambiguous
 * against a busy basemap. Matches the measure control's neutral styling. */
.inv-export-ctrl button {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #333;
    letter-spacing: 0.02em;
}
.inv-export-ctrl button.active { background: #ffaa00; color: #fff; }

/* --- Header "Download" menu (base.html) ---
 * The data zip and the map-image export are both downloads; one menu keeps
 * them together instead of scattering export affordances around the app. */
.inv-dl-wrap { position: relative; display: inline-block; }
.inv-dl-btn {
    font: inherit; color: inherit; background: none; border: none;
    cursor: pointer; padding: 0; line-height: inherit;
}
.inv-dl-btn:hover { text-decoration: underline; }
.inv-dl-menu {
    position: absolute; top: 100%; right: 0; margin-top: 6px; z-index: 40;
    min-width: 190px; background: #fff; border: 1px solid #d4cdc0;
    border-radius: 5px; box-shadow: 0 3px 12px rgba(0,0,0,0.18);
    padding: 4px 0; display: flex; flex-direction: column;
}
.inv-dl-menu.hidden { display: none; }
.inv-dl-menu > a, .inv-dl-menu > button {
    font: 13px/1.3 system-ui, -apple-system, Segoe UI, sans-serif;
    text-align: left; background: none; border: none; cursor: pointer;
    color: #333; padding: 8px 14px; text-decoration: none; white-space: nowrap;
}
.inv-dl-menu > a:hover, .inv-dl-menu > button:hover { background: #f2ede6; }

/* Signed-in user menu: same dropdown as Download, plus section headings and
   a POST form (Log out) whose button must line up with the links. */
.inv-dl-menu > form { display: contents; }
.inv-dl-menu > form > button {
    font: 13px/1.3 system-ui, -apple-system, Segoe UI, sans-serif;
    text-align: left; background: none; border: none; cursor: pointer;
    color: #333; padding: 8px 14px; white-space: nowrap; width: 100%;
}
.inv-dl-menu > form > button:hover { background: #f2ede6; }
.inv-menu-head {
    font: 600 10px/1.2 system-ui, -apple-system, Segoe UI, sans-serif;
    letter-spacing: 0.06em; text-transform: uppercase; color: #999;
    padding: 8px 14px 3px; border-top: 1px solid #eee6da; margin-top: 4px;
}
.inv-menu-head:first-child { border-top: none; margin-top: 0; }
.inv-header-nav .inv-user-btn { color: #5D4037; font-weight: 600; font-size: 13px; }

/* --- Collapsible overlay categories (sidebar + wiper panel) --- */
.ov-cat-summary { cursor: pointer; list-style: none; user-select: none; }
.ov-cat-summary::-webkit-details-marker { display: none; }
.ov-cat-summary::before { content: '▸ '; font-size: 9px; color: #999; }
details[open] > .ov-cat-summary::before { content: '▾ '; }

/* --- InSAR time-series tool (its button lives in .inv-tools-ctrl above) --- */
.insar-panel { width: 560px; height: 320px; display: flex; flex-direction: column; }
.insar-panel canvas { flex: 1; width: 100%; min-height: 0; }
.float-close { margin-left: auto; border: none; background: none; font-size: 17px;
               line-height: 1; cursor: pointer; color: #888; }
.float-close:hover { color: #333; }

/* Revising an outline on the live map (revise.js). The bar is fixed to the
   bottom rather than docked in the side panel: revising means looking at the
   map, and the panel is where the record's text lives, not its geometry. */
.revise-open {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  font-size: 15px; line-height: 1; color: #5D4037; opacity: 0.55;
}
.revise-open:hover { opacity: 1; }
#revise-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px;
  z-index: 1200; background: #fffdf9; border: 1px solid #d4cdc0;
  border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  padding: 8px 12px; max-width: min(560px, 92vw); font-size: 13px; color: #3b2f2a;
}
#revise-bar .rv-title { font-size: 13px; margin-bottom: 2px; }
#revise-bar .rv-count { color: #777; font-size: 11px; }
#revise-bar .rv-hint { color: #777; font-size: 11px; line-height: 1.35; margin-bottom: 6px; }
#revise-bar .rv-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#revise-bar button {
  font-size: 12px; padding: 4px 10px; border: 1px solid #d6c8c2;
  background: #f0ebe9; color: #5D4037; border-radius: 4px; cursor: pointer;
}
#revise-bar button:hover { background: #e6dfdc; }
#revise-bar .rv-primary { background: #5D4037; color: #fff; border-color: #5D4037; }
#revise-bar .rv-primary:hover { background: #432d27; }
#revise-bar #rv-status { font-size: 11px; color: #777; }
#revise-bar #rv-status.rv-ok { color: #1b7a3d; }
#revise-bar #rv-status.rv-bad { color: #b3261e; }
#revise-bar #rv-status.rv-quiet { color: #999; }

/* Scarp traces: no card any more — the tracing panel reuses .inv-draw-panel
   (home.html) and a click on a line is a MapLibre popup. Purple dashed lines
   on the map so they read as neither landslide outlines nor basemap. */

/* Alt-click elevation probe (map.js _elevProbe) */
.elev-probe { font-size: 12px; line-height: 1.35; }
.elev-probe .ep-ll { font-weight: 600; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.elev-probe table { border-collapse: collapse; width: 100%; }
.elev-probe td { padding: 1px 0; vertical-align: top; }
.elev-probe td.ep-z { text-align: right; padding-left: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.elev-probe .ep-note { color: #666; font-size: 11px; margin-top: 4px; }
.elev-probe .ep-copy { margin-top: 6px; font-size: 11px; padding: 2px 8px; cursor: pointer; }
.elev-probe .ep-datum { color: #777; font-size: 10.5px; }