/* Home Energy design system: dark, compact, numbers first. One set of sizes, colours and
   controls for desktop and iPhone (which becomes the native app's look). */
:root {
  --bg: #0b0b0c;
  --card: #161618;
  --card-hi: #1f1f22;
  --raised: #2a2a2e;
  --raised-hi: #3a3a3f;
  --line: rgb(255 255 255 / 0.06);
  --line-hi: rgb(255 255 255 / 0.12);
  --text: #f4f4f5;
  --text-2: #a0a0a8;
  --text-3: #85858e;
  /* Energy colours are only ever used for data. */
  --solar: #f5b83d;
  --battery: #3dd68c;
  --charge: #6ec3f2;
  --grid: #8fa8cc;
  --export: #ee8a5a;
  --vehicle: #b79cf5;
  --home: #f4f4f5;
  --danger: #ff6b5e;
  --radius: 16px;
  --radius-c: 10px;
  --control: 40px;
  --side-w: 232px;
  --tabs-h: 64px;
  color-scheme: dark;
}
@media (max-width: 899px) { :root { --control: 44px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
@media (max-width: 899px) { body { font-size: 15px; } }
a { color: var(--text); }
a:hover { color: #fff; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-only { display: none; }
@media (max-width: 899px) { .d-only { display: none !important; } .m-only { display: initial; } }

/* ---------- Shell: sidebar on desktop, tab bar on iPhone ---------- */
.shell { min-height: 100svh; display: flex; }
.side { position: sticky; top: 0; height: 100svh; width: var(--side-w); flex: none; padding: calc(24px + env(safe-area-inset-top)) 16px 24px calc(16px + env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 24px; border-inline-end: 1px solid var(--line); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 15px; }
.site-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: 12px; background: var(--card); min-width: 0; }
.site-card__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.site-card select { width: 100%; height: 32px; margin-top: 4px; border-radius: 8px; border: 1px solid var(--line-hi); background: var(--bg); padding: 0 8px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--radius-c); color: var(--text-2); font-weight: 500; text-decoration: none; }
.side-nav a:hover { color: var(--text); }
.side-nav a[aria-current='page'] { background: var(--card-hi); color: var(--text); }
.side__foot { margin-top: auto; }
.content { flex: 1; min-width: 0; }
.tabs { display: none; }
.mobile-site { display: none; }
@media (max-width: 899px) {
  .side { display: none; }
  .content { padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); }
  .tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 20; inset: auto 0 0 0; height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding: 6px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left)); background: rgb(22 22 24 / 0.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  .tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 500; color: var(--text-3); text-decoration: none; }
  .tabs a[aria-current='page'] { color: var(--text); }
  .mobile-site { display: block; padding: calc(12px + env(safe-area-inset-top)) 16px 0; }
  .mobile-site select { height: 36px; border-radius: 10px; border: 1px solid var(--line-hi); background: var(--card); padding: 0 10px; max-width: 100%; }
}

/* ---------- Pages ---------- */
.page { max-width: 1200px; margin: 0 auto; padding: 28px 32px 56px; display: flex; flex-direction: column; gap: 16px; }
.page--narrow { max-width: 880px; }
@media (max-width: 899px) {
  .page { padding: calc(20px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); gap: 12px; }
  .has-site-pick .page { padding-top: 12px; }
}
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.page-head__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
@media (max-width: 899px) { .title { font-size: 28px; } .page-head { padding: 8px 4px; } .page-head > .row { width: 100%; } .chart { padding-inline-end: 14px; } }
.sub { font-size: 12px; color: var(--text-2); }
.section-title { font-size: 13px; font-weight: 500; color: var(--text-2); padding: 8px 4px 0; }
.row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.span3 { grid-column: span 3; } .span4 { grid-column: span 4; } .span6 { grid-column: span 6; } .span8 { grid-column: span 8; } .span12 { grid-column: 1 / -1; }
@media (max-width: 1100px) { .span3 { grid-column: span 6; } .span4 { grid-column: span 6; } .span8 { grid-column: 1 / -1; } .span4.wide-md { grid-column: 1 / -1; } }
@media (max-width: 899px) { .grid { gap: 12px; } .span4, .span6, .span8 { grid-column: 1 / -1; } .span3, .m-half { grid-column: span 6 !important; } }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Cards, stats, lists ---------- */
.card { background: var(--card); border-radius: var(--radius); padding: 20px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.card--pad { padding: 24px; }
.card--flush { padding: 0; gap: 0; overflow: hidden; }
.card--hi { background: var(--card-hi); }
@media (max-width: 899px) { .card, .card--pad { padding: 16px; } .card--flush { padding: 0; } }
.card h2, .h2 { font-size: 15px; font-weight: 600; }
.card h3 { font-size: 14px; font-weight: 600; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.card-link { font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; }
a.card { text-decoration: none; color: var(--text); }
a.card:hover { background: var(--card-hi); color: var(--text); }
.lbl { font-size: 12px; font-weight: 500; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.stat { font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat--xl { font-size: 56px; line-height: 1; }
.stat--lg { font-size: 36px; }
.stat--md { font-size: 28px; }
.stat--sm { font-size: 22px; }
.stat small { margin-inline-start: 2px; font-size: 0.45em; color: var(--text-2); font-weight: 400; letter-spacing: 0; }
@media (max-width: 899px) { .stat--xl { font-size: 44px; } .stat--lg { font-size: 28px; } .stat--md { font-size: 24px; } }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }
@media (max-width: 899px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; } }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--card-hi); color: var(--text-2); white-space: nowrap; }
.pill--ok { background: rgb(61 214 140 / 0.14); color: var(--battery); }
.pill--warn { background: rgb(245 184 61 / 0.14); color: var(--solar); }
.pill--export { background: rgb(238 138 90 / 0.14); color: var(--export); }
.pill--charge { background: rgb(110 195 242 / 0.14); color: var(--charge); }
.pill--bad { background: rgb(255 107 94 / 0.14); color: var(--danger); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.divider { height: 1px; background: var(--line); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.kv:first-child { border-top: 0; }
.kv--total { font-weight: 600; }
.progress { height: 6px; border-radius: 999px; background: var(--card-hi); overflow: hidden; }
.progress div { height: 100%; border-radius: 999px; background: var(--text); }
.mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.mini-bars span { flex: 1; border-radius: 2px; background: var(--solar); min-height: 2px; }
.mini-bars span.later { background: rgb(245 184 61 / 0.3); }

/* Grouped list rows */
.list { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; width: 100%; background: none; border-inline: 0; border-bottom: 0; text-align: start; font: inherit; }
.list-row:first-child { border-top: 0; }
.list-row__ico { width: 30px; height: 30px; border-radius: 8px; background: var(--card-hi); display: grid; place-items: center; flex: none; }
.chev { color: var(--text-3); flex: none; }

/* ---------- Buttons and controls ---------- */
.btn { min-height: var(--control); padding: 0 16px; border-radius: var(--radius-c); border: 0; background: var(--raised); color: var(--text); font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn:hover { background: var(--raised-hi); color: var(--text); }
.btn--primary { background: var(--text); color: var(--bg); font-weight: 600; }
.btn--primary:hover { background: #fff; color: var(--bg); }
.btn--danger { background: rgb(255 107 94 / 0.12); color: var(--danger); }
.btn--danger:hover { background: rgb(255 107 94 / 0.2); color: var(--danger); }
.btn--ghost { background: transparent; color: var(--text-2); padding: 0 8px; }
.btn--ghost:hover { background: var(--card-hi); }
.btn--icon { width: var(--control); padding: 0; }
.btn--lg { min-height: 48px; font-size: 15px; border-radius: 12px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-link { background: none; border: 0; color: var(--text-2); font-weight: 500; cursor: pointer; padding: 8px 0; min-height: 36px; text-decoration: none; }
.btn-link:hover { color: var(--text); }
.btn-link--danger { color: var(--danger); }

.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--card-hi); border-radius: var(--radius-c); max-width: 100%; }
.segmented button, .segmented label { position: relative; min-height: calc(var(--control) - 6px); padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.segmented button[aria-pressed='true'], .segmented label:has(input:checked) { background: var(--raised-hi); color: var(--text); }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 1px; }
.segmented button:disabled { opacity: 0.45; cursor: not-allowed; }
.segmented--fill { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
@media (max-width: 899px) { .segmented--m-fill { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; } .segmented--m-fill button { padding: 0 4px; } }

.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; flex: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { width: 51px; height: 31px; border-radius: 999px; background: var(--raised-hi); position: relative; transition: background 0.2s; flex: none; }
.switch__track::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }
.switch input:checked + .switch__track { background: var(--battery); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
[dir='rtl'] .switch input:checked + .switch__track::after { transform: translateX(-20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--text); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) { .switch__track, .switch__track::after { transition: none; } }

.setting { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.setting:first-child { border-top: 0; padding-top: 0; }
.setting:last-child { padding-bottom: 0; }
.setting__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.setting__name { font-weight: 500; }
@media (max-width: 899px) { .setting--wrap { flex-wrap: wrap; } .setting--wrap .segmented { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

input[type='range'] { width: 100%; min-height: 32px; accent-color: var(--text); }

.form-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 20px; }
.form-grid > .field { flex: none; max-width: 100%; }
/* Hints may run a little wider than a short input before wrapping. */
.form-grid > .field > .small { max-width: 22rem; }
.form-grid > div:not(.field) { flex: none; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field legend { font-size: 13px; font-weight: 500; color: var(--text); }
.field .small { color: var(--text-2); font-weight: 400; }
.field input, .field select, .daynav__date, .copy input, .boost-num, .boost-sel { min-height: var(--control); padding: 0 12px; border-radius: var(--radius-c); border: 1px solid var(--line-hi); background: var(--bg); color: var(--text); width: 100%; }
.field select, .boost-sel { appearance: none; -webkit-appearance: none; padding-inline-end: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a0a0a8' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
[dir='rtl'] .field select, [dir='rtl'] .boost-sel { padding-inline: 12px 34px; background-position: left 12px center; }
.field input:focus, .field select:focus { border-color: var(--text-2); }
.field input:disabled, .field select:disabled, .boost-num:disabled, .boost-sel:disabled, .is-off input { opacity: 0.45; cursor: not-allowed; }
.radio { display: flex; gap: 10px; align-items: center; min-height: 36px; }
.radio input, .checks input:is([type='checkbox'], [type='radio']), .check input { width: 18px; height: 18px; accent-color: var(--text); flex: none; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.checks label { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.copy { display: flex; flex-wrap: wrap; gap: 8px; }
.copy input { flex: 1 1 220px; min-width: 0; width: auto; }
.copy--fit input { flex: 0 1 auto; }
/* Input widths sized to what goes in them. */
.field input.w-xs, input.w-xs { width: 6rem; }
.field input.w-sm, input.w-sm { width: 8rem; }
.field input.w-time, input.w-time { width: 8.5rem; }
.field input.w-date, input.w-date { width: 10.5rem; }
.field input.w-md, .field select.w-md, input.w-md, select.w-md { width: 13rem; }
.field input.w-lg, input.w-lg { width: 20rem; }
.field input.w-xl, input.w-xl { width: 32rem; }
.w-xs, .w-sm, .w-time, .w-date, .w-md, .w-lg, .w-xl { max-width: 100%; }
.btn--sm { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-row--end { justify-content: flex-end; flex-wrap: nowrap; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: start; font-weight: 500; font-size: 12px; color: var(--text-2); padding: 8px 12px 8px 0; }
.table td { padding: 12px 12px 12px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.table td:last-child, .table th:last-child { padding-inline-end: 0; }
.table-wrap { overflow-x: auto; }

.notice { padding: 12px 16px; border-radius: 12px; background: var(--card-hi); font-size: 14px; }
.notice--error { background: rgb(255 107 94 / 0.12); color: #ffd2cd; }
.notice--info > svg { flex: none; margin-top: 1px; }
.notice--info { display: flex; gap: 12px; align-items: flex-start; background: var(--bg); color: var(--text-2); font-size: 13px; }
.empty { text-align: center; padding: 48px 24px; align-items: center; }

/* ---------- Live: power flow ---------- */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr); grid-template-rows: auto 56px auto 56px auto; align-items: center; justify-items: center; row-gap: 6px; padding: 8px 0; }
.node { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.node__ring { width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--raised); display: grid; place-items: center; background: var(--card-hi); }
.node__ring--home { width: 100px; height: 100px; border-color: var(--text); background: #232326; }
.node__value { font-size: 20px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.node__ring--home + .node__value { font-size: 24px; }
.node__label { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.link { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.link--v { height: 100%; flex-direction: row; justify-content: center; }
.link__kw { font-weight: 500; font-variant-numeric: tabular-nums; }
.link__line { border-radius: 2px; }
.link--h .link__line { width: 100%; height: 4px; }
.link--v .link__line { width: 4px; height: 100%; }
.link__line--idle { background: none; border-top: 2px dashed var(--raised-hi); }
.link--h .link__line--idle { height: 0; }
.link--v .link__line--idle { border-top: 0; border-inline-start: 2px dashed var(--raised-hi); width: 0; }
.link__line--flow { --dash: 18px; animation: flow-x 0.8s linear infinite; }
.link--h .link__line--flow { background: repeating-linear-gradient(90deg, var(--c) 0 10px, rgb(255 255 255 / 0.06) 10px var(--dash)); }
.link--v .link__line--flow { background: repeating-linear-gradient(180deg, var(--c) 0 10px, rgb(255 255 255 / 0.06) 10px var(--dash)); animation-name: flow-y; }
.link__line--rev { animation-direction: reverse; }
@keyframes flow-x { from { background-position: 0 0; } to { background-position: var(--dash) 0; } }
@keyframes flow-y { from { background-position: 0 0; } to { background-position: 0 var(--dash); } }
[dir='rtl'] .link--h .link__line--flow { animation-direction: reverse; }
[dir='rtl'] .link--h .link__line--rev { animation-direction: normal; }
@media (prefers-reduced-motion: reduce) { .link__line--flow { animation: none; } }
.flow-vlabel { justify-self: start; font-size: 12px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.flow-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.flow-key__group { display: flex; align-items: center; gap: 14px; }
.flow-key__group b { color: var(--text); font-weight: 500; }
.flow-key__item { display: inline-flex; align-items: center; gap: 6px; }
.flow-key__sw { width: 18px; height: 4px; border-radius: 2px; display: inline-block; flex: none; }
@media (max-width: 899px) {
  .flow { grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr) minmax(0, 1fr) minmax(0, 0.55fr) minmax(0, 1fr); grid-template-rows: auto 30px auto 30px auto; row-gap: 4px; padding: 0; }
  .node { gap: 4px; }
  .node__ring { width: 54px; height: 54px; }
  .node__ring svg { width: 22px; height: 22px; }
  .node__ring--home { width: 70px; height: 70px; }
  .node__ring--home svg { width: 30px; height: 30px; }
  .node__value, .node__ring--home + .node__value { font-size: 15px; font-weight: 400; }
  .node__label { font-size: 11px; }
  .link--h > span, .flow-vlabel { display: none; }
  .link--h .link__line--flow { height: 3px; }
  .link--v .link__line--flow { width: 3px; }
  .flow-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 12px; font-size: 11px; }
  .flow-key__group { flex-direction: column; align-items: flex-start; gap: 4px; }
  .flow-key__group b { font-size: 12px; }
  .flow-key__sw { width: 14px; height: 3px; }
}

/* Live: flow on the left, a column of cards on the right that ends level with it. */
.live-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.live-side > * { flex: none; }
/* The Powerwall card takes any spare height so the column ends level with the flow. */
.live-side > #battery { flex: 1 0 auto; min-height: 400px; justify-content: space-between; gap: 16px; }
.live-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.live-pair > .card { padding: 16px; min-width: 0; }
.live-pair .stat--lg { font-size: 26px; }
.pw-status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: end; }
.pw-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (min-width: 1101px) { .stats--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } }
.live-flow #flow { flex: 1; display: flex; flex-direction: column; }
.live-flow .flow { flex: 1; grid-template-rows: auto minmax(56px, 1fr) auto minmax(56px, 1fr) auto; }
.pw-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
@media (max-width: 1100px) {
  .live-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-side__wide, .live-pair { grid-column: 1 / -1; }
  .live-side > #battery { min-height: 0; }
}
@media (max-width: 899px) {
  .live-side, .live-pair { gap: 12px; }
  .live-flow .flow { grid-template-rows: auto 30px auto 30px auto; }
}

/* Powerwall bar: fill = charge, dashed line = backup reserve */
.pwbar { position: relative; height: 56px; border-radius: 12px; background: var(--card-hi); overflow: hidden; }
.pwbar__fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--battery); display: flex; align-items: center; justify-content: flex-end; padding-inline-end: 12px; color: var(--bg); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; transition: width 0.6s ease; }
.pwbar__reserve { position: absolute; inset-block: 0; border-inline-start: 2px dashed rgb(11 11 12 / 0.55);
  /* Gap in the middle so the line never runs through the kWh label. */
  -webkit-mask: linear-gradient(#000 0 28%, transparent 28% 72%, #000 72%); mask: linear-gradient(#000 0 28%, transparent 28% 72%, #000 72%); }
.pwbar__reserve--above { border-color: var(--text-3); }
.pwbar__cap { position: absolute; inset-block: 0; inset-inline-end: 12px; display: flex; align-items: center; font-size: 13px; color: var(--text-2); }
@media (max-width: 899px) { .pwbar { height: 40px; border-radius: 10px; } }
@media (prefers-reduced-motion: reduce) { .pwbar__fill { transition: none; } }

/* ---------- Charts ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sw--solar { background: var(--solar); }
.sw--battery { background: var(--battery); }
.sw--grid { background: var(--grid); }
.sw--off { width: 14px; border-radius: 2px; background: #1c1c20; border: 1px solid var(--line-hi); }
.sw--forecast { width: 14px; height: 2px; border-radius: 1px; background: var(--text); }
.chart { margin-top: 4px; display: flex; gap: 8px; }
.chart__axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--text-3); text-align: end; width: 32px; flex: none; }
.chart__body { flex: 1; min-width: 0; position: relative; }
.chart__grid { position: absolute; inset: 0 0 auto 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.chart__grid div { border-top: 1px solid var(--line); }
.chart__grid div:last-child { border-color: var(--line-hi); }
.chart__bars { position: relative; display: flex; align-items: flex-end; }
.bar { flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 4px 4px 0 0; }
.bar--off { background: rgb(255 255 255 / 0.025); }
.bar__stack { width: 74%; max-width: 36px; display: flex; flex-direction: column; border-radius: 3px 3px 0 0; overflow: hidden; }
.bar[aria-pressed='true'] .bar__stack { outline: 2px solid var(--text); outline-offset: 2px; }
.bar__seg--solar { background: var(--solar); }
.bar__seg--battery { background: var(--battery); }
.bar__seg--grid { background: var(--grid); }
.bar__seg + .bar__seg { border-top: 2px solid var(--card); }
.chart__ticks { margin-top: 8px; display: flex; font-size: 11px; color: var(--text-3); }
.chart__ticks span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; }
.readout { font-size: 13px; min-height: 20px; }
.bar--fc { position: relative; }
.fc-mark { position: absolute; inset-inline: 6%; height: 0; border-top: 2px solid var(--text); border-radius: 2px; pointer-events: none; }

/* Reports breakdown tables */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* Two across on medium screens: an odd card out takes the full row instead of leaving a hole. */
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) { .cards { gap: 12px; } }
.breakdown { width: 100%; border-collapse: collapse; font-size: 14px; }
.breakdown th { text-align: start; font-weight: 400; padding: 6px 0; }
.breakdown td { padding: 6px 0 6px 10px; text-align: end; white-space: nowrap; }
.breakdown td.bar-cell { padding: 6px 8px; width: 36%; }
.breakdown td.pct { color: var(--text-2); width: 48px; }
.breakdown tfoot th, .breakdown tfoot td { border-top: 1px solid var(--line); padding-top: 10px; font-weight: 600; }
.minibar { height: 6px; border-radius: 3px; background: var(--card-hi); }
.minibar div { height: 100%; border-radius: 3px; }
details.more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 20px; background: var(--card); border-radius: var(--radius); font-weight: 600; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: ''; width: 8px; height: 8px; border-inline-end: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); margin-top: -4px; }
details.more[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.more[open] > summary { margin-bottom: 16px; }
@media (max-width: 899px) { details.more > summary { padding: 0 16px; } details.more[open] > summary { margin-bottom: 12px; } }

/* Date navigation */
.daynav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.daynav__date { width: 10.5rem; max-width: 100%; }
.daynav__title { min-width: 9rem; text-align: center; font-weight: 600; }
.daynav__date:disabled { opacity: 0.45; }
@media (max-width: 899px) { .daynav--fill { width: 100%; justify-content: space-between; } }

/* ---------- Forecast ---------- */
.fc-week { padding-block: 4px; gap: 0; }
.fc-week > [role='group'] { flex: 1; display: flex; flex-direction: column; }
.fc-week .fc-day { flex: 1; }
.fc-day { display: grid; grid-template-columns: 64px minmax(0, 1fr) 84px; align-items: center; gap: 12px; min-height: 48px; padding: 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: start; font: inherit; cursor: pointer; width: 100%; }
.fc-day:first-child { border-top: 0; }
.fc-day[aria-pressed='true'] .fc-day__name { color: var(--solar); }
.fc-day__name { font-weight: 500; }
.fc-day__value { text-align: end; font-variant-numeric: tabular-nums; }
.fc-meter { height: 6px; border-radius: 999px; background: var(--card-hi); overflow: hidden; }
.fc-meter div { height: 100%; border-radius: 999px; background: var(--solar); }

/* ---------- Controls ---------- */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.mode { text-align: start; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; border: 1px solid var(--line-hi); background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.mode[aria-pressed='true'] { border-color: var(--text); background: var(--card-hi); }
.mode:disabled { cursor: not-allowed; opacity: 0.6; }
.mode__name { font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mode__help { font-size: 12px; color: var(--text-2); line-height: 1.4; }

/* Export sheet: a centred dialog on desktop, a bottom sheet on iPhone */
.sheet { border: 0; padding: 0; background: var(--card); color: var(--text); border-radius: 20px; width: min(520px, calc(100vw - 32px)); max-height: calc(100svh - 48px); }
.sheet::backdrop { background: rgb(0 0 0 / 0.6); }
.sheet__inner { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.sheet__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet__head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.sheet__close { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--raised); color: var(--text-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.sheet__grab { display: none; }
.sheet fieldset { display: flex; flex-direction: column; gap: 10px; }
.sheet legend { font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 10px; padding: 0; }
.sheet .segmented { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--bg); }
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.chips label { position: relative; min-height: var(--control); border-radius: var(--radius-c); border: 1px solid var(--line-hi); display: grid; place-items: center; font-weight: 500; font-size: 14px; cursor: pointer; }
.chips label:has(input:checked) { background: var(--text); color: var(--bg); border-color: var(--text); }
.chips label:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg); border-radius: 12px; padding: 8px; width: 15rem; max-width: 100%; margin-inline: auto; }
.stepper button { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--raised); font-size: 22px; cursor: pointer; flex: none; }
.stepper button:disabled { opacity: 0.45; cursor: not-allowed; }
.stepper__val { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px; min-width: 0; }
.stepper input { width: 4.5ch; min-width: 0; text-align: end; border: 0; background: transparent; font-size: 32px; font-weight: 300; font-variant-numeric: tabular-nums; padding: 0; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:disabled { opacity: 0.45; }
.stepper__unit { color: var(--text-2); font-size: 15px; }
.inline-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-fields .boost-sel, .inline-fields .boost-num { width: auto; min-width: 7rem; }
@media (max-width: 899px) {
  .sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; max-height: 92svh; }
  .sheet__inner { padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); gap: 18px; }
  .sheet__grab { display: block; width: 36px; height: 5px; border-radius: 999px; background: var(--raised-hi); align-self: center; }
}

/* ---------- Settings ---------- */
.settings { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.settings--all { flex-direction: column; flex-wrap: nowrap; gap: 32px; align-items: stretch; max-width: 960px; }
.settings__group { display: flex; flex-direction: column; gap: 16px; }
.settings__group-h { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding-inline: 4px; }
.settings__sec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; }
/* Tables marked --stack: on iPhone each row becomes a block, with small labels. */
@media (max-width: 899px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack, .table--stack tbody { display: block; }
  .table--stack tr { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 14px 0; border-top: 1px solid var(--line); }
  .table--stack tr:first-child { border-top: 0; padding-top: 4px; }
  .table--stack td { display: block; padding: 0; border: 0; white-space: normal !important; }
  .table--stack td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--text-3); }
  .table--stack .stack-title { width: 100%; font-weight: 500; }
  .table--stack .stack-full, .table--stack td:last-child:has(.btn-row) { width: 100%; }
  .table--stack .btn-row--end { justify-content: flex-start; }
  .table--stack .stack-hide { display: none; }
}
/* People table: on iPhone each person becomes a block (name and status, access, actions). */
@media (max-width: 899px) {
  .table--people thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--people, .table--people tbody, .table--people tr, .table--people td { display: block; }
  .table--people td { padding: 0; border: 0; text-align: start !important; white-space: normal !important; }
  .table--people tr[data-member] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 0; border-top: 1px solid var(--line); }
  .table--people tr[data-member]:first-child { border-top: 0; padding-top: 4px; }
  .table--people tr[data-member] > td:nth-child(2) { text-align: end !important; }
  .table--people tr[data-member] > td:nth-child(3), .table--people tr[data-member] > td:nth-child(4) { grid-column: 1 / -1; }
  .table--people tr[data-member] > td:nth-child(3)::before { content: 'Can access · saves straight away'; display: block; font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
  .table--people tr[data-member] .checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .table--people tr[data-member] > td:nth-child(4) .btn-row { justify-content: flex-start; }
  .table--people tr[id^='suspend-'] > td { padding-bottom: 14px; }
}
.settings--acc { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
.acc-group { font-size: 13px; font-weight: 500; color: var(--text-2); padding: 16px 4px 8px; }
.acc-group:first-child { padding-top: 0; }
.acc-list { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.acc { border-top: 1px solid var(--line); }
.acc:first-child { border-top: 0; }
.acc > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; cursor: pointer; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; border-radius: var(--radius); }
.acc__label { flex: 1; min-width: 0; }
.acc__value { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.acc .chev { flex: none; color: var(--text-3); transition: transform 0.2s ease; }
.acc[open] .chev { transform: rotate(90deg); }
.acc[open] > summary { border-bottom: 1px solid var(--line); }
.acc__body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
.acc__body > .card { background: none; }
@media (prefers-reduced-motion: reduce) { .acc .chev { transition: none; } }
/* Breakdown cards in a row share a height: a filler row pushes each Total to the bottom. */
.cards > .card > .breakdown { flex: 1; }
.breakdown tr.fill td { height: 100%; padding: 0; border: 0; }
.rate-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rate-tile { background: var(--card-hi); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }

.status { font-size: 13px; font-weight: 500; }
.status--ok { color: var(--battery); }
.status--off { color: var(--export); }
.importing { display: inline-flex; align-items: center; gap: 8px; color: var(--solar); }
.importing__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--solar); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .importing__dot { animation: none; } }
.suspend-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 6px 0; }

/* System costs */
.cost-entry { background: var(--card-hi); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.cost-entry__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.cost-entry__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; color: var(--text-2); }
.cost-entry__items li { display: flex; justify-content: space-between; gap: 12px; }
.items-head, .item-row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 13rem) 5rem 8rem minmax(0, 1fr) var(--control); gap: 8px; align-items: center; }
.items-head { font-size: 12px; color: var(--text-3); }
.item-row select:disabled, .item-row input:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 760px) {
  .items-head { display: none; }
  .item-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--control); padding: 12px; background: var(--card-hi); border-radius: 12px; }
  .item-row > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .item-row > :nth-child(6) { grid-column: 3; grid-row: 1; align-self: end; }
  .item-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .item-row > :nth-child(3) { grid-column: 1; grid-row: 3; }
  .item-row > :nth-child(4) { grid-column: 2 / -1; grid-row: 3; }
  .item-row > :nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
  .item-row .sr-only { position: static; width: auto; height: auto; clip: auto; white-space: normal; font-size: 12px; color: var(--text-3); }
}

/* ---------- Sign in and two-step ---------- */
.auth { min-height: 100svh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 16px 24px; }
.auth .card { width: 100%; max-width: 400px; padding: 32px; gap: 20px; }
@media (max-width: 899px) { .auth { place-items: start center; padding-top: calc(48px + env(safe-area-inset-top)); } .auth .card { background: none; padding: 8px; } }
.auth .title { font-size: 28px; }
.auth .btn--primary { min-height: 48px; font-size: 15px; border-radius: 12px; }
.auth-mark { width: 56px; height: 56px; border-radius: 16px; background: var(--card-hi); display: grid; place-items: center; text-decoration: none; }
.code-input { min-height: 64px !important; font-size: 30px; font-weight: 300; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; border-radius: 14px !important; }
.steps { padding-inline-start: 20px; display: flex; flex-direction: column; gap: 16px; }
.steps li > * + * { margin-top: 10px; }
.qr { width: 200px; max-width: 100%; padding: 10px; background: #fff; border-radius: 12px; }
.qr svg { display: block; width: 100%; height: auto; }
.secret, .recovery code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.recovery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 16px; padding-inline-start: 24px; }
#ts-panel details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--text-2); }

/* Settings → My Home: address line, its Edit button and the small location map. */
.field__label { font-size: 13px; font-weight: 500; color: var(--text); }
.field select.w-xl { width: 32rem; max-width: 100%; }
.addr-show { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.addr-show p { min-width: 0; overflow-wrap: anywhere; }
.addr-edit[hidden], .addr-show[hidden] { display: none; }
.home-map { margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; width: min(100%, 420px); }
.home-map__frame { position: relative; height: 180px; overflow: hidden; border-radius: var(--radius-c); border: 1px solid var(--line-hi); background: var(--raised); }
.home-map__tiles { position: absolute; inset-inline-start: 50%; top: 50%; width: 768px; display: grid; grid-template-columns: repeat(3, 256px); line-height: 0; }
[dir='rtl'] .home-map__tiles { inset-inline-start: auto; left: 50%; }
.home-map__tiles img { display: block; width: 256px; height: 256px; max-width: none; }
.home-map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5)); }
.home-map figcaption a { color: inherit; }
.home-map[hidden] { display: none; }

/* Controls → Export from Powerwall: how it works and its limits. */
.boost-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 16px 32px; padding-top: 14px; border-top: 1px solid var(--line); }
.boost-how h3 { margin-top: 4px; }
.boost-how ol, .boost-how ul { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.boost-how strong { color: var(--text); font-weight: 600; }