/* Colors follow studio.css so Weather reads as part of Arx. */
:root {
  color-scheme: dark;
  --bg: #101815;
  --panel: #19231f;
  --muted: #a6b7ad;
  --accent: #b9ed88;
  --line: #33433a;
  --drawer-ink: #a1b7a5;
  --drawer-line: #a1b7a566;
  --status-neutral: #a6b7ad;
  --status-good: #b9ed88;
  --status-failed: #f28b82;
  --status-weak: #ead077;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  background: #080e0b;
  color: #eff6f0;
  font: 14px/1.5 system-ui, sans-serif;
  overflow: hidden;
}
#map {
  position: absolute;
  inset: 0;
  background: #0b1210;
}
.leaflet-container {
  font: 12px/1.4 system-ui, sans-serif;
  background: #0b1210;
}
.leaflet-control-attribution {
  background: #101916d9 !important;
  color: var(--muted);
  border-top-left-radius: 8px;
  padding: 2px 8px !important;
}
.leaflet-control-attribution a {
  color: var(--drawer-ink);
}
.leaflet-bar {
  border: 1px solid var(--drawer-line) !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 4px 10px #0008 !important;
}
.leaflet-bar a {
  background: #101916f5 !important;
  color: var(--drawer-ink) !important;
  border-bottom-color: var(--drawer-line) !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
}
.leaflet-bar a:hover {
  filter: brightness(1.2);
}

.weatherPanel {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1000;
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  background: #101916f2;
  border: 1px solid var(--drawer-line);
  border-radius: 18px;
  color: #eff6f0;
  box-shadow: 0 7px 18px #0009;
  overflow: hidden;
}
.panelToggle {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.panelToggle:focus-visible,
.weatherPanel button:focus-visible,
.weatherPanel input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.panelTitle {
  font-weight: 650;
  letter-spacing: 0.4px;
}
.panelSummary {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chevron {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--drawer-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease-out;
}
.collapsed .chevron {
  transform: rotate(-90deg);
}
.collapsed .panelBody {
  display: none;
}
.panelBody {
  overflow-y: auto;
  padding: 0 16px 16px;
  border-top: 1px solid var(--line);
}
.panelBody section {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.panelBody h2 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--drawer-ink);
}
.statusDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--status-neutral);
}
.statusDot[data-health='ok'] {
  background: var(--status-good);
  box-shadow: 0 0 6px #b9ed8880;
}
.statusDot[data-health='stale'] {
  background: var(--status-weak);
}
.statusDot[data-health='error'] {
  background: var(--status-failed);
}
.statusDot[data-health='loading'] {
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .statusDot[data-health='loading'] {
    animation: none;
  }
}
.sourceList {
  display: grid;
  gap: 6px;
}
.sourceOption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.sourceOption:has(input:checked) {
  border-color: var(--accent);
  background: #b9ed8812;
}
.sourceOption strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.sourceOption small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
input[type='radio'],
input[type='checkbox'] {
  accent-color: var(--accent);
  margin: 3px 0 0;
}
.toggleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  cursor: pointer;
}
.toggleRow input {
  margin: 0;
}
.sliderRow {
  display: flex;
  justify-content: space-between;
  padding: 6px 0 0 24px;
  color: var(--muted);
  font-size: 12px;
}
input[type='range'] {
  width: calc(100% - 24px);
  margin: 2px 0 6px 24px;
  accent-color: var(--accent);
}
.statusLine {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.kindChip {
  padding: 1px 8px;
  border: 1px solid var(--drawer-line);
  border-radius: 999px;
  font-size: 11px;
  color: var(--drawer-ink);
}
.kindChip[data-kind='forecast'] {
  border-color: #8fb8e8;
  color: #8fb8e8;
}
.statusMessage {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.statusMessage[data-health='stale'] {
  color: var(--status-weak);
}
.statusMessage[data-health='error'] {
  color: var(--status-failed);
}
.legend {
  display: block;
  max-width: 100%;
  margin: 10px 0 4px;
  border-radius: 4px;
}
.small {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.panelActions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
}
.panelActions button {
  flex: 1;
  border: 1px solid #476050;
  background: transparent;
  color: #eff6f0;
  border-radius: 8px;
  padding: 8px 6px;
  font: 600 12px system-ui;
  cursor: pointer;
}
.panelActions button:hover {
  filter: brightness(1.15);
  border-color: var(--drawer-ink);
}

/* Road strokes are repainted green in weather.js; a thin dark edge keeps them readable over radar. */
.leaflet-roads-pane {
  filter: drop-shadow(0 0 1px #000);
}
.placeLabel {
  background: none;
  border: 0;
  pointer-events: none;
}
.placeName {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-4px, -50%);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: #fff;
  font: 700 14.5px/1 system-ui, sans-serif;
  letter-spacing: 0.2px;
  /* Hard black edge: tight 1 px offsets all round, plus a small dark glow. */
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 1px 3px rgba(0, 0, 0, 0.9);
}
.placeName::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px #000;
  flex: none;
}
.placeName.left {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 4px), -50%);
}
.placeName.above,
.placeName.below {
  flex-direction: column-reverse;
  gap: 3px;
  transform: translate(-50%, calc(-100% + 4px));
}
.placeName.below {
  flex-direction: column;
  transform: translate(-50%, -4px);
}
.placeName.big {
  font-size: 17px;
}
.placeName.mid {
  font-size: 15.5px;
}
.layerNote {
  color: var(--muted);
  font-size: 11px;
}
.localAlerts {
  display: grid;
  gap: 6px;
}
.localAlerts p {
  margin: 0;
}
.calm {
  color: var(--status-good);
  font-size: 12px;
}
.alertRow {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 7px 10px 7px 12px;
  text-align: left;
  background: #ffffff08;
  color: #eff6f0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--alert, var(--status-weak));
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}
.alertRow:hover {
  filter: brightness(1.2);
}
.alertRow strong {
  font-size: 13px;
}
.alertRow span {
  color: var(--muted);
  font-size: 11px;
}
.localObs {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.localObs li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 8px;
}
.obsName {
  font-size: 12px;
  color: var(--drawer-ink);
}
.obsValue {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.obsValue.muted {
  color: var(--muted);
  font-weight: 400;
}
.obsText {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #101916f5;
  color: #eff6f0;
  border: 1px solid var(--drawer-line);
  box-shadow: 0 7px 18px #0009;
}
.leaflet-popup-content {
  margin: 10px 14px;
  font: 13px/1.45 system-ui, sans-serif;
}
.leaflet-container a.leaflet-popup-close-button {
  color: var(--drawer-ink);
}
.alertPopup strong {
  display: block;
  font-size: 14px;
}
.alertPopup .popupTime {
  color: var(--status-weak);
  font-size: 12px;
}
.alertPopup p {
  margin: 6px 0 0;
}

.timeline {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(620px, calc(100vw - 140px));
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #101916f2;
  border: 1px solid var(--drawer-line);
  border-radius: 14px;
  box-shadow: 0 7px 18px #0009;
}
.timeline.unavailable .frameTime {
  color: var(--muted);
}
.timeline button,
.timeline select {
  border: 1px solid #476050;
  background: transparent;
  color: #eff6f0;
  border-radius: 8px;
  font: 600 12px system-ui;
  cursor: pointer;
}
.timeline button:disabled,
.timeline select:disabled,
.timeline input:disabled {
  opacity: 0.4;
  cursor: default;
}
.timeline button:focus-visible,
.timeline select:focus-visible,
.timeline input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.playToggle {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
}
.playToggle svg {
  width: 16px;
  height: 16px;
  fill: var(--accent);
}
.playToggle .pauseIcon,
.playToggle.playing .playIcon {
  display: none;
}
.playToggle.playing .pauseIcon {
  display: block;
}
.timeline input[type='range'] {
  width: 100%;
  margin: 0;
}
.frameTime {
  min-width: 150px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.timeline select {
  padding: 6px 4px;
  background: #101916;
}
.goLive {
  padding: 7px 10px;
}
.goLive.isLive {
  border-color: var(--accent);
  color: var(--accent);
  background: #b9ed8818;
}
/* Keep the panel clear of the timeline. */
.weatherPanel {
  max-height: calc(100% - 110px);
}

@media (max-width: 760px) {
  .timeline {
    width: calc(100vw - 24px);
    grid-template-columns: auto 1fr auto auto;
    row-gap: 6px;
  }
  .frameTime {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
  .timeline input[type='range'] {
    grid-column: 2 / span 3;
    grid-row: 1;
  }
  .timeline select {
    grid-column: 3;
    grid-row: 2;
  }
  .goLive {
    grid-column: 4;
    grid-row: 2;
  }
  .playToggle {
    grid-row: 1 / span 2;
  }
}

@media (max-width: 640px) {
  .weatherPanel {
    top: 12px;
    left: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100% - 140px);
  }
  .timeline {
    bottom: 12px;
  }
  .leaflet-bottom.leaflet-right {
    bottom: 92px;
  }
  /* Credits live in the panel's Sources section on phones. */
  .leaflet-control-attribution {
    display: none;
  }
}
.subRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 6px 24px;
}
.subRow select,
.forecastBlock select {
  border: 1px solid #476050;
  background: #101916;
  color: #eff6f0;
  border-radius: 8px;
  padding: 5px 6px;
  font: 600 12px system-ui;
}
.sliderRow.plain {
  padding-left: 0;
  align-items: center;
  color: #eff6f0;
  font-size: 13px;
}
.kindChip[data-kind='forecast'] {
  border-color: #8fb8e8;
  color: #8fb8e8;
}
.timeline.inForecast .frameTime {
  color: #8fb8e8;
}
.timeline.inForecast input[type='range'] {
  accent-color: #8fb8e8;
}
/* Compare split: a draggable line with labels for each side. */
.compareDivider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 900;
  width: 0;
  pointer-events: none;
}
.compareDivider[hidden] {
  display: none;
}
.compareDivider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: #eff6f0;
  box-shadow: 0 0 0 1px #000a;
}
.compareGrip {
  position: absolute;
  top: 50%;
  left: -16px;
  width: 32px;
  height: 44px;
  margin-top: -22px;
  border-radius: 10px;
  background: #101916f2;
  border: 1px solid #eff6f0;
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
}
.compareTag {
  position: absolute;
  top: 70px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #101916e6;
  border: 1px solid var(--drawer-line);
  color: var(--drawer-ink);
  font: 600 11px system-ui;
  white-space: nowrap;
}
.compareTag.left {
  right: 10px;
}
.compareTag.right {
  left: 10px;
  color: #8fb8e8;
  border-color: #8fb8e888;
}
/* Radar picker */
.radarPicker {
  display: grid;
  gap: 6px;
}
.radarPicker select,
.locateRow select {
  width: 100%;
  border: 1px solid #476050;
  background: #101916;
  color: #eff6f0;
  border-radius: 8px;
  padding: 8px 6px;
  font: 600 13px system-ui;
}
.radarPicker button,
.locateRow button {
  border: 1px solid #476050;
  background: transparent;
  color: var(--accent);
  border-radius: 8px;
  padding: 8px 6px;
  font: 600 12px system-ui;
  cursor: pointer;
}
.radarPicker button:hover,
.locateRow button:hover {
  filter: brightness(1.15);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.radarTags {
  margin-top: 6px;
}
.tag {
  padding: 1px 7px;
  border: 1px solid var(--drawer-line);
  border-radius: 999px;
  color: var(--drawer-ink);
  font-size: 10.5px;
  line-height: 1.5;
  white-space: nowrap;
}
.linkButton {
  border: 0;
  padding: 2px 0;
  background: none;
  color: var(--drawer-ink);
  font: 600 11px system-ui;
  text-decoration: underline;
  cursor: pointer;
}
#removeRadar {
  margin-top: 6px;
}
#removeRadar[hidden] {
  display: none;
}
.radarPopup {
  position: fixed;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(440px, 70vh);
  padding: 10px;
  background: #101916f7;
  border: 1px solid var(--drawer-line);
  border-radius: 14px;
  box-shadow: 0 7px 18px #0009;
  color: #eff6f0;
}
.radarPopup[hidden] {
  display: none;
}
.popupHead {
  display: flex;
  gap: 6px;
}
.popupHead input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #476050;
  border-radius: 8px;
  background: #0b1210;
  color: #eff6f0;
  font: 16px system-ui;
}
.popupClose {
  width: 36px;
  border: 1px solid #476050;
  border-radius: 8px;
  background: transparent;
  color: var(--drawer-ink);
  font: 600 18px system-ui;
  cursor: pointer;
}
.filterChips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.filterChip {
  padding: 3px 9px;
  border: 1px solid var(--drawer-line);
  border-radius: 999px;
  background: transparent;
  color: var(--drawer-ink);
  font: 600 11px system-ui;
  cursor: pointer;
}
.filterChip[aria-pressed='true'] {
  border-color: var(--accent);
  background: #b9ed8818;
  color: var(--accent);
}
.radarResults {
  display: grid;
  gap: 6px;
  overflow-y: auto;
  min-height: 60px;
}
.resultRow {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff06;
  color: #eff6f0;
  font: inherit;
  text-align: left;
}
button.resultRow {
  cursor: pointer;
}
button.resultRow:hover {
  border-color: var(--drawer-ink);
}
.resultRow strong {
  font-size: 13px;
  font-weight: 600;
}
.productChips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.productChip {
  padding: 4px 9px;
  border: 1px solid #476050;
  border-radius: 7px;
  background: transparent;
  color: var(--accent);
  font: 600 11px system-ui;
  cursor: pointer;
}
.productChip:hover {
  background: #b9ed8818;
}
.resultHeader {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.resultHeadRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.backRow {
  justify-self: start;
  border: 0;
  padding: 2px 0;
  background: none;
  color: var(--drawer-ink);
  font: 600 12px system-ui;
  cursor: pointer;
}
/* Location */
.locateRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-bottom: 4px;
}
.locateRow select {
  width: auto;
}
.meDot {
  background: #8fd0ff;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #0009, 0 0 10px 3px #8fd0ffaa;
}
.credits a {
  color: var(--drawer-ink);
}
.restNotice {
  position: fixed;
  z-index: 1050;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 9px 14px;
  border: 1px solid var(--drawer-line);
  border-radius: 12px;
  background: #101916f7;
  box-shadow: 0 7px 18px #0009;
  color: #eff6f0;
  font: 600 13px system-ui;
  cursor: pointer;
}
.restNotice[hidden] {
  display: none;
}