/* EventMap Modes v8 — restrained, production UI. Scoped to the existing panel.
   No new map, no duplicated controls; intended to load last among stylesheets. */
#map-options.em-tm {
  --em-bg:#101b2a; --em-card:#142235; --em-soft:#1d2c40;
  --em-line:#304255; --em-blue:#1d9bf0; --em-ink:#f1f5f9;
  --em-muted:#a3b1c2;
  position:absolute!important;
  inset:auto 14px 76px auto!important;
  display:flex!important; flex-direction:column!important;
  isolation:isolate; z-index:90!important;
  width:min(448px,calc(100vw - 28px))!important;
  height:auto!important; max-height:min(780px,calc(100dvh - 120px))!important;
  min-height:0!important; min-width:0!important;
  margin:0!important; padding:0!important; gap:0!important;
  overflow:hidden!important;
  background:rgba(15,26,40,.985)!important;
  color:var(--em-ink)!important;
  border:1px solid var(--em-line)!important;
  border-radius:20px!important;
  box-shadow:0 18px 55px rgba(0,0,0,.44)!important;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  text-align:left!important; font-family:Inter,system-ui,-apple-system,sans-serif!important;
}
#map-options.em-tm[hidden],#map-options.em-tm [hidden] {display:none!important;}
#map-options.em-tm *,#map-options.em-tm *::before,#map-options.em-tm *::after {box-sizing:border-box;}
#map-options.em-tm button {font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;}
#map-options.em-tm :focus-visible {outline:2px solid var(--em-blue)!important;outline-offset:2px!important;}

/* Compact, stable header. Native style buttons live in the right-hand group. */
#map-options.em-tm .em-tm-header {
  flex:0 0 auto; min-height:0;
  padding:18px 19px 14px;
  border-bottom:1px solid var(--em-line);
  background:transparent;
}
#map-options.em-tm .em-tm-header-top {display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
#map-options.em-tm .em-tm-heading>span {
  display:block; color:var(--em-muted); font-size:11px;
  font-weight:700;line-height:1.3;letter-spacing:.01em;
}
#map-options.em-tm .em-tm-heading h2 {
  margin:5px 0 0; color:var(--em-ink);font-size:26px;
  font-weight:770;line-height:1.12;letter-spacing:-.035em;
}
#map-options.em-tm .em-tm-close {
  flex:0 0 34px; width:34px; height:34px;
  display:grid;place-items:center;padding:8px;
  border:1px solid var(--em-line); border-radius:10px;
  color:var(--em-muted); background:var(--em-card);
}
#map-options.em-tm .em-tm-close:hover {background:var(--em-soft);color:white;}
#map-options.em-tm .em-tm-close svg {width:18px;height:18px;}
#map-options.em-tm .em-tm-base {
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  margin-top:15px; min-width:0;
}
#map-options.em-tm .em-tm-base-label {color:var(--em-muted);font-size:11px;font-weight:650;}
#map-options.em-tm .em-tm-styles {
  position:static!important; inset:auto!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  min-width:0!important;width:auto!important;height:auto!important;
  gap:0!important;padding:3px!important;margin:0!important;
  background:transparent!important;border:1px solid var(--em-line)!important;
  border-radius:10px!important;box-shadow:none!important;
}
#map-options.em-tm .em-tm-styles .style-card {
  position:relative!important;display:flex!important;align-items:center!important;
  justify-content:center!important;flex:none!important;
  min-width:73px!important;min-height:33px!important;
  width:auto!important;height:33px!important;max-width:none!important;
  margin:0!important;padding:7px 10px!important;gap:0!important;
  color:var(--em-muted)!important;background:transparent!important;
  border:0!important;border-radius:8px!important;box-shadow:none!important;
  font-size:11px!important;font-weight:700!important;text-align:center!important;
  text-transform:none!important;transform:none!important;
}
#map-options.em-tm .em-tm-styles .style-card:hover {color:#fff!important;background:rgba(143,166,191,.08)!important;}
#map-options.em-tm .em-tm-styles .style-card.active {
  color:#fff!important;background:#234765!important;border:0!important;
  box-shadow:inset 0 0 0 1px #388fca!important;
}
#map-options.em-tm .em-tm-styles .style-card .style-thumb,
#map-options.em-tm .em-tm-styles .style-card .em-style-caption,
#map-options.em-tm .em-tm-styles .style-card .em-style-active {display:none!important;}
#map-options.em-tm .em-tm-styles .style-card>span:not(.style-thumb):not(.em-style-caption):not(.em-style-active) {
  display:block!important;font-size:11px!important;font-weight:700!important;color:inherit!important;
}

/* Mode / Settings: straightforward tabs, no gradients. */
#map-options.em-tm .em-tm-tabs {
  flex:0 0 auto; display:grid;grid-template-columns:1fr 1fr;gap:0;
  padding:0 16px;border-bottom:1px solid var(--em-line);
}
#map-options.em-tm .em-tm-tabs button {
  min-height:44px;padding:10px 6px;
  color:var(--em-muted);background:transparent;
  border:0;border-bottom:2px solid transparent;
  font-size:13px;font-weight:700;
}
#map-options.em-tm .em-tm-tabs button.is-active {color:#fff;border-bottom-color:var(--em-blue);}
#map-options.em-tm .em-tm-content {
  display:block!important;flex:1 1 auto;min-height:0;
  overflow-y:auto!important;overflow-x:hidden!important;
  scrollbar-width:thin; scrollbar-color:#354c61 transparent;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:6px 18px 12px!important;
}

/* Screenshot-inspired full-width list: outline icons, hairlines, one selected row. */
#map-options.em-tm .em-tm-grid {display:flex!important;flex-direction:column;gap:0;min-height:0;}
#map-options.em-tm .em-tm-grid[hidden] {display:none!important;}
#map-options.em-tm .em-tm-choice {
  position:relative;display:flex;align-items:center;gap:14px;
  width:100%;min-width:0;min-height:68px;
  margin:0;padding:11px 11px;
  border:0;border-bottom:1px solid var(--em-line);
  border-radius:0;background:transparent;
  color:var(--em-ink);text-align:left;
  transition:background-color .13s ease;
}
#map-options.em-tm .em-tm-choice:hover {background:#1c2c3f;}
#map-options.em-tm .em-tm-choice.is-active {
  background:#243e5c;border-bottom-color:#325477;
  border-radius:9px;box-shadow:inset 3px 0 0 #1d9bf0;
}
#map-options.em-tm .em-tm-icon {
  flex:0 0 27px;width:27px;height:27px;
  display:grid;place-items:center;
  background:transparent;color:#d6e0ec;border:0;border-radius:0;
}
#map-options.em-tm .em-tm-choice.is-active .em-tm-icon {background:transparent;color:#fff;}
#map-options.em-tm .em-tm-icon svg {width:24px;height:24px;stroke-width:1.7;}
#map-options.em-tm .em-tm-name {flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
#map-options.em-tm .em-tm-name strong {font-size:14px;font-weight:720;line-height:1.22;color:#edf2f7;letter-spacing:-.01em;}
#map-options.em-tm .em-tm-name small {font-size:11px;font-weight:430;line-height:1.3;color:var(--em-muted);}
#map-options.em-tm .em-tm-chevron {
  flex:0 0 16px;display:grid;place-items:center;
  width:16px;height:22px;color:#98aabc;
}
#map-options.em-tm .em-tm-chevron svg {width:16px;height:16px;stroke-width:1.6;}
#map-options.em-tm .em-tm-choice.is-active .em-tm-chevron {color:#fff;}
#map-options.em-tm .em-tm-footer {display:none!important;}

/* Advanced Settings: reuse original checkboxes AND their change listeners. */
#map-options.em-tm .em-tm-settings[hidden] {display:none!important;}
#map-options.em-tm .em-tm-setting-section {margin-top:18px;}
#map-options.em-tm .em-tm-setting-section h3 {margin:0 0 10px;font-size:11px;font-weight:730;letter-spacing:.08em;color:var(--em-muted);text-transform:uppercase;}
#map-options.em-tm label.em-tm-setting {
  position:relative;display:flex!important;align-items:center;gap:12px;
  min-height:48px;margin:0!important;padding:10px 8px!important;
  color:var(--em-ink)!important;background:transparent!important;
  border:0!important;border-bottom:1px solid var(--em-line)!important;
  border-radius:0!important;cursor:pointer;
}
#map-options.em-tm .em-tm-setting-name {flex:1;min-width:0;font-size:13px;font-weight:550;}
#map-options.em-tm label.em-tm-setting input[type=checkbox] {
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  margin:0!important;opacity:0!important;appearance:none!important;
  z-index:2!important;cursor:pointer!important;
}
#map-options.em-tm .em-tm-switch {flex:0 0 37px;width:37px;height:21px;display:block;pointer-events:none;border-radius:99px;background:#435565;}
#map-options.em-tm .em-tm-switch>span {display:block;margin:3px 0 0 3px;width:15px;height:15px;background:#fff;border-radius:50%;transition:transform .14s;}
#map-options.em-tm label.em-tm-setting input:checked + .em-tm-switch {background:var(--em-blue);}
#map-options.em-tm label.em-tm-setting input:checked + .em-tm-switch>span {transform:translateX(16px);}

/* Real transport widget belongs in Settings; never a sibling of the mode list. */
#map-options.em-tm .em-tm-transport-section {margin:18px 0 8px;padding-top:12px;border-top:1px solid var(--em-line);}
#map-options.em-tm .em-tm-transport-disclosure {border:1px solid var(--em-line);border-radius:10px;background:var(--em-card);overflow:hidden;}
#map-options.em-tm .em-tm-transport-summary {
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:13px;color:var(--em-ink);cursor:pointer;list-style:none;
}
#map-options.em-tm .em-tm-transport-summary::-webkit-details-marker {display:none;}
#map-options.em-tm .em-tm-transport-summary::after {content:'⌄';font-size:17px;color:var(--em-muted);}
#map-options.em-tm .em-tm-transport-disclosure[open] .em-tm-transport-summary::after {transform:rotate(180deg);}
#map-options.em-tm .em-tm-transport-summary strong {font-size:13px;font-weight:690;}
#map-options.em-tm .em-tm-transport-summary span {color:var(--em-muted);font-size:11px;margin-left:auto;}
#map-options.em-tm .em-tm-transport-disclosure[open] .em-tm-transport-summary {border-bottom:1px solid var(--em-line);}
#map-options.em-tm .em-tm-transport-host #tr-panel.tr-panel {
  position:static!important;inset:auto!important;transform:none!important;
  float:none!important;display:block!important;
  width:100%!important;max-width:none!important;max-height:none!important;height:auto!important;
  margin:0!important;padding:10px!important;border:0!important;
  overflow:visible!important;box-shadow:none!important;background:transparent!important;
}
#map-options.em-tm .em-tm-transport-host #tr-panel .tr-panel-heading,
#map-options.em-tm .em-tm-transport-host #tr-panel .tr-panel-caption,
#map-options.em-tm .em-tm-transport-host #tr-panel .tr-source-note {display:none!important;}
#map-options.em-tm .em-tm-transport-host #tr-panel input[type=checkbox] {accent-color:#1d9bf0;}
#map-options.em-tm > #tr-panel,#map-options.em-tm > .tr-panel {display:none!important;}

#map-options-toggle.map-options-toggle {
  display:inline-flex!important;align-items:center!important;gap:8px!important;
  border-radius:10px!important;min-height:40px!important;
  padding:9px 13px!important;background:rgba(20,34,53,.98)!important;
  color:#f3f7fc!important;border:1px solid #3a5672!important;
  font-weight:710!important;box-shadow:0 8px 24px rgba(0,0,0,.32)!important;
}
#map-options-toggle.map-options-toggle svg {width:17px!important;height:17px!important;color:#8ecbfa!important;}

/* Mobile is a real bottom sheet. Header/tabs stay fixed; only rows scroll. */
@media(max-width:800px) {
  #map-options.em-tm {
    position:fixed!important;
    inset:auto 8px calc(70px + env(safe-area-inset-bottom,0px)) 8px!important;
    width:auto!important;height:min(77dvh,650px)!important;
    max-height:calc(100dvh - 124px - env(safe-area-inset-bottom,0px))!important;
    min-height:0!important;overflow:hidden!important;border-radius:16px!important;
  }
  #map-options.em-tm .em-tm-header {padding:13px 15px 11px;}
  #map-options.em-tm .em-tm-heading h2 {font-size:23px;}
  #map-options.em-tm .em-tm-base {justify-content:space-between;margin-top:12px;gap:8px;}
  #map-options.em-tm .em-tm-styles {flex:1!important;justify-content:space-between!important;}
  #map-options.em-tm .em-tm-styles .style-card {flex:1!important;min-width:0!important;padding:6px 5px!important;font-size:10px!important;}
  #map-options.em-tm .em-tm-tabs {padding:0 13px;}
  #map-options.em-tm .em-tm-tabs button {min-height:41px;}
  #map-options.em-tm .em-tm-content {padding:3px 11px 10px!important;flex:1 1 auto!important;min-height:0!important;}
  #map-options.em-tm .em-tm-choice {min-height:63px;padding:10px 9px;gap:12px;}
  #map-options.em-tm .em-tm-icon {flex-basis:25px;width:25px;height:25px;}
  #map-options.em-tm .em-tm-icon svg {width:22px;height:22px;}
  #map-options.em-tm .em-tm-name strong {font-size:13px;}
  #map-options.em-tm .em-tm-name small {font-size:10.5px;}
}
@media(max-width:360px) {
  #map-options.em-tm .em-tm-base-label {display:none!important;}
  #map-options.em-tm .em-tm-styles .style-card {font-size:9px!important;}
  #map-options.em-tm .em-tm-choice {min-height:60px;}
}
@media(prefers-reduced-motion:reduce) {
  #map-options.em-tm *,#map-options-toggle.map-options-toggle {transition:none!important;}
}
