/* ───────────  type  ─────────── */
@font-face { font-family:"Space Grotesk"; src:url(/vendor/fonts/space-grotesk-500.woff2) format("woff2"); font-weight:500; font-display:swap }
@font-face { font-family:"Space Grotesk"; src:url(/vendor/fonts/space-grotesk-700.woff2) format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"IBM Plex Sans"; src:url(/vendor/fonts/ibm-plex-sans-400.woff2) format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"IBM Plex Sans"; src:url(/vendor/fonts/ibm-plex-sans-500.woff2) format("woff2"); font-weight:500; font-display:swap }

/* ───────────  tokens  ─────────── */
:root{
  --night:#12161f;     /* base — sky before dawn */
  --panel:#1a2030;     /* raised surface */
  --sink:#0d111a;      /* recessed */
  --edge:#2b3446;      /* hairline */
  --ink:#eef1f7;
  --haze:#8b95ab;      /* secondary text */
  --sun:#ffc247;       /* solar / free energy */
  --dusk:#ff8a5c;      /* marginal */
  --grid:#7d8aa6;      /* grid power — deliberately dull */
  --bad:#ff5c6c;
  --car-a:#046a75;     /* car / charging — sampled from the logo's leaf+plug */
  --car-b:#73d168;
  --car:color-mix(in srgb, var(--car-a) 45%, var(--car-b));
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --meter:"Space Grotesk","IBM Plex Sans",sans-serif;
}
/* light palette: system-light unless the user forced dark, and always when forced light */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){ --night:#eef1f6; --panel:#ffffff; --sink:#e7ebf2;
    --edge:#dde2ec; --ink:#1a2030; --haze:#5c6478 }
}
:root[data-theme="light"]{ --night:#eef1f6; --panel:#ffffff; --sink:#e7ebf2;
  --edge:#dde2ec; --ink:#1a2030; --haze:#5c6478 }
:root[data-theme="dark"]{ --night:#12161f; --panel:#1a2030; --sink:#0d111a;
  --edge:#2b3446; --ink:#eef1f7; --haze:#8b95ab }
@property --glow{ syntax:"<number>"; inherits:false; initial-value:0 }

/* ───────────  base  ─────────── */
*{ box-sizing:border-box }
[hidden]{ display:none !important }
html,body{ margin:0; background:var(--night); color:var(--ink) }
body{ font:400 15px/1.5 var(--sans); -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left) }
button{ font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent }
h2{ font:500 .82rem/1.3 var(--sans); letter-spacing:.02em; color:var(--haze); margin:0 0 10px }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em;
  background:var(--sink); padding:1px 5px; border-radius:5px }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86rem }
.note{ color:var(--haze); font-size:.8rem }
.error{ color:var(--bad); font-size:.85rem }
[data-lucide]{ width:1.05em; height:1.05em; stroke-width:2 }

/* ───────────  sign in  ─────────── */
#login{ min-height:100dvh; display:grid; place-items:center; padding:24px }
.login{ width:100%; max-width:340px; display:flex; flex-direction:column; gap:14px }
.wordmark{ display:flex; align-items:center; gap:8px; font:700 1.15rem/1 var(--meter); letter-spacing:.01em }
.lede{ margin:0; color:var(--haze) }
.notice{ margin:0; padding:12px; border-radius:10px; background:var(--sink);
  border:1px solid var(--edge); font-size:.82rem; line-height:1.55 }
#login-form{ display:flex; flex-direction:column; gap:12px }
label{ display:flex; flex-direction:column; gap:5px; font-size:.78rem; color:var(--haze) }
input{ font:400 1rem var(--sans); padding:11px 13px; border-radius:10px; color:var(--ink);
  background:var(--sink); border:1px solid var(--edge) }
input:focus-visible{ outline:2px solid var(--sun); outline-offset:1px }
#login-form button{ margin-top:2px; padding:12px; border:0; border-radius:10px; font-weight:500;
  background:linear-gradient(135deg,var(--car-a),var(--car-b)); color:#062522 }

/* ───────────  shell  ─────────── */
#app{ max-width:460px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px }
.topbar .wordmark{ font-size:1rem }
.icon-btn{ background:0; border:0; padding:6px; color:var(--haze); display:grid; place-items:center }
.icon-btn [data-lucide]{ width:20px; height:20px }
main{ flex:1; padding:4px 16px 96px }
.view{ display:flex; flex-direction:column; gap:18px }

.strip{ margin:0 16px 8px; padding:9px 12px; border-radius:9px; font-size:.8rem; line-height:1.4 }
.strip-sim{ background:color-mix(in srgb,var(--sun) 16%,var(--panel)); border:1px solid color-mix(in srgb,var(--sun) 40%,var(--edge)) }
.strip-net{ background:color-mix(in srgb,var(--bad) 15%,var(--panel)); border:1px solid color-mix(in srgb,var(--bad) 40%,var(--edge)) }
.strip-hold{ background:color-mix(in srgb,var(--bad) 22%,var(--panel));
  border:1px solid var(--bad); display:flex; align-items:center; justify-content:space-between; gap:10px }
.strip-hold button{ flex:none; padding:6px 12px; border-radius:8px; border:1px solid var(--bad);
  background:transparent; color:var(--bad); font-weight:600; font-size:.78rem }

/* ───────────  hero — the instrument  ─────────── */
.hero{
  text-align:center; padding:34px 18px 26px; border-radius:18px;
  border:1px solid var(--edge); background:var(--panel);
  background-image:radial-gradient(135% 100% at 50% -8%,
      color-mix(in srgb, var(--glow-color,var(--sun)) calc(var(--glow) * 70%), transparent) 0%,
      transparent 70%);
  transition:--glow .9s ease;
}
.hero-mode{ margin:0 0 10px; font:500 .82rem/1 var(--sans); letter-spacing:.04em; color:var(--haze) }
.hero-read{ margin:0; display:flex; align-items:baseline; justify-content:center; gap:.12em;
  font:700 clamp(3rem,17vw,4.2rem)/1 var(--meter);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.hero-unit{ font-size:1.5rem; font-weight:500; color:var(--haze); letter-spacing:0 }
.hero-say{ margin:12px 0 0; color:var(--ink); font-size:.92rem }

/* ───────────  car card  ─────────── */
.car{ background:var(--panel); border:1px solid var(--edge); border-radius:16px;
  padding:16px; display:flex; flex-direction:column; gap:14px }
.car-state{ display:flex; align-items:center; gap:12px }
.car-state-txt{ flex:1; min-width:0 }
.car-icon{ flex:none; width:22px; height:22px; color:var(--haze); display:grid; place-items:center }
.car-icon svg{ width:22px; height:22px }
.car-state.live .car-icon{ color:var(--car) }
#car-state-text{ font:500 1rem/1.25 var(--sans) }
#car-state-sub{ display:block; margin-top:1px }
.car-wake{ flex:none; padding:7px 13px; border-radius:9px; border:1px solid var(--car);
  background:color-mix(in srgb,var(--car) 14%,transparent); color:var(--car); font-weight:500 }
.car-wake:disabled{ opacity:.55 }
.car-refresh{ flex:none; border:0; background:0; color:var(--haze); padding:5px;
  display:grid; place-items:center }
.car-refresh [data-lucide],.car-refresh svg{ width:18px; height:18px }
.car-refresh:disabled{ opacity:.5 }
.car-refresh.spinning svg{ animation:spin .8s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
#car.stale .batt-cell{ opacity:.6 }

.batt{ display:flex; align-items:center; gap:9px }
.batt-cell{ position:relative; flex:1; height:24px; border-radius:7px;
  background:var(--sink); border:1.5px solid var(--edge); overflow:hidden }
.batt-fill{ position:absolute; inset:2px auto 2px 2px; width:0; border-radius:5px;
  background:var(--car); transition:width .6s ease, background .3s ease }
/* charge sweep: a moving highlight painted onto the fill's own background —
   background-position animation runs on the main thread, so it starts on load
   and never freezes waiting for a compositor frame (the translate/layer version
   did, on macOS). */
.batt-fill.charging{
  background-image:linear-gradient(100deg, transparent 22%,
    color-mix(in srgb,#fff 82%,transparent) 46%,
    color-mix(in srgb,#fff 82%,transparent) 54%, transparent 78%);
  background-repeat:no-repeat;
  background-size:220% 100%;
  animation:batt-sweep 1.4s linear infinite }
@keyframes batt-sweep{ from{ background-position:130% 0 } to{ background-position:-30% 0 } }
.batt-fill.low{ background:var(--bad) }
.batt-fill.low.charging{ background-image:none; animation:none }
@media (prefers-reduced-motion:reduce){
  .batt-fill.charging{ animation:none; background-image:none } }
.batt-mark{ position:absolute; top:0; bottom:0; width:2px; margin-left:-1px;
  background:var(--ink); mix-blend-mode:difference }
.batt-nub{ flex:none; width:4px; height:11px; border-radius:0 3px 3px 0; background:var(--edge) }
.batt-pct{ font:700 1.4rem/1 var(--meter); font-variant-numeric:tabular-nums;
  min-width:3.4ch; text-align:right }

/* ───────────  chart  ─────────── */
.chart{ margin:0 }
.chart figcaption{ display:flex; justify-content:space-between; align-items:center;
  font-size:.78rem; color:var(--haze); margin-bottom:8px }
.range{ display:inline-flex; gap:2px; background:var(--sink); border-radius:8px; padding:2px }
.range button{ border:0; background:0; color:var(--haze); font:500 .72rem var(--sans);
  padding:4px 9px; border-radius:6px }
.range button.on{ background:var(--panel); color:var(--ink) }
.chart-box{ height:150px; position:relative }
.chart .key{ display:flex; align-items:center; gap:7px; margin:7px 0 0;
  font-size:.72rem; color:var(--haze) }
.key .k{ width:9px; height:9px; border-radius:2px; display:inline-block }
.key .k-sun{ background:var(--sun) }
.key .k-car{ background:var(--grid); border-radius:99px; height:2px; width:12px }

/* ───────────  readout rows (not cards)  ─────────── */
.readout{ margin:0; display:flex; flex-direction:column }
.readout > div{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  padding:13px 2px; border-top:1px solid var(--edge) }
.readout > div:first-child{ border-top:0 }
.readout dt{ font:500 .8rem/1 var(--sans); color:var(--haze) }
.readout dd{ margin:0; font:500 1.5rem/1 var(--meter); font-variant-numeric:tabular-nums }
.readout dd.warm{ color:var(--sun) }
.readout dd.note{ flex-basis:100%; text-align:right; font:400 .76rem/1.3 var(--sans);
  color:var(--haze); margin-top:5px }
.bar{ flex-basis:100%; height:4px; border-radius:99px; background:var(--sink);
  overflow:hidden; margin-top:10px }
.bar span{ display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--dusk),var(--sun)); transition:width .6s ease }

/* ───────────  decision log  ─────────── */
.decision{ background:var(--sink); border:1px solid var(--edge); border-radius:12px; padding:13px 14px }
.decision-head{ margin:0 0 7px; display:flex; align-items:center; gap:8px;
  font:500 .76rem/1 var(--sans); letter-spacing:.03em; color:var(--haze) }
.pill{ font-size:.66rem; padding:2px 7px; border-radius:99px; letter-spacing:.02em;
  background:color-mix(in srgb,var(--sun) 20%,transparent); color:var(--sun) }
#d-text{ margin:0; color:var(--ink) }
#d-meta{ margin:6px 0 0 }

/* ───────────  override switches  ─────────── */
.switches{ display:flex; flex-direction:column; gap:12px }
.sw{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:14px; align-items:center; text-align:left;
  padding:18px 16px; border-radius:14px; border:1px solid var(--edge);
  background:linear-gradient(180deg,var(--panel),var(--sink));
}
.sw.applying::after{
  content:"applying…"; position:absolute; top:13px; right:15px;
  font:500 .68rem/1 var(--sans); letter-spacing:.03em; color:var(--haze);
  animation:applypulse 1.4s ease-in-out infinite;
}
@keyframes applypulse{ 50%{ opacity:.35 } }
@media (prefers-reduced-motion:reduce){ .sw.applying::after{ animation:none } }
.sw [data-lucide]{ grid-row:1/3; width:24px; height:24px; color:var(--haze) }
.sw b{ font:500 1rem/1.2 var(--sans) }
.sw small{ color:var(--haze); font-size:.8rem }
.sw.on{ border-color:var(--accent-c,var(--sun));
  box-shadow:inset 0 0 0 1px var(--accent-c,var(--sun)),
             0 0 24px -6px color-mix(in srgb,var(--accent-c,var(--sun)) 60%,transparent) }
.sw.on [data-lucide]{ color:var(--accent-c,var(--sun)) }
.sw[data-mode="smart"].on{ --accent-c:var(--sun) }
.sw[data-mode="solar"].on{ --accent-c:var(--sun) }
.sw[data-mode="overcast"].on{ --accent-c:color-mix(in srgb,var(--sun) 55%,var(--grid)) }
.sw[data-mode="max"].on{ --accent-c:var(--dusk) }
.sw[data-mode="off"].on{ --accent-c:var(--grid) }

/* compact variant — settings' "Default mode" picker: a row of small chips,
   icon + label only, no description */
.switches.compact{ flex-direction:row; flex-wrap:wrap; gap:8px; margin-top:12px }
.sw.compact{ display:flex; align-items:center; width:auto; padding:9px 14px 9px 12px;
  gap:8px; border-radius:10px }
.sw.compact [data-lucide]{ width:16px; height:16px }
.sw.compact b{ font-size:.85rem }
.sw.compact small{ display:none }

.auto-status{ margin:10px 2px 0; font-size:.8rem; color:var(--haze) }
.auto-status.cloudy{ color:color-mix(in srgb,var(--sun) 55%,var(--grid)) }

.dur{ background:var(--sink); border:1px solid var(--edge); border-radius:12px; padding:14px }
.dur-q{ margin:0 0 10px; font-size:.85rem; color:var(--haze) }
.dur-opts{ display:flex; flex-direction:column; gap:8px }
.dur-opts + .dur-opts{ margin-top:8px }
.dur-opts button{ padding:12px; border-radius:10px; border:1px solid var(--edge); background:var(--panel); font-weight:500 }
.ov-now{ margin:0; padding:13px 14px; border-radius:11px; background:var(--sink);
  border:1px solid var(--edge); font-size:.88rem; display:flex; justify-content:space-between; align-items:center; gap:10px }
.ov-now button{ padding:8px 12px; border-radius:9px; border:1px solid var(--edge); background:var(--panel); font-size:.82rem; white-space:nowrap }

/* ───────────  settings  ─────────── */
.panel{ background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:16px }
.panel h2{ margin:0 0 4px }
.switch-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px }
.switch-row .note{ margin:4px 0 0 }
.switch-row h3{ margin:0; font-size:.92rem; font-weight:600 }
.switch-row + .switch-row{ margin-top:14px }
.toggle{ flex:none; position:relative; width:46px; height:28px; margin-top:2px }
.toggle input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
.toggle span{ position:absolute; inset:0; border-radius:999px; background:var(--sink);
  border:1px solid var(--edge); transition:background .2s }
.toggle span::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:var(--haze); transition:transform .2s, background .2s }
.toggle input:checked + span{ background:color-mix(in srgb,var(--sun) 30%,var(--sink));
  border-color:var(--sun) }
.toggle input:checked + span::after{ transform:translateX(18px); background:var(--sun) }
.toggle input:focus-visible + span{ outline:2px solid var(--sun); outline-offset:2px }
.kv{ margin:0; display:grid; grid-template-columns:1fr auto; gap:7px 16px; font-size:.86rem }
.kv dt{ color:var(--haze) }
.kv dd{ margin:0; text-align:right; font-family:var(--meter); font-variant-numeric:tabular-nums }
#signout,.tune-actions button{ padding:11px 15px; border-radius:10px; border:1px solid var(--edge); background:var(--sink); font-weight:500 }
.minor{ background:transparent !important; color:var(--haze) !important }
#notify-msg,#tune-msg{ margin:8px 0 0 }
.tune-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px }
.tune-row label{ font-size:.9rem }
.tune-in{ display:inline-flex; align-items:center; gap:6px }
.tune-in input{ width:90px; text-align:right; padding:7px 9px; border-radius:8px;
  border:1px solid var(--edge); background:var(--sink); font-family:var(--meter) }
.tune-in i{ color:var(--haze); font-style:normal; font-size:.85rem; width:1.2em }
.tune-actions{ display:flex; gap:8px; margin-top:14px }

/* ───────────  history  ─────────── */
.key .k-into{ background:var(--dusk) }
.key .k-grid{ background:var(--grid) }
.htot{ margin-bottom:12px }
.htot dd{ font-size:1.35rem }
.hsessions{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.hsess{ padding:11px 0; border-top:1px solid var(--edge) }
.hsess:first-child{ border-top:0; padding-top:2px }
.hsess-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px }
.hsess-when{ font:500 .9rem/1.2 var(--sans) }
.hsess-kwh{ font:500 1rem/1 var(--meter); font-variant-numeric:tabular-nums }
.hsess-bar{ height:5px; border-radius:99px; min-width:3px; margin:7px 0 5px; overflow:hidden;
  background:color-mix(in srgb,var(--dusk) 55%,var(--sink)) }
.hsess-bar span{ display:block; height:100%; background:var(--grid); border-radius:99px }
.hsess-sub{ display:block }

#ht-sessions, #ht-decisions{ display:flex; flex-direction:column; gap:18px }
.subtabs{ display:flex; gap:2px; background:var(--sink); border-radius:9px; padding:3px }
.subtabs button{ flex:1; border:0; background:0; color:var(--haze);
  font:500 .84rem var(--sans); padding:7px 0; border-radius:7px }
.subtabs button.on{ background:var(--panel); color:var(--ink) }
.hcap{ display:flex; justify-content:flex-end }

.dlog{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.alog{ padding:10px 0; border-top:1px solid var(--edge) }
.alog:first-child{ border-top:0; padding-top:2px }
.alog-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px }
.alog-when{ font:500 .9rem/1.2 var(--sans) }
.alog-chip{ font:500 .72rem/1 var(--sans); letter-spacing:.02em; padding:3px 8px; border-radius:99px;
  white-space:nowrap; color:var(--sun); background:color-mix(in srgb,var(--sun) 15%,transparent) }
.alog.overcast .alog-chip{ color:color-mix(in srgb,var(--sun) 55%,var(--grid));
  background:color-mix(in srgb,var(--grid) 20%,transparent) }
.alog.stale .alog-chip{ color:var(--haze); background:color-mix(in srgb,var(--haze) 16%,transparent) }
.alog.dl-start .alog-chip{ color:var(--sun); background:color-mix(in srgb,var(--sun) 15%,transparent) }
.alog.dl-stop .alog-chip{ color:var(--grid); background:color-mix(in srgb,var(--grid) 20%,transparent) }
.alog.dl-mode .alog-chip, .alog.dl-wake .alog-chip{ color:var(--haze);
  background:color-mix(in srgb,var(--haze) 16%,transparent) }
.alog-sub{ display:block; margin-top:3px }
.alog-data{ display:block; margin-top:3px; font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--haze) 85%,var(--ink)) }

/* ───────────  tab bar  ─────────── */
.tabs{ position:fixed; left:0; right:0; bottom:0; z-index:20;
  max-width:460px; margin:0 auto; display:flex;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  backdrop-filter:blur(12px); border-top:1px solid var(--edge);
  padding-bottom:env(safe-area-inset-bottom) }
.tabs button{ flex:1; border:0; background:0; padding:10px 0 9px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--haze); font-size:.7rem; font-weight:500 }
.tabs button [data-lucide]{ width:20px; height:20px }
.tabs button.on{ color:var(--sun) }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important } }