:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: one column of stacked bands - state cards (today), period min/avg/max table, weekly survey chart, daily dealer charts, readings, sources. */
:root {
  --bg: #eef1f4;
  --surface: #ffffff;
  --ink: #0f1419;
  --ink-2: #48535e;
  --muted: #6f7a85;
  --grid: #e4e8ec;
  --axis: #c3cbd3;
  --hair: rgba(15, 20, 25, 0.10);
  --ma: #2a78d6;
  --ri: #eb6834;
  --ma-wash: rgba(42, 120, 214, 0.14);
  --ri-wash: rgba(235, 104, 52, 0.14);
  --ct: #0f9d8f; --ct-wash: rgba(15, 157, 143, 0.14);
  --me: #8250df; --me-wash: rgba(130, 80, 223, 0.14);
  --nh: #d6409f; --nh-wash: rgba(214, 64, 159, 0.14);
  --vt: #6a8f12; --vt-wash: rgba(106, 143, 18, 0.14);
  --rise: #b42318;
  --fall: #006300;
  --chip: #e3e8ed;
  --focus: #2a78d6;
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.125rem;
  --step-2: 1.5rem;
  --step-3: 2.25rem;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1013; --surface: #161a1f; --ink: #eef1f4; --ink-2: #b8c1ca; --muted: #8b959f;
    --grid: #252b31; --axis: #3a424b; --hair: rgba(255, 255, 255, 0.10);
    --ma: #3987e5; --ri: #d95926; --ma-wash: rgba(57, 135, 229, 0.20); --ri-wash: rgba(217, 89, 38, 0.20);
    --ct: #2bb5a6; --ct-wash: rgba(43, 181, 166, 0.20); --me: #9d7bf0; --me-wash: rgba(157, 123, 240, 0.20);
    --nh: #e268b5; --nh-wash: rgba(226, 104, 181, 0.20); --vt: #8db52a; --vt-wash: rgba(141, 181, 42, 0.20);
    --rise: #f08a80; --fall: #5fd35f; --chip: #232a31; --focus: #6da7ec;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1013; --surface: #161a1f; --ink: #eef1f4; --ink-2: #b8c1ca; --muted: #8b959f;
  --grid: #252b31; --axis: #3a424b; --hair: rgba(255, 255, 255, 0.10);
  --ma: #3987e5; --ri: #d95926; --ma-wash: rgba(57, 135, 229, 0.20); --ri-wash: rgba(217, 89, 38, 0.20);
    --ct: #2bb5a6; --ct-wash: rgba(43, 181, 166, 0.20); --me: #9d7bf0; --me-wash: rgba(157, 123, 240, 0.20);
    --nh: #e268b5; --nh-wash: rgba(226, 104, 181, 0.20); --vt: #8db52a; --vt-wash: rgba(141, 181, 42, 0.20);
  --rise: #f08a80; --fall: #5fd35f; --chip: #232a31; --focus: #6da7ec;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 28px 56px;
  display: grid;
  gap: 28px;
}
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; letter-spacing: 0.01em; }
h1 { font-size: clamp(1.9rem, 4.6vw, 2.75rem); font-weight: 700; line-height: 1.05; }
h2 { font-size: var(--step-2); font-weight: 600; line-height: 1.15; }
h3 { font-size: var(--step-1); font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 2px; }
a:hover { color: var(--ma); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.eyebrow { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.num { font-variant-numeric: tabular-nums; }

/* Header */
header.top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; }
header.top .titles { display: grid; gap: 6px; min-width: 0; }
.status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--step--1); font-weight: 600; color: var(--ink-2);
  background: var(--chip); padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fall); }
.pill.stale .dot { background: var(--rise); }

/* State cards */
/* Two cards per row on desktop: three across is too narrow for the low / average / high figures. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 20px; display: grid; gap: 16px; min-width: 0; align-content: start;
}
.card-head { display: flex; align-items: center; gap: 10px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.card-head h2 { font-size: var(--step-2); }
.card-head h2 a { text-decoration: none; }
.card-head h2 a:hover { text-decoration: underline; color: inherit; }
.card-head .abbr { margin-left: auto; font-family: var(--font-display); font-weight: 600; color: var(--muted); letter-spacing: 0.06em; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trio .k { font-size: var(--step--1); color: var(--muted); font-weight: 500; }
.trio .v { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 1; margin-top: 4px; }
.trio .v small { font-size: 0.5em; font-weight: 600; color: var(--ink-2); margin-right: 1px; vertical-align: 0.55em; }
.sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: var(--step--1); color: var(--ink-2); }
.rangebar { position: relative; height: 54px; }
.rangebar svg { display: block; width: 100%; height: 54px; overflow: visible; }
.facts { display: grid; gap: 10px; border-top: 1px solid var(--hair); padding-top: 14px; }
.fact { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
.fact .label { color: var(--ink-2); min-width: 0; }
.fact .label .muted { display: block; font-size: var(--step--1); }
.fact .value { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); text-align: right; white-space: nowrap; }
.delta { font-size: var(--step--1); font-weight: 600; white-space: nowrap; text-align: right; grid-column: 2; }
.delta.up { color: var(--rise); }
.delta.down { color: var(--fall); }
.delta.flat { color: var(--muted); }

/* Panels */
.panel { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: 20px; display: grid; gap: 16px; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; }
.panel-head .titles { display: grid; gap: 4px; min-width: 0; max-width: 62ch; }
.panel-head p { color: var(--ink-2); font-size: var(--step--1); }

.seg { display: inline-flex; background: var(--chip); border-radius: 8px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button {
  font: inherit; font-size: var(--step--1); font-weight: 600; color: var(--ink-2);
  border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; cursor: pointer;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px var(--hair); }

/* Stats table */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
th, td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--grid); vertical-align: top; }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
thead th { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--axis); white-space: nowrap; }
td { font-variant-numeric: tabular-nums; }
td .when { display: block; font-size: var(--step--1); color: var(--muted); white-space: nowrap; }
tr.group td { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); padding-top: 16px; border-bottom: 0; }
tr.group td span.swatch { display: inline-block; margin-right: 8px; vertical-align: 1px; }
td.src { color: var(--ink-2); min-width: 190px; }
#recent-table th:nth-child(-n+3), #recent-table td:nth-child(-n+3) { text-align: left; }
#recent-table td { white-space: nowrap; }
td.src .muted { display: block; font-size: var(--step--1); }

/* Charts */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--step--1); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.legend .key { color: var(--ink-2); }
.legend .key svg { display: block; flex: none; }
.controls { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.tip .h { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.tip .h i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tip .r small { color: var(--muted); font-size: 0.92em; font-weight: 500; }
.chart { position: relative; min-width: 0; }
.chart svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
.chart text { font-family: var(--font-body); }
.tip {
  position: absolute; top: 0; left: 0; pointer-events: none; z-index: 2;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14); padding: 8px 10px; font-size: var(--step--1);
  min-width: 150px; display: grid; gap: 4px;
}
.tip .d { font-weight: 600; color: var(--ink); }
.tip .r { display: flex; align-items: center; gap: 6px; color: var(--ink-2); justify-content: space-between; }
.tip .r b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.tip .r span { display: inline-flex; align-items: center; gap: 6px; }
.tip .r i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.multiples { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.multiples .chart-cell { display: grid; gap: 8px; min-width: 0; }
.empty {
  border: 1px dashed var(--axis); border-radius: 8px; padding: 18px; color: var(--ink-2);
  font-size: var(--step--1); display: grid; gap: 4px;
}
.empty strong { color: var(--ink); font-size: var(--step-0); }

/* Notes */
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 28px; font-size: var(--step--1); color: var(--ink-2); }
.notes h3 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.notes p + p { margin-top: 6px; }
.banner { background: var(--chip); border-radius: 8px; padding: 12px 14px; font-size: var(--step--1); color: var(--ink-2); }

@media (max-width: 480px) {
  .card, .panel { padding: 16px; }
  .trio .v { font-size: 1.85rem; }
}
@media (max-width: 600px) {
  #stats-table th:nth-child(5), #stats-table td:nth-child(5) { display: none; }
  #stats-table { font-size: var(--step--1); }
  #stats-table td.src { min-width: 0; width: 34%; }
  #stats-table td .when { white-space: normal; }
  #stats-table td:nth-child(3) .when { display: none; }
  th, td { padding: 8px 6px; }
}
/* Summary, state links, footer (shared with the secondary pages) */
.lede { color: var(--ink-2); max-width: 75ch; }
.lede b { color: var(--ink); font-weight: 600; }
.statenav { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: var(--step--1); }
.statenav a { background: var(--surface); border: 1px solid var(--hair); border-radius: 999px; padding: 4px 12px; text-decoration: none; font-weight: 600; color: var(--ink-2); }
.statenav a:hover { color: var(--ink); border-color: var(--axis); }
.statenav a[aria-current="page"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.statenav .muted { margin-right: 2px; }
.sitefoot { border-top: 1px solid var(--hair); padding-top: 20px; display: grid; gap: 10px; font-size: var(--step--1); color: var(--muted); }
.sitefoot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sitefoot a { color: var(--ink-2); }
/* Buttons, the share-your-price band and the "user submitted" tag (shared with the secondary pages) */
a.btn, button.btn, label.btn { font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--axis); background: var(--surface); color: var(--ink); font-size: var(--step-0); }
.btn:hover { border-color: var(--ink-2); color: var(--ink); }
.btn.primary { background: #c2410c; border-color: #c2410c; color: #fff; }
.btn.primary:hover { filter: brightness(0.94); color: #fff; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sharecta { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--hair); border-left: 4px solid var(--ri); border-radius: var(--radius); padding: 14px 18px; }
.sharecta p { color: var(--ink-2); max-width: 62ch; }
.sharecta b { color: var(--ink); }
.tag { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; padding: 1px 7px; border-radius: 999px; background: var(--chip); color: var(--ink-2); white-space: nowrap; }
/* Wholesale vs retail readout */
.wtrio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.wtrio > div { border: 1px solid var(--hair); border-radius: 8px; padding: 12px 14px; display: grid; gap: 2px; align-content: start; }
.wtrio .k { font-size: var(--step--1); color: var(--muted); font-weight: 500; }
.wtrio .v { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.1; }
.wtrio .n { font-size: var(--step--1); color: var(--ink-2); }
/* Top navigation bar (every page). Works without scripts: the menu button is a checkbox, the state list opens on focus. */
html { scroll-padding-top: calc(68px + env(safe-area-inset-top, 0px)); }
.topnav { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--hair); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05); }
.topnav-in { max-width: 1080px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; position: relative; }
.topnav .brand { display: inline-flex; align-items: center; gap: 9px; min-height: 56px; margin-right: auto; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.02em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.topnav .brand:hover { color: var(--ink); }
.topnav .brand svg { flex: none; border-radius: 6px; }
.navlinks { display: flex; align-items: center; gap: 2px; }
.navlinks > a, .navdd > button { font: inherit; font-weight: 600; font-size: var(--step-0); color: var(--ink-2); text-decoration: none; background: none; border: 0; margin: 0; padding: 8px 12px; min-height: 40px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.navlinks > a:hover, .navdd > button:hover { background: var(--chip); color: var(--ink); }
.navlinks > a[aria-current="page"], .navdd.current > button { background: var(--chip); color: var(--ink); }
.navlinks > a.navcta { background: #c2410c; color: #fff; margin-left: 8px; }
.navlinks > a.navcta:hover { background: #c2410c; color: #fff; filter: brightness(0.94); }
.navdd { position: relative; }
.navdd > button::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.navdd-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px; background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); padding: 6px; }
.navdd:focus-within .navdd-panel, .navdd.open .navdd-panel { display: grid; }
.topnav.js .navdd:not(.open) .navdd-panel { display: none; }
.navdd-panel a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 6px; text-decoration: none; font-weight: 500; color: var(--ink); white-space: nowrap; }
.navdd-panel a:hover, .navdd-panel a[aria-current="page"] { background: var(--chip); color: var(--ink); }
.navtoggle, .navburger { display: none; }
@media (max-width: 860px) {
  .topnav .brand { flex: 1 1 0; min-width: 0; margin-right: 0; font-size: clamp(0.95rem, 4.1vw, 1.2rem); overflow: hidden; }
  .navburger { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: 8px; background: var(--chip); color: var(--ink); font-weight: 600; font-size: var(--step-0); }
  .navburger i { display: block; width: 16px; height: 2px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }
  .navburger .x { display: none; }
  /* The real control is this invisible checkbox laid over the Menu button, so it works by touch, mouse and keyboard. */
  .navtoggle { display: block; position: absolute; top: 8px; right: max(16px, env(safe-area-inset-right, 0px)); width: 96px; height: 40px; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
  .navtoggle:focus-visible + .navburger { outline: 2px solid var(--focus); outline-offset: 2px; }
  .navtoggle:checked + .navburger .o { display: none; }
  .navtoggle:checked + .navburger .x { display: inline; }
  .navlinks { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 0 14px; border-top: 1px solid var(--hair); max-height: calc(100vh - 60px); overflow-y: auto; }
  .navtoggle:checked ~ .navlinks { display: flex; }
  .navlinks > a, .navdd > button { min-height: 44px; font-size: 1rem; }
  .navlinks > a.navcta { margin: 8px 0 0; justify-content: center; }
  .navdd > button { cursor: default; color: var(--muted); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; min-height: 32px; pointer-events: none; }
  .navdd > button::after { display: none; }
  .navdd .navdd-panel, .topnav.js .navdd:not(.open) .navdd-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); position: static; border: 0; box-shadow: none; padding: 0; min-width: 0; }
  .navdd-panel a { min-height: 44px; font-weight: 600; color: var(--ink-2); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Extra styles for the state, About and Privacy pages. */
.breadcrumb { font-size: var(--step--1); color: var(--muted); }
.breadcrumb a { color: var(--ink-2); }
.prose { max-width: 72ch; display: grid; gap: 12px; }
.prose h2 { margin-top: 10px; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.panel.prose { max-width: none; }
.panel.prose > * { max-width: 72ch; }
.datatable td, .datatable th { white-space: nowrap; }
.datatable th:first-child, .datatable td:first-child { text-align: left; }
.datatable tr.here td { font-weight: 600; background: var(--chip); }
.staticchart { overflow-x: auto; }
.staticchart svg { display: block; width: 100%; min-width: 560px; height: auto; }
.cta { font-weight: 600; font-size: var(--step--1); }

/* Submit page and user-submitted deliveries */
.choose .card p { color: var(--ink-2); }
.choose .step { font-family: var(--font-display); font-weight: 700; color: var(--ri); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--step--1); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form { display: grid; gap: 18px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.field { display: grid; gap: 4px; align-content: start; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: var(--step--1); color: var(--ink); padding: 0; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select { font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--axis); border-radius: 8px; padding: 10px 12px; min-height: 44px; width: 100%; }
.field input:focus, .field select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.field .hint { font-size: var(--step--1); color: var(--muted); min-height: 1.3em; }
.field .hint.good { color: var(--fall); font-weight: 600; }
.field.bad input, .field.bad select { border-color: var(--rise); }
.field .err { font-size: var(--step--1); color: var(--rise); font-weight: 600; }
.field.scanned input, .field.scanned select { background: var(--ri-wash); border-color: var(--ri); }
fieldset.field { border: 0; margin: 0; padding: 0; }
.radios { display: grid; gap: 8px; }
.radios label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: var(--step-0); border: 1px solid var(--axis); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.radios label span small { display: block; color: var(--muted); }
.radios input { width: auto; min-height: 0; margin-top: 3px; accent-color: var(--ri); }
.totalline { font-size: var(--step--1); color: var(--ink-2); }
.totalline b { color: var(--ink); font-variant-numeric: tabular-nums; }
.scanbox { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.scanbox img { width: 96px; height: 128px; object-fit: cover; border-radius: 8px; border: 1px solid var(--hair); background: var(--chip); }
.scanbox ul { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 2px; color: var(--ink-2); }
.meter { height: 8px; border-radius: 999px; background: var(--chip); overflow: hidden; margin-top: 8px; max-width: 320px; }
.meter i { display: block; height: 100%; width: 0; background: var(--ri); border-radius: 999px; transition: width 0.25s; }
.formmsg { font-weight: 600; color: var(--rise); }
.thanks h2 { color: var(--fall); }
.thanks .receipt { border: 1px solid var(--hair); border-radius: 8px; padding: 12px 14px; display: grid; gap: 2px; max-width: 420px; }
.thanks .receipt b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; }
.userdel .towns { display: flex; flex-wrap: wrap; gap: 8px; }
.userdel .towns span { border: 1px solid var(--hair); border-radius: 8px; padding: 6px 10px; font-size: var(--step--1); color: var(--ink-2); }
.userdel .towns b { color: var(--ink); font-variant-numeric: tabular-nums; }
.userdel td:nth-child(2), .userdel th:nth-child(2) { text-align: left; }

/* Fuel costs page */
.fuelstate[hidden] { display: none; }
.fuelsum { color: var(--ink-2); max-width: 78ch; }
.fuelsum b { color: var(--ink); font-weight: 600; }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rankrow { display: grid; grid-template-columns: 2rem minmax(0, 1.25fr) minmax(0, 1.4fr) minmax(8.5rem, auto); gap: 4px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--hair); border-left: 4px solid var(--fuelc, var(--axis)); border-radius: 10px; }
.rankrow .pos { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--muted); line-height: 1; }
.rankrow.best .pos { color: var(--fall); }
.rankrow .what { min-width: 0; }
.rankrow .what b { display: block; font-weight: 600; }
.rankrow .what span { display: block; font-size: var(--step--1); color: var(--ink-2); }
.rankrow .bar { height: 14px; background: var(--grid); border-radius: 7px; overflow: hidden; }
.rankrow .bar i { display: block; height: 100%; min-width: 4px; border-radius: 7px; background: var(--fuelc, var(--axis)); }
.rankrow .val { text-align: right; white-space: nowrap; }
.rankrow .val b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.rankrow .val span { display: block; font-size: var(--step--1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .rankrow { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
  .rankrow .bar { grid-column: 1 / -1; grid-row: 2; height: 10px; }
}
.mathtable td, .mathtable th, .fuelmatrix td, .fuelmatrix th { white-space: nowrap; }
.mathtable thead th { white-space: normal; vertical-align: bottom; }
.mathtable td:first-child { white-space: normal; min-width: 150px; }
.datatable td.why { white-space: normal; text-align: left; min-width: 260px; }
.mathtable td .muted { display: block; font-size: var(--step--1); }
.fuelmatrix td.best { font-weight: 700; color: var(--fall); }
.fuelmatrix th:first-child, .fuelmatrix td:first-child { text-align: left; }
.assume .field input { max-width: 140px; }
.assume .field .unit { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--step--1); }
.formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--step--1); background: var(--chip); border-radius: 8px; padding: 12px 14px; overflow-wrap: anywhere; color: var(--ink); }
.prose table { max-width: none; }
.prose .tablewrap { max-width: none; }