/* =========================================================
   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; }
@media (max-width: 480px) {
  .dtr__popover { width: min(19rem, calc(100vw - 2rem)); }
}

/* ── 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;
  width: 100vw !important;
  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;
  align-items: center;
  gap: 1rem;
  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;
  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;
}

/* 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__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(220px, 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; }
.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;
}
.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__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: 90px;
  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 —
   the ~1100 cards stay in the DOM (client-side search needs them, and their
   links stay crawlable) but out of the way. */
.explore-results[data-collapsed] .explore-grid,
.explore-results[data-collapsed] .explore-empty { display: none; }

.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(280px, 1fr));
  gap: 1rem;
}

.explore-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.explore-card:hover {
  border-color: var(--teal);
  box-shadow: 0 3px 14px rgba(31,111,161,.08);
  transform: translateY(-1px);
}
.explore-card__main {
  display: block;
  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.25rem;
  line-height: 1.3;
}
.explore-card__meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.explore-card__org {
  font-size: 0.75rem;
  color: #7A8896;
}
.explore-card__cta {
  font-size: 0.78rem;
}

.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(260px, 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;
}

/* 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(260px, 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; }
}

/* ── 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;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 1rem;
}
.tracked-tabs__tab {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  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(220px, 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(220px, 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; }
}

/* ─── Archived history (hydration) card ─────────────────────────────────────── */
.archive-vault {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.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__actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  white-space: nowrap;
}
.hyd__years {
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: inherit;
  font-size: 0.8rem;
}

/* Single-gage backfill widget (gage detail → Data tab) */
.archive-vault--single {
  padding: 0.85rem 1rem;
}
.hyd-single__status {
  margin-bottom: 0.5rem;
}
/* Progress track/fill reuses .plan-meter/.plan-meter__fill (defined above) —
   same visual pattern, no need for a second meter style. */
.hyd-bar__label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

/* ─── 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(220px, 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;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.settings-segment__opt { cursor: pointer; }
.settings-segment__opt input { position: absolute; opacity: 0; pointer-events: none; }
.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; }
}