/* Self-hosted Inter (offline). Latin subset, weights used by the UI. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/inter-latin-800.woff2") format("woff2"); }

/* ─── Theme tokens ──────────────────────────────────────────────────────────
   Every colour in this file comes from a token here — nothing is hard-coded
   further down, so the light theme is one override block and nothing else.
   The chart is drawn in JS and reads the same tokens (cssVar() in app.js).
   :root = dark (also what a JS-less browser gets); the inline script in
   index.html stamps data-theme before first paint, so there is no flash. */
:root {
  color-scheme: dark;
  --bg: #0b1020;
  --bg-soft: #121a31;
  --card: #161f3a;
  --card-2: #1b264a;
  --line: #283358;
  --line-soft: rgba(40, 51, 88, 0.5);
  --text: #eaf0ff;
  --muted: #9aa7c7;
  --fuel: #ff8a5b;       /* warm orange */
  --fuel-2: #e56a3a;     /* gradient partner / hover */
  --elec: #38e1b0;       /* electric teal */
  --elec-2: #21b58c;
  --accent: #7c8cff;
  --accent-2: #6e7dff;   /* gradient partner — light enough for dark ink on it */
  --sweet: #ffd166;
  --danger: #ff6b81;
  /* Text sitting ON a filled chip/button of that colour. Dark here: the accent
     has to stay light so it also works as text/border on the dark ground, so
     the filled surfaces take dark ink — same as fuel and elec. */
  --on-fuel: #2a1004;
  --on-elec: #06231b;
  --on-accent: #0d1233;
  --on-sweet: #1a1200;
  /* Washes (soft fills) and edges (borders) per accent. */
  --fuel-wash: rgba(255, 138, 91, 0.10);
  --fuel-band: rgba(255, 138, 91, 0.20);
  --fuel-edge: rgba(255, 138, 91, 0.55);
  --elec-wash: rgba(56, 225, 176, 0.10);
  --elec-band: rgba(56, 225, 176, 0.20);
  --elec-edge: rgba(56, 225, 176, 0.55);
  --accent-wash: rgba(124, 140, 255, 0.14);
  --accent-edge: rgba(124, 140, 255, 0.30);
  --sweet-wash: rgba(255, 209, 102, 0.10);
  --sweet-edge: rgba(255, 209, 102, 0.35);
  --sweet-soft: rgba(255, 209, 102, 0.7);
  --focus-ring: rgba(124, 140, 255, 0.18);
  /* Backdrops: page glow, modal, caption chip, verdict icon, marker ring. */
  --glow-1: rgba(124, 140, 255, 0.18);
  --glow-2: rgba(56, 225, 176, 0.12);
  --overlay: rgba(5, 8, 18, 0.66);
  --cap-bg: rgba(11, 16, 32, 0.72);
  --icon-bg: rgba(255, 255, 255, 0.05);
  --ring: rgba(255, 255, 255, 0.9);
  --h1-a: #fff;
  --h1-b: #b9c4ff;
  /* Chart (read from JS). */
  --grid: rgba(40, 51, 88, 0.6);
  --chart-fill-elec: rgba(56, 225, 176, 0.12);
  --chart-fill-fuel: rgba(255, 138, 91, 0.12);
  --point-ring: #fff;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65);
  --radius: 18px;
}

/* Light theme — same roles, darker accents so text keeps its contrast on a
   light ground, and inverted backdrops. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --bg-soft: #ffffff;
  --card: #ffffff;
  --card-2: #eff3fb;
  --line: #d3daea;
  --line-soft: rgba(120, 134, 170, 0.28);
  --text: #16203a;
  /* Dark enough to still clear 4.5:1 where muted text sits on a tinted band
     (the fuel bar's note is the worst case), not just on plain white. */
  --muted: #4c587a;
  --fuel: #bd4c0e;
  --fuel-2: #9c3d09;
  --elec: #07795c;
  --elec-2: #05604a;
  --accent: #3f49bd;
  --accent-2: #5058d8;
  --sweet: #8a6100;
  --danger: #c22a44;
  --on-fuel: #fff;
  --on-elec: #fff;
  --on-accent: #fff;
  --on-sweet: #fff;
  --fuel-wash: rgba(189, 76, 14, 0.09);
  --fuel-band: rgba(189, 76, 14, 0.13);
  --fuel-edge: rgba(189, 76, 14, 0.45);
  --elec-wash: rgba(7, 121, 92, 0.09);
  --elec-band: rgba(7, 121, 92, 0.16);
  --elec-edge: rgba(7, 121, 92, 0.45);
  --accent-wash: rgba(63, 73, 189, 0.10);
  --accent-edge: rgba(63, 73, 189, 0.28);
  --sweet-wash: rgba(138, 97, 0, 0.10);
  --sweet-edge: rgba(138, 97, 0, 0.35);
  --sweet-soft: rgba(138, 97, 0, 0.55);
  --focus-ring: rgba(63, 73, 189, 0.18);
  --glow-1: rgba(63, 73, 189, 0.10);
  --glow-2: rgba(7, 121, 92, 0.09);
  --overlay: rgba(22, 32, 58, 0.42);
  --cap-bg: rgba(255, 255, 255, 0.82);
  --icon-bg: rgba(22, 32, 58, 0.06);
  --ring: rgba(22, 32, 58, 0.22);
  --h1-a: #16203a;
  --h1-b: #3f49bd;
  --grid: rgba(120, 134, 170, 0.28);
  --chart-fill-elec: rgba(7, 121, 92, 0.10);
  --chart-fill-fuel: rgba(189, 76, 14, 0.10);
  --point-ring: #fff;
  --shadow: 0 14px 30px -20px rgba(22, 32, 58, 0.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--glow-1), transparent 60%),
    radial-gradient(1000px 500px at -10% 10%, var(--glow-2), transparent 55%),
    var(--bg);
  min-height: 100vh;
  overflow-x: hidden;   /* belt-and-suspenders: never allow sideways page scroll */
}

.app {
  max-width: 1000px;
  margin: 0 auto;
  /* max() keeps a sane gutter on phones while respecting the notch / rounded corners. */
  padding: 32px max(20px, env(safe-area-inset-right)) 60px max(20px, env(safe-area-inset-left));
}

/* Top bar (login + language toggle, right-aligned) */
.topbar {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.topbar__right { display: flex; align-items: center; gap: 10px; }
.lang-toggle .toggle__btn { padding: 5px 12px; font-size: 12px; letter-spacing: .5px; }
/* Dark / light switch — same component as the language toggle, icons instead of
   words (they need no translation), the icon alone carries the state. */
.theme-toggle .toggle__btn { padding: 5px 10px; font-size: 13px; line-height: 1.2; }

/* Owner login / read-only mode */
.auth-btn {
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 6px 12px; border-radius: 12px; transition: border-color .15s, color .15s;
}
.auth-btn:hover { color: var(--text); border-color: var(--accent); }
body.is-editor .auth-btn { color: var(--elec); border-color: var(--elec-edge); }
/* Hide all editor-only controls until the owner is logged in. */
body:not(.is-editor) .editor-only { display: none !important; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(2px); }
.modal__box {
  position: relative; width: min(360px, 92vw);
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.modal__box h3 { margin: 0 0 14px; font-size: 17px; }
.modal__box input[type="password"] { width: 100%; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Hero */
.hero { text-align: center; margin-bottom: 22px; }
.hero__badge {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 2px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
  margin-bottom: 14px;
}
.hero h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, var(--h1-a), var(--h1-b) 60%, var(--elec));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub { color: var(--muted); margin: 8px 0 0; font-size: 16px; }

/* Fuel price bar */
.fuelbar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
  border-radius: var(--radius); padding: 16px 22px; margin: 18px 0 16px;
  border: 1px solid var(--fuel-edge);
  background: linear-gradient(135deg, var(--fuel-band), var(--fuel-wash));
  box-shadow: var(--shadow);
}
.fuelbar__label { display: flex; align-items: center; gap: 14px; }
.fuelbar__icon { font-size: 28px; }
.fuelbar__label strong { display: block; font-size: 16px; }
.fuelbar__label small { color: var(--muted); font-size: 13px; }
.fuelbar__set { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fuelbar__input { display: flex; align-items: center; gap: 8px; }
.fuelbar__input input {
  width: 110px; font-size: 22px; font-weight: 700; text-align: center;
  padding: 8px 10px; border-color: var(--fuel-edge);
}
.fuelbar__input .unit { color: var(--muted); font-weight: 600; }
.step {
  width: 38px; height: 42px; border-radius: 11px; cursor: pointer;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--text);
  font-size: 20px; font-weight: 700; line-height: 1;
}
.step:hover { border-color: var(--fuel); color: var(--fuel); }

/* Profiles as chips — all options visible, one click to switch. */
.profiles { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.profile-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.profile-row__label {
  color: var(--muted); font-size: 13px; font-weight: 700;
  letter-spacing: .3px; min-width: 58px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--muted);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip.is-on {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent; color: var(--on-accent);
}
/* Charging chips are coloured at the break-even price: under it charging is
   cheaper (⚡ green), over it fuel is (⛽ amber). The icon comes first, so the
   verdict never rests on colour alone. */
.chip__ico { font-style: normal; margin-right: 6px; }
.chip__ico:empty { display: none; }
.chip--elec { color: var(--elec); border-color: var(--elec-edge); background: var(--elec-wash); }
.chip--fuel { color: var(--fuel); border-color: var(--fuel-edge); background: var(--fuel-wash); }
.chip--elec:hover { color: var(--elec); border-color: var(--elec); }
.chip--fuel:hover { color: var(--fuel); border-color: var(--fuel); }
.chip.is-on.chip--elec {
  background: linear-gradient(135deg, var(--elec), var(--elec-2));
  border-color: transparent; color: var(--on-elec);
}
.chip.is-on.chip--fuel {
  background: linear-gradient(135deg, var(--fuel), var(--fuel-2));
  border-color: transparent; color: var(--on-fuel);
}

/* Verdict */
.verdict-card {
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 18px 0 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--card-2), var(--card));
  transition: border-color .3s, box-shadow .3s;
}
.verdict-card.is-electric { border-color: var(--elec-edge); }
.verdict-card.is-fuel { border-color: var(--fuel-edge); }
.verdict__loading { color: var(--muted); }
.verdict__row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.verdict__icon {
  font-size: 40px; line-height: 1;
  width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: 16px; background: var(--icon-bg);
}
.verdict__main { flex: 1; min-width: 220px; }
.verdict__title { font-size: 24px; font-weight: 800; margin: 0; }
.verdict__title .accent-elec { color: var(--elec); }
.verdict__title .accent-fuel { color: var(--fuel); }
/* The answer as a sentence: the numbers carry the weight, the words the meaning. */
.verdict__sentence { margin: 8px 0 0; font-size: 17px; line-height: 1.45; }
.verdict__sentence b { font-weight: 700; white-space: nowrap; }
.is-electric .verdict__sentence b { color: var(--elec); }
.is-fuel .verdict__sentence b { color: var(--fuel); }
/* The yearly figure follows the sentence it scales up — same colour coding, one step quieter. */
.verdict__year { margin: 4px 0 0; font-size: 15px; line-height: 1.45; }
.verdict__year b { font-weight: 700; white-space: nowrap; }
.is-electric .verdict__year b { color: var(--elec); }
.is-fuel .verdict__year b { color: var(--fuel); }
.verdict__threshold { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.verdict__threshold b { color: var(--sweet); white-space: nowrap; }
/* Assumptions behind the numbers — a footnote, not a second reading task. */
.verdict__note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); opacity: .85; }

/* Layout: one column top to bottom — prices, profiles, answer, chart, values.
   The only grid left is the pair of name lists inside "Manage lists". */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 22px;
}
/* Grid items default to min-width:auto, which lets wide content block the column
   from shrinking; min-width:0 lets columns resize cleanly in both directions. */
.grid > * { min-width: 0; }
/* Responsive overrides live at the END of this file (see bottom) so they reliably
   win over the base component rules below, which would otherwise come later in source. */

.card {
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.card__head h2 { margin: 0; font-size: 17px; font-weight: 700; }

/* Toggle */
.toggle {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
}
.toggle__btn {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 9px; transition: background .15s, color .15s;
}
.toggle__btn.is-on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); }
.toggle__btn:not(.is-on):hover { color: var(--text); }

/* Chart: the optional deep view behind the bar, full width, no legend — every
   element in the picture is labelled where it sits. */
.chart-details { margin-bottom: 22px; }
.chart-wrap { position: relative; height: 380px; }

/* One-axis price bar — the main picture: the electricity price scale, green
   while charging wins, amber once fuel does, one marker for the price paid. */
#pricebar { display: block; margin-bottom: 22px; }
.pbar {
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; box-shadow: var(--shadow);
}
.pbar__title { margin: 0 0 16px; font-size: 17px; font-weight: 700; }
/* Label rows: the marks sit at a percentage, so the labels are positioned, not flowed. */
.pbar__row { position: relative; height: 20px; }
.pbar__lab { position: absolute; top: 0; white-space: nowrap; font-size: 13px; color: var(--muted); }
.pbar__lab b { font-weight: 700; }
.pbar__lab--here.is-elec b { color: var(--elec); }
.pbar__lab--here.is-fuel b { color: var(--fuel); }
.pbar__lab--here.is-tie b { color: var(--accent); }
.pbar__lab--tip b { color: var(--sweet); }
/* The track carries the marks, the bands inside it carry the colours — so a mark
   can stick out above and below the bar and stays visible wherever it lands. */
.pbar__track { position: relative; height: 34px; margin: 10px 0 11px; }
.pbar__bands {
  position: absolute; inset: 0; display: flex;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
/* Segment captions sit at the outer ends, and they sit ON TOP of the marks (own
   backdrop, higher z-index) — on a narrow bar a mark would otherwise strike the
   text through. */
.pbar__seg { display: flex; align-items: center; overflow: hidden; }
.pbar__cap {
  position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--cap-bg); padding: 2px 7px; border-radius: 7px;
}
.pbar__cap i, .pbar__cap em { font-style: normal; }
.pbar__seg--elec { background: var(--elec-band); justify-content: flex-start; padding-left: 12px; }
.pbar__seg--elec .pbar__cap { color: var(--elec); }
.pbar__seg--fuel { background: var(--fuel-band); justify-content: flex-end; padding-right: 12px; }
.pbar__seg--fuel .pbar__cap { color: var(--fuel); }
/* Where it tips, and where you are. */
.pbar__tip {
  position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; z-index: 2;
  background: var(--sweet); border-radius: 2px;
}
.pbar__here {
  position: absolute; top: -7px; bottom: -7px; width: 4px; margin-left: -2px; z-index: 2;
  background: var(--accent); border-radius: 3px; box-shadow: 0 0 0 1px var(--ring);
}
.pbar__here.is-elec { background: var(--elec); }
.pbar__here.is-fuel { background: var(--fuel); }
.pbar__scale {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted); opacity: .75; margin-top: 8px;
}
.pbar__note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); opacity: .85; }
.pbar__empty { margin: 0; font-size: 14px; color: var(--muted); }

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13px; color: var(--muted); }
.field em { color: var(--muted); font-style: normal; opacity: .8; }
.field--inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.field--inline > span { flex: 1; min-width: 0; }   /* let the label shrink/wrap instead of pushing the input out */
.field--inline input { width: 120px; flex: none; }

select, input[type="number"], input[type="text"] {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  max-width: 100%;   /* never let a field grow wider than its container */
  transition: border-color .15s, box-shadow .15s;
}
select:focus, input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* Strip native control chrome so Safari/iOS render the same flat box as Chrome
   (otherwise inputs get a native inner shadow / odd border). Selects keep their
   native arrow on purpose, so they are left untouched. */
input[type="number"], input[type="text"] { -webkit-appearance: none; appearance: none; }
input[type="number"] { -moz-appearance: textfield; }
/* Read-only (disabled) fields: keep full-contrast text instead of Safari's grey. */
input:disabled, select:disabled { -webkit-text-fill-color: var(--text); opacity: 1; cursor: default; }

/* Calculation values: one group per record, each headed by the record's name so
   an edit is never attributed to the wrong profile. */
.values-card { margin-bottom: 22px; }
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; }
.values__name {
  margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--accent);
  letter-spacing: .3px;
}
.values .field:last-child { margin-bottom: 0; }
/* Cap the row width so label and field stay near each other on wide screens. */
.values .field--inline { max-width: 400px; }
.values .field--inline input { width: 130px; }

/* "Preview — not saved": appears when an input differs from the stored value. */
.preview-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin: -4px 0 16px; padding: 8px 12px; border-radius: 11px;
  font-size: 13px; color: var(--sweet);
  background: var(--sweet-wash); border: 1px solid var(--sweet-edge);
}
.preview-bar[hidden] { display: none; }
.preview-bar .link-btn { color: var(--sweet); font-size: 12px; }
.preview-bar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The one save in the app — it stores exactly the values shown in the fields. */
.preview-bar .btn { background: var(--sweet); color: var(--on-sweet); }

/* Buttons */
.btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent); border: none; cursor: pointer;
  padding: 9px 16px; border-radius: 11px; font-weight: 600; font-size: 14px;
  font-family: inherit; transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn--small { padding: 6px 12px; font-size: 13px; }
/* Modifiers stay right after .btn — same specificity, so the later rule wins. */
.btn--ghost { background: none; border: 1px solid var(--line); color: var(--muted); }
.btn--ghost:hover { color: var(--text); filter: none; }
.link-btn {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit; padding: 2px 4px;
}
.link-btn:hover { text-decoration: underline; }
.icon-btn {
  background: none; border: 1px solid var(--line); color: var(--muted);
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 14px;
}
.icon-btn:hover { color: var(--danger); border-color: var(--danger); }

/* Collapsed disclosure — used by "Manage lists" (rarely needed) and by the price
   bar (an alternative view of the same answer). Closed, it costs one line. */
.disclosure, .manage { margin-bottom: 22px; }
.disclosure > summary, .manage > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--bg-soft);
}
.disclosure > summary::-webkit-details-marker,
.manage > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before, .manage > summary::before { content: "▸"; font-size: 11px; }
.disclosure[open] > summary::before, .manage[open] > summary::before { content: "▾"; }
.disclosure > summary:hover, .manage > summary:hover { color: var(--text); }
.disclosure[open] > summary, .manage[open] > summary { margin-bottom: 16px; }
/* Two equal name-list columns — the numbers moved out, so nothing has to line up
   with the chart column any more. */
.manage .grid--lists { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }

/* Tables */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.data-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
/* No active-row marker in the management tables: the chips above already show
   which scenario and location are active. */
/* min-width:0 overrides an <input>'s intrinsic (size-based) min width so the
   numeric columns shrink to the cell instead of widening the whole table. */
.data-table input { width: 100%; min-width: 0; padding: 7px 9px; font-size: 14px; }
.data-table input.name { min-width: 130px; }
.data-table td.actions { white-space: nowrap; text-align: right; }

.foot { text-align: center; color: var(--muted); font-size: 13px; margin-top: 6px; }
.foot .build { white-space: nowrap; opacity: .8; }
.foot .build a { font-variant-numeric: tabular-nums; }
.foot__copy { white-space: nowrap; opacity: .8; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--card-2); border: 1px solid var(--line); color: var(--text);
  padding: 12px 20px; border-radius: 12px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--danger); }

/* ─── Responsive (kept last so they override the base rules above) ─────────── */

/* Both grids collapse to a single column on tablet/phone widths. */
@media (max-width: 860px) {
  .grid, .grid--lists, .manage .grid--lists { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 560px) {
  .app { padding: 16px max(13px, env(safe-area-inset-right)) 48px max(13px, env(safe-area-inset-left)); }
  .hero h1 { font-size: 26px; }
  .chart-wrap { height: 320px; }
  .profile-row__label { min-width: 0; }
  .chip { font-size: 13px; padding: 6px 12px; }
  .card { padding: 18px 15px; }
  .pbar { padding: 16px 14px; }
  .pbar__lab { font-size: 12px; }
  .pbar__track { height: 30px; }
  /* Too narrow for the caption text inside the bands — the icon stays, so the
     side is never colour-only, and the sentence above says it in words anyway. */
  .pbar__cap em { display: none; }
  .pbar__cap { padding: 2px 5px; }
  .pbar__seg--elec { padding-left: 8px; }
  .pbar__seg--fuel { padding-right: 8px; }
  .fuelbar { gap: 12px; padding: 16px 15px; }
  .fuelbar__input input { font-size: 20px; }
  .verdict-card { padding: 20px 16px; }
  .verdict__row { gap: 12px; }
  .verdict__icon { width: 48px; height: 48px; font-size: 30px; }
  .verdict__title { font-size: 21px; }
  .verdict__sentence { font-size: 16px; }
  /* Keep the edit tables inside the card (tighter cells, name input may shrink). */
  .data-table th, .data-table td { padding: 6px 4px; }
  .data-table th { letter-spacing: 0; }
  .data-table input { padding: 6px 5px; }
  .data-table input.name { min-width: 0; }
  /* iOS Safari zooms in when a focused input's font is < 16px — keep them at 16px. */
  select, input[type="number"], input[type="text"], .data-table input { font-size: 16px; }
}