:root {
  --bg:#160a2b;
  --pane:#24103f;
  --pane-deep:#160a2b;
  --ink:#ffffff;
  --ink-soft:#f8ecbe;
  --accent:#fdd023;
  --accent-2:#fdd023;
  --line:rgba(253,208,35,.35);
  --shadow:rgba(0,0,0,.28);
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:var(--bg);
}

button,
input,
select {
  font:inherit;
}

button,
#playStorm {
  border:1px solid var(--line);
  border-radius:6px;
  padding:.65rem .75rem;
  background:rgba(253,208,35,.14);
  color:var(--ink);
  font-size:1rem;
  cursor:pointer;
}

button:hover,
#playStorm:hover {
  background:rgba(253,208,35,.24);
  border-color:var(--accent);
}

.app-container {
  display:flex;
  height:auto;
  min-height:520px;
}

.sidebar {
  width:360px;
  flex:0 0 360px;
  background:var(--pane);
  border-right:1px solid var(--line);
  padding:1rem 1rem .75rem;
  box-shadow:4px 0 18px var(--shadow);
  z-index:20;
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.sidebar-scrollable {
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding-right:.2rem;
  scrollbar-width:thin;
  scrollbar-color:var(--accent) rgba(255,255,255,.08);
}

.sidebar-scrollable::-webkit-scrollbar {
  width:10px;
}

.sidebar-scrollable::-webkit-scrollbar-track {
  background:rgba(255,255,255,.06);
}

.sidebar-scrollable::-webkit-scrollbar-thumb {
  background:rgba(253,208,35,.58);
  border-radius:999px;
  border:2px solid rgba(255,255,255,.08);
}

.sidebar-scrollable::-webkit-scrollbar-thumb:hover {
  background:rgba(253,208,35,.78);
}

.sidebar-header {
  border-bottom:1px solid var(--line);
  padding-bottom:.9rem;
  margin-bottom:1.1rem;
}

.sidebar-title-group {
  display:flex;
  flex-direction:column;
  gap:.22rem;
  min-width:0;
}

.sidebar-title {
  font-size:1.45rem;
  font-weight:800;
  line-height:1.2;
  color:var(--ink);
  overflow-wrap:anywhere;
}

.sidebar-subtitle {
  font-size:.95rem;
  color:var(--ink-soft);
  line-height:1.25;
  overflow-wrap:anywhere;
}

.sidebar-menu {
  list-style:none;
  padding:0;
  margin:0 0 1rem;
  display:flex;
  flex-direction:row;
  gap:.5rem;
}

.sidebar-menu li {
  flex:1 1 0;
  min-width:0;
  padding:.72rem .55rem;
  cursor:pointer;
  border:1px solid transparent;
  border-radius:6px;
  color:var(--ink-soft);
  font-size:.95rem;
  font-weight:700;
  text-align:center;
}

.sidebar-menu li.active,
.sidebar-menu li.active:hover {
  background:rgba(253,208,35,.18);
  border-color:var(--accent);
  color:var(--ink);
  font-weight:700;
}

.sidebar-menu li:hover:not(.active) {
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  color:var(--ink);
}

.main-content {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:visible;
  background:var(--bg);
}

.panel {
  margin:0;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.hidden,
.panel.hidden {
  display:none !important;
}

#filterPanel,
#comparePanel,
.panel.search-panel {
  width:100%;
  min-width:0;
  max-width:100%;
}

#filterPanel,
.search-fields,
.compare-row,
.field-group {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.7rem;
  min-width:0;
  max-width:100%;
}

.panel-title {
  color:var(--ink);
  font-size:1.08rem;
  font-weight:800;
  line-height:1.2;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--line);
  overflow-wrap:anywhere;
}

#filterPanel label,
.field-group label,
.search-panel .field-label,
.inline-label,
.selected-label {
  color:var(--ink-soft);
  font-size:1rem;
  font-weight:700;
  overflow-wrap:anywhere;
}

.dropdown {
  position:relative;
  display:block;
  width:100%;
  max-width:none;
  min-width:0;
}

.dropdown-btn {
  width:100%;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dropdown-btn:hover {
  overflow:visible;
}

.dropdown-content {
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  width:100%;
  max-height:220px;
  overflow-y:auto;
  background:#ffffff;
  color:#123536;
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:0 12px 22px var(--shadow);
  z-index:1000;
  font-size:1rem;
}

.dropdown-content div {
  padding:.62rem .75rem;
  cursor:pointer;
}

.dropdown-content div:hover {
  background:#fff4cc;
}

.dropdown-content .active {
  background:#f8ecbe;
  font-weight:700;
  color:#24103f;
}

select,
input[type="text"],
input[type="number"] {
  background:#ffffff;
  color:#24103f;
  border:1px solid var(--line);
  border-radius:6px;
  padding:.65rem .7rem;
  font-size:1rem;
  width:100%;
  max-width:100%;
}

input[type="date"] {
  background:#ffffff;
  color:#24103f;
  border:1px solid var(--line);
  border-radius:6px;
  padding:.65rem .7rem;
  font-size:1rem;
  width:100%;
  max-width:100%;
}

.button-row {
  margin-top:.25rem;
  flex-wrap:wrap;
}

.button-row button,
#filterPanel button {
  width:100%;
  font-size:1rem;
  padding:.72rem .8rem;
}

.compare-row.button-row {
  display:grid;
  grid-template-columns:1fr;
  gap:.5rem;
}

.compare-row.button-row button {
  width:100%;
  min-width:0;
}

.preview-actions {
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.sidebar button,
.sidebar .dropdown-btn {
  width:auto;
  max-width:100%;
}

.section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  min-width:0;
}

.add-storm-toggle {
  width:auto;
  align-self:flex-start;
  text-align:center;
  font-weight:800;
  background:rgba(255,255,255,.07);
}

.remove-all-btn,
.add-selected-btn {
  width:auto;
  align-self:flex-start;
}

.add-storm-panel {
  display:flex;
  flex-direction:column;
  gap:.85rem;
  padding:.9rem;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(253,208,35,.06);
  min-width:0;
}

.preview-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  color:var(--ink-soft);
  font-size:.95rem;
  font-weight:700;
}

.preview-select-controls {
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
  justify-content:flex-end;
  min-width:0;
}

.preview-select-control {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  color:var(--ink-soft);
  font-size:.9rem;
  font-weight:700;
  margin:0;
}

.preview-select-control input {
  width:1rem;
  height:1rem;
  margin:0;
}

.add-storm-hint {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  padding:.65rem .75rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:6px;
  background:rgba(255,255,255,.05);
  color:var(--ink);
  font-size:.9rem;
  line-height:1.35;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
}

.add-storm-hint.hidden {
  display:none;
}

.add-storm-hint-close {
  flex:0 0 auto;
  width:1.65rem;
  height:1.65rem;
  min-width:1.65rem;
  min-height:1.65rem;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:inherit;
  font-size:1.1rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.add-storm-hint-close:hover {
  background:rgba(255,255,255,.24);
}

.add-storm-hint-close:focus-visible {
  outline:2px solid #fff;
  outline-offset:2px;
}

.chart-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.35rem;
}

.chart-action-group {
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.storm-preview-list {
  display:flex;
  flex-direction:column;
  gap:.35rem;
  max-height:30rem;
  overflow:auto;
  padding:.35rem;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(255,255,255,.025);
  min-width:0;
}

.storm-preview-scroll-cue {
  color:var(--ink-soft);
  font-size:.82rem;
  font-weight:700;
  text-align:right;
  padding:.05rem .15rem 0;
  letter-spacing:0;
}

.storm-preview-item {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  padding:.55rem .6rem;
  border:1px solid rgba(255,255,255,.055);
  border-radius:6px;
  background:rgba(255,255,255,.015);
  cursor:pointer;
  min-width:0;
  font-size:.92rem;
  font-weight:700;
  line-height:1.25;
  opacity:.88;
}

.storm-preview-item:hover {
  background:rgba(255,255,255,.045);
}

.storm-preview-item input {
  margin-top:.2rem;
  flex:0 0 auto;
}

.storm-preview-text {
  min-width:0;
  overflow-wrap:anywhere;
  flex:1 1 auto;
  font-size:inherit;
  font-weight:inherit;
}

.storm-preview-add {
  flex:0 0 auto;
  width:2.15rem;
  height:2.15rem;
  min-width:2.15rem;
  min-height:2.15rem;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:1.15rem;
  font-weight:800;
}

.preview-empty {
  color:var(--ink-soft);
  font-size:.92rem;
  line-height:1.35;
  padding:.45rem .25rem;
}

.explorer-coachmark-backdrop {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.42);
  z-index:2600;
  pointer-events:none;
}

.explorer-coachmark-backdrop.hidden {
  display:none;
}

.explorer-coachmark {
  position:fixed;
  z-index:2601;
  max-width:min(360px, calc(100vw - 24px));
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.85rem .9rem;
  border-radius:10px;
  border:1px solid rgba(140, 111, 0, .55);
  background:#fff5c8;
  color:#2a2100;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}

.explorer-coachmark.hidden {
  display:none;
}

.explorer-coachmark-text {
  min-width:0;
  flex:1 1 auto;
  font-size:.95rem;
  line-height:1.35;
  font-weight:700;
}

.explorer-coachmark-close {
  flex:0 0 auto;
  width:1.8rem;
  height:1.8rem;
  min-width:1.8rem;
  min-height:1.8rem;
  border:0;
  border-radius:999px;
  background:rgba(42,33,0,.12);
  color:#2a2100;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:1.2rem;
  line-height:1;
}

.explorer-coachmark-close:hover {
  background:rgba(42,33,0,.18);
}

.explorer-coachmark-close:focus-visible {
  outline:2px solid #2a2100;
  outline-offset:2px;
}

.add-storm-filter-error {
  color:#ffd27a;
  font-size:.84rem;
  line-height:1.25;
  padding:.28rem .35rem .2rem;
  min-height:1.1rem;
  border-radius:6px;
  background:rgba(244, 201, 122, .08);
  border:1px solid transparent;
  box-shadow:none;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.add-storm-filter-error.is-visible {
  opacity:1;
  transform:translateY(0);
  border-color:rgba(244, 201, 122, .35);
  box-shadow:0 0 0 1px rgba(244, 201, 122, .12), 0 0 0 4px rgba(244, 201, 122, .08);
}

.add-storm-filter-error.shake {
  animation: invalid-range-shake .38s ease-in-out 1;
}

.add-storm-panel.has-invalid-range .field-group input[type="date"] {
  border-color:rgba(244, 201, 122, .6);
  box-shadow:0 0 0 1px rgba(244, 201, 122, .2), 0 0 0 3px rgba(244, 201, 122, .08);
}

@keyframes invalid-range-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

.season-play-control {
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--ink-soft);
  font-size:.92rem;
  font-weight:700;
  padding:.2rem 0 .1rem;
}

.season-play-control input {
  width:1rem;
  height:1rem;
  margin:0;
}

.custom-circle-fields {
  display:none;
  flex-direction:column;
  align-items:stretch;
  gap:.7rem;
  padding:.75rem;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(253,208,35,.08);
}

.circle-center-status {
  min-height:1.1rem;
  color:var(--ink-soft);
  font-size:.9rem;
  line-height:1.2;
}

select:focus,
input:focus {
  outline:2px solid rgba(253,208,35,.35);
  border-color:var(--accent);
}

#map-container {
  flex:0 0 auto;
  height:68vh;
  min-height:520px;
  margin:0;
  padding:0;
  background:var(--pane-deep);
  position:relative;
  overflow:hidden;
}

.map-loading-overlay {
  position:absolute;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(1, 9, 12, .38);
  pointer-events:none;
}

.map-loading-overlay.hidden {
  display:none;
}

.map-loading-card {
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.9rem 1.15rem;
  border-radius:10px;
  background:rgba(5,17,20,.92);
  border:1px solid rgba(255,255,255,.24);
  color:var(--ink);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

.map-loading-text {
  font-weight:700;
  font-size:1rem;
  letter-spacing:.02em;
}

.results-pane {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding-top:1rem;
}

#comparisonTableContainer,
#stormCharts {
  width:100%;
  box-sizing:border-box;
}

.historical-player-bar {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:1rem;
  padding:1rem 1.1rem;
  border-top:1px solid var(--line);
  background:rgba(22,10,43,.97);
  box-shadow:0 -8px 18px var(--shadow);
}

.historical-player-top {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  position:relative;
  padding-left:12rem;
}

.historical-player-time-wrap {
  min-width:0;
  flex:0 1 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  max-width:11.5rem;
}

.historical-player-controls {
  display:flex;
  align-items:center;
  gap:.55rem;
  flex:0 0 auto;
  justify-content:center;
  flex-wrap:wrap;
  margin:0 auto;
}

.historical-player-bar .hero-player-btn {
  width:54px;
  height:54px;
  min-width:54px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(253,208,35,.14);
  color:var(--ink);
}

.historical-player-bar .hero-player-btn:hover {
  background:rgba(253,208,35,.24);
  border-color:var(--accent);
}

.historical-player-bar .hero-player-btn.play-btn {
  width:62px;
}

.play-mode-control {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.25rem .55rem;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(253,208,35,.08);
  color:var(--ink-soft);
  font-size:.9rem;
  font-weight:700;
}

.play-mode-control span {
  white-space:nowrap;
}

.play-mode-control select {
  width:auto;
  min-width:152px;
  max-width:100%;
  padding:.45rem .55rem;
  font-size:.92rem;
  background:var(--home-purple-dark, #24103f);
  color:var(--ink);
  border-color:var(--accent);
  color-scheme:dark;
}

.play-mode-control select:hover,
.play-mode-control select:focus {
  background:var(--home-purple, #461d7c);
  border-color:var(--accent);
  box-shadow:0 0 0 .16rem rgba(253,208,35,.2);
}

.play-mode-control + .play-mode-control {
  margin-left:.1rem;
}

.historical-player-meta {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  text-align:center;
  color:var(--ink-soft);
  font-size:.92rem;
  line-height:1.2;
  width:100%;
}

.storm-player-time {
  color:var(--ink);
  font-size:.88rem;
  font-weight:700;
  padding-top:.15rem;
  text-align:left;
  white-space:nowrap;
}

.historical-player-selected {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  padding-top:.15rem;
}

.historical-player-selected #selectedStormList {
  justify-content:center;
  max-height:none;
  overflow:visible;
  padding-right:0;
}

#map {
  height:100%;
  width:100%;
  position:relative;
  z-index:0;
  margin:0;
  padding:0;
}

#data-section {
  flex:1;
  padding:1rem;
  background:var(--pane-deep);
  overflow-y:auto;
}

#stormCharts {
  display:none;
  height:auto;
  padding:.85rem 1rem;
  background:var(--pane-deep);
  border-top:1px solid var(--line);
  flex-direction:column;
  justify-content:flex-start;
  gap:1rem;
  box-shadow:0 -8px 18px var(--shadow);
}

.chart-block {
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.chart-title {
  color:var(--ink-soft);
  font-size:1.05rem;
  font-weight:800;
  margin:0;
}

.chart-download-btn {
  width:auto;
  align-self:flex-start;
  min-width:2.35rem;
  min-height:2.35rem;
  padding:0;
  font-size:1.05rem;
  font-weight:700;
}

#stormCharts canvas {
  width:100% !important;
  height:420px !important;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:.25rem;
}

#comparisonTableContainer {
  background:var(--pane-deep);
  color:var(--ink);
  border-top:1px solid var(--line);
  clear:both;
  position:relative;
  z-index:1;
  margin:0;
  padding:1rem 1rem 1.25rem;
  overflow-x:auto;
}

#comparisonTableContainer h3 {
  margin-top:0;
  color:var(--ink);
}

#comparisonTable {
  background:#ffffff;
  color:#24103f;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  border-collapse:collapse !important;
  table-layout:fixed;
  min-width:820px;
}

#comparisonTable th,
#comparisonTable td {
  border:1px solid #9fbfc2;
  padding:.55rem .6rem;
  vertical-align:middle;
}

#comparisonTable th {
  background:var(--pane);
  color:var(--ink);
  font-size:1rem;
  font-weight:800;
  text-align:center;
}

#comparisonTable td {
  font-size:1rem;
  font-weight:600;
  text-align:center;
}

#comparisonTable td:first-child {
  text-align:left;
}

.comparison-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin:.5rem 0 .75rem;
  width:fit-content;
  max-width:100%;
  align-self:flex-start;
}

.comparison-toolbar label {
  color:var(--ink);
  font-weight:700;
  white-space:nowrap;
}

.comparison-toolbar select,
.comparison-sort-dir {
  color:var(--ink);
  background:rgba(0,0,0,.18);
  border:1px solid var(--line);
  border-radius:6px;
  padding:.4rem .6rem;
  font-weight:700;
  width:auto;
  min-width:0;
  flex:0 0 auto;
}

.comparison-toolbar:focus-within {
  outline:2px solid rgba(255,255,255,.24);
  outline-offset:2px;
  border-radius:6px;
}

.comparison-toolbar select {
  min-width:12rem;
}

.comparison-sort-dir {
  cursor:pointer;
}

.comparison-sort-dir:hover,
.comparison-toolbar select:hover {
  background:rgba(253,208,35,.16);
  border-color:var(--accent);
}

.graph-cell {
  text-align:center;
  vertical-align:middle;
}

.graph-toggle {
  width:1.05rem;
  height:1.05rem;
  cursor:pointer;
}

.graph-toggle:focus-visible,
.season-play-control input:focus-visible,
.preview-select-control input:focus-visible {
  outline:2px solid #fff;
  outline-offset:2px;
}

#selectedStormList {
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  min-width:0;
  max-width:100%;
  max-height:160px;
  overflow:auto;
  padding-right:.15rem;
}

.selected-storm-pill {
  background:rgba(253,208,35,.24);
  color:var(--ink);
  border:1px solid var(--line);
  padding:.4rem .65rem;
  border-radius:999px;
  font-size:.86rem;
  font-weight:800;
  max-width:100%;
  overflow-wrap:anywhere;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.selected-storm-pill:hover {
  background:rgba(253,208,35,.34);
  border-color:var(--accent);
  transform:translateY(-1px);
}

.selected-storm-pill .selected-storm-remove {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.1rem;
  height:1.1rem;
  line-height:1;
  border-radius:999px;
  color:#ffd7d7;
  background:rgba(255,255,255,.08);
  flex:0 0 auto;
}

.selected-row {
  padding:.8rem;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(253,208,35,.07);
}

.leaflet-tooltip.storm-tooltip,
.leaflet-tooltip {
  background:#ffffff;
  border:1px solid var(--line);
  color:#24103f;
  font-size:.78rem;
  padding:.25rem .45rem;
  border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}

.leaflet-control-layers,
.leaflet-control-zoom,
.leaflet-control-attribution,
.leaflet-control {
  color:#24103f;
}

.track-legend {
  background:rgba(255,255,255,.94);
  color:#24103f;
  border:1px solid rgba(8,45,47,.2);
  border-radius:6px;
  padding:.65rem .75rem;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  min-width:150px;
  font-size:.82rem;
  line-height:1.2;
}

.track-legend-title {
  font-weight:800;
  margin-bottom:.45rem;
}

.track-legend-row {
  display:grid;
  grid-template-columns:18px minmax(42px, auto) auto;
  align-items:center;
  gap:.35rem;
  margin:.25rem 0;
}

.track-legend-swatch {
  width:16px;
  height:4px;
  border-radius:999px;
  display:inline-block;
}

.track-legend-circle {
  width:16px;
  height:16px;
  border:2px dashed #8f9aa3;
  border-radius:999px;
  display:inline-block;
}

.track-legend-label {
  font-weight:700;
}

.track-legend-detail {
  color:#496466;
  font-size:.78rem;
  text-align:right;
}

.area-title {
  margin-top:.35rem;
}

.compare-limit-note,
.charts-note {
  color:var(--ink-soft);
  font-size:.95rem;
  line-height:1.35;
  padding:.65rem .75rem;
  border:1px dashed var(--line);
  border-radius:6px;
  background:rgba(253,208,35,.08);
}

#suggestions {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#ffffff;
  color:#24103f;
  border:1px solid var(--line);
  border-radius:6px;
  z-index:1000;
  list-style:none;
  margin:.25rem 0 0;
  padding:0;
  max-height:180px;
  overflow-y:auto;
  font-size:.86rem;
  box-shadow:0 12px 22px var(--shadow);
}

#suggestions li {
  padding:.45rem .65rem;
  cursor:pointer;
}

#suggestions li:hover {
  background:#fff4cc;
}

.search-input-wrapper {
  position:relative;
  min-width:0;
  max-width:none;
  width:100%;
}

#areaSearchInput {
  width:100%;
}

#radiusInput {
  width:100%;
}

@media (max-width: 900px) {
  body { overflow:auto; }
  .app-container {
    flex-direction:column;
    height:auto;
    min-height:0;
  }
  .sidebar {
    width:100%;
    flex:auto;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .sidebar-menu {
    flex-direction:row;
    flex-wrap:wrap;
  }
  .main-content {
    min-height:620px;
  }
  #map-container {
    height:58vh;
    min-height:420px;
  }
  .historical-player-bar {
    flex-direction:column;
    align-items:stretch;
  }
  .historical-player-top {
    justify-content:center;
    padding-left:0;
  }
  .historical-player-time-wrap {
    position:static;
    transform:none;
    max-width:none;
    width:100%;
    justify-content:center;
  }
  .historical-player-controls {
    width:100%;
  }
  .historical-player-meta {
    align-items:flex-start;
    text-align:left;
  }
  #stormCharts {
    height:auto;
    flex-direction:column;
  }
  #stormCharts canvas {
    height:300px !important;
  }
  #comparisonTableContainer {
    padding: .75rem;
  }

  #comparisonTable {
    min-width:760px;
  }

  .comparison-toolbar {
    width:100%;
  }
}