.seqweather-monitor {
  --seq-blue: #0b4f8f;
  --seq-blue-dark: #073864;
  --seq-orange: #e59400;
  --seq-border: #d8e0e8;
  --seq-text: #17212b;
  --seq-muted: #5d6a76;
  color: var(--seq-text);
  font-family: inherit;
  width: 100%;
}

@media (min-width: 921px) {
  .seqweather-monitor {
    left: 50%;
    max-width: 1600px;
    position: relative;
    transform: translateX(-50%);
    width: calc(100vw - 32px);
  }
}

.seqweather-monitor *,
.seqweather-monitor *::before,
.seqweather-monitor *::after { box-sizing: border-box; }

.seqweather-toolbar {
  align-items: center;
  background: #f4f7fa;
  border: 1px solid var(--seq-border);
  border-radius: 10px 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
}

.seqweather-search-wrap { flex: 1 1 230px; }
.seqweather-search {
  background: #fff;
  border: 1px solid #b9c5d0;
  border-radius: 7px;
  color: var(--seq-text);
  font: inherit;
  min-height: 42px;
  padding: 8px 12px;
  width: 100%;
}

.seqweather-filters { display: flex; flex: 2 1 420px; flex-wrap: wrap; gap: 6px; }
.seqweather-filter-select,
.seqweather-refresh,
.seqweather-media-button,
.seqweather-back {
  appearance: none;
  background: #fff;
  border: 1px solid #b9c5d0;
  border-radius: 7px;
  color: #1f3549;
  cursor: pointer;
  font: 600 13px/1.2 inherit;
  min-height: 38px;
  padding: 8px 11px;
}
.seqweather-filter-select { width: 100%; }
.seqweather-media-button[aria-pressed="true"] { background: var(--seq-blue); border-color: var(--seq-blue); color: #fff; }
.seqweather-media-button--live { align-items: center; border-color: #cc0000; color: #cc0000; display: inline-flex; gap: 5px; justify-content: center; }
.seqweather-media-button--live::before { background: #ff0000; border-radius: 50%; content: ''; display: inline-block; height: 8px; order: -2; width: 8px; }
.seqweather-media-button--live::after { animation: seqweather-live-blink 1.2s steps(1, end) infinite; color: #cc0000; content: '\25b6'; font-size: 8px; line-height: 1; order: -1; }
.seqweather-media-button--live:hover { background: #fdeaea; }
.seqweather-media-button--live[aria-pressed="true"] { background: #ff0000; border-color: #cc0000; color: #fff; }
.seqweather-media-button--live[aria-pressed="true"]::before { background: #fff; }
.seqweather-media-button--live[aria-pressed="true"]::after { color: #fff; }
.seqweather-media-button--live[aria-pressed="true"]:hover { background: #e60000; }
@keyframes seqweather-live-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .seqweather-media-button--live::after { animation: none; }
}
.seqweather-refresh { background: var(--seq-orange); border-color: var(--seq-orange); color: #fff; }
.seqweather-refresh:disabled { cursor: wait; opacity: .55; }
.seqweather-filter-select:focus-visible,
.seqweather-refresh:focus-visible,
.seqweather-media-button:focus-visible,
.seqweather-back:focus-visible,
.seqweather-list-item:focus-visible,
.seqweather-search:focus-visible { outline: 3px solid rgba(11, 79, 143, .28); outline-offset: 2px; }

.seqweather-status {
  background: #eaf3fb;
  border-left: 1px solid var(--seq-border);
  border-right: 1px solid var(--seq-border);
  color: #234b6d;
  font-size: 13px;
  padding: 7px 11px;
}
.seqweather-status.is-error { background: #fff0ef; color: #a02a21; }
.seqweather-camera-label {
  background: #eef5fb;
  border-left: 4px solid var(--seq-blue);
  border-radius: 4px;
  color: #183b59;
  font-size: 13px;
  margin: 0 12px 10px;
  padding: 7px 9px;
}
.seqweather-camera-label strong { font-weight: 900; }
.seqweather-live-probe-alert {
  animation: seqweather-live-probe-pulse 1.35s ease-in-out infinite;
  appearance: none;
  background: #720909;
  border: 0;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font: 900 12px/1.2 inherit;
  margin-left: 7px;
  padding: 4px 8px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.seqweather-live-probe-alert:hover { animation-duration: .8s; }
.seqweather-live-probe-alert:focus-visible { outline: 3px solid rgba(180,35,24,.28); outline-offset: 2px; }
@keyframes seqweather-live-probe-pulse {
  0%, 100% { background: #720909; box-shadow: 0 0 0 0 rgba(210,35,35,.18); }
  50% { background: #e33a32; box-shadow: 0 0 0 5px rgba(227,58,50,.2); }
}
@media (prefers-reduced-motion: reduce) {
  .seqweather-live-probe-alert { animation: none; background: #8f1511; }
}

.seqweather-layout {
  border: 1px solid var(--seq-border);
  display: grid;
  grid-template-columns: minmax(0, 2.45fr) minmax(400px, 1fr);
  height: var(--seqweather-map-height, 680px);
  overflow: hidden;
}
/* The location list is long (200+ items) and belongs in a scrollable box next to
   the map, matching the map's height. A selected location's detail view is
   different -- a probe or camera with a long sensor list must grow the page
   instead of being clipped to the map's height, so .seqweather-layout--detail
   (toggled in JS alongside showing .seqweather-detail) drops both constraints. */
.seqweather-layout--detail { height: auto; overflow: visible; }
.seqweather-map { background: #e7edf1; height: 100%; min-height: 420px; z-index: 1; }
.seqweather-layout--detail .seqweather-map { height: var(--seqweather-map-height, 680px); }
.seqweather-panel { background: #fff; border-left: 1px solid var(--seq-border); min-width: 0; overflow-y: auto; }
.seqweather-layout--detail .seqweather-panel { overflow-y: visible; }
.seqweather-list { display: flex; flex-direction: column; }
.seqweather-list-item {
  align-items: center;
  appearance: none;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #edf0f3;
  color: var(--seq-text);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 10px;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  padding: 12px;
  text-align: left;
  width: 100%;
}
.seqweather-list-item:hover { background: #f5f9fc; }
.seqweather-list-copy { min-width: 0; }
.seqweather-list-copy strong,
.seqweather-list-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seqweather-list-copy strong { font-size: 14px; }
.seqweather-list-copy small { color: var(--seq-muted); font-size: 12px; margin-top: 3px; }
.seqweather-list-badge { background: #edf2f6; border-radius: 99px; color: #52606d; font-size: 10px; font-weight: 700; padding: 4px 7px; text-transform: uppercase; }
.seqweather-list-dot { border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.18); height: 10px; width: 10px; }
.seqweather-list-dot--flood { background: #0b63a9; }
.seqweather-list-dot--weather { background: #e89400; }
.seqweather-list-dot--river { background: #00a09b; }
.seqweather-list-dot--traffic { background: #7253a3; }
.seqweather-list-dot--wildfire { background: #cb392d; }
.seqweather-list-dot--general { background: #667482; }
.seqweather-list-dot--sensor { background: #397755; }
.seqweather-list-dot--mobile { background: #8a3fb0; }

.seqweather-detail { min-height: 100%; padding: 14px; }
.seqweather-detail[hidden], .seqweather-list[hidden] { display: none !important; }
.seqweather-detail-header h3 { font-size: 20px; line-height: 1.22; margin: 12px 0 8px; }
.seqweather-back { background: transparent; border: 0; color: var(--seq-blue); min-height: 30px; padding: 2px 0; }
.seqweather-detail-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.seqweather-type-badge,
.seqweather-status-badge { border-radius: 99px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .03em; padding: 5px 8px; text-transform: uppercase; }
.seqweather-type-badge--flood { background: #0b63a9; }
.seqweather-type-badge--weather { background: #e89400; }
.seqweather-type-badge--river { background: #008c88; }
.seqweather-type-badge--sensor { background: #397755; }
.seqweather-type-badge--mobile { background: #8a3fb0; }
.seqweather-status-badge { background: #667482; }
.seqweather-status-badge--online,
.seqweather-status-badge--active,
.seqweather-status-badge--ok { background: #27824b; }
.seqweather-status-badge--offline,
.seqweather-status-badge--error { background: #a9362f; }

.seqweather-media { margin-bottom: 16px; }
.seqweather-media-stage { align-items: center; background: #17212b; border-radius: 8px; display: flex; justify-content: center; min-height: 185px; overflow: hidden; position: relative; }
.seqweather-camera-open {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: zoom-in;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}
.seqweather-camera-open:focus-visible { outline: 4px solid #71b7ef; outline-offset: -4px; }
.seqweather-camera-image,
.seqweather-camera-video { display: block; height: auto; max-height: 480px; object-fit: contain; width: 100%; }
.seqweather-media-stage > .video-js { aspect-ratio: 16 / 9; height: auto; max-height: 480px; width: 100%; }
.seqweather-media-stage .vjs-poster { background-size: cover; }
.seqweather-video-expand { appearance: none; background: rgba(7,21,33,.88); border: 1px solid rgba(255,255,255,.55); border-radius: 6px; color: #fff; cursor: pointer; font: 700 12px/1.2 inherit; padding: 8px 10px; position: absolute; right: 9px; top: 9px; z-index: 8; }
.seqweather-video-expand:focus-visible { outline: 3px solid #71b7ef; outline-offset: 2px; }
.seqweather-video-error { background: rgba(13,23,31,.88); border-radius: 6px; left: 50%; margin: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); width: min(90%, 360px); z-index: 9; }
.seqweather-media-stage.has-error::after { color: #fff; content: 'Image temporarily unavailable'; font-size: 13px; padding: 20px; position: absolute; text-align: center; }
.seqweather-media-error { color: #fff; padding: 20px; text-align: center; }
.seqweather-media-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.seqweather-media-button { flex: 1 1 auto; font-size: 12px; }
.seqweather-archive-button { background: #6f4518; border-color: #6f4518; color: #fff; flex-basis: 100%; }
.seqweather-archive-button:hover { background: #59380f; border-color: #59380f; }

.seqweather-sensors,
.seqweather-linked-river { border-top: 1px solid var(--seq-border); margin-top: 14px; padding-top: 14px; }
.seqweather-sensors h4,
.seqweather-linked-river h4 { font-size: 15px; margin: 0 0 9px; }
.seqweather-sensor-grid { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seqweather-sensor-tile {
  background: #60717e;
  border-radius: 7px;
  color: #fff;
  min-height: 94px;
  overflow: hidden;
  padding: 7px 8px 6px;
  position: relative;
}
.seqweather-sensor-tile.is-chartable { cursor: pointer; }
.seqweather-sensor-tile.is-chartable::after { background: rgba(0,0,0,.32); border-radius: 3px; bottom: 5px; color: #fff; content: '>> Click for graph'; font-size: 9px; font-weight: 900; letter-spacing: .01em; line-height: 1.15; padding: 1px 3px; position: absolute; right: 6px; text-transform: uppercase; z-index: 3; }
.seqweather-sensor-tile.is-chartable:hover { filter: brightness(1.08); }
.seqweather-sensor-tile.is-chartable:focus-visible { outline: 4px solid #71b7ef; outline-offset: 2px; }
.seqweather-sensor-tile--amber { background: #eba000; }
.seqweather-sensor-tile--orange { background: #dd9000; }
.seqweather-sensor-tile--blue { background: #0a4c91; }
.seqweather-sensor-tile--sky { background: #477da7; }
.seqweather-sensor-tile--navy { background: #06457f; }
.seqweather-sensor-tile--taupe { background: #9d9173; }
.seqweather-sensor-tile--charcoal { background: #3e3d3d; }
.seqweather-sensor-tile--grey { background: #666; }
.seqweather-sensor-tile--olive { background: #9d9b00; }
.seqweather-sensor-tile--green { background: #397755; }
.seqweather-sensor-tile--slate { background: #69737b; }
.seqweather-sensor-label { font-size: 11px; font-weight: 800; line-height: 1.1; position: relative; z-index: 2; }
.seqweather-sensor-main { align-items: flex-end; display: flex; justify-content: space-between; min-height: 45px; position: relative; z-index: 2; }
.seqweather-sensor-icon { font-size: 25px; font-weight: 700; line-height: 1; opacity: .95; }
.seqweather-sensor-reading { align-items: baseline; display: flex; gap: 3px; margin-left: 5px; min-width: 0; text-align: right; }
.seqweather-sensor-reading strong { font-size: clamp(22px, 2vw, 31px); letter-spacing: -.04em; line-height: .95; overflow: hidden; text-overflow: ellipsis; }
.seqweather-sensor-reading small { font-size: 9px; font-weight: 800; line-height: 1; text-transform: none; }
.seqweather-sensor-range { bottom: 5px; font-size: 9px; font-weight: 700; left: 8px; max-width: calc(100% - 118px); opacity: .95; overflow: hidden; position: absolute; text-overflow: ellipsis; white-space: nowrap; z-index: 2; }
.seqweather-sparkline { bottom: 0; height: 46%; left: 0; opacity: .18; position: absolute; width: 100%; z-index: 1; }
.seqweather-sparkline polygon { fill: #fff; }
.seqweather-sensor-time,
.seqweather-credit { color: var(--seq-muted); font-size: 11px; line-height: 1.4; margin: 8px 0 0; }
.seqweather-mobile-comment { background: #f2e9f8; border-left: 4px solid #8a3fb0; border-radius: 5px; color: #4f2565; margin: 0 0 10px; padding: 8px 10px; }
.seqweather-mobile-offline { background: #fff0ef; border-left: 4px solid #a9362f; border-radius: 5px; color: #842c27; font-size: 12px; font-weight: 800; margin: 0 0 10px; padding: 8px 10px; }
.seqweather-mobile-position { color: var(--seq-muted); font-size: 12px; margin: 7px 0 12px; }
.seqweather-mobile-position.is-unavailable { color: #9b3d35; }

.seqweather-river-line { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; margin: 0; }
.seqweather-river-line strong { color: var(--seq-blue); font-size: 24px; }
.seqweather-flood-alert { border-radius: 6px; color: #fff; font-size: 13px; font-weight: 800; margin: 10px 0; padding: 9px 11px; text-align: center; text-transform: uppercase; }
.seqweather-flood-alert--minor { background: #d1a000; }
.seqweather-flood-alert--moderate { background: #e56c16; }
.seqweather-flood-alert--major { background: #be2b25; }
.seqweather-levels { border: 1px solid var(--seq-border); border-radius: 7px; margin-top: 10px; overflow: hidden; }
.seqweather-level { align-items: center; display: flex; justify-content: space-between; padding: 8px 10px; }
.seqweather-level + .seqweather-level { border-top: 1px solid var(--seq-border); }
.seqweather-level--minor { border-left: 5px solid #d1a000; }
.seqweather-level--moderate { border-left: 5px solid #e56c16; }
.seqweather-level--major { border-left: 5px solid #be2b25; }

.seqweather-version { color: #7a858f; font-size: 10px; padding: 5px 2px; text-align: right; }

body.seqweather-lightbox-open { overflow: hidden; }
.seqweather-lightbox[hidden] { display: none !important; }
.seqweather-lightbox {
  align-items: center;
  background: rgba(7, 15, 22, .94);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 1000000;
}
.seqweather-lightbox-dialog {
  align-items: center;
  display: flex;
  flex-direction: column;
  max-height: 96vh;
  max-width: min(1600px, 96vw);
  position: relative;
}
.seqweather-lightbox-image {
  background: #111a22;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .55);
  display: block;
  height: auto;
  max-height: calc(96vh - 62px);
  max-width: 100%;
  object-fit: contain;
}
.seqweather-lightbox-image[hidden],
.seqweather-lightbox-video[hidden],
.seqweather-history-chart[hidden],
.seqweather-lightbox-dialog > .video-js[hidden] { display: none !important; }
.seqweather-lightbox-dialog > .video-js {
  aspect-ratio: 16 / 9 !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.55);
  height: auto !important;
  max-height: calc(96vh - 62px);
  width: min(1500px, 94vw) !important;
}
.seqweather-lightbox-dialog .vjs-poster { background-size: cover; }
.seqweather-history-chart { background: #fff; border-radius: 10px; box-shadow: 0 12px 48px rgba(0,0,0,.55); color: var(--seq-text); max-height: calc(96vh - 30px); overflow: auto; padding: 22px; width: min(1050px, 92vw); }
.seqweather-history-chart h3 { font-size: clamp(18px, 2.3vw, 27px); line-height: 1.2; margin: 0 0 16px; padding-right: 34px; }
.seqweather-history-loading,
.seqweather-history-empty { color: var(--seq-muted); margin: 30px 0; text-align: center; }
.seqweather-history-range { align-items: end; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.seqweather-history-range-field { color: var(--seq-muted); display: flex; flex-direction: column; font-size: 10px; font-weight: 800; gap: 3px; text-transform: uppercase; }
.seqweather-history-range-input { background: #f8fbfd; border: 1px solid var(--seq-border); border-radius: 6px; color: var(--seq-text); font-size: 12px; padding: 6px 8px; }
.seqweather-history-range-reset { background: #edf4fa; border: 1px solid var(--seq-border); border-radius: 6px; color: var(--seq-blue-dark); cursor: pointer; font-size: 11px; font-weight: 800; padding: 7px 12px; }
.seqweather-history-range-reset:hover { background: #dceafa; }
.seqweather-history-stats { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.seqweather-history-stat { background: #edf4fa; border-radius: 7px; min-width: 0; padding: 9px 10px; }
.seqweather-history-stat small,
.seqweather-history-stat strong { display: block; }
.seqweather-history-stat small { color: var(--seq-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.seqweather-history-stat strong { color: var(--seq-blue-dark); font-size: clamp(16px, 2vw, 23px); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seqweather-history-svg { background: #f8fbfd; border: 1px solid var(--seq-border); border-radius: 8px; display: block; height: auto; width: 100%; }
.seqweather-history-gridline { stroke: #dbe5ed; stroke-width: 1; }
.seqweather-history-axis { fill: #60717e; font: 11px sans-serif; }
.seqweather-history-area { fill: rgba(11,79,143,.15); }
.seqweather-history-line { fill: none; stroke: #0067b8; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; vector-effect: non-scaling-stroke; }
.seqweather-history-note { background: #fff3cd; border: 1px solid #f1cf68; border-radius: 6px; color: #594300; font-size: 12px; font-weight: 700; margin: 8px 0; padding: 7px 10px; }
.seqweather-history-period { color: var(--seq-muted); font-size: 11px; margin: 8px 0 0; text-align: center; }
.seqweather-history-attribution { border-top: 1px solid var(--seq-border); color: var(--seq-muted); font-size: 10px; line-height: 1.4; margin: 12px 0 0; padding-top: 9px; }
.seqweather-lightbox-close {
  appearance: none;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  color: #17212b;
  cursor: pointer;
  font: 700 30px/40px Arial, sans-serif;
  height: 42px;
  padding: 0;
  position: absolute;
  right: -14px;
  text-align: center;
  top: -14px;
  width: 42px;
  z-index: 2;
}
.seqweather-lightbox-close:focus-visible { outline: 4px solid #71b7ef; outline-offset: 3px; }
.seqweather-lightbox-caption { color: #fff; font-size: 14px; font-weight: 700; margin-top: 9px; text-align: center; }

.seqweather-archive-lightbox[hidden] { display: none !important; }
.seqweather-archive-lightbox {
  align-items: center;
  background: rgba(7, 15, 22, .94);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 1000000;
}
.seqweather-archive-dialog {
  background: #10181f;
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .55);
  max-height: 96vh;
  max-width: min(1100px, 96vw);
  overflow: auto;
  padding: 20px;
  position: relative;
  width: 100%;
}
.seqweather-archive-caption { color: #fff; font-size: 15px; font-weight: 700; margin: 0 34px 12px 0; }
.seqweather-archive-progress { align-items: center; display: flex; gap: 10px; margin: 10px 0 12px; }
.seqweather-archive-progress[hidden] { display: none !important; }
.seqweather-archive-progress progress { accent-color: #cc0000; flex: 1 1 auto; height: 8px; }
.seqweather-archive-progress progress::-webkit-progress-value { background-color: #cc0000; }
.seqweather-archive-progress progress::-moz-progress-bar { background-color: #cc0000; }
.seqweather-archive-progress-text { color: #9fb3c2; flex: 0 0 auto; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seqweather-archive-stage { background: #050b10; border-radius: 8px; min-height: 200px; position: relative; }
.seqweather-archive-image { display: block; height: auto; max-height: 60vh; margin: 0 auto; width: 100%; object-fit: contain; }
.seqweather-archive-image[hidden] { display: none !important; }
.seqweather-archive-status { color: #9fb3c2; margin: 0; padding: 40px 10px; text-align: center; }
.seqweather-archive-status[hidden] { display: none !important; }
.seqweather-archive-controls { margin-top: 14px; }
.seqweather-archive-options { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.seqweather-archive-option { color: #9fb3c2; display: flex; flex-direction: column; font-size: 10px; font-weight: 800; gap: 4px; text-transform: uppercase; }
.seqweather-archive-option select { background: #1a2530; border: 1px solid #2c3b48; border-radius: 6px; color: #fff; font-size: 12px; padding: 6px 8px; }
.seqweather-archive-scrub { align-items: center; display: flex; gap: 12px; }
.seqweather-archive-play {
  appearance: none;
  background: var(--seq-blue);
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  font: 700 12px/1 inherit;
  padding: 9px 14px;
}
.seqweather-archive-play:hover { background: var(--seq-blue-dark); }
.seqweather-archive-slider { flex: 1 1 auto; }
.seqweather-archive-slider:disabled { opacity: .4; }
.seqweather-archive-time { color: #cfe0ea; flex: 0 0 auto; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seqweather-archive-close {
  appearance: none;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  color: #17212b;
  cursor: pointer;
  font: 700 30px/40px Arial, sans-serif;
  height: 42px;
  padding: 0;
  position: absolute;
  right: -14px;
  text-align: center;
  top: -14px;
  width: 42px;
  z-index: 2;
}
.seqweather-archive-close:focus-visible { outline: 4px solid #71b7ef; outline-offset: 3px; }

.seqweather-marker-wrap { background: none !important; border: 0 !important; }
.seqweather-marker {
  background: #657481;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 2px 5px rgba(0,0,0,.38);
  display: block;
  height: 27px;
  position: relative;
  transform: rotate(-45deg);
  width: 27px;
}
.seqweather-marker > span { background: rgba(255,255,255,.9); border-radius: 50%; height: 7px; left: 7px; position: absolute; top: 7px; width: 7px; }
.seqweather-marker--flood { background: #0b63a9; }
.seqweather-marker--weather { background: #e89400; }
.seqweather-marker--river { background: #008c88; }
.seqweather-marker--traffic { background: #7253a3; }
.seqweather-marker--wildfire { background: #cb392d; }
.seqweather-marker--general { background: #667482; }
.seqweather-marker--sensor { background: #397755; }
.seqweather-marker--mobile { background: #8a3fb0; }
.seqweather-marker--offline { background: #858c92; opacity: .72; }

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large { background-color: rgba(11, 79, 143, .22); }
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div { background-color: var(--seq-blue); color: #fff; font-weight: 800; }

@media (max-width: 920px) {
  .seqweather-layout { display: flex; flex-direction: column; height: auto; }
  .seqweather-map { height: min(62vh, 520px); min-height: 400px; }
  .seqweather-panel { border-left: 0; border-top: 1px solid var(--seq-border); max-height: 620px; overflow-y: auto; }
  .seqweather-layout--detail .seqweather-panel { max-height: none; overflow-y: visible; }
}

@media (max-width: 460px) {
  .seqweather-toolbar { align-items: stretch; }
  .seqweather-filters { flex-basis: 100%; }
  .seqweather-refresh { width: 100%; }
  .seqweather-map { height: 58vh; min-height: 360px; }
  .seqweather-detail { padding: 10px; }
  .seqweather-sensor-grid { gap: 5px; }
  .seqweather-sensor-tile { min-height: 89px; padding-left: 7px; padding-right: 7px; }
  .seqweather-lightbox { padding: 12px; }
  .seqweather-lightbox-dialog { max-width: 100%; }
  .seqweather-lightbox-close { right: 4px; top: 4px; }
  .seqweather-history-chart { padding: 14px 10px; width: 100%; }
  .seqweather-history-range { flex-direction: column; align-items: stretch; }
  .seqweather-history-range-reset { align-self: flex-start; }
  .seqweather-history-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seqweather-archive-lightbox { padding: 12px; }
  .seqweather-archive-dialog { max-width: 100%; padding: 14px; }
  .seqweather-archive-close { right: 4px; top: 4px; }
  .seqweather-archive-scrub { flex-wrap: wrap; }
  .seqweather-archive-slider { flex-basis: 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .seqweather-monitor *, .seqweather-monitor *::before, .seqweather-monitor *::after { scroll-behavior: auto !important; transition: none !important; }
}