/* ---------------------------------------------------------------------------
   Fuel Facts - all styling lives here.

   A design pass means editing this file and nothing else. No colour, size or
   spacing is written into the page generator, so the look can be changed
   without touching how pages are built or what they say.

   Start with the tokens below: change those six or seven values and the whole
   site changes with them.
   ------------------------------------------------------------------------ */

:root{
  /* Colour */
  --bg:#ffffff;
  --surface:#f7f8fa;
  --line:#e4e7ec;
  --ink:#14181f;
  --muted:#5c6673;
  --accent:#0c6b5e;
  --accent-soft:#e6f4f1;
  --good:#0c6b5e;
  --mid:#8a6d1f;
  --bad:#a33a2a;

  /* Shape and rhythm */
  --radius:14px;
  --gap:12px;
  --measure:860px;
  --font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#10141a; --surface:#171d26; --line:#28313d; --ink:#eaeef4;
    --muted:#9aa6b5; --accent:#54cdb8; --accent-soft:#16302c;
    --good:#54cdb8; --mid:#d9b25a; --bad:#e8836f;
  }
}
:root[data-theme="dark"]{
  --bg:#10141a; --surface:#171d26; --line:#28313d; --ink:#eaeef4;
  --muted:#9aa6b5; --accent:#54cdb8; --accent-soft:#16302c;
  --good:#54cdb8; --mid:#d9b25a; --bad:#e8836f;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--font);-webkit-text-size-adjust:100%}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 16px}

/* Header and footer ------------------------------------------------------ */
header.site{border-bottom:1px solid var(--line);background:var(--surface)}
header.site .wrap{display:flex;align-items:center;gap:20px;height:58px}
.brand{font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.brand span{color:var(--accent)}
nav.site a{color:var(--muted);text-decoration:none;margin-right:16px;font-size:14px}
nav.site a:hover{color:var(--ink)}
footer.site{border-top:1px solid var(--line);margin-top:44px;padding:22px 0 40px;font-size:13px;color:var(--muted)}
footer.site a{color:var(--muted)}

/* Links in body content. Breadcrumbs and chips override this below, so they
   keep their own quieter treatment. */
main a{color:var(--accent)}
main a:hover{text-decoration:none}

/* Page furniture --------------------------------------------------------- */
.crumbs{font-size:13px;color:var(--muted);margin:20px 0 6px}
.crumbs a{color:var(--muted)}
h1{font-size:clamp(25px,5.2vw,34px);line-height:1.2;margin:0 0 6px;letter-spacing:-.02em}
h2{font-size:19px;margin:32px 0 10px;letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 26px}

/* Headline figures ------------------------------------------------------- */
.headline{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap);margin-bottom:var(--gap)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stat .label{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.stat .value{font-size:clamp(26px,6vw,34px);font-weight:680;letter-spacing:-.03em;margin-top:4px}
.stat .value small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.stat .note{font-size:13px;color:var(--muted);margin-top:2px}

.verdict{background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:14px 0 26px;font-size:15px}
.verdict b{color:var(--accent)}

/* Tables ----------------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--surface);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
tr:last-child td{border-bottom:none}
td.num{font-variant-numeric:tabular-nums;font-weight:600}
.rate{font-size:12px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.rate.good{color:var(--good)}
.rate.mid{color:var(--mid)}
.rate.bad{color:var(--bad)}

/* Links to related pages ------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.chips a{display:inline-block;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:14px}
.chips a:hover{border-color:var(--accent);color:var(--accent)}
.chips--wide{display:block}
.chips--wide li{border-bottom:1px solid var(--line);padding:0}
.chips--wide li:last-child{border-bottom:none}
.chips--wide a{display:flex;justify-content:space-between;align-items:baseline;
  border:0;border-radius:0;background:none;padding:11px 2px;color:var(--ink)}
.chips--wide a:hover{color:var(--accent)}
.chips--wide .muted{color:var(--muted);font-size:13px}

.note-block{font-size:13.5px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:26px 0}

/* Advertising slots ------------------------------------------------------
   Reserved space, so the page does not jump around when an ad loads into it.
   The placeholder styling below only shows while there is no real ad code. */
.ad{margin:26px 0;text-align:center}
/* A banner sitting directly under the site header needs less space above it,
   or it looks detached from the header and pushes the heading too far down. */
main > .ad:first-child{margin-top:16px}
.ad__label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:6px}
.ad__slot{display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);font-size:13px}
.ad--leaderboard .ad__slot{min-height:90px}
.ad--rectangle .ad__slot{min-height:250px}

@media(max-width:560px){
  header.site .wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:8px}
  nav.site a{margin-right:12px}
  .ad--leaderboard .ad__slot{min-height:100px}
}