/* Make the Layers pill use the same style as .geosam-pill/.slideup-button, just larger */
.layer-pill-btn {
  min-width: 240px;
  width: 240px;
  max-width: 240px;
  min-height: 3rem;
  height: 3rem;
  color: var(--pill-fg);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 24px 0 16px;
  box-sizing: border-box;
  text-align: right;
}

/* Right-align the Layers group container and button group */
.remote-buttons-row {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.remote-btn-group-row {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  margin-right: 12px;
  margin-bottom: 10px;
}
.layer-pill-btn .remote-btn-label {
  font-size: 1.125rem;
  font-weight: 500;
  flex: 1 1 auto;
  text-align: right;
}
.layer-pill-btn svg {
  height: 1.6875rem; /* 2rem * 0.85 */
  width: 1.6875rem;
  margin-right: 8px;
  color: inherit;
  fill: currentColor;
}

 .slideup-button {
  font-size: 0.8125rem !important;
  color: var(--pill-fg);
}
.slideup-button svg {
  color: inherit;
  fill: currentColor;
}

.remote-area-left {
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.sheet-nav-logo {
  height: 2.25rem;
  width: auto;
  margin-left: 16px;
  margin-right: 0;
  z-index: 10001;
  opacity: 0.92;
  pointer-events: none;
}

/* Light tiles: swap to dark logo on both panels */
body:not(.tile-dark) .sheet-nav-logo,
body:not(.tile-dark) .intro-nav-logo {
  content: url('/static/logo/Logo_dark.png');
}

/* Slide-up panel narrower than slideup.js's NARROW_LOGO_WIDTH
   (.sheet-nav-compact, toggled from there) — same per-theme swap as
   above, just the small logo variant instead of the full one, which
   starts crowding the close button/title at narrow widths. Higher
   specificity than the light-theme rule above (the #dash-sheet id) so
   it wins whenever both apply. */
body.tile-dark #dash-sheet.sheet-nav-compact .sheet-nav-logo {
  content: url('/static/logo/LogoSmall_light.png');
}
body:not(.tile-dark) #dash-sheet.sheet-nav-compact .sheet-nav-logo {
  content: url('/static/logo/LogoSmall_dark.png');
}
/* Rendered at half the normal size too, not just a different file — the
   #dash-sheet id here outweighs both the plain .sheet-nav-logo rule above
   and its own mobile media-query override further down, so this wins
   regardless of viewport. */
#dash-sheet.sheet-nav-compact .sheet-nav-logo {
  height: 1.125rem;
}

/* Left and bottom panels: logo left-aligned */
#dash-sheet:not(.sheet-right) .sheet-nav-bar {
  justify-content: flex-start;
  text-align: left;
}
#dash-sheet:not(.sheet-right) .sheet-nav-logo {
  margin-left: 16px;
  margin-right: 0;
}

/* Right panel: logo right-aligned */
#dash-sheet.sheet-right .sheet-nav-bar {
  justify-content: flex-end;
  text-align: right;
}
#dash-sheet.sheet-right .sheet-nav-logo {
  margin-left: 0;
  margin-right: 16px;
}
@media (max-width: 768px) {
  .sheet-nav-logo {
    height: 1.75rem;
  }
  #dash-sheet:not(.sheet-right) .sheet-nav-logo {
    margin-left: 8px;
    margin-right: 0;
  }
  #dash-sheet.sheet-right .sheet-nav-logo {
    margin-left: 0;
    margin-right: 8px;
  }
}

/* ── Sheet nav title (name · level) ──────────────────────────────────────── */
.sheet-nav-title {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  gap: 0;
}
.sheet-nav-title.nav-title-safe {
  left: var(--nav-safe-left, 56px);
  right: var(--nav-safe-right, 44px);
}
.sheet-nav-name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  opacity: 0.88;
  flex-shrink: 0;
  z-index: 10002;
}
.sheet-nav-sep {
  opacity: 0.35;
  padding: 0 5px;
  font-size: 0.6875rem;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}
.sheet-nav-level {
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.5;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* static/css/styles.css */

:root {
  --font-scale: 1;

  --blur: 12px;
  --trans: 0.7;
  --topbar-h: 110px;
  --map-gap: 4px;
  --smallcorner: 8px;
  --bigcorner: 12px;

  --whiteRGB:      255, 255, 255;
  --blackRGB:      0, 0, 0;

  /* ── Theme surface colors ─- */
  --lightTheme: var(--whiteRGB);
  --darkTheme:  var(--blackRGB);
  --lightTheme: 255, 255, 255;
  --darkTheme:  21,21,21;

  --theme-fg:   var(--darkTheme);  /* default */
  --theme-highlight: var(--highlight-border-color-light);

  --white: #FFFFFF;
  --black: #000000;

  --lightgrey:  #EEEEEE;
  --darkgrey:   #555555;
  --darkergrey: #333333;
  --lowlight:   #f7f7f7;

  --lightcolor: #D8ECC7;
  --midcolor:   #7CB342;
  --midcolor-rgb: 124, 179, 66;   /* rgb triplet companion — for rgba(var(--midcolor-rgb), X) translucent fills */
  --darkcolor:  #006B2C;



  --tooltip-bg: #222;

  /* USDA soil-texture triangle palette (12 classes) */
  --usda-clay:             #b5451b;
  --usda-sandy-clay:       #e07b54;
  --usda-silty-clay:       #c9956c;
  --usda-clay-loam:        #d4aa72;
  --usda-sandy-clay-loam:  #c9b45a;
  --usda-silty-clay-loam:  #8faa82;
  --usda-sandy-loam:       #7ab568;
  --usda-loam:             #9ec96e;
  --usda-silt-loam:        #89b5d0;
  --usda-silt:             #5585b0;
  --usda-loamy-sand:       #e8cc7a;
  --usda-sand:             #f2edcc;

  /* Terrain legend */
  --slope-gradient-1: #c8e6c9;
  --slope-gradient-2: #fff176;
  --slope-gradient-3: #ff8f00;
  --slope-gradient-4: #b71c1c;
  --elevation-gradient-1: #404040;
  --elevation-gradient-2: #808080;
  --elevation-gradient-3: #c0c0c0;

  --greendeforest1: #228B22;
  --greendeforest2: #25af25;
  --blueforestgain: #2E86DE;
  --transdeforest: 1;

  --brownunsed1:#6B4B31;
  --highlight:  #D19243;
  --highlight-rgb: 209, 146, 67;   /* rgb triplet companion — for rgba(var(--highlight-rgb), X) glow/translucent uses */
  --brownunsed2:#CCB38A;

  --pink:     #ea9aaa;
  --darkpink: #e55572;

  /* approve/reject colors for status indicators, etc. */
  --red:      #C0392B;
  --red-rgb:  192, 57, 43;
  --green: #2a7d4f;
  --green-rgb: 42, 125, 79;  

  /* ── Status / semantic colors (pass-fail-style indicators: EUDR */
  --status-good:    #4ade80;
  --status-bad:     #f87171;
  --status-warn:    #facc15;
  --status-neutral: #9ca3af;
  --status-good-rgb:    74, 222, 128;
  --status-bad-rgb:     248, 113, 113;
  --status-warn-rgb:    250, 204, 21;
  --status-neutral-rgb: 156, 163, 175;

  /* ── IUCN Red List conservation-status badge colors (biodiversity.js) ── */
  --iucn-cr: #dc2626;  /* Critically Endangered */
  --iucn-en: #ea580c;  /* Endangered */
  --iucn-vu: #ca8a04;  /* Vulnerable */
  --iucn-nt: #65a30d;  /* Near Threatened */
  --iucn-lc: #16a34a;  /* Least Concern */
  --iucn-dd: #6b7280;  /* Data Deficient */
  --iucn-ex: #1e1b4b;  /* Extinct */

  --segment-vertex-color:           var(--edit-border-color-light);
  --segment-vertex-fill-selected:   #ffffff;
  --segment-vertex-radius:          2.5;
  --segment-vertex-radius-selected: 7;
  --segment-vertex-weight:          2;
  --segment-edge-weight:            2;
  --move-seg-handle-radius:         2.5;

  /* ── Pill result typography tokens ──   */
  --pill-xs:   0.5625rem;   /* chart axis labels     */
  --pill-sm:   0.6875rem;  /* keys / section labels */
  --pill-md:   0.75rem;  /* stat values           */
  --pill-lg:   0.9375rem;  /* headlines             */
  --pill-fg:   rgb(var(--theme-fg));            /* values — full opacity */
  --pill-sub:  rgba(var(--theme-fg), 0.65);     /* labels / keys         */
  --pill-dim:  rgba(var(--theme-fg), 0.45);     /* source / attribution  */

  /* ── Layer Box: shared typography tokens ─────────────────────────────── */
  --layer-box-title-size:       0.6875rem;
  --layer-box-title-weight:     400;
  --layer-box-kv-key-size:      0.71875rem;
  --layer-box-kv-key-weight:    400;
  --layer-box-kv-value-size:    0.6875rem;
  --layer-box-kv-value-weight:  300;
  --layer-box-signature-size:   var(--pill-xs);
  --layer-box-signature-weight: 300;
}

/* Key/value and signature COLOR (below, at each class's own definition) . */
:root {
  /* ── Climate chart tokens ── */
  --climate-rain:      rgba(80, 140, 200, 0.55);
  --climate-temp:      rgba(220, 130, 90, 0.65);
  --climate-temp-hot:  #d97070;
  --climate-temp-cold: #6fa8d0;
  --climate-wind:      rgba(151, 177, 164, 0.7);
  --climate-radiation:          #f59e0b;
  --climate-radiation-dim:      rgba(245, 158, 11, 0.55);
  --climate-radiation-theory:     #38bdf8;
  --climate-radiation-theory-dim: rgba(56, 189, 248, 0.55);
  --climate-humidity:             #1d91c0;
  --climate-water:                #2ca25f;
  --climate-water-dim:            rgba(44, 162, 95, 0.55);
  --climate-forest-dim:           rgba(74, 158, 74, 0.55);

  /* UNEP aridity zone colors */
  --climate-humid:      #4a90d9;
  --climate-subhumid:   #5cb85c;
  --climate-semiarid:   #e0a500;
  --climate-arid:       #e07030;
  --climate-hyperarid:  #b02010;

  /* ── Map polygon styles ── */
  
  --thin: 0.5px;
  --thick: 1.5px;

/* normal polygons */
  --normal-border-color-dark:  var(--white);
  --normal-border-color-light: var(--black);
  --normal-border-opacity:     0.8;
  --normal-border-weight:      var(--thin);
  --normal-border-blur:        0px;

  --normal-fill-color-dark:  var(--pink);
  --normal-fill-color-light: var(--red);
  --normal-fill-opacity:     0;
  --normal-fill-blur:        0px;

/* hover polygons */
  --hover-border-color-dark:  var(--normal-fill-color-dark);
  --hover-border-color-light: var(--normal-fill-color-light);
  --hover-border-opacity:     0.8;
  --hover-border-weight:      var(--thick);
  --hover-border-blur:        0px;

  --hover-fill-color-dark:  var(--normal-fill-color-dark);
  --hover-fill-color-light: var(--normal-fill-color-light);
  --hover-fill-opacity:     0.15;
  --hover-fill-blur:        0px;

/* highlight polygons */
  --highlight-border-color-dark:  var(--pink); /* lightgrey */
  --highlight-border-color-light: var(--red); /* darkgrey */
  --highlight-border-opacity:     0.8;
  --highlight-border-weight:      var(--thick);
  --highlight-border-blur:        0px;

  --highlight-fill-color-dark:  var(--black);
  --highlight-fill-color-light: var(--black);
  --highlight-fill-opacity:     0;
  --highlight-fill-blur:        0px;

  /* Selected administrative hierarchy polygon style (world -> parcel).
     Aliased to normal fill colors so changing normal pink/red propagates. */
  --selected-border-color-dark:  var(--normal-fill-color-dark);
  --selected-border-color-light: var(--normal-fill-color-light);
  --selected-fill-color-dark:    var(--normal-fill-color-dark);
  --selected-fill-color-light:   var(--normal-fill-color-light);
  --selected-border-opacity:     0.8;
  --selected-border-weight:      var(--thick);
  --selected-fill-opacity:       0.35;

  --select-fill-opacity:        0.35;

 /* edit polygons */
  --edit-mode-border-weight: var(--thick);
  --edit-border-color-dark:  var(--white); /* lightgrey */
  --edit-border-color-light: var(--black); /* darkgrey */

  /* Tree styles to pass on to map.js */
  --map-point-weight: 1.5;
  --map-point-weight-hover:    2.5;
  --map-point-opacity:         0.7;
  --map-point-fill-opacity:    0.7;
  --map-point-hover-anim:      0.1s;
  --map-point-radius-min:      0.3;
  --map-point-radius-max:      8;
  --map-point-radius-factor:   0.28;
  --map-point-radius-default:  30;

  --tree-asset-color: #FFFF00; /* default */

  --tree-esri-color:   #CCCCCC;
  --tree-google-color: #999999;
  --tree-mapbox-color: #444444;

  /* ── Globe atmosphere / fog (Mapbox setFog) ── */
  --fog-color:          rgb(186, 210, 235);  /* lower atmosphere / horizon haze */
  --fog-high-color:     rgb(36, 92, 223);   /* upper atmosphere */
  --fog-space-color:    rgb(15, 30, 60);    /* deep space */
  --fog-horizon-blend:  0.02;
  --fog-star-intensity: 0.4;

  --panel-glow:   0 0 6px color-mix(in srgb, var(--lowlight) 6%, transparent),
                  0 0 16px color-mix(in srgb, var(--lowlight) 3%, transparent);

  /* ── CAR property type colors ── */
  --car-iru:   #228B22;   /* Dark green - Imóvel Rural */
  --car-ast:   #D2821E;   /* Amber - Assentamento */
  --car-pct:   #8B008B;   /* Purple - Povos e Comunidades */
  --car-other: #787878;   /* Grey - Other */

  /* ── ESA WorldCover class colors (v200, 2021) ── */
  --esa-c10:  #006400;   /* Tree Cover */
  --esa-c20:  #ffbb22;   /* Shrubland */
  --esa-c30:  #ffff4c;   /* Grassland */
  --esa-c40:  #f096ff;   /* Cropland */
  --esa-c50:  #fa0000;   /* Built-up */
  --esa-c60:  #b4b4b4;   /* Bare / Sparse Vegetation */
  --esa-c70:  #f0f0f0;   /* Snow and Ice */
  --esa-c80:  #0064c8;   /* Permanent Water Bodies */
  --esa-c90:  #0096a0;   /* Herbaceous Wetland */
  --esa-c95:  #00cf75;   /* Mangroves */
  --esa-c100: #fae6a0;   /* Moss and Lichen */

  /* ── Dynamic World class colors (Google, V1) ── */
  --dw-c0: #419bdf;   /* Water */
  --dw-c1: #397d49;   /* Trees */
  --dw-c2: #88b053;   /* Grass */
  --dw-c3: #7a87c6;   /* Flooded Vegetation */
  --dw-c4: #e49635;   /* Crops */
  --dw-c5: #dfc35a;   /* Shrub & Scrub */
  --dw-c6: #c4281b;   /* Built */
  --dw-c7: #a59b8f;   /* Bare */
  --dw-c8: #b39fe1;   /* Snow & Ice */

  /* ── ESRI Annual Land Cover class colors (10m) ── */
  --esri-c1:  #1a5bab;   /* Water */
  --esri-c2:  #358221;   /* Trees */
  --esri-c4:  #87d19e;   /* Flooded Vegetation */
  --esri-c5:  #ffdb5c;   /* Crops */
  --esri-c7:  #ed022a;   /* Built Area */
  --esri-c8:  #ede9e4;   /* Bare Ground */
  --esri-c9:  #f2faff;   /* Snow / Ice */
  --esri-c10: #c8c8c8;   /* Clouds */
  --esri-c11: #c6ad8d;   /* Rangeland */

  /* ── GLAD GLCLU class colors (UMD, 2019) ── */
  --glad-c1: #419bdf;   /* Water */
  --glad-c2: #88b053;   /* Short Vegetation / Grassland */
  --glad-c3: #e49635;   /* Cropland */
  --glad-c4: #397d49;   /* Trees */
  --glad-c5: #c4281b;   /* Built-up */
  --glad-c6: #a59b8f;   /* Bare Ground */
  --glad-c7: #f2faff;   /* Snow / Ice */
  --glad-c8: #7a87c6;   /* Wetland */

  /* ── GLC_FCS30D class colors (Beijing Normal Univ., 1985–2022) ── */
  --glc-c10:  #ffff64;   /* Rainfed Cropland */
  --glc-c20:  #aaf0f0;   /* Irrigated Cropland */
  --glc-c51:  #003c00;   /* Closed Broadleaved Evergreen Forest */
  --glc-c52:  #285000;   /* Closed Broadleaved Deciduous Forest */
  --glc-c61:  #788200;   /* Open Broadleaved Evergreen Forest */
  --glc-c62:  #8ca000;   /* Open Broadleaved Deciduous Forest */
  --glc-c71:  #005000;   /* Closed Needleleaved Evergreen Forest */
  --glc-c72:  #003c00;   /* Closed Needleleaved Deciduous Forest */
  --glc-c81:  #286400;   /* Open Needleleaved Evergreen Forest */
  --glc-c82:  #5a8700;   /* Open Needleleaved Deciduous Forest */
  --glc-c91:  #004b00;   /* Closed Mixed Forest */
  --glc-c92:  #287800;   /* Open Mixed Forest */
  --glc-c120: #966400;   /* Shrubland */
  --glc-c130: #ffb432;   /* Grassland */
  --glc-c150: #ffdcd2;   /* Sparse Vegetation */
  --glc-c180: #00a884;   /* Wetland */
  --glc-c190: #c31400;   /* Impervious / Urban */
  --glc-c200: #fff5d7;   /* Bare Land */
  --glc-c210: #0046c8;   /* Water */
  --glc-c220: #ffffff;   /* Snow / Ice */

  /* ── MapBiomas LULC class colors — Collection 10 official ── */
  /* Forest */
  --mb-c3:  #1f8d49;   /* Forest Formation */
  --mb-c4:  #7dc975;   /* Savanna Formation */
  --mb-c5:  #04381d;   /* Mangrove */
  --mb-c6:  #007785;   /* Floodable Forest */
  --mb-c9:  #7a5900;   /* Forest Plantation */
  --mb-c49: #02d659;   /* Wooded Sandbank Vegetation */
  /* Non-Forest Natural Formation */
  --mb-c11: #519799;   /* Wetland */
  --mb-c12: #d6bc74;   /* Grassland */
  --mb-c29: #ffaa5f;   /* Rocky Outcrop */
  --mb-c32: #fc8114;   /* Hypersaline Tidal Flat */
  --mb-c50: #ad5100;   /* Herbaceous Sandbank Vegetation */
  /* Farming */
  --mb-c15: #edde8e;   /* Pasture */
  --mb-c20: #db7093;   /* Sugar Cane */
  --mb-c21: #ffefc3;   /* Mosaic of Uses */
  --mb-c35: #9065d0;   /* Palm Oil */
  --mb-c39: #f5b3c8;   /* Soybean */
  --mb-c40: #c71585;   /* Rice */
  --mb-c41: #f54ca9;   /* Other Temporary Crops */
  --mb-c46: #d68fe2;   /* Coffee */
  --mb-c47: #9932cc;   /* Citrus */
  --mb-c48: #e6ccff;   /* Other Perennial Crops */
  --mb-c62: #ff69b4;   /* Cotton */
  /* Non-Vegetated Area */
  --mb-c23: #ffa07a;   /* Beach, Dune & Sand Spot */
  --mb-c24: #d4271e;   /* Urban Area */
  --mb-c25: #db4d4f;   /* Other Non-Vegetated */
  --mb-c30: #9c0027;   /* Mining */
  --mb-c75: #c12100;   /* Photovoltaic Plant */
  /* Water */
  --mb-c31: #091077;   /* Aquaculture */
  --mb-c33: #2532e4;   /* River, Lake & Ocean */
  /* Non-Observed */
  --mb-c27: #d4d4d4;   /* Non Observed */

  /* ── Chart colors ─── */
  --chart-text:     rgb(21, 21, 21);
  --chart-grid:     rgba(21, 21, 21, 0.18);
  --chart-hover:    rgba(255,255,255,0.85);

  /* ── Tree detection colors ─── */
  --tree-circle:    #7CB342;   /* Olive green */

  /* ── Overlay colors ── */
  --image-bg:       #1a1a1a;

  /* ── Shared glass controls: tile selector, zoom, search ───────────────── */
  --control-glass-bg: transparent;
  --control-glass-border: rgba(100, 100, 100, 0.5);
  --control-glass-shadow: var(--panel-glow);
  --control-glass-text: rgba(var(--darkTheme), 0.88);
  --control-glass-text-muted: rgba(var(--darkTheme), 0.58);
  --control-glass-separator: rgba(var(--darkTheme), 0.35);
  --control-glass-hover: rgba(var(--darkTheme), 0.10);

  /* ── Map element shadow ────────────────────────────────────────────────── */
  --map-element-shadow: 0 2px 8px rgba(var(--blackRGB), 0.18), 0 1px 3px rgba(var(--blackRGB), 0.10);

  /* ── Consolidated glass panel tokens ───────────────────────────────────── */
  --glass-panel-bg: rgba(var(--lightTheme), 0.08);
  --glass-panel-blur: 16px;
  --glass-panel-shadow: 0 12px 40px rgba(var(--blackRGB), 0.28), 0 4px 12px rgba(var(--blackRGB), 0.15);
  --glass-panel-border: 1px solid rgba(100, 100, 100, 0.5);
  --glass-panel-radius: var(--bigcorner);
  --glass-panel-edge: inset 0 1px 0 rgba(255,255,255,0.08);
  --glass-button-bg: rgba(var(--blackRGB), 0.05);
  --glass-button-hover-bg: rgba(var(--blackRGB), 0.1);
  --glass-button-blur: var(--glass-panel-blur);
  --panel-form-pad-x: 22px;
  --panel-form-pad-y: 18px;

  /* ── Tree circle color ──────────────────────────────────────────────────── */
  --tree-circle:     #333333;
}

body.tile-dark {
  /* ── Single-point flip: everything referencing these tokens adapts automatically ── */
  --theme-fg:              var(--lightTheme);
  --theme-highlight:       var(--highlight-border-color-dark);
  --segment-vertex-color:  var(--edit-border-color-dark);
  --tree-circle:           rgb(var(--lightTheme));
  color:                   rgb(var(--lightTheme));
  /* glass control tokens */
  --glass-button-bg:       rgba(var(--lightTheme), 0.12);
  --glass-button-hover-bg: rgba(var(--lightTheme), 0.22);
  --control-glass-border:  rgba(var(--lightTheme), 0.14);
  --control-glass-text:       rgba(var(--lightTheme), 0.92);
  --control-glass-text-muted: rgba(var(--lightTheme), 0.46);
  --control-glass-separator:  rgba(var(--lightTheme), 0.16);
  --control-glass-hover:      rgba(var(--lightTheme), 0.10);
  --chart-text:               rgb(255, 255, 255);
  --chart-grid:               rgba(255, 255, 255, 0.18);
}

/* Shared glow for all glass panels — comment out --panel-glow above to remove */
.auth-forms,
#point-info-panel,
.intro-sheet,
#dash-sheet,
.layover-frame {
  box-shadow: var(--panel-glow), var(--map-element-shadow) !important;
}

html {
  background: transparent;
  font-size: calc(16px * var(--font-scale));
}

.prose {
  color: var(--darkergrey);
  font-weight: 300;
  text-align: left;
  margin: 20px;}
.prose :is(h1,h2,h3,h4,h5,h6) {
  color: var(--darkcolor);
  text-align: center;
  font-weight: 700;}

body {
    font-family: Montserrat, Jost, Arial, sans-serif;
    font-size: 1rem;
    background-color: #1a1a12;
    background-image: url('/static/logo/tribal_smaller.jpg');
    background-size: 272px 370px;
    background-repeat: repeat;
    background-attachment: fixed;
    color: var(--darkergrey);
    text-align: center;
    font-weight: 300;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    height: 100vh;}

a {text-decoration: none;}
b, strong {font-weight: 400;}
h1 {color: var(--darkcolor); font-weight: 600; font-size: 2rem;}
h2 {color: var(--darkcolor); font-weight: 500; font-size: 1.5rem;}
h3 {color: var(--darkcolor); font-weight: 400; font-size: 1.25rem;}
h4 {font-size: 1.1rem;}
h5 {font-size: 1rem;}
h6 {font-size: 0.9rem;}

/* ── UTILITY CLASSES ─────────────────────────────────────────────────────── */

/* Display utilities */
.hidden { display: none !important; }
.visible { display: block !important; }
.inline-block { display: inline-block !important; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; }
.flex-gap-6 { gap: 6px; }
.flex-gap-10 { gap: 10px; }
.flex-gap-12 { gap: 12px; }
.flex-1 { flex: 1; }
.justify-end { justify-content: flex-end; }

/* Grid utilities */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; }
.grid-2col-16 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 10px; }
.grid-auto { display: grid; gap: 10px; }

/* Additional flex utilities */
.flex-gap-4 { gap: 4px; }

/* Sizing utilities */
.w-100 { width: 100%; }
.max-w-100 { max-width: 100%; }
.min-w-36 { min-width: 36px; }

/* Spacing utilities */
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.pt-10 { padding-top: 10px; }
.p-10 { padding: 10px; }
.ml-auto { margin-left: auto; }

/* Text color utilities */
.text-success { color: #388e3c; }
.text-error { color: var(--red); }
.text-default { color: inherit; }
.text-italic { font-style: italic; }

/* Background utilities */
.bg-transparent { background: transparent !important; }
.bg-image-dark { background: var(--image-bg); }

/* Image utilities */
.img-pixelated {
  width: 100%;
  image-rendering: pixelated;
  border-radius: 6px;
  background: transparent;
  display: block;
  transition: opacity 0.15s ease;
}

.img-dark {
  width: 100%;
  border-radius: 6px;
  background: transparent;
  display: block;
}

/* Treecycle icon utilities */
.phase-icon {
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 3px;
  display: inline-block;
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.phase-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 3px;
}

.cycle-svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.legend-name {
  font-size: var(--legend-text-size, 10px);
}

/* SVG visualization styling */
.svg-result-viz {
  width: 100%;
  border-radius: 6px;
  background: transparent;
  display: block;
  margin-top: 10px;
}

/* Point overlay panel sizing and positioning */


/* Paywall button states */
.paywall-btn.disabled-btn {
  background: var(--darkgrey);
}

/* Position utilities */
.pos-relative { position: relative; }
.pos-absolute { position: absolute; top: 0; left: 0; width: 100%; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer; }
.cursor-grabbing { cursor: grabbing; }

/* CAR property legend colors */
.car-color-iru { background-color: var(--car-iru); }
.car-color-ast { background-color: var(--car-ast); }
.car-color-pct { background-color: var(--car-pct); }
.car-color-other { background-color: var(--car-other); }

.car-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── MapBiomas nested legend ── */
.mb-legend { display: flex; flex-direction: column; gap: 2px; }


.mb-group {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.18);
  background: var(--glass-panel-bg, #fff);
  margin-top: 0.35rem;
  transition: box-shadow 0.18s;
}
.mb-group[open] {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 4px 24px rgba(0,0,0,0.22);
}
.mb-group + .mb-group { margin-top: 2px; }
.mb-group-sub { margin: 2px 6px 6px 6px; }

.mb-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  cursor: pointer;
  list-style: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  user-select: none;
  font-size: 1.1em;
  font-weight: 600;
  box-shadow: none;
  position: relative;
  transition: background 0.15s;
}
.mb-group-header::-webkit-details-marker { display: none; }
.mb-group-header:hover {
  background: rgba(var(--theme-fg), 0.09);
}
.mb-group-info-btn {
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  font-size: 0.8125rem !important;
}

.opacity-ring {
  position: absolute;
  top: 0;
  left: 0;
  /* Sized a bit under .btn-info's own 1.615rem box — the ring's stroke is
     centered on its path (not inset), so its outer edge always overshoots
     the nominal box by ~half the stroke width regardless of size; on this
     smaller button that overshoot read as the ring being too big. Still
     rem-based, so it scales with --font-scale like the button does. */
  width: 1.45rem;
  height: 1.45rem;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.18s;
}
.mb-group-info-btn:hover .opacity-ring { opacity: 1; }
.mb-group-info-btn.opacity-dragging .opacity-ring { opacity: 1; transition: none; }


.mb-group-arrow {
  font-size: 1.1em;
  color: rgba(var(--theme-fg), 0.4);
  transition: color 0.12s, background 0.12s, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  border-radius: 4px;
  cursor: pointer;
}
.mb-group-header:hover .mb-group-arrow {
  color: rgba(var(--theme-fg), 0.65);
}
.mb-group-arrow:hover {
  color: rgba(var(--theme-fg), 0.9) !important;
}
.mb-group-arrow:active {
  color: rgba(var(--theme-fg), 1) !important;
}
.mb-group[open] > .mb-group-header .mb-group-arrow {
  transform: rotate(90deg);
}

.mb-group-label {
  font-size: 0.75rem;
  color: rgba(var(--theme-fg), 0.85);
  font-weight: 500;
  flex: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.12);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mb-group-header svg:not(.opacity-ring) {
  width: 1.3em;
  height: 1.3em;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor !important;
  stroke: currentColor !important;
  color: inherit;
  margin-right: 6px;
  opacity: 0.92;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.10));
}
.tree-sections-grid .mb-group-header svg:not(.opacity-ring) {
  width: 0.975em;
  height: 0.975em;
  opacity: 0.55;
}

/* ── Layer icon toggle button ─────────────────────────────────────────────── */
.layer-icon-btn {
  background: none;
  border: none;
  padding: 2px;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: inherit;
  position: relative;
  flex-shrink: 0;
  opacity: 0.6;
  transition: color 0.18s, opacity 0.18s;
}
.layer-icon-btn svg {
  margin-right: 0 !important;
  transition: filter 0.18s, fill 0.18s;
  fill: currentColor;
}
.layer-icon-btn:hover { opacity: 0.8; }

/* Has data but hidden — full brightness */
.layer-icon-btn.icon-ready        { opacity: 1; }
.layer-icon-btn.icon-ready:hover  { opacity: 0.82; }

/* Viewing — full opacity, then theme-specific color */
.layer-icon-btn.icon-active       { opacity: 1; }
.layer-icon-btn.icon-active:hover { opacity: 0.78; }

/* Dark theme: white icon → yellow + glow */
body.tile-dark .layer-icon-btn.icon-active {
  color: var(--status-warn);
}
body.tile-dark .layer-icon-btn.icon-active svg {
  filter: drop-shadow(0 0 6px rgba(var(--status-warn-rgb),0.9)) drop-shadow(0 1px 2px rgba(var(--blackRGB),0.2));
}

body:not(.tile-dark) .layer-icon-btn.icon-active {
  color: var(--highlight);
}
body:not(.tile-dark) .layer-icon-btn.icon-active svg {
  filter: drop-shadow(0 0 5px rgba(var(--highlight-rgb),0.6)) drop-shadow(0 1px 2px rgba(var(--blackRGB),0.15));
}

/* Body-level drag state: global cursor + no text selection */
body.opacity-drag-active,
body.opacity-drag-active * { cursor: crosshair !important; user-select: none !important; }

/* Loading pulse */
.layer-icon-btn.icon-loading {
  opacity: 0.5;
  animation: icon-pulse 0.9s ease-in-out infinite;
}
@keyframes icon-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

.mb-group-count {
  font-size: 0.625rem;
  color: rgba(var(--theme-fg), 0.35);
  font-variant-numeric: tabular-nums;
}

/* ── LULC legend (below chart) — transparent, no glow, normal-case bold titles ── */
.lulc-legend {
  margin-top: 10px;
}
.lulc-legend .mb-group {
  box-shadow: none !important;
  background: transparent;
}
.lulc-legend .mb-group[open] {
  box-shadow: none !important;
}
.lulc-legend .mb-group-header {
  padding: 5px 4px;
  background: transparent;
  font-size: 1em;
}
.lulc-legend .mb-group-header:hover {
  background: rgba(var(--theme-fg), 0.05);
}
.lulc-legend .mb-group-label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 0.6875rem;
  color: rgba(var(--theme-fg), 0.55);
}
.lulc-legend .mb-group-items {
  padding: 4px 8px 8px 16px;
}
.lulc-legend .mb-class-row {
  gap: 6px;
  padding: 2px 0;
}


.mb-group-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px 16px 16px;
  background: transparent;
  border-radius: 0 0 8px 8px;
}

.mb-class-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mb-class-row .result-meta { margin-bottom: 0; }

/* Container utilities */
.data-container-max { max-width: 100%; }
.img-container {
  position: relative;
  width: 100%;
}

.img-container img {
  width: 100%;
  image-rendering: pixelated;
  border-radius: 6px;
  background: transparent;
  display: block;
}

.img-container-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 6px;
}

/* Chart container */
.chart-container {
  width: 100%;
  height: 380px;
}

.header {
    background-color: var(--darkcolor);
    color: var(--whiteRGB);
    padding: 15px;
    font-size: 1.5rem;
    font-weight: 600;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    display: flex;
    z-index: 1000;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--map-element-shadow);}
.search-container {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 280px;
    margin-left: auto;
    margin-right: 8px;
    max-width: 500px;}

@keyframes search-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--status-warn-rgb), 0.5); }
  50%      { box-shadow: 0 0 12px 4px rgba(var(--status-warn-rgb), 0.85); }
}
.search-container.search-glow {
  border-radius: 10px;
  animation: search-glow-pulse 1s ease-in-out infinite;
}

#map-search-source {
  position: fixed;
  left: -9999px;
  top: -9999px;
  pointer-events: none;
}
.search-bar {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 300;
    background-color: rgb(var(--whiteRGB));
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px;
    min-width: 200px;
    text-align: left;
    pointer-events: auto;
    cursor: text;}
.search-bar:focus {
  border: 1px solid var(--highlight);
  outline: none;
  transition: border-color 0.2s ease-in-out;}
.search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--glass-panel-bg);
  backdrop-filter: blur(48px) saturate(1.8);
  -webkit-backdrop-filter: blur(48px) saturate(1.8);
  border: 1px solid var(--control-glass-border); border-top: none;
  border-radius: 0 0 10px 10px; max-height: 300px; overflow-y: auto;
  z-index: 999; display: none;
  box-shadow: var(--map-element-shadow); }
.search-dropdown.active { display: block; }
.search-result {
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--control-glass-separator);
  font-size: 0.75rem; font-weight: 300; color: var(--control-glass-text);
  display: block; text-align: left; }
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: rgba(var(--blackRGB), 0.08); }
.search-result-level { font-size: 0.625rem; color: var(--control-glass-text); font-weight: 300;
  display: inline-block; padding: 2px 6px; background: rgba(var(--blackRGB), 0.05);
  border-radius: 3px; margin-right: 8px; opacity: 0.55; }
.search-result-path { color: var(--control-glass-text); font-size: 0.6875rem; font-weight: 300; display: inline; }
.search-result-match { font-size: 0.625rem; color: var(--control-glass-text); opacity: 0.7;
  display: inline-block; margin-left: 8px; font-style: italic; }
::selection {
  color: rgba(var(--blackRGB));
  background-color: var(--highlight);
}
a {color: var(--darkgrey);}
a:hover { color: var(--darkcolor);}

.scrollable-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;}

main {height: 100%;}

/* ── Single mode: map-first UI ───────────────────────────────────────────── */
body.no-toolbar {
  --topbar-h: 0px;
}
.mini-launcher {
  position: fixed;
  right: 12px;
  top: 12px;
  z-index: 10060;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.mini-launcher.open {
  z-index: 200000 !important;
}

.mini-launcher.in-map-controls {
  position: relative;
  right: auto;
  top: auto;
  z-index: auto;
  align-items: flex-start;
}

.mini-launcher.in-map-controls.open {
  z-index: 200000 !important;
}

.mini-launcher-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: auto;
  right: 0;
  width: fit-content;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: var(--glass-panel-radius);
  border: var(--glass-panel-border);
  background: var(--glass-panel-bg);
  backdrop-filter: blur(var(--glass-panel-blur));
  -webkit-backdrop-filter: blur(var(--glass-panel-blur));
  box-shadow: var(--map-element-shadow);
}

.mini-launcher-groups-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.mini-launcher-view-column {
  display: flex;
  flex-direction: column;
}

.mini-launcher-data-column {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.mini-launcher-plan-column {
  display: none;
}
body.segment-edit-active.subparcel-edit-active .mini-launcher-plan-column {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  margin-left: 0.25rem;
  padding-left: 0.375rem;
  border-left: 1px solid rgba(var(--theme-fg), 0.12);
}
/* Plan/Reset Plan next to each other, at the top of the column. */
.mini-launcher-plan-controls-row {
  display: flex;
  flex-direction: row;
  gap: 0.3125rem;
}
.mini-launcher-view-group,
.mini-launcher-tools-group,
.mini-launcher-data-group,
.mini-launcher-assets-group,
.mini-launcher-plan-group {
  display: grid;
  grid-template-columns: 1.615rem 1.615rem;
  gap: 0.3125rem;
}


.mini-launcher-group-title {
  font-size: 0.5rem;
  font-weight: 300;
  color: rgba(var(--theme-fg), 0.45);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1.3;
  text-align: center;
  width: 3.5425rem;
  margin: 0;
}
/* Edit/Zoning's and Plan/Planning's titles are nested one level deeper
   than View/Sensing's (inside .mini-launcher-tools-group's own grid, and
   inside .mini-launcher-plan-column ahead of .mini-launcher-plan-controls-
   row, respectively) — align-self:start keeps them pinned flush to their
   container's own top edge rather than picking up any implicit grid/flex
   stretch alignment, so all four sit the same distance from the panel's
   top bar regardless of that extra nesting. */
.mini-launcher-group-title { align-self: start; }
/* Edit/Zoning's title lives inside .mini-launcher-tools-group itself (that
   group is server-rendered once, never innerHTML-replaced by JS, so
   nesting it there is safe) — span the full 2-column icon grid it's
   sitting above instead of being squeezed into the first 1.615rem cell. */
.mini-launcher-group-title--grid { grid-column: 1 / -1; width: auto; }
/* View's and Assets' titles are the two exceptions — .mini-launcher-view-
   column can't carry a blanket gap (see its own comment above), so these
   two supply the same 0.3125rem title-to-icon spacing themselves, matching
   what Zoning/Planning/Sensing get from their own container's gap. */
#mini-launcher-view-title,
#mini-launcher-assets-title {
  margin-bottom: 0.3125rem;
}
/* Assets/Data titles are separate siblings, not nested (their groups ARE
   innerHTML-replaced at runtime by AssetsToolbar.setAssets/DataToolbar.
   setLayers — a nested title would be wiped the first time either
   populates). Hidden by default, shown only when toolbar.js mirrors the
   group's own has-assets/has-layers state onto them — an empty group with
   an orphaned title floating above it would look broken. */
#mini-launcher-assets-title,
#mini-launcher-data-title {
  display: none;
}
#mini-launcher-assets-title.mini-launcher-group-title-visible,
#mini-launcher-data-title.mini-launcher-group-title-visible {
  display: block;
}

#mini-launcher-panel-bar {
  border-radius: var(--glass-panel-radius) var(--glass-panel-radius) 0 0;
  justify-content: flex-end;
  padding: 2px 2px 2px 4px;
  min-height: 13px;
}

#mini-launcher-panel-close {
  width: 0.85rem;
  height: 0.85rem;
  font-size: 0.75rem;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#mini-launcher-panel-close:hover {
  background: var(--glass-button-hover-bg);
}
.mini-launcher.in-map-controls .mini-launcher-panel {
  left: 0;
  right: auto;
}

.mini-launcher-tools-group,
.mini-launcher-data-group,
.mini-launcher-assets-group,
.mini-launcher-plan-group {
  display: none;
}
body.segment-edit-active .mini-launcher-tools-group,
.mini-launcher-data-group.has-layers {
  display: grid;
  margin-left: 0.25rem;
  padding-left: 0.375rem;
  border-left: 1px solid rgba(var(--theme-fg), 0.12);
}
/* No margin/border of its own — it's nested inside .mini-launcher-plan-column
   now (between the Plan/Reset Plan buttons that sandwich it), which already
   carries that same vertical-line separator as a whole. */
.mini-launcher-plan-group.has-plans {
  display: grid;
}
/* Stacked below .mini-launcher-view-group (same column) rather than a row
   sibling of its own — the vertical line that separates every other group
   from its neighbor becomes a horizontal one here, since what it's actually
   separated from (View) is now above it, not beside it. The column itself
   still gets that same vertical line from Data (its actual row neighbor). */
.mini-launcher-assets-group.has-assets {
  display: grid;
  margin-top: 0.25rem;
  padding-top: 0.375rem;
  border-top: 1px solid rgba(var(--theme-fg), 0.12);
}

/* These spans now hold a real inline <svg> (toolbar.js's _inlineIconsIn),
   not a CSS mask — matches how every other icon in the app already scales
   with --font-scale at any zoom level (see .mini-launcher-tools-group
   .btn-toggle svg below). */
.mini-launcher-data-group .data-layer-icon,
.mini-launcher-assets-group .asset-toolbar-icon,
.mini-launcher-plan-group .plan-toolbar-icon {
  width: 1.0925rem;
  height: 1.0925rem;
  display: inline-flex;
}
.mini-launcher-data-group .data-layer-icon svg,
.mini-launcher-assets-group .asset-toolbar-icon svg,
.mini-launcher-plan-group .plan-toolbar-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.mini-launcher-data-group .data-layer-icon svg path,
.mini-launcher-assets-group .asset-toolbar-icon svg path,
.mini-launcher-plan-group .plan-toolbar-icon svg path {
  fill: currentColor;
}
.mini-launcher-assets-group .asset-toolbar-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(var(--theme-fg), 0.35);
}
/* content/BUTTONS.json's "layer-spacer" entry — an invisible, non-
   interactive grid cell (same 32px×32px as a real .btn-toggle) used once
   to push "All Layers" onto its own row of the Data toolbar's 2-col grid. */
.mini-launcher-data-group .data-layer-spacer {
  width: 1.615rem;
  height: 1.615rem;
  display: block;
}
.mini-launcher-data-group .btn-toggle[aria-pressed="true"] .data-layer-icon,
.mini-launcher-assets-group .btn-toggle[aria-pressed="true"] .asset-toolbar-icon,
.mini-launcher-assets-group .btn-toggle[aria-pressed="true"] .asset-toolbar-dot {
  filter: drop-shadow(0 0 6px rgba(var(--status-warn-rgb),0.9)) drop-shadow(0 1px 2px rgba(var(--blackRGB),0.2));
}
.mini-launcher-data-group .btn-toggle.icon-loading .data-layer-icon,
.mini-launcher-assets-group .btn-toggle.icon-loading .asset-toolbar-icon,
.mini-launcher-assets-group .btn-toggle.icon-loading .asset-toolbar-dot {
  animation: data-layer-blink 0.9s ease-in-out infinite;
}
@keyframes data-layer-blink { 50% { opacity: 0.25; } }

.mini-launcher-panel .btn-toggle svg,
.mini-launcher-tools-group .btn-toggle svg {
  width: 1.0925rem;
  height: 1.0925rem;
  fill: currentColor;
}
.mini-launcher-panel .btn-toggle svg path,
.mini-launcher-tools-group .btn-toggle svg path {
  fill: currentColor;
}

.btn-toggle .btn-icon-on { display: none; }
.btn-toggle.has-icon-toggle[aria-pressed="true"] .btn-icon-off { display: none; }
.btn-toggle[aria-pressed="true"] .btn-icon-on { display: inline-flex; }

.mini-launcher-panel .btn-toggle[aria-pressed="true"],
.mini-launcher-panel .btn-toggle.active,
.mini-launcher-panel .btn-toggle.flash-highlight {
  background: var(--glass-button-hover-bg);
  color: var(--status-warn);
}
.mini-launcher-panel .btn-toggle[aria-pressed="true"] svg,
.mini-launcher-panel .btn-toggle.active svg,
.mini-launcher-panel .btn-toggle.flash-highlight svg {
  filter: drop-shadow(0 0 6px rgba(var(--status-warn-rgb),0.9)) drop-shadow(0 1px 2px rgba(var(--blackRGB),0.2));
}


.mini-launcher-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  color: rgb(var(--whiteRGB));
}

.mini-launcher-icon {
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
}

.mini-launcher-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}
.mini-launcher-icon svg path {
  fill: currentColor;
}

#map-controls-container.launcher-open {
  z-index: 200000 !important;
}

.mini-launcher-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--smallcorner);
  border: 0;
  color: var(--control-glass-text);
  font-size: 0.75rem;
   color: inherit !important;
   -webkit-text-fill-color: inherit !important;
}

.mini-launcher-link:hover {
  background: var(--glass-button-hover-bg);
  color: var(--control-glass-text);
}

.mini-launcher-link.active {
  background: var(--darkcolor);
  color: #fff;
}

.mini-font-controls {
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0;
  gap: 6px;
}

.map-search-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--glass-panel-bg) !important;
  backdrop-filter: blur(var(--glass-panel-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-panel-blur)) !important;
  border: 1px solid var(--control-glass-border) !important;
  box-shadow: var(--control-glass-shadow), var(--map-element-shadow) !important;
  font-family: Montserrat, Jost, Arial, sans-serif;
}

.map-search-control .mini-launcher {
  flex: 0 0 auto;
}

.map-search-control .search-container {
  margin: 0;
  min-width: min(320px, calc(100vw - 220px));
  max-width: min(420px, calc(100vw - 220px));
}

.map-search-control .search-icon {
  filter: none;
  opacity: 0.7;
}

.map-search-control .search-bar {
  background: transparent;
  border: none;
  color: var(--control-glass-text);
  min-width: 0;
  padding: 8px 0;
}

.map-search-control .search-bar::placeholder {
  color: var(--control-glass-text-muted);
}

.map-search-control .search-bar:focus {
  border: none;
  outline: none;
}

.map-search-control .search-dropdown {
  top: calc(100% + 8px);
  border: 1px solid var(--control-glass-border);
  border-radius: 12px;
}

.map-search-control .search-result,
.map-search-control .search-result-path,
.map-search-control .search-result-match,
.map-search-control .search-result-level {
  color: var(--control-glass-text);
  background: transparent;
}

.map-search-control .search-result:hover {
  background: rgba(var(--blackRGB), 0.08);
}

body.tile-dark .map-search-control .search-result:hover {
  background: rgba(var(--whiteRGB), 0.08);
}

.map-profile-btn {
  width: 2.375rem;
  height: 2.375rem;
  flex: 0 0 2.375rem;
  border-radius: 999px;
  border: 1px solid var(--control-glass-border);
  background: transparent;
  color: var(--control-glass-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

/* Profile.svg (toolbar.js's _insertProfileSvgIcon) — inlined rather than
   an <img> specifically so it can be recolored here; arrives with the
   same baked-in fill="#1f1f1f" every other inlined icon in this file
   needs overriding, descendant path rule needed for the same reason
   (see the .mini-launcher-panel .btn-toggle svg comment above). */
.map-profile-btn svg {
  width: 91.8%;
  height: 91.8%;
  fill: currentColor;
}
.map-profile-btn svg path {
  fill: currentColor;
}

.map-profile-btn:hover {
  background: var(--control-glass-hover);
  border-color: var(--control-glass-border);
}

.map-profile-btn:active {
  transform: scale(0.97);
}

.map-profile-overlay {
  position: absolute;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.18) 40%, rgba(0, 0, 0, 0.34) 100%);
  backdrop-filter: blur(var(--glass-panel-blur));
  -webkit-backdrop-filter: blur(var(--glass-panel-blur));
}

.map-profile-overlay.active {
  display: flex;
}

#map-profile-panel {
  position: absolute;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 40px));
  max-height: calc(100vh - 98px);
  overflow: hidden;
  pointer-events: auto;
  background: var(--glass-panel-bg);
  backdrop-filter: blur(var(--glass-panel-blur));
  -webkit-backdrop-filter: blur(var(--glass-panel-blur));
}

#map-profile-panel.Maximized {
  width: min(900px, calc(100vw - 40px));
  max-height: calc(100vh - 98px);
}

.map-profile-overlay-body {
  overflow-y: auto;
  max-height: calc(100vh - 150px);
  scrollbar-gutter: stable;
}

.map-profile-overlay-body .auth-forms {
  margin: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
  padding: var(--panel-form-pad-y) var(--panel-form-pad-x);
  background: var(--glass-panel-bg);
  backdrop-filter: blur(var(--glass-panel-blur));
  -webkit-backdrop-filter: blur(var(--glass-panel-blur));
}

@media (max-width: 768px) {
  #map-profile-panel {
    top: 58px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 70px);
  }
}


body.tile-dark .map-search-control .search-icon {
  filter: invert(1) brightness(2);
  opacity: 0.88;
}

body.tile-dark .map-profile-overlay {
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--darkTheme), 0.14) 0%, rgba(var(--darkTheme), 0.26) 40%, rgba(var(--darkTheme), 0.48) 100%);
}

/* Map */
/* ── Map containers ──────────────────────────────────────────────────────── */
#map { height: 100%; }

#map-mapbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9;
  background: #5a3a5c; /*#1a3a5c;*/
}

/* ── Globe toggle / back button ──────────────────────────────────────────── */
.globe-btn { font-size: 1rem; }
.grid-btn  { font-size: 0.9375rem; }
/* On-state color for these three now lives in the consolidated
   .mini-launcher-panel .btn-toggle[aria-pressed="true"] rule below —
   was three separate, fixed-color (#4a9) copies of the same rule. */

/* Back-to-flat button rendered inside the Mapbox container.
   z-index relative to #map-mapbox stacking context. */
#globe-back-btn {
  position: absolute;
  /* Bottom-right, not top-right — NavigationControl (zoom) now lives
     top-left same as Leaflet's own zoom control (see mapbox-core.js),
     which the panel-avoidance rules push to top-right by default; this
     button would sit directly on top of it there otherwise. */
  bottom: 12px;
  right: 12px;
  z-index: 5;
  background: rgba(20, 20, 20, 0.75);
  color: #eee;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  width: 1.7rem;
  height: 1.7rem;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.15s;
}
#globe-back-btn:hover { background: rgba(40,40,40,0.9); }

/* ── Mapbox tile switcher control ───────────────────────────────────────── */
.mb-tile-ctrl { position: relative; }
.mb-tile-ctrl button { width: 1.59rem; height: 1.59rem; font-size: 1rem; }
/* Glass look itself (background/border/box-shadow/border-radius) comes
   from the shared .leaflet-control-layers, .mb-tile-panel rule above —
   this is layout only. */
.mb-tile-panel {
  position: absolute;
  left: 36px;
  top: 0;
  padding: 6px 0;
  min-width: 180px;
}
.mb-tile-panel.hidden { display: none; }
.mb-tile-group {
  padding: 4px 12px 2px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
}

.mb-tile-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

/* Buttons — pill color/fill  */
.button {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    margin-top: 10px;
    align-self: center;
    width: fit-content;
    background-color: rgba(var(--theme-fg), 0.08);
    color: rgba(var(--theme-fg), 0.9);
    text-decoration: none;}
.button:hover {
    background-color: rgba(var(--theme-fg), 0.16);
    color: rgba(var(--theme-fg), 0.9)}
#login-form .button,
#registration-form .button,
#profile-view .button,
#profile-update-form .button,
#admin-queue .button {
    background-image: url('/static/logo/tribal_smaller.jpg');
    background-size: 272px 370px;
    background-position: center;
    background-color: transparent;
    color: rgb(var(--whiteRGB));
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#admin-queue .admin-deny-btn {
    background-image: url('/static/logo/tribal_smaller_red.jpg');
}
.search-icon {
    filter: invert(1) brightness(2);
    width: 1.375rem;
    height: 1.375rem;
    margin-right: 6px;
    flex-shrink: 0;}
#login-form .button:hover,
#registration-form .button:hover,
#profile-view .button:hover,
#profile-update-form .button:hover,
#admin-queue .button:hover {
    background-color: transparent;
    filter: brightness(1.15);}

#admin-queue .prop-row {
    padding: 8px 10px;
    border-radius: var(--smallcorner);
}
#admin-queue .prop-row:nth-child(odd)  { background: var(--lightgrey); }
#admin-queue .prop-row:nth-child(even) { background: var(--white); }

/* Main Content Area (Card Centered) */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}
.card {
    background: rgba(var(--whiteRGB), var(--trans)) !important;   
    border-radius: 15px;
    padding: 20px;
    max-width: calc(100% - 50px);
      width: min(90vw, 800px);
    margin: 0 auto;
    box-shadow: 2px 2px 10px rgba(var(--blackRGB), 0.1);
}
.project-title {
    color: var(--darkcolor);
    font-weight: bold;}
.label {
    color: var(--darkcolor);
    font-weight: 400;}
.content {
    font-weight: 200;
    color: var(--darkgrey);
    max-width: 800px;
    width: 100%;
    margin: 0 auto;}
.hidden-img {
  display: none;}
.gallery {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;}
.nav-btn {
    position: absolute;
    top: 8px;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-button-bg);
    color: var(--control-glass-text);
    border: none;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease-in-out;}
.nav-btn.left {
    left: 8px;}
.nav-btn.right {
    right: 8px;}
.nav-btn:hover {
    background: var(--glass-button-hover-bg);
}

/* The picker image (.segpick-img)  */
.segpick-gallery {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
}
.segpick-gallery img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}
.segpick-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-button-bg);
    color: var(--control-glass-text);
    border: none;
    border-radius: 50%;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}
.segpick-nav-btn.left  { left: 8px; }
.segpick-nav-btn.right { right: 8px; }
.segpick-nav-btn:hover { background: var(--glass-button-hover-bg); }
.segpick-nav-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
/* Drag-to-adjust-opacity ring drawn directly around the "next" nav button
   (segment-mode.js's _initPickerOpacityDrag) rather than a dedicated
   circular button of its own. Shown on plain hover (not gated on whether
   an overlay currently exists) — dragging with nothing to control is
   already a safe no-op (_applyPickerOpacity's own guard), and gating
   visibility added a second thing that had to go right for the ring to
   ever appear at all. */
.segpick-nav-btn.right .opacity-ring {
  opacity: 0;
  /* .segpick-nav-btn is 1.7rem — slightly bigger than .btn-info's 1.615rem
     the shared .opacity-ring base size matches — so it needs its own
     rem-based override to trace THIS button's true edge/center instead
     (still scales with --font-scale exactly like the base size does). */
  width: 1.7rem;
  height: 1.7rem;
}
.segpick-nav-btn.right:hover .opacity-ring,
.segpick-nav-btn.right.opacity-dragging .opacity-ring { opacity: 1; transition: none; }
.segpick-nav-btn.right.opacity-dragging { cursor: grabbing; }
/* Always-available (N+1)th gallery slide — a hand-drawn layout with no
   segmentation behind it, same dashed-placeholder language as the zone
   photo carousel's own "add a photo" slide (layers.html). */
.segpick-blank-slide {
    width: 200px;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    border: 2px dashed var(--control-glass-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: rgba(var(--theme-fg), 0.4);
}
.segpick-blank-slide .zone-photo-add-icon { font-size: 40px; }

/* Trailing "+ New Segmentation" carousel slide — unlike the plain <img>
   slides, this one holds real controls (dropdowns, sliders, Run button),
   so it needs its own width/scroll handling rather than .segpick-gallery
   img's max-width/max-height rules (those only target <img> elements). */
.segpick-create-slide {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    /* Left/right padding clears the absolutely-positioned prev/next nav
       buttons (each ~1.7rem wide, inset 8px from the edge) so the source/
       preset dropdown row and Parameters panel never sit underneath them. */
    padding: 10px 45px;
}
.segpick-create-inner {
    width: 100%;
    max-width: 420px;
}

/* Two-class selector, not just .segpick-label-thin alone — .result-meta
   (defined later in this file, same 0-1-0 specificity) was winning the
   font-weight cascade tie via source order and silently overriding this. */
.result-meta.segpick-label-thin {
    font-weight: 300;
    opacity: 0.7;
    /* <p>'s own browser-default top margin (~1em) was never reset — it's
       what pushed this down from the panel's top bar, not #point-info-body/
       .sp-panel-body's own (much smaller) padding. */
    margin-top: 0;
}

.thumbnail {
    width: calc(100% - 20px);
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    display: block;
    margin: 10px auto; }
.project-card {
    max-width: 320px;
    min-height: auto;
    background-color: rgb(var(--whiteRGB));
    width: calc(100% - 10px);
    justify-content: space-between;
    color: var(--darkgrey);
    padding: 5px;
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0px 5px 10px rgba(var(--blackRGB), 0);
    transition: 0.2s ease-in-out;}
.project-card img,
.gallery img {
    max-width: 1024px;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 10px;}
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    padding: 10px;
    min-height: 200px;}
.gallery {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;}
.project-card:hover {
    box-shadow: 0px 5px 20px rgba(var(--blackRGB), 0.15);
}
.project-info {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 10px;
    width: calc(100% - 20px);
    max-width: 100%;
    padding: 10px;
    background-color: rgba(var(--whiteRGB), var(--trans));
    border-radius: 0 0 10px 10px;}
.profile-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    max-width: 40px;
    max-height: 40px;}
.profile-avatar-wrap {
    text-align: center;
    margin-bottom: 18px; }
.profile-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--glass-button-bg);
    cursor: pointer;
    overflow: hidden;
    border: 2px solid var(--control-glass-border); }
.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; }
.profile-avatar-initials {
  width: 62%;
  height: 62%;
  object-fit: contain;
  user-select: none;
  pointer-events: none; }
.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.42);
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s; }
.profile-avatar:hover .profile-avatar-overlay { opacity: 1; }

.auth-forms h2.profile-greeting {
    font-size: 1em;
    font-style: italic;
    font-weight: 400;
    text-align: center;
    color: var(--control-glass-text);
    opacity: 0.65;
    margin: 0 0 20px 0;
    line-height: 1.45;
}
.profile-greeting::before { content: '"'; font-size: inherit; }
.profile-greeting::after { content: '"'; font-size: inherit; }
.admin-page-title {
    font-size: 1.4em;
    font-weight: 600;
    text-align: center;
    margin: 0 0 20px 0;
}
.profile-fullname {
    text-align: center;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--control-glass-text);
    margin: -8px 0 14px 0;
    letter-spacing: 0.01em;
}
#profile-view p {
    color: rgba(var(--theme-fg), 0.55);
}
#profile-view p strong {
    color: var(--control-glass-text);
    font-weight: 700;
}

#my-info-section {
    box-sizing: border-box;
    margin-top: 14px;
    border-radius: var(--smallcorner);
    overflow: hidden;
    background: rgba(var(--theme-fg), 0.05);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.18);
}
#my-info-section[open] {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 4px 24px rgba(0,0,0,0.22);
}
#my-info-section > .tools-drawer-summary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    transition: background 0.15s;
}
#my-info-section > .tools-drawer-summary > .crumb-arrow,
#my-sites-section > .tools-drawer-summary > .crumb-arrow {
    justify-self: start;
    font-size: 0.5rem;
}

#my-info-section > .tools-drawer-summary:hover,
#my-sites-section > .tools-drawer-summary:hover {
    background: rgba(var(--theme-fg), 0.09);
    border-radius: var(--smallcorner) var(--smallcorner) 0 0;
}
.my-info-title {
    justify-self: center;
}
.my-info-edit-toggles {
    display: flex;
    gap: 4px;
    justify-self: end;
}
#my-info-section:not([open]) .my-info-edit-toggles {
    display: none;
}
.profile-info-corner-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    fill: currentColor !important;
    stroke: currentColor !important;
}
.profile-info-box {
    padding: 10px 12px;
}

#my-sites-section,
#my-treecoins-section {
    margin-top: 18px;
}
#my-sites-section {
    box-sizing: border-box;
    border-radius: var(--smallcorner);
    overflow: hidden;
    background: rgba(var(--theme-fg), 0.05);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.18);
}
#my-sites-section[open] {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 4px 24px rgba(0,0,0,0.22);
}
#my-sites-section > .tools-drawer-summary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    transition: background 0.15s;
}
.my-sites-title {
    justify-self: center;
}
.my-sites-view-toggles {
    display: flex;
    gap: 0.1875rem;
    justify-self: end;
}
/* View-mode icons only make sense while the box is actually open. */
#my-sites-section:not([open]) .my-sites-view-toggles {
    display: none;
}
.my-sites-view-btn {
    width: 1.38rem;
    height: 1.38rem;
    font-size: 0.8125rem;
    opacity: 0.5;
}
.my-sites-view-btn.active {
    opacity: 1;
    background: var(--glass-button-hover-bg);
}
.my-sites-view-btn svg {
    width: 1.21em;
    height: 1.21em;
    fill: currentColor;
}
#my-sites-accordion {
    padding: 12px 12px 10px;
}

.my-sites-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
    gap: 12px;
}
.my-sites-thumb-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--smallcorner);
    overflow: hidden;
}
.my-sites-thumb-card[open] {
    background: rgba(var(--theme-fg), 0.04);
}

.my-sites-thumb-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(var(--theme-fg), 0.14);
    font-size: 0.875rem;
    color: rgb(var(--theme-fg));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.my-sites-thumb-label::-webkit-details-marker { display: none; }

.my-sites-thumb-label:hover {
    background-color: rgba(var(--theme-fg), 0.2);
}
.my-sites-thumb-label .crumb-arrow {
    flex-shrink: 0;
    font-size: 0.5rem;
}

.my-sites-thumb-flag {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1;
}

.my-sites-thumb-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.my-sites-thumb-card[open] > .my-sites-thumb-label .crumb-arrow {
    transform: rotate(90deg);
}
.my-sites-thumb-img-wrap {
    text-decoration: none;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.15s;
    background: rgba(var(--theme-fg), 0.03);
}

.my-sites-thumb-img-wrap:hover {
    background-color: rgba(var(--theme-fg), 0.1);
}
.my-sites-thumb-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}
.my-sites-thumb-img-wrap:hover img {
    transform: scale(1.06);
}

.my-sites-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
    gap: 12px;
}
.my-sites-gallery-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.my-sites-gallery-img-wrap {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--smallcorner);
    overflow: hidden;
    cursor: pointer;
    background: transparent;
}
.my-sites-gallery-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.2s ease;
}
.my-sites-gallery-card:hover .my-sites-gallery-img-wrap img {
    transform: scale(1.06);
}
.my-sites-gallery-caption {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 0 4px;
    font-size: 0.875rem;
    color: rgb(var(--theme-fg));
    text-align: left;
    transition: transform 0.2s ease;
    transform-origin: left center;
}
.my-sites-gallery-card:hover .my-sites-gallery-caption {
    transform: scale(1.04);
}

.my-sites-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}
.my-sites-carousel-img {
    max-width: 100%;
    max-height: 220px;
    border-radius: var(--smallcorner);
    display: block;
}
.my-sites-carousel-label {
    position: absolute;
    left: 0; right: 0; bottom: -20px;
    text-align: center;
    font-size: 0.6875rem;
    color: rgba(var(--theme-fg), 0.7);
}

/* "+ Add to My Sites" — the terminal card/slide in every My Sites view
   (toolbar.js's _renderAddToMySitesCard). Same dashed-border/centered-+/
   hover-color language as the zone-photo gallery's own "add a photo"
   slide (.zone-photo-add-slide) — reused here as its own class rather
   than that one directly, since .photo-dropzone's min-height:160px would
   break the thumb/gallery grids' aspect-ratio-driven row sizing; the
   list row and carousel slide (not grid-constrained) do reuse
   .photo-dropzone/.zone-photo-add-slide/.zone-photo-add-icon directly. */
.my-sites-add-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--control-glass-border);
    color: rgba(var(--theme-fg), 0.4);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.my-sites-add-slide:hover {
    border-color: rgba(var(--theme-fg), 0.9);
    background: rgba(var(--theme-fg), 0.08);
    color: rgba(var(--theme-fg), 1);
}
.my-sites-add-row {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: rgba(var(--theme-fg), 0.55);
    transition: color 0.15s;
}
.my-sites-add-row:hover { color: rgba(var(--theme-fg), 1); }
.my-sites-add-row .zone-photo-add-icon { font-size: 1rem; }

.my-sites-display-name {
    display: block;
    font-weight: 600;
    font-size: 0.75rem;
    color: rgb(var(--theme-fg));
}

.my-sites-flag {
    margin-right: 4px;
}
.my-treecoins-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--control-glass-text);
    padding: 4px 12px 8px;
}
.my-sites-accordion {
    display: flex;
    flex-direction: column;
}
.my-sites-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.my-sites-delete {
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.45;
    font-size: 0.75rem;
    line-height: 1;
    color: rgb(var(--theme-fg));
    transition: opacity 0.15s, color 0.15s;
}
.my-sites-delete:hover {
    opacity: 1;
    color: #c00; /* matches .error-msg's existing error-red convention */
}
.my-sites-confirm-text {
    flex: 1;
    min-width: 0;
    font-size: 0.6875rem;
    font-weight: 300;
    color: rgba(var(--theme-fg), 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.my-sites-confirm-yes,
.my-sites-confirm-no {
    flex-shrink: 0;
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--smallcorner);
    transition: background 0.15s, color 0.15s;
}
.my-sites-confirm-yes { color: #c00; }
.my-sites-confirm-no  { color: rgba(var(--theme-fg), 0.6); }
.my-sites-confirm-yes:hover,
.my-sites-confirm-no:hover { background: rgba(var(--theme-fg), 0.08); }
#my-sites-section .my-sites-breadcrumb {
    display: block;
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    font-size: 0.6875rem;
    font-weight: 300;
    color: rgb(var(--theme-fg));
    line-height: 1.3;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.15s;
}
#my-sites-section .my-sites-breadcrumb:hover {
    opacity: 0.7;
}

/* Photo upload modal */
.photo-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center; }
.photo-modal {
    background: var(--glass-panel-bg);
    backdrop-filter: blur(var(--glass-panel-blur));
    -webkit-backdrop-filter: blur(var(--glass-panel-blur));
    border: 1px solid var(--control-glass-border);
    border-radius: 18px;
    padding: 28px 28px 20px;
    width: min(420px, 92vw);
    color: var(--control-glass-text); }
.photo-modal-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 16px;
    text-align: center;
    color: var(--control-glass-text); }
.photo-dropzone {
    border: 2px dashed var(--control-glass-border);
    border-radius: 12px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    overflow: hidden; }
.photo-dropzone.drag-over {
    border-color: rgba(var(--theme-fg), 0.9);
    background: rgba(var(--theme-fg), 0.08); }

.zone-photo-add-slide {
    width: 100%;
    color: rgba(var(--theme-fg), 0.4);
    transition: border-color 0.18s, background 0.18s, color 0.18s; }
.zone-photo-add-slide:hover {
    border-color: rgba(var(--theme-fg), 0.9);
    background: rgba(var(--theme-fg), 0.08);
    color: rgba(var(--theme-fg), 1); }
.zone-photo-add-icon {
    font-size: 48px;
    font-weight: 200;
    line-height: 1; }

/* Wrapper for one photos-carousel slide (html/layers.html) — same
   full-width sizing a bare <img class="gallery-img"> got implicitly
   before (from the .gallery img descendant selector below, which still
   matches the <img> now nested one level deeper inside this div); needed
   explicitly since this div itself carries no visual rule of its own
   otherwise. position:relative anchors .gallery-caption (parcel-level
   aggregate view only — a subparcel's own photos never get one, single
   folder = no ambiguity about whose photo it is). */
.gallery-img {
    position: relative;
    width: 100%; }
.gallery-caption {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: fit-content;
    max-width: calc(100% - 20px);
    margin: 0 auto;
    padding: 3px 10px;
    border-radius: var(--smallcorner);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none; }
.photo-drop-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px; }
.photo-drop-text {
    font-size: 0.85rem;
    color: var(--control-glass-text); }
.photo-drop-or {
    font-size: 0.75rem;
    color: var(--control-glass-text);
    opacity: 0.55; }
.photo-preview-img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 10px; }
.photo-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px; }
.photo-modal-actions .button:first-child {
    margin-right: auto; }
.text-info {
    display: flex;
    flex-direction: column;
    text-align: left;}
.text-info strong {
    font-size: 1rem;}
.text-info span {
    font-size: 0.875rem;
    color: var(--darkgrey);}

/* Form */
.auth-forms {
    padding: 30px;
    max-width: 600px;
    margin: 30px auto;
    text-align: left;
    color: var(--control-glass-text);
  position: relative;
}

.auth-gate-card {
  padding-top: 56px;
}

.auth-gate-card .auth-gate-logo-link {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.auth-gate-card .auth-gate-logo {
  width: 32px;
  height: auto;
  display: block;
  opacity: 0.92;
}

#admin-requests-page .auth-forms {
    background: var(--white);
    color: var(--black);
    border-radius: var(--smallcorner);
    box-sizing: border-box;
    max-width: none;
    width: calc(100% - 100px);
    margin: 30px 50px;
}
#admin-requests-page .auth-forms h2 {
    color: var(--black);
}
.auth-forms h2 {
    font-size: 1.5em;
    margin: 0 0 8px 0;
    text-align: center;
    color: var(--control-glass-text);
}
.auth-forms label,
.auth-forms p,
.auth-forms .terms-checkbox-container label { color: var(--control-glass-text); }
.auth-forms label,
.auth-forms p,
.auth-forms a,
.auth-forms input,
.auth-forms select,
.auth-forms button {
  font-size: 0.8125rem;
}
.auth-forms form label { margin-bottom: -2px; }
.auth-forms a { color: var(--darkgrey); text-decoration: none; }
.auth-forms a:hover { color: var(--darkergrey); }
.auth-forms input,
.auth-forms select {
    background: transparent !important;
    color: var(--control-glass-text) !important;
    font-size: 0.8125rem !important;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 8px;
    padding: 12px;
    width: 100% !important;
    box-sizing: border-box;
    -webkit-text-fill-color: var(--control-glass-text) !important;
    transition: background-color 9999s, color 9999s !important; }
.auth-forms input[type="date"] {
    font-family: inherit; }
.auth-forms input:-webkit-autofill,
.auth-forms input:-webkit-autofill:hover,
.auth-forms input:-webkit-autofill:focus,
.auth-forms input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: var(--control-glass-text) !important;
    transition: background-color 9999s ease-in-out 0s !important; }
body.tile-dark .auth-forms input:-webkit-autofill,
body.tile-dark .auth-forms input:-webkit-autofill:hover,
body.tile-dark .auth-forms input:-webkit-autofill:focus,
body.tile-dark .auth-forms input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(20, 20, 20, 0.7) inset !important;
    box-shadow: 0 0 0 1000px rgba(20, 20, 20, 0.7) inset !important; }
.auth-forms input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.6;
    cursor: pointer; }
body.tile-dark .auth-forms input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7; }
.auth-forms input:focus,
.auth-forms select:focus { border-color: var(--lightcolor); outline: none; }
.auth-forms input::placeholder { color: var(--control-glass-text-muted); }
.auth-forms .form-help {
  color: var(--control-glass-text-muted);
  margin-top: -4px;
}

.auth-forms select.is-placeholder,
.auth-forms select.is-placeholder option[value=""] {
  color: var(--control-glass-text-muted) !important;
  -webkit-text-fill-color: var(--control-glass-text-muted) !important;
}

.birthdate-field {
  position: relative;
  width: 100%;
}

.auth-forms .birthdate-text-input {
  padding-left: 42px;
}

.birthdate-inline-btn {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--control-glass-text-muted);
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.birthdate-inline-btn svg {
  width: 20px;
  height: 20px;
  display: block;
  color: inherit;
  fill: currentColor;
}

/* Standalone login gate page should be plain white and minimal.
   Scoped via body class so profile overlay styling remains unchanged. */
body.login-gate-page {
  background: #ffffff !important;
  background-image: none !important;
}
body.login-gate-page .mini-launcher {
  display: none !important;
}
body.login-gate-page .auth-gate-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.login-gate-page .auth-gate-logo {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}

/* Unauthenticated root landing: keep tribal page background, but make only
   the login panel solid white and non-blurry. */
body.landing-gate-page .auth-forms {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;}
form label {
    font-weight: bold;
    color: var(--darkcolor);
    margin-bottom: -10px; }
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="date"] {
    padding: 12px;
    border: 1px solid var(--lightgrey);
    border-radius: 8px;
    font-size: 1rem;
    width: calc(100% - 24px); 
    box-sizing: border-box; 
    transition: border-color 0.2s ease-in-out;}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="date"]:focus {
    border-color: var(--highlight);
    outline: none;}
form button:hover {
    background-color: var(--darkcolor);
    transform: translateY(-2px);}
form button:active {
    transform: translateY(0);}

.terms-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    padding: 20px;}

.terms-checkbox-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 4px;}
.terms-checkbox-container input[type="checkbox"] {
    flex-shrink: 0;
    width: auto !important;
    margin: 0;}
.terms-checkbox-container label {
    display: inline;
    font-weight: normal;
    margin-bottom: 0; }
.terms-checkbox-container a {
    text-decoration: none;}
.loginhere {
    text-decoration: none;}

/* Leaflet */
.leaflet-pane.leaflet-popup-pane .leaflet-popup-content-wrapper {
  background: rgba(var(--whiteRGB),var(--trans)) !important;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid rgba(var(--whiteRGB),0.22);
  box-shadow: 0 8px 24px rgba(var(--blackRGB),0.12) !important;
  border-radius: 12px !important;
  z-index: 10;}
.leaflet-pane.leaflet-popup-pane .leaflet-popup-tip{
  background: rgba(var(--whiteRGB),var(--trans)) !important;
  border: 1px solid rgba(var(--whiteRGB),0.22);
}
.leaflet-popup-content .person-card{
  background: transparent;
  border: 0;
  box-shadow: none;}
.leaflet-popup-pane   { z-index: 2000 !important; } 

.leaflet-tooltip {
    line-height: 1.2;
    padding: 0;}

.leaflet-tooltip-label {
    background: transparent !important;
    border: none !important;
    font-weight: 200 !important;
    box-shadow: none !important;
    padding: 0 !important; 
    background: rgba(var(--whiteRGB),var(--trans)) !important;
    backdrop-filter: blur(var(--blur)) !important; 
    -webkit-backdrop-filter: blur(var(--blur)) !important; 
    font-family: Montserrat, Jost, Arial, sans-serif;
    font-weight: normal;
    color: var(--blackRGB);
    pointer-events: none;}

/* Well above #seg-focus-mask's 850 (the edit-mode blur-outside-parcel
   overlay) — a hover tooltip must stay sharp and on top even when it
   sticks out past the parcel boundary into the blurred region, not get
   visually caught underneath it. */
.leaflet-tooltip-pane { z-index: 5000 !important; }
.leaflet-pane > svg path.leaflet-interactive,
.leaflet-pane > svg circle.leaflet-interactive {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 10;}
/* .mb-tile-panel/.mb-tile-item (mapbox-core.js's own tile-switcher flyout)
   share this exact glass declaration rather than a separate Mapbox-only
   rule — same control, different map library. */
.leaflet-control-layers, .mb-tile-panel {
  background: var(--glass-panel-bg) !important;
  backdrop-filter: blur(var(--glass-panel-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-panel-blur)) !important;
  border: 1px solid var(--control-glass-border) !important;
  box-shadow: var(--control-glass-shadow), var(--map-element-shadow) !important;
  font-family: Montserrat, Jost, Arial, sans-serif;
  border-radius: 12px !important;
  z-index: 10;}
.leaflet-control-layers-base, .leaflet-control-layers-overlays, .mb-tile-item {
  color: var(--control-glass-text);
  font-size: 0.625rem; }
.leaflet-control-layers-expanded {
  background: transparent;
  text-align: left;}
.leaflet-control-layers-expanded label {
  color: var(--control-glass-text);
  font-size: 0.625rem;}
.leaflet-control-layers-separator {
  border-top-color: var(--control-glass-separator) !important;
}
.leaflet-control-layers-toggle {
  background-color: var(--glass-panel-bg) !important;
  border-radius: 10px !important;
  box-shadow: var(--map-element-shadow) !important;
  /* Leaflet's own layers.png/layers-2x.png replaced by a theme-aware SVG
     (same currentColor-mask technique as .slideup-button-icon) — plain
     background-image can't recolor per-theme the way a masked shape can. */
  background-image: none !important;
  position: relative;
}
.leaflet-control-layers-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background-color: var(--control-glass-text);
  -webkit-mask-image: url('/static/icons/_unused/Tiles.svg');
  mask-image: url('/static/icons/_unused/Tiles.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.leaflet-bar, .mapboxgl-ctrl-group {
  box-shadow: var(--control-glass-shadow) !important;
  border-radius: 12px !important;
}
.leaflet-bar a, .mapboxgl-ctrl-group button {
  background-color: var(--control-glass-bg) !important;
  backdrop-filter: blur(var(--blur)) !important;
  -webkit-backdrop-filter: blur(var(--blur)) !important;
  color: var(--control-glass-text) !important;
  border: 1px solid var(--control-glass-border) !important;
  border-bottom-color: var(--control-glass-separator) !important;
}
.leaflet-bar a:hover, .mapboxgl-ctrl-group button:hover, .mb-tile-item:hover {
  background-color: var(--control-glass-hover) !important;
}
.leaflet-bar a.leaflet-disabled {
  color: var(--control-glass-text-muted) !important;
}
.leaflet-control-scale-line {
  background: var(--glass-panel-bg) !important;
  backdrop-filter: blur(var(--glass-panel-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-panel-blur)) !important;
  border-color: var(--control-glass-border) !important;
  color: var(--control-glass-text) !important;
  text-shadow: none !important;
  box-shadow: var(--map-element-shadow) !important;
}


/* Mobile */
@media (max-width: 768px) {
    .header {
        padding: 10px;
        font-size: 1.25rem;}
    .search-bar {
        font-size: 1rem;}
    .profile-container {
        padding: 10px;
        margin-top: 60px; }
    .auth-forms {
        padding: 20px;
        margin: 20px auto;
        border-radius: 10px; }
    form input[type="text"],
    form input[type="email"],
    form input[type="password"],
    form input[type="date"] {
        padding: 10px;
        font-size: 0.875rem;}
    form button {
        padding: 10px 20px;
        font-size: 1rem;}
    .auth-forms h2 {
        font-size: 1.8em;}
    }

/* Desktop */
@media (min-width: 769px) {
    :root { --topbar-h: 56px; }
    .header {
        padding: 15px;
        font-size: 24px;
      flex-direction: row;
          justify-content: flex-start; }
     .header .search-bar {
          width: auto;
          max-width: none; }
    .search-bar {
        max-width: 400px; }
}

#registration-message,
#login-message,
#profile-message {
    margin-top: 15px;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;}
hr {
    border: none;
    border-top: 1px solid var(--lightcolor);
    margin: 40px 0;}

/* Point markers */
.leaflet-point-circle { pointer-events: all; }
path.leaflet-point-circle,
circle.leaflet-point-circle {
  transition: d var(--map-point-hover-anim) ease, fill var(--map-point-hover-anim) ease, stroke var(--map-point-hover-anim) ease, stroke-width var(--map-point-hover-anim) ease, opacity var(--map-point-hover-anim) ease;
}

/* ── Point overlay ───────────────────────────────────────────────────────── */
#point-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
  /* Above #map-controls-container.launcher-open's 200000 !important — this
     panel (openInfoPanel, e.g. "New zone") must sit above the toolbar even
     when its panel is expanded, not underneath it. */
  z-index: 200001 !important;
  background: transparent;
  pointer-events: none;}
#point-overlay.active { display: block; }

/* Request-for-Design panel (segment-mode.js's _openDesignModal) — same
   full blur+block backdrop .map-profile-overlay uses behind the Profile
   panel, reusing the exact same --glass-panel-blur value. Toggled via JS
   only for this specific flow, not the #point-overlay default (every
   other openInfoPanel caller — "New Zone", delete confirmations, etc. —
   keeps the plain transparent/click-through backdrop above). */
#point-overlay.request-design-modal {
  background:
    radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.18) 40%, rgba(0, 0, 0, 0.34) 100%);
  backdrop-filter: blur(var(--glass-panel-blur));
  -webkit-backdrop-filter: blur(var(--glass-panel-blur));
  pointer-events: auto;
}

#point-info-panel,
.layover-frame,
.auth-forms,
#dash-sheet,
.intro-sheet {
  border-radius: var(--glass-panel-radius);
  background: var(--glass-panel-bg);
  backdrop-filter: blur(var(--glass-panel-blur));
  -webkit-backdrop-filter: blur(var(--glass-panel-blur));
  box-shadow: var(--glass-panel-shadow), var(--glass-panel-edge), var(--map-element-shadow);
  font-family: Montserrat, Jost, Arial, sans-serif;
  border: var(--glass-panel-border);
}

.layover-frame {
  border-bottom: 1px solid rgba(100, 100, 100, 0.5);
}

#point-info-panel {
  position: fixed;
  width: 500px;
  pointer-events: auto;
  overflow: hidden;
  border-bottom: none;
  /* default: centered in viewport */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Show bottom border only on desktop (wide screens) */
@media (min-width: 769px) {
  #point-info-panel {
    border-bottom: 1px solid rgba(100, 100, 100, 0.5);
  }
}
#point-info-panel.Maximized { width: max-content !important; max-width: min(94vw, 900px); }

.resize-grip {
  position: absolute;
  width: 18px; height: 18px;
  touch-action: none;
  z-index: 10005;
}
.resize-grip-br {
  bottom: 0; right: 0;
  cursor: se-resize;
  background: linear-gradient(135deg,
    transparent 40%,
    rgba(var(--blackRGB),0.15) 40%,
    rgba(var(--blackRGB),0.15) 55%,
    transparent 55%,
    transparent 65%,
    rgba(var(--blackRGB),0.15) 65%,
    rgba(var(--blackRGB),0.15) 80%,
    transparent 80%
  );
}

@media (max-width: 540px) {
  #point-info-panel { width: calc(100vw - 24px) !important; }
}

/* ── Panel bar (drag handle + buttons) ──────────────────────────────────── */
.panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 6px 12px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  border-radius: var(--bigcorner) var(--bigcorner) 0 0;
  min-height: 40px;}
.panel-bar-label {
  font-size: 0.6875rem;
  color: rgba(var(--theme-fg), 0.9);
  opacity: 0.9;
  pointer-events: none;}
.panel-bar-label.label-highlight {
  color: var(--highlight-border-color-light) !important;}
body.tile-dark .panel-bar-label.label-highlight {
  color: var(--highlight-border-color-dark) !important;
}
.panel-bar-buttons {
  display: flex;
  gap: 0.1875rem;
  align-items: center;}

/* ── Overlay toggle + close buttons ─────────────────────────────────────── */
#point-info-panel #point-toggle-size {
  z-index: 10002;
  position: relative;
  border: 0;
  background: var(--glass-button-bg);
  color: rgb(var(--theme-fg));
  width: 1.7rem; height: 1.7rem;
  border-radius: var(--smallcorner);
  cursor: pointer;
  backdrop-filter: blur(var(--glass-button-blur));
  -webkit-backdrop-filter: blur(var(--glass-button-blur));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9375rem; line-height: 1;}
#point-info-panel #point-toggle-size:hover { background: var(--glass-button-hover-bg); }

/* Move close button inside bar (no longer absolute) */
#point-info-panel #point-close {
  position: relative !important;
  top: auto !important; right: auto !important;}

#map-profile-panel #map-profile-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
}

#map-profile-panel #map-profile-toggle-size {
  position: relative;
  font-size: 0.9375rem;
  line-height: 1;
}

#point-info-panel #point-toggle-size::before { content: '↗'; pointer-events: none; }
#point-info-panel.Maximized #point-toggle-size::before { content: '↙'; pointer-events: none; }
#map-profile-panel #map-profile-toggle-size::before { content: '↗'; pointer-events: none; }
#map-profile-panel.Maximized #map-profile-toggle-size::before { content: '↙'; pointer-events: none; }

/* Chart iframe */
#point-chart-frame {
  display: none;
  border: none;
  width: 100%;
  height: 380px;
  border-radius: 0 0 var(--bigcorner) var(--bigcorner);
}
#point-info-body {
  overflow-y: auto;
  padding: 10px 14px 12px;
  max-height: 340px;
  text-align: left;
}
#point-info-body .po-row {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(var(--theme-fg), 0.06);
  font-size: 0.8125rem;
  align-items: baseline;
}
@media (prefers-color-scheme: dark) {
  #point-info-body .po-row { border-bottom-color: rgba(255,255,255,0.07); }
}
#point-info-body .po-key {
  font-size: var(--layer-box-kv-key-size);
  font-weight: var(--layer-box-kv-key-weight);
  color: inherit;
  min-width: 100px;
  flex-shrink: 0;
  text-transform: capitalize;
  text-align: left;
}
#point-info-body .po-val {
  font-size: var(--layer-box-kv-value-size);
  font-weight: var(--layer-box-kv-value-weight);
  color: rgba(var(--theme-fg), 0.65);
  word-break: break-word;
}
#point-info-body .po-val a {
  color: #2a7d4f;
  text-decoration: underline;
  font-weight: 600;
}
#point-info-body .po-val a:hover { opacity: 0.75; }
@media (prefers-color-scheme: dark) {
  #point-info-body .po-val a { color: #5abf8a; }
}

.bird-internal-link {
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 0.7;
  margin-left: 3px;
  user-select: none;
}
.bird-internal-link:hover { opacity: 1; }

.bird-photo-wrap {
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
  background: rgba(0,0,0,0.05);
  border-radius: 6px;
  padding: 6px;
  min-height: 40px;
}
.bird-photo {
  max-width: 70%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 6px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.1);
}
.bird-photo-broken {
  min-width: 60px;
  min-height: 60px;
  background: rgba(0,0,0,0.08);
  border: 1px dashed rgba(0,0,0,0.3);
}
.bird-photo-url {
  font-size: 0.5625rem;
  opacity: 0.4;
  word-break: break-all;
  margin-top: 3px;
}

.point-category {
  margin: 0.4em 0;
  font-size: 1rem;}
.point-category strong {
  color: var(--darkergrey);
}
.point-botanical {
  color: var(--darkgrey);
  font-size: 0.85rem;
  margin: 0.2em 0 0.8em;}
.point-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;}
.point-table td {
  padding: 0.3em 0.5em;
  vertical-align: top;}
.point-table td:first-child {
  color: var(--darkgrey);
  width: 45%;}
.point-table a {
  color: var(--darkergrey);
  text-decoration: none;}
.point-table a:hover {
  text-decoration: underline;}

/* ── Slide-up panel (Desktop: left, Mobile: bottom) ─────────────────────── */

#dash-sheet {
  position: fixed;
  z-index: 10000;

  /* Desktop default: slide from left, full map height */
  inset: calc(var(--topbar-h) + var(--map-gap)) auto var(--map-gap) -100vw;
  height: auto;
  max-height: none;
  --sheet-max: 100vw;
  width: calc(var(--sheet-max) / 4);
  max-width: var(--sheet-max);
  transition: left 0.25s ease, width 0.15s ease;
  border-radius: 0 16px 16px 0;
}

#dash-sheet.open { left: 0; }

/* Mobile: slide from bottom */
@media (max-width: 768px) {
  #dash-sheet {
    inset: auto 0 -70vh 0;
    height: calc((100vh - var(--topbar-h) - var(--map-gap)) / 2);
    max-height: calc(100vh - var(--topbar-h) - var(--map-gap));
    --sheet-max: calc(100vh - var(--topbar-h) - var(--map-gap));
    width: auto;
    max-width: none;
    transition: bottom 0.25s ease, height 0.15s ease;
    border-radius: 16px 16px 0 0;
  }

  #dash-sheet.open { left: 0; bottom: 0; }
}

/* ── Small Buttons ───────────────────────────────────────────────────────── */

#dash-sheet #dash-close,
#dash-sheet #dash-minimize,
#dash-sheet #dash-maximize,
.intro-sheet #intro-close,
#point-info-panel #point-close,
#map-profile-panel #map-profile-close,
#map-profile-panel #map-profile-toggle-size,
.btn-info,
.btn-toggle,
.btn-cancel-spinner {
  border: 0;
  background: var(--glass-button-bg);
  font-size: 1.25rem;
  line-height: 1;
  width: 1.615rem;
  height: 1.615rem;
  /* Scaled by --font-scale like the button's own rem-based size above —
     otherwise the corner radius stays fixed while the button grows/shrinks
     around it, making it look proportionally less/more rounded. */
  border-radius: calc(var(--smallcorner) * var(--font-scale));
  cursor: pointer;
  backdrop-filter: blur(var(--glass-button-blur));
  -webkit-backdrop-filter: blur(var(--glass-button-blur));
  color: var(--control-glass-text);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  touch-action: manipulation;
}
#dash-sheet #dash-close,
#dash-sheet #dash-minimize,
#dash-sheet #dash-maximize,
.intro-sheet #intro-close,
#point-info-panel #point-close { z-index: 10002; position: absolute; }
#map-profile-panel #map-profile-close,
#map-profile-panel #map-profile-toggle-size { z-index: 10002; position: relative; }
.btn-info, .btn-toggle { position: static; z-index: auto; flex-shrink: 0; }
.btn-toggle:disabled { opacity: 0.35; cursor: default; }
.btn-toggle:disabled:hover { background: var(--glass-button-bg); }
/* Blur persists its on/off preference (toolbar.js's initBlurToggle) across
   edit sessions even while disabled (no active Land Studio session to
   control) — without this, .active/[aria-pressed] below would still win on
   specificity and show the "on" yellow glow on a button that currently
   does nothing. Neutral theme-aware dimming instead, same as any other
   disabled toggle. */
#blur-toggle:disabled,
#blur-toggle:disabled svg {
  color: var(--control-glass-text);
  filter: none;
}
#blur-toggle:disabled { background: var(--glass-button-bg); }
/* delete-toggle: same dimmed look as :disabled for "nothing selected yet",
   but never actually disabled — Shift+click (delete all unassigned) must
   keep working even then, and a real disabled attribute blocks all clicks. */
.btn-toggle.is-empty:not(:disabled) { opacity: 0.35; }
.btn-toggle.is-empty:not(:disabled):hover { background: var(--glass-button-bg); }
.btn-info {
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 300;
  width: 1.38rem;
  height: 1.38rem;
  padding: 0;
  box-sizing: border-box;
}
.btn-info.mb-group-info-btn { position: relative; }

/* Ensure buttons are always on top when maximized */
#dash-sheet.max #dash-close,
#dash-sheet.max #dash-minimize {
  z-index: 10003;
}

/* Close button always has highest z-index */
#dash-sheet #dash-close {
  z-index: 10004 !important;
}

/* Desktop: buttons stacked vertically at top-right — pitch is button
   height (1.7rem, see .btn-toggle) + a proportional 0.375rem gap, so this
   stack re-spaces itself the same way the buttons themselves resize with
   --font-scale, instead of a fixed-px stack that would start overlapping
   once the buttons grow past their old 40px pitch. */
#dash-sheet #dash-close        { top: 0.5rem;   right: 0.5rem; left: auto; }
#dash-sheet #dash-minimize     { top: 2.575rem; right: 0.5rem; left: auto; }
#dash-sheet #dash-maximize     { top: 4.65rem;  right: 0.5rem; left: auto; }
#dash-sheet #hansen-toggle-btn { top: 6.725rem; right: 0.5rem; left: auto; }
.intro-sheet #intro-close,
#point-info-panel #point-close {
  top: max(0.5rem, env(safe-area-inset-top));
  right: max(0.5rem, env(safe-area-inset-right));
}

/* Mobile: buttons at top-right (horizontal layout) — same 1.7rem + 0.375rem
   pitch as the desktop vertical stack above, just running sideways. */
@media (max-width: 768px) {
  #dash-sheet #dash-close,
  #dash-sheet #dash-minimize,
  #dash-sheet #dash-maximize {
    top: 0.5rem;
    left: auto;
  }
  #dash-sheet #dash-close        { right: 0.5rem;   }
  #dash-sheet #dash-minimize     { right: 2.575rem; }
  #dash-sheet #dash-maximize     { right: 4.65rem;  }
  #dash-sheet #hansen-toggle-btn { right: 6.725rem; top: 0.5rem; }
}

#dash-sheet #dash-close:hover,
#dash-sheet #dash-minimize:hover,
#dash-sheet #dash-maximize:hover,
.intro-sheet #intro-close:hover,
#point-info-panel #point-close:hover,
#map-profile-panel #map-profile-close:hover,
#map-profile-panel #map-profile-toggle-size:hover,
.btn-info:hover,
.btn-toggle:hover { background: var(--glass-button-hover-bg); }

#dash-sheet #dash-close:active::before,
#dash-sheet #dash-minimize:active::before,
#dash-sheet #dash-maximize:active::before {
  color: var(--lowlight);
}

/* ── Grip (drag handle) ──────────────────────────────────────────────────── */

/* Desktop: vertical grip on right edge */
#dash-sheet .sheet-grip {
  position: absolute;
  inset: 50% 8px auto auto;
  width: 28px;
  height: 120px;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: ew-resize;
  z-index: 10001;
  touch-action: none;
}

#dash-sheet .sheet-grip-handle {
  width: 8px;
  height: 80px;
  border-radius: 999px;
  background: rgba(var(--blackRGB),0.15);
}

/* Mobile: horizontal grip on top */
@media (max-width: 768px) {
  #dash-sheet .sheet-grip {
    top: 8px;
    left: 50%;
    right: auto;
    width: 120px;
    height: 28px;
    transform: translateX(-50%);
    cursor: ns-resize;
  }

  #dash-sheet .sheet-grip-handle {
    width: 80px;
    height: 8px;
  }
}

/* ── Panel content ───────────────────────────────────────────────────────── */

/* Desktop: account for grip on right */
#dash-sheet #dash-frame {
  position: absolute;
  inset: 48px 36px 0 0;
  width: calc(100% - 36px);
  height: calc(100% - 48px);
  border: 0;
  background: transparent !important;
  border-top-left-radius: 0;
  border-top-right-radius: 16px;
  overflow: hidden;
}

#dash-frame,
iframe#dash-frame {
  background: transparent !important;
}

/* Mobile: full width, account for grip on top */
@media (max-width: 768px) {
  #dash-sheet #dash-frame {
    inset: 48px 0 0 0;
    width: 100%;
    height: calc(100% - 48px);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
}

/* Desktop: minimized state */
#dash-sheet.min {
  width: 50px !important;
}

#dash-sheet.min #dash-frame { display: none; }
#dash-sheet.min .sheet-grip {
  height: 120px;
  width: 11px;
}

/* Hide minimize button when minimized */
#dash-sheet.min #dash-minimize { display: none; }

/* Move maximize button up when minimized (desktop) */
#dash-sheet.min #dash-maximize { top: 48px; }

/* Hide maximize button when maximized */
#dash-sheet.max #dash-maximize { display: none; }

/* Mobile: minimized state height */
@media (max-width: 768px) {
  #dash-sheet.min {
    height: 50px !important;
    width: 100% !important;
    min-width: 200px !important;
  }
  #dash-sheet.min .sheet-grip {
    width: 80px;
    height: 11px;
  }
  /* Move maximize button left when minimized (mobile) and keep it at top */
  #dash-sheet.min #dash-maximize {
    right: 48px;
    top: 8px !important;
  }
}

/* ── Nav bar (drag-to-reposition handle) ─────────────────────────────────── */
.sheet-nav-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
  transition: transform 0.1s ease;
}
/* ── Side bar (desktop left/right panels — drag to reposition) ────────────── */
#dash-sheet .sheet-side-bar {
  display: none;
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 48px;
  cursor: grab;
  z-index: 9999;
  touch-action: none;
  user-select: none;
  transition: transform 0.1s ease;
}
#dash-sheet .sheet-side-bar:active { cursor: grabbing; }

@media (min-width: 769px) {
  #dash-sheet:not(.sheet-bottom) .sheet-side-bar {
    display: block;
  }
  #dash-sheet.sheet-right .sheet-side-bar {
    right: auto;
    left: 0;
  }
}

/* ── Right-aligned panel (desktop) ──────────────────────────────────────── */
@media (min-width: 769px) {
  #dash-sheet.sheet-right {
    inset: calc(var(--topbar-h) + var(--map-gap)) -100vw var(--map-gap) auto;
    border-radius: 16px 0 0 16px;
    box-shadow: -8px 0 24px rgba(var(--blackRGB),0.15);
    transition: right 0.25s ease, width 0.15s ease;
  }
  #dash-sheet.sheet-right.open { right: 0; left: auto; }

  /* Grip on left edge */
  #dash-sheet.sheet-right .sheet-grip {
    inset: 50% auto auto 8px;
    cursor: ew-resize;
  }

  /* Frame: account for grip on left */
  #dash-sheet.sheet-right #dash-frame {
    inset: 48px 0 0 36px;
    width: calc(100% - 36px);
    border-top-left-radius: 16px;
    border-top-right-radius: 0;
  }

  /* Buttons on left side */
  #dash-sheet.sheet-right #dash-close        { left: 8px; right: auto; top: 8px; }
  #dash-sheet.sheet-right #dash-minimize     { left: 8px; right: auto; top: 48px; }
  #dash-sheet.sheet-right #dash-maximize     { left: 8px; right: auto; top: 88px; }
  #dash-sheet.sheet-right #hansen-toggle-btn { left: 8px; right: auto; top: 128px; }

  /* Minimized right */
  #dash-sheet.sheet-right.min #dash-maximize { left: 8px; right: auto; top: 48px; }

  /* Arrows: flipped for right panel */
  #dash-sheet.sheet-right #dash-minimize::before     { content: '▶'; }
  #dash-sheet.sheet-right.min #dash-minimize::before { content: '◀'; }
  #dash-sheet.sheet-right #dash-maximize::before     { content: '◀'; }
}

/* ── Bottom panel on desktop (drag-down mode) ────────────────────────────── */
@media (min-width: 769px) {
  #dash-sheet.sheet-bottom {
    inset: auto var(--map-gap) -100vh var(--map-gap);
    height: calc((100vh - var(--topbar-h) - var(--map-gap)) / 2);
    max-height: calc(100vh - var(--topbar-h) - var(--map-gap));
    --sheet-max: calc(100vh - var(--topbar-h) - var(--map-gap));
    width: auto !important;
    max-width: none;
    transition: bottom 0.25s ease, height 0.15s ease;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(var(--blackRGB),0.15);
  }
  #dash-sheet.sheet-bottom.open { bottom: 0; }

  /* Grip: horizontal on top, centered */
  #dash-sheet.sheet-bottom .sheet-grip {
    inset: 8px auto auto 50%;
    width: 120px; height: 28px;
    transform: translateX(-50%);
    cursor: ns-resize;
    right: auto;
  }
  #dash-sheet.sheet-bottom .sheet-grip-handle { width: 80px; height: 8px; }

  /* Buttons: horizontal at top-right */
  #dash-sheet.sheet-bottom #dash-close        { right: 8px;   top: 8px; left: auto; }
  #dash-sheet.sheet-bottom #dash-minimize     { right: 48px;  top: 8px; left: auto; }
  #dash-sheet.sheet-bottom #dash-maximize     { right: 88px;  top: 8px; left: auto; }
  #dash-sheet.sheet-bottom #hansen-toggle-btn { right: 128px; top: 8px; left: auto; }

  /* Frame: full width */
  #dash-sheet.sheet-bottom #dash-frame {
    inset: 48px 0 0 0;
    width: 100%;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  /* Arrows like mobile */
  #dash-sheet.sheet-bottom #dash-minimize::before     { content: '▼'; }
  #dash-sheet.sheet-bottom.min #dash-minimize::before { content: '▲'; }
  #dash-sheet.sheet-bottom #dash-maximize::before     { content: '▲'; }

  /* Minimized bottom on desktop */
  #dash-sheet.sheet-bottom.min {
    height: 50px !important;
    width: 100% !important;
  }
  #dash-sheet.sheet-bottom.min #dash-maximize { right: 48px; top: 8px; left: auto; }
}

/* ── Map controls: move away from the panel ─────────────────────────────── */

@media (min-width: 769px) {
  body:not(.sheet-open-right) .leaflet-top.leaflet-left,
  body:not(.sheet-open-right) .leaflet-bottom.leaflet-left,
  body:not(.sheet-open-right) .mapboxgl-ctrl-top-left {
    left: auto;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  body:not(.sheet-open-right) .mb-tile-panel {
    left: auto;
    right: 36px;
  }
  /* Sheet on right → push left controls back to their native top-left */
  body.sheet-open-right .leaflet-top.leaflet-left,
  body.sheet-open-right .leaflet-bottom.leaflet-left,
  body.sheet-open-right .mapboxgl-ctrl-top-left {
    left: 0;
    right: auto;
  }
  body.sheet-open-right .mb-tile-panel {
    left: 36px;
    right: auto;
  }
  /* Sheet on right → push right controls to top-left */
  body.sheet-open-right .leaflet-top.leaflet-right,
  body.sheet-open-right .leaflet-bottom.leaflet-right {
    right: auto;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  body:not(.sheet-open-right) .leaflet-top.leaflet-left .leaflet-control,
  body:not(.sheet-open-right) .leaflet-bottom.leaflet-left .leaflet-control,
  body:not(.sheet-open-right) .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
    margin-left: auto;
    margin-right: 0;
  }
}

#dash-sheet #dash-close::before,
#point-info-panel #point-close::before,
#map-profile-panel #map-profile-close::before {
  content: '×';
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  pointer-events: none;
}

/* Desktop: horizontal arrows for minimize and maximize */
#dash-sheet #dash-minimize::before {
  content: '◀';
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1;
  pointer-events: none;
}

#dash-sheet.min #dash-minimize::before {
  content: '▶';
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1;
  pointer-events: none;
}

#dash-sheet #dash-maximize::before {
  content: '▶';
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1;
  pointer-events: none;
}

/* Mobile: vertical arrows for minimize and maximize */
@media (max-width: 768px) {
  #dash-sheet #dash-minimize::before {content: '▼';}
  #dash-sheet.min #dash-minimize::before {content: '▲';}
  #dash-sheet #dash-maximize::before {content: '▲';}
}

#dash-sheet #hansen-toggle-btn::before {
  content: '◉';
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1;
  pointer-events: none;
}
#dash-sheet #hansen-toggle-btn.overlay-hidden::before {
  content: '◎';
}

/* ── Intro sheet ─────────────────────────────────────────────────────────── */

.intro-sheet {
  position: fixed;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 800px);
  height: 80vh;
  max-height: 90vh;
  z-index: 300000;
  overflow: hidden;
  box-shadow: var(--map-element-shadow);}
.intro-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent !important;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;}
.intro-nav-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  z-index: 10001;
  cursor: grab;
  user-select: none;
}
.intro-nav-logo {
  height: 2.25rem;
  width: auto;
  margin-left: 16px;
  margin-top: 0;
  opacity: 0.92;
  pointer-events: none;
}
@media (max-width: 768px) {
  .intro-nav-logo {
    height: 1.75rem;
    margin-left: 8px;
  }}

iframe.intro-frame {
  position: absolute;
  inset: 36px 0 0 0;
  border: 0;
  background: transparent !important;
  border-radius: 0 0 var(--bigcorner) var(--bigcorner);
  z-index: 0;}

.intro-sheet.open {
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 8px));}

@media (max-width: 768px) {
  .intro-sheet {
    width: min(97vw, 800px);
    height: min(90dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px));
    max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px));
  }
}

.intro-sheet #intro-close {
  z-index: 300002;
}

.intro-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent !important;
  border-radius: inherit;}

html.intro-embed { background: transparent !important; }
body.intro-embed {
  background: transparent !important;
  color: var(--control-glass-text);
}
body.intro-embed .intro-md,
body.intro-embed .intro-md :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, a) {
  color: inherit;
  font-size: 0.88em;
}
body.intro-embed .intro-md h1 {
  font-size: 1.3rem;
}
body.intro-embed .intro-md :is(h1, h2, h3, h4, h5, h6) {
  text-align: left;
}
body.intro-embed main { background: transparent !important; }
/* intro-embed.tile-dark color handled by --control-glass-text token flip in body.tile-dark */

html.dash-embed { background: transparent !important; }
body.dash-embed { background: transparent !important; color: rgb(var(--theme-fg)); }

/* Embedded panel content boxes — content-sized */
body.dash-embed .header       { display: none !important; }
body.dash-embed .card         { background: transparent !important; display: inline-block; width: auto; min-width: 200px; max-width: 520px; }
body.dash-embed .main-content { padding: 20px; }
body.dash-embed .data-container { background: transparent !important; }

/* ── Plotly charts ───────────────────────────────────────────────────────── */

#scattergramContainer {
  width: 100%;
  max-width: 900px;
  height: 600px;
  margin: 2rem auto;
  float: left;}

/* ── Cadastre / parcel report panels ─────────────────────────────────────── */

.data-container {
  background: #EEEEEE;
  padding: 20px;
  border-radius: 15px;
  display: inline-block;
  max-width: 560px;
  min-width: 240px;
  text-align: left;
  margin: 20px auto;}

.data-container .data-table {
  width: auto;}

.data-rows { margin-top: 0.75rem; }
.data-row {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--pill-sub); }
.data-row b { font-weight: 500; }
.data-row a { color: var(--darkcolor); text-decoration: none; }
.data-row a:hover { text-decoration: underline; }
.data-row.description { margin-top: 0.75rem; color: var(--darkgrey); font-style: italic; }

.description-box {
  background-color: transparent;
  border: 1px solid rgba(var(--blackRGB), 0.1);
  border-radius: var(--smallcorner);
  padding: 1.5rem;
  margin-bottom: 1.5rem;}

.description-box strong {
  color: var(--darkcolor);}

/* ── Remote sensing panel (remote.html) ─────────────────────────────────── */

body.dash-embed { padding: 28px 24px; align-items: flex-start; justify-content: flex-start; }

/* 3D terrain mount — full-bleed hero above breadcrumbs */
#terrain-3d-mount {
  margin: -28px -24px 20px;
  width: calc(100% + 48px);
}
/* strip the internal wrap's border-radius so it bleeds to the panel edge */
#terrain-3d-mount > div:first-child {
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

.remote-header {
  margin-bottom: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.remote-header-logo-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}


.remote-header-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: auto;
  opacity: 0.85;
  pointer-events: none;
  z-index: 10;
}

@media (max-width: 768px) {
  .remote-header-logo {
    width: 48px;
    top: 0;
    left: 0;
  }
}

.remote-header h2 {
  margin: 0 0 4px;
  font-size: 1.3rem;
  color: var(--theme-highlight);
  text-align: left;
  width: 100%;
}
.remote-header .level-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--theme-fg), 0.6);
  font-weight: 400;
  text-align: left;
  width: 100%;
}
.remote-breadcrumb {
  margin-top: 6px;
  width: 100%;
}

/* Collapsible breadcrumb — shares the MapBiomas details/summary pattern */
.crumb-details {
  list-style: none;
}
.crumb-details + .crumb-details,
.crumb-details > .crumb-details {
  padding-left: 10px;
}
.crumb-summary {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.crumb-summary::-webkit-details-marker { display: none; }
.crumb-arrow {
  font-size: 0.625rem;
  color: rgba(var(--theme-fg), 0.35);
  transition: transform 0.15s ease;
  display: inline-block;
  flex-shrink: 0;
  line-height: 1;
}
.tools-drawer-summary .crumb-arrow {
  font-size: 1.2em;
  opacity: 0.55;
}
.crumb-details[open] > .crumb-summary .crumb-arrow { transform: rotate(90deg); }
/* Country flag (app/routes.py's _flag_emoji) — first crumb only (loop.first
   in the Jinja loop above), fixed size like the arrow next to it. */
.crumb-flag {
  font-size: 0.6875rem;
  flex-shrink: 0;
  line-height: 1;
}
.crumb-text {
  font-size: 0.6875rem;
  color: rgba(var(--theme-fg), 0.55);
  line-height: 1.3;
  user-select: text;

  cursor: default;
}

.crumb-text--jumpable {
  cursor: pointer;
  user-select: none;
}
.crumb-text--jumpable:hover {
  color: rgba(var(--theme-fg), 0.9);
}
.crumb-reveal-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  margin: 0;
  line-height: 1;
  font-size: 0.6875rem;
  opacity: 0.45;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: rgb(var(--theme-fg));
}
.crumb-reveal-btn:hover { opacity: 0.9; }
.crumb-reveal-btn svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.remote-area {
  margin-top: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(var(--theme-fg), 0.9);
  text-align: left;
  width: 100%;
}
/* ── All tools collapsible drawer ── */
.tools-drawer {
  width: 100%;
}
.tools-drawer + .tools-drawer {
  margin-top: 9px;
}
.tools-drawer-summary {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(var(--theme-fg));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tools-drawer-summary::-webkit-details-marker { display: none; }
.tools-drawer-summary:hover { color: rgba(var(--theme-fg), 0.75); }
.tools-drawer[open] > .tools-drawer-summary .crumb-arrow { transform: rotate(90deg); }

.remote-buttons { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 0 6px; overflow: hidden; }

/* Single flex row: [i] [label] … [pills right-aligned] */
.remote-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  transition: opacity var(--tool-anim-dur, 47ms) ease var(--anim-delay, 0ms),
              transform var(--tool-anim-dur, 47ms) ease var(--anim-delay, 0ms);
}
.remote-btn-group.tool-hidden {
  opacity: 0;
  transform: translateY(-6px);
}
.remote-btn-group.tool-instant {
  transition: none !important;
}
.mb-group {
  transition: opacity var(--tool-anim-dur, 47ms) ease var(--anim-delay, 0ms),
              transform var(--tool-anim-dur, 47ms) ease var(--anim-delay, 0ms);
}
.mb-group.tool-hidden {
  opacity: 0;
  transform: translateY(-6px);
}
.mb-group.tool-instant {
  transition: none !important;
}

.prop-row { align-items: baseline; gap: 10px; }
.prop-key {
  flex: 0 0 auto;
  min-width: 120px;
  font-size: var(--layer-box-kv-key-size);
  font-weight: var(--layer-box-kv-key-weight);
  color: inherit;
  letter-spacing: 0;
  white-space: nowrap;
  padding-left: 12px;
  text-align: left;
}
.prop-val {
  flex: 1;
  font-size: var(--layer-box-kv-value-size);
  font-weight: var(--layer-box-kv-value-weight);
  color: inherit;
  opacity: 0.65;
  word-break: break-word;
  text-align: left;
}

.remote-btn-label {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(var(--theme-fg), 0.9);
  white-space: nowrap;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 5px;
}
.remote-btn-label svg {
  width: 1.67em;
  height: 1.67em;
  flex-shrink: 0;
  fill: rgba(var(--theme-fg), 0.8);
}

.geosam-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-left: auto;
}

.geosam-pill {
  width: auto;
  min-width: 48px;
  padding-left: 12px;
  padding-right: 12px;
}

/* i centered in its circle */
.btn-info {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.geosam-pills { display: flex; gap: 3px; flex-shrink: 0; }
.asset-pills-wrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.asset-summary {
  font-size: 0.5625rem; font-weight: 300;
  color: rgba(var(--theme-fg), 0.6);
  padding: 4px 2px 0; min-height: 1em;
  display: flex; align-items: center; gap: 5px;
}
.asset-summary-spinner {
  width: 9px; height: 9px; flex-shrink: 0;
  border: 1.5px solid rgba(var(--theme-fg), 0.25);
  border-top-color: rgba(var(--theme-fg), 0.75);
  border-radius: 50%;
  animation: asset-summary-spin 0.7s linear infinite;
}
@keyframes asset-summary-spin { to { transform: rotate(360deg); } }
.edit-note-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; font-size: 0.6875rem;
  border: 0; border-radius: var(--smallcorner);
  background-color: rgba(var(--theme-fg), 0.05);
  color: rgba(var(--theme-fg), 0.9);
  padding: 8px; margin-bottom: 6px;
}
.slideup-button,
.geosam-pill,
.unknown-upload-btn {
  display: inline-flex; align-items: center;
  gap: 7px;
  border: 0; border-radius: var(--smallcorner);
  background-color: rgba(var(--theme-fg), 0.05);
  color: rgba(var(--theme-fg), 0.9);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0 7px; height: 2rem; cursor: pointer;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  transition: background 0.15s, opacity 0.15s;
}

.asset-pill { font-size: 0.5625rem; font-weight: 400; }
.geosam-pill.active  {
  background-image: url('/static/logo/tribal_smaller.jpg');
  background-size: 272px 370px;
  background-position: center;
  background-color: var(--darkcolor);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.geosam-pill.done    { background: transparent; color: var(--darkcolor);
                       box-shadow: inset 0 0 0 1.5px var(--darkcolor); }
.geosam-pill { position: relative; overflow: hidden; }
.geosam-pill.loading { opacity: 1; pointer-events: none; }
.geosam-pill.loading::after {
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: pill-shine 1.1s linear infinite;
  pointer-events: none;
}
@keyframes pill-shine { to { left: 130%; } }
.slideup-button:hover,
.geosam-pill:hover:not(.active):not(.loading),
.unknown-upload-btn:hover { background-color: rgba(var(--theme-fg), 0.1); }

.slideup-button-icon {
  width: 1.4em;
  height: 1.4em;
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.slideup-button-icon.upload-tree-icon {
  -webkit-mask-image: url('/static/icons/upload_tree.svg');
  mask-image: url('/static/icons/upload_tree.svg');
}

.slideup-button-icon.upload-leaf-icon {
  -webkit-mask-image: url('/static/icons/upload_leave.svg');
  mask-image: url('/static/icons/upload_leave.svg');
}

.slideup-button-icon.upload-branch-icon {
  -webkit-mask-image: url('/static/icons/upload_branch.svg');
  mask-image: url('/static/icons/upload_branch.svg');
}

.slideup-button-icon.upload-extra-icon {
  -webkit-mask-image: url('/static/icons/upload_extra.svg');
  mask-image: url('/static/icons/upload_extra.svg');
}
.button.running { opacity: 0.6; pointer-events: none; }
.button.active { background-color: var(--darkcolor); }

/* pill spinner — shown inside the pill while it is in loading state */
.pill-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid transparent;
  opacity: 0;
  pointer-events: none;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.geosam-pill.loading .pill-spinner {
  opacity: 1;
  border-top-color:  var(--midcolor);
  border-left-color: var(--midcolor);
  animation: pill-spin 0.7s linear infinite;
}
@keyframes pill-spin { to { transform: rotate(360deg); } }

/* running spinner — single SVG infinity path drawn via stroke-dashoffset */
.status-msg { display: flex; align-items: center; gap: 12px; color: var(--pill-fg); font-size: calc(var(--pill-md) * 1.5); margin: 0; }
.status-msg-centered { justify-content: center; text-align: center; padding: 6px 0; }
.btn-cancel-spinner { position: static; z-index: auto; flex-shrink: 0; margin-left: 8px; }
.btn-cancel-spinner::before { content: '×'; font-size: 1.25rem; font-weight: 300; line-height: 1; pointer-events: none; }
.running-spinner { display: inline-block; flex-shrink: 0; vertical-align: middle; color: var(--midcolor); overflow: visible; }
.running-text { font-size: 1em; font-weight: 300; letter-spacing: 0.01em; color: var(--pill-sub); }
.running-dim  { color: var(--pill-dim); }
.rf-chart-label { display: flex; align-items: center; color: var(--pill-fg); }

/* shared tag/link chip — used in bird lists and action buttons */
.bird-tag,
.bird-link {
  font-size: 0.8125rem;
  font-weight: 300;
  background: rgba(255,255,255,0.5);
  border-radius: 5px;
  padding: 2px 7px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border: none;
}
.bird-tag:hover,
.bird-link:hover { opacity: 0.65; }

#remote-result { margin-top: 14px; width: 100%; }
#remote-result .data-container {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(var(--theme-fg), 0.10);
  border-radius: var(--smallcorner);
  box-sizing: border-box;
}
.result-table { width: 100%; border-collapse: collapse; font-size: var(--pill-md); margin-top: 8px; }
.result-table th { text-align: left; padding: 4px 8px; color: var(--pill-sub); font-weight: 400; border-bottom: 1px solid rgba(var(--theme-fg), 0.12); }
.result-table td { padding: 4px 8px; border-bottom: 1px solid rgba(var(--theme-fg), 0.08); color: var(--pill-sub); }
/* Pill result classes — all driven by --pill-* tokens above */
.pill-source  { font-size: var(--pill-sm); color: var(--pill-dim); margin-bottom: 6px; }
.pill-section { font-size: var(--pill-sm); color: var(--pill-sub); margin: 8px 0 4px; }
.pill-key     { font-size: var(--layer-box-kv-key-size);   font-weight: var(--layer-box-kv-key-weight);   color: inherit; }
.pill-val     { font-size: var(--layer-box-kv-value-size); font-weight: var(--layer-box-kv-value-weight); color: inherit; opacity: 0.65; text-align: right; }
.pill-heading { font-size: var(--pill-lg); color: inherit;  font-weight: 700; }

.result-meta { font-size: var(--layer-box-kv-key-size);   font-weight: var(--layer-box-kv-key-weight);   color: inherit;   margin-bottom: 6px; }
.result-note { font-size: var(--layer-box-kv-value-size); font-weight: var(--layer-box-kv-value-weight); color: inherit; opacity: 0.65; }

.layer-box-signature {
  display: block;
  text-align: right;
  font-size: var(--layer-box-signature-size);
  font-weight: var(--layer-box-signature-weight);
  color: inherit;
  opacity: 0.45;
  margin: 14px 0 2px;
}
.hansen-scrubber {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: rgba(var(--theme-fg), 0.28);
  outline: none;
  cursor: pointer;
}
.hansen-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(var(--theme-fg), 0.65);
  cursor: pointer;
  border: none;
  box-shadow: none;
}
.hansen-scrubber::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(var(--theme-fg), 0.65);
  cursor: pointer;
  border: none;
}
.hansen-scrubber::-moz-range-track {
  height: 2px;
  border-radius: 1px;
  background: rgba(var(--theme-fg), 0.28);
}
.hansen-scrubber::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 1px;
  background: rgba(var(--theme-fg), 0.28);
}
/* ── Unified swatch legend (LayerUI.swatchLegend) — one item per line ─────── */
.swatch-legend {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.6875rem;
  color: var(--pill-fg);
}
.swatch-legend-item { display: flex; align-items: center; gap: 5px; }
.swatch-legend-color {
  width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
  opacity: 0.85;
}
/* Legacy hansen-legend aliases — kept for backwards compat, point to unified */
.hansen-legend { display: flex; flex-direction: column; gap: 4px; font-size: 0.6875rem; color: var(--pill-fg); }
.hansen-legend-item { display: flex; align-items: center; gap: 5px; }
.hansen-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; opacity: 0.85; }
.hansen-loss-note {
  font-size: 0.55rem;
  font-weight: 300;
  margin-top: 8px;
}
/* ── Temporal layer standardized UI ─────────────────────────────────────── */
.temporal-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--smallcorner);
  background: rgba(var(--theme-fg), 0.06);
  flex-shrink: 0;
}
.temporal-tab-btn {
  padding: 4px 14px;
  border-radius: calc(var(--smallcorner) - 2px);
  border: none;
  background: transparent;
  color: rgba(var(--theme-fg), 0.5);
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}
.temporal-tab-btn.temporal-tab-active {
  background: rgba(var(--theme-fg), 0.18);
  color: rgba(var(--theme-fg), 0.92);
}
.temporal-tab-btn:hover:not(.temporal-tab-active) {
  color: rgba(var(--theme-fg), 0.75);
}
.temporal-viewer { margin-bottom: 10px; }

/* GeoSAM parameter knobs */
.sam-knob-row {
  display: grid;
  grid-template-columns: 130px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.sam-knob-label {
  font-size: 0.6875rem;
  color: var(--text-secondary, #aaa);
  white-space: nowrap;
}
.sam-slider {
  width: 100%;
  accent-color: rgba(var(--theme-fg), 0.5);
  cursor: pointer;
}
.sam-knob-val {
  font-size: 0.6875rem;
  color: var(--text-primary, #e0e0e0);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Raw Channels / Multi-channel picker */
.mc-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  color: var(--text-secondary, #aaa);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.mc-select {
  background: var(--bg-input, #1e1e1e);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-subtle, #333);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  cursor: pointer;
}
.mc-num-input {
  background: var(--bg-input, #1e1e1e);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-subtle, #333);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  width: 52px;
  text-align: center;
}
.mc-render-btn {
  background: var(--accent, #3a7ca5);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.15s;
}
.mc-render-btn:hover { opacity: 0.85; }
.temporal-stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  font-size: 0.6875rem;
  color: rgba(var(--theme-fg), 0.65);
  margin-top: 5px;
}
.temporal-stat-chips strong {
  color: rgba(var(--theme-fg), 0.9);
  font-weight: 600;
}

.topo-stats-details,
.layer-section {
  margin-top: 8px;
  background: transparent;
  border: none;
}
.topo-stats-summary,
.layer-section-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 2px 0;
  color: var(--pill-fg);
}
.topo-stats-summary::-webkit-details-marker,
.layer-section-summary::-webkit-details-marker { display: none; }
.topo-stats-details[open] > .topo-stats-summary .crumb-arrow,
.layer-section[open] > .layer-section-summary .crumb-arrow { transform: rotate(90deg); }
.topo-stats-summary .crumb-arrow,
.layer-section-summary .crumb-arrow { transition: transform 0.15s ease; }
.layer-section-body { padding: 6px 0 4px 14px; }
.layer-section-title {
  font-size: var(--layer-box-title-size);
  font-weight: var(--layer-box-title-weight);
  color: var(--pill-fg);
  margin: 0;
}

.soc-legend { width: 100%; }
.soc-legend-bar {
  height: 10px; border-radius: 4px; width: 100%;
  background: linear-gradient(to right, #f5e6b4, #a0522d, #2d1205);
}
.soc-legend-labels { display: flex; justify-content: space-between; margin-top: 3px; color: var(--pill-fg); }

/* ── UNEP aridity badge & scale ─────────────────────────────────────────── */
.unep-badge {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border: 1.5px solid;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
}
.unep-badge-zone {
  font-size: var(--pill-lg);
  font-weight: 700;
}
.unep-badge-ai {
  font-size: var(--pill-md);
  color: var(--pill-sub);
}
.unep-scale {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
  height: 6px;
}
.unep-zone {
  flex: 1;
  border-radius: 2px;
  font-size: 0;
  transition: opacity 0.2s;
}
.unep-zone-active {
  flex: 2;
  font-size: var(--pill-xs);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ── Temperature dumbbell chart ─────────────────────────────────────────── */
.temp-connector {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  background: rgba(var(--theme-fg), 0.15);
}
.temp-tick {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 6px;
  border-radius: 2px;
}
.temp-tick-hot  { background: var(--climate-temp-hot); }
.temp-tick-cold { background: var(--climate-temp-cold); }

.wind-arrow {
  color: var(--climate-wind);
  display: block;
}

/* ── Climate bar charts ──────────────────────────────────────────────────── */
.rf-chart-wrap {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
}
/* ── Annual bar/dumbbell chart — height proportional to width ──────────────── */
/* Outer wrapper establishes the aspect ratio via padding-bottom trick.        */
.rf-chart-annual-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 33.33%;   /* height = width ÷ 3 */
  margin-bottom: 2px;
}
/* Inner container fills the wrapper and is the flex chart surface.            */
.rf-chart-annual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.rf-chart-annual .rf-chart {
  height: 100%;
  align-items: flex-end;
}
.rf-chart-annual .rf-bar-col {
  height: 100%;
  justify-content: flex-end;
}
.rf-chart-annual .rf-yaxis {
  height: calc(100% - 14px);
  margin-bottom: 14px;
}
.rf-chart-annual .rf-bar {
  height: calc(var(--rf-bar-ratio, 0) * (100% - 14px));
  min-height: 2px;
}
/* Dumbbell area — fills column height minus label row */
.rf-dumbbell-area {
  position: relative;
  height: calc(100% - 14px);
  width: 100%;
  flex-shrink: 0;
}
.rf-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: calc(var(--rf-maxh, 44px) * var(--rf-bar-scale, 1));
  margin-bottom: 14px;
  min-width: 20px;
  flex-shrink: 0;
  font-size: var(--pill-xs);
  color: var(--pill-sub);
  line-height: 1;
}
.layer-section[open] .rf-chart-wrap { --rf-bar-scale: 1.8; }
.rf-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 1;
}
.rf-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 2px;
  font-size: var(--pill-xs);
  line-height: 1;
  text-align: center;
  color: var(--pill-fg);
  position: relative;
}
.rf-bar-col[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% - 14px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(var(--theme-fg), 0.8);
  font-size: var(--pill-xs);
  font-weight: 300;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  line-height: 1.3;
}
.rf-bar-pair {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  width: 100%;
}
.rf-bar-pair .rf-bar { flex: 1; }
.rf-bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  height: calc(var(--rf-bar-h, 2px) * var(--rf-bar-scale, 1));
  transition: opacity 0.15s;
}
.rf-bar:hover { opacity: 0.75; }
.rf-label { color: var(--pill-fg); }
.pill-chart-label { color: var(--pill-fg); }
.error-msg    { color: #c00; font-size: 0.875rem; margin: 0; }

/* ── Climate stripes ─────────────────────────────────────────────────────── */
.stripe-bar {
  display: flex;
  width: 100%;
  aspect-ratio: 5 / 1;
  border-radius: 3px;
  overflow: hidden;
}
.climate-gradient {
  background: linear-gradient(to right,
    #053061  0%,
    #2166ac 15%,
    #4393c3 30%,
    #92c5de 45%,
    #f7f7f7 50%,
    #f4a582 60%,
    #d6604d 75%,
    #b2182b 90%,
    #67001f 100%
  );
}

/* ── Pill mode buttons (Monthly / Annual / Clear-sky etc.) ───────────────── */
.btn-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid rgba(var(--theme-fg), 0.18);
  border-radius: var(--smallcorner);
  background: rgba(var(--theme-fg), 0.06);
  color: rgb(var(--theme-fg));
  font-size: var(--pill-xs);
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-tag:hover { background: rgba(var(--theme-fg), 0.12); }

/* ── Custom dropdown (DEM / source selectors) ────────────────────────────── */
.custom-dropdown {
  position: relative;
  display: inline-block;
}
.custom-dropdown-selected {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--theme-fg), 0.18);
  border-radius: var(--smallcorner);
  background: rgba(var(--theme-fg), 0.06);
  background: rgba(255,255,255,0.08);
  
  color: rgb(var(--theme-fg));
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.custom-dropdown-selected:hover { background: rgba(var(--theme-fg), 0.12); }
.custom-dropdown-list {
  display: none;
  position: absolute;
  z-index: 200;
  left: 0;
  top: calc(100% + 1px);
  max-height: 240px;
  overflow-y: auto;
  border-radius: var(--smallcorner);
  background: rgba(var(--lightTheme), 0.92);
  box-shadow: 0 4px 16px rgba(var(--blackRGB), 0.22);
  border: var(--glass-panel-border);
}
body.tile-dark .custom-dropdown-list {
  background: rgba(var(--darkTheme), 0.95);
}
.custom-dropdown-option {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  font-size: 0.875rem;
  color: rgb(var(--theme-fg));
  cursor: pointer;
  border-bottom: 1px solid rgba(var(--theme-fg), 0.07);
  white-space: nowrap;
  transition: background 0.1s;
}
.custom-dropdown-option:last-child { border-bottom: none; }
.custom-dropdown-option:hover,
.custom-dropdown-option.selected { background: rgba(var(--theme-fg), 0.1); }

/* ── Premium (SkySat) button ─────────────────────────────────────────────── */
.button-premium {
  flex: 1; margin-top: 0;
  padding: 12px 25px;
  border: none;
  border-radius: var(--smallcorner);
  font-size: 18px; font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  background-color: var(--highlight);
  color: #fff;
  letter-spacing: 0.01em;
}
.button-premium:hover  { background-color: var(--brownunsed1); }
.button-premium:active { opacity: 0.85; }

/* ── Paywall card ────────────────────────────────────────────────────────── */
.paywall-card {
  border-radius: var(--bigcorner);
  border: 1px solid rgba(209,146,67,0.35);
  padding: 18px 16px 16px;
  margin: 0;
  background: rgba(209,146,67,0.07);
}
.paywall-badge {
  display: inline-block;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--highlight); color: #fff;
  border-radius: 4px; padding: 2px 7px; margin-bottom: 10px;
}
.paywall-title { font-size: 1.05em; font-weight: 700; margin: 0 0 4px; color: rgba(var(--theme-fg), 0.95); }
.paywall-sub   { font-size: 0.75rem; color: rgba(var(--theme-fg), 0.72); margin: 0 0 12px; }
.paywall-features {
  list-style: none; margin: 0 0 14px; padding: 0;
  font-size: 0.8125rem; display: flex; flex-direction: column; gap: 4px;
  color: rgba(var(--theme-fg), 0.85);
}
.paywall-features li::before { content: '✓ '; color: var(--highlight); font-weight: 700; }
.paywall-price {
  font-size: 0.8125rem; color: rgba(var(--theme-fg), 0.72);
  margin-bottom: 14px; padding-top: 10px;
  border-top: 1px solid rgba(209,146,67,0.2);
}
.paywall-price strong { color: rgba(var(--theme-fg), 0.95); }
.paywall-btn {
  width: 100%; padding: 10px;
  border: none; border-radius: var(--smallcorner);
  background: var(--highlight); color: #fff;
  font-size: 0.875rem; font-weight: 600; cursor: pointer;
  transition: background-color 0.2s;
}
.paywall-btn:hover { background: var(--brownunsed1); }
.paywall-waitlist  { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(209,146,67,0.2); }
.paywall-waitlist-label { font-size: 0.75rem; color: rgba(var(--theme-fg), 0.72); margin-bottom: 6px; }
.paywall-waitlist-row   { display: flex; gap: 6px; }
.paywall-waitlist-input {
  flex: 1; padding: 8px 10px;
  border: 1px solid rgba(var(--theme-fg), 0.15); border-radius: var(--smallcorner);
  font-size: 0.8125rem; background: rgba(255,255,255,0.6);
  color: rgba(var(--theme-fg), 0.9);
  outline: none;
}
.paywall-waitlist-input:focus { border-color: var(--highlight); }
.paywall-waitlist-btn {
  padding: 8px 12px;
  border: none; border-radius: var(--smallcorner);
  background: rgba(var(--theme-fg), 0.08); color: rgba(var(--theme-fg), 0.85);
  font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.paywall-waitlist-btn:hover { background: rgba(var(--theme-fg), 0.15); }
.paywall-confirm { font-size: 0.75rem; color: rgba(var(--theme-fg), 0.72); margin-top: 8px; display: none; }

/* ── Tile-dark: panels are white, map controls flip to white ─────────────── */

/* Grip handle stays visible on white panel */
body.tile-dark #dash-sheet .sheet-grip-handle {
  background: rgba(var(--darkTheme), 0.18);
}

/* Panel/button/label colors now handled by token flips in body.tile-dark block above */


/* Point info: row border slightly stronger + link color flips on dark tiles */
body.tile-dark #point-info-body .po-row {
  border-bottom-color: rgba(var(--lightTheme), 0.10);
}
body.tile-dark #point-info-body .po-val a {
  color: #5abf8a;
}

/* ── Tile-dark: attribution bar ─────────────────────────────────────────── */
body.tile-dark .leaflet-control-attribution {
  background: rgba(var(--darkTheme), 0.42) !important;
  color: rgba(var(--lightTheme), 0.72) !important;
}
body.tile-dark .leaflet-control-attribution a {
  color: rgba(var(--lightTheme), 0.88) !important;
}

/* ── Tile-dark: dash-embed text — direct rgba values, no variable-chain dependency ── */
/* Body baseline: all inherited text (including SVG currentColor) becomes white */
body.dash-embed.tile-dark { color: rgba(var(--lightTheme), 0.9); }

/* Full-opacity foreground elements */
body.dash-embed.tile-dark .remote-header h2,
body.dash-embed.tile-dark .remote-area,
body.dash-embed.tile-dark .remote-btn-label,
body.dash-embed.tile-dark .result-table th,
body.dash-embed.tile-dark .result-table td,
body.dash-embed.tile-dark .status-msg,
body.dash-embed.tile-dark .layer-section-title,
body.dash-embed.tile-dark .swatch-legend,
body.dash-embed.tile-dark .soc-legend-labels,
body.dash-embed.tile-dark .rf-label,
body.dash-embed.tile-dark .rf-chart-label,
body.dash-embed.tile-dark .result-note       { color: rgba(var(--lightTheme), 0.9); }

/* Dimmed foreground elements */
body.dash-embed.tile-dark .level-label,
body.dash-embed.tile-dark .result-meta,
body.dash-embed.tile-dark .crumb-text,
body.dash-embed.tile-dark .crumb-arrow,
body.dash-embed.tile-dark .running-text,
body.dash-embed.tile-dark .rf-yaxis          { color: rgba(var(--lightTheme), 0.6); }

body.dash-embed.tile-dark .running-dim       { color: rgba(var(--lightTheme), 0.4); }

body.dash-embed.tile-dark .remote-btn-label svg { fill: rgba(var(--lightTheme), 0.8); }

body.dash-embed.tile-dark .geosam-pill:not(.active)       { background-color: rgba(var(--lightTheme),0.12); color: rgba(var(--lightTheme),0.9); }
body.dash-embed.tile-dark .geosam-pill:hover:not(.active):not(.loading) { background-color: rgba(var(--lightTheme),0.22); }
body.dash-embed.tile-dark .geosam-pill.done  { color: var(--lightcolor); }
body.dash-embed.tile-dark .data-container    { background: transparent !important; }

/* ── Tile-dark: paywall card — text handled by --theme-fg; keep card bg/border ── */
body.dash-embed.tile-dark .paywall-card {
  border-color: rgba(var(--lightTheme), 0.15);
  background: rgba(var(--lightTheme), 0.05);
}
body.dash-embed.tile-dark .paywall-waitlist-input {
  background: rgba(var(--lightTheme), 0.08); /* override light-glass base */
}
body.dash-embed.tile-dark .paywall-waitlist-input::placeholder { color: rgba(var(--lightTheme), 0.5); }

/* --- Terms Modal/Intro Panel --- */
.intro-frame-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90vw !important;
  max-width: 700px !important;
  height: 80vh !important;
  z-index: 2147483647 !important;
  background: white !important;
  border: 2px solid #888 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
  display: block !important;
}
#intro-frame-close-btn {
  position: fixed !important;
  top: max(calc(10vh + 12px), calc(env(safe-area-inset-top) + 8px)) !important;
  right: calc(5vw + 8px) !important;
  left: auto !important;
  transform: none !important;
  z-index: 2147483648 !important;
  font-size: 2rem !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #444 !important;
  font-weight: bold !important;
}

@media (max-width: 768px) {
  #intro-frame-close-btn {
    top: max(calc(10vh + 8px), calc(env(safe-area-inset-top) + 6px)) !important;
    right: calc(5vw + 4px) !important;
  }
}

/* Responsive flex layout — shared by layer-charts-grid and tree-sections-grid */
#layer-charts-grid, .layer-charts-grid, .tree-sections-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
#layer-charts-grid, .layer-charts-grid { margin: 10px 0 0 0; }
/* #data-drawer/#plan-drawer (the visible single-box slots openDataLayer/
   openPlanLayer reparent an open .mb-group into, layers.js) are themselves
   direct children of body.dash-embed, which sets align-items: flex-start —
   opting every direct child out of the flex column's default stretch, so
   without this they shrink to their own content width instead of filling
   the slide-up panel. The .mb-group[open] rule below already expands an
   open box to 100% of ITS parent, but that's moot if the parent itself
   never reached full width to begin with. */
#data-drawer, #plan-drawer {
  align-self: stretch;
  width: 100%;
}

/* Compact (closed) items */
#layer-charts-grid > .mb-group,
.layer-charts-grid > .mb-group,
.tree-sections-grid > .mb-group,
.tree-sections-grid > #viewer-wrap {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 450px;
}
/* Open: expand to full panel width */
#layer-charts-grid > .mb-group[open],
.layer-charts-grid > .mb-group[open],
.tree-sections-grid > .mb-group[open] {
  flex: 1 1 100%;
  max-width: 100%;
}
/* Slide-in animation for content when item opens */
#layer-charts-grid > .mb-group[open] > .layer-chart-content,
.layer-charts-grid > .mb-group[open] > .layer-chart-content,
.tree-sections-grid > .mb-group[open] > .mb-group-items {
  animation: layerContentOpen 0.26s ease both;
}
@keyframes layerContentOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.layer-chart-box {
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.07), 0 4px 24px rgba(0,0,0,0.10);
  background: var(--lowlight, #f7f7f7);
  overflow: hidden;
  min-width: 0;
}
.layer-chart-box[open] {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 4px 24px rgba(0,0,0,0.13);
}
.layer-chart-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 18px 10px 14px;
  background: #fff;
  border-bottom: 1px solid #eee;
  user-select: none;
}
.layer-chart-summary .triangle {
  display: inline-block;
  transition: transform 0.2s;
  margin-right: 8px;
}
.layer-chart-box[open] .layer-chart-summary .triangle {
  transform: rotate(90deg);
}
.layer-chart-content {
  padding: 8px 12px 12px 12px;
  background: transparent;
}
.layer-chart-content .data-container {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Segment mode ──────────────────────────────────────────────────────────── */

.segment-btn-wrap {
  padding: 10px 12px 0;
  display: flex;
  justify-content: center;
}
.segment-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 192px;
  height: 42px;
  padding: 0 24px;
  border: 1.5px solid var(--greendeforest1);
  border-radius: var(--smallcorner);
  background: transparent;
  color: var(--greendeforest1);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.segment-btn:hover {
  background: var(--greendeforest1);
  color: #fff;
}

/* Plan assignment button (subparcel's own view — assign/change its type) */
.plan-btn {
  background-image: none !important;
  background-color: var(--greendeforest1) !important;
  box-shadow: 0 2px 10px rgba(34, 139, 34, 0.4) !important;
}
.plan-btn:hover:not(.loading) {
  background-color: var(--greendeforest2) !important;
}

/* Parcel edit-mode focus mask */
#seg-focus-mask {
  position: fixed;
  z-index: 850;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.15s ease;
}
#seg-focus-mask.seg-focus-mask-visible { opacity: 1; }
/* Viewing a zone's own subparcel report (.seg-focus-mask-subparcel, set in
   segment-mode.js's _updateFocusMask) — mask hugs the zone's own boundary
   instead of the whole parent parcel's, at the SAME blur(4px) strength as
   the parcel-level mask above (not weaker) — no separate rule needed. */

/* Move Segment's filled-square resize-corner handles (segment-mode.js) —
   reset Leaflet's own .leaflet-div-icon default (white fill, grey border,
   see vendor/leaflet/leaflet.css) so only the inline-colored square shows. */
.seg-handle-rect { background: transparent !important; border: none !important; }

/* Floating Layouts picker (top of map) — same pill/glass shape it always
   had as a read-only label; now hosts the Design button / dropdown picker
   instead (segment-mode.js). Outer shape (position, border-radius, glass
   panel) deliberately unchanged. */
#seg-bar {
  display: none;
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background: var(--glass-panel-bg);
  border: var(--glass-panel-border);
  border-radius: 24px;
  backdrop-filter: blur(var(--glass-panel-blur));
  -webkit-backdrop-filter: blur(var(--glass-panel-blur));
  box-shadow: var(--map-element-shadow);
  color: rgb(var(--theme-fg));
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  pointer-events: auto;
}
/* seg-bar's own Layouts dropdown — same glass-panel language as the search
   bar's dropdown (.search-dropdown above: var(--glass-panel-bg)/-blur,
   var(--control-glass-*)) instead of .custom-dropdown-list's generic flat
   lightTheme/darkTheme background, and smaller/slimmer text to match the
   pill's own compact size (see #seg-bar's font-size right above). */
#seg-bar-picker .custom-dropdown-selected {
  padding: 3px 8px;
  background: transparent;
  border: none;
  font-size: 0.6875rem;
  font-weight: 500;
}
#seg-bar-picker .custom-dropdown-selected:hover {
  background: var(--control-glass-hover);
}
#seg-bar-picker .custom-dropdown-list {
  background: var(--glass-panel-bg);
  backdrop-filter: blur(var(--glass-panel-blur));
  -webkit-backdrop-filter: blur(var(--glass-panel-blur));
  border: none;
  box-shadow: var(--map-element-shadow);
}
#seg-bar-picker .custom-dropdown-option {
  padding: 5px 8px;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--control-glass-text);
  border-bottom: 1px solid var(--control-glass-separator);
}
#seg-bar-picker .custom-dropdown-option:hover,
#seg-bar-picker .custom-dropdown-option.selected {
  background: var(--control-glass-hover);
}
#seg-bar-save,
#seg-bar-discard {
  padding: 3px 12px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
#seg-bar-save { border-color: var(--greendeforest1); color: var(--greendeforest1); }
#seg-bar-save:hover,
#seg-bar-discard:hover { background: rgba(255,255,255,0.12); }

/* Unsaved-changes prompt (Save/Discard/Cancel) — same glass chrome as #seg-bar. */
#seg-unsaved-prompt {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
}
.seg-unsaved-box {
  background: rgba(20,20,20,0.92);
  border: 1px solid var(--greendeforest1);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  padding: 18px 20px;
  max-width: 320px;
  color: #fff;
  font-size: 13px;
  text-align: center;
}
.seg-unsaved-box p { margin: 0 0 14px; line-height: 1.4; }
.seg-unsaved-box button {
  padding: 5px 14px;
  margin: 0 4px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
#seg-unsaved-save { border-color: var(--greendeforest1); color: var(--greendeforest1); }
.seg-unsaved-box button:hover { background: rgba(255,255,255,0.12); }

/* Draw hint bar (bottom of map) */
#seg-hint {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  padding: 7px 18px;
  background: rgba(0,0,0,0.72);
  border-radius: 20px;
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  pointer-events: none;
  text-align: center;
  max-width: 80vw;
  backdrop-filter: blur(4px);
}

.sp-panel-body { padding: 4px 0; }
.sp-type-row {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sp-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  border-radius: var(--smallcorner);
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  opacity: 0.55;
  transition: opacity 0.12s, border-color 0.12s;
}
.sp-type-btn.selected {
  opacity: 1;
  border-color: currentColor;
}
.sp-type-btn img { width: 20px; height: 20px; }
.sp-type-btn span { font-size: 0.625rem; line-height: 1.1; text-align: center; }
.sp-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
}
.sp-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid rgba(var(--theme-fg), 0.25);
  border-radius: var(--smallcorner);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  outline: none;
}
.sp-cancel-btn {
  padding: 6px 14px;
  border-radius: var(--smallcorner);
  border: 1px solid rgba(var(--theme-fg), 0.25);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  transition: background 0.2s ease-in-out;
}
.sp-cancel-btn:hover { background: var(--glass-button-hover-bg); }

.li-place-btn {
  padding: 6px 14px;
  background-image: url('/static/logo/tribal_smaller.jpg');
  background-size: 272px 370px;
  background-position: center;
  background-color: var(--darkcolor, #1a1a12);
  color: var(--white);
  border: none;
  border-radius: var(--smallcorner);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(var(--blackRGB), 0.6);
}
.li-place-btn:disabled { opacity: 0.35; cursor: default; }
.li-place-btn.loading  { opacity: 0.6; }

.seg-run-rename {
  margin-right: 6px;
  cursor: pointer;
  opacity: 0.5;
  font-style: normal;
}

.seg-run-delete {
  margin-right: 6px;
  cursor: pointer;
  opacity: 0.45;
  font-style: normal;
  transition: opacity 0.15s, color 0.15s;
}
.seg-run-delete:hover {
  opacity: 1;
  color: #c00;
}

.sp-confirm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.sp-confirm-row .result-meta {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.6875rem;
  white-space: normal;
}
.sp-confirm-yes,
.sp-confirm-no {
  flex-shrink: 0;
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--smallcorner);
  transition: background 0.15s, color 0.15s;
}
.sp-confirm-yes { color: #c00; }
.sp-confirm-no  { color: rgba(var(--theme-fg), 0.6); }
.sp-confirm-yes:hover,
.sp-confirm-no:hover { background: rgba(var(--theme-fg), 0.08); }

/* Name prompt overlay */
#seg-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9100;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
}
#seg-dialog {
  background: var(--darkcolor, #1a1a1a);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 24px;
  min-width: 280px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
#seg-dialog-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pill-fg);
}
#seg-input {
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--pill-fg);
  font-size: 14px;
  outline: none;
}
#seg-input:focus { border-color: var(--greendeforest1); }
#seg-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
#seg-cancel-btn, #seg-save-btn {
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
#seg-cancel-btn {
  background: rgba(255,255,255,0.08);
  color: var(--pill-fg);
}
#seg-cancel-btn:hover { background: rgba(255,255,255,0.14); }
#seg-save-btn {
  background: var(--greendeforest1);
  color: #fff;
}
#seg-save-btn:hover { background: var(--greendeforest2); }