:root {
  color-scheme: light;
  --ink: #153047;
  --muted: #617287;
  --line: #d8e1e8;
  --surface: #ffffff;
  --surface-soft: #f3f7fa;
  --canvas: #eef4f7;
  --brand: #087f8c;
  --brand-dark: #075b68;
  --good: #1e7b54;
  --warn: #a46009;
  --bad: #b13a4a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.45;
}

a { color: var(--brand-dark); }

.top-sponsor-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0.35rem max(1.25rem, calc((100vw - 1180px) / 2));
  background: var(--brand-dark);
}
.top-sponsor-bar .sponsor-banner {
  max-width: none;
  padding: 0.15rem 0;
  border: 0;
  background: transparent;
  text-align: right;
}
.top-sponsor-bar .sponsor-banner:hover,
.top-sponsor-bar .sponsor-banner:focus-visible {
  color: #e6fffc;
  background: transparent;
}
.top-sponsor-bar .sponsor-banner:hover strong,
.top-sponsor-bar .sponsor-banner:focus-visible strong { color: #fff; }

.site-header {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-end;
  padding: 3.5rem max(1.25rem, calc((100vw - 1180px) / 2)) 2.75rem;
  color: #f4ffff;
  background: linear-gradient(125deg, #075b68 0%, #087f8c 54%, #1b9b91 100%);
}

.site-header h1 { margin: 0.25rem 0 0.35rem; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.04em; }
.lede { margin: 0; color: #d8f5f3; font-size: 1.05rem; }
.eyebrow { margin: 0; color: var(--brand); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.site-header .eyebrow { color: #a4f0eb; }
.header-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.settings-link { display: inline-flex; align-items: center; gap: 0.35rem; color: #f4ffff; font-size: 0.86rem; font-weight: 800; text-decoration: none; }
.settings-link:hover, .settings-link:focus-visible { color: #e6fffc; }
.settings-link:first-letter { font-size: 1.25rem; }
.sponsor-banner { display: grid; gap: 0.05rem; max-width: 235px; padding: 0.5rem 0.7rem; border: 1px solid rgba(216, 245, 243, 0.7); border-radius: 0.7rem; color: #f4ffff; background: rgba(4, 74, 85, 0.34); font-size: 0.72rem; line-height: 1.25; text-decoration: none; }
.sponsor-banner strong { color: #a4f0eb; font-size: 0.78rem; }
.sponsor-banner:hover, .sponsor-banner:focus-visible { color: #075b68; background: #e6fffc; }
.sponsor-banner:hover strong, .sponsor-banner:focus-visible strong { color: #075b68; }

.page-shell { width: min(1180px, calc(100% - 2.5rem)); margin: -1.5rem auto 3rem; }
.settings-main { margin-top: 1.5rem; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.summary-card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 12px 30px rgba(23, 53, 77, 0.06); }
.summary-card { padding: 1.35rem 1.5rem; }
.summary-card strong { display: block; margin: 0.25rem 0; font-size: 2rem; letter-spacing: -0.04em; }
.summary-label { color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.summary-detail, .muted-text { color: var(--muted); font-size: 0.82rem; }

.panel { margin-top: 1rem; padding: 1.5rem; }
.view-tabs { display: flex; gap: 0.5rem; margin-top: 1.25rem; border-bottom: 1px solid var(--line); }
.view-tab { border: 0; border-bottom: 3px solid transparent; padding: 0.75rem 1rem; color: var(--muted); background: transparent; font: inherit; font-weight: 800; cursor: pointer; }
.view-tab:hover, .view-tab:focus-visible { color: var(--brand-dark); }
.view-tab.is-active { border-bottom-color: var(--brand); color: var(--brand-dark); }
.location-controls { display: grid; grid-template-columns: minmax(260px, 1fr) 150px auto; gap: 1rem; align-items: end; }
.location-panel .location-controls { margin-top: 0; }
.location-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.location-buttons .button { white-space: nowrap; }
.controls-panel { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(180px, 0.45fr) minmax(200px, 0.55fr); gap: 1rem; align-items: end; }
.control-group { display: grid; gap: 0.4rem; }
.control-group label { font-size: 0.78rem; font-weight: 800; color: var(--muted); }
input, select, .button { border: 1px solid #b9c9d5; border-radius: 0.65rem; font: inherit; }
input, select { width: 100%; padding: 0.68rem 0.75rem; color: var(--ink); background: #fff; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(27, 155, 145, 0.32); outline-offset: 2px; }
.filter-summary { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.85rem; }
.history-controls { display: grid; grid-template-columns: minmax(250px, 1fr) 180px; gap: 1rem; margin-bottom: 1rem; }
.map-panel { overflow: hidden; }
.map-canvas { min-height: 520px; border: 1px solid var(--line); border-radius: 0.8rem; overflow: hidden; background: #dcebf0; }
.map-legend { display: flex; gap: 0.55rem 1rem; flex-wrap: wrap; margin: 0 0 0.9rem; color: var(--muted); font-size: 0.82rem; font-weight: 750; }
.map-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.map-legend-item input { width: auto; margin: 0; accent-color: var(--brand); }
.map-legend-item:focus-within { color: var(--brand-dark); }
.map-caveat { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border-left: 4px solid var(--brand); color: var(--muted); background: var(--surface-soft); font-size: 0.82rem; }
.map-heatmap-controls { display: flex; align-items: end; gap: 0.8rem 1rem; flex-wrap: wrap; margin: 0 0 0.35rem; }
.map-heatmap-toggle { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.45rem; color: var(--ink); font-size: 0.84rem; font-weight: 800; cursor: pointer; }
.map-heatmap-toggle input { width: auto; margin: 0; accent-color: var(--brand); }
.map-heatmap-toggle:focus-within { color: var(--brand-dark); }
.map-heatmap-window { width: 155px; }
.map-heatmap-note { margin: 0 0 1rem; color: var(--muted); font-size: 0.78rem; }
.map-list-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-top: 1.25rem; }
.map-list-heading h3 { margin: 0; font-size: 1rem; }
.map-record-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-top: 0.7rem; }
.map-record-card { display: grid; gap: 0.18rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: 0.7rem; background: var(--surface-soft); }
.map-record-title { font-size: 0.92rem; }
.map-record-kind { color: var(--brand-dark); font-size: 0.76rem; font-weight: 800; }
.map-record-line { color: var(--muted); font-size: 0.78rem; }
.map-record-card .button { margin-top: 0.45rem; justify-self: start; }
.button-small { padding: 0.45rem 0.65rem; font-size: 0.78rem; }
.map-marker-shell { display: grid; place-items: center; border: 0; background: transparent; }
.map-marker { display: inline-block; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(21, 48, 71, 0.42); }
.map-marker-live { width: 28px; height: 28px; background: #c93747; }
.map-marker-live-throb { animation: live-marker-throb 1.8s ease-in-out infinite; transform-origin: center; }
.map-marker-recent { background: rgb(196 122 18 / var(--marker-opacity, 1)); border-radius: 3px; }
.map-marker-recent-0-3-throb { animation: recent-marker-0-3-throb 3.6s ease-in-out infinite; transform-origin: center; }
.map-marker-historical { background: #58738b; }
.map-marker-bloom { background: #7a4fa3; border-radius: 3px; transform: rotate(45deg); }
@keyframes live-marker-throb { 0%, 100% { transform: scale(0.86); } 50% { transform: scale(1.12); } }
@keyframes recent-marker-0-3-throb { 0%, 100% { transform: scale(0.92); } 50% { transform: scale(1.08); } }
.map-pathway-key { position: relative; display: inline-block; width: 28px; height: 14px; }
.map-pathway-key::before { content: ""; position: absolute; top: 5px; left: 0; width: 100%; height: 4px; border-radius: 999px; background: #2f80b7; }
.map-pathway-key::after { content: ""; position: absolute; top: 2px; left: 10px; width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; background: #a16207; box-shadow: 0 1px 4px rgba(21, 48, 71, 0.36); opacity: var(--pathway-opacity, 1); }
.pathway-dot { animation: pathway-dot-pulse 2.2s ease-in-out infinite; animation-delay: var(--pathway-dot-delay, 0s); transform-box: fill-box; transform-origin: center; }
@keyframes pathway-dot-pulse { 0%, 100% { transform: scale(0.85); } 50% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .pathway-dot, .map-marker-live-throb, .map-marker-recent-0-3-throb { animation: none; } }
.map-info { display: flex; justify-content: flex-end; margin-top: 0.6rem; }
.map-info details { position: relative; }
.map-info summary { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 1px solid var(--brand); border-radius: 50%; color: var(--brand-dark); background: #e6fffc; font-size: 0.78rem; font-weight: 900; cursor: pointer; list-style: none; }
.map-info summary::-webkit-details-marker { display: none; }
.map-info summary:focus-visible { outline: 3px solid rgba(27, 155, 145, 0.32); outline-offset: 2px; }
.map-info details p { position: absolute; z-index: 5; right: 0; bottom: 2rem; width: min(360px, calc(100vw - 3rem)); margin: 0; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 0.65rem; color: var(--muted); background: #fff; box-shadow: 0 10px 24px rgba(23, 53, 77, 0.16); font-size: 0.78rem; }
.map-info details[open] summary { color: #fff; background: var(--brand); }
.map-popup { display: grid; gap: 0.25rem; min-width: 190px; }
.map-popup-title { font-size: 0.92rem; }
.map-popup-kind { color: var(--brand-dark); font-size: 0.75rem; font-weight: 800; }
.map-popup-line { color: var(--muted); font-size: 0.78rem; }
.map-popup-links { display: flex; gap: 0.6rem; margin-top: 0.25rem; font-size: 0.76rem; font-weight: 700; }
.map-pathway-button { margin-top: 0.35rem; }

.button { padding: 0.65rem 1rem; cursor: pointer; font-weight: 800; }
.button-primary { border-color: #a4f0eb; color: var(--brand-dark); background: #e6fffc; }
.button-primary:hover { background: #fff; }
.status-badge, .event-status, .provider-tag { display: inline-flex; align-items: center; border-radius: 999px; font-size: 0.75rem; font-weight: 800; }
.status-badge { padding: 0.4rem 0.7rem; background: rgba(255,255,255,0.18); color: #fff; }
.status-badge.status-ok { background: #d8f6e8; color: var(--good); }
.status-badge.status-degraded { background: #fff0d7; color: var(--warn); }
.status-badge.status-error { background: #ffe0e3; color: var(--bad); }
.status-badge.status-loading { background: rgba(255,255,255,0.2); }

.section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1.1rem; }
.section-heading h2 { margin: 0.2rem 0 0; font-size: 1.35rem; letter-spacing: -0.02em; }
.text-link { font-size: 0.86rem; font-weight: 800; }
.events-list { display: grid; gap: 0.8rem; }
.event-card { padding: 1rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--surface-soft); }
.event-top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.event-top h3 { margin: 0.25rem 0 0; font-size: 1.05rem; }
.provider-tag { padding: 0.2rem 0.5rem; color: var(--brand-dark); background: #d9f4f2; }
.event-status { padding: 0.25rem 0.55rem; color: var(--good); background: #d8f6e8; white-space: nowrap; }
.bloom-status { color: var(--warn); background: #fff0d7; }
.event-water { margin: 0.75rem 0; color: var(--muted); }
.event-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin: 0; }
.event-meta div { min-width: 0; }
.event-meta dt { color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.event-meta dd { margin: 0.15rem 0 0; font-size: 0.86rem; overflow-wrap: anywhere; }
.event-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.85rem; font-size: 0.83rem; font-weight: 700; }
.empty-state { padding: 2rem 1rem; color: var(--muted); text-align: center; border: 1px dashed #b9c9d5; border-radius: 0.8rem; }
.nearby-group + .nearby-group { margin-top: 1.5rem; }
.nearby-group h3 { margin: 0 0 0.7rem; font-size: 1rem; }

.health-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.health-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 0.7rem; }
.health-name { font-weight: 750; }
.health-detail { color: var(--muted); font-size: 0.78rem; }
.health-state { font-size: 0.76rem; font-weight: 800; white-space: nowrap; }
.health-state.good { color: var(--good); }
.health-state.bad { color: var(--bad); }
.settings-endpoint { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.notice { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 0.7rem; }
.notice-error { color: #7b202d; background: #ffe0e3; border: 1px solid #f3aeb7; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem max(1.25rem, calc((100vw - 1180px) / 2)); color: var(--muted); font-size: 0.78rem; }
.site-footer code { overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#locationSummary:empty { display: none; }

@media (max-width: 760px) {
  .top-sponsor-bar { justify-content: center; }
  .top-sponsor-bar .sponsor-banner { text-align: center; }
  .site-header { display: block; padding-top: 2.5rem; }
  .header-actions { margin-top: 1.25rem; }
  .summary-grid, .location-controls, .controls-panel, .health-list { grid-template-columns: 1fr; }
  .history-controls { grid-template-columns: 1fr; }
  .map-record-list { grid-template-columns: 1fr; }
  .map-canvas { min-height: 420px; }
  .event-meta { grid-template-columns: 1fr 1fr; }
  .filter-summary { grid-column: auto; }
  .site-footer { display: block; }
  .site-footer code { display: block; margin-top: 0.35rem; }
  .settings-endpoint { display: block; }
  .settings-endpoint .text-link { display: block; margin-top: 0.35rem; }
}