/* TerraScope — habitability research atlas */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0a0a0a;
  --bg-2: #141414;
  --bg-card: #1a1a1a;
  --border: #262626;
  --border-strong: #333;
  --text: #e0e0e0;
  --text-dim: #9aa0a6;
  --text-muted: #666;
  --green: #4ade80;
  --green-dim: #22c55e;
  --blue: #3b82f6;
  --purple: #a855f7;
  --amber: #f59e0b;
  --red: #ef4444;
  --gold: #b8860b;
}
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dim); }

/* layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* === MARKETING-ONLY RULES REMOVED (nav, hero, sections, pricing, FAQ, footer, login) === */

/* full-screen map viewer layout (used by /<region>/ on areas.cleanz.one) */
/* full-screen map viewer layout (used by /<region>/ on areas.cleanz.one) */
body.map-view { overflow: hidden; height: 100vh; background: #000; }
.map-shell {
  position: absolute; inset: 0;
  background: #000;
}

/* Sidebar is now a slide-out drawer (Google-Maps style) — does not push the map */
.map-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;        /* above floating-top-bar (z-index 20) — drawer wins */
  width: 360px; max-width: 90vw;
  background: #0a0a0a;
  border-right: 0;
  display: flex; flex-direction: column;
  overflow-y: auto;
  z-index: 30;
  transform: translateX(-100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 28px rgba(0,0,0,0.55);
}
body.drawer-open .map-sidebar { transform: translateX(0); }
/* When drawer open, the WHOLE floating-top-bar (not just .floating-brand) must be click-transparent;
   otherwise the parent <div> catches clicks meant for elements behind it. */
body.drawer-open .floating-top-bar { pointer-events: none; }

/* Floating brand pill — semi-transparent over the map, full opacity on hover */
.floating-brand { opacity: 0.5; transition: opacity 0.18s, border-color 0.15s, background 0.15s; }
.floating-brand:hover, .floating-brand:focus { opacity: 1; }
/* On drawer open, hide it so it doesn't overlap the drawer header */
body.drawer-open .floating-brand { opacity: 0; pointer-events: none; }
body.drawer-open .canvas-frame .floating-clock { opacity: 0; pointer-events: none; }

.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 25;
  transition: opacity 0.22s;
}
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }

.drawer-close {
  position: absolute;
  top: 12px; right: 12px;
  background: transparent; border: 0;
  color: var(--text-dim); cursor: pointer;
  font-size: 1rem; line-height: 1;
  width: 36px; height: 36px;
  border-radius: 5px;
  z-index: 100;
  pointer-events: auto;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -2px;
  font-weight: 600;
}
.drawer-close:hover { color: var(--green); background: #161616; }

/* Floating chrome — sits OVER the map */
.floating-top-bar {
  position: fixed;
  top: 14px; left: 14px;        /* +/- now bottom-right, so top-left is free */
  z-index: 20;
  display: flex; gap: 8px; align-items: stretch;
}
.floating-brand {
  position: relative;
  z-index: 20;
  display: flex; align-items: center; gap: 12px;
  background: rgba(10,10,10,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 8px 14px 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
  color: var(--text);
  max-width: calc(100vw - 200px);
  overflow: hidden;
}
.floating-brand:hover { border-color: var(--green); background: rgba(15,15,15,0.97); }
.floating-brand .menu-icon {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 1.1rem; line-height: 1;
  flex-shrink: 0;
}
.floating-brand .brand-name {
  font-weight: 700; color: #fff; font-size: 0.94rem;
  letter-spacing: 0.01em; white-space: nowrap;
}
.floating-brand .brand-name span { color: var(--green); }
.ftb-left, .ftb-right {
  display: flex; align-items: center;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; color: inherit; font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
.ftb-left { gap: 8px; }
.floating-brand .region-name {
  color: var(--text-dim); font-size: 0.86rem;
  border-left: 1px solid var(--border-strong);
  padding-left: 12px; margin-left: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 360px;
}

/* Floating chip row — preset filters, BOTTOM-LEFT (above the dock) */
.floating-chips {
  position: fixed;
  left: 14px; bottom: 24px;
  z-index: 19;
  display: flex; align-items: center; gap: 6px;
  background: rgba(10,10,10,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 5px 6px;
  max-width: calc(100vw - 80px);
  overflow-x: auto;
}
/* Floating clock — STUCK to the LEFT EDGE at its vertical position (just above the dock) */
.canvas-frame .floating-clock {
  position: absolute !important;
  left: 0 !important;
  bottom: 44px !important;
  top: auto !important;
  transform: none !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  width: 32px; height: 32px;
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-left: 0 !important;
  border-radius: 0 8px 8px 0;
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  font-family: inherit;
  padding: 0;
}
.canvas-frame .floating-clock { opacity: 0.5; transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.15s; }
.canvas-frame .floating-clock:hover { color: var(--green); border-color: var(--green); background: rgba(15,15,15,0.97); opacity: 1; }
.canvas-frame .floating-clock.open { opacity: 1; }
.canvas-frame .floating-clock.open { color: var(--green); border-color: var(--green); }
.canvas-frame .floating-clock svg { display: block; }

.canvas-frame .floating-clock-menu {
  position: absolute;
  left: 0;
  bottom: 90px;
  top: auto;
  transform: none;
  z-index: 110;
  min-width: 180px;
  background: #060606;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.55);
  display: none;
}
.canvas-frame .floating-clock-menu.open { display: block; }
.canvas-frame .floating-clock-menu .floating-clock-menu-label {
  font-size: 0.66rem; letter-spacing: 0.08em;
  color: var(--text-muted); text-transform: uppercase;
  padding: 8px 14px 4px;
  border-bottom: 1px solid var(--border);
}
.canvas-frame .floating-clock-menu button {
  display: block; width: 100%;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit; font-size: 0.84rem;
  padding: 9px 14px;
  text-align: left; cursor: pointer;
}
.canvas-frame .floating-clock-menu button:last-child { border-bottom: 0; }
.canvas-frame .floating-clock-menu button:hover:not([disabled]) { background: #0f0f0f; color: #fff; }
.canvas-frame .floating-clock-menu button.active { color: var(--green); font-weight: 600; }
.canvas-frame .floating-clock-menu button[disabled] { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 760px) {
  /* Mobile: larger touch target, stays flush to left edge (same as base rule) */
  .canvas-frame .floating-clock {
    width: 32px; height: 32px;
    bottom: 44px !important;
    top: auto !important;
  }
  .canvas-frame .floating-clock-menu { left: 0 !important; bottom: 80px !important; }
}
.floating-chips .chip-label {
  color: var(--text-muted); font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0 8px 0 4px; white-space: nowrap;
}
.floating-chips .chip {
  background: transparent; border: 0;
  color: var(--text-dim);
  padding: 6px 12px; border-radius: 5px;
  font-size: 0.82rem; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.floating-chips .chip:hover { background: #161616; color: #fff; }
.floating-chips .chip.active {
  background: rgba(74,222,128,0.12);
  color: var(--green);
  font-weight: 600;
}
.floating-chips .chip.disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}
.floating-chips .chip.disabled:hover { background: transparent; color: var(--text-muted); }
.floating-chips .chip.disabled::after {
  content: ''; position: absolute;
  top: 4px; right: 4px;
  width: 5px; height: 5px;
  background: var(--amber);
  border-radius: 50%;
  opacity: 0.7;
}

@media (max-width: 1100px) {
  .floating-chips { max-width: calc(100vw - 28px); }
}
@media (max-width: 700px) {
  .floating-chips .chip-label { display: none; }
  .floating-chips { padding: 4px 4px; gap: 2px; }
  .floating-chips .chip { padding: 6px 9px; font-size: 0.78rem; }
}

.floating-account {
  position: fixed;
  top: 14px; right: 64px;       /* clear of Folium LayerControl at top-right */
  z-index: 20;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(10,10,10,0.94);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  font-size: 0.82rem; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  letter-spacing: 0.05em;
}
.floating-account:hover { border-color: var(--green); color: var(--green); }

/* Knowledge teaser — sits above the account bar */
.drawer-knowledge {
  display: block;
  padding: 14px 22px 16px;
  background: rgba(74,222,128,0.03);
  text-decoration: none;
  color: var(--text);
  margin-top: auto;
  opacity: 0.8;
  transition: background 0.15s, opacity 0.18s;
}
.drawer-knowledge:hover { background: rgba(74,222,128,0.07); opacity: 1; }
.drawer-knowledge .dk-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: 7px;
}
.drawer-knowledge .dk-snippet {
  font-size: 0.82rem; line-height: 1.55; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 8px;
}
.drawer-knowledge .dk-cta {
  font-size: 0.75rem; color: var(--green); font-weight: 600;
  letter-spacing: 0.03em;
}
.drawer-info {
  display: block;
  padding: 12px 22px 14px;
  background: rgba(168,85,247,0.02);
  text-decoration: none;
  color: var(--text);
  opacity: 0.9;
  transition: background 0.15s, opacity 0.18s;
}
.drawer-info:hover { background: rgba(168,85,247,0.06); opacity: 1; }
.drawer-info .di-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #a855f7;
  margin-bottom: 6px;
}
.drawer-info .di-snippet {
  font-size: 0.8rem; line-height: 1.5; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 7px;
}
.drawer-info .di-cta {
  font-size: 0.73rem; color: #a855f7; font-weight: 600;
  letter-spacing: 0.03em;
}

/* Drawer account bar — sits at the bottom of the slide-out */
.drawer-account {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: #060606;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s, color 0.15s;
}
.drawer-account:hover { background: #0f0f0f; color: var(--green); }
.drawer-account .account-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(74,222,128,0.12);
  border: 1px solid var(--green);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.86rem; font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.drawer-account .account-text {
  display: flex; flex-direction: column;
  line-height: 1.2;
}
.drawer-account .account-text strong {
  color: #fff; font-size: 0.92rem; font-weight: 600;
}
.drawer-account .account-text .account-sub {
  color: var(--text-muted); font-size: 0.74rem;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Account-row wraps the account link + the language flag picker.
   The row is flex so the flag sits cleanly to the right of the account pill
   instead of falling below it (and being clipped by the sidebar overflow). */
.drawer-account-row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #060606;
}
.drawer-account-row .drawer-account {
  flex: 1 1 auto;
  min-width: 0;
  border-top: 0;
  border-bottom: 0;
}
.drawer-account-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 14px;
  border-left: 1px solid var(--border);
  background: #060606;
  cursor: pointer;
  transition: background 0.15s;
}
.drawer-account-flag:hover { background: #0f0f0f; }
.drawer-account-flag .i18n-sw-btn,
.drawer-account-flag button {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.drawer-account-flag .i18n-sw-flag {
  font-size: 1.25rem;
  line-height: 1;
  display: inline-block;
}

/* Old sidebar-toggle no longer used */
.sidebar-toggle { display: none !important; }

/* Theme toggle button (sits next to the floating brand pill) */
.floating-theme {
  background: rgba(10,10,10,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  width: 42px;
  min-height: 42px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.18s, border-color 0.15s, background 0.15s, color 0.15s;
  padding: 0;
}
.floating-theme svg { display: block; }
.floating-theme:hover { border-color: var(--green); color: var(--green); background: rgba(15,15,15,0.97); }
body.drawer-open .floating-theme { opacity: 0; pointer-events: none; }
.map-sidebar::-webkit-scrollbar { width: 6px; }
.map-sidebar::-webkit-scrollbar-track { background: transparent; }
.map-sidebar::-webkit-scrollbar-thumb { background: #222; border-radius: 3px; }

.map-sidebar .drawer-header {
  display: flex; align-items: center;
  padding: 18px 56px 14px 22px;   /* right padding clears the absolute-positioned ‹‹ close button */
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.map-sidebar .drawer-header .brand {
  padding: 0;
  border-bottom: 0;
  font-size: 1.15rem; font-weight: 800; color: #fff;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-block;
}
/* Drawer header row — flex, brand on left, icons sit immediately next to it */
.drawer-header-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px;
}
.drawer-cell-close { margin-left: auto; }      /* push close to the far right */
/* ONLY the two buttons receive clicks in this row. Brand link + spans + cells are pass-through. */
.drawer-header-row * { pointer-events: none; }
.drawer-header-row button,
.drawer-header-row button * { pointer-events: auto; }
.drawer-cell-theme button,
.drawer-cell-close button {
  width: 26px; height: 26px;
  background: transparent; border: 0;
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 0.95rem; line-height: 1;
  padding: 0;
}
.drawer-cell-theme button svg,
.drawer-cell-close button svg { display: block; }
.drawer-cell-theme button:hover,
.drawer-cell-close button:hover { color: var(--green); }
.drawer-theme-mini:hover { color: var(--green); border-color: var(--green); background: rgba(74,222,128,0.06); }
.drawer-theme-mini svg, .drawer-theme-mini span { display: block; }
.drawer-theme-mini * { pointer-events: none; }    /* defensive: any descendant won't swallow clicks */

.map-sidebar .brand {
  padding: 0;
  border-bottom: 0;
  font-size: 1.15rem; font-weight: 800; color: #fff;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-block;
}
.map-sidebar .brand span { color: var(--green); }

.map-sidebar .nav-core {
  display: flex; gap: 4px; padding: 12px 14px 0;
  flex-wrap: wrap;
}
.map-sidebar .nav-core a {
  font-size: 0.78rem; color: var(--text-dim);
  padding: 5px 9px; border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.map-sidebar .nav-core a:hover { background: #161616; color: #fff; }
.map-sidebar .nav-core a.active { color: var(--green); background: rgba(74,222,128,0.08); }

.map-sidebar .crumbs {
  padding: 14px 22px 4px;
  color: var(--text-muted); font-size: 0.74rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.map-sidebar .crumbs a { color: var(--text-dim); text-decoration: none; }
.map-sidebar .crumbs a:hover { color: var(--green); }

.map-sidebar h1.region {
  padding: 0 22px 8px;
  font-size: 1.4rem; color: #fff; font-weight: 700;
  line-height: 1.2;
}
.map-sidebar p.region-blurb {
  padding: 0 22px 18px;
  color: var(--text-muted); font-size: 0.78rem;
  line-height: 1.5;
}

.map-sidebar .region-picker {
  padding: 6px 14px 16px;
}
.map-sidebar .region-picker .label {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 8px 6px;
}
.map-sidebar .region-picker a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 5px;
  color: var(--text); font-size: 0.86rem;
  text-decoration: none;
  transition: background 0.15s;
}
.map-sidebar .region-picker a:hover { background: #161616; }
.map-sidebar .region-picker a.active {
  background: rgba(74,222,128,0.07);
  color: var(--green); font-weight: 600;
}
.map-sidebar .region-picker a .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 9px; flex-shrink: 0;
}
.map-sidebar .region-picker a .dot.live { background: var(--green); }
.map-sidebar .region-picker a .dot.soon { background: var(--amber); opacity: 0.5; }
.map-sidebar .region-picker a .meta {
  font-size: 0.7rem; color: var(--text-muted); margin-left: auto;
}

.map-sidebar .panel {
  padding: 16px 22px;
}
.map-sidebar .panel h3 {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green); margin-bottom: 10px;
}
.map-sidebar .panel .stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.map-sidebar .panel .stat {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 5px; padding: 9px 11px;
}
.map-sidebar .panel .stat .v {
  font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.1;
}
.map-sidebar .panel .stat .k {
  font-size: 0.66rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px;
}

.map-sidebar .panel ul.lt {
  list-style: none; padding: 0;
}
.map-sidebar .panel ul.lt li {
  font-size: 0.84rem; color: var(--text);
  padding: 5px 0; line-height: 1.4;
  display: flex; align-items: center; gap: 9px;
}
.map-sidebar .panel ul.lt li .swatch {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 2px; flex-shrink: 0;
}
.map-sidebar .panel ul.lt li .meta {
  font-size: 0.74rem; color: var(--text-muted); margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.map-sidebar .panel.fine p {
  font-size: 0.78rem; color: var(--text-muted);
  line-height: 1.5;
}

.map-sidebar .footer-note {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  font-size: 0.74rem; color: var(--text-muted);
}

/* When logged in: hide the legal/marketing links in the drawer (front-of-funnel stuff) */
body.logged-in .map-sidebar .footer-note { display: none; }
.map-sidebar .footer-note a { color: var(--text-dim); text-decoration: none; }
.map-sidebar .footer-note a:hover { color: var(--green); }

.map-canvas {
  position: absolute; inset: 0;
  background: #000;
  display: flex; flex-direction: column;
}
.map-canvas .canvas-frame {
  flex: 1;
  position: relative;
  min-height: 0;
}
.map-canvas iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.map-loading-overlay {
  position: absolute; inset: 0;
  background: #050505;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 10;
  transition: opacity 0.4s;
  pointer-events: none;
}
.map-loading-overlay.hidden { opacity: 0; pointer-events: none; }
.map-loading-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(74,222,128,0.15);
  border-top-color: #4ade80;
  border-radius: 50%;
  animation: mapSpin 0.85s linear infinite;
}
@keyframes mapSpin { to { transform: rotate(360deg); } }
.map-loading-overlay p {
  margin: 14px 0 0;
  color: #555;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

/* DevTools-style bottom dock */
.map-dock {
  flex-shrink: 0;
  background: #0a0a0a;
  border-top: 0;
  display: flex; flex-direction: column;
  height: 280px;
  min-height: 36px;
  max-height: 80vh;
  position: relative;
  z-index: 21;
}
.map-dock.collapsed { height: 36px !important; }
.map-dock.fullscreen {
  position: fixed !important;
  inset: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  z-index: 110;
}
.map-dock.fullscreen .dock-resize { display: none !important; }

.dock-resize {
  position: absolute;
  top: -3px; left: 0; right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 22;
  background: transparent;
  border-top: 0;
}
.dock-resize:hover, .dock-resize.dragging {
  background: rgba(74,222,128,0.25);
}
.map-dock.collapsed .dock-resize { cursor: default; pointer-events: none; }

/* On touch devices the 6px handle eats taps meant for tabs above. Disable resize. */
@media (hover: none) and (pointer: coarse) {
  .dock-resize { display: none !important; }
  .dock-tabs { height: 48px !important; }
  .map-dock { min-height: 48px !important; }
  .map-dock.collapsed { height: 48px !important; }
  .dock-tab { padding: 0 16px; font-size: 0.84rem; }
  .dock-toggle, .dock-fullscreen {
    width: 48px !important;
    height: 48px;
    font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center;
  }
  .dock-tab.dock-tab-more { padding: 0 18px; }
}

.dock-tabs {
  display: flex; align-items: stretch;
  background: #060606;
  border-bottom: 0;
  height: 36px;
  flex-shrink: 0;
  padding: 0 4px;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 5;
}
.dock-tab {
  background: transparent;
  border: 0;
  border-right: 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  padding: 0 16px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 6px;
  position: relative;
  transition: color 0.12s, background 0.12s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.dock-tab:hover { color: #fff; background: #0f0f0f; }
.dock-tab.active {
  color: var(--green);
  background: #0a0a0a;
}
.dock-tab.active::after {
  content: ''; position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px; background: var(--green);
}
.dock-tab .badge {
  font-size: 0.62rem;
  background: #161616;
  color: var(--text-muted);
  padding: 1px 5px; border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.dock-spacer { flex: 1; }
.dock-toggle, .dock-fullscreen, .dock-grid-trigger {
  background: transparent; border: 0;
  color: var(--text-muted);
  font-size: 1rem; line-height: 1;
  width: 32px; cursor: pointer;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.dock-toggle:hover, .dock-fullscreen:hover, .dock-grid-trigger:hover { color: var(--green); }
.dock-grid-trigger.active { color: var(--green); }
.dock-grid-trigger svg { display: block; }

/* Cell-size dropdown menu — anchored to the TOP of the dock (works whether dock is collapsed or expanded) */
.dock-grid-menu {
  position: absolute;
  bottom: 100%; right: 36px;
  margin-bottom: -1px;
  background: #060606;
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  min-width: 180px;
  display: none;
  z-index: 60;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.55);
}
.dock-grid-menu.open { display: block; }
.dock-grid-menu .dock-grid-menu-label {
  font-size: 0.66rem; letter-spacing: 0.08em;
  color: var(--text-muted); text-transform: uppercase;
  padding: 8px 14px 4px;
  border-bottom: 1px solid var(--border);
}
.dock-grid-menu button {
  display: block; width: 100%;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit; font-size: 0.84rem;
  padding: 9px 14px;
  text-align: left; cursor: pointer;
}
.dock-grid-menu button:last-child { border-bottom: 0; }
.dock-grid-menu button:hover:not([disabled]) { background: #0f0f0f; color: #fff; }
.dock-grid-menu button.active { color: var(--green); font-weight: 600; }
.dock-grid-menu button[disabled] { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

/* "More ▴" tab — same look as other tabs, opens a list */
.dock-tab.dock-tab-more::after { content: ' ▴'; color: var(--text-muted); margin-left: 4px; }
.dock-tab.dock-tab-more.open::after { color: var(--green); }
.dock-more-menu {
  position: absolute;
  bottom: 100%; left: 0; right: auto;
  background: #060606;
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  min-width: 220px;
  max-height: 70vh; overflow-y: auto;
  display: none;
  z-index: 60;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.55);
}
.dock-more-menu.open { display: block; }
.dock-more-menu button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 10px;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit; font-size: 0.82rem;
  padding: 10px 14px;
  text-align: left; cursor: pointer;
}
.dock-more-menu button:last-child { border-bottom: 0; }
.dock-more-menu button:hover { background: #0f0f0f; color: #fff; }
.dock-more-menu button.active { color: var(--green); }
.dock-more-menu button .badge {
  background: #161616; color: var(--text-muted);
  padding: 1px 5px; border-radius: 3px; font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}

.dock-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 18px 14px;
  --bg-card: #060606;
}
.map-dock.collapsed .dock-body { display: none; }
.dock-body::-webkit-scrollbar { width: 8px; height: 8px; }
.dock-body::-webkit-scrollbar-track { background: #060606; }
.dock-body::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }

.dock-pane { display: none; }
.dock-pane.active { display: block; }
.dock-pane-rankings { padding: 0 0 4px; }
.dock-pane-rankings table { font-variant-numeric: tabular-nums; }
.dock-pane-rankings table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.dock-rank-loading {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* tables inside dock panes */
.dock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.dock-table thead th {
  text-align: left;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-strong);
  position: sticky; top: 0;
  background: #060606;
}
.dock-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid #141414;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dock-table tbody tr:hover td { background: #0f0f0f; }
.dock-table .rank {
  color: var(--text-muted);
  width: 38px;
  font-size: 0.74rem;
}
.dock-table .swatch {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; vertical-align: middle;
  margin-right: 8px;
}
.dock-table .num { text-align: right; }
.dock-table .pct {
  text-align: right;
  color: var(--green);
  font-weight: 600;
}

.dock-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}
.dock-grid .stat { flex: 0 0 auto; min-width: 140px; }
.dock-grid .stat {
  background: var(--bg-card);
  border: 0;
  border-radius: 6px;
  padding: 10px 13px;
}
.dock-grid .stat .v {
  font-size: 1.15rem; font-weight: 700; color: #fff; line-height: 1.1;
}
.dock-grid .stat .k {
  font-size: 0.66rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px;
}

.dock-prose {
  max-width: 760px;
  font-size: 0.86rem;
  color: var(--text-dim);
  line-height: 1.6;
}
.dock-prose p { margin-bottom: 10px; }
.dock-prose h4 {
  color: #fff; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin: 14px 0 6px;
}

.sidebar-toggle {
  position: fixed;
  top: 14px; left: 354px;
  z-index: 20;
  width: 32px; height: 32px;
  background: rgba(10,10,10,0.92);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: left 0.25s, color 0.15s, border-color 0.15s;
  font-size: 1rem; line-height: 1;
}
.sidebar-toggle:hover { color: var(--green); border-color: var(--green); }

@media (max-width: 760px) {
  /* Mobile: hamburger flush to top-LEFT corner, mirror of Layers tab top-right */
  .floating-top-bar { left: 0; top: 0; gap: 4px; }
  .floating-brand .region-name { display: none !important; }
  .floating-brand .brand-name { display: none !important; }
  .ftb-right { display: none !important; }
  .floating-brand {
    opacity: 1;
    padding: 8px 12px !important;
    border-radius: 0 0 15px 0 !important;     /* mirror: only bottom-right corner rounded */
    border-left: 0 !important;
    border-top: 0 !important;
    max-width: none !important;
    width: fit-content;
  }
  body.drawer-open .floating-brand { opacity: 0 !important; pointer-events: none !important; }
  .floating-brand .menu-icon { font-size: 1.3rem; width: 22px; height: 22px; }
  /* Mobile: kill the floating theme button — the in-drawer mini button replaces it */
  .floating-theme { display: none !important; }
}

/* fullscreen blackout modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.modal-backdrop.open { display: flex; animation: modalIn 0.18s ease-out; }
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 36px 36px 28px;
  width: 100%; max-width: 480px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(74,222,128,0.15);
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-dim); border-radius: 50%;
  font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  line-height: 1;
}
.modal-close:hover { color: #fff; border-color: var(--green); }
.modal-card .price-stamp {
  display: inline-block;
  background: rgba(74,222,128,0.1);
  color: var(--green);
  font-size: 1.4rem; font-weight: 800;
  padding: 6px 14px; border-radius: 4px;
  margin-bottom: 14px;
  border: 1px solid rgba(74,222,128,0.3);
}
.modal-card .price-stamp span { font-size: 0.75rem; color: var(--text-dim); font-weight: 500; margin-left: 4px; }
.modal-card h2 {
  color: #fff; font-size: 1.55rem; font-weight: 700; margin-bottom: 8px;
}
.modal-sub {
  color: var(--text-dim); font-size: 0.92rem; margin-bottom: 20px; line-height: 1.55;
}
.modal-features {
  list-style: none; padding: 0; margin: 0 0 24px 0;
}
.modal-features li {
  color: var(--text); font-size: 0.88rem; padding: 5px 0 5px 22px;
  position: relative; line-height: 1.5;
}
.modal-features li::before {
  content: "✓"; color: var(--green); position: absolute; left: 0;
  font-weight: 700;
}
.modal-form label {
  display: block; color: var(--text); font-size: 0.85rem; margin-bottom: 6px;
}
.modal-form input {
  width: 100%; background: #0a0a0a; border: 1px solid var(--border-strong);
  color: #fff; padding: 11px 14px; border-radius: 5px; font-size: 0.95rem;
  margin-bottom: 14px;
}
.modal-form input:focus { border-color: var(--green); outline: none; }
.modal-submit { width: 100%; }
.modal-fine {
  font-size: 0.78rem; color: var(--text-muted);
  margin-top: 14px; text-align: center;
}

/* preview placeholder for embedded map */
.map-preview {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 20px;
  text-align: center; color: var(--text-dim);
  margin: 32px 0;
}
.map-preview .img-placeholder {
  background: linear-gradient(135deg, rgba(74,222,128,0.08), rgba(168,85,247,0.06));
  border: 1px dashed var(--border-strong);
  border-radius: 6px; height: 360px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.85rem;
  margin-bottom: 14px;
}

/* viewport sort buttons */
.vp-sort {
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 4px;
  padding: 2px 9px; font-size: 11px; cursor: pointer;
  margin-left: 4px; transition: border-color 0.12s, color 0.12s;
}
.vp-sort:hover { border-color: var(--green); color: var(--text); }
.vp-sort.active { border-color: var(--green); color: var(--green); }

/* Info / Knowledge pages: drawer auto-opens on desktop — no backdrop, content shifts right */
@media (min-width: 900px) {
  body.info-page.drawer-open .drawer-backdrop {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body.info-page.drawer-open .map-canvas {
    margin-left: 360px;
    transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.info-page.drawer-open .floating-top-bar { pointer-events: auto; }
  body.info-page.drawer-open .floating-brand { opacity: 0.5; pointer-events: auto; }
}

/* Theme button — sun in dark mode, moon in light mode */
#drawerThemeBtn .icon-moon{display:none!important;}
html.cleanz-light #drawerThemeBtn .icon-sun{display:none!important;}
html.cleanz-light #drawerThemeBtn .icon-moon{display:block!important;}

/* Drawer language switcher — inline-flow inside the drawer column */

/* Account row with language flag on the right */
.map-sidebar .drawer-account-row { display: flex; align-items: stretch; gap: 0; }
.map-sidebar .drawer-account-row .drawer-account { flex: 1 1 auto; min-width: 0; }
.map-sidebar .drawer-account-flag { display: flex; align-items: center; padding: 0 14px; }

/* Account-row flag — borderless */
.map-sidebar .drawer-account-flag .i18n-sw-btn { border: 0 !important; padding: 4px 6px !important; background: transparent !important; }