/* ============================================================================
   GSB REAL ESTATE — "THE FLEET MAP"  (editorial redesign)
   ----------------------------------------------------------------------------
   Self-contained stylesheet for the redesigned Real Estate tab
   (#competitor-map-screen). Map-dominant, full-bleed layout with layered
   intelligence: fleet KPI strip, floating control rail, slide-in/bottom-sheet
   store dossier, lease timeline ribbon, opportunity quadrant, lease waterfall,
   restyled lease + competitor tables.

   • Tokens ONLY (var(--gsb-*) / var(--color-*) / var(--space-*) / --radius /
     --font / --shadow). No raw hex except the few unavoidable rgba() tints
     derived directly from brand token values (paper/ink/green/clay/ochre).
   • Every class namespaced `.re-` so nothing collides with the rest of the app.
   • Status semantics: .pos = shoot-green, .neg = clay (NEVER red), .watch =
     ochre, .muted = stone. All figures use --font-mono + tabular nums.
   • Defends against the global style.css table leak (bare table{min-width:600px}
     / td{font-size:14px}) by resetting min-width:0 + per-cell font-size on every
     .re- table.
   • Mobile breakpoints at 768 / 600 / 480. Touch targets >= 40px.
     prefers-reduced-motion honored.
   ============================================================================ */

/* ===========================================================================
   0. SCREEN GROUND + LAYOUT SHELL
   The tab becomes a vertical flex column: masthead -> KPI strip -> map stage.
   The map stage fills the viewport minus the app chrome + this tab's chrome.
   --re-chrome is the height consumed above the map (app nav + masthead + KPI
   strip); integration can override it inline if the nav height differs.
   =========================================================================== */
#competitor-map-screen {
  --re-chrome: 208px;          /* app nav + masthead + KPI strip (desktop) */
  --re-rail-w: 244px;          /* floating control rail width */
  --re-dossier-w: 380px;       /* desktop slide-in dossier width */
  --re-sheet-peek: 132px;      /* mobile bottom-sheet peek height */

  background: var(--gsb-paper);
  color: var(--gsb-soil-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Universal figure rule for this tab: numbers are mono + tabular. */
#competitor-map-screen .re-mono,
#competitor-map-screen [class*="re-"] .re-fig,
#competitor-map-screen .re-fig {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- Status semantics (shared across every component) -------------------- */
#competitor-map-screen .pos   { color: var(--gsb-shoot-green); }
#competitor-map-screen .neg   { color: var(--gsb-clay); }       /* never red */
#competitor-map-screen .watch { color: var(--gsb-ochre); }
#competitor-map-screen .muted { color: var(--gsb-stone); }

#competitor-map-screen .re-tint-pos   { background: rgba(47, 107, 69, 0.10); color: var(--gsb-shoot-green); }
#competitor-map-screen .re-tint-neg   { background: rgba(181, 83, 46, 0.10); color: var(--gsb-clay); }
#competitor-map-screen .re-tint-watch { background: rgba(185, 139, 50, 0.12); color: var(--gsb-ochre); }
#competitor-map-screen .re-tint-muted { background: var(--gsb-oat); color: var(--gsb-stone); }

/* Partial-period flag — dim + caution glyph */
#competitor-map-screen .re-partial { opacity: 0.62; }
#competitor-map-screen .re-partial-flag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--gsb-ochre);
  margin-left: 4px;
}

/* ===========================================================================
   1. MASTHEAD — editorial title + global search
   =========================================================================== */
#competitor-map-screen .re-masthead {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5) var(--space-2);
  border-bottom: var(--rule-hairline);
  background: var(--gsb-paper);
}
#competitor-map-screen .re-masthead-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--gsb-soil-ink);
  margin: 0;
}
#competitor-map-screen .re-masthead-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gsb-stone);
}
#competitor-map-screen .re-search {
  position: relative;
  flex: 1 1 280px;
  max-width: 420px;
  margin-left: auto;
}
#competitor-map-screen .re-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-3) 0 36px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--gsb-soil-ink);
  background: var(--color-surface);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fast) var(--ease-out);
}
#competitor-map-screen .re-search input:focus {
  outline: none;
  border-color: var(--gsb-shoot-green);
}
#competitor-map-screen .re-search-icon {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--gsb-stone);
  pointer-events: none;
  font-size: 15px;
}
/* Typeahead results dropdown */
#competitor-map-screen .re-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 40;
  background: var(--color-surface);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 320px;
  overflow-y: auto;
}
#competitor-map-screen .re-search-result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 40px;
  cursor: pointer;
  border-bottom: var(--rule-hairline);
}
#competitor-map-screen .re-search-result:last-child { border-bottom: none; }
#competitor-map-screen .re-search-result:hover,
#competitor-map-screen .re-search-result.active { background: var(--gsb-oat); }
#competitor-map-screen .re-search-result-type {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gsb-stone);
  margin-left: auto;
}

/* ===========================================================================
   2. FLEET KPI STRIP — desktop row of stat cards / mobile scroll-snap rail
   =========================================================================== */
#competitor-map-screen .re-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5) var(--space-3);
  border-bottom: var(--rule-hairline);
  background: var(--gsb-paper);
}
#competitor-map-screen .re-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
}
/* One quiet accent: the first KPI (Venues) carries the green top hairline. */
#competitor-map-screen .re-kpi::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: var(--gsb-stone);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
#competitor-map-screen .re-kpi.re-kpi-hero::before { background: var(--gsb-shoot-green); }
#competitor-map-screen .re-kpi-label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gsb-stone);
}
#competitor-map-screen .re-kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--gsb-soil-ink);
}
#competitor-map-screen .re-kpi-sub {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  color: var(--gsb-stone);
}
#competitor-map-screen .re-kpi-sub.pos   { color: var(--gsb-shoot-green); }
#competitor-map-screen .re-kpi-sub.neg   { color: var(--gsb-clay); }
#competitor-map-screen .re-kpi-sub.watch { color: var(--gsb-ochre); }

/* ===========================================================================
   3. MAP STAGE — full-bleed map + floating chrome layered over it
   =========================================================================== */
#competitor-map-screen .re-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: calc(100vh - var(--re-chrome));
  background: var(--gsb-oat);          /* warm placeholder before tiles paint */
  overflow: hidden;
}
#competitor-map-screen .re-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Google's own controls / info windows toned to paper where reachable */
#competitor-map-screen .re-map .gm-style {
  font-family: var(--font-body);
}

/* ---- 3a. FLOATING CONTROL RAIL (top-left over map) ---------------------- */
#competitor-map-screen .re-rail {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 20;
  width: var(--re-rail-w);
  max-height: calc(100% - var(--space-7));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  border: var(--rule-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow-y: auto;
}
#competitor-map-screen .re-rail-group { display: flex; flex-direction: column; gap: var(--space-2); }
#competitor-map-screen .re-rail-label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gsb-stone);
  font-weight: 500;
}
/* Container for the shared filter-bar module (brand/region). We only style the
   wrapper; the filter-bar.js component paints its own chips. */
#competitor-map-screen .re-rail-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
#competitor-map-screen .re-rail-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-1) 0;
}
/* Styled <select> for the Region / DM rail filters — GSB surface, hairline,
   custom chevron (so it doesn't inherit the OS native widget chrome). */
#competitor-map-screen .re-rail-select {
  width: 100%;
  min-height: 34px;
  padding: 0 28px 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--gsb-soil-ink);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236F695B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color var(--motion-fast) var(--ease-out);
}
#competitor-map-screen .re-rail-select:hover { border-color: var(--gsb-shoot-green); }
#competitor-map-screen .re-rail-select:focus-visible {
  outline: 2px solid var(--gsb-shoot-green);
  outline-offset: 1px;
  border-color: var(--gsb-shoot-green);
}

/* ──────────────────────────────────────────────────────────────────────────
   Legacy generateToggleUI() normalization. That function ships inline styles
   (border-radius:0, ad-hoc padding, content-sized widths, bordered fieldset
   boxes laid 2-per-row at uneven heights). We override to clean, uniform GSB
   pills + flat stacked groups. !important is required to beat the inline styles.
   Active chips keep their inline brand color for identity.
   ────────────────────────────────────────────────────────────────────────── */
#competitor-map-screen #map-toggle-container { display: flex; flex-direction: column; gap: var(--space-3); }
/* section rows (Brands / View / Overlays / Region / Search): stack vertically, no 2-up */
#competitor-map-screen #map-toggle-container > div {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-3) !important;
  margin: 0 !important;
  align-items: stretch !important;
}
/* each labeled group: flatten the fieldset box */
#competitor-map-screen #map-toggle-container > div > div {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  position: static !important;
  flex: 1 1 auto !important;
}
/* floating group label span -> static mono micro-label */
#competitor-map-screen #map-toggle-container > div > div > span:first-child {
  position: static !important;
  background: transparent !important;
  padding: 0 0 var(--space-1) 0 !important;
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-label) !important;
  color: var(--gsb-stone) !important;
  text-transform: uppercase;
}
/* button rows: tidy wrap, consistent gap */
#competitor-map-screen #map-toggle-container > div > div > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  align-items: center !important;
}
/* uniform pill for every toggle chip */
#competitor-map-screen #map-toggle-container .map-toggle-btn {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--color-border) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
/* inactive chips: surface fill, ink text (overrides inline brand bg only when NOT active) */
#competitor-map-screen #map-toggle-container .map-toggle-btn:not(.active) {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--gsb-soil-ink) !important;
}
#competitor-map-screen #map-toggle-container .map-toggle-btn:not(.active):hover {
  border-color: var(--gsb-shoot-green) !important;
}
/* active chips: keep inline brand color as the fill, just fix text + border + radius */
#competitor-map-screen #map-toggle-container .map-toggle-btn.active {
  color: #fff !important;
  font-weight: 600 !important;
  border-color: transparent !important;
}
/* brand sub-group headers (Mall Snack / Jamba): tiny stone label on its own line */
#competitor-map-screen #map-toggle-container .map-brand-group-parent {
  background: transparent !important;
  border: 0 !important;
  color: var(--gsb-stone) !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-label) !important;
  text-transform: uppercase;
  padding: var(--space-1) 0 0 0 !important;
  margin: 0 !important;
  flex-basis: 100% !important;   /* force the group's chips to wrap onto the next line */
  text-align: left;
  cursor: pointer;
}
/* flatten every nested fieldset/group box (deeper than 2 levels) — no borders/fills/shadows */
#competitor-map-screen #map-toggle-container div {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* data-source indicator: keep it subtle and aligned at the foot of the rail */
#competitor-map-screen #map-data-source-indicator {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--gsb-stone) !important;
  margin-top: var(--space-1) !important;
}

/* ---- 3b. SEGMENTED CONTROL (color-mode) — oat track, ink pill ----------- */
#competitor-map-screen .re-seg {
  display: flex;
  flex-wrap: wrap;            /* wrap to a 2nd row rather than clip/overflow the rail */
  gap: 2px;
  padding: 3px;
  background: var(--gsb-oat);
  border-radius: 6px;
}
#competitor-map-screen .re-seg button {
  flex: 1 1 auto;
  min-width: 0;              /* allow buttons to shrink so all fit/wrap, never clip */
  min-height: 32px;
  padding: 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--gsb-stone);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
#competitor-map-screen .re-seg button:hover { color: var(--gsb-soil-ink); }
#competitor-map-screen .re-seg button.active,
#competitor-map-screen .re-seg button[aria-pressed="true"] {
  background: var(--gsb-soil-ink);
  color: var(--gsb-paper);
}
#competitor-map-screen .re-seg button:focus-visible {
  outline: 2px solid var(--gsb-shoot-green);
  outline-offset: 1px;
}

/* ---- 3c. TOGGLE ROWS (lease layer / heatmap / radius / territory) ------- */
#competitor-map-screen .re-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--gsb-soil-ink);
  cursor: pointer;
}
#competitor-map-screen .re-toggle .re-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* iOS-style switch built from a checkbox */
#competitor-map-screen .re-switch {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--gsb-oat-dk);
  border: 1px solid var(--color-border);
  transition: background var(--motion-base) var(--ease-out);
  cursor: pointer;
}
#competitor-map-screen .re-switch::after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-base) var(--ease-out);
}
#competitor-map-screen .re-toggle input { position: absolute; opacity: 0; pointer-events: none; }
#competitor-map-screen .re-toggle input:checked + .re-switch { background: var(--gsb-shoot-green); border-color: var(--gsb-shoot-green); }
#competitor-map-screen .re-toggle input:checked + .re-switch::after { transform: translateX(16px); }
#competitor-map-screen .re-toggle input:focus-visible + .re-switch { outline: 2px solid var(--gsb-shoot-green); outline-offset: 2px; }

/* ---- 3d. MAP LEGEND (bottom-left) --------------------------------------- */
#competitor-map-screen .re-legend {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  z-index: 18;
  max-width: 230px;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
#competitor-map-screen .re-legend-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gsb-stone);
  margin-bottom: var(--space-1);
}
#competitor-map-screen .re-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--gsb-soil-ink);
  line-height: 1.6;
}
#competitor-map-screen .re-legend-swatch {
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(34,30,24,0.18);
}
#competitor-map-screen .re-legend-swatch.dot { border-radius: 50%; }
/* continuous ramp swatch for color-by-metric (clay->ochre->oat->leaf->green) */
#competitor-map-screen .re-legend-ramp {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--gsb-clay) 0%, var(--gsb-ochre) 30%,
    var(--gsb-oat) 50%, var(--gsb-leaf) 72%, var(--gsb-shoot-green) 100%);
  margin: 4px 0 2px;
}
#competitor-map-screen .re-legend-ramp-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gsb-stone);
}
/* Legend inner structure as emitted by re-map.js renderLegend (brand = swatch list,
   metric = gradient bar + scale). Kills default <ul> bullets/indent and keeps it compact. */
#competitor-map-screen .re-legend-swatches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
}
#competitor-map-screen .re-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--gsb-soil-ink);
  line-height: 1.4;
}
#competitor-map-screen .re-legend-label { white-space: nowrap; }
#competitor-map-screen .re-legend-bar {
  height: 8px;
  border-radius: 999px;
  margin: 4px 0 2px;
}
#competitor-map-screen .re-legend-scale {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gsb-stone);
}
#competitor-map-screen .re-legend-note { color: var(--gsb-stone); opacity: 0.85; }
#competitor-map-screen .re-legend-size-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gsb-stone);
  margin-top: 4px;
}

/* Data-freshness badge (injected into the masthead) — shows the tab is live/daily */
#competitor-map-screen .re-freshness {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gsb-stone);
  white-space: nowrap;
}
#competitor-map-screen .re-freshness::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gsb-stone);
  flex: 0 0 auto;
}
#competitor-map-screen .re-freshness.pos::before { background: var(--gsb-shoot-green); }
#competitor-map-screen .re-freshness.watch::before { background: var(--gsb-ochre); }
#competitor-map-screen .re-freshness.neg::before { background: var(--gsb-clay); }

/* ---- 3e. VENUES-IN-VIEW COUNTER (bottom-right) -------------------------- */
#competitor-map-screen .re-inview {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 18;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px var(--space-3);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  border: var(--rule-hairline);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--gsb-stone);
}
#competitor-map-screen .re-inview .re-inview-n {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--gsb-soil-ink);
}

/* ---- 3f. MOBILE BOTTOM TOOLBAR + FAB (hidden on desktop) ---------------- */
#competitor-map-screen .re-mobile-toolbar { display: none; }
#competitor-map-screen .re-fab { display: none; }

/* ===========================================================================
   4. STORE DOSSIER — desktop right slide-in / mobile bottom sheet
   =========================================================================== */
#competitor-map-screen .re-scrim {
  /* Desktop: the dossier is a side panel, so DON'T dim the map behind it — keep the
     map bright + interactive. The scrim is re-enabled only for the mobile bottom-sheet
     (a modal), in the <=600px block below. */
  display: none;
  position: absolute;
  inset: 0;
  z-index: 28;
  background: rgba(34, 30, 24, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-base) var(--ease-out),
              visibility var(--motion-base) var(--ease-out);
}
#competitor-map-screen .re-scrim.open { opacity: 1; visibility: visible; }

#competitor-map-screen .re-dossier {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: 30;
  width: var(--re-dossier-w);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-left: var(--rule-hairline);
  box-shadow: -8px 0 28px rgba(34, 30, 24, 0.12);
  transform: translateX(100%);
  transition: transform var(--motion-slow) var(--ease-out);
  overflow: hidden;
}
#competitor-map-screen .re-dossier.open { transform: translateX(0); }

/* Dossier header */
#competitor-map-screen .re-dossier-head {
  position: relative;
  flex: 0 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: var(--rule-hairline);
}
#competitor-map-screen .re-dossier-brandbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gsb-shoot-green);   /* JS overrides inline with brand color */
}
#competitor-map-screen .re-dossier-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--gsb-soil-ink);
  margin: 0;
}
#competitor-map-screen .re-dossier-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--gsb-stone);
  margin-top: 4px;
}
#competitor-map-screen .re-dossier-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: var(--space-2);
}
#competitor-map-screen .re-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--gsb-oat);
  color: var(--gsb-stone);
}
#competitor-map-screen .re-badge.status-active   { background: rgba(47,107,69,0.10); color: var(--gsb-shoot-green); }
#competitor-map-screen .re-badge.status-upcoming { background: rgba(185,139,50,0.12); color: var(--gsb-ochre); }
#competitor-map-screen .re-badge.status-closed   { background: var(--gsb-oat); color: var(--gsb-stone); }

#competitor-map-screen .re-dossier-close {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  color: var(--gsb-stone);
  cursor: pointer;
}
#competitor-map-screen .re-dossier-close:hover { border-color: var(--gsb-clay); color: var(--gsb-clay); }

/* Dossier scroll body */
#competitor-map-screen .re-dossier-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
#competitor-map-screen .re-dossier-section { display: flex; flex-direction: column; gap: var(--space-2); }
#competitor-map-screen .re-section-title {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gsb-stone);
  font-weight: 500;
  border-bottom: 1px solid var(--gsb-oat);
  padding-bottom: var(--space-1);
}

/* ---- 4a. FINANCIAL BLOCK (stat grid) ----------------------------------- */
#competitor-map-screen .re-fin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
#competitor-map-screen .re-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#competitor-map-screen .re-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gsb-stone);
}
#competitor-map-screen .re-stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--gsb-soil-ink);
}
#competitor-map-screen .re-stat-delta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
}
#competitor-map-screen .re-stat-delta.pos   { color: var(--gsb-shoot-green); }
#competitor-map-screen .re-stat-delta.neg   { color: var(--gsb-clay); }
#competitor-map-screen .re-stat-delta.muted { color: var(--gsb-stone); }

/* ---- 4b. OCCUPANCY BLOCK ------------------------------------------------ */
#competitor-map-screen .re-occ {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
#competitor-map-screen .re-occ-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gsb-soil-ink);
}
/* occupancy health: <8% strong / 8-12% ok / >12% watch — JS sets class */
#competitor-map-screen .re-occ-value.pos   { color: var(--gsb-shoot-green); }
#competitor-map-screen .re-occ-value.watch { color: var(--gsb-ochre); }
#competitor-map-screen .re-occ-value.neg   { color: var(--gsb-clay); }
#competitor-map-screen .re-occ-asof {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--gsb-stone);
}
#competitor-map-screen .re-occ-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--gsb-oat);
  overflow: hidden;
  margin-top: var(--space-1);
}
#competitor-map-screen .re-occ-bar-fill {
  height: 100%;
  background: var(--gsb-shoot-green);   /* JS adjusts width + color by band */
  border-radius: 999px;
}

/* ---- 4c. LEASE TIMELINE RIBBON ----------------------------------------- */
/* Horizontal axis: today -> FA expiry -> lease end -> option deadline.
   Markers positioned inline (left:%) by JS along the track. */
#competitor-map-screen .re-lease-ribbon {
  position: relative;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0 var(--space-1);
}
#competitor-map-screen .re-ribbon-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--gsb-shoot-green) 0%,
    var(--gsb-ochre) 62%,
    var(--gsb-clay) 100%);
  margin: 28px 0 26px;
}
#competitor-map-screen .re-ribbon-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
#competitor-map-screen .re-ribbon-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--gsb-soil-ink);
  box-shadow: var(--shadow-sm);
}
#competitor-map-screen .re-ribbon-marker.today  .re-ribbon-dot { border-color: var(--gsb-shoot-green); background: var(--gsb-shoot-green); }
#competitor-map-screen .re-ribbon-marker.fa      .re-ribbon-dot { border-color: var(--gsb-ochre); }
#competitor-map-screen .re-ribbon-marker.end     .re-ribbon-dot { border-color: var(--gsb-clay); }
#competitor-map-screen .re-ribbon-marker.option  .re-ribbon-dot { border-color: var(--gsb-stone); background: var(--gsb-stone); }
/* Labels alternate above / below the track via .above / .below */
#competitor-map-screen .re-ribbon-cap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.25;
  color: var(--gsb-stone);
}
#competitor-map-screen .re-ribbon-marker.above .re-ribbon-cap { bottom: 16px; }
#competitor-map-screen .re-ribbon-marker.below .re-ribbon-cap { top: 16px; }
#competitor-map-screen .re-ribbon-cap .re-ribbon-date { color: var(--gsb-soil-ink); font-weight: 500; }
#competitor-map-screen .re-ribbon-cap .re-ribbon-tag {
  display: block;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
/* per-unit lease rows beneath the ribbon */
#competitor-map-screen .re-lease-unit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: var(--rule-hairline);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
}
#competitor-map-screen .re-lease-unit-name { color: var(--gsb-soil-ink); }
#competitor-map-screen .re-lease-unit-exp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--gsb-stone);
}
/* urgency chip */
#competitor-map-screen .re-urgency {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}
#competitor-map-screen .re-urgency.expired { background: rgba(181,83,46,0.14); color: var(--gsb-clay); }
#competitor-map-screen .re-urgency.urgent  { background: rgba(181,83,46,0.10); color: var(--gsb-clay); }
#competitor-map-screen .re-urgency.warn    { background: rgba(185,139,50,0.12); color: var(--gsb-ochre); }
#competitor-map-screen .re-urgency.ok      { background: rgba(47,107,69,0.10); color: var(--gsb-shoot-green); }
#competitor-map-screen .re-urgency.tbd     { background: var(--gsb-oat); color: var(--gsb-stone); }

/* ---- 4d. PEER RANK ----------------------------------------------------- */
#competitor-map-screen .re-peer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
#competitor-map-screen .re-peer-rank {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--gsb-soil-ink);
}
#competitor-map-screen .re-peer-rank .re-peer-of { color: var(--gsb-stone); font-size: var(--fs-caption); }
#competitor-map-screen .re-peer-bar {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: var(--gsb-oat);
  overflow: hidden;
}
#competitor-map-screen .re-peer-bar-fill {
  height: 100%;
  background: var(--gsb-shoot-green);
  border-radius: 999px;
}
#competitor-map-screen .re-peer-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--gsb-stone);
}

/* ---- 4e. COMPETITORS SLOT (filled by Places search) -------------------- */
#competitor-map-screen .re-competitors-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
#competitor-map-screen .re-comp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--gsb-paper);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
}
#competitor-map-screen .re-comp-name { color: var(--gsb-soil-ink); }
#competitor-map-screen .re-comp-meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--gsb-stone);
}
#competitor-map-screen .re-slot-empty {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--gsb-stone);
}

/* ---- 4f. AI BUTTON + dossier actions ----------------------------------- */
#competitor-map-screen .re-dossier-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
#competitor-map-screen .re-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: var(--rule-hairline);
  background: var(--color-surface);
  color: var(--gsb-soil-ink);
  transition: border-color var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out);
}
#competitor-map-screen .re-btn:hover { border-color: var(--gsb-shoot-green); }
#competitor-map-screen .re-btn-primary {
  background: var(--gsb-shoot-green);
  border-color: var(--gsb-shoot-green);
  color: var(--gsb-paper);
}
#competitor-map-screen .re-btn-primary:hover { background: var(--gsb-shoot-green); filter: brightness(1.06); }
#competitor-map-screen .re-btn-ai {
  flex: 1 1 auto;
  background: var(--gsb-soil-ink);
  border-color: var(--gsb-soil-ink);
  color: var(--gsb-paper);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
#competitor-map-screen .re-btn-ai:hover { background: var(--gsb-espresso); border-color: var(--gsb-espresso); }
#competitor-map-screen .re-btn:focus-visible { outline: 2px solid var(--gsb-shoot-green); outline-offset: 1px; }

/* ===========================================================================
   5. SECONDARY-VIEW SWITCH (Map / Fleet Intelligence / Lease / Competitor)
   A full-width segmented switch sitting below the map stage.
   =========================================================================== */
#competitor-map-screen .re-viewswitch {
  display: flex;
  gap: 2px;
  padding: 4px;
  margin: var(--space-3) var(--space-5) 0;
  background: var(--gsb-oat);
  border-radius: 8px;
}
#competitor-map-screen .re-viewswitch button {
  flex: 1 1 0;
  min-height: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.03em;
  color: var(--gsb-stone);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
#competitor-map-screen .re-viewswitch button:hover { color: var(--gsb-soil-ink); }
#competitor-map-screen .re-viewswitch button.active {
  background: var(--color-surface);
  color: var(--gsb-soil-ink);
  box-shadow: var(--shadow-sm);
}
#competitor-map-screen .re-viewswitch button:focus-visible { outline: 2px solid var(--gsb-shoot-green); outline-offset: 1px; }

/* secondary-view panels */
#competitor-map-screen .re-view {
  padding: var(--space-4) var(--space-5) var(--space-5);
}
/* !important so the attribute wins over inline display on .re-view-map (which sets display:flex) */
#competitor-map-screen .re-view[hidden] { display: none !important; }
#competitor-map-screen .re-view-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-tight);
  color: var(--gsb-soil-ink);
  margin: 0 0 var(--space-1);
}
#competitor-map-screen .re-view-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--gsb-stone);
  margin: 0 0 var(--space-3);
}

/* ===========================================================================
   6. FLEET INTELLIGENCE
   Opportunity quadrant + lease-expiry waterfall + portfolio concentration.
   =========================================================================== */
#competitor-map-screen .re-intel-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
#competitor-map-screen .re-panel {
  background: var(--color-surface);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
#competitor-map-screen .re-panel-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: var(--tracking-tight);
  color: var(--gsb-soil-ink);
  margin: 0 0 var(--space-1);
}
#competitor-map-screen .re-panel-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--gsb-stone);
  margin: 0 0 var(--space-3);
}

/* Left-accent card used inside .re-panel (AI Insights findings, callouts).
   Flat — no gradients. The accent hairline carries the only color. */
#competitor-map-screen .re-section {
  position: relative;
  padding: var(--space-3) var(--space-4);
  padding-left: var(--space-4);
  background: var(--gsb-paper);
  border: var(--rule-hairline);
  border-left: 3px solid var(--gsb-shoot-green);
  border-radius: var(--radius-md);
}
#competitor-map-screen .re-section + .re-section { margin-top: var(--space-3); }
#competitor-map-screen .re-section.watch { border-left-color: var(--gsb-ochre); }
#competitor-map-screen .re-section.neg   { border-left-color: var(--gsb-clay); }
#competitor-map-screen .re-section.muted { border-left-color: var(--gsb-stone); }
#competitor-map-screen .re-section-head {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gsb-stone);
  font-weight: 500;
  margin: 0 0 var(--space-1);
}
#competitor-map-screen .re-section-body {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--gsb-soil-ink);
}
#competitor-map-screen .re-section-body p { margin: 0 0 var(--space-2); }
#competitor-map-screen .re-section-body p:last-child { margin-bottom: 0; }
#competitor-map-screen .re-section-body ul {
  margin: 0;
  padding-left: var(--space-4);
}
#competitor-map-screen .re-section-body li { margin: 0 0 4px; }
/* AI panel toolbar (Generate button + meta) */
#competitor-map-screen .re-ai-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
#competitor-map-screen .re-ai-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--gsb-stone);
}

/* ---- 6a. OPPORTUNITY QUADRANT (SVG scatter) ---------------------------- */
#competitor-map-screen .re-quadrant {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
#competitor-map-screen .re-quadrant svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* axes + gridlines drawn in SVG; style via these helper classes */
#competitor-map-screen .re-quad-axis { stroke: var(--color-border); stroke-width: 1; }
#competitor-map-screen .re-quad-mid  { stroke: var(--gsb-stone); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
#competitor-map-screen .re-quad-axis-label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--gsb-stone);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* scatter points colored by quadrant; JS sizes radius by sales */
#competitor-map-screen .re-quad-pt { cursor: pointer; transition: opacity var(--motion-fast) var(--ease-out); }
#competitor-map-screen .re-quad-pt:hover { opacity: 0.7; }
#competitor-map-screen .re-quad-pt.renew   { fill: var(--gsb-shoot-green); }
#competitor-map-screen .re-quad-pt.protect { fill: var(--gsb-leaf); }
#competitor-map-screen .re-quad-pt.exit    { fill: var(--gsb-clay); }
#competitor-map-screen .re-quad-pt.watch   { fill: var(--gsb-ochre); }
/* corner labels overlaid on the SVG box */
#competitor-map-screen .re-quad-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gsb-stone);
  pointer-events: none;
}
#competitor-map-screen .re-quad-label.tl { top: 4px; left: 6px; }
#competitor-map-screen .re-quad-label.tr { top: 4px; right: 6px; text-align: right; }
#competitor-map-screen .re-quad-label.bl { bottom: 4px; left: 6px; }
#competitor-map-screen .re-quad-label.br { bottom: 4px; right: 6px; text-align: right; }
#competitor-map-screen .re-quad-label .re-quad-key {
  display: block;
  font-weight: 500;
  font-size: var(--fs-caption);
}
#competitor-map-screen .re-quad-label.tl .re-quad-key { color: var(--gsb-shoot-green); }   /* RENEW */
#competitor-map-screen .re-quad-label.tr .re-quad-key { color: var(--gsb-leaf); }           /* PROTECT */
#competitor-map-screen .re-quad-label.bl .re-quad-key { color: var(--gsb-clay); }           /* EXIT */
#competitor-map-screen .re-quad-label.br .re-quad-key { color: var(--gsb-ochre); }          /* WATCH */

/* ---- 6b. LEASE-EXPIRY WATERFALL (bars by year) ------------------------- */
#competitor-map-screen .re-waterfall {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
#competitor-map-screen .re-wf-row {
  display: grid;
  grid-template-columns: 48px 1fr 44px;
  align-items: center;
  gap: var(--space-2);
}
#competitor-map-screen .re-wf-year {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  color: var(--gsb-stone);
}
#competitor-map-screen .re-wf-track {
  position: relative;
  height: 20px;
  background: var(--gsb-oat);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
#competitor-map-screen .re-wf-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--gsb-stone);   /* JS recolors by urgency band */
}
/* near-term years burn hotter */
#competitor-map-screen .re-wf-bar.urgent { background: var(--gsb-clay); }
#competitor-map-screen .re-wf-bar.warn   { background: var(--gsb-ochre); }
#competitor-map-screen .re-wf-bar.ok     { background: var(--gsb-shoot-green); }
#competitor-map-screen .re-wf-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  color: var(--gsb-soil-ink);
  text-align: right;
}

/* ---- 6c. PORTFOLIO CONCENTRATION (stacked share bar) ------------------- */
#competitor-map-screen .re-concentration { display: flex; flex-direction: column; gap: var(--space-3); }
#competitor-map-screen .re-conc-bar {
  display: flex;
  width: 100%;
  height: 26px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--gsb-oat);
}
#competitor-map-screen .re-conc-seg {
  height: 100%;
  min-width: 2px;
  /* segment background set inline from BRAND_META color */
}
#competitor-map-screen .re-conc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
#competitor-map-screen .re-conc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--gsb-soil-ink);
}
#competitor-map-screen .re-conc-swatch {
  width: 11px; height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(34,30,24,0.18);
}
#competitor-map-screen .re-conc-legend-item .re-conc-pct {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--gsb-stone);
}

/* ===========================================================================
   7. RESTYLED TABLES (lease schedule + competitor search)
   Defends against global style.css leak: bare table{min-width:600px},
   td{font-size:14px}, th{...}. We force min-width:0 + per-cell font-size.
   =========================================================================== */
#competitor-map-screen .re-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
#competitor-map-screen .re-table {
  width: 100%;
  min-width: 0;                 /* override style.css table{min-width:600px} */
  border-collapse: collapse;
  font-family: var(--font-body);
}
#competitor-map-screen .re-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);  /* override td/th leak */
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gsb-stone);
  font-weight: 500;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: var(--gsb-paper);
  border-bottom: 1px solid var(--gsb-oat);
  white-space: nowrap;
}
#competitor-map-screen .re-table td {
  font-size: 13px;               /* override td{font-size:14px} leak */
  color: var(--gsb-soil-ink);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--rule-hairline);
  white-space: nowrap;
}
/* figure columns: mono + tabular + right aligned */
#competitor-map-screen .re-table td.re-num,
#competitor-map-screen .re-table th.re-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}
#competitor-map-screen .re-table tr:hover td { background: var(--gsb-oat); }
#competitor-map-screen .re-table td.pos   { color: var(--gsb-shoot-green); }
#competitor-map-screen .re-table td.neg   { color: var(--gsb-clay); }
#competitor-map-screen .re-table td.watch { color: var(--gsb-ochre); }
#competitor-map-screen .re-table td.muted { color: var(--gsb-stone); }
/* row -> fly-to-map affordance */
#competitor-map-screen .re-table tr.re-row-clickable { cursor: pointer; }

/* Frozen first column (sticky) for mobile horizontal scroll */
#competitor-map-screen .re-table th.re-frozen,
#competitor-map-screen .re-table td.re-frozen {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--color-surface);
}
#competitor-map-screen .re-table th.re-frozen {
  z-index: 3;
  background: var(--gsb-paper);
}
#competitor-map-screen .re-table tr:hover td.re-frozen { background: var(--gsb-oat); }
/* hairline divider on the frozen column so it reads as pinned while scrolling */
#competitor-map-screen .re-table .re-frozen::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: var(--color-border);
}

/* Table filter / toolbar row above the table */
#competitor-map-screen .re-table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

/* ---- 7a. COMPETITOR SEARCH specifics ----------------------------------- */
#competitor-map-screen .re-comp-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
#competitor-map-screen .re-comp-searchbar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
#competitor-map-screen .re-comp-searchbar input,
#competitor-map-screen .re-comp-searchbar select {
  min-height: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--gsb-soil-ink);
  background: var(--color-surface);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
}
#competitor-map-screen .re-comp-searchbar input { flex: 1 1 220px; }
#competitor-map-screen .re-comp-searchbar input:focus,
#competitor-map-screen .re-comp-searchbar select:focus {
  outline: none;
  border-color: var(--gsb-shoot-green);
}
/* recent-search chips */
#competitor-map-screen .re-recent {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
#competitor-map-screen .re-recent-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gsb-stone);
}
#competitor-map-screen .re-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--gsb-soil-ink);
  background: var(--gsb-oat);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
#competitor-map-screen .re-recent-chip:hover { border-color: var(--gsb-shoot-green); }

/* ===========================================================================
   8. BRAND ROLLUP (fleet summary when a brand is clicked) — reuses dossier
   shell but with its own body content.
   =========================================================================== */
#competitor-map-screen .re-rollup-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
#competitor-map-screen .re-rollup-best,
#competitor-map-screen .re-rollup-worst {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
}
#competitor-map-screen .re-rollup-best  { background: rgba(47,107,69,0.08); }
#competitor-map-screen .re-rollup-worst { background: rgba(181,83,46,0.08); }
#competitor-map-screen .re-rollup-best  .re-fig { color: var(--gsb-shoot-green); }
#competitor-map-screen .re-rollup-worst .re-fig { color: var(--gsb-clay); }

/* ===========================================================================
   8b. ACTION LIST (lease-renewal decision worklist) + QUADRANT VERDICT TAGS
   Renders inside .re-panel using the shared .re-table. .re-action-list is the
   wrapper around the .re-table-wrap so it can carry its own toolbar + empty state.
   =========================================================================== */
#competitor-map-screen .re-action-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
#competitor-map-screen .re-action-list .re-table-toolbar { margin-bottom: 0; }

/* Verdict chip — quadrant-colored pill. Colors MUST match the quadrant corner
   keys: renew = shoot-green, protect = leaf, exit = clay, watch = ochre.
   Filled chips with white/ink text for AA contrast. */
#competitor-map-screen .re-quad-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  border-radius: 999px;
  white-space: nowrap;
}
#competitor-map-screen .re-quad-tag.renew   { background: var(--gsb-shoot-green); color: var(--gsb-paper); }
#competitor-map-screen .re-quad-tag.protect { background: var(--gsb-leaf);        color: var(--gsb-paper); }
#competitor-map-screen .re-quad-tag.exit    { background: var(--gsb-clay);        color: var(--gsb-paper); }
#competitor-map-screen .re-quad-tag.watch   { background: var(--gsb-ochre);       color: var(--gsb-soil-ink); }

/* ===========================================================================
   8c. DOSSIER TREND SPARKLINES (compact label + svg + delta rows)
   =========================================================================== */
#competitor-map-screen .re-spark {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
#competitor-map-screen .re-spark svg { display: block; }
#competitor-map-screen .re-spark-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
}
#competitor-map-screen .re-spark-label {
  flex: 0 0 64px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gsb-stone);
}
#competitor-map-screen .re-spark-row .re-spark { flex: 1 1 auto; }
#competitor-map-screen .re-spark-row .re-spark-delta {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: var(--fs-caption);
  text-align: right;
}
#competitor-map-screen .re-spark-row .re-spark-delta.pos   { color: var(--gsb-shoot-green); }
#competitor-map-screen .re-spark-row .re-spark-delta.neg   { color: var(--gsb-clay); }
#competitor-map-screen .re-spark-row .re-spark-delta.watch { color: var(--gsb-ochre); }
#competitor-map-screen .re-spark-row .re-spark-delta.muted { color: var(--gsb-stone); }

/* ===========================================================================
   9. LOADING / EMPTY STATES
   =========================================================================== */
#competitor-map-screen .re-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-7);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--gsb-stone);
}
#competitor-map-screen .re-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--gsb-oat);
  border-top-color: var(--gsb-shoot-green);
  border-radius: 50%;
  animation: re-spin 0.8s linear infinite;
}
@keyframes re-spin { to { transform: rotate(360deg); } }
#competitor-map-screen .re-empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--gsb-stone);
}

/* ===========================================================================
   10. RESPONSIVE — 768 / 600 / 480
   =========================================================================== */

/* ---- <= 768px: tablet -> stack intel grid, narrower rail --------------- */
@media (max-width: 768px) {
  #competitor-map-screen { --re-rail-w: 210px; }
  #competitor-map-screen .re-intel-grid { grid-template-columns: 1fr; }
  #competitor-map-screen .re-kpi-strip { grid-template-columns: repeat(3, 1fr); }
  #competitor-map-screen .re-kpi-strip .re-kpi:nth-child(n+4) { display: none; } /* fall back to rail at phone size */
}

/* ---- <= 600px: phone -> full-screen map, mobile chrome ----------------- */
@media (max-width: 600px) {
  #competitor-map-screen {
    --re-chrome: 188px;
    --re-dossier-w: 100%;
  }

  /* Masthead compresses */
  #competitor-map-screen .re-masthead {
    padding: var(--space-3) var(--space-4) var(--space-2);
    gap: var(--space-2);
  }
  #competitor-map-screen .re-masthead-title { font-size: 1.75rem; }
  #competitor-map-screen .re-search { flex-basis: 100%; max-width: none; margin-left: 0; }

  /* KPI strip -> horizontal scroll-snap rail of compact chips */
  #competitor-map-screen .re-kpi-strip {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #competitor-map-screen .re-kpi-strip::-webkit-scrollbar { display: none; }
  #competitor-map-screen .re-kpi-strip .re-kpi {
    display: flex;              /* re-show any hidden-at-768 cards in the rail */
    flex: 0 0 auto;
    min-width: 132px;
    scroll-snap-align: start;
    padding: var(--space-2) var(--space-3);
  }
  #competitor-map-screen .re-kpi-strip .re-kpi:nth-child(n+4) { display: flex; }
  #competitor-map-screen .re-kpi-value { font-size: 1.25rem; }

  /* Map fills the viewport */
  #competitor-map-screen .re-stage { min-height: calc(100vh - var(--re-chrome)); }

  /* Floating rail collapses -> hide; controls move to bottom toolbar + FAB */
  #competitor-map-screen .re-rail { display: none; }

  #competitor-map-screen .re-mobile-toolbar {
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    z-index: 22;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2);
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    border: var(--rule-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow-x: auto;
    scrollbar-width: none;
  }
  #competitor-map-screen .re-mobile-toolbar::-webkit-scrollbar { display: none; }
  #competitor-map-screen .re-mobile-toolbar .re-tool-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    color: var(--gsb-soil-ink);
    background: var(--gsb-oat);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
  }
  #competitor-map-screen .re-mobile-toolbar .re-tool-btn.active {
    background: var(--gsb-soil-ink);
    color: var(--gsb-paper);
  }

  /* FAB to summon the filter/control sheet */
  #competitor-map-screen .re-fab {
    position: absolute;
    right: var(--space-3);
    bottom: calc(var(--space-3) + 56px);
    z-index: 23;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--gsb-shoot-green);
    color: var(--gsb-paper);
    border: none;
    box-shadow: var(--shadow-md);
    cursor: pointer;
  }

  /* Legend + in-view counter shrink and lift above the toolbar */
  #competitor-map-screen .re-legend {
    bottom: calc(var(--space-3) + 64px);
    left: var(--space-3);
    max-width: 60vw;
  }
  #competitor-map-screen .re-inview {
    bottom: calc(var(--space-3) + 64px);
    right: var(--space-3);
  }

  /* Dossier -> bottom sheet (peek -> expand). position:fixed so it anchors to the
     VIEWPORT, not the (scrollable) .re-stage — otherwise scrolling the page strands
     the sheet + its close button off-screen (the "can't close to get back" bug). */
  #competitor-map-screen .re-dossier {
    position: fixed;
    z-index: 9999;
    top: auto;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: none;
    height: 88vh;
    max-height: 88vh;
    border-left: none;
    border-top: var(--rule-hairline);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 28px rgba(34, 30, 24, 0.16);
    /* hidden by default on mobile; openDossier adds .open / .peek */
    transform: translateY(100%);
    transition: transform var(--motion-slow) var(--ease-out);
  }
  /* scrim re-enabled on mobile (the bottom-sheet is a modal); fixed to the viewport
     so a tap anywhere outside the sheet closes it */
  #competitor-map-screen .re-scrim {
    display: block;
    position: fixed;
    z-index: 9998;
  }
  /* A transform on the screen (its fadeIn entrance) makes position:fixed descendants
     anchor to the SCREEN instead of the viewport — so the bottom sheet would still
     scroll away. Neutralize the screen's transform/animation on mobile so the
     fixed dossier + scrim are truly viewport-anchored and always reachable. */
  #competitor-map-screen.screen.active,
  #competitor-map-screen.screen {
    animation: none !important;
    transform: none !important;
  }
  #competitor-map-screen .re-dossier.peek { transform: translateY(calc(100% - var(--re-sheet-peek))); }
  #competitor-map-screen .re-dossier.open { transform: translateY(0); }
  #competitor-map-screen .re-dossier.closed { transform: translateY(100%); }

  /* drag handle */
  #competitor-map-screen .re-sheet-handle {
    display: block;
    width: 40px; height: 4px;
    margin: var(--space-2) auto var(--space-1);
    border-radius: 999px;
    background: var(--gsb-oat-dk);
    flex: 0 0 auto;
    cursor: grab;
  }
  #competitor-map-screen .re-dossier-head { padding: var(--space-2) var(--space-4) var(--space-3); }
  #competitor-map-screen .re-dossier-body { padding: var(--space-4) var(--space-4) var(--space-7); gap: var(--space-4); }
  #competitor-map-screen .re-fin-grid { grid-template-columns: repeat(2, 1fr); }

  /* Secondary view switch becomes scrollable full-width tabs */
  #competitor-map-screen .re-viewswitch {
    margin: var(--space-3) var(--space-4) 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #competitor-map-screen .re-viewswitch::-webkit-scrollbar { display: none; }
  #competitor-map-screen .re-viewswitch button { flex: 0 0 auto; min-width: 96px; }

  #competitor-map-screen .re-view { padding: var(--space-4); }

  /* Tables go to mobile figure size; frozen col + horizontal scroll engaged */
  #competitor-map-screen .re-table th { font-size: 11px; padding: var(--space-1) var(--space-2); }
  #competitor-map-screen .re-table td { font-size: 12px; padding: var(--space-1) var(--space-2); }

  /* ---- Item 1: lease-ribbon label de-collision (phone) ----------------- */
  /* Tighter caps; nowrap; condensed mini-tag. Edge markers anchor their cap to
     the marker (not centered) so they don't bleed past the track edges. */
  #competitor-map-screen .re-ribbon-cap {
    font-size: 9px;
    line-height: 1.15;
    white-space: nowrap;
  }
  #competitor-map-screen .re-ribbon-cap .re-ribbon-tag {
    letter-spacing: 0.04em;
    opacity: 0.85;
  }
  /* The TODAY marker's green dot already signals "now" — drop its redundant tag. */
  #competitor-map-screen .re-ribbon-marker.today .re-ribbon-tag { display: none; }
  /* Anchor the first (today) cap left and the option/lease-end caps right when
     they sit near the track ends, so the centered transform can't push text
     off-edge into the neighbor. */
  #competitor-map-screen .re-ribbon-marker.today .re-ribbon-cap {
    left: 0;
    transform: none;
    text-align: left;
  }
  #competitor-map-screen .re-ribbon-marker.option .re-ribbon-cap {
    left: auto;
    right: 0;
    transform: none;
    text-align: right;
  }
}

/* Desktop default: sheet drag handle hidden (only meaningful as a bottom sheet) */
#competitor-map-screen .re-sheet-handle { display: none; }

/* ---- <= 480px: small phone -> tighter type, KPI rail ------------------- */
@media (max-width: 480px) {
  #competitor-map-screen .re-masthead-title { font-size: 1.5rem; }
  #competitor-map-screen .re-kpi-strip .re-kpi { min-width: 122px; }
  #competitor-map-screen .re-fin-grid { gap: var(--space-2); }
  #competitor-map-screen .re-stat-value { font-size: 1rem; }
  #competitor-map-screen .re-legend { max-width: 52vw; }

  /* ---- Item 1: very narrow phones (360–390px) -------------------------- */
  /* Date is the load-bearing label; the NOW/FA/LEASE END/OPTION mini-tags are
     what collide when markers cluster, so drop them to dots+dates only. */
  #competitor-map-screen .re-ribbon-cap { font-size: 8px; line-height: 1.1; }
  #competitor-map-screen .re-ribbon-tag { display: none; }
  /* Give the alternating above/below caps a little more vertical clearance from
     the track now that they're single-line, reducing horizontal crowding. */
  #competitor-map-screen .re-ribbon-marker.above .re-ribbon-cap { bottom: 13px; }
  #competitor-map-screen .re-ribbon-marker.below .re-ribbon-cap { top: 13px; }
}

/* ===========================================================================
   11. REDUCED MOTION
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #competitor-map-screen .re-dossier,
  #competitor-map-screen .re-scrim,
  #competitor-map-screen .re-switch,
  #competitor-map-screen .re-switch::after,
  #competitor-map-screen .re-seg button,
  #competitor-map-screen .re-viewswitch button,
  #competitor-map-screen .re-rail-select,
  #competitor-map-screen .re-quad-pt {
    transition: none !important;
  }
  #competitor-map-screen .re-spinner { animation: none; }
}

/* ===========================================================================
   12. COMMAND BAR (Sales Flash-style filters) — 2026-07 simplification.
   The base .newdev-command-bar chrome lives in style.css; these overrides give
   the Real Estate copy the same flat-paper editorial treatment the Sales Flash
   screen applies via gsb-sales-flash.css (those rules are scoped #newdev-screen
   and don't reach here).
   =========================================================================== */
#competitor-map-screen .re-command-bar {
  background: var(--color-surface, #FFFFFF) !important;
  border: var(--rule-hairline, 1px solid rgba(34, 30, 24, 0.12)) !important;
  border-radius: var(--radius-lg, 12px) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  margin: 0 0 var(--space-3, 10px);
}
#competitor-map-screen .re-command-bar .cmdbar-label {
  font-family: var(--font-mono) !important;
  color: var(--gsb-stone) !important;
  letter-spacing: var(--tracking-label) !important;
  font-weight: 500 !important;
}
#competitor-map-screen .re-command-bar .cmdbar-divider {
  background: var(--color-border, rgba(34, 30, 24, 0.12)) !important;
}
#competitor-map-screen .re-command-bar .re-rail-select {
  min-width: 170px;
}
#competitor-map-screen .re-command-bar .re-toggle {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2, 6px);
}

/* Sortable store-table headers */
#competitor-map-screen #store-perf-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
#competitor-map-screen #store-perf-table th[data-sort]:hover {
  color: var(--gsb-shoot-green);
}