/* =========================================================
   GageLog — unified design system
   Sky-azure palette: light-blue primary, deep-azure accents,
   cool neutrals.
   ========================================================= */

:root {
  --bg:          #F5F9FC;
  --surface:     #FFFFFF;
  --border:      #D4DCE5;
  --text:        #1B2A38;
  --muted:       #5A6A78;
  --brand:       #3FA9D6;
  --brand-dark:  #1F6FA1;
  --teal:        #5EC3E8;
  --teal-dark:   #2E8FBF;
  --teal-wash:   #E8F4FB;
  --earth:       #8B7355;
  --flow-low:    #C47038;
  --success:     #4A7C59;
  --danger:      #8B3A3A;
  --danger-bg:   #FDF2F2;
  --success-bg:  #EEF5F0;
  --info-bg:     #E8F4FB;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { font-size: 15px; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); text-decoration: underline; }

h1, h2, h3, h4, h5 { font-weight: 600; color: var(--brand-dark); line-height: 1.25; }
h4 { font-size: 1.2rem; }

/* ── Nav ───────────────────────────────────────────────── */

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1.5rem;
  height: 52px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.2px;
  color: #fff;
  margin-right: auto;
  text-decoration: none;
  line-height: 1;
}

.site-nav__brand img {
  height: 36px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.site-nav__link {
  color: rgba(255,255,255,.85);
  font-size: 0.875rem;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  transition: background .15s;
}
.site-nav__link:hover { color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }
.site-nav__link--locked { cursor: pointer; background: transparent; border: none; font: inherit; color: rgba(255,255,255,.85); }

.site-nav__user {
  font-size: 0.8125rem;
  color: rgba(255,255,255,.75);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.site-nav__user:hover {
  color: #fff;
  background: rgba(255,255,255,.12);
  text-decoration: none;
}

.site-nav__logout {
  display: flex;
}
.site-nav__logout button {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.9);
  padding: 0.2rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8125rem;
  transition: background .15s, border-color .15s;
}
.site-nav__logout button:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.65);
}

@media (max-width: 640px) {
  .site-nav {
    flex-wrap: wrap;
    height: auto;
    padding: 0.6rem 1rem;
    gap: 0.6rem 1rem;
  }
  .site-nav__brand {
    flex: 1 0 100%;
    margin-right: 0;
  }
}

/* ── Layout ─────────────────────────────────────────────── */

.site-main {
  padding: 1.75rem 1.5rem;
  max-width: 1360px;
  margin: 0 auto;
}

/* Onboarding / form pages — centered card */
.rw-card {
  max-width: 600px;
  margin: 2.5rem auto;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(31,111,161,.08);
  padding: 2.25rem 2.5rem;
}

.rw-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 0.25rem;
  letter-spacing: -.2px;
}
.rw-logo img { height: 44px; width: auto; }

/* Step indicator */
.rw-step {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 0.2rem;
  flex-shrink: 0;
}
.step-dot.active   { background: var(--teal);    color: #fff; }
.step-dot.done     { background: var(--success);  color: #fff; }
.step-dot.upcoming { background: var(--border);   color: var(--muted); }

.rw-step__sep { color: var(--border); margin: 0 0.15rem; }

/* ── Buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 1.1rem;
  border-radius: 5px;
  border: 1.5px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}

.btn--primary {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.btn--primary:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
  text-decoration: none;
}

.btn--secondary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn--secondary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  text-decoration: none;
}

.btn--outline {
  background: transparent;
  color: var(--brand);
  border-color: var(--border);
}
.btn--outline:hover {
  background: var(--bg);
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}
.btn--ghost:hover { color: var(--text); background: var(--bg); text-decoration: none; }

/* Google's branding guidelines are a condition of using the "G" mark: white
   background, #dadce0 border, Roboto-ish weight, mark at 18px to the left of
   the label. Do not restyle this into the site palette. */
.btn--google {
  background: #fff;
  color: #3c4043;
  border-color: #dadce0;
  gap: 0.6rem;
}
.btn--google:hover {
  background: #f8f9fa;
  border-color: #d2d5d9;
  color: #3c4043;
  text-decoration: none;
}

/* Leading glyph inside a button (see gauges/_icon_download.html). Fixed size so
   it doesn't stretch with the flex row, and never the shrink target. */
.btn__icon { width: 14px; height: 14px; flex: 0 0 auto; }

.btn--sm { padding: 0.3rem 0.8rem; font-size: 0.8125rem; }
.btn--full { width: 100%; }
.btn--primary:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* ── Forms ────────────────────────────────────────────────── */

.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-dark);
  margin-bottom: 0.3rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(94,195,232,.15);
}
.field input.error { border-color: var(--danger); }
.field-error {
  font-size: 0.8rem;
  color: var(--danger);
  margin-top: 0.25rem;
}
.field-help {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* ── Alerts ───────────────────────────────────────────────── */

.alert {
  padding: 0.7rem 1rem;
  border-radius: 5px;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  border-left: 3px solid;
}
.alert--error   { background: var(--danger-bg); color: var(--danger);  border-color: var(--danger);  }
.alert--info    { background: var(--info-bg);   color: var(--teal-dark); border-color: var(--teal); }
.alert--success { background: #EFF7F1; color: var(--success); border-color: var(--success); }

/* ── Badges ───────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge--free    { background: #EFF7F1; color: var(--success); }
.badge--plan    { background: var(--teal-wash); color: var(--teal-dark); }
.badge--current { background: var(--brand); color: #fff; }

/* ── Plan cards ───────────────────────────────────────────── */

.plan-cards { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }

.plan-card {
  display: block;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 1rem 1.15rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  user-select: none;
}
.plan-card:hover { border-color: var(--teal); background: var(--teal-wash); }
.plan-card.selected {
  border-color: var(--teal);
  background: var(--teal-wash);
  box-shadow: 0 0 0 2px rgba(94,195,232,.25);
}
.plan-card.current-plan { border-color: var(--brand); }

.plan-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.plan-card__name { font-weight: 600; font-size: 0.9375rem; color: var(--brand-dark); }
.plan-card__meta { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.plan-card__price { text-align: right; font-weight: 600; font-size: 0.9375rem; flex-shrink: 0; }
.plan-card__interval { font-size: 0.75rem; color: var(--muted); font-weight: 400; }

.plan-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.plan-feature {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--text);
}
.plan-feature__icon { flex-shrink: 0; }
.plan-feature--locked { color: var(--muted); }
.plan-feature--locked .plan-feature__icon { color: var(--muted); }

/* ── Sensor cards ─────────────────────────────────────────── */

.sensor-cards { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; }

.sensor-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  user-select: none;
}
.sensor-card:hover { border-color: var(--teal); background: var(--teal-wash); }
.sensor-card.selected {
  border-color: var(--teal);
  background: var(--teal-wash);
  box-shadow: 0 0 0 2px rgba(94,195,232,.2);
}
.sensor-card__name  { font-weight: 600; font-size: 0.875rem; }
.sensor-card__meta  { font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; }
.sensor-card__actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
.sensor-card__check { display: none; }

/* ── Login card ───────────────────────────────────────────── */

.login-card {
  max-width: 360px;
  margin: 5rem auto;
  background: var(--surface);
  border-radius: 10px;
  padding: 2.25rem;
  box-shadow: 0 2px 16px rgba(31,111,161,.1);
}
.login-card__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}
.login-card__logo img { height: 88px; width: auto; }
.login-card__brand {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: -.3px;
}
.login-card h1 { font-size: 1.2rem; margin-bottom: 1.25rem; }

/* Release 1 only — separates the Google button from the legacy password form.
   Delete along with that form in Release 2. */
.login-card__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  color: var(--muted);
  font-size: 0.75rem;
}
.login-card__divider::before,
.login-card__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Controls (gage page) ─────────────────────────────────── */

.controls {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.controls__field { display: flex; flex-direction: column; gap: 0.25rem; }
.controls__field span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.controls__field input,
.controls__field select {
  padding: 0.4rem 0.65rem;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--text);
}
.controls__field input:focus,
.controls__field select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(94,195,232,.15);
}

/* ── Date-time range picker (.dtr) ────────────────────────── */

.dtr { position: relative; }
.dtr__fields { display: flex; align-items: stretch; gap: 0.5rem; }
.dtr__arrow { align-self: center; color: var(--muted); font-size: 0.9rem; }
.dtr__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.35rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  text-align: left;
  min-width: 9.5rem;
}
.dtr__field:hover { border-color: var(--teal); }
.dtr__field--editing,
.dtr__field:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(94,195,232,.15);
}
.dtr__field-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.dtr__field-date { font-size: 0.875rem; color: var(--text); font-weight: 600; }
.dtr__field-time { font-size: 0.78rem; color: var(--brand-dark); }
.dtr__caption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.dtr__tz-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.dtr__tz-btn {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border: none;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.dtr__tz-btn--on { background: var(--brand-dark); color: #fff; }
.dtr__popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  width: 19rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(27,42,56,.12);
}
.dtr__endpoints { display: flex; gap: 0.4rem; margin-bottom: 0.25rem; }
.dtr__endpoint {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  padding: 0.3rem 0.5rem;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.dtr__endpoint-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .8;
}
.dtr__endpoint-value {
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dtr__endpoint--active {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
}
.dtr__endpoint--pulse { animation: dtr-pulse 0.5s ease-out; }
@keyframes dtr-pulse {
  0% { box-shadow: 0 0 0 0 rgba(94,195,232,.7); }
  100% { box-shadow: 0 0 0 8px rgba(94,195,232,0); }
}
.dtr__hint {
  min-height: 1rem;
  margin-bottom: 0.45rem;
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
}
.dtr__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}
.dtr__cal-selects { display: inline-flex; gap: 0.3rem; }
.dtr__cal-month,
.dtr__cal-year {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-dark);
  padding: 0.15rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
}
.dtr__cal-month:hover,
.dtr__cal-year:hover { border-color: var(--border); background: var(--bg); }
.dtr__cal-month:focus,
.dtr__cal-year:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(94,195,232,.15);
}
.dtr__nav {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.dtr__nav:hover { background: var(--bg); color: var(--brand); }
.dtr__weekdays,
.dtr__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dtr__weekdays span {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding-bottom: 0.2rem;
}
.dtr__day {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 0.8rem;
  padding: 0.28rem 0;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
}
.dtr__day--pad { cursor: default; }
.dtr__day:not(.dtr__day--pad):hover { background: var(--bg); border-color: var(--border); }
.dtr__day--in { background: var(--teal-wash); border-radius: 0; }
.dtr__day--start,
.dtr__day--end {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.dtr__day--start:not(.dtr__day--pad):hover,
.dtr__day--end:not(.dtr__day--pad):hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.dtr__time-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.dtr__time-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-right: 0.2rem;
}
.dtr__time-h,
.dtr__time-m {
  width: 3.1rem;
  padding: 0.3rem 0.4rem;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--text);
  text-align: center;
}
.dtr__time-h:focus,
.dtr__time-m:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(94,195,232,.15);
}
.dtr__time-colon { color: var(--muted); font-weight: 700; }
.dtr__ampm {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-left: 0.2rem;
}
.dtr__ampm-btn {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.5rem;
  border: none;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.dtr__ampm-btn--on { background: var(--brand-dark); color: #fff; }
.dtr__time-chips { display: flex; gap: 0.35rem; margin-top: 0.5rem; }
.dtr__chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.dtr__chip:hover { background: var(--teal-wash); color: var(--brand-dark); border-color: var(--teal); }
.dtr__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.dtr__foot-tz { font-size: 0.68rem; color: var(--muted); }
.dtr__foot-btns { display: flex; gap: 0.4rem; }
.dtr__apply:disabled { opacity: .5; cursor: not-allowed; }
/* The narrow-viewport .dtr__popover clamp now lives in the ≤640px mobile
   block at the bottom of this file (it supersedes the old 480px-only rule). */

/* ── Sensor tabs ──────────────────────────────────────────── */

.sensor-tabs {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
}

.sensor-tab {
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--muted);
  border-radius: 4px 4px 0 0;
  transition: color .15s, background .15s;
}
.sensor-tab:hover { background: var(--bg); color: var(--brand); }
.sensor-tab.active {
  border-bottom-color: var(--teal);
  color: var(--teal-dark);
  font-weight: 600;
  background: var(--surface);
}
.sensor-tab-item {
  display: flex;
  align-items: center;
  margin-bottom: -2px;
}
.sensor-tab-untrack {
  padding: 0.15rem 0.3rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--muted);
  opacity: 0;
  border-radius: 3px;
  transition: opacity .15s, color .15s;
}
.sensor-tab-item:hover .sensor-tab-untrack { opacity: 1; }
.sensor-tab-untrack:hover { color: #DC2626; background: var(--bg); }
.sensor-tab-untrack:focus-visible { opacity: 1; outline: 2px solid var(--brand); outline-offset: 1px; }
@media (pointer: coarse) { .sensor-tab-untrack { opacity: 1; } }

/* ── View tabs ────────────────────────────────────────────── */

.view-tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(27,42,56,.05);
}

.view-tab {
  padding: 0.3rem 0.85rem;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  border-radius: 6px;
  color: var(--muted);
  transition: background .15s, color .15s;
}
.view-tab:hover { background: var(--bg); color: var(--text); }
.view-tab.active {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
}

/* Locked tab (anonymous gage pages): styled like a tab, links to sign-up. */
a.view-tab--locked { text-decoration: none; display: inline-block; }
a.view-tab--locked:hover { text-decoration: none; }

/* ── Gauge table ──────────────────────────────────────────── */

.table-meta {
  padding: 0.55rem 1rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-bottom: none;
  font-size: 0.8rem;
  color: var(--muted);
}

.table-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  align-items: flex-start;
}
.table-header__meta { flex: 1; min-width: 0; }
.table-header__label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--brand-dark);
  margin-bottom: 0.4rem;
}
.table-header__dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.5rem;
  align-items: baseline;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}
.table-header__dl dt { font-weight: 600; color: var(--text); white-space: nowrap; }
.table-header__dl dd { margin: 0 0 0 0.35rem; white-space: nowrap; }
@media (max-width: 600px) {
  .table-header { flex-direction: column; }
}

/* Quality Code column header info-popover */
.qc-th { position: relative; }
.qc-legend { display: inline-block; }
.qc-legend > summary {
  list-style: none;
  cursor: pointer;
  margin-left: 0.3rem;
  color: var(--muted);
  font-weight: 400;
}
.qc-legend > summary::-webkit-details-marker { display: none; }
.qc-legend > summary:hover { color: var(--brand-dark); }
.qc-legend__body {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  margin-top: 0.25rem;
  min-width: 220px;
  max-width: 320px;
  padding: 0.5rem 0.6rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  font-weight: 400;
  white-space: normal;
}
.qc-legend__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}
.qc-legend__row + .qc-legend__row { margin-top: 0.25rem; }
.qc-legend__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  color: var(--text);
}
.qc-legend__row--flagged .qc-legend__code::before {
  content: "\25CF";
  color: var(--danger, #c0392b);
  margin-right: 0.3rem;
  font-size: 0.7em;
  vertical-align: middle;
}

/* ── Location tab ──────────────────────────────────────────────────────────── */
.location-meta { margin-bottom: 1.25rem; }
.location-nearby { margin-bottom: 1rem; }
.location-nearby__heading { font-size: .9rem; font-weight: 600; color: var(--text); margin: 0 0 .5rem; }
.nearby-list { list-style: none; margin: 0; padding: 0; }
.nearby-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}
.nearby-list__item:last-child { border-bottom: none; }
.nearby-list__meta { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.location-map {
  width: 100%;
  height: clamp(400px, 55vh, 640px);
  border-radius: 10px;
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 3px rgba(27,42,56,.05);
}
.location-map--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  height: 100vh !important;
  height: 100dvh !important; /* mobile browser chrome */
  width: 100% !important;    /* 100vw overhangs the scrollbar gutter */
  border-radius: 0;
  border: none;
}
.location-map__fs-btn { margin-top: .5rem; }
/* Keep the toggle reachable while the fixed map covers the viewport. */
.location-map--fullscreen + .location-map__fs-btn {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 10000;
  margin-top: 0;
  background: var(--surface, #fff);
}

.live-frame {
  margin-top: 1rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.live-frame__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}
.live-frame__embed {
  display: block;
  width: 100%;
  height: clamp(420px, 62vh, 760px);
  border: none;
}
.live-frame__note {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--surface);
  border-top: 1px solid var(--border);
  margin: 0;
}

.table-wrap {
  overflow-x: auto;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(27,42,56,.05);
}

.gage-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 0.875rem;
}
.gage-table th {
  padding: 0.55rem 1rem;
  text-align: left;
  background: var(--bg);
  font-weight: 600;
  color: var(--brand-dark);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  user-select: none;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.gage-table th.sortable { cursor: pointer; }
.gage-table th.sortable:hover { background: #E2EAF1; }
.gage-table th.sort-asc  .sort-indicator::after { content: " ↑"; color: var(--teal); }
.gage-table th.sort-desc .sort-indicator::after { content: " ↓"; color: var(--teal); }
.gage-table td {
  padding: 0.45rem 1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gage-table tbody tr:hover td { background: var(--teal-wash); }
.gage-table tbody tr:last-child td { border-bottom: none; }
.gage-table .flagged-yes { color: var(--danger);  font-weight: 600; }
.gage-table .flagged-no  { color: var(--success); }

.table-loading { text-align: center; padding: 2.5rem; color: var(--muted); font-style: italic; }
.table-empty   { text-align: center; padding: 2.5rem; color: var(--muted); }

/* ── Pagination ───────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-top: none;
  font-size: 0.8125rem;
  color: var(--muted);
}
.pagination button {
  padding: 0.28rem 0.7rem;
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text);
  transition: background .15s, border-color .15s;
}
.pagination button:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--teal);
  color: var(--teal-dark);
}
.pagination button:disabled { opacity: .4; cursor: default; }

/* ── Analytics view ───────────────────────────────────────── */

.analytics-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  row-gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-top: none;
}
/* Standalone toolbar (not part of the merged metrics panel) */
.analytics-toolbar--standalone {
  border-top: 1.5px solid var(--border);
  border-radius: 10px;
}

.rolling-ctrl {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.rolling-ctrl span:first-child {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.rolling-ctrl input {
  width: 52px;
  padding: 0.2rem 0.4rem;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  font-size: 0.8125rem;
  text-align: center;
  background: var(--surface);
  color: var(--text);
}
.rolling-ctrl input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(94,195,232,.15);
}

/* Stats cards */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1.5px solid var(--border);
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
  .stats-cards { grid-template-columns: repeat(3, 1fr); }
}

.stat-card {
  padding: 0.7rem 1rem;
  min-width: 0; /* let 1fr tracks shrink below big tabular-nums values */
  background: var(--surface);
  border-right: 1.5px solid var(--border);
  border-bottom: 1.5px solid var(--border);
}
.stat-card:last-child { border-right: none; }

.stat-card__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.stat-card__value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-dark);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-card--danger .stat-card__label { color: var(--danger); }
.stat-card--danger .stat-card__value { color: var(--danger); }

/* Loading + empty */
.analytics-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 2.5rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-top: none;
}

.analytics-loading__spinner {
  width: 1.9rem;
  height: 1.9rem;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: analytics-spin 0.8s linear infinite;
}

.analytics-loading__note {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--teal-dark);
  max-width: 26rem;
}

/* Escalated state: the request is blocking on an upstream backfill because the
   gauge had no recent readings. Signals to the user that the wait is expected. */
.analytics-loading--backfill {
  background: var(--teal-wash);
  border-color: var(--teal);
}

.analytics-loading--backfill .analytics-loading__spinner {
  border-top-color: var(--teal-dark);
  animation-duration: 0.6s;
}

.analytics-loading--backfill .analytics-loading__note {
  animation: analytics-pulse 1.4s ease-in-out infinite;
}

@keyframes analytics-spin {
  to { transform: rotate(360deg); }
}

@keyframes analytics-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .analytics-loading__spinner { animation: none; }
  .analytics-loading--backfill .analytics-loading__note { animation: none; }
}

.analytics-empty {
  padding: 2.5rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

/* Stream-flow loader — reusable, built by static/ts/flow_loading.ts.
   Three drifting current lines rather than a spinning border. Kept next to
   .analytics-loading so the two loading patterns stay visible to each other;
   .analytics-loading call sites can migrate here later. */
.flow-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 2.5rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

/* .flow-loading sets display:flex, which would otherwise beat the UA's
   [hidden] { display: none }. */
.flow-loading[hidden] { display: none; }

.flow-loading__wave {
  width: 4rem;
  height: 1.5rem;
  overflow: visible;
}

.flow-loading__line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  /* Dashes are what actually move — the path itself is static, so the
     animation is a single compositable property per line. */
  stroke-dasharray: 10 6;
  animation: flow-drift 1.2s linear infinite;
}

.flow-loading__line--1 {
  stroke: var(--brand);
  stroke-dashoffset: 0;
}

/* Middle line runs faster: real current shears, and the offset phases keep the
   three lines from ever aligning into a single readable bar. */
.flow-loading__line--2 {
  stroke: var(--teal);
  stroke-dashoffset: -6;
  animation-duration: 0.95s;
}

.flow-loading__line--3 {
  stroke: var(--border);
  stroke-dashoffset: -11;
  animation-duration: 1.45s;
}

.flow-loading__text {
  font-size: 0.95rem;
}

.flow-loading__note {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--teal-dark);
  max-width: 26rem;
}

@keyframes flow-drift {
  to { stroke-dashoffset: -16; }
}

@media (prefers-reduced-motion: reduce) {
  /* Static waves still read as water — no need for a different shape. */
  .flow-loading__line { animation: none; }
}

/* Chart layout */
#analytics-charts {
  border: 1.5px solid var(--border);
  border-top: none;
  background: var(--surface);
}

.chart-wrap {
  padding: 0.9rem 1rem 0.75rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(27,42,56,.05);
  margin-top: 1rem;
}
/* Dedicated Chart.js sizing container: fixed height, positioned, and holding
   ONLY the canvas — Chart.js resizes to this box, so siblings added to the
   surrounding .chart-wrap (inline data tables, explains) can no longer distort
   the render buffer. Never put non-canvas content inside. */
.chart-canvas-box { position: relative; height: clamp(260px, 34vh, 420px); }
.chart-canvas-box--tall { height: clamp(340px, 46vh, 560px); }

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.chart-row .chart-wrap { margin-top: 0; }

@media (max-width: 640px) {
  .chart-row { grid-template-columns: 1fr; }
}

.chart-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

/* Reading detail dialog — tracked-gages page only (gauge_data.ts). The gage
   detail page migrated to the off-canvas panel below; this stays until that
   page's dialog gets the same treatment in a follow-up. */
dialog#reading-dialog {
  border: none;
  padding: 0;
  border-radius: 9px;
  box-shadow: 0 8px 40px rgba(27,42,56,.22);
  max-width: 420px;
  width: calc(100% - 2rem);
}
dialog#reading-dialog::backdrop { background: rgba(27,42,56,.45); }

/* Reading detail off-canvas panel */
.offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--surface);
  border-left: 1.5px solid var(--border);
  box-shadow: -6px 0 24px rgba(27,42,56,.18);
  z-index: 300;
  transform: translateX(100%);
  transition: transform .25s ease, visibility 0s .25s;
  visibility: hidden;
  display: flex;
  flex-direction: column;
}
.offcanvas--open {
  transform: translateX(0);
  transition: transform .25s ease;
  visibility: visible;
}
.offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
}
.offcanvas__header h5 { font-size: 1rem; color: var(--brand-dark); }
.offcanvas__body {
  padding: 1.25rem;
  overflow-y: auto;
}
.offcanvas__section-heading {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin: 1.1rem 0 .35rem;
}
.offcanvas__body > .offcanvas__section-heading:first-child { margin-top: 0; }
.offcanvas__explain {
  font-size: .85rem;
  color: var(--text);
  line-height: 1.55;
}
.offcanvas__explain p { margin: .6rem 0 0; }
@media (max-width: 640px) {
  .offcanvas { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  .offcanvas, .offcanvas--open { transition: none; }
}

.reading-dl { width: 100%; }
.reading-dl__row {
  display: flex;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  align-items: baseline;
}
.reading-dl__row--last { border-bottom: none; }
.reading-dl__divider {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--border);
}
.reading-dl__row dt {
  width: 80px;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.reading-dl__row dd { color: var(--text); }

/* ── Gage page wrapper ────────────────────────────────────── */

.gage-page { display: flex; flex-direction: column; }

/* ── Period quick-picks + custom-dates disclosure ─────────── */

.period-picks {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.period-pick {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 0.4rem 0.85rem;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.period-pick:hover { background: var(--bg); color: var(--text); }
.period-pick.active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}
/* Ghosted, account-only ranges shown to anon visitors as an upsell hint. */
a.period-pick--locked {
  opacity: 0.5;
  border-style: dashed;
  text-decoration: none;
}
a.period-pick--locked:hover {
  opacity: 0.75;
  background: var(--surface);
  color: var(--muted);
}

/* Shared keyboard focus ring for interactive chips/buttons */
.btn:focus-visible,
.view-tab:focus-visible,
.period-pick:focus-visible,
.sensor-tab:focus-visible,
.chart-action-btn:focus-visible,
.pagination button:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
}

.controls__custom {
  margin-top: 0.6rem;
  font-size: 0.85rem;
}
.controls__custom > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0.25rem 0;
  user-select: none;
}
.controls__custom > summary:hover { color: var(--text); }
.controls__custom-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* One-time discovery hint (interval control, export button) — interval_hint.ts */
.hint-pulse {
  animation: hint-glow 1.5s ease-in-out 3;
  border-radius: 5px;
}
@keyframes hint-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94,195,232,0); }
  50%      { box-shadow: 0 0 0 5px rgba(94,195,232,.35); }
}
@media (prefers-reduced-motion: reduce) {
  .hint-pulse { animation: none; }
}

/* ── Hero card (latest reading) ───────────────────────────── */

.hero-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-bottom: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 0.85rem 1.1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
}
.hero-card__head { flex: 1 1 100%; }
.hero-card__status { margin-left: auto; }
.hero-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.hero-card__head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.hero-card__head-row > * { min-width: 0; }
.hero-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.hero-card__updated { font-size: 0.72rem; color: var(--muted); }
.hero-card__range {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  margin-top: 0;
}
.hero-card__head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}
.hero-card__source-link {
  font-size: 0.7rem;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.8;
}
.hero-card__source-link:hover { color: var(--text); text-decoration: underline; opacity: 1; }
.hero-card__body {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.hero-card__primary { display: flex; align-items: baseline; gap: 0.5rem; }
.hero-card__value {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--brand-dark);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-card__unit { font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.hero-card__delta {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-left: 0.4rem;
}
.hero-card__delta--up   { color: var(--teal-dark);  background: var(--teal-wash); }
.hero-card__delta--down { color: var(--earth);      background: #FAF4EB; }
.hero-card__delta--flat { color: var(--muted);      background: var(--bg); }

.hero-card__stage {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding-left: 1rem;
  border-left: 1.5px solid var(--border);
}
.hero-card__stage-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 700;
}
.hero-card__stage-value { font-size: 1.15rem; font-weight: 700; color: var(--teal-dark); font-variant-numeric: tabular-nums; }
.hero-card__stage-unit  { font-size: 0.78rem; color: var(--muted); }

.hero-card__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text);
}
.hero-card__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--muted);
  display: inline-block;
}
.hero-card__dot--low    { background: var(--earth); }
.hero-card__dot--normal { background: var(--success); }
.hero-card__dot--high   { background: var(--teal-dark); }

/* ── Insight cards strip ──────────────────────────────────── */

.insight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 0.5rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-top: none;
  padding: 0.6rem;
}
.insight-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  /* Reset browser defaults so <button> variants match <div> visually */
  font-family: inherit;
  font-weight: 400;
  text-align: left;
  line-height: 1.45;
  appearance: none;
  width: 100%;
}
.insight-card:hover { background: var(--teal-wash); border-color: var(--teal); }
.insight-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.insight-card[data-no-target] { cursor: default; }
.insight-card[data-no-target]:hover { background: var(--bg); border-color: var(--border); }
.insight-card__strong { color: var(--brand-dark); font-weight: 700; }
.insight-card--warn { border-color: var(--danger); background: var(--danger-bg); }
.insight-card__icon {
  width: 8px;
  height: 14px;
  margin-left: auto;
  opacity: 0.35;
  flex-shrink: 0;
}

/* ── Per-chart explainers ─────────────────────────────────── */

.chart-explain {
  font-size: 0.74rem;
  color: var(--muted);
  max-width: 70%;
}
.chart-explain > summary {
  cursor: pointer;
  color: var(--teal-dark);
  font-weight: 600;
  list-style: none;
  user-select: none;
}
.chart-explain > summary::-webkit-details-marker { display: none; }
/* KaTeX display math inside explains/off-canvas: scroll instead of overflowing */
.chart-explain .katex-display,
.offcanvas__explain .katex-display { overflow-x: auto; overflow-y: hidden; padding: .2rem 0; }
/* Inline \( .. \) math is nowrap too (.katex .base) — contain it in the box */
.chart-explain[open],
.offcanvas__explain { overflow-x: auto; }
.chart-explain > summary::before {
  content: "ⓘ ";
  font-style: normal;
}
.chart-explain[open] > summary { color: var(--text); }
.chart-explain[open] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  margin-top: 0.25rem;
  line-height: 1.45;
}

.chart-empty {
  padding: 1.25rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  margin-top: 1rem;
}

.chart-no-data {
  padding: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1.5px solid rgba(139,58,58,.35);
  border-radius: 8px;
  margin-top: 1rem;
}

/* Recovery action inside an empty state (e.g. Today's "View last 24 hours"),
   sitting under the message rather than inline with it. */
.chart-no-data__action {
  display: inline-block;
  margin-top: .75rem;
}

/* ── Empty state ──────────────────────────────────────────── */

.empty-state {
  padding: 3rem;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  font-size: 0.9375rem;
}

/* ── Modal (vanilla lightbox) ─────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27,42,56,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
}
.modal-overlay[aria-hidden="true"] { display: none; }

.modal-box {
  background: var(--surface);
  border-radius: 9px;
  box-shadow: 0 8px 40px rgba(27,42,56,.2);
  width: 100%;
  max-width: 700px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
}
.modal-header h5 {
  font-size: 1rem;
  color: var(--brand-dark);
}

/* Upsell-modal header variant: icon chip + eyebrow, top accent bar */
.modal-box--accent { position: relative; }
.modal-box--accent::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--brand));
}
.modal-header__title-group { display: flex; align-items: center; gap: 0.7rem; }
.modal-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--teal-wash);
  color: var(--teal-dark);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.modal-header__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--teal-dark);
  margin-bottom: 0.1rem;
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}
.modal-close:hover { background: var(--bg); color: var(--text); }

.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
}

/* Export modal (gage analytics) */
.export-modal__group {
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 0.7rem 0.9rem 0.8rem;
  margin: 0 0 0.9rem;
}
.export-modal__group legend {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-dark);
  padding: 0 0.35rem;
}
.export-modal__group label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  margin: 0.15rem 1rem 0.15rem 0;
  cursor: pointer;
}
.export-modal__group:disabled label { opacity: 0.4; cursor: default; }
.export-modal__subopts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.15rem 0 0.4rem 1.55rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--border);
  font-size: 0.85rem;
}
.export-modal__subopts input[type="number"] { width: 3.6rem; }
.export-modal__hint {
  font-weight: 400;
  text-transform: none;
  color: var(--muted);
  font-size: 0.75rem;
}
.export-modal__error {
  color: var(--danger);
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}
/* Locked format option (free plans): visibly present but muted — clicking it
   opens the export upsell modal rather than selecting the format. */
.export-modal__locked {
  opacity: 0.55;
  cursor: pointer;
}
.export-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.modal-table th {
  padding: 0.4rem 0.75rem;
  text-align: left;
  background: var(--bg);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand-dark);
  border-bottom: 2px solid var(--border);
}
.modal-table td {
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.modal-table tr:last-child td { border-bottom: none; }
.modal-table tr:hover td { background: #F6F9FB; }
.modal-spinner {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-style: italic;
}
.modal-error {
  padding: 0.7rem 1rem;
  background: var(--danger-bg);
  color: var(--danger);
  border-left: 3px solid var(--danger);
  border-radius: 4px;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

/* ── Upsell modals (export / tracked-gages) ───────────────── */

.upsell-modal__body p { font-size: 0.9rem; color: var(--text); line-height: 1.6; margin-bottom: 1.1rem; }
.upsell-modal__cta { display: inline-block; margin-bottom: 1.25rem; padding: 0.55rem 1.3rem; }
.upsell-modal__docs-link { font-size: 0.8rem; color: var(--muted); margin: -0.6rem 0 1rem; }
.upsell-modal__source {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.8rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.upsell-modal__source-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--teal-dark);
  font-weight: 600;
  font-size: 0.8125rem;
}

/* ── Locked-feature affordances ───────────────────────────── */
/* Shared lock cue for any control gated behind a paid plan — the button/link
   keeps its normal look so it still reads as clickable, and this crisp lock
   glyph pulls the eye toward it. One SVG mask, tinted to the element's own
   text color (currentColor) so it stays visible on every surface. Covers the
   locked tabs, period-picks, buttons, and nav links. */

.btn--locked, .site-nav__link--locked {
  position: relative;
}
a.view-tab--locked::after,
a.period-pick--locked::after,
.btn--locked::after,
.site-nav__link--locked::after {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.35rem;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M12%201a5%205%200%200%200-5%205v3H6a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-9a2%202%200%200%200-2-2h-1V6a5%205%200%200%200-5-5zM9%209V6a3%203%200%201%201%206%200v3H9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M12%201a5%205%200%200%200-5%205v3H6a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-9a2%202%200%200%200-2-2h-1V6a5%205%200%200%200-5-5zM9%209V6a3%203%200%201%201%206%200v3H9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Sensor explorer (sensor_index) ───────────────────────── */

.explore-heading {
  font-size: 1.2rem;
  color: var(--text);
  margin: 0 0 0.85rem;
}

.explore-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.explore-summary__line {
  font-size: 0.9rem;
  color: var(--text);
}
.explore-summary__line strong { color: var(--brand-dark); }
.explore-summary__swap {
  color: var(--muted);
  margin-left: 0.35rem;
}
.explore-summary__swap strong { color: var(--teal-dark); }

.explore-card--selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal-wash) inset;
  background: linear-gradient(180deg, var(--teal-wash) 0%, var(--surface) 22%);
}
.explore-card__pill {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--teal-wash);
  color: var(--teal-dark);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: middle;
}
.explore-card__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}
.explore-card__btn { font-size: 0.78rem; }

.card-map {
  margin: 0.75rem 0 0;
  border-radius: 5px;
  overflow: hidden;
  height: 72px;
  border: 1px solid var(--border);
  background: #EEF3F6;
}

/* Swap dialog */
.swap-dialog {
  border: none;
  border-radius: 10px;
  padding: 0;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 12px 48px rgba(27,42,56,.28);
}
.swap-dialog::backdrop { background: rgba(27,42,56,.45); }
.swap-dialog form { margin: 0; }
.swap-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1.5px solid var(--border);
}
.swap-dialog__head h3 { font-size: 1rem; color: var(--brand-dark); }
.swap-dialog__close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}
.swap-dialog__close:hover { background: var(--bg); color: var(--text); }
.swap-dialog__body { padding: 1rem 1.25rem; }
.swap-dialog__lede {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.85rem;
  line-height: 1.45;
}
.swap-dialog__lede strong { color: var(--text); }
.swap-dialog__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 260px;
  overflow-y: auto;
}
.swap-dialog__list li { margin: 0; }
.swap-dialog__list label {
  display: block;
  padding: 0.55rem 0.75rem 0.55rem 2.1rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  font-size: 0.875rem;
  transition: border-color .15s, background .15s;
}
.swap-dialog__list label:hover { border-color: var(--teal); background: var(--teal-wash); }
.swap-dialog__list label strong { display: block; color: var(--brand-dark); }
.swap-dialog__list label span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.1rem;
}
.swap-dialog__list input[type="radio"] {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  accent-color: var(--teal);
}
/* The markup is `<input>` followed by `<label>`, so the sibling selector
   covers all browsers. The `:has()` rule below is a progressive enhancement
   for callers that wrap `<input>` inside `<label>`; it's split into its own
   rule so unsupporting browsers don't drop the sibling rule along with it. */
.swap-dialog__list input[type="radio"]:checked + label {
  border-color: var(--teal);
  background: var(--teal-wash);
  box-shadow: 0 0 0 2px rgba(94,195,232,.18);
}
.swap-dialog__list label:has(input:checked) {
  border-color: var(--teal);
  background: var(--teal-wash);
  box-shadow: 0 0 0 2px rgba(94,195,232,.18);
}
.swap-dialog__error {
  margin-top: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: var(--danger-bg);
  color: var(--danger);
  border-left: 3px solid var(--danger);
  border-radius: 4px;
  font-size: 0.85rem;
}
.swap-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1.5px solid var(--border);
  background: var(--bg);
}

/* US choropleth map (Explore hero, in-page state filter) */
.explore-hero { margin-bottom: 1.25rem; }
.explore-hero__lede {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.us-map {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}
.us-map svg { width: 100%; height: auto; display: block; }
/* Base = muted + inert. Coverage is applied at runtime (us_map.ts): states
   with registry gauges get `--covered` (fill from the per-state <style> block
   the partial injects) and re-enable pointer events; the rest keep this. */
.us-state { fill: #E4E7EB; stroke: #9CA3AF; stroke-width: 1; pointer-events: none; }
.us-state--covered {
  cursor: pointer;
  pointer-events: auto;
  transition: filter .12s, stroke .12s;
}
.us-state--covered:hover,
.us-state--covered:focus-visible {
  filter: brightness(1.07);
  stroke: var(--brand-dark);
  stroke-width: 1.6;
  outline: none;
}
.us-state--selected {
  stroke: var(--brand-dark);
  stroke-width: 2;
}
.us-map-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.us-map-legend__bar {
  width: 140px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(90deg, var(--flow-low), #EEF0EE 50%, var(--brand-dark));
}
.us-map-legend__note { margin-left: auto; }
.us-map-tooltip {
  position: fixed;
  z-index: 50;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(27, 42, 56, .12);
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  color: var(--text);
  pointer-events: none;
}
.us-map-tooltip strong { color: var(--brand-dark); display: block; margin-bottom: 0.15rem; }

/* Selected-state readout under the map. Also the scroll target after a state
   is picked (see nudgeToScope in explore_gages.ts) — hence scroll-margin. */
.explore-scope {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  scroll-margin-top: 1rem;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  background: var(--teal-wash);
  border: 1.5px solid #CCE5EB;
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text);
}
.explore-scope__text { flex: 1 1 auto; min-width: 0; }

/* Starting points offered while nothing is selected. No chrome of its own —
   an empty one (no map artifact) must not leave a hole above the controls. */
.explore-nearby { margin-bottom: 1rem; }
.explore-nearby__label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.explore-nearby__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.explore-explainers {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.chart-explain--wide { max-width: none; }

/* Until a state, search, or basin narrows things down, the map is the offer and
   no gages have been loaded at all — the grid is empty, so this only suppresses
   the surrounding chrome. */
.explore-results[data-collapsed] .explore-grid,
.explore-results[data-collapsed] #explore-notice,
.explore-results[data-collapsed] .explore-empty { display: none; }

.explore-prompt {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

.explore-truncated {
  margin: 1rem 0 0;
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--teal);
  background: var(--teal-wash);
  color: var(--text);
  font-size: 0.88rem;
}

.explore-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--danger);
}

/* Crawlable entry points to the prerendered per-state pages. These carry the
   discovery weight the full card dump used to. */
.explore-states {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1.5px solid var(--border);
}
.explore-states__label {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.explore-states__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.explore-states__list a {
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
}
.explore-states__list a:hover { text-decoration: underline; }
.explore-states__count {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.explore-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.explore-controls__input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 0.55rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
}
.explore-controls__input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(94,195,232,.15);
}
.explore-controls__count {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}
.explore-controls__sort {
  flex: 0 0 auto;
  padding: 0.55rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
}
.explore-controls__sort:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(94,195,232,.15);
}
.explore-controls__sort-note {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

.explore-basins {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.basin-pill {
  padding: 0.3rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.basin-pill:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}
.basin-pill--active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}
.basin-pill--active:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.basin-pill--more {
  border-style: dashed;
  color: var(--muted);
  background: transparent;
}
.basin-pill--more:hover {
  border-color: var(--muted);
  color: var(--text);
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
}

.explore-card {
  /* Two columns: text/ticker left, mini state map right. The map used to sit
     below the ticker, stacking every card ~90px taller than it needed to be;
     the auto column collapses to nothing when a card has no map. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.75rem;
  position: relative; /* containing block for the stretched-link overlay */
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
/* Stretched link: the whole card clicks through to the detail page. The
   pseudo-element still generates a box under display:contents, and the
   actions row re-raises its buttons above the overlay. */
.explore-card__main::after {
  content: "";
  position: absolute;
  inset: 0;
}
.explore-card:hover {
  border-color: var(--teal);
  box-shadow: 0 3px 14px rgba(31,111,161,.08);
  transform: translateY(-1px);
}
.explore-card__main {
  /* The link's children become grid items of the card itself, so the text
     block shares its rows with the map while the spark spans the full card. */
  display: contents;
  text-decoration: none;
  color: inherit;
}
.explore-card__main:hover { text-decoration: none; color: inherit; }
.explore-card__label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-dark);
  margin-bottom: 0.15rem;
  line-height: 1.3;
}
.explore-card__meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.explore-card__org {
  font-size: 0.75rem;
  color: #7A8896;
}
.explore-card__cta {
  font-size: 0.78rem;
}

/* Ticker row + sparkline on explore cards — same shell as the home tiles.
   Text rows share the grid with the map; spark/live/actions span the card. */
.explore-card__label,
.explore-card__meta,
.explore-card__org { grid-column: 1; }
.explore-card .card-map {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
  width: 96px;
  height: 60px;
}
.explore-card__spark {
  display: block;
  width: 100%;
  height: 30px;
  margin: 0.3rem 0 0.25rem;
  grid-column: 1 / -1;
}
.explore-card__live { grid-column: 1 / -1; }
.explore-card__actions {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
}
.explore-card__live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.explore-card__live[hidden] { display: none; }

/* Cards/List layout toggle */
.explore-view-toggle {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  flex: none;
}
.explore-view-toggle button {
  border: none;
  background: transparent;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
}
.explore-view-toggle button + button { border-left: 1px solid var(--border); }
.explore-view-toggle button[aria-pressed="true"] {
  background: var(--teal);
  color: #fff;
}

/* List mode — same DOM, container class reflows each card into a row */
.explore-grid--list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.explore-grid--list .explore-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
}
.explore-grid--list .card-map { display: none; }
.explore-grid--list .explore-card__main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.explore-grid--list .explore-card__label {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.explore-grid--list .explore-card__meta { margin-bottom: 0; white-space: nowrap; }
.explore-grid--list .explore-card__org { display: none; }
.explore-grid--list .explore-card__spark {
  width: 120px;
  height: 28px;
  flex: none;
  margin: 0;
}
.explore-grid--list .explore-card__live { margin-left: auto; white-space: nowrap; }
.explore-grid--list .explore-card__actions { margin-top: 0; flex-wrap: nowrap; }
@media (max-width: 640px) {
  .explore-grid--list .explore-card__meta,
  .explore-grid--list .explore-card__spark { display: none; }
}

.explore-empty {
  padding: 2.5rem;
  text-align: center;
  color: var(--muted);
}

/* ── Home dashboard ───────────────────────────────────────── */

/* Hero */
.home-hero {
  position: relative;
  margin: -1.75rem -1.5rem 2rem;
  padding: 3.5rem 1.5rem 3rem;
  background:
    radial-gradient(ellipse at 12% 20%, rgba(94,195,232,.22), transparent 55%),
    radial-gradient(ellipse at 95% 90%, rgba(63,169,214,.35), transparent 55%),
    linear-gradient(135deg, var(--brand-dark) 0%, #2F88BC 60%, var(--brand) 100%);
  color: #fff;
  overflow: hidden;
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.25), transparent);
}
.home-hero__inner {
  max-width: 880px;
  margin: 0 auto;
}
.home-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 0.85rem;
}
.home-hero__title {
  color: #fff;
  font-size: clamp(1.85rem, 3.5vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: -.5px;
  margin-bottom: 0.6rem;
}
.home-hero__lede {
  color: rgba(255,255,255,.82);
  font-size: 1.05rem;
  margin-bottom: 1.6rem;
  max-width: 560px;
}
.home-hero__search {
  display: flex;
  gap: 0.5rem;
  background: rgba(255,255,255,.08);
  padding: 0.4rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  max-width: 640px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.home-hero__search-input {
  flex: 1;
  border: none;
  background: rgba(255,255,255,.95);
  color: var(--text);
  padding: 0.75rem 1rem;
  border-radius: 7px;
  font-size: 0.95rem;
  font-family: inherit;
}
.home-hero__search-input:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(94,195,232,.45);
}
.home-hero__search-btn { padding: 0.75rem 1.5rem; font-size: 0.9rem; }
.home-hero__meta {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.home-hero__link { color: #fff; font-weight: 600; }
.home-hero__link:hover { color: #fff; text-decoration: underline; }
.home-hero__dot { opacity: .5; }

/* Section frame */
.home-section { margin-bottom: 2.5rem; }
.home-section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.home-section__title {
  font-size: 1.1rem;
  letter-spacing: -.2px;
  color: var(--brand-dark);
}
.home-section__sub {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* Plan utilization meter */
.plan-meter {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 0 1rem;
  max-width: 320px;
}
.plan-meter__fill {
  height: 100%;
  background: linear-gradient(to right, var(--teal), var(--brand));
  border-radius: 3px;
  transition: width .3s ease;
}

/* My-sensor grid (overrides the legacy .sensor-card flex layout for this page) */
.home-sensor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 0.85rem;
}
.home-sensor-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 1rem 1.1rem;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.home-sensor-tile__main-link {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.home-sensor-tile__chip {
  text-decoration: none;
}
.home-sensor-tile:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 18px rgba(31,111,161,.08);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}
.home-sensor-tile__label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-dark);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}
.home-sensor-tile__meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.home-sensor-tile__org {
  font-size: 0.75rem;
  color: #7A8896;
  margin-bottom: 0.85rem;
}
.home-sensor-tile__cta {
  margin-top: auto;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.home-sensor-tile__chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  letter-spacing: .02em;
  /* Reset browser defaults so the <button> variant matches the <a> one */
  font-family: inherit;
  border: 1px solid var(--border);
  appearance: none;
  cursor: pointer;
}
button.home-sensor-tile__chip:hover { border-color: var(--teal); color: var(--text); }
.home-sensor-tile__chip--accent {
  background: var(--teal-wash);
  color: var(--teal-dark);
  text-decoration: none;
}
.home-upsell-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  padding: 0.65rem 1rem;
  background: var(--teal-wash, #e8f4fb);
  border-left: 3px solid var(--teal, #1f6fa1);
  border-radius: 6px;
  font-size: 0.85rem;
}

/* Detail-page "download direct from the source" callout. Public-data
   transparency notice, prominent near the top of every gage page. Shares the
   strip layout with .home-upsell-strip but keeps its own accent + spacing. */
.gage-source-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.7rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--teal, #1f6fa1);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}
.gage-source-strip span { flex: 1 1 260px; min-width: 0; }
.gage-source-strip .btn { flex: 0 0 auto; white-space: nowrap; }


/* "Gages near you" tiles. The base .insight-cards is welded under a chart
   frame (border-top: none); standing alone it needs its own top edge. */
.insight-cards--standalone {
  border-top: 1.5px solid var(--border);
  border-radius: 9px;
  margin-bottom: 1rem;
}
.home-stat { margin-left: auto; text-align: right; white-space: nowrap; }
.home-stat-note {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
/* The status dot home.ts prepends sits inside a plain block, unlike the
   flex+gap .hero-card__status on the analytics page — space it here so the
   base .hero-card__dot stays margin-free for that consumer. */
.home-stat-note .hero-card__dot {
  margin-right: 0.35rem;
  vertical-align: -1px;
}

/* "Your water" — state glyph panel */
.home-glyph {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  background: linear-gradient(180deg, var(--surface) 30%, var(--teal-wash));
  border: 1.5px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1rem;
}
.home-glyph__map-wrap {
  background: #EEF3F6;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.home-glyph__map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 130;
}
.home-glyph__dot { fill: #9AA7B4; opacity: .55; }
.home-glyph__dot--tracked {
  fill: var(--teal-dark);
  opacity: 1;
  stroke: #fff;
  stroke-width: 0.8;
}
.home-glyph__ring {
  fill: none;
  stroke: var(--teal-dark);
  stroke-width: 1.2;
  opacity: .9;
}
.home-glyph__viewer {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.4;
  stroke-dasharray: 2.5 1.6;
}
.home-glyph__legend {
  display: flex;
  gap: 0.9rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.7rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.home-glyph__legend span { display: inline-flex; align-items: center; }
.home-glyph__swatch {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.3rem;
  background: #9AA7B4;
  opacity: .7;
}
.home-glyph__swatch--tracked { background: var(--teal-dark); opacity: 1; }
.home-glyph__swatch--ring {
  background: transparent;
  border: 1.5px solid var(--teal-dark);
  opacity: 1;
}
.home-glyph__swatch--you {
  background: transparent;
  border: 1.5px dashed var(--brand);
  opacity: 1;
}
.home-glyph__rail {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}
.home-glyph__state {
  font-size: 1.35rem;
  letter-spacing: -.3px;
  color: var(--brand-dark);
}
.home-glyph__coverage { font-size: 0.9rem; color: var(--muted); }
.home-glyph__mean {
  display: block;
  font-size: 0.8rem;
  margin-top: 0.2rem;
}
.home-glyph__nearest {
  display: block;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  /* Reset browser defaults so the <button> variant matches the <a> one */
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
  width: 100%;
}
.home-glyph__nearest:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 18px rgba(31,111,161,.08);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}
.home-glyph__nearest:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.home-glyph__nearest-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--brand-dark);
}
.home-glyph__nearest .hero-card__dot {
  margin-right: 0.35rem;
  vertical-align: -1px;
}
.home-glyph__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

/* "Your monitors" summary card */
.home-monitors {
  display: block;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.home-monitors:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 18px rgba(31,111,161,.08);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}
.home-monitors__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
}
.home-monitors__count { font-weight: 600; color: var(--brand-dark); }
.home-monitors__sep { opacity: .5; }
.home-monitors__badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
}
.home-monitor-events { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.home-monitor-event {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.55rem;
  margin-top: 0.55rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.home-monitor-event__name { font-weight: 600; }
.home-monitor-event__meta { color: var(--muted); }

/* Live flow row + sparkline on the tracked tiles */
.home-sensor-tile__spark {
  display: block;
  width: 100%;
  height: 34px;
  margin-bottom: 0.5rem;
}
.home-sensor-tile__live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.home-sensor-tile__live[hidden] { display: none; }

/* Contextual plan promo. Deliberately quieter than the standalone upsell
   strip — it sits under the slot meter as a consequence of that number. */
.home-upsell-strip--quiet {
  background: var(--bg);
  border-left-color: var(--teal);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* "Where to go next" — one tile per destination */
.home-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 0.75rem;
}
.home-index-tile {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  /* Reset browser defaults so the locked <button> variants match the <a>s */
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
  width: 100%;
}
.home-index-tile:hover {
  border-color: var(--teal);
  box-shadow: 0 3px 14px rgba(31,111,161,.08);
  transform: translateY(-1px);
  text-decoration: none;
}
.home-index-tile:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.home-index-tile--wide { grid-column: span 2; }
.home-index-tile__label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-dark);
}
.home-index-tile__desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}
.home-index-tile--locked .home-index-tile__label::after {
  content: " 🔒";
  font-size: 0.75rem;
}
.home-index-tile--locked { background: var(--bg); }

/* Quiet utility row at the bottom of home */
.home-footer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--muted);
}
.home-footer-row__link {
  color: var(--muted);
  text-decoration: none;
}
.home-footer-row__link:hover { color: var(--brand-dark); text-decoration: underline; }
.home-footer-row__sep { opacity: .5; }

@media (max-width: 640px) {
  .home-hero { padding: 2.5rem 1.25rem 2.25rem; }
  .home-hero__search { flex-direction: column; padding: 0.5rem; }
  .home-hero__search-btn { width: 100%; }
  .home-index-tile--wide { grid-column: span 1; }
  .home-glyph { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; }
}

/* ── Utility ──────────────────────────────────────────────── */

.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.mt-1 { margin-top: 0.35rem; }
.mt-2 { margin-top: 0.75rem; }
.mt-3 { margin-top: 1.25rem; }
.mb-1 { margin-bottom: 0.35rem; }
.mb-2 { margin-bottom: 0.75rem; }
.mb-3 { margin-bottom: 1.25rem; }

/* ── Site-level flash messages ───────────────────────────── */

.site-messages { padding: 0.5rem 2rem 0; }
.site-message {
  padding: 0.65rem 1rem;
  border-radius: 5px;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  border-left: 3px solid;
}
.site-message--warning { background: #FFFBEB; color: #92400E; border-color: #F59E0B; }
.site-message--error   { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.site-message--success { background: #EFF7F1; color: var(--success); border-color: var(--success); }
.site-message--info    { background: var(--info-bg); color: var(--teal-dark); border-color: var(--teal); }

/* ── Site footer (authenticated pages) ───────────────────── */

.site-footer {
  padding: 1rem 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--brand-dark); }
.site-footer__sep { margin: 0 0.4rem; }

/* ── Registration checkbox ────────────────────────────────── */

.field--check { margin-top: 0.5rem; }
/* `.field label` / `.field input` are more specific than a lone `.check-label`,
   so these are scoped under `.field` too — otherwise the box goes display:block
   at width:100% and the label text wraps underneath it. */
.check-label,
.field .check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  line-height: 1.5;
  margin-bottom: 0;
}
.check-label input[type="checkbox"],
.field .check-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.15rem 0 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  accent-color: var(--brand);
}
.check-label a { color: var(--teal-dark); }

/* ── Tracked Gages tab strip ─────────────────────────────────────────────── */
.tracked-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  /* Six tabs are ~590px intrinsic; on narrow viewports the strip scrolls
     rather than pushing the page wide. Never engages at desktop widths.
     The divider is an inset shadow (not border-bottom) so the active tab's
     underline can sit on it without the old -1.5px margin overlap, which
     would spawn a vertical scrollbar inside the scroll container. */
  box-shadow: inset 0 -1.5px 0 var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tracked-tabs__tab {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.tracked-tabs__tab:hover {
  color: var(--text);
}
.tracked-tabs__tab--active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* ── Anomalies toolbar bits ───────────────────────────────────────────────── */
.anom-summary {
  color: var(--muted);
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

/* ── Multi-state map on the Overview tab ─────────────────────────────────── */
.tracked-map {
  margin: 1.25rem 0;
}
.tracked-map__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}
.tracked-map__title {
  font-size: 1rem;
  margin: 0;
  color: var(--text);
}
.tracked-map__hint {
  color: var(--muted);
  font-size: 0.8rem;
}
.tracked-map__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 0.85rem;
}
.tracked-map__state {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.7rem 0.4rem;
}
.tracked-map__state-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
}
.tracked-map__count {
  color: var(--muted);
  font-size: 0.75rem;
}
.tracked-map__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Cross-gage compare section on Overview ──────────────────────────────── */
.cross-compare {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.cross-compare__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cross-compare__title {
  font-size: 1rem;
  margin: 0;
  color: var(--text);
}
.cross-compare__pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.cross-compare__pick {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.cross-compare__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}

/* ── Reporting tab: report card grid ─────────────────────────────────────── */
.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
.report-grid .report-card {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.report-card .cross-compare__head { align-items: center; }
.report-card__title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.report-card__desc {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.file-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.file-badge svg { width: 13px; height: 13px; }
.file-badge--xlsx { color: var(--success); background: var(--success-bg); }
.file-badge--pdf  { color: var(--danger);  background: var(--danger-bg); }
.export-modal__subhead {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0.5rem 0 0.15rem;
}
@media (max-width: 760px) {
  .report-grid { grid-template-columns: 1fr; }
}

/* ─── Archive & restore (Archive tab + gage detail Archive view) ────────────── */
.hyd__blurb {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.hyd__pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.hyd__pill--cold   { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.hyd__pill--busy   { background: var(--info-bg); color: var(--teal-dark); border: 1px solid var(--teal); }
.hyd__pill--warm   { background: var(--teal-wash); color: var(--brand-dark); border: 1px solid var(--teal); }
.hyd__pill--failed { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.hyd__pill--info   { background: var(--info-bg); color: var(--muted); border: 1px solid var(--border); }

.arch-quota {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.arch-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.arch-card {
  padding: 1rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.arch-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.arch-card__label {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
a.arch-card__label:hover { text-decoration: underline; }
.arch-card__meta {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Warm/cold water-year bar: one flex cell per water year. A long USGS record
   archived back to the 1890s is 130+ cells at a 4px floor, so the bar (not
   the page) takes the horizontal scroll. */
.arch-bar {
  display: flex;
  gap: 2px;
  height: 18px;
  max-width: 100%;
  overflow-x: auto;
}
.arch-bar__yr {
  flex: 1 1 0;
  min-width: 4px;
  border-radius: 2px;
}
.arch-bar__yr--hot  { background: var(--teal); }
.arch-bar__yr--warm { background: var(--teal-wash); border: 1px solid var(--teal); }
.arch-bar__yr--cold { background: var(--bg); border: 1px solid var(--border); }
.arch-bar__yr--gap  { background: transparent; border: 1px dashed var(--border); opacity: 0.5; }
.arch-bar__yr--busy {
  background: var(--info-bg);
  border: 1px solid var(--teal);
  animation: arch-pulse 1.2s ease-in-out infinite;
}
@keyframes arch-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.arch-bar__scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0.2rem 0 0.6rem;
}

/* Staged restore progress. Track/fill reuses .plan-meter/.plan-meter__fill
   (defined above) — same visual pattern, no need for a second meter style. */
.arch-stage {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.arch-stage .plan-meter { flex: 1 1 140px; }
.arch-stage__note {
  font-size: 0.78rem;
  color: var(--muted);
}
.arch-card__badges { margin-bottom: 0.5rem; }
.arch-card__badges:empty { display: none; }

/* Restore slider — the codebase's only input[type=range]; style both engines
   explicitly so the two themes match. */
.arch-card__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.arch-slider {
  flex: 1 1 160px;
  max-width: 280px;
  accent-color: var(--teal);
  height: 1.1rem;
}
.arch-slider::-webkit-slider-thumb { cursor: pointer; }
.arch-slider::-moz-range-thumb { cursor: pointer; }
.arch-slider:disabled { opacity: 0.5; }
.arch-slider__label {
  font-size: 0.8rem;
  color: var(--text);
  min-width: 200px;
}

/* ─── Async export queue (Exports tab + modal status lines) ─────────────────── */
/* Modal status line rendered after an export is queued (export_jobs.ts). */
.export-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-size: 0.85rem;
}
.export-status__line { color: var(--text); }
.export-status__line--done { color: var(--teal-dark); font-weight: 600; }
.export-status__line--failed { color: var(--danger); }
.export-status__queue-link { font-size: 0.8rem; white-space: nowrap; }

/* Job cards on the Exports tab (exports_queue.ts). */
.export-queue {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.export-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.75rem 1rem;
}
.export-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.export-card__title {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.export-card__summary {
  font-size: 0.85rem;
  color: var(--text);
  margin-top: 0.15rem;
}
.export-card__meta {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.export-card__actions { white-space: nowrap; }
/* Progress track/fill reuses .plan-meter/.plan-meter__fill (defined above). */
.export-card__phase {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.35rem;
}
.export-card__error {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--danger);
}
/* Pills echo the hydration pill palette. */
.export-card__pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}
.export-card__pill--busy   { background: var(--info-bg); color: var(--teal-dark); border-color: var(--teal); }
.export-card__pill--done   { background: var(--teal-wash); color: var(--brand-dark); border-color: var(--teal); }
.export-card__pill--failed { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* ─── Chart head layout (title + actions + explain) ─────────────────────────── */
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.chart-head__info { flex: 1; min-width: 0; }
.chart-head__ctrl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ─── Per-chart action buttons ───────────────────────────────────────────────── */
.chart-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
  align-items: center;
}
.chart-action-btn {
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chart-action-btn:hover {
  background: var(--teal-wash);
  color: var(--teal-dark);
  border-color: var(--teal);
}
.chart-action-btn--table { color: var(--muted); }

/* ─── Inline chart data table ─────────────────────────────────────────────────── */
.chart-inline-table {
  margin-top: 0.75rem;
  border-top: 1.5px solid var(--border);
  overflow-x: auto;
  max-height: 260px;
  overflow-y: auto;
}
.gage-table--compact td,
.gage-table--compact th {
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
}

/* ─── Data availability banner ───────────────────────────────────────────────── */
.data-availability-banner {
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}

.source-link-btn {
  font-size: 0.78rem;
}

/* Provider-mandated source disclaimer (e.g. Colorado DWR) — small muted
   footnote at the bottom of the gage detail page, present under every tab. */
.gage-disclaimer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
}
.gage-disclaimer__text { margin: 0; }
.gage-disclaimer__link {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.85;
}
.gage-disclaimer__link:hover { color: var(--text); text-decoration: underline; opacity: 1; }

/* ─── Monitors (alerting) ────────────────────────────────────────────────────── */
.monitors-empty {
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: 9px;
  max-width: 560px;
  margin: 1.5rem auto;
}
.monitors-empty h3 { color: var(--text); margin-bottom: 0.5rem; font-size: 1rem; }
.monitors-empty p { font-size: 0.875rem; line-height: 1.6; }

.monitor-group { margin-bottom: 1.5rem; }
.monitor-group__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}
.monitor-group__key { font-size: 0.72rem; color: var(--muted); font-weight: 400; }

.monitor-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem;
}
.monitor-card__main { flex: 1 1 280px; min-width: 0; }
.monitor-card__title-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.monitor-card__name { font-size: 0.9rem; color: var(--text); }
.monitor-card__cond { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }
.monitor-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.45rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.monitor-card__chan {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monitor-card__pill {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
}
.monitor-card__pill--on { background: #E4F2E4; color: #2F6B2F; }
.monitor-card__pill--off { background: #F4E9DC; color: #8B6A3A; }
.monitor-card__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.monitor-card__delete:hover { border-color: #DC2626; color: #DC2626; }
.monitor-card__events {
  flex-basis: 100%;
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--text);
}
.monitor-card__event { padding: 0.15rem 0; }

/* Wizard modal */
.monitor-wizard { max-width: 640px; }
.mw-step { margin-bottom: 1.4rem; }
.mw-step__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
}
.mw-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.mw-gage-field { margin-bottom: 0.8rem; }
.mw-trigger-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.mw-trigger-card {
  display: block;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}
.mw-trigger-card strong { display: block; color: var(--text); font-size: 0.85rem; margin: 0.15rem 0 0.2rem; }
.mw-trigger-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--bg);
}
.mw-trigger-card input { accent-color: var(--brand); }
.mw-fields { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.mw-hint { font-size: 0.78rem; color: var(--muted); margin: 0.35rem 0 0.6rem; line-height: 1.5; }
.mw-advanced summary { font-size: 0.8rem; color: var(--muted); cursor: pointer; margin-bottom: 0.4rem; }
.mw-guide { font-size: 0.8rem; margin: 0.2rem 0 0.6rem; }
.mw-preview__caption { font-size: 0.85rem; color: var(--text); margin-bottom: 0.4rem; }
.mw-preview__canvas-box { position: relative; height: 200px; }
.mw-channel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--text);
}
.mw-channel input[type="email"], .mw-channel input[type="tel"] { flex: 1 1 180px; min-width: 0; }
.mw-channel input[type="checkbox"] { accent-color: var(--brand); }
.mw-name-field { margin-top: 0.6rem; }
.mw-error {
  background: #FBEAEA;
  color: #9B2C2C;
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  font-size: 0.8rem;
  margin-bottom: 0.8rem;
}
.mw-footer { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* ── Settings page ────────────────────────────────────────── */

.settings {
  display: flex;
  gap: 2rem;
  max-width: 960px;
  margin: 0 auto;
  align-items: flex-start;
}

.settings__rail {
  flex: 0 0 170px;
  position: sticky;
  top: 1.25rem;
}

.settings__nav { display: flex; flex-direction: column; gap: 0.15rem; }

.settings__nav-link {
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--muted);
  border-left: 2px solid transparent;
  transition: background .15s, color .15s;
}
.settings__nav-link:hover { color: var(--text); background: var(--teal-wash); text-decoration: none; }
.settings__nav-link.is-active {
  color: var(--brand-dark);
  font-weight: 600;
  background: var(--teal-wash);
  border-left-color: var(--brand);
  border-radius: 0 6px 6px 0;
}

.settings__content { flex: 1 1 auto; min-width: 0; }
.settings__title { margin-bottom: 1.25rem; }

.settings-section { margin-bottom: 2.25rem; scroll-margin-top: 1rem; }
.settings-section__head { margin-bottom: 0.75rem; }
.settings-section__head h5 { font-size: 1.05rem; }
.settings-section__sub { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }

.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
}

.settings-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

.settings-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
  margin-top: 0.25rem;
}

.settings-save-note {
  font-size: 0.85rem;
  color: var(--success);
  opacity: 0;
  transition: opacity .25s;
}
.settings-save-note.is-visible { opacity: 1; }
.settings-save-note.is-error { color: var(--danger); }

/* Plan card */
.settings-plan {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
}
.settings-plan__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.settings-plan__meta { font-size: 0.85rem; color: var(--muted); margin-top: 0.2rem; }
.settings-plan__actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.settings-danger-link { color: var(--danger); }
.settings-danger-link:hover { color: var(--danger); background: var(--danger-bg); }

.badge--warn { background: #FBF3E4; color: #8A6D1D; }

.btn--danger {
  background: var(--danger);
  border: 1.5px solid var(--danger);
  color: #fff;
}
.btn--danger:hover { background: #6E2E2E; border-color: #6E2E2E; color: #fff; text-decoration: none; }

/* Segmented control */
.settings-segment {
  display: inline-flex;
  position: relative; /* contain the visually-hidden absolute radios */
  border: 1.5px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  max-width: 100%;
  overflow-x: auto;
}
.settings-segment__opt { cursor: pointer; }
/* 1×1 so the global input width doesn't overflow the segment's box */
.settings-segment__opt input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.settings-segment__opt span {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  font-size: 0.875rem;
  color: var(--muted);
  background: var(--surface);
  transition: background .15s, color .15s;
}
.settings-segment__opt:not(:last-child) span { border-right: 1.5px solid var(--border); }
.settings-segment__opt input:checked + span {
  background: var(--teal-wash);
  color: var(--brand-dark);
  font-weight: 600;
}
.settings-segment__opt input:focus-visible + span {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(94,195,232,.35);
}

/* Notifications toggle row */
.settings-toggle {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  cursor: pointer;
  margin-bottom: 0.9rem;
}
.settings-toggle input[type="checkbox"] {
  accent-color: var(--brand);
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
  flex: none;
}
.settings-toggle__text { font-size: 0.9rem; }
.settings-note { margin-bottom: 0.9rem; }

.settings-cancel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}

@media (max-width: 700px) {
  .settings { flex-direction: column; gap: 1rem; }
  .settings__rail { position: static; flex: none; width: 100%; }
  .settings__nav { flex-direction: row; flex-wrap: wrap; gap: 0.3rem; }
  .settings__nav-link,
  .settings__nav-link.is-active { border-left: none; border-radius: 999px; padding: 0.3rem 0.8rem; }
  .settings-card__grid { grid-template-columns: 1fr; gap: 0; }
  .settings-plan { flex-direction: column; align-items: flex-start; }
}

/* ── Mobile overrides (≤640px / ≤480px) — additive only ──────────────────
   New mobile work standardizes on the 640px tier (the dominant existing
   breakpoint) with a 480px tight tier. Desktop rules above are untouched. */

@media (max-width: 640px) {
  .site-main { padding: 1.25rem 1rem; }
  /* .home-hero is full-bleed via negative margins that cancel .site-main's
     padding — they have to track it or the hero overhangs the viewport. */
  .home-hero { margin: -1.25rem -1rem 2rem; }

  /* Date-range picker: two 9.5rem fields + arrow don't fit a phone row */
  .dtr__fields { flex-wrap: wrap; }
  .dtr__field { flex: 1 1 8.5rem; min-width: 0; }
  .dtr__popover { width: min(19rem, calc(100vw - 2rem)); }

  .hero-card__head-row { flex-wrap: wrap; }
  .hero-card__head-right { align-items: flex-start; }

  .stat-card { padding: 0.55rem 0.7rem; }
  .stat-card__value { font-size: clamp(1rem, 4.5vw, 1.4rem); }

  /* Anomalies toolbar live summary drops to its own row */
  .anom-summary { flex-basis: 100%; margin-left: 0; }

  /* 70% of a ~330px content box breaks inline math */
  .chart-explain { max-width: 100%; }

  .table-header__dl dd { white-space: normal; }
  .nearby-list__item { flex-wrap: wrap; }
  .nearby-list__meta { white-space: normal; }
  .live-frame__header { flex-wrap: wrap; gap: 0.3rem; }
  .pagination { flex-wrap: wrap; row-gap: 0.4rem; }
  .home-upsell-strip { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .site-main { padding: 1rem 0.75rem; }
  .home-hero { margin: -1rem -0.75rem 2rem; }
  .dtr__field { flex-basis: 100%; } /* start/end stack vertically */
}

/* chartjs-plugin-zoom sets inline touch-action:none on canvases, which
   swallows one-finger vertical swipes — the page can't be scrolled past a
   chart on touch devices. pan-y hands vertical swipes back to the browser;
   horizontal drag still pans the chart and pinch still zooms. */
@media (pointer: coarse) {
  .chart-canvas-box canvas,
  .mw-preview__canvas-box canvas { touch-action: pan-y !important; }
}