/* 一公里多少 — one stylesheet, read once at start-up and served from memory.

   A forecourt at dusk: warm dark asphalt, and two colours that carry the whole
   page — green for the energy you buy and amber for the charge on top of it.
   Those two are the only fills on any chart, because the proportion between
   them is the argument.

   The tones are `flat`, `mixed`, `steep` — how much of the running cost is the
   road charge rather than the energy. None of them is advice, and none of them
   has a view on whether the charge is the right number. */

:root {
  --bg: #12100e;
  --panel: #1a1714;
  --panel2: #211d19;
  --line: #363029;
  --ink: #ece8e2;
  --dim: #a89e92;
  --faint: #7a7065;

  --energy: #6fae86;
  --ruc: #d98b45;
  --here: #d9c15a;

  --c0: #6fae86;
  --c1: #6a9fd4;
  --c2: #d98b45;
  --c3: #b58fd0;
  --c4: #d4736b;

  --flat: #6fae86;
  --mixed: #d9c15a;
  --steep: #d98b45;
  --radius: 11px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 14px calc(30px + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", "Noto Sans SC", "PingFang SC", sans-serif;
  overflow-wrap: anywhere;
}
main { max-width: 800px; margin: 0 auto; }

.topbar {
  max-width: 800px; margin: 0 auto; padding: 22px 0 14px;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: start;
}
.brand {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(160deg, var(--ruc) 0%, #8d5320 100%);
  color: #150d05; font-size: 21px; font-weight: 700; line-height: 1;
}
.titles h1 { margin: 0; font-size: 21px; letter-spacing: -0.01em; line-height: 1.25; }
.titles p { margin: 4px 0 0; color: var(--dim); font-size: 14px; }

.panel, .block, .findings {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin: 14px 0;
}
.panel h2 { margin: 0 0 9px; font-size: 15px; }
h3 { margin: 14px 0 8px; font-size: 14.5px; }
.block h3, .panel h3:first-child { margin-top: 0; }
.sub { margin: 0 0 10px; color: var(--dim); font-size: 14px; }
.sub:last-child { margin-bottom: 0; }
.tiny { margin: 10px 0 0; color: var(--faint); font-size: 12.5px; line-height: 1.55; }
.cap { margin: 10px 0 0; color: var(--faint); font-size: 12.5px; line-height: 1.55; }
.quiet { background: transparent; }
code {
  font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}

/* The arithmetic the page is built on, given room to be looked at. */
.formula {
  margin: 12px 0; padding: 13px 14px; text-align: center;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--dim); font-size: 13.5px; line-height: 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: auto;
}
.formula b { color: var(--ruc); }

/* ------------------------------------------------------------------ form */

.egs { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; }
.eg {
  cursor: pointer; font: inherit; font-size: 12.5px;
  background: var(--panel2); color: var(--dim);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px;
}
.eg:hover { color: var(--ink); border-color: var(--faint); }
.eg:focus-visible, input:focus-visible, textarea:focus-visible, .go:focus-visible {
  outline: 2px solid var(--ruc); outline-offset: 2px;
}
.go {
  display: block; width: 100%; margin-top: 14px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 650;
  background: var(--ruc); color: #150d05;
  border: 0; border-radius: 9px; padding: 11px;
}

.fields {
  display: grid; gap: 9px; margin-bottom: 4px;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
}
.fl { display: grid; gap: 4px; min-width: 0; }
.fl span { color: var(--dim); font-size: 12.5px; }
.fl input, textarea {
  width: 100%; min-width: 0;
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 9px;
  font: 13.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
textarea { resize: vertical; line-height: 1.7; font-size: 12.5px; padding: 10px; }
.lbl { display: block; margin: 4px 0 7px; color: var(--dim); font-size: 13.5px; line-height: 1.55; }

/* --------------------------------------------------------------- verdict */

.verdict {
  border: 1px solid var(--line); border-left: 4px solid var(--ruc);
  border-radius: var(--radius); background: var(--panel2); padding: 15px 16px; margin: 14px 0;
}
.verdict > b { display: block; font-size: 21px; line-height: 1.28; }
.verdict .say { margin: 8px 0 0; color: var(--dim); font-size: 13.5px; }
.verdict.flat { border-left-color: var(--flat); }
.verdict.mixed { border-left-color: var(--mixed); }
.verdict.steep { border-left-color: var(--steep); }

.findings { padding: 4px 16px; }
.finding { border-top: 1px solid var(--line); padding: 13px 0; }
.finding:first-child { border-top: 0; }
.finding > b { display: block; font-size: 14.5px; }
.finding > p { margin: 5px 0 0; color: var(--dim); font-size: 13.5px; }
.finding.flat > b { color: var(--flat); }
.finding.mixed > b { color: var(--mixed); }
.finding.steep > b { color: var(--steep); }

/* ------------------------------------------------------------- the charts */

svg.bars, svg.dist {
  display: block; width: 100%; max-width: 580px; height: auto; margin: 8px auto 2px;
}
.grid { stroke: var(--line); stroke-width: 1; }
.ax { fill: var(--faint); font-size: 10px; font-family: inherit; }
.lab { fill: var(--dim); font-size: 10.5px; font-family: inherit; }
.val { fill: var(--ink); font-size: 10.5px; font-weight: 650; font-family: inherit; }

.seg.energy { fill: var(--energy); }
.seg.ruc { fill: var(--ruc); }

.here { stroke: var(--here); stroke-width: 1.4; stroke-dasharray: 4 3; }
.note {
  fill: var(--here); font-size: 10px; font-family: inherit;
  paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round;
}
.line { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.dot { stroke: var(--panel); stroke-width: 1.4; }
.line.c0, i.k.c0 { stroke: var(--c0); }
.line.c1, i.k.c1 { stroke: var(--c1); }
.line.c2, i.k.c2 { stroke: var(--c2); }
.line.c3, i.k.c3 { stroke: var(--c3); }
.line.c4, i.k.c4 { stroke: var(--c4); }
circle.c0 { fill: var(--c0); }
circle.c1 { fill: var(--c1); }
circle.c2 { fill: var(--c2); }
circle.c3 { fill: var(--c3); }
circle.c4 { fill: var(--c4); }

.legend { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 10px; }
.legend .li { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12px; }
i.k { width: 13px; height: 4px; border-radius: 2px; display: inline-block; flex: none; }
i.k.energy { background: var(--energy); height: 10px; }
i.k.ruc { background: var(--ruc); height: 10px; }
i.k.c0 { background: var(--c0); }
i.k.c1 { background: var(--c1); }
i.k.c2 { background: var(--c2); }
i.k.c3 { background: var(--c3); }
i.k.c4 { background: var(--c4); }

/* ------------------------------------------------------------- the tables */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap; }
table.t th, table.t td {
  padding: 8px 9px; border-bottom: 1px solid var(--line); text-align: right;
}
table.t thead th { color: var(--faint); font-weight: 600; font-size: 11.5px; }
/* A floor on this column: `white-space: normal` without one lets a narrow
   scroll container squeeze it to one character per line — taller, not wider,
   so no overflow check ever sees it. */
table.t th.ln { text-align: left; font-weight: 600; white-space: normal; min-width: 110px; }
table.t th.ln .kind {
  display: block; color: var(--faint); font-weight: 400; font-size: 11px;
}
table.t td { font-variant-numeric: tabular-nums; color: var(--dim); }
table.t td.amt { color: var(--ink); font-weight: 600; }
table.t tr.base { background: rgba(111, 174, 134, 0.08); }
table.t tr.base th.ln { color: var(--energy); }

/* ------------------------------------------------------------------ lists */

.panel.bad { border-color: var(--steep); }
.badlist { margin: 0; padding-left: 18px; color: var(--dim); font-size: 13px; }
.badlist li { margin: 6px 0; }
.badlist b { color: var(--ink); }

.foot {
  max-width: 800px; margin: 22px auto 0; padding-top: 14px;
  border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px;
}