:root {
  --bg: #070809;
  --bg-elev: #0c0d0f;
  --panel: #101214;
  --inset: #090a0b;
  --hairline: rgba(198, 196, 188, 0.14);
  --hairline-bright: rgba(220, 208, 176, 0.32);
  --text: #d2d4d8;
  --text-dim: #7c8088;
  --text-mute: #6a7078;
  --accent: #c9973a;
  --accent-2: #8a6a32;
  --accent-dim: rgba(201, 151, 58, 0.12);
  --live: #6fbf7a;
  --stale: #c9973a;
  --off: #5a3a3a;
  --error: #c45c4a;
  --font-ui: "IBM Plex Sans", "Source Sans 3", system-ui, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, monospace;
  --bezel: 1px solid var(--hairline);
  --radius: 2px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 13.5px; line-height: 1.45; }
[hidden] { display: none !important; }
body { background-image:
  linear-gradient(180deg, rgba(255,255,255,0.015), transparent 80px),
  radial-gradient(1200px 500px at 50% -10%, rgba(201,151,58,0.05), transparent 60%); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: #e0b45a; }
button, input, select { font: inherit; color: inherit; }

.obs { min-height: 100vh; display: flex; flex-direction: column; }

.mast {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 10px 22px 8px;
  border-bottom: var(--bezel);
  background: linear-gradient(180deg, #121416, #0b0c0e);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.03);
}
.wordmark { display: flex; align-items: baseline; gap: 10px; color: inherit; letter-spacing: 0.12em; }
.wm-kicker { font-size: 9px; color: var(--text-dim); letter-spacing: 0.22em; }
.wm-name { font-size: 18px; font-weight: 600; letter-spacing: 0.28em; color: #ece6d8; }
.wm-tail { font-size: 9px; color: var(--accent); letter-spacing: 0.28em; }

.nav { display: flex; gap: 2px; }
.nav a {
  padding: 6px 12px;
  color: var(--text-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
  border: 1px solid transparent;
}
.nav a.is-on, .nav a:hover {
  color: var(--text);
  border-color: var(--hairline);
  background: var(--accent-dim);
}

.mast-meta { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.clock { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--text-dim); font-size: 12px; }

.lamp { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: 0.16em; color: var(--text-dim); }
.lamp i { width: 7px; height: 7px; border-radius: 50%; background: #3a3d42; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.lamp[data-state="live"] i { background: var(--live); box-shadow: 0 0 8px var(--live); }
.lamp[data-state="stale"] i { background: var(--stale); box-shadow: 0 0 8px var(--stale); }
.lamp[data-state="off"] i, .lamp[data-state="error"] i { background: var(--error); }
.lamp[data-state="wait"] i { background: #3a3d42; }

.stage { flex: 1; padding: 18px 22px 32px; }

.strip { margin-bottom: 16px; }
.strip-kicker { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.strip h1 { margin: 4px 0 6px; font-size: 22px; font-weight: 500; letter-spacing: 0.04em; color: #ece8de; }
.lede { margin: 0; max-width: 62ch; color: var(--text-dim); }
.strip-actions { display: flex; gap: 8px; margin-top: 12px; }

.bezel {
  position: relative;
  background: var(--panel);
  border: var(--bezel);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 0 0 1px rgba(0,0,0,0.45);
}
.bezel::before, .bezel::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  pointer-events: none;
}
.bezel::before { top: -1px; left: -1px; border-top: 1px solid var(--hairline-bright); border-left: 1px solid var(--hairline-bright); }
.bezel::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--hairline-bright); border-right: 1px solid var(--hairline-bright); }

.panel-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  border-bottom: var(--bezel);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
}
.panel-hd.tight { border: 0; padding: 0 0 8px; }
.dim { color: var(--text-mute); }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 16px; }
.overview-grid > *, .lab-root, .lab-stack, .lab-panel, .lab-panel .panel-body { min-width: 0; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tile { min-height: 168px; padding: 0 0 10px; overflow: hidden; }
.tile-link { position: absolute; inset: 0; z-index: 1; }
.tile-hd { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 6px; }
.tile-name { letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; color: #e8e2d4; }
.tile-body { padding: 4px 12px 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px 10px; }
.metric { display: flex; flex-direction: column; gap: 2px; }
.metric .k { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.metric .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 20px; letter-spacing: -0.02em; color: #efe8d4; }
.metric .u { font-size: 10px; color: var(--text-dim); margin-left: 4px; }
.tile.empty .tile-body { color: var(--text-mute); font-size: 12px; display: block; padding-top: 20px; }

.rail { padding-bottom: 8px; }
.rail-block { padding: 10px 12px; border-bottom: var(--bezel); }
.rail-block:last-child { border-bottom: 0; }
.rail h3 { margin: 0 0 8px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.rail .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: #efe8d4; }
.brief-full, .brief-excerpt {
  color: #ddd6c6;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow: visible;
  max-height: none;
}
.brief-excerpt { white-space: normal; }

.dock-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 16px; margin-top: 16px; }
.dock-list { padding: 8px 12px 12px; min-height: 48px; }
.dock-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-family: var(--font-num); font-size: 12px; }
.dock-item select, .pair-form select { background: var(--inset); border: var(--bezel); padding: 4px 6px; }

.add-station, .pair-form { padding: 0 12px 12px; display: grid; gap: 8px; }
.add-station label, .pair-form label { display: grid; gap: 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.add-station input, .pair-form input, select {
  background: var(--inset); border: var(--bezel); padding: 7px 8px; border-radius: 1px;
}
.add-station input:focus, .pair-form input:focus, select:focus { outline: 1px solid var(--accent-2); }

.btn, button[type="submit"], button.btn {
  background: var(--accent-dim);
  border: 1px solid var(--accent-2);
  color: #efe8d4;
  padding: 7px 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
  cursor: pointer;
}
.btn.ghost, button.ghost { background: transparent; border-color: var(--hairline); color: var(--text-dim); }
.btn:hover, button[type="submit"]:hover { border-color: var(--accent); }

.station-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: 16px; }
.station-lower { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.gauge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 14px; }
.gauge { background: var(--inset); border: var(--bezel); padding: 12px; min-height: 88px; }
.gauge .k { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); }
.gauge .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 28px; margin-top: 6px; color: #f2ead6; }
.gauge .u { font-size: 11px; color: var(--text-dim); }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 12px; }
.stat-strip div { background: var(--inset); padding: 6px; border: var(--bezel); }
.stat-strip .k { font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.stat-strip .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.chart-host { min-height: 160px; height: auto; padding: 8px 12px 16px; overflow: visible; min-width: 0; }
.chart-host.tall { min-height: 260px; }
.chart-host.compact { min-height: 120px; }
.chart-host:has(.empty-note) { min-height: 0; height: auto; }
.chart-host .uplot { display: block; max-width: 100%; }
.event-list, .envelope-list { max-height: 280px; overflow: auto; padding: 8px 12px; font-family: var(--font-num); font-size: 11px; }
.event-list div, .envelope-list details { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.hint { font-size: 11px; color: var(--text-mute); margin: 0; }

.lab-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; align-items: end; }
.lab-controls label { display: grid; gap: 3px; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.lab-controls select, .lab-controls input { background: var(--inset); border: var(--bezel); padding: 5px 7px; min-width: 90px; }
.lab-controls select[multiple] { min-width: 200px; min-height: 64px; }
.lab-root { display: grid; gap: 22px; }
.lab-panel { padding-bottom: 4px; overflow: visible; }
.lab-panel > .panel-hd {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #e8e2d4;
  padding: 12px 16px 10px;
}
.lab-panel > .panel-hd .dim {
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
}
.lab-panel .panel-body { padding: 12px 16px 18px; }
.table-wrap { overflow: auto; }
table.dense { width: 100%; border-collapse: collapse; font-size: 12px; }
table.dense th { text-align: left; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); padding: 6px 8px; border-bottom: var(--bezel); }
table.dense td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
table.dense tr:hover td { background: rgba(201,151,58,0.05); }

.matrix { display: grid; gap: 2px; }
.matrix-cell { min-width: 36px; height: 28px; display: grid; place-items: center; font-family: var(--font-num); font-size: 10px; background: var(--inset); }
.heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.heat i { display: block; aspect-ratio: 1; background: #1a1c18; }
.small-multiples { display: grid; grid-template-columns: 1fr; gap: 12px; }
.scatter-host, .heat-host { height: 320px; position: relative; }
canvas.plot-canvas { width: 100%; height: 100%; display: block; }

.hourly-scroll { display: grid; gap: 10px; }
.hour-card { padding: 10px 12px; }
.hour-card .meta { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.hour-card.failed { opacity: 0.75; }
.brief-body { padding: 14px 16px 18px; white-space: pre-wrap; overflow: visible; max-height: none; font-size: 13.5px; line-height: 1.55; color: #ddd6c6; }
.hour-card .brief-body { padding: 4px 0 0; font-size: 13px; }
.brief-pre { margin: 0; padding: 12px; overflow: auto; max-height: 480px; font-family: var(--font-num); font-size: 11px; background: var(--inset); color: #c8c2b4; }
.chip { display: inline-block; padding: 2px 6px; border: 1px solid var(--hairline); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }

.uplot { font-family: var(--font-num); color: var(--text-dim); max-width: 100%; }
.u-wrap { max-width: 100%; }
.u-legend {
  font-size: 11px;
  color: var(--text-dim) !important;
  margin-top: 8px !important;
  line-height: 1.45;
  display: flex !important;
  flex-wrap: wrap;
  gap: 2px 4px;
  max-width: 100%;
}
.u-legend tr { display: inline-flex !important; align-items: baseline; margin-right: 14px; margin-bottom: 4px; max-width: 100%; }
.u-legend th, .u-legend td { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.u-title { color: var(--text-dim); }
.u-cursor-x { border-right: 1px solid rgba(232, 226, 212, 0.45) !important; }
.u-cursor-y { border-bottom: 1px dashed rgba(232, 226, 212, 0.28) !important; }
.u-cursor-pt { border: 1.5px solid #efe8d4 !important; }
.u-tooltip {
  position: fixed;
  left: 0; top: 0;
  z-index: 80;
  min-width: 148px;
  max-width: 260px;
  padding: 7px 9px 6px;
  background: #121416;
  border: 1px solid var(--hairline-bright);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  font-size: 11px;
  line-height: 1.4;
}
.u-tooltip.is-locked { box-shadow: 0 0 0 1px var(--accent), 0 8px 22px rgba(0, 0, 0, 0.55); }
.u-tooltip .tt-time { color: #efe8d4; font-family: var(--font-num); margin-bottom: 5px; }
.u-tooltip .tt-row { display: flex; justify-content: space-between; gap: 14px; padding: 1px 0; }
.u-tooltip .tt-name { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); min-width: 0; }
.u-tooltip .tt-name i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.u-tooltip .tt-val { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: #efe8d4; white-space: nowrap; }
.u-tooltip .tt-hint { margin-top: 5px; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }

.chart-caption {
  margin: 8px 0 0;
  max-width: 72ch;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.45;
}
.lab-panel .chart-caption { padding: 4px 0 0; }
.compare-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 10px;
}
.compare-card {
  background: var(--inset);
  border: var(--bezel);
  padding: 10px 12px;
}
.compare-card .k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.compare-card .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 22px; color: #efe8d4; margin-top: 4px; }
.compare-card .u { font-size: 11px; color: var(--text-dim); margin-left: 6px; }
.compare-card .gloss { margin: 4px 0 0; font-size: 12px; color: var(--text-dim); }

.heat-block, .hist-block { margin-bottom: 16px; }
.heat-hours {
  display: grid;
  grid-template-columns: 36px repeat(24, 1fr);
  gap: 2px;
  font-size: 9px;
  color: var(--text-mute);
  margin-bottom: 2px;
}
.heat-hours span { text-align: center; }
.heat-row { display: grid; grid-template-columns: 36px 1fr; gap: 2px; align-items: center; margin-bottom: 2px; }
.heat-dow { font-size: 10px; color: var(--text-dim); }
.hist { display: flex; gap: 2px; align-items: flex-end; height: 88px; }
.hist i { flex: 1; min-width: 0; background: var(--accent); opacity: 0.85; }
.hist-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-mute); margin-top: 4px; font-family: var(--font-num); }
.flux-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 4px; font-size: 11px; color: var(--text-dim); }
.flux-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flux-legend i { width: 10px; height: 8px; display: inline-block; }

.empty-note { color: var(--text-mute); padding: 12px; font-size: 12px; }

.tile-outdoor { background: linear-gradient(180deg, #12181c, #101214); }
.tile-outdoor .tile-name { color: #c5d4dc; }
.tile-ecobee { background: linear-gradient(180deg, #141816, #101210); }
.tile-ecobee .tile-name { color: #d4d8c8; }
.cooling-strip { margin: 16px 0 0; }
.cooling-body { display: grid; grid-template-columns: 280px 1fr; gap: 8px; align-items: center; }
.now-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.now-row .cooling-strip, .now-row .flux-strip { margin: 0; }
.now-row .cooling-body { grid-template-columns: 1fr; }
.now-row .stat-strip { grid-template-columns: repeat(3, 1fr); }
.lead-block { padding: 10px 12px 0; }
.hero-num { display: flex; align-items: baseline; gap: 8px; }
.hero-num .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 32px; color: #f2ead6; line-height: 1.1; }
.hero-num .u { font-size: 12px; color: var(--text-dim); }
.lead-sentence { margin: 0; padding: 8px 12px 4px; max-width: 72ch; color: var(--text-dim); font-size: 13px; line-height: 1.45; }
.crumb { margin: 0 0 6px; font-size: 12px; color: var(--text-dim); }
.lab-footer { margin-top: 8px; }
.inline-ops { margin-top: 10px; }
.inline-ops > summary {
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  list-style: none;
}
.inline-ops > summary::-webkit-details-marker { display: none; }
.inline-ops > summary::before { content: "▸ "; color: var(--accent); }
.inline-ops[open] > summary::before { content: "▾ "; }
.house-adv { margin: 8px 0 16px; }
.house-adv > summary {
  cursor: pointer;
  padding: 8px 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  list-style: none;
}
.house-adv > summary::-webkit-details-marker { display: none; }
.house-adv > summary::before { content: "▸ "; color: var(--accent); }
.house-adv[open] > summary::before { content: "▾ "; }
.station-hero { padding: 12px 14px 4px; }
.station-more { padding: 0 8px 12px; }
.more-block { margin-top: 16px; padding: 0 14px 8px; }
.more-block > summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  list-style: none;
}
.more-block > summary::-webkit-details-marker { display: none; }
.more-block > summary::before { content: "▸ "; color: var(--accent); }
.more-block[open] > summary::before { content: "▾ "; }
.more-block .dock-row { margin-top: 0; }
.lab-details { padding: 0 16px 12px; }
.lab-details > summary {
  cursor: pointer;
  padding: 12px 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #e8e2d4;
  list-style: none;
}
.lab-details > summary .dim { font-size: 11px; }
.lab-details > summary::-webkit-details-marker { display: none; }
.lab-details > summary::before { content: "▸ "; color: var(--accent); }
.lab-details[open] > summary::before { content: "▾ "; }
.lab-details .panel-body { padding: 4px 0 16px; display: grid; gap: 18px; }
.lab-nums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
  margin: 0 0 8px;
}
.num-card {
  background: var(--inset);
  border: var(--bezel);
  padding: 10px 12px;
}
.num-card .k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.num-card .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 20px; color: #efe8d4; margin-top: 4px; }
.num-card .u { font-size: 11px; color: var(--text-dim); margin-left: 4px; }
.lab-station-filter { min-width: 200px; }
.lab-station-filter > summary {
  cursor: pointer;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  list-style: none;
  padding-bottom: 4px;
}
.lab-station-filter > summary::-webkit-details-marker { display: none; }
.house-form { padding: 0 14px 16px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 10px 0 16px; }
.house-form label, .floor-card label { display: grid; gap: 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.house-form input, .floor-card input[type="number"] { background: var(--inset); border: var(--bezel); padding: 7px 8px; }
.form-actions { display: flex; align-items: center; gap: 16px; }
.house-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.house-floors, .house-assign, .house-zones, .house-rooms, .house-openings, .house-exhausts, .house-ecobee { margin-top: 16px; padding: 0 14px 16px; }
.eco-pin { padding: 12px 0; }
.eco-pin-code { font-family: var(--font-num); font-size: 36px; letter-spacing: 0.18em; color: #efe8d4; }
.eco-pin p { margin: 8px 0 0; color: var(--text-dim); }
.eco-login { display: grid; gap: 10px; max-width: 420px; padding: 8px 0 12px; }
.eco-login label { display: grid; gap: 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.eco-login input { background: var(--inset); border: var(--bezel); padding: 7px 8px; color: inherit; }
.exhaust-list { display: grid; gap: 6px; padding: 8px 0; }
.exhaust-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 10px; background: var(--inset); border: var(--bezel); }
.exhaust-row.on { box-shadow: inset 3px 0 0 var(--accent); }
.exhaust-row .num { font-family: var(--font-num); }
.floor-hint { padding: 0 2px 8px; }
.floor-actions { padding-bottom: 8px; }
.floor-card { margin: 10px 0; padding: 0 12px 12px; }
.floor-card-hd { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0 6px; }
.floor-name { background: transparent; border: 0; border-bottom: var(--bezel); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; min-width: 140px; }
.floor-slug { background: var(--inset); border: var(--bezel); padding: 2px 6px; width: 90px; }
.floor-card-actions { display: flex; gap: 6px; }
.chk-row { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 0 8px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.form-grid.tight { padding-top: 4px; }
.ach50-field input { font-size: 22px; font-family: var(--font-num); padding: 10px 12px; }
.ach50-derived { font-family: var(--font-num); font-size: 13px; padding: 0 0 12px; }
.house-form select { background: var(--inset); border: var(--bezel); padding: 7px 8px; color: inherit; }
.assign-list { padding: 8px 0 4px; }
.house-assign .dock-item { padding: 8px 0; }
.assign-table { margin: 4px 0 8px; }
.assign-table select { background: var(--inset); border: var(--bezel); padding: 5px 8px; min-width: 160px; color: inherit; }
.assign-table select:disabled { opacity: 0.7; }

.flux-strip { margin: 16px 0 0; }
.flux-stack { padding: 10px 14px 14px; display: grid; gap: 0; }
.flux-floor {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr 0.8fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--inset);
  border: var(--bezel);
}
.flux-floor.into { box-shadow: inset 3px 0 0 var(--accent); }
.flux-floor.out { box-shadow: inset 3px 0 0 #6aa8c2; }
.flux-name { letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; color: #e8e2d4; }
.flux-t, .flux-q, .flux-den { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.flux-q { font-size: 18px; color: #efe8d4; }
.flux-riser {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 4px 0;
  font-family: var(--font-num); font-size: 12px;
  color: var(--accent);
}
.flux-riser.down { color: #6aa8c2; }
.flux-sankey-row { padding: 8px 0; }
.flux-bars { display: flex; gap: 3px; height: 10px; margin-top: 4px; }
.flux-bars i { display: block; height: 100%; min-width: 2px; }
.flux-copy { padding: 0 0 8px; max-width: 80ch; }
.tend-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
.zone-strip { margin: 16px 0 0; }
.zone-table input, .zone-table select { background: var(--inset); border: var(--bezel); padding: 4px 6px; width: 100%; font-size: 12px; }
.zone-table input[type="checkbox"] { width: auto; }
.zone-row-actions { display: flex; gap: 4px; white-space: nowrap; }
.zone-floor { grid-template-columns: 1.2fr 0.7fr 1fr 1fr auto; }
.zone-env { font-family: var(--font-num); font-size: 11px; white-space: nowrap; }
.zone-env.out { color: #6aa8c2; }
.zone-env.in { color: var(--accent); }

/* ---- In-page sub-navigation (sticky tab rail) ---- */
.subnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 -22px 16px;
  padding: 8px 22px;
  background: linear-gradient(180deg, rgba(12,13,15,0.97), rgba(9,10,11,0.97));
  border-bottom: var(--bezel);
  backdrop-filter: blur(4px);
}
.subnav-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius);
}
.subnav-tab:hover { color: var(--text); border-color: var(--hairline); }
.subnav-tab.is-on {
  color: var(--text);
  border-color: var(--hairline);
  background: var(--accent-dim);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---- Sparklines ---- */
.spark { display: block; width: 100%; height: 100%; }
.tile-spark { height: 30px; padding: 0 12px; }
.gauge-spark { height: 24px; margin-top: 8px; }

/* ---- Station tile hierarchy: one hero reading, small secondaries ---- */
.tile-hero { display: flex; align-items: baseline; gap: 8px; padding: 2px 12px 4px; }
.tile-hero .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 34px; letter-spacing: -0.02em; color: #f2ead6; line-height: 1.1; }
.tile-hero .u { font-size: 13px; color: var(--text-dim); }
.tile-hero .k { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.tile-secondaries { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 4px 12px 6px; }
.tile-secondaries .metric { flex-direction: row; align-items: baseline; gap: 5px; }
.tile-secondaries .metric .v { font-size: 13px; color: #ddd6c6; }
.tile-secondaries .metric .u { font-size: 9px; margin-left: 2px; }
.tile-seen { padding: 2px 12px 0; font-size: 10px; color: var(--text-mute); }
.tile-seen.skew, .lead-sentence.skew { color: var(--text-dim); }
.tile-skew { box-shadow: inset 0 -2px 0 var(--hairline-bright); }

/* ---- Rail as scannable summary cards ---- */
.rail-block .more { display: block; margin-top: 8px; font-size: 11px; }
.rail-lead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.rail-lead .v { font-family: var(--font-num); font-size: 22px; color: #efe8d4; }
.rail-lead .u { font-size: 10px; color: var(--text-dim); }

/* ---- Lab sections ---- */
.lab-section-note { margin: 0 0 18px; max-width: 68ch; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; }
.lab-stack { display: grid; gap: 18px; }

/* ---- Gauges with sparks + node-health chips ---- */
.gauge .trend { font-size: 11px; font-family: var(--font-num); margin-left: 6px; }
.gauge .trend.up { color: var(--error); }
.gauge .trend.down { color: #6aa8c2; }
.node-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.node-chips .chip { color: var(--text-dim); }

/* ---- House tab panels ---- */
.house-tabs-body > [data-tabpanel] { margin-top: 0; }
.house-tabs-body > [data-tabpanel][hidden] { display: none !important; }

.pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(4, 5, 6, 0.72);
  padding: 18px;
}
.pin-dialog {
  width: min(360px, 100%);
  padding: 16px 16px 14px;
}
.pin-dialog h2 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ece8de;
}
.pin-label {
  display: grid;
  gap: 4px;
  margin: 12px 0 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pin-label input {
  background: var(--inset);
  border: var(--bezel);
  padding: 8px 10px;
  letter-spacing: 0.28em;
  font-family: var(--font-num);
  font-size: 18px;
}
.pin-label input:focus { outline: 1px solid var(--accent-2); }
.pin-error { color: var(--error); font-size: 12px; margin: 0 0 10px; }
.pin-dialog .form-actions { justify-content: flex-end; }

@media (max-width: 980px) {
  .mast { grid-template-columns: 1fr; }
  .overview-grid, .dock-row, .station-layout, .station-lower, .cooling-body, .house-lower, .now-row, .compare-pair { grid-template-columns: 1fr; }
  .flux-floor { grid-template-columns: 1fr 1fr; }
  .nav { flex-wrap: wrap; }
  .subnav { margin: 0 -22px 14px; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
}