/* ═══════════════════════════════════════════════════════════════════════
 * BASIRA — "MERIDIAN"  ·  full-bleed map, floating glass instruments
 * A calibrated cartographic instrument: the map fills the screen; every
 * control floats as a quiet blurred-glass panel; one cobalt accent carries
 * from the drawn polygon to the active tool to the key readings.
 * Loaded after style.css — overrides all visuals. Preserves the JS contract.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Typefaces (self-hosted) ──────────────────────────────────────────── */
@font-face{font-family:'Bricolage';font-weight:400;font-display:swap;src:url('/static/fonts/bricolage/bricolage-400.woff2') format('woff2');}
@font-face{font-family:'Bricolage';font-weight:500;font-display:swap;src:url('/static/fonts/bricolage/bricolage-500.woff2') format('woff2');}
@font-face{font-family:'Bricolage';font-weight:600;font-display:swap;src:url('/static/fonts/bricolage/bricolage-600.woff2') format('woff2');}
@font-face{font-family:'Bricolage';font-weight:700;font-display:swap;src:url('/static/fonts/bricolage/bricolage-700.woff2') format('woff2');}
@font-face{font-family:'PlexS';font-weight:400;font-display:swap;src:url('/static/fonts/plex/plex-sans-400.woff2') format('woff2');}
@font-face{font-family:'PlexS';font-weight:500;font-display:swap;src:url('/static/fonts/plex/plex-sans-500.woff2') format('woff2');}
@font-face{font-family:'PlexS';font-weight:600;font-display:swap;src:url('/static/fonts/plex/plex-sans-600.woff2') format('woff2');}
@font-face{font-family:'PlexAr';font-weight:400;font-display:swap;src:url('/static/fonts/plex/plex-arabic-400.woff2') format('woff2');}
@font-face{font-family:'PlexAr';font-weight:500;font-display:swap;src:url('/static/fonts/plex/plex-arabic-500.woff2') format('woff2');}
@font-face{font-family:'PlexAr';font-weight:600;font-display:swap;src:url('/static/fonts/plex/plex-arabic-600.woff2') format('woff2');}
@font-face{font-family:'PlexM';font-weight:400;font-display:swap;src:url('/static/fonts/plex/plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'PlexM';font-weight:500;font-display:swap;src:url('/static/fonts/plex/plex-mono-500.woff2') format('woff2');}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  --panel:#FBFCFD;
  --panel-glass:rgba(251,252,253,.86);
  --mist:#F1F4F3;
  --inset:#F6F8F8;
  --ink:#14181D;
  --slate:#5A6673;
  --faint:#8B97A3;
  --line:rgba(20,30,40,.12);
  --line-soft:rgba(20,30,40,.07);
  --cobalt:#1B47C4;
  --cobalt-ink:#16389B;
  --cobalt-08:rgba(27,71,196,.08);
  --cobalt-14:rgba(27,71,196,.14);
  --map-bg:#EDF0EE;
  --ok:#1c7a52; --warn:#9a6a12; --danger:#b23a2c; --live:#1f9d63;
  --danger-soft:rgba(178,58,44,.10);

  --shadow-1:0 1px 2px rgba(15,23,32,.05), 0 8px 24px -10px rgba(15,23,32,.16);
  --shadow-2:0 1px 2px rgba(15,23,32,.06), 0 20px 48px -16px rgba(15,23,32,.24);
  --r:8px; --r-lg:10px; --r-pill:22px;

  --ui:'Bricolage','PlexS','PlexAr',system-ui,-apple-system,sans-serif;
  --body:'PlexS','PlexAr',system-ui,-apple-system,sans-serif;
  --mono:'PlexM','PlexAr',ui-monospace,'SF Mono',Menlo,monospace;

  --insp-w:364px; --insp-m:16px;
  --insp-zone:calc(var(--insp-w) + var(--insp-m)*2);

  --z-map:0; --z-float:20; --z-pills:15; --z-cmdp:9000; --z-loading:9600;
}

[data-theme="dark"]{
  --panel:#131922;
  --panel-glass:rgba(19,25,34,.82);
  --mist:#1c2530;
  --inset:#0f151d;
  --ink:#eaf0f5;
  --slate:#9fb0bf;
  --faint:#6f8091;
  --line:rgba(180,205,230,.14);
  --line-soft:rgba(180,205,230,.08);
  --cobalt:#5b84f0;
  --cobalt-ink:#8aa9f7;
  --cobalt-08:rgba(91,132,240,.12);
  --cobalt-14:rgba(91,132,240,.20);
  --map-bg:#0c1218;
  --ok:#42b483; --warn:#cf9a3c; --danger:#e07264; --live:#3fc07f;
  --danger-soft:rgba(224,114,100,.14);
  --shadow-1:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -12px rgba(0,0,0,.6);
  --shadow-2:0 1px 2px rgba(0,0,0,.4), 0 24px 56px -18px rgba(0,0,0,.7);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html,body{height:100%;margin:0;}
body{
  background:var(--map-bg) !important; color:var(--ink);
  font-family:var(--body); font-size:13px; line-height:1.45;
  overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;}
::placeholder{color:var(--faint);}
::selection{background:var(--cobalt-14);color:var(--cobalt-ink);}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:4px;}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
*::-webkit-scrollbar{width:8px;height:8px;}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid transparent;background-clip:content-box;}
.mono,[id^="cb-status"]{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* Shared floating-glass surface */
.float,.cb-brand,.cb-cmd,.cb-top-right,.cb-rail,.cb-inspector,.cb-status,.cb-basemap,
.cb-basemap-btn,.cb-locate-btn,.cb-pill,.loading-content,.cb-cmdp,.toast,.modal-card,.ob-card,.main-drawer{
  background:var(--panel-glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow-1);
}

/* Hide the entire legacy UI — the cb-* shell replaces it. */
.app-header,.header-bar,#sidebar,.sidebar,#sidebar-backdrop,.fab,
.map-stats,#map-stats,.map-toolbar,#map-toolbar,.map-legend,#map-legend,
.welcome-card,#welcome-card,#snapshot-card,#composition-card,
#raster-legend,.raster-legend,.active-chips,#active-chips,
.site-footer,.status-bar,.cb-globe,.cb-top-divider,.cb-rail-sep,.cb-status-spacer{display:none !important;}

/* ═══ MAP — full bleed behind everything ════════════════════════════════ */
#map{position:fixed !important; inset:0 !important; width:auto !important; height:auto !important;
  z-index:var(--z-map); background:var(--map-bg);}
.leaflet-container{width:100% !important; height:100% !important; background:var(--map-bg); font-family:var(--body);}
.leaflet-container.drawing{cursor:crosshair;}

/* ═══ TOP CLUSTER — floating brand · search · actions ═══════════════════ */
.cb-top{
  position:fixed; inset-block-start:16px; inset-inline-start:16px; inset-inline-end:auto;
  width:auto; height:auto; z-index:var(--z-float);
  display:flex; align-items:stretch; gap:10px; padding:0;
  background:transparent; border:0; box-shadow:none; backdrop-filter:none;
}
.cb-top-left,.cb-top-center,.cb-top-right{display:flex; align-items:center; flex:0 0 auto;}
.cb-brand{height:46px; padding-inline:16px; gap:9px; text-decoration:none;}
/* Icon-less wordmark set in the Apple system typeface (San Francisco on Apple
   devices; graceful fallback elsewhere), per the requested look. No mark. */
.cb-brand-name{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  font-weight:600; font-size:18px; letter-spacing:-.021em; color:var(--ink);
}
.cb-cmd{height:46px; width:min(400px,42vw); padding-inline:14px 8px; gap:10px; cursor:text; text-align:start;}
.cb-cmd-icon{display:flex; color:var(--slate);}
.cb-cmd-icon svg{width:16px;height:16px;}
.cb-cmd-text{flex:1; font-size:13px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cb-cmd-kbd{font-family:var(--mono); font-size:10.5px; color:var(--faint); border:1px solid var(--line); border-radius:5px; padding:3px 6px; background:var(--panel);}
.cb-top-right{height:46px; padding:0 5px; gap:2px;}
.cb-icon-btn{width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; color:var(--slate); position:relative; overflow:hidden; transition:background .12s,color .12s;}
.cb-icon-btn:hover{background:var(--mist); color:var(--ink);}
.cb-icon-btn svg{width:17px;height:17px;}
.cb-lang-badge{font-family:var(--mono); font-size:9px; font-weight:600; position:absolute; inset-block-end:3px; inset-inline-end:3px; color:var(--cobalt);}

/* ═══ TOOL RAIL — floating capsule ══════════════════════════════════════ */
.cb-rail{
  position:fixed; inset-inline-start:16px; inset-block-start:78px; inset-block-end:auto;
  width:48px; z-index:var(--z-float);
  display:flex; flex-direction:column; gap:2px; padding:6px; overflow:visible;
}
.cb-rail-btn{
  position:relative; width:36px; height:36px; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center; color:var(--slate); border-radius:6px; overflow:visible;
  transition:background .12s,color .12s;
}
.cb-rail-btn svg{width:18px;height:18px;stroke-width:1.8;}
.cb-rail-btn-label{ /* icon-only rail → label becomes a hover tooltip */
  position:absolute; inset-inline-start:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:var(--ink); color:var(--panel); font-family:var(--body); font-size:11px; font-weight:500;
  padding:4px 9px; border-radius:5px; white-space:nowrap; text-transform:capitalize;
  opacity:0; pointer-events:none; transition:opacity .12s; box-shadow:var(--shadow-1); z-index:5;
}
.cb-rail-btn:hover{background:var(--mist); color:var(--ink);}
.cb-rail-btn:hover .cb-rail-btn-label{opacity:1;}
.cb-rail-btn.active{background:var(--cobalt); color:#fff;}

/* ═══ INSPECTOR — floating report panel ═════════════════════════════════ */
.cb-inspector{
  position:fixed; inset-block-start:var(--insp-m); inset-block-end:var(--insp-m);
  inset-inline-end:var(--insp-m); width:var(--insp-w); z-index:var(--z-float);
  display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); will-change:transform;
  transition:transform .3s cubic-bezier(.32,.72,.24,1), opacity .2s;
  /* hidden by DEFAULT (also when the attribute is unset) — shown only on true */
  transform:translateX(calc(100% + var(--insp-m)*2)); opacity:0; pointer-events:none;
}
[dir="rtl"] .cb-inspector{transform:translateX(calc(-100% - var(--insp-m)*2));}
body[data-inspector-open="true"] .cb-inspector{transform:translateX(0); opacity:1; pointer-events:auto;}
/* signature: meridian tick ruler on the inline-start edge */
.cb-inspector::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:7px; pointer-events:none; z-index:2;
  background:
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 8px) left top/4px 100% no-repeat,
    repeating-linear-gradient(to bottom, rgba(20,30,40,.26) 0 1px, transparent 1px 40px) left top/7px 100% no-repeat;
}
[data-theme="dark"] .cb-inspector::before{background:
  repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 8px) left top/4px 100% no-repeat,
  repeating-linear-gradient(to bottom, rgba(180,205,230,.3) 0 1px, transparent 1px 40px) left top/7px 100% no-repeat;}
[dir="rtl"] .cb-inspector::before{inset-inline-start:auto; inset-inline-end:0; background-position:right top;}
.cb-insp-head{
  flex:none; display:flex; align-items:center; gap:10px; padding:15px 16px 13px 22px;
  border-bottom:1px solid var(--line-soft);
}
[dir="rtl"] .cb-insp-head{padding:15px 22px 13px 16px;}
.cb-insp-title{
  flex:1; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cobalt);
}
.cb-insp-close{width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; color:var(--slate); background:transparent; border:0; cursor:pointer; transition:.12s;}
.cb-insp-close:hover{background:var(--mist); color:var(--ink);}
.cb-insp-close svg{width:16px;height:16px;}
.cb-insp-body{flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 0 14px;}

/* Sections + rows inside the inspector (explore / bookmarks / etc.) */
.cb-section{padding:12px 20px 4px;}
.cb-section + .cb-section{border-top:1px solid var(--line-soft); margin-top:9px;}
.cb-section-head{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--slate); margin-bottom:8px;
}
.cb-section-body{display:flex; flex-direction:column; gap:1px;}
.cb-row,.cb-reset-row{
  position:relative; display:flex; align-items:center; gap:11px; padding:8px 10px;
  border-radius:6px; cursor:pointer; border:0; background:transparent; overflow:hidden;
  transition:background .12s;
}
.cb-row:hover,.cb-reset-row:hover{background:var(--mist);}
.cb-row-icon,.cb-reset-icon{flex:none; width:30px; height:30px; display:grid; place-items:center;
  border-radius:7px; background:var(--inset); border:1px solid var(--line-soft); color:var(--slate);}
.cb-row-icon svg,.cb-reset-icon svg{width:16px;height:16px;}
.cb-row-main,.cb-reset-main{flex:1; min-width:0;}
.cb-row-name,.cb-reset-title{font-size:12.5px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cb-row-meta,.cb-reset-meta{font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cb-row.on{background:var(--cobalt-08);}
.cb-row.on .cb-row-icon{color:var(--cobalt); border-color:var(--cobalt-14); background:var(--cobalt-08);}
.cb-row.on .cb-row-name{color:var(--cobalt-ink);}
.cb-row-spinner{display:none; width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--cobalt);border-radius:50%;flex:none;}
.cb-row.is-loading{pointer-events:none;}
.cb-row.is-loading .cb-row-spinner{display:block; animation:spin .7s linear infinite;}
.cb-reset-row:hover{background:var(--danger-soft);}
.cb-reset-row:hover .cb-reset-title{color:var(--danger);}
.cb-empty-state{display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; padding:34px 22px; color:var(--faint);}
.cb-empty-icon{color:var(--line);} .cb-empty-icon svg{width:36px;height:36px;stroke-width:1.4;}
.cb-empty-title{font-size:12.5px; font-weight:600; color:var(--slate);}
.cb-empty-sub{font-size:12px; color:var(--faint); max-width:26ch;}

/* ═══ RESULTS report (results-section / results-kv) ═════════════════════ */
.results-section{padding:12px 20px 4px;}
.results-section + .results-section{border-top:1px solid var(--line-soft); margin-top:9px;}
.results-h{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); margin-bottom:6px;}
.results-kv{display:flex; flex-direction:column;}
.results-kv-row{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:5px 0;}
.results-kv-k{font-size:12.5px; color:var(--slate);}
.results-kv-v{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink);
  font-variant-numeric:tabular-nums; text-align:end; white-space:nowrap; flex:none;}
.results-kv-v small{font-size:10.5px; font-weight:400; color:var(--faint); margin-inline-start:3px;}
.results-kv-v b,.results-kv-v strong{color:var(--cobalt-ink); font-weight:600;}
.results-list{margin:0; padding:6px 0 6px 16px; list-style:none;}
[dir="rtl"] .results-list{padding:6px 16px 6px 0;}
.results-list li{font-size:12px; color:var(--slate); padding:3px 0; position:relative;}
.results-list li::before{content:""; position:absolute; inset-inline-start:-13px; top:8px; width:5px; height:5px; border-radius:50%; background:var(--cobalt);}
[dir="rtl"] .results-list li::before{inset-inline-start:auto; inset-inline-end:-13px;}
.results-actions{display:flex; flex-direction:column; gap:8px; margin:14px 20px 6px;}

/* PWA install card — glass, bottom-centre, above the mobile tab bar */
.cb-install-card{position:fixed; z-index:9600; inset-inline:0; margin-inline:auto;
  inset-block-end:calc(env(safe-area-inset-bottom,0px) + 86px);
  width:min(420px, calc(100vw - 28px));
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--panel-glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-2);}
.cb-install-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.cb-install-txt b{font-size:13.5px; color:var(--ink);}
.cb-install-txt span{font-size:11.5px; color:var(--slate);}
.cb-install-yes{inline-size:auto !important; padding-inline:16px;}
@media (min-width:761px){ .cb-install-card{inset-block-end:24px;} }

/* Cold-start: analyze-around-me hero + example chips (Explore panel) */
.cb-aroundme{margin:12px 20px 4px; width:calc(100% - 40px);}
.cb-examples{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:4px 4px 6px;}
.cb-example-chip{display:inline-flex; align-items:center; gap:8px; padding:10px 12px;
  background:var(--inset); border:1px solid var(--line-soft); border-radius:8px;
  color:var(--ink); font-family:var(--btn-font,var(--ui)); font-size:12px; font-weight:500;
  cursor:pointer; transition:background .14s,border-color .14s; text-align:start;}
.cb-example-chip svg{flex:none; width:15px; height:15px; color:var(--cobalt-ink);}
.cb-example-chip:hover{background:var(--cobalt-08); border-color:var(--cobalt-14);}

/* Elevation-profile mini chart (Tools panel) */
.profile-chart{display:block; width:100%; height:72px; margin:6px 0 4px; border-radius:6px;
  background:var(--inset); border:1px solid var(--line-soft);}
.profile-area{fill:var(--cobalt-08); stroke:none;}
.profile-line{fill:none; stroke:var(--cobalt); stroke-width:1.6; vector-effect:non-scaling-stroke;}
.profile-stats{display:flex; flex-wrap:wrap; gap:4px 14px; font-family:var(--mono);
  font-size:11px; color:var(--slate);}
.profile-stats bdi:first-child{color:var(--cobalt-ink); font-weight:600;}

/* Honest failure state — a failed layer NEVER renders zeros */
.results-unavail{display:flex; align-items:center; gap:8px; padding:10px 12px; margin:4px 0 8px;
  background:var(--inset); border:1px dashed var(--line); border-radius:8px;
  font-size:12px; color:var(--slate);}
.results-unavail-ic{flex:none; width:14px; height:14px; color:var(--faint);}
.results-retry{flex:none; margin-inline-start:auto; appearance:none; border:1px solid var(--cobalt-14);
  background:var(--cobalt-08); color:var(--cobalt-ink); font-family:var(--mono); font-size:11px;
  font-weight:600; padding:4px 12px; border-radius:7px; cursor:pointer; transition:background .14s;}
.results-retry:hover{background:var(--cobalt); color:#fff;}

/* Provenance line — data source + fetch time under the results */
.results-prov{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:10px 20px 4px;
  padding-top:10px; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10px; color:var(--faint); line-height:1.6;}
.results-prov a{color:var(--cobalt-ink); text-decoration:none;}
.results-prov a:hover{text-decoration:underline;}

/* ═══ PRINT — one-page bilingual data brief (App.printReport) ═══════════
   Hide all chrome; the results inspector becomes a clean printed report. */
@media print{
  #map,.cb-top,.cb-rail,.cb-status,.cb-map-tools,.cb-mobile-tabs,.cb-pills,
  .leaflet-control-container,.toast,.main-drawer,.drawer-backdrop,.cb-cmdp-bg,
  .cb-insp-head .cb-insp-close,.results-actions,.results-retry,.modal,.ob-backdrop{display:none !important;}
  body{background:#fff !important;}
  .cb-inspector{position:static !important; inset:auto !important; width:100% !important;
    height:auto !important; max-height:none !important; transform:none !important;
    box-shadow:none !important; border:0 !important; background:#fff !important;
    backdrop-filter:none !important; visibility:visible !important;}
  .cb-inspector::before{display:none !important;}
  .cb-insp-body{max-height:none !important; overflow:visible !important; color:#111 !important;}
  .cb-insp-head{border-bottom:2px solid #1B47C4 !important; background:#fff !important;}
  .cb-insp-title::after{content:" — basira.earth"; font-size:10px; color:#5A6673;}
  .results-section{break-inside:avoid;}
  .results-prov{color:#5A6673 !important;}
}
.cb-detect-btn,.results-actions button,.tool-inputs button,.cb-detect-btn-draw,.ob-actions .primary{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding-inline:14px; width:100%;
  font-family:var(--ui); font-size:12.5px; font-weight:600; letter-spacing:.01em;
  border-radius:6px; cursor:pointer; border:1px solid var(--cobalt); background:var(--cobalt); color:#fff;
  position:relative; overflow:hidden; transition:background .12s;
}
.cb-detect-btn:hover,.results-actions button:hover,.tool-inputs button:hover{background:var(--cobalt-ink);}
.cb-detect-btn svg,.results-actions button svg{width:14px;height:14px;}
.cb-detect-btn-draw{background:var(--panel); color:var(--ink); border-color:var(--line);}
.cb-detect-btn-draw:hover{background:var(--mist); border-color:var(--slate);}
.cb-detect-hint,.cb-tools-hint{font-size:11.5px; color:var(--faint); text-align:center; margin-top:8px; line-height:1.5;}
.cb-detect-area{font-family:var(--mono); font-size:12px; color:var(--cobalt-ink); text-align:center; margin:2px 0 12px;}

/* Tools cards */
.tool-card{padding:12px 20px; border-top:1px solid var(--line-soft);}
.cb-section:first-child + .tool-card,.tool-card:first-child{border-top:0;}
.tool-card h3{margin:0 0 4px; font-family:var(--ui); font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px;}
.tool-help{font-size:11.5px; color:var(--faint); line-height:1.5; margin-bottom:9px;}
.tool-inputs{display:flex; flex-direction:column; gap:8px;}
.tool-inputs input,.tool-inputs select{height:36px; padding-inline:11px; font-family:var(--mono); font-size:13px;
  color:var(--ink); background:var(--inset); border:1px solid var(--line); border-radius:6px;}
.tool-inputs input:focus,.tool-inputs select:focus{outline:none; border-color:var(--cobalt); box-shadow:0 0 0 3px var(--cobalt-08);}
.tool-result,.tool-output{margin-top:9px; padding:10px 12px; background:var(--inset); border:1px solid var(--line-soft); border-radius:6px;
  font-family:var(--mono); font-size:12px; color:var(--slate); line-height:1.6;}
.tool-status{font-family:var(--mono); font-size:11px;}
.tool-status.ok{color:var(--ok);} .tool-status.err{color:var(--danger);} .tool-status.pending{color:var(--cobalt-ink);}
.tool-attribution{font-size:10px; color:var(--faint); margin-top:6px;}

/* Detection */
.cb-det-summary{display:flex; align-items:baseline; gap:10px; padding:6px 20px 12px; border-bottom:1px solid var(--line-soft); margin-bottom:8px;}
.cb-det-summary-total{font-family:var(--mono); font-weight:600; font-size:24px; color:var(--cobalt-ink); line-height:1;}
.cb-det-summary-meta{font-size:11px; color:var(--faint);}
.cb-det-cat{margin:0 14px 6px; border:1px solid var(--line-soft); border-radius:7px; overflow:hidden;}
.cb-det-cat-head{display:flex; align-items:center; gap:9px; padding:8px 11px; cursor:pointer; background:var(--inset);}
.cb-det-cat-head input,.cb-det-class input{accent-color:var(--cobalt); width:15px; height:15px;}
.cb-det-dot{width:9px; height:9px; border-radius:2px; flex:none;}
.cb-det-cat-name{flex:1; font-size:12.5px; font-weight:500; color:var(--ink);}
.cb-det-count{font-family:var(--mono); font-size:12px; color:var(--faint);}
.cb-det-cat-body{padding:4px 11px 9px;}
.cb-det-class{display:flex; align-items:center; gap:9px; padding:5px 0; font-size:12px; color:var(--slate);}
.cb-det-class-name{flex:1;}
.cb-detect-progress{padding:20px; text-align:center;}
.cb-detect-progress-head{font-size:12px; color:var(--slate); margin-bottom:8px;}
.cb-detect-progress-stage{font-family:var(--mono); font-size:11px; color:var(--cobalt-ink);}
.cb-detect-empty{text-align:center; color:var(--faint); padding:24px; font-size:12.5px;}

/* Layer rows */
.layer-section{margin:0 6px 10px;}
.layer-section-head{display:flex; align-items:center; gap:8px; cursor:pointer; padding:8px 4px;
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--slate); border-bottom:1px solid var(--line-soft);}
.layer-section-chev{margin-inline-start:auto; transition:transform .2s; width:14px;height:14px;}
.layer-section.is-collapsed .layer-section-chev{transform:rotate(-90deg);}
.layer-section.is-collapsed .layer-section-body{display:none;}
/* ══ LAYER ROWS — Meridian "Segmented" control system (design-workflow) ══
   Deterministic CSS grid → zero wrap/overlap BY CONSTRUCTION. Explicit
   grid-row on every cell so variants never evict meta/date to a 3rd row.
   Grid scoped to interactive label.layer-row; the density-report div.layer-row
   keeps a flex fallback. RTL mirrors via logical props + one knob sign-flip. */
label.layer-row{
  display:grid;
  grid-template-columns:[toggle] auto [name] minmax(0,1fr) [meta] auto [date] auto;
  align-items:center; column-gap:0; row-gap:0;
  min-block-size:38px; padding-block:6px; padding-inline:8px;
  border-radius:8px; cursor:pointer; transition:background .14s ease;
  -webkit-tap-highlight-color:transparent;
}
label.layer-row:hover{background:var(--mist);}
.layer-row:not(label){display:flex; flex-wrap:wrap; align-items:center; gap:6px 11px; padding:8px; border-radius:6px; cursor:default;}

/* visually-hidden native control (JS + a11y hook; stays direct prev-sibling of track) */
.layer-row input{position:absolute; inline-size:1px; block-size:1px; margin:-1px; padding:0; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; pointer-events:none;}

/* toggle switch — soft inset track, floating spring knob (visual 36×22, knob 18, travel 14) */
.layer-track{grid-column:toggle; grid-row:1; position:relative; flex:none; inline-size:36px; block-size:22px; border-radius:999px;
  background:color-mix(in srgb, var(--slate) 22%, transparent);
  box-shadow:inset 0 1px 2px rgba(20,30,40,.14), inset 0 0 0 1px var(--line-soft);
  transition:background .28s cubic-bezier(.34,1.4,.5,1), box-shadow .2s ease;}
/* Kill the LEGACY style.css toggle knob (it used .layer-track::after with a
   teal --blue background) — our knob is the real .layer-dot element. Without
   this, the old ::after paints a dark circle over every switch. The whole
   label.layer-row is the touch target, so no separate hit-pad is needed. */
.layer-track::after{display:none !important;}
.layer-dot{--tx:0px; --sc:1; position:absolute; inset-block-start:2px; inset-inline-start:2px; inline-size:18px; block-size:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 1px rgba(20,30,40,.10), 0 2px 5px rgba(20,30,40,.20), inset 0 0 0 .5px rgba(20,30,40,.05);
  transform:translateX(var(--tx)) scale(var(--sc)); transition:transform .3s cubic-bezier(.34,1.56,.5,1); will-change:transform;}
.layer-row input:checked + .layer-track,.layer-row.is-on .layer-track{background:var(--cobalt);
  box-shadow:inset 0 1px 2px rgba(27,71,196,.30), inset 0 0 0 1px color-mix(in srgb, var(--cobalt-ink) 35%, transparent);}
.layer-row input:checked + .layer-track .layer-dot,.layer-row.is-on .layer-track .layer-dot{--tx:14px;}
[dir="rtl"] .layer-row input:checked + .layer-track .layer-dot,[dir="rtl"] .layer-row.is-on .layer-track .layer-dot{--tx:-14px;}
.layer-row:active .layer-dot{--sc:.92;}
.layer-row input:focus-visible + .layer-track{outline:2px solid var(--cobalt); outline-offset:3px;}

/* label + trailing badges — separate columns so nothing collides */
.layer-name{grid-column:name; grid-row:1; min-inline-size:0; padding-inline-start:11px; padding-inline-end:10px; font-size:12.5px; font-weight:500; line-height:1.3; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.layer-meta{grid-column:meta; grid-row:1; justify-self:end; font-family:var(--mono); font-size:10.5px; font-variant-numeric:tabular-nums; color:var(--faint); white-space:nowrap;}
.layer-date{grid-column:date; grid-row:1; justify-self:end; margin-inline-start:6px; font-family:var(--mono); font-size:10px; font-variant-numeric:tabular-nums; color:var(--cobalt-ink); white-space:nowrap;}

/* variants → inset segmented control on grid row 2, indented under the label */
.layer-variants{grid-column:name / -1; grid-row:2; justify-self:start; margin-block-start:7px; margin-inline-start:11px;
  display:inline-flex; flex-wrap:wrap; gap:2px; row-gap:2px; inline-size:fit-content; max-inline-size:100%;
  padding:2px; background:var(--inset); border:1px solid var(--line-soft); border-radius:9px;}
.layer-variant{appearance:none; -webkit-appearance:none; flex:none; margin:0; border:0; min-block-size:24px;
  display:inline-flex; align-items:center; justify-content:center; padding-inline:11px;
  font-family:var(--mono); font-size:10.5px; font-weight:500; line-height:1; letter-spacing:.02em;
  color:var(--slate); background:transparent; border-radius:7px; cursor:pointer; white-space:nowrap;
  transition:color .16s ease, background .16s ease, box-shadow .16s ease;}
.layer-variant:hover:not(.on){color:var(--ink); background:color-mix(in srgb, var(--slate) 9%, transparent);}
.layer-variant.on{color:var(--cobalt-ink); font-weight:600; background:var(--panel); box-shadow:0 1px 2px rgba(20,30,40,.12), 0 0 0 1px var(--cobalt-14);}
.layer-variant:focus-visible{outline:2px solid var(--cobalt); outline-offset:2px;}
@media (hover:none){ .layer-variant:hover:not(.on){background:transparent; color:var(--slate);} }

/* Live search + filters */
.live-search{position:relative; margin:0 14px 12px;}
.live-search-input{width:100%; height:36px; padding-inline:34px 30px; font-family:var(--mono); font-size:12.5px; color:var(--ink); background:var(--inset); border:1px solid var(--line); border-radius:6px;}
.live-search-input:focus{outline:none; border-color:var(--cobalt); box-shadow:0 0 0 3px var(--cobalt-08);}
.live-search-icon{position:absolute; inset-inline-start:11px; top:50%; transform:translateY(-50%); color:var(--faint); width:15px; height:15px;}
.live-search-clear{position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--faint); cursor:pointer;}
.live-search-results{margin-top:6px; display:flex; flex-direction:column; gap:1px; max-height:260px; overflow-y:auto;}
.live-result{display:flex; align-items:center; gap:10px; padding:8px; border-radius:6px; cursor:pointer;}
.live-result:hover{background:var(--mist);}
.live-result-icon{width:28px; height:28px; display:grid; place-items:center; border-radius:6px; background:var(--inset); border:1px solid var(--line-soft); color:var(--cobalt-ink);}
.live-result-title{font-size:12.5px; font-weight:500; color:var(--ink);}
.live-result-sub{font-family:var(--mono); font-size:10.5px; color:var(--faint);}
.live-result-head{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); padding:8px 4px 4px;}
.live-result.muted{color:var(--faint);} .live-result.err{color:var(--danger);}
.live-quick{display:flex; flex-wrap:wrap; gap:6px; margin:0 14px 12px;}
.live-quick-chip{font-family:var(--mono); font-size:11px; line-height:1; padding:6px 11px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--slate); cursor:pointer; transition:color .15s ease, background .15s ease, border-color .15s ease;}
.live-quick-chip:hover{color:var(--ink); border-color:var(--slate);}
.live-quick-chip:focus-visible,.live-filter-chip:focus-visible,.live-type-chip:focus-visible{outline:2px solid var(--cobalt); outline-offset:2px;}
.live-quick-chip.on{background:var(--cobalt); color:#fff; border-color:var(--cobalt);}
.live-filters{margin:0 14px; padding-top:10px; border-top:1px solid var(--line-soft);}
.live-filter-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.live-filter-label{font-size:11.5px; color:var(--slate);}
.live-filter-num{font-family:var(--mono); font-size:11px; color:var(--cobalt-ink);}
.live-filter-chips{display:flex; flex-wrap:wrap; gap:5px;}
.live-filter-chip{font-family:var(--mono); font-size:10.5px; line-height:1; padding:5px 10px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--slate); cursor:pointer; transition:color .15s ease, background .15s ease, border-color .15s ease;}
.live-filter-chip:hover{color:var(--ink); border-color:var(--slate);}
.live-filter-chip.on{background:var(--cobalt-08); border-color:var(--cobalt-14); color:var(--cobalt-ink); font-weight:600;}
.live-type-chip{--c:var(--cobalt); display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px; padding:3px 9px; border-radius:20px; border:1px solid color-mix(in srgb,var(--c) 40%,transparent); color:var(--slate); cursor:pointer;}
.live-type-chip.on{background:color-mix(in srgb,var(--c) 14%,transparent); border-color:var(--c);}
.live-filter-reset{font-size:10.5px; color:var(--cobalt-ink); background:none; border:0; cursor:pointer; padding:2px 0;}

/* ═══ STATUS chip — floating bottom-start ═══════════════════════════════ */
.cb-status{
  position:fixed; inset-block-end:16px; inset-inline-start:16px; inset-inline-end:auto; height:auto; width:auto;
  z-index:var(--z-float); display:flex; align-items:center; gap:0; padding:6px 6px;
  font-family:var(--mono); font-size:10.5px; color:var(--slate); letter-spacing:.02em;
}
.cb-status-group{display:flex; align-items:center;}
.cb-status-cell{display:flex; align-items:center; gap:6px; padding-inline:9px;}
.cb-status-lbl{text-transform:uppercase; letter-spacing:.1em; font-size:9px; color:var(--faint);}
.cb-status-val{color:var(--ink); font-variant-numeric:tabular-nums;}
.cb-status-val b{color:var(--cobalt-ink); font-weight:500;}
.cb-status-sep{width:1px; height:12px; background:var(--line);}
.cb-status-dot{width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 22%,transparent);}
#cb-status-attr,.cb-attr{color:var(--faint);}

/* ═══ ACTIVE-LAYER PILLS — floating ═════════════════════════════════════ */
.cb-pills{position:fixed; inset-block-start:78px; inset-inline-start:78px; z-index:var(--z-pills);
  display:flex; flex-wrap:wrap; gap:7px; max-width:min(46vw,520px); pointer-events:none;}
.cb-pill{pointer-events:auto; display:inline-flex; align-items:center; gap:8px; padding:5px 6px 5px 11px; border-radius:20px; font-size:11.5px;}
[dir="rtl"] .cb-pill{padding:5px 11px 5px 6px;}
.cb-pill-name{font-weight:500; color:var(--ink);}
.cb-pill-meta{font-family:var(--mono); font-size:10px; color:var(--cobalt-ink);}
.cb-pill-x{width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--mist); border:0; color:var(--slate); cursor:pointer;}
.cb-pill-x:hover{background:var(--danger-soft); color:var(--danger);}

/* ═══ MAP CONTROLS — basemap + locate, floating ═════════════════════════ */
/* Animate transform (compositor) not inset (layout) so the shift is smooth. */
.cb-map-tools{position:fixed; inset-block-end:16px; inset-inline-end:16px; z-index:var(--z-float);
  display:flex; align-items:center; gap:8px; will-change:transform;
  transition:transform .3s cubic-bezier(.32,.72,.24,1);}
body[data-inspector-open="true"] .cb-map-tools{transform:translateX(calc((var(--insp-zone) - 16px) * -1));}
[dir="rtl"] body[data-inspector-open="true"] .cb-map-tools{transform:translateX(calc(var(--insp-zone) - 16px));}
.cb-basemap{display:flex; overflow:hidden; padding:0;}
.cb-bm-btn{display:inline-flex; align-items:center; gap:6px; padding:8px 11px; background:transparent; border:0; border-inline-end:1px solid var(--line-soft); color:var(--slate); cursor:pointer; font-size:11.5px; transition:.12s;}
.cb-bm-btn:last-child{border-inline-end:0;}
.cb-bm-btn svg{width:15px;height:15px;}
.cb-bm-btn:hover{background:var(--mist); color:var(--ink);}
.cb-bm-btn.active{background:var(--cobalt-08); color:var(--cobalt-ink);}
.cb-locate-btn{width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; color:var(--slate); cursor:pointer; transition:.12s;}
.cb-locate-btn:hover{color:var(--cobalt-ink);}
.cb-locate-btn.is-locating{color:var(--cobalt); animation:pulse 1.2s ease-in-out infinite;}
/* basemap picker icon button — hidden on desktop (inline .cb-basemap bar shown
   there); appears on phones as the "layers" button that pops the map styles. */
.cb-basemap-btn{display:none; width:38px; height:38px; align-items:center; justify-content:center; color:var(--slate); cursor:pointer; transition:.12s;}
.cb-basemap-btn svg{width:19px; height:19px;}
.cb-basemap-btn:hover{color:var(--cobalt-ink);}
.cb-map-tools.bm-open .cb-basemap-btn{color:var(--cobalt-ink); background:var(--cobalt-08);}
.cb-locate-btn svg{width:18px;height:18px;}

/* Default marker pin (self-hosted SVG divIcon) — strip Leaflet's white box. */
.cb-pin{background:none !important; border:0 !important;}
.cb-pin svg{filter:drop-shadow(0 2px 3px rgba(15,23,32,.35));}

/* Leaflet controls — keep in the visible map area (top-inline-end, left of panel) */
.leaflet-top.leaflet-right{inset-block-start:78px; inset-inline-end:16px; will-change:transform; transition:transform .3s cubic-bezier(.32,.72,.24,1);}
body[data-inspector-open="true"] .leaflet-top.leaflet-right{transform:translateX(calc((var(--insp-zone) - 16px) * -1));}
[dir="rtl"] body[data-inspector-open="true"] .leaflet-top.leaflet-right{transform:translateX(calc(var(--insp-zone) - 16px));}
.leaflet-control-zoom,.leaflet-bar{border:1px solid var(--line) !important; border-radius:var(--r) !important; box-shadow:var(--shadow-1) !important; overflow:hidden; background:var(--panel-glass); backdrop-filter:blur(14px);}
.leaflet-control-zoom a,.leaflet-bar a{background:transparent !important; color:var(--slate) !important; border-block-end:1px solid var(--line-soft) !important; width:32px !important; height:32px !important; line-height:32px !important; font-size:15px !important;}
.leaflet-control-zoom a:hover,.leaflet-bar a:hover{background:var(--mist) !important; color:var(--ink) !important;}
.leaflet-control-attribution{background:var(--panel-glass) !important; color:var(--faint) !important; font-family:var(--mono); font-size:9.5px; border-radius:5px; padding:1px 6px; backdrop-filter:blur(8px);}
.leaflet-popup-content-wrapper{background:var(--panel); color:var(--ink); border-radius:var(--r); box-shadow:var(--shadow-2); border:1px solid var(--line);}
.leaflet-popup-tip{background:var(--panel); border:1px solid var(--line);}
.leaflet-popup-content{font-family:var(--body); font-size:12.5px; margin:11px 14px;}
.leaflet-popup-content .mono,.leaflet-popup-content code{font-family:var(--mono);}
.rev-geocode{font-family:var(--mono); font-size:11.5px;} .rev-geocode.loading{opacity:.6;}

/* ═══ COMMAND PALETTE ═══════════════════════════════════════════════════ */
.cb-cmdp-bg{position:fixed; inset:0; z-index:var(--z-cmdp); background:rgba(16,22,28,.36); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center; padding-top:12vh;}
.cb-cmdp-bg.open{display:flex;}
.cb-cmdp{width:min(620px,92vw); max-height:66vh; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); box-shadow:var(--shadow-2); background:var(--panel);}
.cb-cmdp-input{height:52px; padding-inline:20px 56px; border:0; border-bottom:1px solid var(--line-soft); font-family:var(--body); font-size:15px; color:var(--ink); background:transparent;}
.cb-cmdp-input:focus{outline:none;}
.cb-cmdp.is-busy .cb-cmdp-input{background-image:linear-gradient(90deg,transparent,var(--cobalt),transparent); background-size:40% 2px; background-repeat:no-repeat; background-position:0 100%; animation:cmdbusy 1s linear infinite;}
.cb-cmdp-results{flex:1; overflow-y:auto; padding:8px;}
.cb-cmdp-section{font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); padding:10px 12px 5px;}
.cb-cmdp-item{display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:6px; cursor:pointer; position:relative; overflow:hidden;}
.cb-cmdp-item:hover,.cb-cmdp-item.focused{background:var(--cobalt-08);}
.cb-cmdp-item-icon{width:32px; height:32px; display:grid; place-items:center; border-radius:6px; background:var(--inset); border:1px solid var(--line-soft); color:var(--cobalt-ink); flex:none;}
.cb-cmdp-item-icon svg{width:16px;height:16px;}
.cb-cmdp-item-title{font-size:13px; font-weight:500; color:var(--ink);}
.cb-cmdp-item-sub{font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-top:1px;}
.cb-cmdp-empty{padding:32px; text-align:center; color:var(--faint); font-size:13px;}
.cb-cmdp-foot{display:flex; gap:18px; padding:9px 16px; border-top:1px solid var(--line-soft); background:var(--inset); font-size:10.5px; color:var(--faint);}
kbd,.cb-cmdp-foot kbd{font-family:var(--mono); font-size:10px; padding:1px 5px; border:1px solid var(--line); border-radius:4px; background:var(--panel); color:var(--slate); margin-inline-end:3px;}

/* ═══ LOADING · TOAST · SKELETON ════════════════════════════════════════ */
.cb-mobile-tabs{display:none;}
/* Non-blocking: the "Working" overlay is a status indicator only — the user
   can keep panning/zooming the map while analysis streams. */
.loading-overlay{position:fixed; inset:0; z-index:var(--z-loading); display:flex; align-items:flex-start; justify-content:center; padding-top:14vh; background:none; pointer-events:none;}
.loading-content{pointer-events:auto;}
[data-theme="dark"] .loading-overlay{background:none;}
.loading-overlay.hidden{display:none;}
.loading-content{display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 40px; box-shadow:var(--shadow-2); min-width:250px; border-radius:var(--r-lg);}
.loading-text{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--slate);}
.loading-sub{font-family:var(--mono); font-size:12px; color:var(--cobalt-ink);}
.cb-globe-spin svg{width:52px; height:52px; color:var(--cobalt); animation:spin 3s linear infinite;}
.cb-globe-spin.lg svg{width:60px;height:60px;}
/* Stable bottom-centre anchor — no longer jumps with the inspector, and sits
   above the mobile tab bar / sheet so feedback is always visible. */
.toast{position:fixed; inset-block-end:20px; inset-inline:0; margin-inline:auto; width:max-content; z-index:9700;
  display:flex; align-items:center; gap:10px; max-width:min(340px,calc(100vw - 32px)); padding:11px 14px; border-inline-start:3px solid var(--cobalt);
  border-radius:var(--r); box-shadow:var(--shadow-2); font-size:12.5px; color:var(--ink);
  transform:translateY(12px); opacity:0; transition:transform .22s,opacity .22s;}
.toast.show{transform:translateY(0); opacity:1;}
.toast.ok{border-inline-start-color:var(--ok);} .toast.err{border-inline-start-color:var(--danger);}
.toast.warn{border-inline-start-color:var(--warn);} .toast.info{border-inline-start-color:var(--cobalt);}
.toast-action{margin-inline-start:auto; font-weight:600; color:var(--cobalt-ink); background:none; border:0; cursor:pointer; font-size:12px;}
.cb-skel-row{display:flex; gap:10px; padding:10px; align-items:center;}
.cb-skeleton{background:linear-gradient(90deg,var(--mist),var(--inset),var(--mist)); background-size:200% 100%; animation:shimmer 1.3s ease-in-out infinite; border-radius:5px;}
.cb-skeleton.dot{width:30px; height:30px; border-radius:7px; flex:none;}
.cb-skel-lines{flex:1; display:flex; flex-direction:column; gap:6px;}
.cb-skel-lines .line-a{height:11px; width:60%; background:var(--mist); border-radius:3px;}
.cb-skel-lines .line-b{height:9px; width:38%; background:var(--mist); border-radius:3px;}

/* ═══ MODALS · DRAWER · ONBOARDING ══════════════════════════════════════ */
.modal{position:fixed; inset:0; z-index:9200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(16,22,28,.4); backdrop-filter:blur(3px);}
.modal.hidden{display:none;}
.modal > div,.modal-card,.modal-inner{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-2); max-width:640px; width:100%; max-height:86vh; overflow:hidden; display:flex; flex-direction:column;}
.modal h2,.modal-head{font-family:var(--ui); font-size:16px; font-weight:600; color:var(--ink); padding:16px 20px; border-bottom:1px solid var(--line-soft); margin:0;}
.modal-body,.modal-content{padding:18px 20px; overflow-y:auto; font-size:13px; line-height:1.6; color:var(--slate);}
.modal-body h3{color:var(--ink); font-size:13px; margin:14px 0 6px; font-family:var(--ui);}
.modal-body a{color:var(--cobalt-ink);}
.modal-close{position:absolute; inset-block-start:14px; inset-inline-end:16px; width:30px; height:30px; display:grid; place-items:center; border-radius:6px; background:var(--mist); border:1px solid var(--line-soft); color:var(--slate); cursor:pointer;}
#help-popup,#confirm-popup{position:fixed; z-index:9300; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-2); padding:14px 16px; color:var(--ink);}
.main-drawer{position:fixed; inset-block:0; inset-inline-end:0; width:min(320px,86vw); z-index:9400; border-radius:0; box-shadow:var(--shadow-2); transform:translateX(100%); transition:transform .28s cubic-bezier(.32,.72,.24,1); display:flex; flex-direction:column; backdrop-filter:blur(18px);}
/* RTL: dock on the inline-start edge (visually the right, matching the menu
   button) and hide OFF that edge — translateX(100%) pushes it off-screen.
   The previous translateX(-100%) pushed it INTO view, so the closed drawer
   sat visible in the middle of the screen. */
[dir="rtl"] .main-drawer{inset-inline-end:auto; inset-inline-start:0; transform:translateX(100%);}
.main-drawer.open{transform:translateX(0);}
.drawer-header{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line-soft);}
.drawer-header h2{font-family:var(--ui); font-size:15px; font-weight:600; margin:0; color:var(--ink);}
.drawer-close{width:30px; height:30px; display:grid; place-items:center; border-radius:6px; background:var(--mist); border:0; color:var(--slate); cursor:pointer;}
.drawer-nav{display:flex; flex-direction:column; padding:8px;}
.drawer-nav a{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:6px; color:var(--slate); text-decoration:none; font-size:13.5px; font-weight:500;}
.drawer-nav a:hover{background:var(--mist); color:var(--ink);}
.drawer-nav a svg{width:18px;height:18px; color:var(--cobalt-ink);}
#drawer-backdrop{position:fixed; inset:0; z-index:9390; background:rgba(16,22,28,.32); opacity:0; visibility:hidden; transition:opacity .25s;}
#drawer-backdrop.visible{opacity:1; visibility:visible;}
.ob-overlay{position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; padding:20px;}
.ob-overlay[hidden]{display:none;}
.ob-backdrop{position:absolute; inset:0; background:rgba(16,22,28,.42); backdrop-filter:blur(4px);}
.ob-card{position:relative; z-index:1; width:min(440px,92vw); box-shadow:var(--shadow-2); border-radius:var(--r-lg); padding:32px 28px 22px; text-align:center;}
.ob-card #ob-icon,.ob-card .ob-icon{width:54px; height:54px; margin:0 auto 16px; color:var(--cobalt); display:grid; place-items:center;}
.ob-card #ob-icon svg,.ob-card .ob-icon svg{width:54px;height:54px;stroke-width:1.4;}
.ob-card h2,#ob-title{font-family:var(--ui); font-size:20px; font-weight:600; color:var(--ink); margin:0 0 10px; letter-spacing:-.01em;}
#ob-body,.ob-body{font-size:13.5px; color:var(--slate); line-height:1.6; max-width:34ch; margin:0 auto 20px;}
#ob-dots,.ob-dots{display:flex; gap:6px; justify-content:center; margin-bottom:20px;}
.ob-dot{width:7px; height:7px; border-radius:50%; background:var(--line); transition:.2s;}
.ob-dot.on{background:var(--cobalt); width:20px; border-radius:20px;}
.ob-actions{display:flex; gap:10px; justify-content:center;}
.ob-actions button{height:38px; padding-inline:22px; font-family:var(--ui); font-size:13px; font-weight:600; border-radius:6px; cursor:pointer; border:1px solid transparent;}
.ob-actions button:first-child{background:transparent; color:var(--slate); border-color:var(--line);}
.ob-actions .primary,.ob-actions button:last-child{background:var(--cobalt); color:#fff; width:auto;}
.ob-actions button:last-child:hover{background:var(--cobalt-ink);}

/* Snapshot grid (if surfaced) */
.snap-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:7px; overflow:hidden; margin:0 20px;}
.snap-cell{background:var(--panel); padding:11px 13px;}
.snap-cell .lbl{font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);}
.snap-cell .v{font-family:var(--mono); font-weight:600; font-size:18px; color:var(--ink); margin-top:3px;}
.snap-cell .sub{font-size:10.5px; color:var(--faint); margin-top:2px;}

/* ═══ ANIMATIONS ════════════════════════════════════════════════════════ */
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes cmdbusy{0%{background-position:-40% 100%;}100%{background-position:140% 100%;}}
.cb-ripple{position:absolute; border-radius:50%; transform:scale(0); background:currentColor; opacity:.12; pointer-events:none; animation:ripple .5s ease-out;}
@keyframes ripple{to{transform:scale(2.4); opacity:0;}}

/* ═══ RESPONSIVE — TABLET ═══════════════════════════════════════════════ */
@media (max-width:1000px){
  :root{--insp-w:340px;}
  .cb-cmd{width:min(320px,38vw);}
}

/* ═══ RESPONSIVE — MOBILE (native-app feel) ═════════════════════════════ */
@media (max-width:760px){
  html,body{overscroll-behavior:none;}
  /* the sheet covers the map, so hide the floating map controls while it's up */
  body[data-inspector-open="true"] .cb-map-tools,
  body[data-inspector-open="true"] .leaflet-control-zoom{opacity:0; pointer-events:none;}

  /* top: search collapses to a single icon button (tap → full-screen search);
     theme + lang as icon buttons on the far end. Minimal, no verbose text. */
  .cb-top{inset-inline:12px; inset-block-start:calc(env(safe-area-inset-top,0px) + 12px); width:auto; gap:0;}
  .cb-top-left{display:none;}
  .cb-top-center{flex:none;}
  .cb-cmd{width:48px; height:48px; border-radius:50%; padding:0; max-width:48px;
    display:flex; align-items:center; justify-content:center;}
  .cb-cmd-text,.cb-cmd-kbd{display:none;}
  .cb-cmd-icon{color:var(--ink); flex:none;}
  .cb-cmd-icon svg{width:20px; height:20px;}
  .cb-top-right{position:fixed; inset-block-start:calc(env(safe-area-inset-top,0px) + 12px); inset-inline-end:12px; height:48px; border-radius:24px; padding:0 4px; gap:0;}
  .cb-icon-btn{width:44px; height:44px;}
  /* the 3-dots menu is redundant on phones — the "More" tab opens the same drawer */
  #cb-app-menu{display:none;}

  .cb-rail{display:none;}
  .cb-status{display:none;}
  .cb-pills{inset-block-start:calc(env(safe-area-inset-top,0px) + 72px); inset-inline-start:12px; max-width:calc(100vw - 24px);}

  /* Bottom-inline-end control column: [basemap-style button] over [locate].
     The wide Satellite/Light/Dark bar is replaced by a single layers-icon
     button that pops the styles (see .bm-open below). */
  .cb-map-tools{flex-direction:column; align-items:flex-end; gap:8px;
    inset-block-end:calc(env(safe-area-inset-bottom,0px) + 84px); inset-inline-end:12px; transition:opacity .2s;}
  .cb-basemap-btn{display:flex; width:44px; height:44px;}
  .cb-locate-btn{width:44px; height:44px;}

  /* Basemap style popup — floats above the layers button when open. */
  .cb-basemap{display:none;}
  .cb-map-tools.bm-open .cb-basemap{
    display:flex; flex-direction:column; gap:2px; padding:6px;
    position:absolute; inset-block-end:calc(100% + 8px); inset-inline-end:0;
    border-radius:14px; box-shadow:var(--shadow-2); min-width:160px;
  }
  .cb-map-tools.bm-open .cb-bm-btn{width:100%; justify-content:flex-start; gap:10px; padding:10px 12px; border-radius:9px; border-inline-end:0; font-size:13px;}
  .cb-map-tools.bm-open .cb-bm-btn svg{width:18px; height:18px;}

  /* Leaflet's own layer switcher is redundant with the Layers sheet. */
  .leaflet-control-layers{display:none !important;}
  /* Zoom +/- sat top-left by default and collided with the top icon cluster.
     Re-anchor the whole control container (position:absolute inside the full-
     bleed map) to the bottom-inline-end, above the locate button — logical
     props so it mirrors correctly in RTL, and no fixed-positioning fragility. */
  .leaflet-top.leaflet-left,.leaflet-top.leaflet-right{
    inset-block-start:auto !important; inset-block-end:calc(env(safe-area-inset-bottom,0px) + 188px) !important;
    inset-inline-start:auto !important; inset-inline-end:12px !important;
    transform:none !important;
  }
  /* 44px-wide to match the layers + locate buttons below → one aligned column */
  .leaflet-control-zoom{margin:0 !important; transition:opacity .2s; width:44px;}
  .leaflet-control-zoom a{width:44px !important; height:40px !important; line-height:40px !important;}

  /* Attribution: pin it just above the tab bar on the inline-start so it never
     sits under the bottom nav. */
  .leaflet-bottom.leaflet-right{inset-inline-end:auto; inset-inline-start:0; inset-block-end:calc(env(safe-area-inset-bottom,0px) + 76px);}
  .leaflet-control-attribution{font-size:9px !important; background:rgba(255,255,255,.55) !important; padding:1px 6px !important; border-radius:0 6px 0 0;}
  body[data-inspector-open="true"] .leaflet-bottom.leaflet-right{opacity:0;}

  /* inspector → real draggable bottom sheet, driven by JS inline transform */
  .cb-inspector{
    inset-block-start:auto; inset-block-end:0; inset-inline:0; width:auto; height:94vh; height:94dvh;
    border-radius:18px 18px 0 0; border-bottom:0; box-shadow:0 -10px 44px rgba(15,23,32,.22);
    background:var(--panel); backdrop-filter:none;              /* opaque: cheaper on mobile GPUs */
    transform:translateY(100%);                                /* hidden by default; JS drives when open */
    transition:transform .34s cubic-bezier(.32,.72,.24,1); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 84px);
    touch-action:pan-y;
  }
  [dir="rtl"] .cb-inspector{transform:translateY(100%);}
  .cb-inspector::before{display:none;}
  .cb-insp-head{position:relative; padding-top:22px; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none;}
  .cb-insp-head::before{content:""; position:absolute; inset-block-start:9px; inset-inline:0; margin-inline:auto; width:40px; height:5px; border-radius:5px; background:var(--faint);}
  .cb-insp-body{overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}

  /* thumb-sized dismiss/remove controls */
  .cb-insp-close{width:44px; height:44px;}
  .cb-pill-x{width:26px; height:26px;}

  /* mobile bottom tab bar — floating pill */
  .cb-mobile-tabs{display:flex; position:fixed; z-index:9100;
    inset-inline:12px; inset-block-end:calc(env(safe-area-inset-bottom,0px) + 10px);
    height:60px; border-radius:18px; padding:5px; box-shadow:var(--shadow-2);
    background:var(--panel-glass); backdrop-filter:blur(12px) saturate(1.1); border:1px solid var(--line);}
  .cb-mobile-tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:0; color:var(--slate); cursor:pointer; border-radius:12px; position:relative; overflow:hidden;
    font-family:var(--ui); font-size:9.5px; font-weight:600; -webkit-tap-highlight-color:transparent;}
  .cb-mobile-tab svg{width:20px;height:20px;}
  .cb-mobile-tab.active{color:var(--cobalt-ink); background:var(--cobalt-08);}
  body.cmdp-open .cb-mobile-tabs{display:none;}      /* don't clip the palette */

  .toast{inset-block-end:calc(env(safe-area-inset-bottom,0px) + 82px);}   /* above the tab bar, still centred */

  /* command palette → full-screen search sheet with a real close button */
  .cb-cmdp-bg{padding-top:0; align-items:stretch;}
  .cb-cmdp{width:100%; max-width:none; height:100%; max-height:none; border-radius:0; border:0;
    background:var(--panel); backdrop-filter:none; padding-top:env(safe-area-inset-top,0px);}
  .cb-cmdp-input{padding-inline-end:56px;}
  .cb-cmdp-results{overscroll-behavior:contain;}
  .cb-cmdp-close{display:flex;}

  /* draw toolbar sits below the search pill, never under it */
  .draw-hint{inset-block-start:calc(env(safe-area-inset-top,0px) + 74px) !important; inset-inline:12px !important; margin-inline:0 !important; width:auto !important; justify-content:center;}

  /* kill sticky :hover after a tap on touch devices */
}
/* touch devices: no emulated sticky hover */
@media (hover:none){
  .cb-rail-btn:hover,.cb-icon-btn:hover,.cb-bm-btn:hover,.cb-row:hover,.cb-reset-row:hover,
  .cb-cmdp-item:hover,.live-result:hover,.layer-row:hover,.drawer-nav a:hover,.cb-insp-close:hover,
  .cb-locate-btn:hover{background:transparent; color:var(--slate);}
  .cb-rail-btn.active:hover{background:var(--cobalt); color:#fff;}
}
/* command-palette close button — always visible so touch users can dismiss */
.cb-cmdp-close{display:flex; position:absolute; inset-block-start:calc(env(safe-area-inset-top,0px) + 8px); inset-inline-end:12px;
  width:40px; height:40px; align-items:center; justify-content:center; border-radius:8px; background:var(--mist); border:0; color:var(--slate); cursor:pointer; z-index:2;}
.cb-cmdp-close:hover{background:var(--line); color:var(--ink);}
.cb-cmdp-close svg{width:20px;height:20px;}
@media (max-width:400px){ .cb-cmd-text{font-size:12px;} }

/* ═══ ACCESSIBILITY ═════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}


/* ══════════════════════════════════════════════════════════════════════════
   BASIRA · MERIDIAN — UNIFIED CONTROL SYSTEM  (drop-in override)
   Load AFTER redesign.css. Overrides existing classes ONLY; every JS hook is
   preserved (.active .on .is-loading .is-locating .bm-open .focused .muted .err).
   One radius (8) · one 32/36/40+44 icon scale · one Plex-Sans text button ·
   one transition · one focus ring. Logical props only → RTL mirrors perfectly.
   Fixes: mixed radii (0/6/7/8/50%), off-scale icon buttons (28/30/38), the
   PRIMARY/onboarding/mobile-tab buttons rendering in the Bricolage DISPLAY face,
   and the 0-radius loose basemap segments. Does NOT touch .layer-track/.layer-dot,
   .layer-variant, or the .live-*-chip family (already premium).
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ONE motion curve + ONE focus ring for the whole system */
  --t:.14s cubic-bezier(.4,0,.2,1);
  --ring-w:2px; --ring-c:var(--cobalt); --ring-o:2px;

  /* Icon-button size scale (sm compact-close · md chrome · lg map controls) */
  --ib-sm:32px; --ib-md:36px; --ib-lg:40px; --ib-touch:44px;

  /* One height for every text/action button + form control */
  --ctl-h:36px;

  /* One nested radius for decorative icon tiles inside rows/cmdp/results.
     6px reads as intentionally concentric inside the 8px control corner. */
  --r-nest:6px;

  /* THE FONT FIX. redesign.css sets --ui:'Bricolage',… (the DISPLAY face) and
     text buttons used var(--ui). Controls are UI text → Plex Sans. --ui is left
     UNTOUCHED so headings + the wordmark keep Bricolage. One knob: --btn-font. */
  --btn-font:'PlexS','PlexAr',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ════════════════════════════════════════════════════════════════════════════
   1 · ICON BUTTONS — one shape, one radius, one hover, one active.
   NOTE: no overflow:hidden here — .cb-rail-btn's hover tooltip must stay visible.
   The ring is an outline, so it is never clipped regardless.
   ════════════════════════════════════════════════════════════════════════════ */
.cb-rail-btn,.cb-icon-btn,.cb-insp-close,.cb-cmdp-close,
.modal-close,.drawer-close,
.cb-locate-btn,.cb-basemap-btn{
  box-sizing:border-box; flex:none; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--t),color var(--t),border-color var(--t),box-shadow var(--t),transform var(--t);
}

/* 1a · GHOST family — sit on chrome/panels: transparent → mist on hover */
.cb-rail-btn,.cb-icon-btn,.cb-insp-close,.cb-cmdp-close,
.modal-close,.drawer-close{
  border:0; background:transparent; color:var(--slate);
}
.cb-rail-btn:hover,.cb-icon-btn:hover,.cb-insp-close:hover,.cb-cmdp-close:hover,
.modal-close:hover,.drawer-close:hover{ background:var(--mist); color:var(--ink); }
.cb-rail-btn:active,.cb-icon-btn:active,.cb-insp-close:active,.cb-cmdp-close:active,
.modal-close:active,.drawer-close:active{ background:var(--line); color:var(--ink); }

/* 1b · GLASS family — float free over the map: keep the .float glass surface
   (bg/border/shadow from redesign.css line ~94); unify radius/hover/active only. */
.cb-locate-btn,.cb-basemap-btn{ color:var(--slate); }
.cb-locate-btn:hover,.cb-basemap-btn:hover{ background:var(--mist); color:var(--ink); }
.cb-locate-btn:active,.cb-basemap-btn:active{ background:var(--line); }
/* preserved selected/active cues */
.cb-locate-btn.is-locating{ color:var(--cobalt); }           /* pulse animation intact */
.cb-map-tools.bm-open .cb-basemap-btn{ background:var(--cobalt-08); color:var(--cobalt-ink); }

/* 1c · the one solid-cobalt icon state (selected tool on the rail) */
.cb-rail-btn.active{ background:var(--cobalt); color:#fff; }
.cb-rail-btn.active:hover{ background:var(--cobalt-ink); color:#fff; }

/* 1d · SIZE — md 36 chrome/close · lg 40 map controls · sm 32 compact × */
.cb-rail-btn,.cb-icon-btn,.cb-cmdp-close,.modal-close,.drawer-close{
  inline-size:var(--ib-md); block-size:var(--ib-md);
}
.cb-insp-close{ inline-size:var(--ib-sm); block-size:var(--ib-sm); }
.cb-locate-btn,.cb-basemap-btn{ inline-size:var(--ib-lg); block-size:var(--ib-lg); }

/* 1e · glyphs — one optical metric per tier */
.cb-rail-btn svg,.cb-icon-btn svg,.cb-cmdp-close svg,
.modal-close svg,.drawer-close svg{ inline-size:18px; block-size:18px; }
.cb-insp-close svg{ inline-size:16px; block-size:16px; }
.cb-locate-btn svg,.cb-basemap-btn svg{ inline-size:19px; block-size:19px; }

/* 1f · ONE focus ring — outline (never clipped over map/glass/panel/cobalt) */
.cb-rail-btn:focus-visible,.cb-icon-btn:focus-visible,.cb-insp-close:focus-visible,
.cb-cmdp-close:focus-visible,.modal-close:focus-visible,.drawer-close:focus-visible,
.cb-locate-btn:focus-visible,.cb-basemap-btn:focus-visible{
  outline:var(--ring-w) solid var(--ring-c); outline-offset:var(--ring-o);
}
/* CRITIC PATCH — restore redesign.css:442 (basemap icon is desktop-hidden; the
   inline Satellite/Light/Dark bar shows there). §7 re-shows it on phones. */
.cb-basemap-btn{ display:none; }

/* ════════════════════════════════════════════════════════════════════════════
   2 · TEXT / ACTION BUTTONS — one primitive, two intents, in the Plex UI face.
   PRIMARY = solid cobalt · SECONDARY = panel + hairline line. Flat & quiet.
   ════════════════════════════════════════════════════════════════════════════ */
.cb-detect-btn,.cb-detect-btn-draw,
.results-actions button,.tool-inputs button,
.ob-actions .primary,.ob-actions button{
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  block-size:var(--ctl-h); padding-inline:16px;
  font-family:var(--btn-font);            /* ← was var(--ui) = Bricolage display */
  font-size:12.5px; font-weight:600; letter-spacing:.005em; line-height:1;
  white-space:nowrap; border:1px solid transparent; border-radius:var(--r);
  cursor:pointer;
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t);
}
/* panel actions stack full-width; onboarding actions size to content */
.cb-detect-btn,.cb-detect-btn-draw,.results-actions button,.tool-inputs button{ inline-size:100%; }
.ob-actions .primary,.ob-actions button{ inline-size:auto; padding-inline:20px; }

/* PRIMARY */
.cb-detect-btn,.results-actions button,.tool-inputs button,
.ob-actions .primary,.ob-actions button:last-child{
  background:var(--cobalt); border-color:var(--cobalt); color:#fff;
}
.cb-detect-btn:hover,.results-actions button:hover,.tool-inputs button:hover,
.ob-actions .primary:hover,.ob-actions button:last-child:hover{
  background:var(--cobalt-ink); border-color:var(--cobalt-ink); color:#fff;
}
.cb-detect-btn:active,.results-actions button:active,.tool-inputs button:active,
.ob-actions .primary:active,.ob-actions button:last-child:active{ transform:translateY(.5px); }

/* SECONDARY / ghost */
.cb-detect-btn-draw,.ob-actions button:first-child{
  background:var(--panel); color:var(--ink); border-color:var(--line);
}
.cb-detect-btn-draw:hover,.ob-actions button:first-child:hover{
  background:var(--mist); border-color:var(--slate); color:var(--ink);
}
.cb-detect-btn-draw:active,.ob-actions button:first-child:active{ transform:translateY(.5px); }

/* disabled */
.cb-detect-btn[disabled],.cb-detect-btn-draw[disabled],
.results-actions button[disabled],.tool-inputs button[disabled],
.ob-actions button[disabled]{ opacity:.5; pointer-events:none; }

/* glyphs + focus ring */
.cb-detect-btn svg,.cb-detect-btn-draw svg,
.results-actions button svg,.tool-inputs button svg,.ob-actions button svg{
  inline-size:14px; block-size:14px;
}
.cb-detect-btn:focus-visible,.cb-detect-btn-draw:focus-visible,
.results-actions button:focus-visible,.tool-inputs button:focus-visible,
.ob-actions button:focus-visible{
  outline:var(--ring-w) solid var(--ring-c); outline-offset:var(--ring-o);
}

/* form controls share the radius + height for one vertical rhythm */
.tool-inputs input,.tool-inputs select{ block-size:var(--ctl-h); border-radius:var(--r); }

/* ════════════════════════════════════════════════════════════════════════════
   3 · SEGMENTED BASEMAP — the group reads as ONE 8px pill; square inner
   segments are clipped by the group and divided by a logical hairline.
   Divider re-declared here so the override is self-contained (not load-order
   dependent). Mobile popup variant (redesign.css line 622) keeps winning by
   higher specificity; we only normalize its radius in §7.
   ════════════════════════════════════════════════════════════════════════════ */
.cb-basemap{ border-radius:var(--r); overflow:hidden; padding:0; }
.cb-bm-btn{
  display:inline-flex; align-items:center; gap:6px;
  block-size:var(--ib-lg); padding-inline:12px;           /* aligns pill to locate (40) */
  background:transparent; border:0;
  border-inline-end:1px solid var(--line-soft);           /* logical divider (RTL-safe) */
  border-radius:0;                                        /* group clips the segments */
  color:var(--slate); cursor:pointer;
  font-family:var(--btn-font); font-size:11.5px; font-weight:500; letter-spacing:.005em;
  transition:background var(--t),color var(--t);
}
.cb-bm-btn:last-child{ border-inline-end:0; }
.cb-bm-btn svg{ inline-size:15px; block-size:15px; }
.cb-bm-btn:hover{ background:var(--mist); color:var(--ink); }
.cb-bm-btn.active{ background:var(--cobalt-08); color:var(--cobalt-ink); font-weight:600; }
/* ring stays INSIDE the clipped pill (negative offset) */
.cb-bm-btn:focus-visible{
  outline:var(--ring-w) solid var(--ring-c); outline-offset:calc(var(--ring-o) * -1);
}

/* ════════════════════════════════════════════════════════════════════════════
   4 · LIST ROWS · COMMAND-PALETTE ITEMS · LIVE RESULTS · DRAWER LINKS
   All rectangles → 8; nested decorative icon tiles → 32 @ 6 (concentric).
   State classes (.cb-row.on/.is-loading, .cb-cmdp-item.focused) preserved.
   ════════════════════════════════════════════════════════════════════════════ */
.cb-row,.cb-reset-row,.cb-cmdp-item,.live-result{ border-radius:var(--r); transition:background var(--t); }
.drawer-nav a{ border-radius:var(--r); transition:background var(--t),color var(--t); }

.cb-row-icon,.cb-reset-icon,.cb-cmdp-item-icon,.live-result-icon{
  inline-size:var(--ib-sm); block-size:var(--ib-sm); border-radius:var(--r-nest);
}
.cb-row-icon svg,.cb-reset-icon svg,.cb-cmdp-item-icon svg,.live-result-icon svg{
  inline-size:16px; block-size:16px;
}

/* inset rings: negative offset so the outline is not clipped and never bleeds
   into neighbouring rows */
.cb-row:focus-visible,.cb-reset-row:focus-visible,
.cb-cmdp-item:focus-visible,.live-result:focus-visible,
.drawer-nav a:focus-visible{
  outline:var(--ring-w) solid var(--ring-c); outline-offset:calc(var(--ring-o) * -1);
}

/* ════════════════════════════════════════════════════════════════════════════
   5 · MOBILE BOTTOM-TAB LABELS — off the Bricolage display face onto Plex.
   ════════════════════════════════════════════════════════════════════════════ */
.cb-mobile-tab{ font-family:var(--btn-font); }

/* ════════════════════════════════════════════════════════════════════════════
   6 · THE ONE JUSTIFIED CIRCLE — the tiny inline remove-× reads better round.
   ════════════════════════════════════════════════════════════════════════════ */
.cb-pill-x{
  border-radius:50%; background:var(--mist); color:var(--slate);
  border:0; cursor:pointer; transition:background var(--t),color var(--t);
}
.cb-pill-x:hover{ background:var(--danger-soft); color:var(--danger); }
.cb-pill-x:focus-visible{ outline:var(--ring-w) solid var(--ring-c); outline-offset:1px; }

/* ════════════════════════════════════════════════════════════════════════════
   7 · MOBILE (max-width:760px) — RE-ASSERT touch targets. Required: the
   unscoped desktop sizes above would otherwise cascade over redesign.css's
   existing 760px block (this file loads later). Matches the real breakpoint.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  .cb-rail-btn,.cb-icon-btn,.cb-insp-close,.cb-cmdp-close,
  .cb-locate-btn,.cb-basemap-btn{ inline-size:var(--ib-touch); block-size:var(--ib-touch); }
  .cb-basemap-btn{ display:inline-flex; }   /* CRITIC PATCH — re-show icon on phones */
  .modal-close,.drawer-close{ inline-size:var(--ib-lg); block-size:var(--ib-lg); }
  .cb-pill-x{ inline-size:26px; block-size:26px; }
  /* stacked full-width basemap popup rows → normalise to the 8px control corner */
  .cb-map-tools.bm-open .cb-bm-btn{ border-radius:var(--r); }
  /* CRITIC PATCH (optional) — lift action buttons + inputs to the touch height */
  .cb-detect-btn,.cb-detect-btn-draw,.results-actions button,.tool-inputs button,.ob-actions button{ block-size:var(--ib-touch); }
  .tool-inputs input,.tool-inputs select{ block-size:var(--ib-touch); }
}

/* ════════════════════════════════════════════════════════════════════════════
   8 · COARSE POINTER — neutralise the emulated sticky-hover we just added to
   the newly hover-styled controls (redesign.css line ~693 covers the originals).
   ════════════════════════════════════════════════════════════════════════════ */
@media (hover:none){
  .cb-basemap-btn:hover,.cb-cmdp-close:hover,
  .modal-close:hover,.drawer-close:hover{ background:transparent; color:var(--slate); }
  .cb-map-tools.bm-open .cb-basemap-btn{ background:var(--cobalt-08); color:var(--cobalt-ink); }
}