/* ============================================================
   ES100 Race Tracker v2 — Design System
   Inspired by lovelypals.palbox.gg compact map-first UI
   ============================================================ */

:root {
  --bg:            #0d1117;
  --surface:       #161b22;
  --surface2:      #1e2530;
  --surface3:      #252d38;
  --border:        #2a3340;
  --border-dim:    #1e2530;
  --text:          #e6edf3;
  --text-mid:      #b0bcc8;
  --muted:         #7d8590;
  --muted-dim:     #4d5561;

  --accent:        #4a9eff;
  --accent-dim:    rgba(74,158,255,0.14);
  --accent-border: rgba(74,158,255,0.32);

  --green:         #3fb950;
  --green-dim:     rgba(63,185,80,0.15);
  --amber:         #d29922;
  --amber-dim:     rgba(210,153,34,0.15);
  --red:           #da3633;
  --red-dim:       rgba(218,54,51,0.15);
  --blue-muted:    #6aabde;

  --bar-height:    48px;
  --status-height: 26px;
  --panel-width:   360px;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  --font-ui:   system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; padding: 0;
  width: 100%; height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  z-index: 1000;
}

.header .logo {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  z-index: 1001;
  pointer-events: none;
}
.header .logo img {
  height: 80px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.header-data-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.header-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  line-height: 1.2;
}
.header-chip-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.header-chip-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Nav area */
.navigaton_con {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}
.btn_con { display: flex; align-items: center; }
.btn_con .btn { display: flex; align-items: center; }

/* Pill-shaped nav links */
.header-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms, color 150ms;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
}
.header-nav-link.accent {
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  color: var(--accent);
}
.header-nav-link.accent:hover { background: rgba(74,158,255,0.24); }
.header-nav-link.ghost {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-mid);
}
.header-nav-link.ghost:hover { background: rgba(255,255,255,0.11); color: var(--text); }

/* Hide old-style nav links from original header template */
.header .navigaton_con .btn_con a.standings,
.header .navigaton_con .btn_con a.map,
.header .navigaton_con .btn_con a.normal { display: none; }

/* ============================================================
   STATUS BAR
   ============================================================ */
.status_bar {
  position: fixed;
  top: var(--bar-height);
  left: 0; right: 0;
  height: var(--status-height);
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  z-index: 999;
  overflow: hidden;
  padding: 0;
  position: relative;
  background: transparent;
}
.status_bar_marquee {
  position: absolute;
  white-space: nowrap;
  animation: marquee-scroll 28s linear infinite;
}
.status_bar:hover .status_bar_marquee {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* normal = invisible until marquee content loads; alert/caution always visible */
.status_bar.normal_status  { background: transparent; color: #3fb950; }
.status_bar.normal_status.has_content  { background: #1a3a20; border-bottom: 1px solid #2a5c34; }
.status_bar.alert_status   { background: #3a1010; border-bottom: 1px solid #7a2020; color: #ff6b6b; }
.status_bar.caution_status { background: #2e2600; border-bottom: 1px solid #5c4e00; color: #d29922; }

/* ============================================================
   LAYOUT
   .header is position:fixed (out of flow).
   .status_bar is in-flow, rendered after the header include.
   .main_con fills 100vh from y=0 — it's the JS scroll target.
   JS reads header.offsetHeight + status_bar.offsetHeight and sets
   map_con { top: Npx; height: calc(100% - Npx) } directly.
   Don't fight that — just give main_con the full viewport.
   ============================================================ */
.page_wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.main_con {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

/* map_con top/height set by JS; CSS provides initial position */
.map_con {
  position: absolute;
  top: calc(var(--bar-height) + var(--status-height));
  left: 0; right: 0; bottom: 0;
}
#map { width: 100%; height: 100%; }

/* ============================================================
   RIGHT PANEL (flyout)
   ============================================================ */
.right_sidebar_con {
  position: fixed;
  top: calc(var(--bar-height) + var(--status-height));
  right: 0;
  height: calc(100% - var(--bar-height) - var(--status-height));
  width: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 900;
  overflow: hidden;
}

@media (min-width: 768px) {
  .right_sidebar_con { width: var(--panel-width); }
  .right_sidebar_con.open { transform: translateX(0); }
}

@media (max-width: 767px) {
  .right_sidebar_con {
    top: auto;
    bottom: 0;
    height: 70vh;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
  .right_sidebar_con.open { transform: translateY(0); }
}

.flyout_sticky_header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  flex-shrink: 0;
}

#flyout_title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 10px;
  text-transform: uppercase;
}

.flyout_close_btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
  transition: background 150ms, color 150ms;
}
.flyout_close_btn:hover { background: rgba(255,255,255,0.12); color: var(--text); }

.side_bar_con {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(74,158,255,0.25) transparent;
}
.side_bar_con::-webkit-scrollbar { width: 8px; }
.side_bar_con::-webkit-scrollbar-track { background: transparent; }
.side_bar_con::-webkit-scrollbar-thumb {
  background: rgba(74,158,255,0.2);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.flyout_panel { color: var(--text-mid); }

/* ============================================================
   FLYOUT — Aid Station rows
   ============================================================ */
.flyout_as_row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-dim);
  font-size: 12px;
  gap: 8px;
}
.flyout_label {
  color: var(--muted);
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.flyout_val {
  text-align: right;
  color: var(--text);
  font-size: 13px;
}
.flyout_divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}
.flyout_seg_note {
  font-size: 11px;
  color: var(--muted-dim);
  margin-top: 8px;
  font-style: italic;
}

.seg_runner_list {
  margin-top: 6px;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.seg_runner_row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  font-size: 12px;
}
.seg_runner_row:nth-child(even) { background: var(--surface3); }
.seg_runner_bib {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  min-width: 36px;
  font-weight: 700;
}
.seg_runner_name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flyout_status_pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.flyout_status_pill.open    { background: var(--green-dim); color: var(--green); border: 1px solid rgba(63,185,80,0.3); }
.flyout_status_pill.closed  { background: var(--red-dim);   color: var(--red);   border: 1px solid rgba(218,54,51,0.3); }
.flyout_status_pill.standby { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(210,153,34,0.3); }
.flyout_status_pill.opening { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-border); }

/* ============================================================
   FLYOUT — Weather
   ============================================================ */
.flyout_weather_con {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.wx_section { margin-bottom: 14px; }
.wx_section_title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}
.wx_current_row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.wx_temp {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.wx_feels  { font-size: 11px; color: var(--muted); }
.wx_desc   { font-size: 13px; color: var(--text-mid); margin-bottom: 4px; }
.wx_detail_row { font-size: 11px; color: var(--muted); }

.wx_hourly_grid {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.wx_hourly_grid::-webkit-scrollbar { display: none; }
.wx_hour {
  min-width: 54px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 5px;
  text-align: center;
  flex-shrink: 0;
}
.wx_hour_time  { font-size: 9px;  color: var(--muted);     margin-bottom: 3px; }
.wx_hour_temp  { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; font-family: var(--font-mono); }
.wx_hour_desc  { font-size: 9px;  color: var(--muted);     line-height: 1.2; margin-bottom: 2px; }
.wx_hour_wind  { font-size: 9px;  color: var(--muted-dim); }
.wx_hour_pop   { font-size: 9px;  color: var(--blue-muted); margin-top: 2px; }

.wx_daily_grid { display: flex; flex-direction: column; gap: 5px; }
.wx_day {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.wx_day_name   { font-weight: 700; color: var(--text); width: 36px; flex-shrink: 0; }
.wx_day_desc   { flex: 1; color: var(--muted); font-size: 11px; }
.wx_day_temps  { flex-shrink: 0; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; }
.wx_day_hi     { color: #e0c060; font-weight: 700; }
.wx_day_lo     { color: var(--blue-muted); }
.wx_day_precip { font-size: 10px; color: var(--blue-muted); flex-shrink: 0; }
.wx_day_wind   { font-size: 10px; color: var(--muted-dim); flex-shrink: 0; }
.wx_loading    { color: var(--muted); font-size: 12px; font-style: italic; padding: 10px 0; }
.wx_error      { color: #cc6666; font-size: 12px; padding: 10px 0; }

/* ============================================================
   RUNNER PIN
   ============================================================ */
.runner_pin { display: flex; flex-direction: column; align-items: center; cursor: default; }
.runner_pin_dot {
  width: 20px; height: 20px;
  background: #FFD700;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.35), 0 2px 8px rgba(0,0,0,0.6);
  animation: runner_pin_pulse 1.6s ease-in-out infinite;
}
.runner_pin_label {
  background: rgba(0,0,0,0.88);
  color: #FFD700;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  margin-top: 3px;
  border: 1px solid rgba(255,215,0,0.35);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes runner_pin_pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,215,0,0.35), 0 2px 8px rgba(0,0,0,0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(255,215,0,0.08), 0 2px 8px rgba(0,0,0,0.6); }
}

/* ============================================================
   RUNNER SEARCH
   ============================================================ */
.runner_search_btn { position: relative; }
.runner_search_wrap { position: relative; }

#runner_search_input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 12px;
  outline: none;
  width: 170px;
  transition: width 200ms, border-color 200ms, background 150ms;
  font-family: var(--font-ui);
}
#runner_search_input:focus {
  width: 210px;
  border-color: var(--accent-border);
  background: var(--surface3);
}
#runner_search_input::placeholder { color: var(--muted); }

#runner_search_results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  z-index: 99999;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  scrollbar-width: thin;
  scrollbar-color: rgba(74,158,255,0.2) transparent;
}
.runner_search_item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-dim);
  font-size: 12px;
  color: var(--text);
  transition: background 100ms;
}
.runner_search_item:last-child { border-bottom: none; }
.runner_search_item:hover { background: var(--surface2); }
.runner_search_item_inactive { opacity: 0.55; }
.runner_search_name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runner_search_bib  { font-size: 10px; color: var(--muted); font-family: var(--font-mono); flex-shrink: 0; }
.runner_search_no_results { padding: 10px 12px; font-size: 12px; color: var(--muted); font-style: italic; }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.runner_badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: var(--radius-sm);
  padding: 2px 5px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.runner_badge_dnf    { background: var(--red-dim);    color: #ff8a8a; border: 1px solid rgba(218,54,51,0.35); }
.runner_badge_dns    { background: var(--amber-dim);  color: #f0c060; border: 1px solid rgba(210,153,34,0.35); }
.runner_badge_fin    { background: var(--green-dim);  color: var(--green); border: 1px solid rgba(63,185,80,0.35); }
.runner_badge_active { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-border); }

/* ============================================================
   RUNNER FLYOUT — SPLITS TABLE
   ============================================================ */
.runner_detail_header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.runner_detail_bib {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-mid);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 8px;
}
.runner_splits_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.runner_splits_table thead tr { border-bottom: 1px solid var(--border); }
.runner_splits_table th {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 4px 6px;
  text-align: left;
  font-weight: 700;
}
.runner_splits_table td {
  padding: 6px 6px;
  border-bottom: 1px solid var(--border-dim);
  color: var(--text-mid);
}
.runner_splits_table tbody tr:hover td { background: var(--surface2); }
.runner_split_time {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.runner_no_splits { text-align: center; color: var(--muted-dim); font-style: italic; padding: 16px 0; }
.runner_dnf_note {
  margin-top: 14px; padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px; color: #ff8a8a;
  background: var(--red-dim);
  border: 1px solid rgba(218,54,51,0.3);
}
.runner_dns_note {
  margin-top: 14px; padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px; color: #f0c060;
  background: var(--amber-dim);
  border: 1px solid rgba(210,153,34,0.3);
}

/* ============================================================
   LEGEND
   ============================================================ */
/* #flyout_panel_legend is scoped by ID so this flex-column pinning
   only applies to the legend panel — the shared .side_bar_con /
   .flyout_panel rules used by the aid-station and segment flyouts
   are left untouched. */
#flyout_panel_legend {
  /* .side_bar_con is a flex item (flex:1) of .right_sidebar_con, so it has
     a definite pixel height — height:100% here resolves against that.
     NOTE: js/main.js (openFlyout/closeFlyout/showLegendFlyout) toggles
     this panel's visibility via inline style.display ("none"/"block"),
     and an inline style always wins the cascade over a non-!important
     stylesheet rule — so `display:flex` can NOT be relied on here while
     the panel is visible (it gets clobbered to display:block by JS).
     Give this element a definite height + positioning context instead,
     and let .legend_con establish its own flex column via absolute
     positioning that fills it completely — that works whether this
     panel is currently laid out as display:block (visible) or
     display:none (hidden), since neither JS nor any sibling rule
     touches position/height/top/right/bottom/left. */
  height: 100%;
  position: relative;
}
.legend_con {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  color: var(--text-mid);
  display: flex;
  flex-direction: column;
}
.legend_scroll_con {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.legend_list_item {
  display: flex;
  align-items: center;
  margin: 7px 0;
  font-size: 13px;
  color: var(--text-mid);
}
.legend_circle {
  width: 16px; height: 16px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}
.legend_circle.legend_circle_bright_green { background: #3fb950; }
.legend_circle.legend_circle_dark_green   { background: #1a5c0a; }
.legend_circle.legend_circle_orange       { background: #FFA500; }
.legend_circle.legend_circle_light_green  { background: #00FF00; }
.legend_circle.legend_circle_white        { background: #ffffff; }
.legend_circle.legend_circle_light_gray   { background: #8a94a0; }
.legend_circle.legend_circle_dark_gray    { background: #4d5561; }
.legend_circle.legend_circle_blue         { background: var(--accent); }

.legend_line {
  width: 20px; height: 5px;
  border-radius: 10px;
  margin: 0 10px 0 0;
  flex-shrink: 0;
}
.legend_line.legend_line_black { background: #000000; }

.legend_howto_section {
  margin: 14px 0;
}
.legend_howto_label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.legend_howto_text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mid);
  margin: 0;
}
.legend_copyright {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 0 4px;
  margin-top: 14px;
}
.legend_copyright p {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  margin: 2px 0;
}

/* ============================================================
   DATATABLE (standings page)
   ============================================================ */
div.dataTables_wrapper div.dataTables_filter {
  text-align: center;
  float: none;
  padding: 8px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.dataTables_wrapper .dataTables_filter input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  outline: none;
}

/* ============================================================
   DROPDOWN
   ============================================================ */
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
  display: none;
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  border-radius: var(--radius-md);
  z-index: 99999;
  top: 100%;
  overflow: hidden;
}
.dropdown-content a {
  color: var(--text-mid);
  padding: 10px 14px;
  text-decoration: none;
  display: block;
  font-size: 13px;
  transition: background 100ms;
}
.dropdown-content a:hover { background: var(--surface2); color: var(--text); }
.dropdown:hover .dropdown-content { display: block; }

/* ============================================================
   MAPBOX OVERRIDES
   ============================================================ */
.mapboxgl-popup { max-width: 320px; font: 13px/1.5 var(--font-ui); }
.mapboxgl-ctrl-group {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}
.mapboxgl-ctrl-group button { background-color: transparent !important; }
.mapboxgl-ctrl button .mapboxgl-ctrl-icon { filter: invert(0.8) !important; }
.mapboxgl-ctrl-attrib-inner { font-size: 9px !important; }