/* Headlands · Demo home - the command console.
   Direction A: app shell (left rail + topbar + scrolling page), roomy sans
   type, soft 16px cards, cyan accent with per-system tints, ambient glows.
   Numbers and timestamps stay monospace - data reads like an instrument.

   THEMING: the entire look lives in this :root block ("Command" theme).
   Future themes = another 25-line [data-theme="…"] variant, nothing else. */

:root{
  --bg:#0a0e13; --bg2:#0d1218; --panel:#121922; --panel2:#16202b; --inset:#0d141c;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.045);
  --ink:#e8eef4; --dim:#aab6c4; --muted:#8b99a8; --faint:#5b6877;
  --accent:#29d3e6; --accent-2:#1aa8c4; --accent-soft:rgba(41,211,230,.10); --on-accent:#04121a;
  --water:#29d3e6; --water-dim:#1aa8c4; --water-soft:rgba(41,211,230,.10);
  --irr:#34d399; --irr-dim:#1f8f68; --irr-soft:rgba(52,211,153,.10);
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.10);
  --alert:#f87171; --alert-soft:rgba(248,113,113,.12);
  --ok:#34d399; --batt:#2dd4bf;
  --green:#34d399; --violet:#a78bfa; --blue:#60a5fa; --orange:#fb923c; --pink:#f472b6;
  --radius:16px; --radius-s:10px;
  --sidebar-w:236px; --topbar-h:64px;
  --mono:"JetBrains Mono","Cascadia Code",ui-monospace,"SF Mono",Consolas,Menlo,monospace;
  --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,Arial,sans-serif;
}

/* Light theme - same token surface. Toggled by the ◐ button (localStorage
   `theme`). Charts read these vars at render time, so they follow. */
:root[data-theme="light"]{
  --bg:#eef1f5; --bg2:#e7ebf1; --panel:#ffffff; --panel2:#f3f6f9; --inset:#e9edf2;
  --line:rgba(15,25,35,.10); --line2:rgba(15,25,35,.06);
  --ink:#16202b; --dim:#3d4a57; --muted:#5f6c7a; --faint:#94a0ac;
  --accent:#0e93ad; --accent-2:#0b7086; --accent-soft:rgba(14,147,173,.12);
  --water:#0e93ad; --water-dim:#0b7086; --water-soft:rgba(14,147,173,.12);
  --irr:#0f8a55; --irr-dim:#0c6e44; --irr-soft:rgba(15,138,85,.12);
  --warn:#9a6200; --warn-soft:rgba(154,98,0,.14);
  --alert:#c02323; --alert-soft:rgba(192,35,35,.12);
  --ok:#0f8a55; --batt:#0b7f75;
  --green:#0f8a55; --violet:#6d5bd0; --blue:#1d6fd0; --orange:#c05f10; --pink:#c02373;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
/* Keyboard focus is always visible - buttons, links, tabs, holdable tiles.
   :focus-visible excludes pointer clicks, so mouse/touch UX is unchanged; only
   keyboard/AT users get the ring. Inputs keep their own border+glow focus. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html{font-size:15px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
/* ambient corner glows - the command-center atmosphere */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(41,211,230,.07), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(167,139,250,.05), transparent 60%);
}
:root[data-theme="light"] body::before{
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(14,147,173,.06), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(109,91,208,.05), transparent 60%);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── header / status bar ──────────────────────────────────────────────── */
.page-header{border-bottom:1px solid var(--line);background:var(--inset)}
.page-header-inner{
  max-width:1160px;margin:0 auto;padding:.7rem 1rem .45rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.brand-name{margin:0;font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.brand-name a{color:var(--ink)}
.brand-name a:hover{text-decoration:none;opacity:.8}
.brand-sub{color:var(--muted);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:.15rem}

.live-indicator{display:flex;align-items:center;gap:.45rem;font-size:10.5px;color:var(--dim);letter-spacing:.08em}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px rgba(74,222,128,.8);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.live-label{text-transform:uppercase}
.live-time{color:var(--muted);font-variant-numeric:tabular-nums}

/* system status strip - populated by page JS */
.statusbar{
  max-width:1160px;margin:0 auto;padding:.3rem 1rem .55rem;
  display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.sb-item{display:flex;align-items:center;gap:.4rem}
.sdot{width:7px;height:7px;border-radius:50%;background:var(--faint);display:inline-block}
.sdot.on{background:var(--ok);box-shadow:0 0 5px rgba(74,222,128,.7)}
.sdot.off{background:var(--alert);box-shadow:0 0 5px rgba(248,113,113,.7)}
.sdot.warn{background:var(--warn);box-shadow:0 0 5px rgba(251,191,36,.7)}
.sb-state{color:var(--dim)}
.sb-state.attention{color:var(--warn)}
.sb-state.alert{color:var(--alert)}

.page-nav{
  max-width:1160px;margin:0 auto;padding:0 1rem;
  display:flex;align-items:stretch;gap:.1rem;
}
.nav-link{
  padding:.5rem .85rem;color:var(--muted);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;
  font-family:var(--mono);
}
.nav-link:hover{color:var(--ink);text-decoration:none}
.nav-link.active{color:var(--ink);border-bottom-color:var(--water)}
.theme-toggle{font-size:15px;line-height:1;padding:.4rem .6rem}
.nav-logout-form{margin-left:auto;display:flex}

/* ---- phone menu: button + full-screen tile overlay ---- */
.menu-btn{display:none;margin-left:auto;align-items:center;gap:6px;font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.4rem .7rem;cursor:pointer}
.menu-btn-ic{font-size:15px;line-height:1}
.menu-overlay{position:fixed;inset:0;z-index:200;background:var(--bg);display:none;flex-direction:column}
.menu-overlay.open{display:flex}
body.menu-open{overflow:hidden}
.menu-bar{display:flex;align-items:center;justify-content:space-between;padding:calc(1rem + env(safe-area-inset-top, 0px)) 1.1rem 1rem;border-bottom:1px solid var(--line)}
.menu-brand{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.menu-close{background:none;border:none;color:var(--ink);font-size:20px;line-height:1;cursor:pointer;padding:.2rem .4rem}
.menu-scroll{flex:1;overflow-y:auto;padding:0;display:flex;flex-direction:column}
.menu-grid{display:flex;flex-direction:column;gap:0;flex:1}
.menu-tile{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:14px;
  flex:1;min-height:64px;padding:18px 16px;border-bottom:1px solid var(--line2);background:transparent;
  color:var(--ink);text-decoration:none}
.menu-tile:hover{text-decoration:none}
.menu-tile.active{background:var(--water-soft)}
.menu-ic{font-size:1.5rem;line-height:1;flex:none}
.menu-lb{font-size:1.05rem;letter-spacing:.02em;color:var(--ink)}
.menu-tile.active .menu-lb{color:var(--water)}
.menu-foot{display:flex;align-items:center;gap:14px;padding:.9rem 1.1rem calc(.9rem + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--line)}
.menu-foot .nav-logout-form{margin-left:auto}

@media(max-width:640px){
  .menu-btn{display:inline-flex}
  .page-nav{display:none}
}
/* Kill the menu overlay only once the desktop rail (.snav, >=1100px) takes over.
   Below 1100 the hamburger is shown, so the overlay must stay usable - hiding it
   at 641px left every iPad (641-1099px) with a menu button that did nothing. */
@media(min-width:1100px){
  .menu-overlay{display:none !important}
}
.nav-logout{color:var(--faint)}
.nav-logout:hover{color:var(--dim)}

/* ── page shell ───────────────────────────────────────────────────────── */
main.console, main.irrigation{
  max-width:1160px;margin:0 auto;padding:.9rem 1rem 2rem;
}
.page-footer{
  max-width:1160px;margin:0 auto;padding:1rem;color:var(--faint);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border-top:1px solid var(--line2);
}

/* ── panels ───────────────────────────────────────────────────────────── */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.15rem;margin-bottom:.85rem;
}
.card-label{
  font-family:var(--sans);font-size:.95rem;font-weight:650;letter-spacing:0;text-transform:none;
  color:var(--ink);margin-bottom:.6rem;
}
.card-label-aux{color:var(--muted);font-weight:500;font-size:.75rem}

.grid-top{display:grid;grid-template-columns:minmax(280px,5fr) 7fr;gap:.7rem;margin-bottom:.7rem}
.grid-top .card{margin-bottom:0}

/* ── NOW panel ────────────────────────────────────────────────────────── */
.card-now{border-left:2px solid var(--water)}
.now-body{display:flex;align-items:baseline;gap:.5rem}
.now-gpm{font-size:44px;font-weight:600;line-height:1;color:var(--water);font-variant-numeric:tabular-nums}
.now-gpm.idle{color:var(--faint)}
.now-unit{color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.now-state{margin-top:.3rem;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.now-state.flowing{color:var(--water)}
.now-spark{margin-top:.6rem;height:40px}
.now-spark svg{width:100%;height:40px;display:block}
.now-meta{margin-top:.35rem;font-size:10.5px;color:var(--muted)}
.sensor-strip{display:flex;gap:.45rem;margin-top:.65rem;flex-wrap:wrap}
.sensor-pill{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:3px;padding:.15rem .5rem;background:var(--inset);
}
.sensor-pill.online{border-color:rgba(74,222,128,.35);color:var(--ok)}
.sensor-pill.offline{border-color:rgba(248,113,113,.4);color:var(--alert)}

/* away-mode toggle */
.away-row{display:flex;align-items:center;gap:.5rem;margin-top:.55rem}
.away-btn{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--inset);border:1px solid var(--line);border-radius:3px;color:var(--dim);
  padding:.2rem .55rem;cursor:pointer;
}
.away-btn:hover{color:var(--ink);border-color:var(--faint)}
.away-btn.on{border-color:rgba(251,191,36,.45);color:var(--warn)}

/* ── TODAY panel ──────────────────────────────────────────────────────── */
.today-total{font-size:30px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.today-total .unit, .week-total .unit{font-size:12px;color:var(--muted);margin-left:.35rem;letter-spacing:.08em;text-transform:uppercase}
.today-chart{margin-top:.5rem;height:140px}
.today-chart svg{width:100%;height:140px;display:block}
.today-axis{display:flex;justify-content:space-between;font-size:9.5px;color:var(--faint);margin-top:.2rem;letter-spacing:.06em}
.today-meta{margin-top:.4rem;font-size:10.5px;color:var(--muted)}

/* ── WEEK panel ───────────────────────────────────────────────────────── */
.week-header{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap}
.week-total{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
.week-change{display:flex;align-items:baseline;gap:.3rem;font-size:12px;color:var(--muted)}
.week-change.up .week-change-arrow,.week-change.up .week-change-pct{color:var(--alert)}
.week-change.down .week-change-arrow,.week-change.down .week-change-pct{color:var(--ok)}
.week-change-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.week-chart{margin-top:.55rem;height:130px}
.week-chart svg{width:100%;height:130px;display:block}
.week-stats{display:flex;gap:2rem;margin-top:.6rem;flex-wrap:wrap}
.week-stat-label{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.week-stat-value{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:.1rem}
.week-stat-aux{color:var(--muted);font-size:11px;font-weight:400}
.unit-sm{font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.week-meta{margin-top:.5rem;font-size:10.5px;color:var(--muted)}

/* ── month / budget strip ─────────────────────────────────────────────── */
.month-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.month-kpi{background:var(--inset);border:1px solid var(--line2);border-radius:4px;padding:.5rem .65rem}
.month-kpi-label{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.month-kpi-value{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:.15rem}
.month-kpi-aux{font-size:10px;color:var(--muted);margin-top:.1rem}
.budget-bar{height:7px;background:var(--line2);border-radius:4px;margin-top:.45rem;overflow:hidden}
.budget-fill{height:100%;border-radius:4px;background:var(--water)}
.budget-fill.warn{background:var(--warn)}
.budget-fill.over{background:var(--alert)}

/* ── usage explorer ───────────────────────────────────────────────────── */
.explorer-nav{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.4rem}
.exp-crumb{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:none;color:var(--water);cursor:pointer;padding:.1rem .2rem;
}
.exp-crumb:hover{text-decoration:underline}
.exp-crumb.exp-current{color:var(--ink);cursor:default;text-decoration:none}
.exp-sep{color:var(--faint);font-size:11px}
.exp-total{margin-left:auto;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.explorer-chart{height:180px}
.explorer-chart svg{width:100%;height:180px;display:block}
.exp-bar{cursor:pointer}
.exp-bar:hover{fill-opacity:1 !important;stroke:var(--water);stroke-width:1}
.explorer-meta{margin-top:.35rem;font-size:10.5px;color:var(--muted)}

/* ── alerts / notifications feed ──────────────────────────────────────── */
.alerts-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:none;padding:0;cursor:pointer;font-family:var(--mono);
}
.alerts-toggle:hover .card-label{color:var(--ink)}
.alerts-chevron{color:var(--muted);font-size:12px}
#alertsBody{margin-top:.55rem}
.alerts-list{list-style:none;margin:0;padding:0}
.alerts-list li{
  display:flex;gap:.7rem;align-items:baseline;
  padding:.4rem 0;border-bottom:1px solid var(--line2);font-size:12px;
}
.alerts-list li:last-child{border-bottom:none}
.alert-time{color:var(--muted);font-size:10.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.alert-sev{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:.05rem .4rem;border-radius:3px;white-space:nowrap}
.alert-sev.info{background:var(--water-soft);color:var(--water)}
.alert-sev.warn{background:var(--warn-soft);color:var(--warn)}
.alert-sev.alert{background:var(--alert-soft);color:var(--alert)}
.alert-msg{color:var(--dim)}
.alerts-empty{color:var(--muted);font-size:11.5px;padding:.3rem 0}

/* ── breakdown ────────────────────────────────────────────────────────── */
.breakdown-layout{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.breakdown-pie svg{display:block}
.breakdown-matrix{flex:1;min-width:260px}
.bd-matrix-head,.bd-matrix-row{
  display:grid;grid-template-columns:1fr 90px 80px;gap:.6rem;
  padding:.28rem 0;font-variant-numeric:tabular-nums;
}
.bd-matrix-head{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.bd-matrix-row{border-bottom:1px solid var(--line2);font-size:12px}
.bd-matrix-row:last-child{border-bottom:none}
.bd-matrix-row.alert .bd-cat{color:var(--alert)}
.bd-cat{display:flex;align-items:center;gap:.5rem;color:var(--dim)}
.bd-dot{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none}
.bd-gal{text-align:right}
.bd-delta{text-align:right;font-size:11px}
.bd-delta.up{color:var(--alert)} .bd-delta.down{color:var(--ok)} .bd-delta.flat{color:var(--muted)}
.bd-delta.new{color:var(--warn);letter-spacing:.08em}
.breakdown-empty{color:var(--muted);font-size:11.5px}
.breakdown-meta{margin-top:.5rem;font-size:10.5px;color:var(--muted)}

/* ── anomaly / correlation panel ──────────────────────────────────────── */
.card-anomaly{border-left:2px solid var(--faint)}
.card-anomaly.normal{border-left-color:var(--ok)}
.card-anomaly.attention{border-left-color:var(--warn);background:linear-gradient(90deg,var(--warn-soft),var(--panel) 30%)}
.card-anomaly.alert{border-left-color:var(--alert);background:linear-gradient(90deg,var(--alert-soft),var(--panel) 35%)}
.card-anomaly.alert .anomaly-icon{color:var(--alert);border-color:rgba(248,113,113,.5)}
.card-anomaly.alert .anomaly-label{color:var(--alert)}
.anomaly-status{display:flex;align-items:center;gap:.55rem}
.anomaly-icon{
  width:22px;height:22px;border-radius:50%;background:var(--inset);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--dim);flex:none;
}
.card-anomaly.attention .anomaly-icon{color:var(--warn);border-color:rgba(251,191,36,.4)}
.card-anomaly.normal .anomaly-icon{color:var(--ok);border-color:rgba(74,222,128,.35)}
.anomaly-label{font-size:13px;font-weight:600;letter-spacing:.04em}
.anomaly-description{color:var(--dim);font-size:12px;margin:.5rem 0 0}
.anomaly-meta{margin-top:.45rem;font-size:10.5px;color:var(--muted)}

/* ── irrigation ───────────────────────────────────────────────────────── */
.irrigation-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.7rem;flex-wrap:wrap}
.irrigation-summary-line{display:flex;gap:1.4rem;margin-top:.3rem;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.irrigation-stat span{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ctl-refresh{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:4px;
  padding:.4rem .8rem;cursor:pointer;
}
.ctl-refresh:hover{color:var(--ink);border-color:var(--faint)}

.tabs{display:flex;gap:.1rem;border-bottom:1px solid var(--line);margin-bottom:.8rem}
.tab{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem .85rem;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--muted);cursor:pointer;
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--irr)}

.control-warn-banner,.schedule-intro,.history-intro{
  font-size:11px;color:var(--muted);margin:0 0 .7rem;
}
.control-warn-banner code,.schedule-intro code,.history-intro code{
  background:var(--inset);border:1px solid var(--line2);border-radius:3px;padding:0 .3rem;font-size:10.5px;
}

.control-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem}
.ctl-zone{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.6rem .7rem;
  display:flex;flex-direction:column;gap:.45rem;
}
.ctl-zone.running{border-color:rgba(74,222,128,.45);background:linear-gradient(180deg,var(--irr-soft),var(--panel) 55%)}
.ctl-zone.suspended{border-color:rgba(251,191,36,.35)}
.ctl-zone-head{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start}
.ctl-zone-num{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ctl-zone-name{font-size:13px;font-weight:600;margin-top:.1rem}
.ctl-zone-state{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.35rem;white-space:nowrap}
.ctl-zone.running .ctl-zone-state{color:var(--irr)}
.ctl-zone.suspended .ctl-zone-state{color:var(--warn)}
.dot-running{width:7px;height:7px;border-radius:50%;background:var(--irr);display:inline-block;box-shadow:0 0 5px rgba(74,222,128,.7);animation:pulse 1.6s ease-in-out infinite}
.ctl-zone-meta{font-size:10.5px;color:var(--muted)}
.ctl-zone-actions{display:flex;gap:.4rem;align-items:center;margin-top:auto;flex-wrap:wrap}
.ctl-duration{
  font-family:var(--mono);font-size:11px;background:var(--inset);color:var(--ink);
  border:1px solid var(--line);border-radius:4px;padding:.3rem .4rem;
}
.ctl-btn{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:4px;padding:.35rem .8rem;cursor:pointer;border:1px solid var(--line);
  background:var(--panel2);color:var(--dim);
}
.ctl-btn-run{border-color:rgba(74,222,128,.4);color:var(--irr)}
.ctl-btn-run:hover{background:var(--irr-soft)}
.ctl-btn-stop{border-color:rgba(248,113,113,.45);color:var(--alert)}
.ctl-btn-stop:hover{background:var(--alert-soft)}
.ctl-btn-suspend{border-color:rgba(251,191,36,.35);color:var(--warn)}
.ctl-btn-suspend:hover{background:var(--warn-soft)}
.ctl-btn-resume{border-color:rgba(56,189,248,.4);color:var(--water)}
.ctl-btn-resume:hover{background:var(--water-soft)}

/* schedule - weekly cycle rows */
.schedule-cycle{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding:.5rem .65rem;background:var(--panel);border:1px solid var(--line);
  border-radius:6px;
}
.schedule-cycle-day{font-size:12.5px;font-weight:600}
.schedule-cycle-stats{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.schedule-cycle-est{color:var(--water);font-weight:600}
.schedule-cycle-toggle{
  margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid var(--line);border-radius:3px;color:var(--muted);
  padding:.15rem .5rem;cursor:pointer;
}
.schedule-cycle-toggle:hover{color:var(--ink);border-color:var(--faint)}
.schedule-cycle-detail{padding:.2rem .65rem .1rem;border-left:1px solid var(--line2);margin:0 0 0 .65rem}
.schedule-note{font-size:10.5px;color:var(--muted);margin:.2rem 0 1rem}

.schedule-group{margin-bottom:1rem}
.schedule-day{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:.25rem 0;border-bottom:1px solid var(--line);margin-bottom:.25rem;
}
.schedule-day-active{color:var(--irr)}
.schedule-item{
  display:grid;grid-template-columns:90px 1fr 70px;gap:.7rem;align-items:center;
  padding:.35rem 0;border-bottom:1px solid var(--line2);
}
.schedule-item:last-child{border-bottom:none}
.schedule-item-running{background:linear-gradient(90deg,var(--irr-soft),transparent 60%)}
.schedule-time{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.35rem}
.schedule-zone-name{font-size:12.5px;font-weight:600}
.schedule-zone-num{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.schedule-dur{font-size:11px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.schedule-empty{color:var(--muted);font-size:11.5px;padding:.4rem 0}

/* history */
.audit-list{list-style:none;margin:0;padding:0}
.audit-item{display:flex;gap:.8rem;padding:.4rem 0;border-bottom:1px solid var(--line2);font-size:12px}
.audit-item:last-child{border-bottom:none}
.audit-time{color:var(--muted);font-size:10.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.audit-desc{color:var(--dim)}
.audit-desc strong{color:var(--ink)}
.audit-err{color:var(--alert)}
.audit-empty{color:var(--muted);font-size:11.5px}

/* ── pending / roadmap ────────────────────────────────────────────────── */
.pending-sub{color:var(--muted);font-size:12px;margin:.2rem 0 1rem}
.pending-section-title{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:1.2rem 0 .4rem;padding-bottom:.25rem;border-bottom:1px solid var(--line);
}
.pending-list{list-style:none;margin:0;padding:0}
.pending-item{display:flex;gap:.7rem;align-items:baseline;padding:.4rem 0;border-bottom:1px solid var(--line2);font-size:12px;color:var(--dim)}
.pending-item:last-child{border-bottom:none}
.pending-item strong{color:var(--ink);font-weight:600}
.pending-status{
  flex:none;width:74px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:.1rem .35rem;border-radius:3px;text-align:center;
}
.pending-status.done{background:var(--irr-soft);color:var(--irr)}
.pending-status.partial{background:var(--warn-soft);color:var(--warn)}
.pending-status.pending{background:var(--inset);color:var(--muted);border:1px solid var(--line2)}

/* ── modal + toast ────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(4,6,9,.72);display:flex;align-items:center;justify-content:center;z-index:50}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.1rem 1.2rem;width:min(420px,90vw)}
.modal-title{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.modal-body{color:var(--dim);font-size:12.5px;margin:.6rem 0 .9rem}
.modal-body strong{color:var(--ink)}
.modal-actions{display:flex;gap:.5rem;justify-content:flex-end}
.modal-cancel,.modal-confirm{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:4px;padding:.45rem .9rem;cursor:pointer;
}
.modal-cancel{background:none;border:1px solid var(--line);color:var(--muted)}
.modal-cancel:hover{color:var(--ink)}
.modal-confirm{background:var(--irr-dim);border:1px solid var(--irr);color:#eafff2;font-weight:600}
.modal-confirm:hover{filter:brightness(1.15)}

.toast{
  position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);
  background:var(--panel2);border:1px solid rgba(74,222,128,.4);color:var(--ink);
  border-radius:6px;padding:.55rem 1rem;font-size:12px;z-index:60;
}
.toast.error{border-color:rgba(248,113,113,.5)}

/* ── login / MFA ──────────────────────────────────────────────────────── */
.page-login{background:var(--bg)}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.login-card{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:1.6rem 1.7rem;width:min(330px,92vw);
}
.login-brand{margin:0;font-size:15px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.login-sub{color:var(--muted);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin:.25rem 0 1.2rem}
.login-label{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.login-input{
  width:100%;font-family:var(--mono);font-size:16px;background:var(--inset);color:var(--ink);
  border:1px solid var(--line);border-radius:4px;padding:.55rem .6rem;margin-bottom:.8rem;
}
.login-input:focus{outline:none;border-color:var(--water);box-shadow:0 0 0 2px var(--water-soft)}
.login-button{
  width:100%;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:4px;
  padding:.6rem;cursor:pointer;font-weight:600;
}
.login-button:hover{filter:brightness(1.15)}
.login-error{color:var(--alert);font-size:11px;margin-top:.6rem;min-height:1em}
.login-foot{color:var(--faint);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:1rem;text-align:center}

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .grid-top{grid-template-columns:1fr}
  .page-header-inner{flex-direction:column;align-items:flex-start;gap:.3rem}
  .page-nav{overflow-x:auto}
  .week-stats{gap:1.1rem}
  .bd-matrix-head,.bd-matrix-row{grid-template-columns:1fr 70px 60px}
  .schedule-item{grid-template-columns:72px 1fr 56px}
  .control-grid{grid-template-columns:1fr}
}

/* ---- camera page (/console/camera) - tiles v2, dark ---- */
.cam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
@media (max-width: 520px) { .cam-grid { grid-template-columns: 1fr; } }
.cam-tile { position: relative; border-radius: 10px; overflow: hidden; background: var(--inset); border: 1px solid var(--line); }
.cam-snap { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; cursor: zoom-in; }
.cam-snap-empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; background: var(--inset); color: var(--muted); font-size: 0.85rem; }
.cam-overlay { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; align-items: center; gap: 8px; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.72)); pointer-events: none; }
.cam-name { color: #fff; font-size: 0.88rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.cam-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--irr); box-shadow: 0 0 5px rgba(74,222,128,.8); flex: none; }
.cam-dot.off { background: var(--alert); box-shadow: 0 0 5px rgba(248,113,113,.8); }
.cam-age { position: absolute; top: 8px; left: 8px; font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: var(--dim); }
.cam-batt { position: absolute; top: 8px; right: 8px; font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: var(--dim); }
.cam-batt.warn { color: var(--warn); } .cam-batt.alert { color: var(--alert); }
.cam-foot { padding: 8px 10px; font-size: 0.75rem; color: var(--muted); border-top: 1px solid var(--line2); background: var(--panel); }
.cam-stale { color: var(--warn); }
.cam-meta { margin-top: 10px; font-size: 0.78rem; color: var(--muted); }
/* filter chips */
.cam-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cam-chip { font-size: 0.72rem; font-family: var(--mono); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--dim); cursor: pointer; }
.cam-chip.active { border-color: var(--water); color: var(--water); background: var(--water-soft); }
/* events timeline */
.cam-events { margin: 0; padding: 0; list-style: none; }
.cam-events .cam-day { display: block; margin: 14px 0 2px; padding: 0; border: none; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.cam-events .cam-day:first-child { margin-top: 0; }
.cam-events li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--line2); font-size: 0.85rem; }
.cam-events li:last-child { border-bottom: none; }
.cam-events .ev-kind { color: var(--ink); }
.cam-events .ev-count { color: var(--water); margin-left: 5px; }
.cam-events .ev-cam { color: var(--dim); }
.cam-events .ev-time { color: var(--muted); white-space: nowrap; font-size: 0.78rem; }
.cam-events .ev-right { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.ev-play { font-size: 0.72rem; font-family: var(--mono); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--water-dim); background: var(--water-soft); color: var(--water); cursor: pointer; }
.ev-play:disabled { opacity: 0.6; cursor: wait; }
/* lightbox */
.cam-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 50; cursor: zoom-out; }
.cam-lightbox img, .cam-lightbox video { max-width: 96vw; max-height: 86vh; border-radius: 8px; }
.cam-lightbox .lb-cap { color: var(--dim); font-size: 0.85rem; }

/* ---- house page (/console/house): notes + people ---- */
.note-form { display: flex; gap: 8px; margin-bottom: 10px; }
.note-input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 16px; color: var(--ink);
  background: var(--inset); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; }
.note-input:focus { outline: none; border-color: var(--water); }
.note-add { font-family: var(--mono); font-size: 0.78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--water); background: var(--water-soft); border: 1px solid var(--water-dim); border-radius: 6px;
  padding: 7px 14px; cursor: pointer; }
.note-list, .person-list { margin: 0; padding: 0; list-style: none; }
.note-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line2); font-size: 0.88rem; }
.note-item:last-child { border-bottom: none; }
.note-check { width: 20px; height: 20px; flex: none; align-self: center; border-radius: 5px; border: 1px solid var(--line);
  background: var(--inset); color: var(--irr); font-size: 12px; line-height: 1; cursor: pointer; }
.note-item.done .note-check { border-color: var(--irr-dim); background: var(--irr-soft); }
.note-text { flex: 1; }
.note-item.done .note-text { color: var(--faint); text-decoration: line-through; }
.note-date { color: var(--faint); font-size: 0.72rem; white-space: nowrap; }
.note-del { flex: none; border: none; background: none; color: var(--faint); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.note-del:hover { color: var(--alert); }
.person-form { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr auto; gap: 8px; margin-bottom: 10px; }
@media (max-width: 700px) { .person-form { grid-template-columns: 1fr 1fr; } .person-form .note-add { grid-column: span 2; } }
.person-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 9px 2px; border-bottom: 1px solid var(--line2); font-size: 0.88rem; }
.person-item:last-child { border-bottom: none; }
.person-name { font-weight: 600; min-width: 10em; }
.person-role { color: var(--dim); min-width: 10em; }
.person-contact { color: var(--muted); }
.person-contact a { color: var(--water); }
.person-item .note-del { margin-left: auto; }

/* ---- contacts page (/console/contacts) ---- */
.contacts-bar { display: flex; align-items: center; gap: 12px; }
.contacts-search { flex: 1; font-size: 0.95rem; padding: 9px 12px; }
.contacts-count { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.contacts-addwrap { margin-top: 10px; }
.contacts-addsummary { color: var(--water); font-size: 0.8rem; cursor: pointer; user-select: none; }
.contact-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.contact-form .note-add { grid-column: 3; }
@media (max-width: 700px) { .contact-form { grid-template-columns: 1fr; } .contact-form .note-add { grid-column: 1; } }
.ct-group { margin-bottom: .7rem; }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.ct-card { background: var(--inset); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ct-card.open { border-color: var(--water-dim); }
.ct-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ct-name { font-weight: 700; font-size: 0.95rem; }
.ct-toggle { border: none; background: none; color: var(--water); font-size: 0.9rem; cursor: pointer; padding: 0 2px; }
.ct-company { color: var(--dim); font-size: 0.8rem; margin-top: 2px; }
.ct-line { margin-top: 6px; font-size: 0.85rem; }
.ct-line a { color: var(--water); }
.ct-addr { color: var(--muted); font-size: 0.75rem; margin-top: 6px; }
.ct-notepeek { color: var(--dim); font-size: 0.78rem; font-style: italic; margin-top: 7px; border-top: 1px dashed var(--line2); padding-top: 6px; }
.ct-detail { margin-top: 10px; border-top: 1px solid var(--line2); padding-top: 9px; }
.ct-label { display: block; font-size: 0.68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 8px 0 5px; }
.ct-notes { width: 100%; resize: vertical; }
.ct-detail-row { margin-top: 7px; display: flex; justify-content: flex-end; }
.ct-log { margin: 0; padding: 0; list-style: none; }
.ct-log-item { display: flex; gap: 9px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--line2); font-size: 0.82rem; }
.ct-log-item:last-child { border-bottom: none; }
.ct-log-date { color: var(--faint); font-size: 0.72rem; white-space: nowrap; }
.ct-log-text { flex: 1; }
.ct-logform { display: flex; gap: 8px; margin-top: 8px; }
.ct-logform .note-input { flex: 1; }
.ct-danger .note-del { font-size: 0.72rem; letter-spacing: .05em; text-transform: uppercase; }

/* ---- money page (/console/money) ---- */
.mo-total { font-size: 2rem; font-weight: 700; color: var(--ink); margin: .2rem 0 .4rem; }
.mo-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.mo-cat { display: flex; gap: 8px; align-items: baseline; padding: 4px 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); font-size: 0.78rem; }
.mo-cat-name { color: var(--dim); }
.mo-cat-val { color: var(--irr); font-weight: 600; }
.mo-plaid { font-size: 0.76rem; color: var(--muted); background: var(--water-soft); border: 1px solid var(--line2); border-radius: 6px; padding: .5rem .7rem; margin: 8px 0; }
.txn-form { display: grid; grid-template-columns: auto 1fr auto 1fr 1fr auto; gap: 8px; }
.txn-form .txn-amt { width: 8em; }
@media (max-width: 800px) { .txn-form { grid-template-columns: 1fr 1fr; } .txn-form .txn-desc { grid-column: span 2; } .txn-form .txn-amt { width: auto; } }
.txn-list { margin: 0; padding: 0; list-style: none; }
.txn-item { display: flex; align-items: baseline; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line2); font-size: 0.88rem; }
.txn-item:last-child { border-bottom: none; }
.txn-date { color: var(--muted); font-size: 0.75rem; white-space: nowrap; min-width: 4.2em; }
.txn-body { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.txn-descr { color: var(--ink); }
.txn-vendor { color: var(--water); font-size: 0.82rem; }
.txn-cat { color: var(--muted); font-size: 0.72rem; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line2); }
.txn-src { color: var(--irr); font-size: 0.68rem; letter-spacing: .05em; text-transform: uppercase; }
.txn-amt-cell { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* ---- email page (/console/mail) ---- */
.mail-steps { margin: 0; padding-left: 1.2rem; color: var(--dim); font-size: 0.85rem; line-height: 1.7; }
.mono-hi { font-family: var(--mono); color: var(--water); }
.mail-list { margin: 0; padding: 0; list-style: none; }
.mail-item { padding: 10px 2px; border-bottom: 1px solid var(--line2); cursor: pointer; }
.mail-item:last-child { border-bottom: none; }
.mail-row { display: flex; justify-content: space-between; gap: 12px; }
.mail-from { font-weight: 600; font-size: 0.85rem; }
.mail-item.unread .mail-from { color: var(--water); }
.mail-when { color: var(--muted); font-size: 0.74rem; white-space: nowrap; }
.mail-subj { font-size: 0.85rem; color: var(--ink); margin-top: 2px; }
.mail-snip { color: var(--muted); font-size: 0.8rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item.open .mail-snip { white-space: normal; }

/* ---- calendar page (/console/calendar) ---- */
.cal-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.cal-tab { font-family: var(--mono); font-size: 0.75rem; letter-spacing: .04em; padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--dim); cursor: pointer; }
.cal-tab.active { border-color: var(--water); color: var(--water); background: var(--water-soft); }
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-title { font-weight: 700; font-size: 1rem; min-width: 9em; text-align: center; }
.cal-nav { border: 1px solid var(--line); background: var(--panel2); color: var(--ink); border-radius: 6px;
  width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.cal-today { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--line); background: var(--panel2); color: var(--dim); border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 0.66rem; letter-spacing: .08em; color: var(--faint); padding: 4px 0; }
.cal-cell { position: relative; aspect-ratio: 1; min-height: 44px; border: 1px solid var(--line2); border-radius: 7px;
  background: var(--inset); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start;
  padding: 5px 6px; font-family: var(--mono); }
.cal-cell.empty { border: none; background: none; cursor: default; }
.cal-cell.today { border-color: var(--water-dim); }
.cal-cell.sel { border-color: var(--water); background: var(--water-soft); }
.cal-num { font-size: 0.8rem; color: var(--dim); }
.cal-cell.today .cal-num { color: var(--water); font-weight: 700; }
.cal-dots { margin-top: auto; display: flex; flex-wrap: wrap; gap: 3px; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.cal-dot.work { background: var(--water); }
.cal-dot.people { background: var(--warn); }
.cal-dot.done { background: var(--irr); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line2); }
.cal-key { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--muted); }
.cal-day-list { margin: 0; padding: 0; list-style: none; }
.cal-ev { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line2); }
.cal-ev:last-child { border-bottom: none; }
.cal-ev .cal-dot { margin-top: 5px; }
.cal-ev-body { flex: 1; }
.cal-ev-title { font-size: 0.9rem; color: var(--ink); }
.cal-ev-cost { color: var(--irr); font-weight: 600; }
.cal-ev-vendor { display: inline-block; color: var(--water); font-size: 0.8rem; margin-top: 2px; }
.cal-ev-cat { display: inline-block; color: var(--muted); font-size: 0.72rem; margin-left: 8px; }
.cal-ev-notes { color: var(--dim); font-size: 0.8rem; margin-top: 3px; }
.cal-ev-src { display: inline-block; color: var(--faint); font-size: 0.68rem; letter-spacing: .05em; text-transform: uppercase; margin-top: 3px; }
.cal-form { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; margin-top: 10px; }
.cal-form .cal-title-in { grid-column: 2 / -1; }
.cal-form #evVendor, .cal-form #evNotes { grid-column: span 2; }
@media (max-width: 700px) { .cal-form { grid-template-columns: 1fr 1fr; } .cal-form .cal-title-in, .cal-form #evVendor, .cal-form #evNotes { grid-column: span 2; } .cal-cell { min-height: 38px; } }

/* ---- records page (/console/records) ---- */
.rec-form { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 8px; margin-top: 10px; }
.rec-form .rec-cost { width: 7em; }
@media (max-width: 700px) { .rec-form { grid-template-columns: 1fr 1fr; } .rec-form .rec-what { grid-column: span 2; } .rec-form .rec-cost { width: auto; } }
.rec-list { margin: 0; padding: 0; list-style: none; }
.rec-item { display: flex; align-items: baseline; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line2); font-size: 0.88rem; }
.rec-item:last-child { border-bottom: none; }
.rec-date { color: var(--muted); font-size: 0.75rem; white-space: nowrap; min-width: 4.2em; }
.rec-text { flex: 1; }
.rec-who { color: var(--water); margin-left: 6px; }
.rec-cost { color: var(--irr); font-weight: 600; white-space: nowrap; }

/* ---- home / roadmap page (/console/home) ---- */
.sys-list { margin: 0; padding: 0; list-style: none; }
.sys-list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line2); }
.sys-list li:last-child { border-bottom: none; }
.sys-name { font-weight: 600; min-width: 9em; }
.sys-badge { font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.sys-badge.live { background: var(--irr-soft); color: var(--irr); border: 1px solid var(--irr-dim); }
.sys-badge.ready { background: var(--water-soft); color: var(--water); border: 1px solid var(--water-dim); }
.sys-badge.waiting { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }
.sys-badge.planned { background: var(--panel2); color: var(--dim); border: 1px solid var(--line); }
.sys-note { color: var(--dim); font-size: 0.85rem; }

/* ---- solar page (/console) - dark theme, Sol-Ark-style flow diagram ---- */
.demo-banner{background:var(--warn-soft);border:1px solid rgba(251,191,36,.25);color:var(--warn);
  font-size:12px;padding:.5rem .75rem;border-radius:6px;margin-bottom:.7rem}
.flow-meta{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line2);font-size:11px;color:var(--muted);letter-spacing:.04em}
.grid-2{display:grid;grid-template-columns:1fr;gap:.7rem;margin-bottom:.7rem}
@media(min-width:760px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-2 .card{margin-bottom:0}

/* flow diagram */
.card-sflow{border-left:2px solid var(--warn)}
.sflow-wrap{max-width:560px;margin:0 auto}
.sflow{width:100%;height:auto;display:block}
.fnode-box{fill:var(--panel2);stroke:var(--line)}
.fhub-box{fill:var(--inset);stroke:var(--line)}
.fnode-label{fill:var(--muted);font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--sans)}
.fnode-val{fill:var(--ink);font-size:21px;font-weight:600;font-family:var(--mono);font-variant-numeric:tabular-nums}
.fnode-val.on-solar{fill:var(--warn)}
.fnode-val.on-grid{fill:var(--water)}
.fnode-val.on-batt{fill:var(--irr)}
.fnode-sub{fill:var(--muted);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--sans)}
.fhub-label{fill:var(--dim);font-size:10px;letter-spacing:.2em;font-weight:600;font-family:var(--sans)}
.fhub-sub{fill:var(--muted);font-size:9px;letter-spacing:.12em;font-family:var(--sans)}
.fpath{fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round;opacity:.45}
.fpath.on{opacity:1;stroke-dasharray:3 7;animation:sflowdash 1.5s linear infinite}
.fpath.on.rev{animation-direction:reverse}
.fpath.on.f-slow{animation-duration:2.6s}
.fpath.on.f-fast{animation-duration:.9s}
.fpath.c-solar.on{stroke:var(--warn)}
.fpath.c-grid.on{stroke:var(--water)}
.fpath.c-batt.on{stroke:var(--irr)}
.fpath.c-load.on{stroke:var(--dim)}
@keyframes sflowdash{to{stroke-dashoffset:-20}}
@media (prefers-reduced-motion:reduce){.fpath.on{animation:none}}

/* battery card */
.batt-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.batt-soc{font-size:38px;font-weight:600;line-height:1;color:var(--irr);font-variant-numeric:tabular-nums}
.batt-soc.low{color:var(--warn)}
.batt-soc.crit{color:var(--alert)}
.batt-soc-unit{font-size:13px;color:var(--muted)}
.batt-state{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right}
.batt-state.charging{color:var(--irr)}
.batt-state.discharging{color:var(--warn)}
.batt-bar{margin:.7rem 0 .2rem;height:10px;background:var(--inset);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.batt-fill{height:100%;width:0;background:linear-gradient(90deg,var(--irr-dim),var(--irr));border-radius:999px;transition:width .6s ease}
.batt-fill.low{background:linear-gradient(90deg,#8a6a14,var(--warn))}
.batt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:.6rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line2)}
.batt-stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.2rem}
.batt-stat-value{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}

/* system key-value card */
.kv-list{display:flex;flex-direction:column}
.kv{display:flex;justify-content:space-between;gap:.8rem;font-size:12.5px;padding:.34rem 0;border-bottom:1px solid var(--line2)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;text-align:right}

/* Tigo panels heatmap */
.panels-summary{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin-bottom:.7rem;font-size:12px;color:var(--dim)}
.panels-summary span.n{font-size:15px;font-weight:600;color:var(--ink);margin-right:.15em;font-variant-numeric:tabular-nums}
.panel-grid{display:grid;gap:.45rem}
.panel{position:relative;border:1px solid var(--line);border-radius:5px;padding:.4rem .45rem;min-height:44px;background:var(--panel2)}
.panel.low{border-color:var(--alert);box-shadow:0 0 0 1px var(--alert-soft)}
.panel.idle{opacity:.55}
.panel-id{font-size:9px;color:var(--muted);letter-spacing:.06em}
.panel-w{font-size:14px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.panel-w small{font-size:9px;color:var(--muted);font-weight:400}
.panel-flag{position:absolute;top:.25rem;right:.3rem;font-size:10px;color:var(--alert);font-weight:700}
.panels-meta{margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--line2);font-size:11px;color:var(--muted)}

/* ---- forecast vs. capture card (/console solar) ---- */
.card-fcast{border-left:2px solid var(--water)}
.fc-kwh{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem}
.fc-kwh-bar{flex:1;display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--inset);border:1px solid var(--line)}
.fc-kwh-gen{background:linear-gradient(90deg,var(--irr-dim),var(--irr));width:0;transition:width .6s ease}
.fc-kwh-rem{background:repeating-linear-gradient(45deg,rgba(251,191,36,.35) 0 4px,rgba(251,191,36,.12) 4px 8px);width:0;transition:width .6s ease}
.fc-kwh-text{font-size:11.5px;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.fc-strip{display:flex;height:16px;border-radius:4px;overflow:hidden;border:1px solid var(--line);margin-bottom:.45rem}
.fc-seg{display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.06em;color:var(--dim);text-transform:uppercase;overflow:hidden;white-space:nowrap}
.fc-seg.sunny{background:rgba(251,191,36,.22)}
.fc-seg.partly{background:rgba(251,191,36,.10)}
.fc-seg.cloudy{background:rgba(154,165,177,.15)}
.fc-chart svg{width:100%;height:auto;display:block}

/* /console has more tabs than /85 - wrap the nav instead of forcing the page wide,
   and stack the kWh readout above its bar on narrow screens */
.page-nav{flex-wrap:wrap}
@media(max-width:520px){
  .fc-kwh{flex-direction:column-reverse;align-items:stretch;gap:.3rem}
  .fc-kwh-text{white-space:normal}
}

/* forecast chart legend + solar-yellow capture bar */
.fc-legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:.1rem 0 .3rem;font-size:10px;color:var(--dim);letter-spacing:.04em}
.fc-key{display:inline-flex;align-items:center;gap:.4rem}
.fk-line{display:inline-block;width:18px;border-top:2px solid;height:0}
.fk-solid{border-color:var(--warn)}
.fk-dash{border-color:rgba(251,191,36,.55);border-top-style:dashed}
.fk-cloud{border-color:var(--water)}
.fk-now{border-color:var(--ink);border-top-style:dotted}
.fc-kwh-gen{background:linear-gradient(90deg,#8a6a14,var(--warn))}
/* strip aligns with the chart's inset plot area (L=36/480, R=34/480) */
.fc-strip{margin-left:7.5%;margin-right:7.08%}

/* power-flows chart (/console solar) */
.card-pflow{border-left:2px solid var(--irr)}
.fk-load{border-color:var(--dim)}
.fk-grid{border-color:var(--water)}
.fk-batt{border-color:var(--irr)}
.fk-soc{border-color:rgba(74,222,128,.7);border-top-style:dashed}

/* power-flows kWh meters + battery line recolor */
.pf-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.6rem;margin-bottom:.6rem;padding-bottom:.6rem;border-bottom:1px solid var(--line2)}
.pf-meter-label{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.15rem}
.pf-meter-value{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.pf-meter-avg{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.pf-meter-avg .hi{color:var(--warn)}
.pf-meter-avg .lo{color:var(--irr)}
.fk-battload{border-color:var(--batt)}

/* ---- Devices inventory + Documents (Setup tabs) ---- */
.inv{list-style:none;margin:0;padding:0}
.inv-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--line2);font-size:13px}
.inv-row:last-child{border-bottom:none}
.inv-name{color:var(--ink);font-weight:600;flex:0 0 auto;min-width:8.5rem}
.inv-meta{color:var(--muted);font-size:12px;flex:1 1 12rem}
.inv-tag{flex:0 0 auto;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:.1rem .45rem;border-radius:4px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.inv-tag.ok{color:var(--ok);border-color:var(--ok)}
.inv-tag.live{color:var(--irr);border-color:var(--irr);background:var(--irr-soft)}
.inv-tag.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.inv-tag.plan{color:var(--muted)}
.inv-tag.off{color:var(--faint);border-color:var(--line2)}
.inv-intro{color:var(--dim);font-size:12.5px;line-height:1.55;margin:.2rem 0 0}
.inv-intro a{color:var(--water)}
.inv-name.doc-link{color:var(--water);text-decoration:none}

/* ---- Rendered document pages ---- */
.doc{font-size:13.5px;line-height:1.6;color:var(--ink)}
.doc h2{font-size:14px;letter-spacing:.01em;margin:1.4rem 0 .5rem;padding-bottom:.3rem;border-bottom:1px solid var(--line2);color:var(--ink)}
.doc h3{font-size:12.5px;margin:1rem 0 .35rem;color:var(--ink)}
.doc p{margin:.5rem 0;color:var(--dim)}
.doc ul,.doc ol{margin:.4rem 0 .6rem;padding-left:1.25rem}
.doc li{margin:.25rem 0;color:var(--dim)}
.doc a{color:var(--water)}
.doc strong{color:var(--ink)}
.doc code{font-family:var(--mono);font-size:.86em;background:var(--inset);border:1px solid var(--line2);border-radius:3px;padding:.03rem .3rem;color:var(--ink)}
.doc pre{font-family:var(--mono);font-size:11.5px;line-height:1.5;background:var(--inset);border:1px solid var(--line2);border-radius:5px;padding:.7rem .8rem;overflow-x:auto;color:var(--dim);margin:.6rem 0}
.doc pre code{background:none;border:none;padding:0}
.doc-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:.6rem 0}
.doc table{width:100%;border-collapse:collapse;margin:0;font-size:12px}
.doc th,.doc td{text-align:left;padding:.4rem .55rem;border:1px solid var(--line2);vertical-align:top;color:var(--dim);min-width:6.5rem}
.doc th{color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--inset);white-space:nowrap}
.doc-lead{color:var(--dim);font-size:13px;border-left:2px solid var(--line);padding-left:.7rem;margin:.2rem 0 .8rem}
.doc-foot{margin-top:1.2rem;padding-top:.6rem;border-top:1px solid var(--line2);color:var(--muted);font-size:11.5px}
.doc-back{display:inline-block;color:var(--water);font-size:11.5px;margin-bottom:.5rem;text-decoration:none}

/* ---- House Library (Documents tab: shelves, checklists, PIN unlock) ---- */
.lib-needed{margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--line2)}
.lib-needed-h{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.lib-check{list-style:none;margin:0;padding:0;columns:13rem;column-gap:1.2rem}
.lib-check li{font-size:12px;color:var(--muted);margin:.18rem 0;break-inside:avoid}
.shelf-link{color:var(--water);font-size:11px;font-weight:500;margin-left:.4rem;white-space:nowrap}
.lib-unlock{display:flex;gap:.5rem;align-items:center;margin:.3rem 0 .4rem}
.lib-pin-err{color:var(--alert);font-size:.8rem;margin:.15rem 0 .5rem}
.lib-pin-input{flex:1 1 auto;max-width:12rem;background:var(--inset);border:1px solid var(--line);border-radius:5px;color:var(--ink);padding:.5rem .6rem;font-size:16px;letter-spacing:.25em}
.lib-shelf-locked .inv-intro{color:var(--muted)}

/* ---- Documents redesign: sub-tabs, search, doc rows ---- */
.doc-tabs{display:inline-flex;gap:.2rem;background:var(--inset);border:1px solid var(--line);border-radius:9px;padding:.2rem;margin-bottom:.85rem}
.doc-tab{padding:.4rem 1rem;border-radius:6px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted);text-decoration:none}
.doc-tab.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.doc-search{margin-bottom:.75rem}
.doc-search-input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--ink);padding:.65rem .85rem;font-size:16px}
.doc-search-input::placeholder{color:var(--faint)}
.doc-empty{color:var(--muted);font-size:12.5px;padding:.4rem 0}
.doc-shelf .card-label{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem}
.doc-items{display:flex;flex-direction:column;margin-top:-.1rem}
.doc-item{display:flex;align-items:baseline;flex-wrap:wrap;gap:.15rem .6rem;padding:.6rem 0;border-bottom:1px solid var(--line2);text-decoration:none}
.doc-item:last-child{border-bottom:none}
.doc-item-title{color:var(--water);font-weight:600;font-size:13px}
.doc-item-desc{color:var(--muted);font-size:12px;flex:1 1 12rem;line-height:1.45}
.doc-item-go{color:var(--faint);font-size:16px;margin-left:auto}
.lib-hero .inv-intro{margin:.2rem 0 0}
.lib-access{color:var(--muted);font-size:12px}

/* ---------- Command shell: app frame, left rail, topbar ----------
   Desktop (>=1100px): fixed sidebar + 64px topbar; only #page scrolls.
   Below the breakpoint the rail hides and the ☰ tile overlay takes over -
   phones are a different surface on purpose. */
.app81{display:flex;height:100vh;height:100dvh;position:relative;z-index:1}
.shell{flex:1;display:flex;flex-direction:column;min-width:0}
#page{flex:1;overflow-y:auto;padding:.35rem 0 0;scroll-behavior:smooth}
#page::-webkit-scrollbar{width:10px}
#page::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:2px solid var(--bg)}
#page::-webkit-scrollbar-thumb:hover{background:var(--line)}

.topbar{
  /* viewport-fit=cover: sink the bar under the notch/status bar, keeping the
     --topbar-h content area intact (env() insets are 0 off iOS, so no change
     on desktop/Android). */
  height:calc(var(--topbar-h) + env(safe-area-inset-top, 0px));flex:none;display:flex;align-items:center;gap:14px;
  padding:env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
  border-bottom:1px solid var(--line);
  background:rgba(13,18,24,.55);backdrop-filter:blur(8px);
}
:root[data-theme="light"] .topbar{background:rgba(255,255,255,.6)}
.tb-title{font-size:1.02rem;font-weight:650;color:var(--ink);display:flex;flex-direction:column;line-height:1.25;min-width:0}
.tb-sub{font-size:.66rem;font-weight:500;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.tb-clock{font-family:var(--mono);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}

.snav{display:none}
@media (max-width:1099px){
  .menu-btn{display:inline-flex}
}
@media (min-width:1100px){
  .menu-btn{display:none !important}
  .snav{display:flex;flex-direction:column;width:var(--sidebar-w);flex:none;background:var(--bg2);border-right:1px solid var(--line);z-index:2}
  .snav-brand{padding:1.05rem 1rem .7rem;border-bottom:1px solid var(--line2)}
  .snav-brand a{color:var(--ink);font-size:1.06rem;font-weight:700;text-decoration:none;letter-spacing:.01em}
  .snav-brand a:hover{text-decoration:none}
  .snav-sub{display:block;color:var(--muted);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.2rem}
  .snav-scroll{flex:1;overflow-y:auto;padding:.35rem 0 .6rem}
  .snav-scroll::-webkit-scrollbar{width:8px}
  .snav-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
  .snav-glabel{font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:.9rem 1rem .3rem;font-weight:600}
  .snav-link{position:relative;display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;color:var(--dim);font-size:.86rem;font-weight:500;text-decoration:none;border-radius:0 999px 999px 0;margin-right:10px}
  .snav-link:hover{color:var(--ink);background:rgba(255,255,255,.045);text-decoration:none}
  :root[data-theme="light"] .snav-link:hover{background:rgba(15,25,35,.05)}
  .snav-link.active{color:var(--ink);background:var(--accent-soft)}
  .snav-link.active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--accent)}
  .snav-ic{width:1.3em;text-align:center;flex:none}
  .snav-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem .8rem;border-top:1px solid var(--line2)}
}

/* topbar-specific overrides of legacy header rules */
.topbar .menu-btn{margin-left:0}
.topbar .theme-toggle{font-size:16px;padding:.3rem .5rem;border:none;background:none;color:var(--muted);cursor:pointer}
.topbar .theme-toggle:hover{color:var(--ink)}
.page-footer{max-width:1160px;margin:0 auto;padding:1.2rem 1rem;color:var(--faint);font-size:.72rem}

/* ---------- Command instruments: hero stats, icon chips, rings ---------- */
.ic{width:18px;height:18px;display:block}
.snav-ic .ic{width:17px;height:17px}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-bottom:.85rem}
.hstat{display:flex;align-items:center;gap:.7rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.75rem .85rem;min-width:0}
.hchip{width:38px;height:38px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center}
.tint-blue{background:rgba(96,165,250,.13);color:var(--blue)}
.tint-amber{background:rgba(251,191,36,.13);color:var(--warn)}
.tint-green{background:rgba(52,211,153,.13);color:var(--green)}
.tint-cyan{background:rgba(41,211,230,.13);color:var(--accent)}
.tint-violet{background:rgba(167,139,250,.13);color:var(--violet)}
.tint-orange{background:rgba(251,146,60,.13);color:var(--orange)}
.tint-pink{background:rgba(244,114,182,.13);color:var(--pink)}
.hbody{min-width:0}
.hval{font-family:var(--mono);font-size:1.28rem;font-weight:700;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.hval-s{font-family:var(--sans);font-size:.95rem;font-weight:650}
.hcap{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ring{--p:0;width:44px;height:44px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:conic-gradient(var(--green) calc(var(--p)*1%),var(--inset) 0)}
.ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--panel)}
.ring-lb{position:relative;font-family:var(--mono);font-size:.68rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* phone density: the small surface stays compact on purpose */
@media (max-width:640px){
  html{font-size:14px}
  .card{border-radius:13px;padding:.85rem .95rem}
  .hero-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .hstat{padding:.6rem .7rem}
}

/* phone tile menu: same SVG icon language as the desktop rail */
.menu-ic .ic{width:22px;height:22px}
.menu-tile .menu-ic{color:var(--dim)}
.menu-tile.active .menu-ic{color:var(--accent)}

/* ---------- capture review overlay ---------- */
.cap-overlay{position:fixed;inset:0;z-index:300;background:rgba(5,8,12,.66);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem}
.cap-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);max-width:560px;width:100%;max-height:82vh;display:flex;flex-direction:column;overflow:hidden}
.cap-h{padding:1rem 1.1rem .6rem;font-weight:650;color:var(--ink)}
.cap-sub{display:block;font-size:.74rem;font-weight:500;color:var(--muted);margin-top:.2rem}
.cap-list{flex:1;overflow-y:auto;padding:.3rem 1.1rem .6rem}
.cap-room{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:.7rem 0 .25rem}
.cap-row{display:flex;align-items:center;gap:.55rem;padding:.3rem 0;font-size:.88rem;cursor:pointer;flex-wrap:wrap}
.cap-row input{width:16px;height:16px;accent-color:var(--accent);flex:none;cursor:pointer}
.cap-name{color:var(--ink)}
.cap-lv{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.cap-badge{flex-basis:100%;margin-left:1.6rem;font-size:.68rem;color:var(--warn)}
.cap-foot{display:flex;gap:.6rem;padding:.8rem 1.1rem;border-top:1px solid var(--line)}

/* ================= THEMES - curated (7 skins) =================
   Seven starkly-different skins over one token surface, every text/surface and
   button pair WCAG-AA checked (scratchpad/contrast7 + onaccent gates).
   data-theme is stamped by the picker; "command" is also the bare :root
   default. Picker groups: Darks, Lights, Fun. --on-accent is the readable text
   color for solid accent-filled controls (e.g. the sign-in button). */
:root[data-theme="command"]{
  --bg:#0a0e13; --bg2:#0d1218; --panel:#121922; --panel2:#1d232c; --inset:#0d1219;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,0.042);
  --ink:#e8eef4; --dim:#bec8d2; --muted:#8b99a8; --faint:#5b6877;
  --accent:#29d3e6; --accent-2:#20a5b3; --accent-soft:rgba(41,211,230,.10); --on-accent:#04121a;
  --water:#29d3e6; --water-dim:#20a5b3; --water-soft:rgba(41,211,230,.10);
  --irr:#34d399; --irr-dim:#279e73; --irr-soft:rgba(52,211,153,0.100);
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.10);
  --alert:#f87171; --alert-soft:rgba(248,113,113,.12);
  --ok:#34d399; --batt:#2dd4bf;
  --green:#34d399; --violet:#a78bfa; --blue:#60a5fa; --orange:#fb923c; --pink:#f472b6;
}
:root[data-theme="command"] body::before{background:radial-gradient(900px 500px at 80% -10%, rgba(41,211,230,.07), transparent 60%),radial-gradient(700px 500px at -10% 110%, rgba(167,139,250,.05), transparent 60%)}
:root[data-theme="command"] .topbar{background:rgba(10,14,19,0.550)}
:root[data-theme="noir"]{
  --bg:#050505; --bg2:#0a0a0a; --panel:#111111; --panel2:#1a1a1a; --inset:#0c0c0c;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,0.048);
  --ink:#f2f2f2; --dim:#c7c7c7; --muted:#909090; --faint:#6a6a6a;
  --accent:#f6b73c; --accent-2:#c98f22; --accent-soft:rgba(246,183,60,.12); --on-accent:#1a1206;
  --water:#f6b73c; --water-dim:#c98f22; --water-soft:rgba(246,183,60,.12);
  --irr:#5fd39a; --irr-dim:#3f9e73; --irr-soft:rgba(95,211,154,0.100);
  --warn:#f6b73c; --warn-soft:rgba(246,183,60,.12);
  --alert:#f87171; --alert-soft:rgba(248,113,113,.12);
  --ok:#5fd39a; --batt:#2dd4bf;
  --green:#5fd39a; --violet:#c4b5f5; --blue:#8ab4f8; --orange:#f6b73c; --pink:#f0a0c0;
}
:root[data-theme="noir"] body::before{background:radial-gradient(900px 500px at 80% -10%, rgba(246,183,60,.05), transparent 60%),radial-gradient(700px 500px at -10% 110%, rgba(255,255,255,.03), transparent 60%)}
:root[data-theme="noir"] .topbar{background:rgba(5,5,5,0.6)}
:root[data-theme="daylight"]{
  --bg:#eef1f5; --bg2:#e4e9f0; --panel:#ffffff; --panel2:#f5f8fc; --inset:#e8edf3;
  --line:rgba(20,40,70,.14); --line2:rgba(20,40,70,0.085);
  --ink:#16202e; --dim:#33465e; --muted:#566a82; --faint:#7a8ba0;
  --accent:#0e6fb0; --accent-2:#2f8fce; --accent-soft:rgba(14,111,176,.10); --on-accent:#ffffff;
  --water:#0e6fb0; --water-dim:#2f8fce; --water-soft:rgba(14,111,176,.10);
  --irr:#1e7d4f; --irr-dim:#4ba17a; --irr-soft:rgba(30,125,79,0.100);
  --warn:#9a6200; --warn-soft:rgba(154,98,0,.12);
  --alert:#c02323; --alert-soft:rgba(192,35,35,.12);
  --ok:#1e7d4f; --batt:#0b7f75;
  --green:#0f8a55; --violet:#6d5bd0; --blue:#1d6fd0; --orange:#c05f10; --pink:#c02373;
}
:root[data-theme="daylight"] body::before{background:radial-gradient(900px 500px at 80% -10%, rgba(14,111,176,.06), transparent 60%),radial-gradient(700px 500px at -10% 110%, rgba(30,125,80,.04), transparent 60%)}
:root[data-theme="daylight"] .topbar{background:rgba(255,255,255,.6)}
:root[data-theme="paper"]{
  --bg:#f3ece0; --bg2:#ece3d3; --panel:#fbf7ef; --panel2:#f5efe3; --inset:#ece4d5;
  --line:rgba(80,60,30,.14); --line2:rgba(80,60,30,0.085);
  --ink:#2a2118; --dim:#4d4133; --muted:#6f6250; --faint:#8f816c;
  --accent:#97570f; --accent-2:#b5763a; --accent-soft:rgba(151,87,15,.12); --on-accent:#ffffff;
  --water:#97570f; --water-dim:#b5763a; --water-soft:rgba(151,87,15,.12);
  --irr:#2d6a3f; --irr-dim:#5a9270; --irr-soft:rgba(45,106,63,0.100);
  --warn:#8a5e00; --warn-soft:rgba(138,94,0,.12);
  --alert:#b3241f; --alert-soft:rgba(179,36,31,.12);
  --ok:#2d6a3f; --batt:#0b6f66;
  --green:#2d6a3f; --violet:#5a44a8; --blue:#1a54bf; --orange:#b45a12; --pink:#b02168;
}
:root[data-theme="paper"] body::before{background:radial-gradient(900px 500px at 80% -10%, rgba(151,87,15,.06), transparent 60%),radial-gradient(700px 500px at -10% 110%, rgba(45,106,63,.04), transparent 60%)}
:root[data-theme="paper"] .topbar{background:rgba(251,247,239,.6)}
:root[data-theme="cyberpunk"]{
  --bg:#0b0616; --bg2:#100a20; --panel:#17102b; --panel2:#221836; --inset:#120b22;
  --line:rgba(180,120,255,.14); --line2:rgba(180,120,255,0.08);
  --ink:#f0e8ff; --dim:#cbb9e8; --muted:#9a86c4; --faint:#73609e;
  --accent:#ff3d9a; --accent-2:#c72e78; --accent-soft:rgba(255,61,154,.14); --on-accent:#1a0410;
  --water:#26d6e6; --water-dim:#1ba7b4; --water-soft:rgba(38,214,230,.12);
  --irr:#35e0a0; --irr-dim:#25a878; --irr-soft:rgba(53,224,160,0.120);
  --warn:#ffd23d; --warn-soft:rgba(255,210,61,.12);
  --alert:#ff5c7a; --alert-soft:rgba(255,92,122,.14);
  --ok:#35e0a0; --batt:#26d6e6;
  --green:#35e0a0; --violet:#b388ff; --blue:#4fc3ff; --orange:#ff9d3d; --pink:#ff3d9a;
}
:root[data-theme="cyberpunk"] body::before{background:radial-gradient(900px 500px at 80% -10%, rgba(255,61,154,.13), transparent 60%),radial-gradient(700px 500px at -10% 110%, rgba(38,214,230,.09), transparent 60%)}
:root[data-theme="cyberpunk"] .topbar{background:rgba(11,6,22,0.6)}
:root[data-theme="terminal"]{
  --bg:#030803; --bg2:#061006; --panel:#08140a; --panel2:#0e1e10; --inset:#061006;
  --line:rgba(80,255,120,.14); --line2:rgba(80,255,120,0.08);
  --ink:#d6ffe0; --dim:#97e0aa; --muted:#62b878; --faint:#3e7350;
  --accent:#35ff7e; --accent-2:#22c95f; --accent-soft:rgba(53,255,126,.12); --on-accent:#03120a;
  --water:#35ff7e; --water-dim:#22c95f; --water-soft:rgba(53,255,126,.12);
  --irr:#35ff7e; --irr-dim:#22c95f; --irr-soft:rgba(53,255,126,0.120);
  --warn:#ffe14d; --warn-soft:rgba(255,225,77,.12);
  --alert:#ff6b6b; --alert-soft:rgba(255,107,107,.14);
  --ok:#35ff7e; --batt:#35ff7e;
  --green:#35ff7e; --violet:#b388ff; --blue:#4fd0ff; --orange:#ffcf4d; --pink:#ff7edb;
}
:root[data-theme="terminal"] body::before{background:radial-gradient(900px 500px at 80% -10%, rgba(53,255,126,.08), transparent 60%),radial-gradient(700px 500px at -10% 110%, rgba(53,255,126,.04), transparent 60%)}
:root[data-theme="terminal"] .topbar{background:rgba(3,8,3,0.6)}
:root[data-theme="sunset"]{
  --bg:#150910; --bg2:#1c0d15; --panel:#26121d; --panel2:#331a28; --inset:#1e0e17;
  --line:rgba(255,160,120,.14); --line2:rgba(255,160,120,0.08);
  --ink:#ffeee4; --dim:#e8cabc; --muted:#bd9188; --faint:#8a625d;
  --accent:#ff7043; --accent-2:#d6512a; --accent-soft:rgba(255,112,67,.13); --on-accent:#1a0806;
  --water:#ffb74d; --water-dim:#d69423; --water-soft:rgba(255,183,77,.12);
  --irr:#5fd39a; --irr-dim:#3f9e73; --irr-soft:rgba(95,211,154,0.100);
  --warn:#ffca3d; --warn-soft:rgba(255,202,61,.12);
  --alert:#ff5c6b; --alert-soft:rgba(255,92,107,.14);
  --ok:#5fd39a; --batt:#ff9d5c;
  --green:#5fd39a; --violet:#c08fff; --blue:#5fb8ff; --orange:#ff9d3d; --pink:#ff6f9c;
}
:root[data-theme="sunset"] body::before{background:radial-gradient(900px 500px at 80% -10%, rgba(255,112,67,.12), transparent 60%),radial-gradient(700px 500px at -10% 110%, rgba(255,183,77,.08), transparent 60%)}
:root[data-theme="sunset"] .topbar{background:rgba(21,9,16,0.6)}

/* ---------- theme picker popover ---------- */
.theme-pop{position:fixed;top:calc(var(--topbar-h) + 8px);right:14px;z-index:500;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-s);padding:.45rem;width:230px;max-height:72vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.tp-g{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:.5rem .5rem .25rem}
.tp-item{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;background:none;border:none;border-radius:8px;color:var(--dim);padding:.42rem .5rem;font:inherit;font-size:.85rem;cursor:pointer}
.tp-item:hover{background:var(--inset);color:var(--ink)}
.tp-item.on{background:var(--accent-soft);color:var(--ink)}
.tp-item i{width:13px;height:13px;border-radius:4px;border:1px solid var(--line);flex:none}

/* iOS: kill double-tap-zoom on controls (pan/pinch unaffected) - rapid taps
   on light toggles were reading as "zoom here". Focus auto-zoom is handled
   by maximum-scale=1 in the viewport meta (pinch zoom still works on iOS). */
button,[role="button"],a,label,input,select,textarea,.lz,.scene,.dash-light-btn,.me-chip,.fav-star,.menu-tile,.tp-item{touch-action:manipulation}

/* rename mode */
.lz-roomedit{background:none;border:none;color:var(--accent);cursor:pointer;font-size:.85rem;padding:0 .3rem}

/* --- Water: rain & greywater tanks (fed by the mechanical-room logger) --- */
.card-tanks{border-left:2px solid var(--water)}
.tank-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin-top:.4rem}
.tank{background:var(--inset);border:1px solid var(--line);border-radius:var(--radius-s);padding:.7rem .8rem}
.tank-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.55rem}
.tank-name{font-weight:600;font-size:13px}
.tank-cap{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tank-body{display:flex;gap:.9rem;align-items:flex-end}
.tank-vessel{position:relative;flex:0 0 auto;width:34px;height:84px;border:1px solid var(--line);border-radius:6px;background:var(--panel);overflow:hidden}
.tank-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--water);opacity:.75;transition:height .6s ease}
.tank-gw .tank-fill{background:var(--irr)}
.tank-nums{flex:1;min-width:0}
.tank-pct{font-size:34px;font-weight:600;line-height:1;color:var(--water);font-variant-numeric:tabular-nums}
.tank-gw .tank-pct{color:var(--irr)}
.tank-pct.none{color:var(--faint)}
.tank-gal{margin-top:.3rem;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.tank-spark{margin-top:.6rem;height:36px}
.tank-spark svg{width:100%;height:36px;display:block}
.tank-meta{margin-top:.6rem;font-size:11px;line-height:1.5;color:var(--muted)}
.tank-meta.warn{color:var(--warn)}
.tank-meta.off{color:var(--dim)}