/* ===========================================================================
   SONIC Gas Level — glassmorphism dashboard
   Palette: dark tech slate + SONIC red (#E42C2F) + status green/amber/red.
   Type: Fira Sans (UI) / Fira Code (figures), self-hosted.
   =========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/vendor/fonts/fira-sans/fira-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2190-21BB, U+2212;
}
@font-face {
  font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/vendor/fonts/fira-sans/fira-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2190-21BB, U+2212;
}
@font-face {
  font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/vendor/fonts/fira-sans/fira-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2190-21BB, U+2212;
}
@font-face {
  font-family: 'Fira Code'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/vendor/fonts/fira-code/fira-code-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2190-21BB, U+2212;
}
@font-face {
  font-family: 'Fira Code'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/vendor/fonts/fira-code/fira-code-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2190-21BB, U+2212;
}

/* ---------- tokens ---------- */
:root {
  /* surfaces */
  --bg:            #080c17;
  --bg-2:          #0f172a;
  --card:          #1b2336;
  --fg:            #f8fafc;
  --fg-muted:      #a7b2c6;
  --fg-dim:        #7c8aa3;
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);

  /* brand + status */
  --brand:         #e42c2f;
  --brand-soft:    rgba(228, 44, 47, 0.16);
  --ok:            #22c55e;
  --warn:          #f59e0b;
  --crit:          #ef4444;
  --offline:       #64748b;
  --info:          #38bdf8;

  /* glass recipe */
  --glass-bg:      rgba(27, 35, 54, 0.55);
  --glass-bg-2:    rgba(27, 35, 54, 0.38);
  --glass-blur:    18px;
  --glass-shine:   linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 42%);
  --shadow-lg:     0 24px 60px -24px rgba(0, 0, 0, 0.85), 0 2px 0 rgba(255,255,255,0.05) inset;
  --shadow-md:     0 12px 32px -16px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255,255,255,0.05) inset;

  /* dense dashboard spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px;

  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-pill: 999px;

  --font-ui:   'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --dur-fast: 140ms; --dur: 220ms; --dur-slow: 420ms;
  --ease: cubic-bezier(0.22, 0.68, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* The UA rule for [hidden] is `display: none` at the lowest specificity, so any
   class here that sets display (grid/flex) would silently defeat it. Several
   elements are shown and hidden from script via the hidden attribute, so this
   has to win. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 100;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: var(--space-4); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.muted { color: var(--fg-muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- ambient background ---------- */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--bg); }
.aurora__blob {
  position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.42;
  will-change: transform;
}
.aurora__blob--1 {
  width: 44vw; height: 44vw; left: -8vw; top: -12vw;
  background: radial-gradient(circle, rgba(228,44,47,0.20), transparent 70%);
  animation: drift1 34s var(--ease) infinite alternate;
}
.aurora__blob--2 {
  width: 38vw; height: 38vw; right: -6vw; top: 8vh;
  background: radial-gradient(circle, rgba(86,132,190,0.20), transparent 70%);
  animation: drift2 44s var(--ease) infinite alternate;
}
.aurora__blob--3 {
  width: 34vw; height: 34vw; left: 32vw; bottom: -14vw;
  background: radial-gradient(circle, rgba(34,197,94,0.22), transparent 68%);
  animation: drift3 52s var(--ease) infinite alternate;
}
.aurora__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
}
@keyframes drift1 { to { transform: translate3d(8vw, 10vh, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-10vw, 14vh, 0) scale(1.2); } }
@keyframes drift3 { to { transform: translate3d(6vw, -12vh, 0) scale(1.1); } }

/* ---------- glass surface ---------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
/* Light source: a single highlight sweeping the top-left edge. */
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--glass-shine); pointer-events: none;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06); color: var(--fg);
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover:not(:disabled) { background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary {
  background: linear-gradient(135deg, var(--brand), #b31f22);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 8px 22px -10px rgba(228, 44, 47, 0.9);
}
.btn--primary:hover:not(:disabled) { background: linear-gradient(135deg, #f0393c, #c42326); }

.btn--ghost { background: rgba(255,255,255,0.04); }
.btn--danger-ghost { border-color: rgba(239,68,68,0.45); color: #fca5a5; background: rgba(239,68,68,0.08); }
.btn--danger-ghost:hover:not(:disabled) { background: rgba(239,68,68,0.18); }
.btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: 0.875rem; }
.btn--icon { min-height: 40px; width: 40px; padding: 0; border-radius: 50%; }
.btn.is-busy { pointer-events: none; opacity: 0.7; }

.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
}
.topbar__brands { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.brandmark { height: 62px; width: auto; display: block; }
.brand-divider { width: 1px; height: 48px; background: var(--border-strong); }
.topbar__actions { display: flex; align-items: center; gap: var(--space-3); }
.builder-link { text-decoration: none; }

/* client logo slot */
.client-slot { display: flex; align-items: center; gap: var(--space-2); }
.client-slot__img { height: 62px; width: auto; max-width: 260px; object-fit: contain; display: block; }
.client-slot__empty {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03); color: var(--fg-muted);
  font-size: 0.875rem; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.client-slot__empty:hover { border-color: var(--brand); color: var(--fg); background: var(--brand-soft); }
.client-slot__edit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255,255,255,0.06);
  color: var(--fg-muted); cursor: pointer; transition: all var(--dur) var(--ease);
}
.client-slot__edit:hover { color: var(--fg); background: rgba(255,255,255,0.14); }

/* poll chip */
.poll-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04); font-size: 0.8125rem; color: var(--fg-muted);
}
.poll-chip__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
  animation: pulse 2.6s var(--ease) infinite;
}
.poll-chip[data-state='off'] .poll-chip__dot { background: var(--offline); box-shadow: none; animation: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,0.04); } }

/* ---------- layout ---------- */
main { max-width: 1480px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); }

.section { margin-top: var(--space-6); }
.section__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.section__head h2 { font-size: 1.25rem; letter-spacing: -0.01em; }

/* ---------- hero ---------- */
/* The two 3D stages share the top row and get equal room; the readings and
   the device list sit underneath them. */
.stage-row {
  display: grid; gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-5);
}
.stage-row.has-building { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.detail-row {
  display: grid; gap: var(--space-4);
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  margin-top: var(--space-4);
  align-items: start;
}
.overview-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.overview-col .section__head { margin: 0; }

.hero__stage {
  position: relative; overflow: hidden; min-height: 460px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(228,44,47,0.16), transparent 70%),
    var(--glass-bg-2);
}
#tankCanvas { display: block; width: 100%; height: 100%; min-height: 460px; touch-action: none; cursor: grab; }
#tankCanvas:active { cursor: grabbing; }

/* Scrim behind the overlay text. The tank is centred in the canvas, so on
   narrow cards the title would otherwise sit straight on top of the dome. */
.hero__stage::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 45%; z-index: 1;
  background: linear-gradient(to bottom, rgba(8, 12, 23, 0.8), rgba(8, 12, 23, 0) 100%);
  pointer-events: none;
}

.stage__overlay { position: absolute; z-index: 2; pointer-events: none; }
.stage__overlay--tl { top: var(--space-5); left: var(--space-5); max-width: 62%; }
.stage__overlay--br { right: var(--space-5); bottom: var(--space-5); }
.stage__eyebrow {
  display: block; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: var(--space-1);
}
.stage__title { font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; }
.stage__sub { font-size: 0.875rem; color: var(--fg-muted); font-family: var(--font-mono); }
.stage__hint {
  position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%);
  font-size: 0.75rem; color: var(--fg-dim); pointer-events: none;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
.hero__stage:hover .stage__hint { opacity: 1; }

.stage__loading {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 3;
  background: rgba(8, 12, 23, 0.55); backdrop-filter: blur(4px);
  transition: opacity var(--dur-slow) var(--ease);
}
.spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18); border-top-color: var(--brand);
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* status pill */
.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  background: rgba(8,12,23,0.65); border: 1px solid var(--border-strong);
  font-size: 0.8125rem; font-weight: 500; backdrop-filter: blur(8px);
}
.status-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--offline); flex: none; }
.status-pill[data-status='online']  { border-color: rgba(34,197,94,0.5);  color: #86efac; }
.status-pill[data-status='online'] .status-pill__dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.status-pill[data-status='offline'] { border-color: rgba(100,116,139,0.6); color: #cbd5e1; }
.status-pill[data-status='error']   { border-color: rgba(239,68,68,0.5);  color: #fca5a5; }
.status-pill[data-status='error'] .status-pill__dot { background: var(--crit); }
.status-pill[data-status='pending'] { border-color: rgba(245,158,11,0.5); color: #fcd34d; }
.status-pill[data-status='pending'] .status-pill__dot { background: var(--warn); }

/* ---------- readout ---------- */
.hero__readout { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

.readout-level { padding: var(--space-5); }
.readout-level__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.readout-level__head h2 {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim);
}
.readout-level__value { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-3) 0; }
.metric-xl {
  font-family: var(--font-mono); font-size: clamp(2.75rem, 6vw, 3.75rem); font-weight: 500;
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.metric-unit { font-size: 1.25rem; color: var(--fg-muted); font-family: var(--font-mono); }
.readout-level__liters { margin-top: var(--space-3); font-size: 0.875rem; color: var(--fg-muted); }

.level-bar {
  position: relative; height: 10px; border-radius: var(--radius-pill); overflow: hidden;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border);
}
.level-bar__fill {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--level-color, var(--ok)), color-mix(in srgb, var(--level-color, var(--ok)) 60%, #fff));
  box-shadow: 0 0 14px -2px var(--level-color, var(--ok));
  transition: width var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease);
}

.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
/* Same box as before; only the content is centred. */
.stat {
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
  align-items: center; justify-content: center; text-align: center;
}
.stat__label { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); }
.stat__value { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat__value--date { font-size: 1.05rem; letter-spacing: -0.01em; }
.stat__value--gauge { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.gauge { display: inline-flex; align-items: center; color: var(--fg-muted); flex: none; }
.gauge__svg { height: 22px; width: auto; display: block; overflow: visible; }
.gauge__svg--battery { height: 20px; }
/* Fills animate so a change between refreshes is noticeable. */
.gauge__svg rect { transition: width var(--dur-slow) var(--ease), fill var(--dur-slow) var(--ease),
                               opacity var(--dur-slow) var(--ease); }
.stat__meta { font-size: 0.75rem; color: var(--fg-muted); min-height: 1.1em; }

/* ---------- device rail ---------- */
.history-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.history-actions .btn { min-height: 48px; font-weight: 500; }

.device-rail {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}

.device-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); text-align: left; cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  transform-style: preserve-3d;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.device-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.device-card[data-selected='true'] {
  border-color: var(--brand);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--brand), 0 10px 40px -18px rgba(228,44,47,0.8);
}
.device-card:focus-within { border-color: var(--border-strong); }

/* The select button's ::after covers the card, so the whole surface is
   clickable while only one real control sits in the accessibility tree. */
.device-card__select {
  appearance: none; border: 0; background: none; padding: 0; margin: 0;
  text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.device-card__select::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

.device-card__tools {
  position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 2;
  display: flex; gap: var(--space-1);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.device-card:hover .device-card__tools,
.device-card:focus-within .device-card__tools { opacity: 1; }
/* Touch devices have no hover, so never hide the controls there. */
@media (hover: none) { .device-card__tools { opacity: 1; } }

.device-card__tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(8, 12, 23, 0.82);
  color: var(--fg-dim); cursor: pointer; transition: all var(--dur) var(--ease);
}
.device-card__edit:hover { color: var(--fg); border-color: var(--border-strong); background: rgba(255,255,255,0.14); }
.device-card__delete:hover { color: #fca5a5; border-color: rgba(239,68,68,0.6); background: rgba(239,68,68,0.18); }
.device-card__top { display: flex; align-items: start; justify-content: space-between; gap: var(--space-2); }
.device-card__name { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.device-card__serial { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-dim); }
.device-card__level { display: flex; align-items: baseline; gap: var(--space-2); }
.device-card__pct {
  font-family: var(--font-mono); font-size: 1.75rem; font-weight: 500;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.device-card__unit { font-size: 0.875rem; color: var(--fg-muted); }
.device-card__meta { display: flex; justify-content: space-between; gap: var(--space-2);
                     font-size: 0.75rem; color: var(--fg-muted); }
.device-card__loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Keep the meta text clear of the delete control when one is present. */
.device-card:has(.device-card__tools:not([hidden])) .device-card__meta { padding-right: 76px; }

.empty-state { padding: var(--space-6); text-align: center; display: grid; gap: var(--space-2); justify-items: center; }
.empty-state__icon { width: 44px; height: 44px; fill: none; stroke: var(--fg-dim); stroke-width: 1.4; }
.empty-state h3 { font-size: 1.0625rem; }
.empty-state p { color: var(--fg-muted); font-size: 0.9375rem; }

/* ---------- history ---------- */
.range-group { display: inline-flex; gap: var(--space-1); padding: var(--space-1);
               border: 1px solid var(--border); border-radius: var(--radius-pill);
               background: rgba(255,255,255,0.04); }
.range-btn {
  min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--fg-muted); font-size: 0.875rem; font-weight: 500;
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.range-btn:hover { color: var(--fg); background: rgba(255,255,255,0.08); }
.range-btn.is-active { background: var(--brand); color: #fff; }

/* Graph and Readings live in dialogs, which share this head/toolbar pair. */
.modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
}
.modal__head h2 { font-size: 1.1875rem; }
.modal__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.modal__toolbar-right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.chart-wrap { position: relative; height: min(52vh, 460px); min-height: 240px; }
#historyChart { width: 100% !important; height: 100% !important; }
.chart-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--fg-dim); font-size: 0.9375rem;
}

.chart-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.chart-hint { font-size: 0.75rem; color: var(--fg-dim); margin-right: var(--space-1); }
#historyChart { cursor: grab; }
#historyChart:active { cursor: grabbing; }

/* Inline callout used for the re-link warning in the tank dialog. */
.callout {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3); border-radius: var(--radius-sm);
  font-size: 0.8125rem; line-height: 1.45;
}
.callout .icon { margin-top: 1px; }
.callout--warn {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.42);
  color: #fcd34d;
}

/* table */
.table-scroll { max-height: min(56vh, 520px); overflow: auto; border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; table-layout: fixed; }
.data-table .col-time { width: auto; }
.data-table .col-num  { width: 148px; }
.data-table td:first-child { white-space: nowrap; }
.data-table th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 500;
  white-space: nowrap;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim);
  padding: var(--space-2) var(--space-3);
  background: rgba(15, 23, 42, 0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid rgba(255,255,255,0.05);
  font-variant-numeric: tabular-nums;
}
/* Numeric columns align on the right so digits stack by place value. */
.data-table th.num, .data-table td.num { text-align: right; }
.data-table tbody tr:hover td { background: rgba(255,255,255,0.04); }
.data-table .mono { font-family: var(--font-mono); }
.data-table .empty-row td { text-align: center; color: var(--fg-dim); padding: var(--space-5); }

.tag {
  display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-pill);
  font-size: 0.6875rem; border: 1px solid var(--border); color: var(--fg-muted);
  background: rgba(255,255,255,0.05);
}


/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: 0.8125rem; font-weight: 500; color: var(--fg-muted);
               display: flex; justify-content: space-between; gap: var(--space-2); }
.req { color: var(--brand); }
.field input[type='text'], .field input[type='password'], .field input[type='number'] {
  min-height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: rgba(8, 12, 23, 0.6); color: var(--fg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input::placeholder { color: var(--fg-dim); }
.field input:focus { outline: none; border-color: var(--brand);
                     box-shadow: 0 0 0 3px var(--brand-soft); }
.field input[aria-invalid='true'] { border-color: var(--crit); }
.field__help { font-size: 0.75rem; color: var(--fg-dim); }
.field__error { font-size: 0.8125rem; color: #fca5a5; display: flex; gap: var(--space-2); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* ---- tank shape picker ---- */
.shape-field { border: 0; padding: 0; margin: 0; }
.shape-field legend {
  padding: 0; margin-bottom: var(--space-2);
  font-size: 0.8125rem; font-weight: 500; color: var(--fg-muted);
}
/* Ten shapes, so the picker wraps and scrolls rather than making the dialog
   taller than the window. */
.shape-picker {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  max-height: 290px; overflow-y: auto; padding: 2px;
}
.shape-option { cursor: pointer; }
.shape-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.shape-option__box {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: var(--space-3) var(--space-2); height: 100%;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: rgba(8, 12, 23, 0.45); text-align: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.shape-option:hover .shape-option__box { border-color: var(--fg-muted); }
.shape-option input:checked + .shape-option__box {
  border-color: var(--brand); background: var(--brand-soft);
  box-shadow: 0 0 0 1px var(--brand);
}
.shape-option input:focus-visible + .shape-option__box { outline: 2px solid #fff; outline-offset: 2px; }
.shape-option__art {
  width: 58px; height: 33px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; color: var(--fg-muted);
  margin-bottom: var(--space-1);
}
.shape-option input:checked + .shape-option__box .shape-option__art { color: var(--fg); }
.shape-option__label { font-size: 0.8125rem; font-weight: 500; line-height: 1.2; }
.shape-option__hint { font-size: 0.6875rem; color: var(--fg-dim); line-height: 1.25; }
.shape-option input:checked + .shape-option__box .shape-option__hint { color: var(--fg-muted); }

input[type='range'] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px;
  background: transparent; cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.14);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px;
  border-radius: 50%; background: var(--brand); border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
input[type='range']::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.14); }
input[type='range']::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--brand);
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ---------- modals ---------- */
.modal {
  border: 0; padding: 0; background: transparent; color: var(--fg);
  max-width: min(520px, calc(100vw - 32px)); width: 100%;
}
.modal--wide { max-width: min(760px, calc(100vw - 32px)); }
.modal--xl { max-width: min(1180px, calc(100vw - 32px)); }
.modal--xl .modal__inner { gap: var(--space-3); }
.modal::backdrop { background: rgba(4, 7, 14, 0.72); backdrop-filter: blur(6px); }
.modal__inner { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.modal__inner h2 { font-size: 1.1875rem; letter-spacing: -0.01em; }
.modal__lead { font-size: 0.875rem; color: var(--fg-muted); margin-top: calc(var(--space-2) * -1); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.modal__actions--split { justify-content: space-between; align-items: center; }
.modal[open] { animation: modal-in var(--dur) var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

/* ---------- logo editor ---------- */
.logo-editor { display: grid; gap: var(--space-4); }
.logo-drop {
  display: grid; gap: var(--space-2); justify-items: center; padding: var(--space-6);
  border: 2px dashed var(--border-strong); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03); cursor: pointer; text-align: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.logo-drop:hover, .logo-drop.is-over { border-color: var(--brand); background: var(--brand-soft); }
.logo-drop__icon { width: 36px; height: 36px; fill: none; stroke: var(--fg-dim); stroke-width: 1.5;
                   stroke-linecap: round; stroke-linejoin: round; }
.logo-drop p { font-size: 0.875rem; }

.logo-canvas-wrap { position: relative; display: grid; gap: var(--space-2); justify-items: center; }
#logoCanvas {
  width: 100%; max-width: 560px; height: auto; aspect-ratio: 16 / 7;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background:
    linear-gradient(45deg, rgba(255,255,255,0.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.045) 75%) 0 0/20px 20px,
    linear-gradient(45deg, rgba(255,255,255,0.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.045) 75%) 10px 10px/20px 20px,
    #0f172a;
  cursor: grab; touch-action: none;
}
#logoCanvas:active { cursor: grabbing; }
.logo-canvas__hint { font-size: 0.75rem; color: var(--fg-dim); }
.logo-controls { display: grid; gap: var(--space-3); }
.logo-controls__row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.logo-controls output { font-family: var(--font-mono); color: var(--fg); }

/* ---------- toasts ---------- */
.toasts {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 60;
  display: flex; flex-direction: column; gap: var(--space-2);
  max-width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  display: flex; align-items: start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: rgba(27, 35, 54, 0.92); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); backdrop-filter: blur(12px);
  font-size: 0.875rem; pointer-events: auto;
  animation: toast-in var(--dur) var(--ease);
}
.toast[data-kind='error']   { border-color: rgba(239,68,68,0.55); }
.toast[data-kind='success'] { border-color: rgba(34,197,94,0.55); }
.toast__icon { width: 18px; height: 18px; flex: none; margin-top: 2px;
               fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast[data-kind='error'] .toast__icon { stroke: var(--crit); }
.toast[data-kind='success'] .toast__icon { stroke: var(--ok); }
.toast[data-kind='info'] .toast__icon { stroke: var(--info); }
.toast.is-leaving { animation: toast-out var(--dur) var(--ease) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateX(24px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero__stage { min-height: 380px; }
  #tankCanvas { min-height: 380px; }
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  main { padding: var(--space-4) var(--space-3) var(--space-5); }
  .topbar { margin: var(--space-2) var(--space-3) 0; padding: var(--space-3); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Give the timestamp room: narrower figures and tighter cells. */
  .data-table { font-size: 0.8125rem; }
  .data-table .col-num { width: 74px; }
  .data-table th, .data-table td { padding: var(--space-2) var(--space-2); }
  .brandmark { height: 30px; }
  .client-slot__img { height: 30px; max-width: 120px; }
}

@media (max-width: 560px) {
  .topbar { flex-direction: column; align-items: stretch; }
  .topbar__brands { justify-content: space-between; }
  .topbar__actions { justify-content: space-between; }
  /* Taller than the desktop ratio would give, so the tank clears the title. */
  .hero__stage { min-height: 420px; }
  #tankCanvas { min-height: 420px; }
  .stage__overlay--tl { top: var(--space-4); left: var(--space-4); max-width: 88%; }
  .stage__overlay--br { right: var(--space-4); bottom: var(--space-4); }
  .field-row { grid-template-columns: 1fr; }
  .section__head { align-items: flex-start; }
  .readout-level { padding: var(--space-5); }
  .chart-wrap { height: 240px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .aurora__blob { animation: none; }
  .stage__hint { opacity: 1; }
}

/* ===========================================================================
   The building: a tile on the dashboard, and the same scene expanded
   =========================================================================== */

.section__meta { font-size: 0.8125rem; color: var(--fg-dim); font-family: var(--font-mono); }

/* Deliberately the same height as the tank stage, so the two read as a pair. */
.building-tile {
  position: relative; overflow: hidden; min-height: 460px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(61,165,255,0.14), transparent 70%),
    var(--glass-bg-2);
}
.building-tile__stage { position: absolute; inset: 0; }
#buildingCanvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#buildingCanvas:active { cursor: grabbing; }
.building-tile::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 42%; z-index: 1;
  background: linear-gradient(180deg, rgba(5,8,16,0.72), transparent);
  pointer-events: none;
}
.building-tile__expand {
  position: absolute; z-index: 3; top: var(--space-5); right: var(--space-5);
}
.building-tile .stage__loading { z-index: 4; }

/* ---------- expanded ---------- */
.building-full {
  position: fixed; inset: 0; z-index: 90;
  display: grid; grid-template-rows: auto 1fr;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #121a2b, #05080f 70%);
  animation: modal-in var(--dur) var(--ease);
}
.building-full__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); margin: var(--space-3) var(--space-3) 0;
  flex-wrap: wrap;
}
.building-full__title { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.building-full__title strong { font-size: 1rem; letter-spacing: -0.01em; }
.building-full__title span { font-size: 0.8125rem; color: var(--fg-dim); font-family: var(--font-mono); }
.building-full__tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.building-full__stage { position: relative; margin: var(--space-3); border-radius: var(--radius-lg); overflow: hidden; }
.building-full__stage #buildingCanvas { cursor: grab; }

.building-facts {
  position: absolute; z-index: 3; top: var(--space-4); left: var(--space-4);
  width: min(300px, calc(100% - var(--space-4) * 2));
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.building-facts__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--fg); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.building-facts__toggle .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.building-facts__toggle[aria-expanded='false'] .icon { transform: rotate(-90deg); }
.building-facts__body { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.building-facts__body p { font-size: 0.8125rem; color: var(--fg-muted); line-height: 1.55; }
.building-facts dl { display: grid; gap: var(--space-2); }
.building-facts dl > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.building-facts dt { font-size: 0.8125rem; color: var(--fg-dim); }
.building-facts dd { font-size: 0.8125rem; font-family: var(--font-mono); color: var(--fg); }
/* Out of the way while someone is walking around in there. */
.building-full.is-walking .building-facts { display: none; }

/* The floor stepper */
.seg {
  display: flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.05);
}
.seg__btn {
  min-width: 28px; min-height: 26px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--fg-muted); cursor: pointer; font-size: 0.9375rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg__btn:hover { background: rgba(255,255,255,0.1); color: var(--fg); }
.seg__value {
  min-width: 92px; text-align: center; font-size: 0.75rem; font-family: var(--font-mono);
  color: var(--fg); padding: 0 var(--space-2);
}

/* ---------- choosing who you walk as ---------- */
.avatar-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.avatar-opt {
  display: grid; justify-items: center; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--border); background: rgba(8,12,23,0.5);
  color: var(--fg-muted); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.avatar-opt:hover { border-color: var(--border-strong); color: var(--fg); }
.avatar-opt.is-active {
  border-color: var(--brand); background: var(--brand-soft); color: var(--fg);
  box-shadow: 0 0 0 1px var(--brand);
}
.avatar-opt__fig svg { width: 34px; height: 56px; fill: currentColor; }
.avatar-opt__label { font-size: 0.8125rem; font-weight: 500; }


@media (max-width: 1080px) {
  /* One column well before either stage gets too narrow to read. */
  .stage-row.has-building { grid-template-columns: minmax(0, 1fr); }
  .detail-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .building-tile { min-height: 320px; }
  .building-tile__expand { top: var(--space-4); right: var(--space-4); }

  .building-full__bar {
    margin: var(--space-2) var(--space-2) 0; padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  .building-full__title { width: 100%; }
  .building-full__title span { display: none; }
  .building-full__tools { width: 100%; justify-content: space-between; }
  .building-full__stage { margin: var(--space-2); }
  .seg__value { min-width: 68px; }

  /* A details card that covers the view is worse than one you open. */
  .building-facts { top: var(--space-3); left: var(--space-3); width: auto; right: var(--space-3); }
  .building-facts[data-open='false'] .building-facts__body { display: none; }

  .walk-hud { inset: auto var(--space-2) var(--space-2) var(--space-2); }
  .walk-hud__keys { gap: var(--space-3); font-size: 0.6875rem; }
  .walk-hud__where { font-size: 0.75rem; }
}

/* ---------- the walkthrough, shared by the configurator and the viewer ---------- */
canvas.is-walking { cursor: grab; }
canvas.is-walking:active { cursor: grabbing; }

.walk-hud {
  position: absolute; inset: auto var(--space-3) var(--space-3) var(--space-3);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; pointer-events: none; z-index: 3;
}
.walk-hud__keys { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.walk-hud__keys span {
  font-size: 0.75rem; color: var(--fg-muted);
  background: rgba(8, 12, 23, 0.72); border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
}
.walk-hud__keys b { color: var(--fg); font-weight: 600; }
.walk-hud__where {
  font-size: 0.8125rem; font-weight: 500; color: #fff;
  background: var(--brand); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
}

/* A crosshair makes first person feel like first person. */
.walk-hud::after {
  content: ''; position: fixed; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.walk-start {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: rgba(4, 7, 14, 0.6); backdrop-filter: blur(4px);
}
.walk-start__card {
  padding: var(--space-5); max-width: 380px; text-align: center;
  display: grid; gap: var(--space-3); justify-items: center;
}
.walk-start__card h2 { font-size: 1.125rem; }
.walk-start__card p { font-size: 0.875rem; color: var(--fg-muted); line-height: 1.5; }

/* ---------- thumbstick: walking without a keyboard ---------- */
.thumbstick {
  position: absolute; z-index: 6; left: var(--space-4); bottom: 92px;
  width: 112px; height: 112px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: rgba(8, 12, 23, 0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; touch-action: none;
}
.thumbstick.is-held { border-color: var(--brand); }
.thumbstick__knob {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22); border: 1px solid var(--border-strong);
  pointer-events: none;
}
.thumbstick.is-held .thumbstick__knob { background: var(--brand-soft); border-color: var(--brand); }

/* Tap targets on a phone: the overlay's buttons need to be thumb-sized. */
@media (pointer: coarse) {
  .building-full__tools .btn, .seg__btn { min-height: 40px; }
  .seg__btn { min-width: 40px; }
}

/* Hints follow the input the device actually has. */
.touch-only { display: none; }
@media (pointer: coarse) {
  .key-only { display: none; }
  .touch-only { display: inline-flex; }
  /* The stick owns the bottom-left corner, so the HUD steps aside. */
  .walk-hud { justify-content: flex-end; padding-left: 150px; }
}

/* A phone has no room for six labelled buttons; the icons carry it. */
@media (max-width: 560px) {
  .building-full__tools .btn .btn__text { display: none; }
  .building-full__tools .btn { padding-left: var(--space-3); padding-right: var(--space-3); }
  .building-full__tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .building-full__tools::-webkit-scrollbar { display: none; }
}

@media (max-width: 560px) {
  .seg__value { min-width: 38px; white-space: nowrap; padding: 0 var(--space-1, 4px); }
  .building-full__bar { padding: var(--space-2); }
  .building-full__title strong { font-size: 0.875rem; }
}

/* ===========================================================================
   One screen, no scrolling

   On a desktop with room for it, the dashboard is a fixed two-by-two: the
   tank and its readings above, the building and the devices below. The page
   itself stops scrolling and each tile takes its share of what is left after
   the header, so the 3D views grow and shrink with the window instead of
   pushing the rest of the page off the bottom.

   It is gated on height as well as width. Below either threshold the layout
   falls back to the ordinary scrolling page, because a 600px-tall window
   divided four ways is worse than a scrollbar.
   =========================================================================== */
@media (min-width: 1081px) and (min-height: 720px) {
  body.fits { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }

  /* The readings keep the shape they have always had — level, then the stats,
     then the two buttons — and simply move from the right of the tank to
     underneath it. The row is sized to that content and the stages take
     whatever is left, which is why they are the thing that flexes here. */
  body.fits main {
    flex: 1; min-height: 0; width: 100%;
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  body.fits .stage-row,
  body.fits .detail-row { min-height: 0; margin: 0; }

  /* Widths are chosen so nothing is left stranded: the readings take the room
     their four stats need in one row, and the device list takes the rest —
     narrow enough that a single card filling it still reads as a card. */
  body.fits .detail-row {
    grid-template-columns: minmax(420px, 1.35fr) minmax(260px, 1fr);
    align-items: start;
  }

  /* The block keeps its own shape — level on top, stats, then the two buttons
     — but in a wide column the stats go in one row instead of two by two.
     Squares that big read as empty boxes. */
  body.fits .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Both stages fill the row and the canvases follow them. */
  body.fits .hero__stage,
  body.fits .building-tile { min-height: 0; height: 100%; }
  body.fits #tankCanvas { min-height: 0; height: 100%; }

  /* Trim the readings a little so the stages keep the lion's share. */
  body.fits .hero__readout { gap: var(--space-3); }
  body.fits .readout-level { padding: var(--space-4); }
  body.fits .readout-level__value { margin: var(--space-2) 0; }
  body.fits .readout-level__liters { margin-top: var(--space-2); }
  body.fits .metric-xl { font-size: clamp(2rem, 3.8vh, 3rem); }
  body.fits .stat { padding: var(--space-3); }
  body.fits .history-actions .btn { min-height: 44px; }

  /* `auto-fit` rather than `auto-fill`: with one device the card takes the
     column instead of sitting in a corner of it, and with several they share
     it evenly. The padding is for the selected card's glow — a scrolling box
     clips the shadow flush with the card and the edges look cut off. */
  body.fits .overview-col,
  body.fits .overview-col--devices { min-height: 0; }
  body.fits .device-rail {
    min-height: 0; max-height: 100%; overflow-y: auto; align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    padding: 6px; margin: -6px;
  }

  body.fits .section__head { margin-bottom: 0; }
  body.fits .topbar { margin-bottom: 0; }
  body.fits .brandmark { height: clamp(40px, 5.2vh, 62px); }
  body.fits .brand-divider { height: clamp(32px, 4vh, 48px); }
}

/* ---------- thumbstick: walking without a keyboard ---------- */
.thumbstick {
  position: absolute; z-index: 6; left: var(--space-4); bottom: 92px;
  width: 112px; height: 112px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: rgba(8, 12, 23, 0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; touch-action: none;
}
.thumbstick.is-held { border-color: var(--brand); }
.thumbstick__knob {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22); border: 1px solid var(--border-strong);
  pointer-events: none;
}
.thumbstick.is-held .thumbstick__knob { background: var(--brand-soft); border-color: var(--brand); }

/* Tap targets on a phone: the overlay's buttons need to be thumb-sized. */
@media (pointer: coarse) {
  .building-full__tools .btn, .seg__btn { min-height: 40px; }
  .seg__btn { min-width: 40px; }
}

/* Hints follow the input the device actually has. */
.touch-only { display: none; }
@media (pointer: coarse) {
  .key-only { display: none; }
  .touch-only { display: inline-flex; }
  /* The stick owns the bottom-left corner, so the HUD steps aside. */
  .walk-hud { justify-content: flex-end; padding-left: 150px; }
}

/* A phone has no room for six labelled buttons; the icons carry it. */
@media (max-width: 560px) {
  .building-full__tools .btn .btn__text { display: none; }
  .building-full__tools .btn { padding-left: var(--space-3); padding-right: var(--space-3); }
  .building-full__tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .building-full__tools::-webkit-scrollbar { display: none; }
}

@media (max-width: 560px) {
  .seg__value { min-width: 38px; white-space: nowrap; padding: 0 var(--space-1, 4px); }
  .building-full__bar { padding: var(--space-2); }
  .building-full__title strong { font-size: 0.875rem; }
}

/* ===========================================================================
   One screen, no scrolling

   On a desktop with room for it, the dashboard is a fixed two-by-two: the
   tank and its readings above, the building and the devices below. The page
   itself stops scrolling and each tile takes its share of what is left after
   the header, so the 3D views grow and shrink with the window instead of
   pushing the rest of the page off the bottom.

   It is gated on height as well as width. Below either threshold the layout
   falls back to the ordinary scrolling page, because a 600px-tall window
   divided four ways is worse than a scrollbar.
   =========================================================================== */

/* The readings block has a natural height that does not care how tall the
   window is, so on a shorter screen it starts crowding the two stages out.
   Tighten it there — same arrangement, less air. */
@media (min-width: 1081px) and (min-height: 720px) and (max-height: 900px) {
  body.fits .hero__readout { gap: var(--space-2); }
  body.fits .readout-level { padding: var(--space-3) var(--space-4); }
  body.fits .readout-level__value { margin: 4px 0; }
  body.fits .readout-level__liters { margin-top: 4px; font-size: 0.8125rem; }
  body.fits .metric-xl { font-size: 2rem; }
  body.fits .stat-grid { gap: var(--space-2); }
  body.fits .stat { padding: var(--space-2) var(--space-3); }
  body.fits .stat__value { font-size: 1.3rem; }
  body.fits .stat__value--date { font-size: 0.9375rem; }
  body.fits .stat__meta { font-size: 0.6875rem; }
  body.fits .history-actions { gap: var(--space-2); }
  body.fits .history-actions .btn { min-height: 38px; }
}