:root {
  --bg:        #0f1116;
  --panel:     #161922;
  --border:    #232733;
  --text:      #e6e8ec;
  --muted:     #8a8f99;
  --accent:    #4ea8de;
  --green:     #28a745;
  --amber:     #f0ad4e;
  --red:       #dc3545;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
    "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.brand {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.env { color: var(--muted); font-size: 12px; }

main {
  margin: 0 auto;
  padding: 24px;
}

footer {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

.crumbs { margin-bottom: 12px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

h1 { font-size: 24px; margin: 0 0 4px; }
h1 .muted { font-size: 14px; font-weight: 400; }
h2 { font-size: 18px; margin-top: 32px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
h2 .muted { font-size: 13px; font-weight: 400; }

.muted { color: var(--muted); }
code { background: var(--panel); padding: 2px 6px; border-radius: 4px; font-size: 12px; }

/* tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

th { color: var(--muted); font-weight: 500; }

tr:hover { background: rgba(78, 168, 222, 0.05); }

.lake-table a { color: var(--accent); text-decoration: none; }
.lake-table a:hover { text-decoration: underline; }

.age-green { color: var(--green); }
.age-amber { color: var(--amber); }
.age-red   { color: var(--red); }

/* hero metrics */
.metrics {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 12px;
  margin: 16px 0 8px;
}

.metric {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}

.metric .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.metric .value { font-size: 22px; font-weight: 600; margin-top: 4px; }
.metric .value .unit { font-size: 13px; color: var(--muted); font-weight: 400; }
.metric .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }

.metric-hero { background: linear-gradient(135deg, #161922, #1c2233); }
.metric-hero .value { font-size: 30px; color: var(--accent); }

.metric-empty { color: var(--muted); align-self: center; }

/* controls */
.controls {
  margin: 8px 0;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.controls select { background: var(--panel); color: var(--text); border: 1px solid var(--border); padding: 4px 8px; }
.controls .legend-key { color: var(--muted); font-size: 12px; }
.controls .season-fill,
.controls .season-drain {
  display: inline-block;
  width: 14px; height: 10px;
  vertical-align: middle;
  margin-right: 4px;
  border-radius: 2px;
}
.controls .season-fill  { background: rgba(78, 168, 222, 0.40); }
.controls .season-drain { background: rgba(240, 173, 78, 0.40); }

/* Time-range button group on the linked water-level + flow charts */
.range-btns { display: inline-flex; gap: 0; }
.range-btns button {
  padding: 4px 12px; cursor: pointer; font: inherit; font-size: 12px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-right-width: 0;
}
.range-btns button:first-child { border-radius: 3px 0 0 3px; }
.range-btns button:last-child  { border-radius: 0 3px 3px 0; border-right-width: 1px; }
.range-btns button:hover { background: #243049; }
.range-btns button.is-active {
  background: var(--accent); color: #0d1017; border-color: var(--accent);
}
.linked-flow-head { margin: 4px 0 0; }
.linked-flow-head .muted { font-size: 13px; font-weight: normal; }

/* Dedicated website-request → onboarding operations screen. */
.obq-heading {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 18px;
}
.obq-heading p { margin: 4px 0 0; }
.obq-refresh { color: var(--muted); font-size: 13px; padding-top: 7px; white-space: nowrap; }
.obq-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; background: var(--green); box-shadow: 0 0 0 4px rgba(40,167,69,.12);
}
.obq-alert {
  border: 1px solid var(--red); background: rgba(220,53,69,.10);
  color: #ff9ca6; border-radius: 7px; padding: 10px 12px; margin: 12px 0;
}
.obq-summary {
  display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.obq-stat {
  display: flex; flex-direction: column; gap: 1px; background: var(--panel);
  border: 1px solid var(--border); border-left: 4px solid var(--muted);
  border-radius: 7px; padding: 11px 14px;
}
.obq-stat--capacity { border-left-color: var(--accent); }
.obq-stat--running { border-left-color: var(--green); }
.obq-stat--queued { border-left-color: var(--amber); }
.obq-stat--failed { border-left-color: var(--red); }
.obq-stat-value { font-size: 24px; font-weight: 700; line-height: 1.1; }
.obq-stat-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.obq-now {
  margin: 0 0 18px; padding: 16px; background: #111722;
  border: 1px solid #29364c; border-radius: 10px;
}
.obq-now-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 12px;
}
.obq-now-head h2 { border: 0; margin: 2px 0 0; padding: 0; font-size: 18px; }
.obq-now-legend { display: flex; flex-wrap: wrap; gap: 13px; color: var(--muted); font-size: 11px; }
.obq-now-legend span { display: inline-flex; align-items: center; gap: 5px; }
.obq-key { width: 8px; height: 8px; border-radius: 50%; background: #515a6b; }
.obq-key--done { background: var(--green); }
.obq-key--working { background: var(--accent); box-shadow: 0 0 0 3px rgba(78,168,222,.12); }
.obq-key--waiting { border: 1px solid #667086; background: transparent; }
.obq-live-work { display: grid; gap: 10px; }
.obq-now-idle {
  display: flex; flex-direction: column; gap: 3px; padding: 18px;
  border: 1px dashed var(--border); border-radius: 7px; text-align: center;
}
.obq-lane { padding: 14px; border: 1px solid #314462; border-radius: 8px; background: #151d2a; }
.obq-lane-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.obq-lane-head h3 { margin: 5px 0 0; font-size: 17px; }
.obq-lane-head h3 small { color: var(--muted); font-size: 11px; font-weight: 400; }
.obq-lane-badge {
  color: #a8ccef; background: rgba(78,168,222,.11); border: 1px solid rgba(78,168,222,.25);
  border-radius: 999px; padding: 3px 8px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em;
}
.obq-running-pulse { color: #81dc97; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.obq-running-pulse i {
  display: inline-block; width: 7px; height: 7px; margin-right: 5px;
  border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(40,167,69,.12);
}
.obq-lane-flow {
  display: grid; grid-template-columns: minmax(100px,.55fr) 20px minmax(280px,1.7fr) 20px minmax(100px,.55fr);
  align-items: stretch; gap: 8px; margin: 14px 0 10px;
}
.obq-lane-arrow { align-self: center; color: #59657a; text-align: center; }
.obq-lane-node {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-width: 0; padding: 10px 12px; border-radius: 7px; border: 1px solid var(--border);
}
.obq-lane-node > span { color: var(--muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.obq-lane-node > strong { font-size: 15px; overflow-wrap: anywhere; }
.obq-lane-node > small { color: var(--muted); font-size: 10px; }
.obq-lane-node--done { border-color: rgba(40,167,69,.35); background: rgba(40,167,69,.06); }
.obq-lane-node--done > strong { color: #81dc97; font-size: 22px; }
.obq-lane-node--working { border-color: rgba(78,168,222,.48); background: rgba(78,168,222,.08); }
.obq-lane-node--working > strong { color: #b7dcff; }
.obq-lane-node--waiting > strong { color: #c0c5cf; font-size: 22px; }
.obq-worker-mode {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 7px 12px;
  padding: 8px 10px; border-radius: 6px; font-size: 11px; background: #111722;
}
.obq-worker-mode > span {
  padding: 3px 7px; border-radius: 999px; text-transform: uppercase;
  letter-spacing: .05em; font-size: 9px;
}
.obq-worker-mode--serial > span { color: #ffd184; background: rgba(240,173,78,.13); }
.obq-worker-mode--parallel > span { color: #9fcfff; background: rgba(78,168,222,.13); }
.obq-worker-mode > small { color: var(--muted); }
.obq-service-policy {
  display: grid; grid-template-columns: repeat(3, minmax(150px,1fr)); gap: 8px;
  margin-top: 10px; color: var(--muted); font-size: 10px;
}
.obq-service-policy > div {
  display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 5px;
}
.obq-service-policy strong { color: var(--text); font-weight: 500; }
.obq-service-policy p { grid-column: 1 / -1; margin: 0; }
.obq-service-policy .obq-policy-note {
  color: #a8ccef; margin-top: 3px; text-transform: uppercase; letter-spacing: .05em;
}
.obq-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin: 8px 0 14px;
}
.obq-filters { display: inline-flex; }
.obq-filter {
  background: var(--panel); color: var(--muted); border: 1px solid var(--border);
  padding: 6px 13px; cursor: pointer; margin-left: -1px;
}
.obq-filter:first-child { border-radius: 5px 0 0 5px; margin-left: 0; }
.obq-filter:last-child { border-radius: 0 5px 5px 0; }
.obq-filter.is-active { color: var(--text); background: #243049; border-color: #385276; z-index: 1; }
.obq-list { display: grid; gap: 12px; }
.obq-empty {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 48px 20px; border: 1px dashed var(--border); border-radius: 8px;
}
.obq-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 9px;
  padding: 15px 17px; box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.obq-card[data-health="running"] { border-left: 4px solid var(--green); }
.obq-card[data-health="queued"] { border-left: 4px solid var(--amber); }
.obq-card[data-health="failed"] { border-left: 4px solid var(--red); }
.obq-card-head { display: flex; justify-content: space-between; gap: 16px; }
.obq-lake h2 { border: 0; padding: 0; margin: 0 0 2px; font-size: 18px; }
.obq-lake h2 span { color: var(--muted); font-size: 12px; font-weight: 400; }
.obq-health {
  display: flex; align-items: center; align-self: flex-start; gap: 6px;
  border-radius: 999px; padding: 4px 10px; font-size: 12px; text-transform: uppercase;
}
.obq-health small { text-transform: none; opacity: .75; padding-left: 4px; }
.obq-health--running { color: #81dc97; background: rgba(40,167,69,.14); }
.obq-health--queued { color: #ffd184; background: rgba(240,173,78,.14); }
.obq-health--failed { color: #ff9ca6; background: rgba(220,53,69,.14); }
.obq-health--complete { color: #9fcfff; background: rgba(78,168,222,.14); }
.obq-timeline { display: grid; grid-template-columns: repeat(5, 1fr); margin: 19px 0 17px; }
.obq-stage {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 5px; color: var(--muted); font-size: 11px; text-align: center;
}
.obq-stage::before {
  content: ""; position: absolute; height: 2px; background: var(--border);
  left: -50%; right: 50%; top: 6px;
}
.obq-stage:first-child::before { display: none; }
.obq-stage-dot {
  position: relative; z-index: 1; width: 13px; height: 13px; border: 2px solid #4a5060;
  border-radius: 50%; background: var(--panel);
}
.obq-stage--complete .obq-stage-dot { border-color: var(--green); background: var(--green); }
.obq-stage--complete::before { background: var(--green); }
.obq-stage--running { color: #81dc97; font-weight: 600; }
.obq-stage--running .obq-stage-dot { border-color: var(--green); box-shadow: 0 0 0 4px rgba(40,167,69,.13); }
.obq-stage--queued { color: #ffd184; font-weight: 600; }
.obq-stage--queued .obq-stage-dot { border-color: var(--amber); }
.obq-stage--failed { color: #ff9ca6; font-weight: 600; }
.obq-stage--failed .obq-stage-dot { border-color: var(--red); background: var(--red); }
.obq-work {
  display: grid; grid-template-columns: minmax(200px, 1.15fr) minmax(180px, .9fr) minmax(350px, 1.6fr);
  align-items: center; gap: 22px; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); padding: 13px 0;
}
.obq-current { display: flex; flex-direction: column; }
.obq-eyebrow { color: var(--accent); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.obq-current strong { font-size: 14px; }
.obq-current .muted { font-size: 11px; }
.obq-inline-mode {
  align-self: flex-start; margin-top: 5px; padding: 2px 6px; border-radius: 999px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
}
.obq-inline-mode--serial { color: #ffd184; background: rgba(240,173,78,.12); }
.obq-inline-mode--parallel { color: #9fcfff; background: rgba(78,168,222,.12); }
.obq-progress-wrap { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; }
.obq-progress-wrap small { grid-column: 1 / -1; color: var(--muted); }
.obq-progress { height: 8px; border-radius: 999px; overflow: hidden; background: #292e3b; }
.obq-progress > div { height: 100%; background: var(--accent); border-radius: inherit; transition: width .3s ease; }
.obq-card[data-health="running"] .obq-progress > div { background: var(--green); }
.obq-card[data-health="queued"] .obq-progress > div { background: var(--amber); }
.obq-card[data-health="failed"] .obq-progress > div { background: var(--red); }
.obq-times { display: grid; grid-template-columns: .7fr .7fr 1.6fr; gap: 12px; }
.obq-times > div { display: flex; flex-direction: column; min-width: 0; }
.obq-times span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.obq-times strong { font-size: 12px; overflow-wrap: anywhere; }
.obq-error {
  margin-top: 11px; padding: 9px 11px; border-left: 3px solid var(--red);
  background: rgba(220,53,69,.08); color: #ffb1b8; font-size: 12px;
}
.obq-error strong { margin-right: 8px; color: #ff7d89; }
.obq-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding-top: 11px; font-size: 11px;
}
.obq-card-foot > div { display: flex; align-items: center; gap: 14px; }
.obq-card-foot a { color: var(--accent); text-decoration: none; }
.obq-details { position: relative; }
.obq-details summary { color: var(--accent); cursor: pointer; list-style: none; }
.obq-details summary::-webkit-details-marker { display: none; }
.obq-details-panel { margin-top: 12px; }
.obq-card-foot:has(.obq-details[open]) { display: block; }
.obq-card-foot:has(.obq-details[open]) > div { margin-top: 8px; display: block; }
.obq-step-list { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.obq-step {
  display: grid; grid-template-columns: 10px 25px minmax(180px, 1fr) 70px 75px;
  gap: 8px; align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.obq-step:last-child { border-bottom: 0; }
.obq-step-mark { width: 8px; height: 8px; border: 1px solid #555d6d; border-radius: 50%; }
.obq-step--complete .obq-step-mark { background: var(--green); border-color: var(--green); }
.obq-step--running .obq-step-mark { border: 2px solid var(--green); box-shadow: 0 0 0 3px rgba(40,167,69,.1); }
.obq-step--failed .obq-step-mark { background: var(--red); border-color: var(--red); }
.obq-step-position, .obq-step-status, .obq-step-time { color: var(--muted); }
.obq-step-name { display: flex; flex-direction: column; }
.obq-step-name small { color: var(--muted); font-family: ui-monospace, monospace; }
.obq-step-error { grid-column: 3 / -1; color: #ff9ca6; }
.obq-step-sections { display: grid; gap: 9px; }
.obq-step-group { margin: 0; }
.obq-step-group h4, .obq-step-group > summary {
  margin: 0 0 5px; color: var(--muted); font-size: 10px;
  text-transform: uppercase; letter-spacing: .05em;
}
.obq-step-group > summary { cursor: pointer; }
.obq-step-group h4 span, .obq-step-group > summary strong { color: var(--text); margin-left: 4px; }
.obq-step-group--running h4 { color: #81dc97; }
.obq-step-group--failed h4 { color: #ff9ca6; }
.obq-show-more {
  display: block; width: 100%; margin-top: 12px; padding: 10px;
  color: var(--accent); background: var(--panel); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer;
}
.obq-show-more:hover { background: #243049; }

@media (max-width: 980px) {
  .obq-lane-flow { grid-template-columns: 1fr; }
  .obq-lane-arrow { transform: rotate(90deg); }
  .obq-worker-mode { grid-template-columns: auto 1fr; }
  .obq-worker-mode > small { grid-column: 1 / -1; }
  .obq-work { grid-template-columns: 1fr 1fr; }
  .obq-times { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .obq-now-head, .obq-lane-head { flex-direction: column; }
  .obq-service-policy { grid-template-columns: 1fr; }
  .obq-service-policy p { grid-column: auto; }
  .obq-summary { grid-template-columns: 1fr 1fr; }
  .obq-heading, .obq-toolbar, .obq-card-head, .obq-card-foot { align-items: stretch; flex-direction: column; }
  .obq-work { grid-template-columns: 1fr; }
  .obq-times { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .obq-times > div:last-child { grid-column: 1 / -1; }
  .obq-stage { font-size: 9px; }
  .obq-step { grid-template-columns: 10px 20px 1fr 65px; }
  .obq-step-time { grid-column: 3 / -1; }
}

/* profile grid */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.profile-grid > div {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* objectives */
.obj-table .obj-have td:first-child { color: var(--green); }
.obj-table .obj-missing td:first-child { color: var(--muted); }
.obj-table small { display: block; }

@media (max-width: 800px) {
  .metrics { grid-template-columns: 1fr 1fr; }
}

/* Hazard banner — sits below the lake H1, only renders when severity != none. */
.hazard-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.hazard-banner.hidden { display: none; }

/* Re-onboarding banner — same chrome as hazard-banner, amber accent.
   The .hidden rule is load-bearing: the div ships in every lake page
   and JS only unhides it when reonboard_status says needed. */
.reonboard-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid #f59f00;
  background: #fff8e6;
}
.reonboard-banner.hidden { display: none; }
.reonboard-banner__icon { flex: 0 0 auto; font-size: 20px; color: #b8860b; }
.reonboard-banner__headline { color: #5c4400; }
.reonboard-banner__sub { font-size: 12px; color: #7a6220; margin: 4px 0 8px; }
.reonboard-banner__actions { display: flex; align-items: center; gap: 8px; }

.hazard-banner__icon {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  margin-top: 2px;
}
.hazard-banner__body { flex: 1 1 auto; }
.hazard-banner__headline { font-weight: 600; font-size: 16px; }
.hazard-banner__sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.hazard-banner__window { font-weight: 500; }

.hazard-banner[data-severity="advisory"] {
  border-color: var(--amber);
  background: rgba(240, 173, 78, 0.08);
}
.hazard-banner[data-severity="advisory"] .hazard-banner__icon { background: var(--amber); }
.hazard-banner[data-severity="advisory"] .hazard-banner__headline { color: var(--amber); }

.hazard-banner[data-severity="warning"] {
  border-color: #ff8c1a;
  background: rgba(255, 140, 26, 0.10);
}
.hazard-banner[data-severity="warning"] .hazard-banner__icon { background: #ff8c1a; }
.hazard-banner[data-severity="warning"] .hazard-banner__headline { color: #ff8c1a; }

.hazard-banner[data-severity="danger"] {
  border-color: var(--red);
  background: rgba(220, 53, 69, 0.12);
}
.hazard-banner[data-severity="danger"] .hazard-banner__icon { background: var(--red); }
.hazard-banner[data-severity="danger"] .hazard-banner__headline { color: var(--red); }

/* 1 m water-T forecast tile */
.wt-card {
  display: flex;
  align-items: stretch;
  gap: 18px;
  margin: 16px 0 24px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.wt-card.hidden { display: none; }
.wt-card__hero {
  flex: 0 0 200px;
  display: flex; flex-direction: column; justify-content: center;
}
.wt-card__label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.wt-card__now { font-size: 44px; font-weight: 600; color: var(--accent); line-height: 1.0; margin-top: 4px; }
.wt-card__now .unit { font-size: 16px; color: var(--muted); margin-left: 4px; font-weight: 400; }
.wt-card__sub { color: var(--muted); font-size: 13px; margin-top: 6px; }
.wt-card__skill {
  font-size: 12px; margin-top: 4px;
  padding: 2px 6px; border-radius: 4px; align-self: flex-start;
  background: rgba(78, 168, 222, 0.10); color: var(--accent);
}
.wt-card__skill.hidden { display: none; }

.wt-card__profile {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  font-size: 12px;
}
.wt-card__profile.hidden { display: none; }
.wt-profile__row {
  display: grid;
  grid-template-columns: 84px 60px 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}
.wt-profile__label { color: var(--muted); text-transform: lowercase; letter-spacing: 0.02em; }
.wt-profile__depth { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.wt-profile__temp  { color: var(--text); font-variant-numeric: tabular-nums; }
.wt-profile__row--mixed .wt-profile__temp { color: var(--muted); font-style: italic; }

/* Ice status tile (lake page) */
.ice-tile {
  margin: 16px 0;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.ice-tile.hidden { display: none; }
.ice-tile__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.ice-tile__label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.ice-tile__state {
  font-size: 13px; font-weight: 600;
  padding: 2px 8px; border-radius: 3px;
  background: rgba(78, 168, 222, 0.15); color: var(--accent);
}
.ice-tile[data-state="on"]      .ice-tile__state { background: rgba(78, 168, 222, 0.25); color: var(--accent); }
.ice-tile[data-state="off"]     .ice-tile__state { background: rgba(40, 167, 69, 0.15); color: var(--green); }
.ice-tile[data-state="forming"] .ice-tile__state { background: rgba(240, 173, 78, 0.18); color: var(--amber); }
.ice-tile[data-state="melting"] .ice-tile__state { background: rgba(220, 53, 69, 0.15); color: var(--red); }
.ice-tile[data-state="on"]      { border-color: var(--accent); }
.ice-tile[data-state="forming"], .ice-tile[data-state="melting"] { border-color: var(--amber); }

.ice-tile__body { font-size: 13px; }
.ice-tile__thickness { font-size: 14px; margin-bottom: 4px; }
.ice-tile__thickness.hidden { display: none; }
.ice-tile__thickness strong { color: var(--accent); }
.ice-tile__recent { color: var(--text); margin-bottom: 4px; }
.ice-tile__clim { font-size: 12px; }

/* Bloom roster cell (home table) */
.bloom-cell { font-size: 12px; }
.bloom-pill {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(78, 168, 222, 0.15); color: var(--accent);
}
.bloom-pill--none      { background: transparent; color: var(--muted); }
.bloom-pill--weak      { background: rgba(78, 168, 222, 0.15); color: var(--accent); }
.bloom-pill--moderate  { background: rgba(240, 173, 78, 0.18); color: var(--amber); }
.bloom-pill--strong    { background: rgba(220, 53, 69, 0.18); color: var(--red); }

/* HAB / bloom tile (lake page) */
.bloom-tile {
  margin: 16px 0;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.bloom-tile.hidden { display: none; }
.bloom-tile__head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 8px;
}
.bloom-tile__label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.bloom-tile__severity {
  font-size: 13px; font-weight: 600;
  padding: 2px 8px; border-radius: 3px;
  background: rgba(78, 168, 222, 0.15); color: var(--accent);
}
.bloom-tile[data-severity="weak"] .bloom-tile__severity     { background: rgba(78, 168, 222, 0.15); color: var(--accent); }
.bloom-tile[data-severity="moderate"] .bloom-tile__severity { background: rgba(240, 173, 78, 0.18); color: var(--amber); }
.bloom-tile[data-severity="strong"] .bloom-tile__severity   { background: rgba(220, 53, 69, 0.18); color: var(--red); }
.bloom-tile[data-severity="strong"] { border-color: var(--red); }
.bloom-tile[data-severity="moderate"] { border-color: var(--amber); }

.bloom-tile__body { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.bloom-tile__score { font-size: 14px; flex: 0 0 auto; }
.bloom-tile__score strong { font-size: 22px; color: var(--text); }
.bloom-tile__advisory {
  display: inline-block; margin-left: 8px;
  padding: 1px 6px; border-radius: 3px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
}
.bloom-tile__advisory.hidden { display: none; }
.bloom-tile__signals { list-style: none; padding: 0; margin: 0; flex: 1 1 320px; }
.bloom-sig { display: grid; grid-template-columns: 100px 1fr; gap: 8px; padding: 2px 0; font-size: 12px; }
.bloom-sig__name { color: var(--muted); text-transform: lowercase; }
.bloom-sig--fired .bloom-sig__name { color: var(--amber); font-weight: 600; }
.bloom-sig__notes { color: var(--text); }
.bloom-tile__age { font-size: 11px; margin-top: 6px; }

/* Recreation outlook panel */
.rec-panel {
  margin: 16px 0 24px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.rec-panel.hidden { display: none; }
.rec-panel__header {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;
}
.rec-panel__header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.rec-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rec-table th { font-weight: 400; font-size: 11px; color: var(--muted); padding: 0; }
.rec-label {
  font-size: 12px; color: var(--text); padding: 4px 8px 4px 0;
  width: 96px; white-space: nowrap;
}
.rec-cell {
  font-size: 10px; color: #fff;
  text-align: center;
  padding: 0;
  height: 22px;
  font-variant-numeric: tabular-nums;
}
.rec-hour { text-align: center; }
@media (max-width: 700px) {
  .wt-card { flex-direction: column; gap: 8px; }
  .wt-card__hero { flex: 1 1 auto; }
}

/* Cross-lake hazards banner (home page) */
.hazards-banner {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.hazards-banner.hidden { display: none; }
.hazards-banner__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.hazards-banner__icon {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--amber);
}
.hazards-banner[data-severity="danger"]   { border-color: var(--red); background: rgba(220,53,69,0.10); }
.hazards-banner[data-severity="danger"] .hazards-banner__icon { background: var(--red); }
.hazards-banner[data-severity="warning"]  { border-color: #ff8c1a; background: rgba(255,140,26,0.08); }
.hazards-banner[data-severity="warning"] .hazards-banner__icon { background: #ff8c1a; }
.hazards-banner[data-severity="advisory"] { border-color: var(--amber); background: rgba(240,173,78,0.06); }

.hazards-banner__title {
  font-weight: 600; font-size: 16px;
}
.hazards-banner__count {
  color: var(--muted); font-size: 12px;
}
.hazards-banner__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
}
.hazards-banner__row {
  display: grid;
  grid-template-columns: 160px 90px 1fr auto;
  gap: 10px; align-items: baseline;
  padding: 4px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.hazards-banner__lake { font-weight: 500; color: var(--text); text-decoration: none; }
.hazards-banner__lake:hover { color: var(--accent); }
.hazards-banner__sev {
  font-weight: 600; font-size: 11px; letter-spacing: 0.04em;
  text-align: center; border-radius: 3px; padding: 2px 6px;
  color: #fff;
}
.hazards-banner__sev--danger   { background: var(--red); }
.hazards-banner__sev--warning  { background: #ff8c1a; }
.hazards-banner__sev--advisory { background: var(--amber); color: #1a1305; }
.hazards-banner__headline { color: var(--text); }
.hazards-banner__window   { font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .hazards-banner__row {
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
  }
  .hazards-banner__headline,
  .hazards-banner__window { grid-column: 1 / -1; font-size: 12px; }
}

/* Best-lake-day calendar strip */
.cal-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.cal-day {
  background: rgba(78, 168, 222, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-day__hdr {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.cal-day__dow { font-size: 13px; font-weight: 600; }
.cal-day__dom { font-size: 11px; color: var(--muted); }
.cal-day__headline {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px;
}
.cal-day__headline-act { color: var(--accent); font-weight: 500; }
.cal-day__headline-score { font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-day__list { display: flex; flex-direction: column; gap: 2px; }
.cal-day__row {
  display: grid;
  grid-template-columns: 56px 28px 1fr;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}
.cal-day__act { color: var(--muted); }
.cal-day__score {
  text-align: center; color: #fff; font-weight: 600;
  border-radius: 3px; padding: 1px 0;
  font-variant-numeric: tabular-nums;
}
.cal-day__win { color: var(--text); font-variant-numeric: tabular-nums; font-size: 10px; }

/* Tab nav (#137) */
.tab-nav {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: 18px 0 22px 0;
  border-bottom: 1px solid var(--border);
}
.tab-nav__btn {
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-bottom: none;
  padding: 8px 16px; font-size: 14px; cursor: pointer;
  border-radius: 4px 4px 0 0;
  margin-bottom: -1px;
  transition: color 0.1s, background 0.1s;
}
.tab-nav__btn:hover { color: var(--text); background: var(--panel); }
.tab-nav__btn.is-active {
  color: var(--text);
  background: var(--bg);
  border-color: var(--border);
  border-bottom: 1px solid var(--bg);
  font-weight: 600;
}
.tab-pane[hidden] { display: none !important; }
.tab-pane.is-active { display: block; }

/* Shape History viewer (#192) */
.shape-controls {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin: 0.75rem 0;
}
.shape-controls__row {
  display: flex; gap: 0.5rem; align-items: center;
}
.shape-controls__row > button {
  padding: 0.25rem 0.6rem; cursor: pointer;
  background: #1a2230; color: #e6edf3; border: 1px solid #2a3340;
  border-radius: 3px; font: inherit;
}
.shape-controls__row > button:hover { background: #243049; }
.shape-controls__filters {
  font-size: 0.85em;
}
.shape-controls__filters > label {
  display: inline-block; margin-right: 1rem;
}
.shape-current {
  background: #11161e; border: 1px solid #2a3340;
  border-radius: 3px; padding: 0.5rem 0.75rem;
  font-variant-numeric: tabular-nums;
}
.shape-current__row {
  display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.shape-current__row:last-child { margin-bottom: 0; }
.shape-current__sensor {
  background: #1f2a3a; padding: 1px 6px; border-radius: 2px;
  font-size: 0.85em;
}
.shape-current__extended { color: #6cc04a; font-weight: 600; }
.shape-current__replaced { color: #ffa726; font-weight: 600; }
.shape-current__archived { color: #ef5350; font-weight: 600; }

/* Loading progress bar for the lake-page overview. Sits at the top of
   the overview pane (not the very top of the viewport — keeps the
   reverse-proxy / nav from feeling jumpy). Width animates as each
   fetch in loadOverview resolves; auto-fades when done. */
.page-progress {
  position: relative;
  height: 22px;
  margin: 0 0 8px;
  background: rgba(90, 141, 240, 0.08);
  border: 1px solid rgba(90, 141, 240, 0.25);
  border-radius: 4px;
  overflow: hidden;
  transition: opacity 0.4s ease;
}
.page-progress.is-fading { opacity: 0; }
.page-progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #5a8df0 0%, #7da9f5 100%);
  transition: width 0.25s ease;
}
.page-progress__label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
  color: var(--text, #d6dbe6);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

/* SWOT measurement marker on the shape-history map. Bright cyan dot
   with a white halo so it reads on both light scene tiles and dark
   cloud-covered scenes. Hover/click → popup with date + elevation. */
.swot-marker { pointer-events: auto; }
.swot-marker__dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #60d6ff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.85),
              0 0 0 5px rgba(0,0,0,0.55),
              0 0 12px rgba(96,214,255,0.7);
  cursor: pointer;
}
.swot-marker__dot:hover { background: #9be7ff; }

/* Bathymetry table (#137) */
.bathy-table {
  width: 100%; border-collapse: collapse; margin-top: 12px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.bathy-table th, .bathy-table td {
  border: 1px solid var(--border); padding: 6px 10px; text-align: right;
}
.bathy-table th {
  background: var(--panel); color: var(--text); font-weight: 600;
}
.bathy-table tbody tr:hover { background: var(--panel); }
.bathy-table td:first-child, .bathy-table td:nth-child(2) {
  color: var(--text); font-weight: 500;
}

/* ============================================================================
   Overview tab — hero stats, conditions, activity board (#138)
   ============================================================================ */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.hero-stat {
  background: linear-gradient(180deg, var(--panel) 0%, rgba(22,25,34,0.4) 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 24px 18px;
  position: relative;
  overflow: hidden;
}
.hero-stat--depth { border-left: 4px solid #4ea8de; }
.hero-stat--water { border-left: 4px solid #ff8c1a; }
.hero-stat--now   { border-left: 4px solid #8ed24c; }
.hero-stat__big {
  font-size: 64px;
  line-height: 1.0;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  margin-bottom: 4px;
}
.hero-stat__unit {
  font-size: 22px; color: var(--muted); font-weight: 500;
  margin-left: 6px; letter-spacing: 0;
}
.hero-stat__pill {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(78,168,222,0.18);
  color: #aad8ff;
  border: 1px solid rgba(78,168,222,0.45);
}
.hero-stat__pill[data-state="good"] {
  background: rgba(142,210,76,0.18); color: #b5e57f; border-color: rgba(142,210,76,0.45);
}
.hero-stat__pill[data-state="warn"] {
  background: rgba(255,140,26,0.18); color: #ffc080; border-color: rgba(255,140,26,0.45);
}
.hero-stat__pill[data-state="danger"] {
  background: rgba(220,80,80,0.20); color: #ffb0b0; border-color: rgba(220,80,80,0.5);
}
.hero-stat__pill[data-pct][data-pct] { /* gradient by % full */
  background: rgba(78,168,222,0.18); color: #aad8ff;
}
.hero-stat__sub {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.conditions-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 22px;
}
.cond-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
}
.cond-chip strong { color: var(--text); font-weight: 600; }
.cond-chip[data-state="good"]   { border-color: rgba(142,210,76,0.5);  background: rgba(142,210,76,0.08); }
.cond-chip[data-state="ok"]     { border-color: rgba(78,168,222,0.5);  background: rgba(78,168,222,0.08); }
.cond-chip[data-state="warn"]   { border-color: rgba(255,140,26,0.5);  background: rgba(255,140,26,0.10); }
.cond-chip[data-state="danger"] { border-color: rgba(220,80,80,0.6);   background: rgba(220,80,80,0.12); }
.cond-chip[data-state="loading"] { opacity: 0.55; }

.activity-board {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.activity-board__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.activity-board__head h3 { margin: 0; font-size: 16px; }
.activity-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 10px;
}
.act-card {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-template-areas:
    "icon label light"
    "icon peak  peak"
    "icon best  best";
  gap: 4px 10px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  border-left: 4px solid var(--muted);
  font-size: 13px;
}
.act-card[data-level="green"]  { border-left-color: #8ed24c; }
.act-card[data-level="yellow"] { border-left-color: #ffc943; }
.act-card[data-level="red"]    { border-left-color: #e07070; }
.act-card__icon  { grid-area: icon; font-size: 22px; }
.act-card__label { grid-area: label; font-weight: 600; color: var(--text); font-size: 14px; }
.act-card__light {
  grid-area: light; width: 14px; height: 14px; border-radius: 50%;
  display: inline-block; box-shadow: 0 0 6px currentColor;
}
.act-card__light--green  { background: #8ed24c; color: #8ed24c; }
.act-card__light--yellow { background: #ffc943; color: #ffc943; }
.act-card__light--red    { background: #e07070; color: #e07070; }
.act-card__peak  { grid-area: peak; color: var(--muted); }
.act-card__peak strong { color: var(--text); }
.act-card__best  { grid-area: best; color: var(--muted); font-size: 12px; }
.act-card__best strong { color: var(--text); }
.act-card__unsafe {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(220,80,80,0.25); color: #ffb0b0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.config-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 18px;
}
.config-card h4 {
  margin: 0 0 10px 0; font-size: 13px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 1px;
}
.config-dl { margin: 0; display: grid; grid-template-columns: 1fr 2fr; gap: 4px 12px; }
.config-dl dt { color: var(--muted); font-size: 12px; padding-top: 1px; }
.config-dl dd { margin: 0; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ============================================================================
   7-day activity grid + drill-in modal (#138, concept)
   ============================================================================ */
.day-grid-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px 14px;
  margin: 22px 0;
}
.day-grid-panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.day-grid-panel__head h3 { margin: 0; font-size: 16px; }
.day-grid-panel__concept {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  background: rgba(255, 140, 26, 0.18); color: #ffc080;
  padding: 2px 6px; border-radius: 3px; margin-left: 6px;
  border: 1px solid rgba(255, 140, 26, 0.35);
  vertical-align: middle;
}
.day-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
@media (max-width: 760px) {
  .day-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .day-grid { grid-template-columns: repeat(2, 1fr); }
}
.day-cell {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 10px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.08s, border-color 0.08s, background 0.08s;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 100px;
}
.day-cell:hover {
  border-color: #4ea8de;
  transform: translateY(-1px);
}
.day-cell[data-today="1"] {
  border-color: #4ea8de;
  box-shadow: inset 0 0 0 1px rgba(78, 168, 222, 0.4);
}
.day-cell[data-severity="advisory"] { background: rgba(255, 200, 50, 0.06); }
.day-cell[data-severity="warning"]  { background: rgba(255, 140, 26, 0.10); }
.day-cell[data-severity="danger"]   {
  background: rgba(220, 80, 80, 0.18);
  border-color: rgba(220, 80, 80, 0.5);
}
.day-cell__head {
  display: flex; align-items: baseline; gap: 6px;
}
.day-cell__dow {
  color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: 1px; font-weight: 600;
}
.day-cell__dom {
  font-size: 22px; font-weight: 700; color: var(--text);
  line-height: 1.0; font-variant-numeric: tabular-nums;
}
.day-cell__today {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  background: rgba(78, 168, 222, 0.20); color: #aad8ff;
  padding: 1px 5px; border-radius: 3px;
  margin-left: auto;
}
.day-cell__mon { font-size: 10px; }
.day-cell__danger {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  background: rgba(220, 80, 80, 0.30); color: #ffb0b0;
  padding: 2px 6px; border-radius: 3px;
  align-self: flex-start;
}
.day-cell__warning {
  display: inline-block;
  font-size: 11px;
  color: #ffc080;
}
.day-cell__pills {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 2px;
}
.day-cell__headline {
  font-size: 10px; color: var(--muted); margin-top: auto;
}
.day-pill {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
}
.day-pill--optimal {
  background: rgba(142, 210, 76, 0.20);
  color: #b5e57f;
  border-color: rgba(142, 210, 76, 0.55);
}
.day-pill--good {
  background: rgba(255, 200, 67, 0.15);
  color: #ffd870;
  border-color: rgba(255, 200, 67, 0.40);
  opacity: 0.85;
}
.day-grid-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}
.day-grid-key .muted { font-size: 13px; }

/* Explanatory caption paragraph under a panel / chart. Operator
   complained the previous 11px was unreadable; 13px line-height 1.55
   matches the forecast-card foot text used under the t2m chart. */
.panel-caption {
  font-size: 13px;
  line-height: 1.55;
  margin: 8px 0 0;
}
.day-grid-key__divider {
  height: 14px; width: 1px; background: var(--border);
  margin: 0 4px;
}
.day-grid-key__danger {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  background: rgba(220, 80, 80, 0.30); color: #ffb0b0;
  padding: 2px 6px; border-radius: 3px;
}

/* ---- Drill-in modal ---- */
.day-modal { position: fixed; inset: 0; z-index: 1000; }
.day-modal.hidden { display: none; }
.day-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.day-modal__panel {
  position: relative;
  max-width: 880px; width: calc(100% - 40px);
  max-height: calc(100vh - 80px);
  margin: 40px auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.day-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.day-modal__head h3 { margin: 0; font-size: 16px; }
.day-modal__today {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  background: rgba(78, 168, 222, 0.20); color: #aad8ff;
  padding: 1px 5px; border-radius: 3px;
}
.day-modal__sev {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 3px;
  margin-left: 6px;
}
.day-modal__sev--danger   { background: rgba(220, 80, 80, 0.25); color: #ffb0b0; }
.day-modal__sev--warning  { background: rgba(255, 140, 26, 0.20); color: #ffc080; }
.day-modal__sev--advisory { background: rgba(255, 200, 50, 0.18); color: #ffe080; }
.day-modal__close {
  background: transparent; border: none; color: var(--muted);
  font-size: 26px; line-height: 1; padding: 0 4px;
  cursor: pointer;
}
.day-modal__close:hover { color: var(--text); }
.day-modal__body {
  padding: 16px 18px;
  overflow-y: auto;
}
.day-modal__warn {
  background: rgba(220, 80, 80, 0.10);
  border-left: 3px solid #e07070;
  padding: 6px 10px; border-radius: 0 3px 3px 0;
  margin: 0 0 12px 0;
  color: #ffb0b0;
  font-size: 12px;
}

/* Hourly heatmap */
.hm-table {
  display: flex; flex-direction: column; gap: 2px;
  font-variant-numeric: tabular-nums;
}
.hm-row {
  display: grid;
  grid-template-columns: 90px repeat(24, 1fr);
  gap: 2px;
}
.hm-row__label {
  font-size: 11px; color: var(--text);
  display: flex; align-items: center;
  padding: 0 6px;
}
.hm-cell {
  height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff;
  border-radius: 2px;
}
.hm-cell--hdr { color: var(--muted); background: transparent; height: 16px; font-size: 9px; }
.hm-row--hdr .hm-row__label { font-size: 9px; }
.hm-cell--empty { color: var(--muted); background: rgba(255,255,255,0.02); }
.hm-cell--active   { background: transparent; height: 4px; border-radius: 2px; }
.hm-cell--active-on { background: rgba(78, 168, 222, 0.35); }
.hm-row--active .hm-row__label { font-size: 9px; }
.hm-cell--met { color: var(--muted); background: rgba(255,255,255,0.04); }
.hm-met { margin-top: 14px; }

/* Placeholder cells (days beyond GLM horizon) */
.day-cell[data-tier="pending"] {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.02);
  opacity: 0.55;
  cursor: not-allowed;
}
.day-cell[data-tier="pending"]:hover {
  transform: none;
  border-color: var(--border);
}

/* Hourly top-2m mixed water-T forecast card (#139) */
.forecast-card {
  background: linear-gradient(180deg, var(--panel) 0%, rgba(22,25,34,0.4) 100%);
  border: 1px solid var(--border);
  border-left: 4px solid #ff8c1a;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
/* Top-surface card sits above the top-2m card and gets a cyan accent so
   the two depth bands read as distinct cards at a glance (cyan matches
   the trace color in the chart). */
.forecast-card--surface {
  border-left: 4px solid #60d6ff;
}
.forecast-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 8px;
}
.forecast-card__title {
  margin: 0; font-size: 15px;
}
.forecast-card__meta {
  font-size: 12px; text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.forecast-card__meta .muted { font-size: 12px; }
.forecast-card__foot {
  font-size: 13px;            /* was 11; operator wants larger description */
  line-height: 1.55;
  margin-top: 8px;
  color: var(--text, #d6dbe6);
  font-variant-numeric: tabular-nums;
}
.forecast-card__foot em { font-style: normal; color: var(--text); font-weight: 600; }
.forecast-card__subhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  margin: 14px 0 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.forecast-card__subtitle {
  margin: 0; font-size: 13px; font-weight: 600;
  color: var(--text-dim, #a8b1c2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}

/* Inline "?" help icon next to a section title. Clicking opens the
   matching .info-popover. */
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  padding: 0; margin: 0;
  background: rgba(90, 141, 240, 0.18);
  color: #5a8df0;
  border: 1px solid rgba(90, 141, 240, 0.4);
  border-radius: 50%;
  font-size: 12px; font-weight: 700; line-height: 1;
  cursor: pointer; user-select: none;
  text-transform: none;
}
.info-btn:hover { background: rgba(90, 141, 240, 0.32); color: #fff; }
.info-btn:focus-visible { outline: 2px solid #5a8df0; outline-offset: 1px; }
/* Smaller variant for sidebar checkboxes where space is tight. */
.info-btn--tiny {
  width: 15px; height: 15px;
  font-size: 10px; margin-left: 6px;
}

/* Tables inside info popovers — used by the thermocline-species table. */
.info-popover__table {
  width: 100%; border-collapse: collapse; margin: 6px 0 10px;
  font-variant-numeric: tabular-nums; font-size: 12px;
}
.info-popover__table th, .info-popover__table td {
  padding: 4px 8px; border-bottom: 1px solid var(--border);
  text-align: left;
}
.info-popover__table th {
  color: var(--text-dim, #a8b1c2); font-weight: 600;
  background: rgba(90, 141, 240, 0.04);
}

/* ===================== Fishing tab ===================== */
.fishing-confidence {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin: 8px 0 18px;
  border: 1px solid var(--border); border-left: 4px solid #5a8df0;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(90,141,240,0.10), transparent);
  font-size: 13px; line-height: 1.4;
}
.fishing-confidence[data-state="high"]   { border-left-color: #34d399; background: linear-gradient(90deg, rgba(52,211,153,0.12), transparent); }
.fishing-confidence[data-state="medium"] { border-left-color: #fbbf24; background: linear-gradient(90deg, rgba(251,191,36,0.12), transparent); }
.fishing-confidence[data-state="low"]    { border-left-color: #fb7185; background: linear-gradient(90deg, rgba(251,113,133,0.14), transparent); }
.fishing-confidence__icon { font-size: 22px; }
.fishing-confidence__title { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-dim, #a8b1c2); margin-bottom: 2px; }

/* Species preset button bar */
.fishing-species__bar {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.fishing-species__btn {
  background: rgba(90, 141, 240, 0.08);
  border: 1px solid rgba(90, 141, 240, 0.35);
  color: var(--text, #d6dbe6);
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.fishing-species__btn:hover { background: rgba(90, 141, 240, 0.20); }
.fishing-species__btn.is-active {
  background: #5a8df0; color: #fff; border-color: #5a8df0;
}
.fishing-species__btn small { opacity: 0.75; font-weight: 400; }

/* Bite-window strip — 24 columns × ~28 px tall */
.fishing-bite-strip {
  display: grid; grid-template-columns: repeat(24, 1fr);
  gap: 2px; min-height: 40px;
  background: var(--panel, #1a1f2c);
  padding: 4px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.fishing-bite-cell {
  height: 32px; border-radius: 2px;
  position: relative; cursor: default;
  font-size: 9px; color: rgba(255,255,255,0.7);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px;
}
.fishing-bite-cell--peak {
  outline: 2px solid #ffd166; outline-offset: -2px;
}

/* Drop-depth recommendation panel */
.fishing-recommend {
  margin-top: 12px; padding: 14px 16px;
  background: rgba(90,141,240,0.05);
  border: 1px dashed rgba(90,141,240,0.30);
  border-radius: 6px;
  font-size: 14px; line-height: 1.5;
  color: var(--text, #d6dbe6);
}
.fishing-recommend.is-active {
  border-style: solid; border-color: #5a8df0;
  background: linear-gradient(180deg, rgba(90,141,240,0.10), rgba(22,25,34,0.4));
}
.fishing-recommend__big {
  font-size: 22px; font-weight: 600; color: #5a8df0;
  font-variant-numeric: tabular-nums;
}

/* Floating reset-view button on the 2D fishing map. Sits in the
   top-right of the map container. */
.fishing-map-reset {
  position: absolute; top: 8px; right: 8px;
  z-index: 5;
  padding: 5px 12px !important;
  font-size: 12px !important;
  background: rgba(10, 14, 22, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: #d6dbe6 !important;
  backdrop-filter: blur(2px);
}
.fishing-map-reset:hover {
  background: rgba(90, 141, 240, 0.30) !important;
  border-color: #5a8df0 !important;
  color: #fff !important;
}

/* In-map status overlay — sits inside .fishing-map-wrap, fully covers
   the map div while a render is in flight, then `hidden` is toggled on
   when Plotly is done. Gives the operator per-step feedback for the
   slow map-build path (large lakes can take several seconds for
   Plotly.newPlot to draw 1M+ scattergl markers). */
.fishing-map-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 6;
  background: rgba(10, 14, 22, 0.78);
  backdrop-filter: blur(2px);
  border-radius: 4px;
  pointer-events: none;          /* let map remain clickable when done */
}
.fishing-map-status[hidden] { display: none; }
.fishing-map-status__spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(122, 169, 245, 0.25);
  border-top-color: #7da9f5;
  border-radius: 50%;
  animation: fishing-spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes fishing-spin { to { transform: rotate(360deg); } }
.fishing-map-status__text {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 240px; max-width: 360px;
}
.fishing-map-status__step {
  font-size: 13px; font-weight: 600; color: #e6e8ec;
}
.fishing-map-status__detail {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-height: 1em;
}
.fishing-map-status__bar-wrap {
  height: 4px; margin-top: 2px;
  background: rgba(122, 169, 245, 0.12);
  border-radius: 2px; overflow: hidden;
}
.fishing-map-status__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #5a8df0, #7da9f5);
  transition: width 0.18s ease-out;
}

/* Tiny help line under the map about interaction affordances. */
.fishing-map-hint {
  position: absolute; bottom: 8px; left: 12px;
  z-index: 5;
  font-size: 11px; color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* Full-screen modal popover — backdrop + scrollable centered card.
   Markup: <div class="info-popover">...content...</div>. The JS
   handler lazy-wraps loose children into an .info-popover__card on
   first open so existing markup doesn't need to change.
   Lazy show/hide via the `hidden` HTML attribute toggled in JS. */
.info-popover {
  position: fixed;
  inset: 0;
  margin: 0; padding: 5vh 18px;
  background: rgba(11, 14, 22, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 1200;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  animation: info-fadein 160ms ease-out;
}
@keyframes info-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.info-popover[hidden] { display: none; }

/* The centered card that holds the popover's actual content. The JS
   wraps loose children into this on first open so existing markup
   stays compatible. */
.info-popover__card {
  position: relative;
  max-width: 760px; width: 100%;
  margin-bottom: 5vh;
  padding: 32px 40px 28px;
  background: linear-gradient(180deg, var(--panel, #1a1f2c) 0%, rgba(17, 22, 33, 0.95) 100%);
  border: 1px solid rgba(90, 141, 240, 0.30);
  border-left: 5px solid #5a8df0;
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
  font-size: 14px; line-height: 1.65;
  color: var(--text, #d6dbe6);
  animation: info-cardin 200ms ease-out;
}
@keyframes info-cardin {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.info-popover__card h4 {
  margin: 0 0 12px;
  font-size: 24px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.info-popover__card h5 {
  margin: 22px 0 8px;
  font-size: 12px; font-weight: 700;
  color: var(--text-dim, #a8b1c2);
  text-transform: uppercase; letter-spacing: 0.10em;
}
.info-popover__card p { margin: 0 0 12px; }
.info-popover__card strong { color: #ffe9a8; font-weight: 600; }
.info-popover__list {
  margin: 6px 0 12px; padding-left: 0; list-style: none;
}
.info-popover__list li {
  margin: 6px 0; padding-left: 4px;
  display: flex; align-items: baseline; gap: 8px;
}
.info-popover__list li::before {
  content: "▸"; color: #5a8df0;
  flex-shrink: 0; font-size: 11px;
}
.info-popover__close {
  position: absolute; top: 14px; right: 18px;
  width: 32px; height: 32px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  color: var(--muted, #9ba3b3);
  font-size: 22px; line-height: 1; cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.info-popover__close:hover {
  background: rgba(251, 113, 133, 0.18); color: #fff;
  border-color: #fb7185;
}
.info-popover__source { font-size: 12px; margin-top: 14px; opacity: 0.8; }
@media (max-width: 720px) {
  .info-popover { padding: 0; }
  .info-popover__card {
    padding: 24px 22px; margin-bottom: 0;
    border-radius: 0; min-height: 100vh;
  }
}

/* Tiny color swatches inside the popover trace list. */
.info-swatch {
  display: inline-block; flex-shrink: 0;
  width: 18px; height: 4px; border-radius: 2px;
  transform: translateY(-2px);
}
.info-swatch--airtemp { background: #ff6b6b; }
.info-swatch--wind    {
  background: repeating-linear-gradient(90deg,
    #7dd3fc 0 4px, transparent 4px 6px);
  height: 3px;
}
.info-swatch--cloud   { background: rgba(180, 190, 210, 0.32); height: 8px; }

/* Queue dashboard (#138) */
.q-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.q-counter {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  border-left: 4px solid var(--muted);
}
.q-counter--queued     { border-left-color: #4ea8de; }
.q-counter--processing { border-left-color: #ffc943; }
.q-counter--done       { border-left-color: #8ed24c; }
.q-counter--failed     { border-left-color: #e07070; }
.q-counter--lakes      { border-left-color: #ff8c1a; }
.q-counter__n {
  font-size: 32px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.0;
}
.q-counter__l {
  margin-top: 2px;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.q-section { margin-top: 22px; }
.q-section h3 { margin: 0 0 8px 0; font-size: 14px; }
.q-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.q-table th, .q-table td {
  border-bottom: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  vertical-align: middle;
}
.q-table th {
  background: var(--panel); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted);
}
.q-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.q-table tr[data-dirty="true"] { background: rgba(255, 140, 26, 0.05); }
.q-table tr[data-status="processing"] { background: rgba(255, 200, 67, 0.05); }
.q-table .q-num { text-align: right; }
.q-table .q-err {
  color: #ffb0b0; font-size: 11px;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.q-pill {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 3px;
}
.q-pill--dirty  { background: rgba(255, 140, 26, 0.20); color: #ffc080; }
.q-pill--clean  { background: rgba(150, 150, 150, 0.10); color: var(--muted); }
.q-pill--queued { background: rgba(78, 168, 222, 0.15); color: #aad8ff; }
.q-pill--proc   { background: rgba(255, 200, 67, 0.20); color: #ffd870; }
.q-src {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(78, 168, 222, 0.10);
  color: #aad8ff;
}
.q-src--hrrr_cycle      { background: rgba(78, 168, 222, 0.15); color: #aad8ff; }
.q-src--gfs_cycle       { background: rgba(142, 210, 76, 0.15); color: #b5e57f; }
.q-src--nwis_stage      { background: rgba(255, 140, 26, 0.15); color: #ffc080; }
.q-src--swot_lakesp     { background: rgba(255, 200, 67, 0.15); color: #ffd870; }
.q-src--ecostress_lste  { background: rgba(220, 80, 80, 0.15); color: #ffb0b0; }
.q-src--wqdatalive_buoys { background: rgba(78, 168, 222, 0.20); color: #aad8ff; }

.header-nav { display: inline-flex; gap: 14px; margin-left: 18px; }
.header-nav a {
  color: var(--muted); font-size: 12px; text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.header-nav a:hover { color: var(--text); border-bottom-color: var(--text); }
.header-nav__signout {
  margin-left: 8px; padding: 2px 10px !important;
  border: 1px solid var(--border); border-radius: 11px;
  border-bottom: 1px solid var(--border) !important;
  background: rgba(90, 141, 240, 0.10); color: #5a8df0 !important;
}
.header-nav__signout:hover {
  background: rgba(90, 141, 240, 0.20); border-color: #5a8df0;
}

/* ===================================================================== */
/* System status (/status + home-page widget)                            */
/* --------------------------------------------------------------------- */
/* One color source of truth, keyed off data-status. good=green,         */
/* old=amber, warning=orange, error=red, reference=blue, nodata=grey.    */
:root {
  --st-orange: #ff8c1a;   /* warning — matches the hazards banner        */
  /* Per-status colors, also consumed by the hero donut conic-gradient.  */
  --c-good: var(--green); --c-old: var(--amber); --c-warning: var(--st-orange);
  --c-error: var(--red);  --c-reference: var(--accent);
  --c-waiting: #4a90c2;   /* stale-but-producer-clean: waiting on upstream */
  --c-nodata: #3a3f4b;    --c-unknown: #3a3f4b;
}
[data-status="waiting"]   { --st-color: var(--c-waiting); }
[data-status="good"]      { --st-color: var(--green); }
[data-status="old"]       { --st-color: var(--amber); }
[data-status="warning"]   { --st-color: var(--st-orange); }
[data-status="error"]     { --st-color: var(--red); }
[data-status="reference"] { --st-color: var(--accent); }
[data-status="nodata"]    { --st-color: var(--muted); }
[data-status="unknown"]   { --st-color: var(--muted); }
[data-status="loading"]   { --st-color: var(--muted); }

/* --- overall banner (top of /status) --- */
.sys-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin: 16px 0 20px;
  border: 1px solid var(--border); border-left: 4px solid var(--st-color);
  border-radius: 8px; background: var(--panel);
}
.sys-banner__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--st-color); flex: 0 0 auto;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-color) 22%, transparent);
}
.sys-banner__headline { font-weight: 600; color: var(--st-color); }
.sys-banner__counts { font-size: 13px; }

/* --- card grid --- */
.sys-group { margin-bottom: 22px; }
.sys-group__title {
  margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.sys-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.sys-card {
  display: block; text-decoration: none; color: var(--text);
  padding: 12px 14px; border: 1px solid var(--border);
  border-left: 4px solid var(--st-color); border-radius: 8px;
  background: var(--panel); transition: border-color .15s, transform .05s;
}
.sys-card:hover { border-color: var(--st-color); transform: translateY(-1px); }
.sys-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sys-card__label { font-weight: 600; }
.sys-card__age {
  margin-top: 8px; font-size: 20px; font-weight: 600; color: var(--st-color);
  font-variant-numeric: tabular-nums;
}
.sys-card__reason { font-size: 12px; margin-top: 2px; }
.sys-card__detail { font-size: 12px; margin-top: 6px; color: var(--st-color); }
.sys-card__meta { font-size: 11px; margin-top: 4px; }
.sys-card__foot {
  font-size: 11px; margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* --- status pill (shared by cards, detail page, home widget) --- */
.sys-pill {
  display: inline-block; padding: 1px 8px; border-radius: 11px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  color: var(--st-color);
  background: color-mix(in srgb, var(--st-color) 16%, transparent);
}

/* --- per-source detail page --- */
.sys-detail-grid {
  display: grid; gap: 12px 24px; margin: 14px 0 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sys-detail-grid > div > span { font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; display: block; margin-bottom: 2px; }
.sys-log {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; font-size: 11px; overflow-x: auto; margin-top: 10px;
  color: var(--muted); white-space: pre; max-height: 240px;
}
.sys-err { font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--muted); max-width: 460px; word-break: break-all; }

/* --- home-page widget (top-left, color-coded) --- */
.home-top { display: flex; align-items: flex-start; gap: 18px;
  flex-wrap: wrap; margin-bottom: 6px; }
.home-top > h1 { margin: 0; }
.sys-widget {
  order: -1; text-decoration: none; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border: 1px solid var(--border);
  border-left: 4px solid var(--st-color); border-radius: 8px;
  background: var(--panel); min-width: 210px;
}
.sys-widget:hover { border-color: var(--st-color); }
.sys-widget__dot {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
  background: var(--st-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-color) 22%, transparent);
}
.sys-widget[data-status="error"] .sys-widget__dot,
.sys-widget[data-status="warning"] .sys-widget__dot { animation: sys-pulse 1.8s infinite; }
@keyframes sys-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.sys-widget__body { line-height: 1.25; }
.sys-widget__label { font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); }
.sys-widget__head { font-weight: 600; color: var(--st-color); font-size: 14px; }
.sys-widget__open { margin-left: auto; color: var(--muted); font-size: 12px; }

/* ===================================================================== */
/* System status — graphical layer (hero donut, freshness gauges)        */
/* --------------------------------------------------------------------- */
.sys-hero {
  display: flex; align-items: center; gap: 22px;
  padding: 18px 22px; margin: 16px 0 24px;
  border: 1px solid var(--border); border-left: 5px solid var(--st-color);
  border-radius: 12px; background: var(--panel);
}
.sys-hero__ring {
  width: 108px; height: 108px; border-radius: 50%; flex: 0 0 auto;
  position: relative; background: var(--border);
  transition: background .4s ease;
}
.sys-hero__ring::after {                 /* punch the donut hole */
  content: ""; position: absolute; inset: 15px; border-radius: 50%;
  background: var(--panel);
}
.sys-hero__ring-center {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sys-hero__ring-center b { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--text); }
.sys-hero__ring-center span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sys-hero__main { flex: 1 1 auto; min-width: 0; }
.sys-hero__title { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sys-hero__headline { font-size: 22px; font-weight: 700; margin: 2px 0 12px; }
.sys-hero__ok   { color: var(--green); }
.sys-hero__warn { color: var(--st-color); }
.sys-hero__legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sys-legend__chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 3px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--st-color) 12%, transparent);
  color: var(--text); border: 1px solid color-mix(in srgb, var(--st-color) 30%, transparent);
}
.sys-legend__chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--st-color); }
.sys-hero__meta { font-size: 12px; }

/* --- category group headers --- */
.sys-group { margin-bottom: 24px; }
.sys-group__title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: 15px; font-weight: 600; color: var(--text);
  text-transform: none; letter-spacing: 0;
}
.sys-group__icon { font-size: 18px; }
.sys-group__badge {
  margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 9px;
  border-radius: 11px; color: var(--st-color);
  background: color-mix(in srgb, var(--st-color) 14%, transparent);
}

/* --- richer cards --- */
.sys-card { min-height: 116px; }
.sys-card__status { font-size: 13px; margin: 8px 0 12px; color: var(--st-color); font-weight: 500; }
.sys-card__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11px; margin-top: 12px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.sys-card__upstream { text-align: right; }
.sys-card:hover .sys-card__open { color: var(--st-color); }

/* --- freshness gauge --- */
.sys-gauge { margin: 4px 0 2px; }
.sys-gauge__track {
  position: relative; height: 8px; border-radius: 5px; overflow: hidden;
  background: var(--bg);
}
.sys-gauge__zone { position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--st-color) 45%, transparent); }
.sys-gauge__marker {
  position: absolute; top: -3px; width: 4px; height: 14px; border-radius: 2px;
  background: var(--st-color); transform: translateX(-2px);
  box-shadow: 0 0 0 2px var(--panel), 0 0 6px color-mix(in srgb, var(--st-color) 60%, transparent);
}
.sys-gauge__marker.is-over { animation: sys-pulse 1.6s infinite; }
.sys-gauge__scale { position: relative; height: 14px; margin-top: 3px; }
.sys-gauge__scale span {
  position: absolute; transform: translateX(-50%);
  font-size: 10px; color: var(--muted); white-space: nowrap;
}
.sys-gauge--flat {
  display: flex; align-items: center; height: 25px; padding: 0 10px;
  border-radius: 5px; font-size: 12px; color: var(--st-color);
  background: color-mix(in srgb, var(--st-color) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--st-color) 35%, transparent);
}

@media (max-width: 560px) {
  .sys-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ===================================================================== */
/* Lake detail — left nav pane + standalone section pages                */
/* ===================================================================== */
.lake-layout {
  display: grid; grid-template-columns: 224px minmax(0, 1fr);
  gap: 22px; align-items: start; margin-top: 12px;
}
.lake-nav {
  position: sticky; top: 14px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel);
}
.lake-nav__head { padding: 2px 10px 10px; border-bottom: 1px solid var(--border);
  margin-bottom: 8px; }
.lake-nav__lake { font-weight: 700; font-size: 14px; }
.lake-nav__now { display: flex; align-items: center; gap: 7px; margin-top: 5px;
  font-size: 13px; color: var(--muted); }
.lake-nav__now.hidden { display: none; }
.lake-nav__dot { width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.lake-nav__item {
  display: block; padding: 7px 10px; border-radius: 7px;
  border-left: 3px solid transparent;
  color: var(--muted); text-decoration: none; font-size: 13.5px;
  transition: background .12s, color .12s;
}
.lake-nav__item:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.lake-nav__item.is-active {
  color: var(--text); font-weight: 600;
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.lake-content { min-width: 0; }
.lake-content > .lake-section > h2:first-child { margin-top: 0; }

/* Mobile: nav collapses to a horizontal scroll strip above content. */
@media (max-width: 900px) {
  .lake-layout { display: block; }
  .lake-nav {
    position: static; flex-direction: row; align-items: center;
    overflow-x: auto; gap: 4px; padding: 8px;
    margin-bottom: 16px; -webkit-overflow-scrolling: touch;
  }
  .lake-nav__head { display: none; }
  .lake-nav__item { white-space: nowrap; border-left: none;
    border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; }
  .lake-nav__item.is-active { border-left: none;
    border-bottom-color: var(--accent); }
}

/* --- lake page design pass ------------------------------------------- */
/* Elevation: current-stage strip above the history charts. */
.elev-stage-strip {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  padding: 12px 16px; margin: 4px 0 16px;
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 8px; background: var(--panel);
}
.elev-stage-strip__item { display: flex; flex-direction: column; gap: 1px; }
.elev-stage-strip__item b { font-size: 18px; font-variant-numeric: tabular-nums; }
.elev-stage-strip__label { font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); }

/* Imagery: segmented Catalog | Validation control. */
.imagery-seg { display: inline-flex; gap: 2px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: 8px; padding: 3px;
  background: var(--panel); }
.imagery-seg__btn {
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; padding: 6px 16px; border-radius: 6px;
  cursor: pointer;
}
.imagery-seg__btn:hover { color: var(--text); }
.imagery-seg__btn.is-active {
  color: var(--text); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Fishing: species picker stays reachable while scrolling the map/strips. */
.lake-section[data-section="fishing"] #fishing-species-bar {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg); padding: 8px 0 6px;
  border-bottom: 1px solid var(--border);
}

/* 3D viewer: dedicated page gets more of the viewport. */
.lake-section[data-section="viewer3d"] .v3d-3d-stage {
  height: clamp(560px, calc(100vh - 250px), 1100px) !important;
}

/* Temps: merged sections read as one story. */
.lake-section[data-section="imagery"] > h2:first-child,
.lake-section[data-section="modistemps"] + .lake-section h2:first-child {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border);
}

/* Overview: zone headers + tile deep links. */
.ov-zone { margin: 26px 0 0; }
.ov-zone__title {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.ov-zone__title a { color: var(--accent); font-weight: 500;
  text-transform: none; letter-spacing: 0; text-decoration: none;
  float: right; font-size: 12px; }
.ov-zone__title a:hover { text-decoration: underline; }

/* --- per-lake product freshness grid (/status) ------------------------ */
.sys-lakes { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.sys-lakes th { color: var(--muted); font-weight: 500; padding: 6px 10px;
  text-align: center; white-space: nowrap; border-bottom: 1px solid var(--border); }
.sys-lakes td { padding: 5px 10px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid rgba(35,39,51,0.5); }
.sys-lakes__cell {
  display: inline-block; min-width: 44px; padding: 2px 8px; border-radius: 10px;
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11.5px;
  color: var(--st-color);
  background: color-mix(in srgb, var(--st-color) 14%, transparent);
}
.sys-lakes__dot { display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-left: 6px; background: var(--st-color); }