/* RUC Switch — one stylesheet, read once at start-up and served from memory.

   Asphalt and road markings: a dark slate hero, a cool grey-green paper, and
   amber for the line that stands for the pump. The chart is the argument, so it
   gets the only two saturated colours on the page and everything else steps
   back.

   Sienna where the bill goes up, green where it comes down. Neither is a
   verdict. A car whose bill falls is not getting away with anything and one
   whose bill rises is not being punished — the charge changed shape, and this
   is the arithmetic. */

:root {
  --paper: #eff1f1;
  --card: #fefefe;
  --sunk: #e6eae9;
  --line: #d3dad9;
  --ink: #141a1c;
  --body: #3d4a4d;
  --mute: #6b7879;

  --brand: #28343a;
  --brand-ink: #f4f7f7;
  --brand-soft: #dfe6e6;

  --pump: #4a6d8c;    /* what you pay at the pump */
  --ruc: #c4832c;     /* what you would pay by distance */
  --up: #ab4127;      /* costs more */
  --down: #1c7053;    /* costs less */
  --flat: #5d6b6d;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 26, 28, 0.06), 0 4px 14px rgba(20, 26, 28, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1315;
    --card: #171e21;
    --sunk: #1c2427;
    --line: #2b3639;
    --ink: #e8eeee;
    --body: #aab7b8;
    --mute: #78888a;
    --brand: #1b2427;
    --brand-ink: #e8eeee;
    --brand-soft: #1f2c30;
    --pump: #7fa9c9;
    --ruc: #e0a95c;
    --up: #dd7c5e;
    --down: #56b894;
    --flat: #8b999b;
    --shadow: none;
  }
}

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

body {
  margin: 0;
  padding: 0 0 calc(30px + env(safe-area-inset-bottom));
  background: var(--paper);
  color: var(--body);
  font: 16px/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: anywhere;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }

/* -------------------------------------------------------------- the hero */

.hero { background: var(--brand); color: var(--brand-ink); padding: 26px 0 30px; margin-bottom: 18px; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 650; letter-spacing: 0.01em; opacity: 0.92;
}
.mark {
  display: grid; place-items: center; height: 26px; padding: 0 7px; border-radius: 6px;
  background: var(--ruc); color: #1a1206; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.hero h1 {
  margin: 16px 0 0; font-size: 31px; line-height: 1.16; letter-spacing: -0.02em;
  text-wrap: balance; max-width: 18ch;
}
.lede { margin: 12px 0 0; font-size: 16px; line-height: 1.6; opacity: 0.93; max-width: 62ch; }
.lede b { font-weight: 700; color: #fff; }

@media (min-width: 620px) { .hero h1 { font-size: 40px; } }

/* --------------------------------------------------------------- panels */

.card, .findings {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; margin: 16px 0;
}
.card h2 { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.01em; }
.sub { margin: 0 0 12px; color: var(--body); font-size: 14.5px; }
.tiny, .cap { margin: 12px 0 0; color: var(--mute); font-size: 13px; line-height: 1.55; }
.quiet { background: transparent; box-shadow: none; }
code {
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--sunk); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}

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

.egs {
  display: grid; gap: 8px; margin: 0 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.eg {
  cursor: pointer; font: inherit; text-align: left; display: grid; gap: 2px;
  background: var(--sunk); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
}
.eg b { font-size: 14px; font-weight: 650; }
.eg span { color: var(--mute); font-size: 12.5px; line-height: 1.45; }
.eg:hover { border-color: var(--brand); }
.eg.on { border-color: var(--ruc); background: var(--brand-soft); }

.fields {
  display: grid; gap: 12px; margin: 0 0 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.fl { display: grid; gap: 4px; min-width: 0; }
.fl span { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.fl i { color: var(--mute); font-size: 12px; font-style: normal; line-height: 1.4; }
.fl input, textarea {
  width: 100%; min-width: 0;
  background: var(--sunk); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
textarea { resize: vertical; font-size: 13px; line-height: 1.75; display: block; }

.picks { display: grid; gap: 12px; margin-bottom: 14px; }
.pick { display: grid; gap: 5px; }
.plab { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.pset { display: flex; flex-wrap: wrap; gap: 6px; }
.pb {
  cursor: pointer; font: inherit; font-size: 13.5px;
  background: var(--sunk); color: var(--body);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
}
.pb:hover { color: var(--ink); border-color: var(--mute); }
.pb.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.go {
  display: block; width: 100%; margin-top: 12px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 650;
  background: var(--brand); color: var(--brand-ink);
  border: 0; border-radius: 9px; padding: 13px;
}
.go:hover { filter: brightness(1.15); }
.eg:focus-visible, .pb:focus-visible, .go:focus-visible,
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ruc); outline-offset: 2px; }

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

.verdict {
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--flat);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin: 16px 0;
}
.verdict.up { border-left-color: var(--up); }
.verdict.down { border-left-color: var(--down); }
.verdict.unmoved { border-left-color: var(--pump); }
.vlab { margin: 0; color: var(--mute); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.big {
  margin: 6px 0 2px; font-size: 44px; line-height: 1.06; font-weight: 700;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.big.small { font-size: 27px; color: var(--pump); }
.big span { font-size: 17px; font-weight: 500; color: var(--mute); letter-spacing: 0; }
.verdict.up .big { color: var(--up); }
.verdict.down .big { color: var(--down); }
.pctline { color: var(--mute); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.vhead { margin: 14px 0 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.vsay { margin: 6px 0 0; color: var(--body); font-size: 14.5px; }

@media (min-width: 620px) { .big { font-size: 54px; } }

/* ------------------------------------------------------------- the chart */

svg.cross { display: block; width: 100%; max-width: 640px; height: auto; margin: 4px auto 2px; }
.grid { stroke: var(--line); stroke-width: 1; }
.ax { fill: var(--mute); font-size: 13px; font-family: inherit; }
.ax.mid { text-anchor: middle; }
.ax.end { text-anchor: end; }
/* The region left of the crossing: every car in here pays more after. */
.worse { fill: var(--up); fill-opacity: 0.07; }
.ln { stroke-width: 3; fill: none; stroke-linecap: round; }
.ln.pump { stroke: var(--pump); }
.ln.ruc { stroke: var(--ruc); stroke-dasharray: 9 5; }
.cross-dot { fill: var(--ink); }
.gap { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 3; }
.you { stroke: var(--card); stroke-width: 2.5; }
.you.now { fill: var(--pump); }
.you.after { fill: var(--ruc); }
.lab {
  font-size: 13px; font-family: inherit; font-weight: 650; fill: var(--ink);
  paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round;
}
.cross-lab { text-anchor: middle; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.legend .li { display: inline-flex; align-items: center; gap: 7px; color: var(--body); font-size: 13px; }
i.k { width: 16px; height: 3px; border-radius: 2px; display: inline-block; flex: none; }
i.k.pump { background: var(--pump); }
i.k.ruc { background: var(--ruc); }
i.k.worse { background: var(--up); opacity: 0.25; height: 12px; border-radius: 3px; }

/* --------------------------------------------------------------- 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: 9px 8px; border-bottom: 1px solid var(--line); text-align: right; }
table.t thead th { color: var(--mute); font-weight: 600; font-size: 11.5px; letter-spacing: 0.02em; }
/* A floor on the name 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: 118px; padding-left: 2px; }
table.t td { color: var(--body); font-variant-numeric: tabular-nums; }
table.t td.amt { font-weight: 650; }
table.t td.up { color: var(--up); }
table.t td.down { color: var(--down); }
table.t td.flat { color: var(--mute); font-weight: 500; }
table.t tr.foot th.ln, table.t tr.foot td {
  border-bottom: 0; border-top: 2px solid var(--line); color: var(--ink); font-weight: 650;
}

/* ------------------------------------------------------------- findings */

.findings { padding: 2px 18px; }
.finding { border-top: 1px solid var(--line); padding: 15px 0; }
.finding:first-child { border-top: 0; }
.finding > b { display: block; font-size: 15.5px; line-height: 1.35; }
.finding > p { margin: 6px 0 0; color: var(--body); font-size: 14.5px; }
.finding.up > b { color: var(--up); }
.finding.down > b { color: var(--down); }
.finding.flat > b { color: var(--ink); }
.finding.unmoved > b { color: var(--pump); }

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

.card.bad { border-color: var(--up); }
.list { margin: 0; padding-left: 20px; color: var(--body); font-size: 14px; }
.list li { margin: 8px 0; }
.list b { color: var(--ink); }

.foot {
  margin-top: 26px; padding: 16px 0 0;
  border-top: 1px solid var(--line); color: var(--mute); font-size: 13px;
}
.foot a { color: var(--body); }