/* ammetrix: shared instrument surfaces and semantic energy colors. */
:root {
  color-scheme: dark;
  --paper:#090e16; --surface:#111923; --surface-raised:#182330;
  --ink:#e7eef7; --muted:#96a6ba; --line:#293646;
  --battery:#36dfc4; --solar:#ffc45b; --grid:#65a7ff; --load:#ff817b;
  --green:var(--battery); --gold:var(--solar); --blue:var(--grid);
  background:var(--paper); color:var(--ink); font-size:14px;
}
body,.energy-workspace {background:var(--paper);color:var(--ink)}
a {color:var(--grid)}
header,.app-header {background:var(--paper);border-bottom:1px solid var(--line);height:72px;padding:16px 28px}
.brand {display:inline-flex;align-items:center;gap:12px;color:var(--ink);font-size:27px;letter-spacing:-1.2px}
.brand span {margin:0}.brand-circuit {width:48px;height:28px;fill:none;stroke:var(--battery);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;margin:0}
h1,h2,h3 {color:var(--ink)}
h1 {font-size:30px;font-weight:650;letter-spacing:-1px}
p,.micro,.eyebrow,.header-caption,.hint {color:var(--muted)}
p {line-height:1.5}.eyebrow {font-size:10px;letter-spacing:1.6px}
article,.setup-card {background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px;box-shadow:none}
button,.google-login,.button {background:var(--surface-raised);border:1px solid var(--line);border-radius:5px;color:var(--ink);min-height:36px;padding:8px 12px;box-shadow:none}
button:hover:not(:disabled),.google-login:hover {background:#24364a;border-color:#526b88;box-shadow:none}
.primary,.client-card .automatic-toggle,button[aria-current=step] {background:var(--battery);border-color:var(--battery);color:#07201d;font-weight:700}
.primary:hover:not(:disabled),.client-card .automatic-toggle:hover:not(:disabled) {background:#76eedc;color:#07201d}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus,select:focus {outline:2px solid var(--grid);outline-offset:3px}
input,select,.fields input,.fields select {background:#0c131d;border:1px solid #3b4c60;border-radius:5px;color:var(--ink);min-height:38px;padding:8px;font-size:13px}
input[type=checkbox] {accent-color:var(--battery);min-height:16px}
label {color:#bcc9da;font-size:11px;font-weight:500}
.badge,.pill,.pill.amber {margin:0;padding:4px 7px;border:1px solid var(--line);border-radius:4px;background:#1b2938;color:#b7c8dc;font-size:10px;letter-spacing:.5px}
.pill.amber {color:var(--solar);background:#30271b;border-color:#64502e}
.system-status {display:flex;align-items:center;gap:24px;min-height:38px;padding:8px 28px;background:#0e1621;border-bottom:1px solid var(--line);font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.system-status>span:first-child {color:var(--battery)}.system-status>span:nth-child(2) {color:var(--solar)}
.status-context {margin-left:auto;font-size:9px;letter-spacing:1.3px}
.workspace-shell {max-width:1800px;grid-template-columns:200px minmax(0,1fr)}
.sidebar {padding:26px 16px;min-height:calc(100vh - 110px);background:#0c121c}
.sidebar nav {gap:5px}.sidebar nav button {border:1px solid transparent;border-radius:5px;color:var(--muted);padding:11px 10px}
.sidebar nav button[aria-current=page],.energy-workspace .sidebar nav button[aria-current=page]:hover {background:#152b30;border-color:#265249;color:var(--battery)}
.sidebar nav button:hover:not(:disabled) {background:var(--surface-raised);color:var(--ink)}
.sidebar-foot {padding:35px 10px 10px}.sidebar-foot a,.text-button {color:var(--battery)}
.status-dot {background:var(--battery);box-shadow:0 0 10px #36dfc433}
main {padding:26px 30px;max-width:1500px}.workspace-heading {margin-bottom:20px}
.site-select {min-width:200px}.site-select select {margin-top:3px}
.overview-grid {grid-template-columns:1.15fr 1fr;gap:14px;align-items:stretch}
.battery-panel {background:radial-gradient(ellipse at 40% 35%,#17343166,transparent 70%),var(--surface);border-top:2px solid var(--battery)}
.solar-panel {background:var(--surface);border-top:2px solid var(--solar)}
.next-panel {background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--grid);color:var(--ink)}
.next-panel p,.next-panel .section-heading,.next-panel .pill {color:var(--muted)}
.next-panel .text-button {color:var(--grid)}.next-panel strong {font-size:27px;font-weight:600}
.storm-panel {background:var(--surface);border-top:2px solid #8677c8}
.battery-display {padding:12px 0 20px;gap:24px}
.battery-gauge {background:conic-gradient(var(--battery) var(--soc,0%),#26343e 0);box-shadow:0 0 35px #36dfc40a;padding:5px;width:172px;height:172px}
.battery-gauge>div {background:#101c24;border:7px solid #111923}
.battery-gauge strong {color:var(--battery);font-size:43px;font-weight:600}
.battery-gauge span {color:var(--muted)}
.battery-reading strong,.metric-strip strong,.interval-detail strong {font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.battery-specs {padding-top:12px}
.metric-strip {gap:0;margin:16px 0;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.metric-strip article {border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;margin:0;padding:18px 22px}
.metric-strip article:last-child {border-right:0}.metric-strip strong {font-size:26px}
.section-heading {margin-bottom:12px;gap:12px}
.interval-detail {background:#0c141e;border:1px solid var(--line);border-radius:5px;padding:12px;gap:10px}
.solar-panel .interval-detail {background:transparent;border:0;padding:8px 0}.solar-panel .interval-detail strong {color:var(--solar);font-size:28px}
.client-card {padding:16px 0}.client-card .automatic-status,.client-card .manual-controls,#pairing,pre {background:#0c151e;border-radius:5px;color:var(--muted)}
.client-card .actions button:last-child,.stop {color:var(--load)}
#message,.demo-banner {background:#132736;border:1px solid #2b4a60;color:#bdd3e7;border-radius:5px;padding:10px 14px;margin:0 0 16px}
.demo-banner {font-size:10px;letter-spacing:.7px}
#history-sync:empty {display:none}
.chart-legend,[data-view=dispatch] .chart-legend {font-size:11px;gap:16px}
svg text,#dispatch-chart text,#price-chart text,#cloud-chart text {fill:var(--muted);font-size:13px}
svg .grid {stroke:var(--line)}svg .selection {stroke:var(--ink)}
.charge-key,.discharge-key,.soc-key {color:var(--battery)}
.solar-key,.solar-fill-key {color:var(--solar)}.load-key,.load-fill-key {color:var(--load)}
.price-key {color:var(--grid)}.total-key {color:#b7a1ff}.saved-charge-key {color:#83baff}.saved-discharge-key {color:var(--battery)}
.dispatch-comparison-controls {font-size:11px;color:var(--muted);gap:12px}.dispatch-comparison-controls input {accent-color:var(--battery)}
.telemetry-pane {border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.telemetry-pane svg {margin:0}#price-chart,#cloud-chart {touch-action:pan-y;cursor:crosshair}
#dispatch-cursor-help {font-size:11px}#interval-detail {grid-template-columns:repeat(6,minmax(0,1fr))}
#interval-detail strong {font-size:13px}.dispatch-inspection-window {font-size:11px}
.table-scroll,.table-wrap {border:1px solid var(--line);border-radius:5px}
th {background:#182330;color:#a8bad0;font-size:10px;text-transform:uppercase;letter-spacing:.6px}td,th {padding:10px 12px;border-bottom:1px solid var(--line)}
tbody tr:hover {background:#182330}tbody tr:last-child td {border-bottom:0}
.tariff-card {border:1px solid var(--line);border-top:2px solid var(--grid);border-radius:5px;padding:16px}.tariff-card strong {color:var(--grid)}
.fields {gap:14px;margin:16px 0}.fixed-charge {grid-template-columns:2fr 1fr auto;align-items:end}
.tariff-import {background:#0c141e;border:1px solid var(--line);border-radius:5px;padding:16px}
.tariff-editor-scroll {overflow-x:auto;border:1px solid var(--line);border-radius:5px;margin-top:16px}
/* Real table semantics preserve row/column navigation and comparison. */
.tariff-editor {min-width:1050px;table-layout:fixed}
.tariff-editor th:nth-child(1) {width:130px}.tariff-editor th:nth-child(2) {width:110px}.tariff-editor th:nth-child(4) {width:145px}
.tariff-editor th:nth-child(8) {width:65px}.tariff-editor th:last-child {width:85px}
#tariffs .tariff-row {display:table-row;border:0;padding:0;margin:0}
#tariffs td {padding:10px 8px;vertical-align:top}
#tariffs label {font-size:0;gap:0;margin:0 0 5px}
#tariffs input,#tariffs select {font-size:12px;padding:6px;min-height:34px}
#tariffs button {font-size:11px;color:var(--load);padding:6px;min-height:34px}
.setup-card,.welcome-scene,.login-shell .welcome-scene {background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:none}
.welcome-copy h2,.login-shell h1 {color:var(--ink);font-weight:650}
.login-shell .welcome-scene {background:radial-gradient(ellipse at 85% 45%,#183d3b66,transparent 55%),var(--surface)}
.login-shell h1 {font-size:clamp(40px,5.3vw,68px);letter-spacing:-2.8px}
.login-shell .pill {color:var(--battery);background:transparent;border:0;padding:0;margin-bottom:22px}
.login-shell .welcome-copy>p,.welcome-points li,.welcome-copy .welcome-note,.setup-shell aside p {color:var(--muted)}
.login-trust {color:var(--muted)}.login-trust span:before {color:var(--battery)}
.scene-halo {background:radial-gradient(ellipse,#36dfc425,transparent 65%)}
.energy-platform {background:linear-gradient(140deg,#243849,#101b28);border-color:#415b70;box-shadow:-12px 16px 0 #182630,-13px 17px 0 #46616e,-30px 45px 35px #0008;border-radius:12px}
.battery-object {background:linear-gradient(120deg,#334c5b,#17252e);border-radius:6px;box-shadow:9px 4px 0 #0b151c,10px 5px 0 #486272,0 0 0 1px #597180}
.battery-object span {background:var(--battery);border-radius:1px;box-shadow:0 0 8px #36dfc433}.battery-object em {color:#d4f7ef;font-size:7px;letter-spacing:.5px}
.energy-path {background:var(--battery)}.scene-caption {color:var(--muted)}
.steps,.compatibility {background:#172330}.steps button[aria-current=step] {background:var(--battery);color:#07201d}
#steps li {color:var(--muted)}#steps li[aria-current] {color:var(--battery)}#steps li[aria-current]::before {background:var(--battery);border-color:var(--battery);color:#07201d}
.setup-actions {border-color:var(--line)}.setup-navigation {background:var(--paper)}.verification-card {background:var(--surface)}
.download {color:var(--battery)}#error {color:var(--load)}.skip-link {background:var(--surface);color:var(--ink)}
footer {color:var(--muted)}
@media(min-width:1500px) {main {padding:30px 40px}.battery-display {padding:16px 0 24px}}
@media(max-width:1100px) {.workspace-shell {grid-template-columns:175px minmax(0,1fr)}main {padding:24px}.overview-grid {grid-template-columns:1fr 1fr}.battery-display {flex-wrap:wrap;gap:16px}.battery-reading {text-align:center}#interval-detail {grid-template-columns:repeat(3,minmax(0,1fr))}.status-context {display:none}}
@media(max-width:720px) {
 header,.app-header {padding:14px 16px;height:64px}.brand,.playful-brand .brand-short {font-size:24px}.brand-circuit {width:36px}.brand span.brand-short {display:inline}
 .system-status {padding:8px 16px;gap:7px;align-items:flex-start;flex-direction:column;font-size:10px}
 .workspace-shell {display:block}.sidebar {min-height:0;padding:6px 10px;background:#0c121cf5;top:0}.sidebar nav button {padding:8px 4px;font-size:10px}
 main {padding:20px 14px}.workspace-heading {flex-direction:row;gap:12px;align-items:end}.workspace-heading h1 {font-size:24px}.site-select {min-width:0;width:45%}
 .overview-grid {grid-template-columns:1fr;gap:12px}.battery-display {flex-wrap:nowrap}.battery-reading {text-align:left}.battery-gauge {width:145px;height:145px}
 .metric-strip {grid-template-columns:1fr}.metric-strip article {border-right:0;border-bottom:1px solid var(--line);padding:14px}.metric-strip article:last-child {border-bottom:0}
 article {padding:16px;border-radius:7px}.section-heading {gap:8px}#interval-detail {grid-template-columns:repeat(2,minmax(0,1fr))}
 .fixed-charge {grid-template-columns:1fr 1fr}.login-shell .welcome-scene {padding:26px}.login-shell h1 {font-size:44px}.header-caption {display:none}
}
.dispatch-comparison-controls label {flex-direction:row;align-items:center}
.soc-key {color:var(--grid)}
#dispatch-history-note {margin:4px 0 8px}
#tariffs td:nth-child(3) label,#tariffs td:nth-child(4) label {font-size:9px;gap:3px}

.synchronized-charts {min-width:0;overflow-x:auto}
.mobile-chart-hint {display:none}
@media(max-width:720px) {
 .synchronized-charts>.chart-wrap,.synchronized-charts>.telemetry-pane {min-width:680px}
 .synchronized-charts>#dispatch-history-note {min-width:680px;max-width:680px}
 .mobile-chart-hint {display:block;color:var(--grid)}
 .app-header {gap:8px}.energy-workspace .brand {gap:6px}
 .energy-workspace .brand-circuit {width:28px}
 .energy-workspace .playful-brand .brand-short {font-size:22px}
 .energy-workspace #workspace-mode {font-size:8px;padding:4px}
}

.system-status {position:sticky;top:0;z-index:10}
@media(max-width:720px) {.system-status {min-height:50px}.sidebar {top:50px}}
.solar-line {stroke:var(--solar)}.load-line {stroke:var(--load)}
.chart-key span:first-child {color:var(--solar)}.chart-key span:nth-child(2) {color:var(--load)}

.provider-connection {display:flex;align-items:center;justify-content:space-between;gap:20px;border-left:2px solid var(--solar)}
.provider-connection h2 {margin:3px 0 6px}
.provider-connection p {margin:0}
.provider-connection .button {display:inline-flex;align-items:center;gap:12px;white-space:nowrap;text-decoration:none}
@media (max-width:600px) {.provider-connection {align-items:flex-start;flex-direction:column}}