/* Fuel Finder UK shared chrome: tokens, type, header, footer. Edit here, then rebuild guide.css / town.css / index.html. */
@font-face { font-family:"Archivo"; src:url(/fonts/archivo-var.woff2) format("woff2"); font-weight:500 900; font-stretch:62% 100%; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url(/fonts/instrument-sans-var.woff2) format("woff2"); font-weight:400 700; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url(/fonts/jetbrains-mono-500.woff2) format("woff2"); font-weight:500; font-display:swap; }
:root {
  color-scheme: dark;
  --bg:#0E0E0D; --panel:#171715; --panel-2:#1C1C1A; --rule:#2C2B27; --rule-2:#3A3832;
  --text:#F2EFE8; --text-2:#CFCBC2; --muted:#A8A499; --faint:#8C887E;
  --accent:#E65100; --accent-hi:#FF8A3D; --ink:#15140F; --green:#3DDC84; --red:#FF7A6B;
  --display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1240px; --gut:40px;
}
* { box-sizing:border-box; }
html { scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--accent-hi); }
img { max-width:100%; height:auto; }
:focus-visible { outline:2px solid var(--accent-hi); outline-offset:3px; }

/* header */
.site-header { position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--rule); }
.nav { max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; }
.brand { display:flex; align-items:center; gap:10px; min-height:44px; color:var(--text); text-decoration:none; font-family:var(--display); font-stretch:80%; font-weight:800; font-size:1.3rem; letter-spacing:-.01em; white-space:nowrap; }
.brand svg, .brand img { width:28px; height:28px; flex:none; display:block; }
.nav-links { display:flex; flex-wrap:wrap; align-items:center; gap:0 26px; font-size:.94rem; font-weight:500; }
.nav-links a { color:var(--text-2); text-decoration:none; white-space:nowrap; padding:8px 0; }
.nav-links a:hover { color:var(--accent-hi); }
.nav-right { display:flex; align-items:center; gap:8px; flex:none; }
.nav-download { background:var(--text); color:var(--bg); text-decoration:none; font-weight:600; font-size:.94rem; padding:11px 18px; white-space:nowrap; }
.nav-download:hover { background:var(--accent-hi); }
.nav-toggle { display:none; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:0; color:var(--text); font-size:1.5rem; line-height:1; cursor:pointer; }
@media (max-width:1080px) {
  .nav-toggle { display:inline-flex; }
  .nav-links { display:none; }
  .nav-links.open { display:flex; flex-direction:column; align-items:stretch; position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--rule); padding:4px var(--gut) 16px; }
  .nav-links.open a { padding:14px 0; border-bottom:1px solid var(--rule); font-size:1.05rem; }
}
@media (max-width:640px) {
  :root { --gut:20px; }
  .brand { font-size:1.15rem; }
  .nav-download { padding:10px 14px; font-size:.88rem; }
}

/* shared bits */
.eyebrow { font-family:var(--mono); font-size:.78rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-hi); }
footer { border-top:1px solid var(--rule); padding:28px var(--gut); color:var(--faint); font-size:.88rem; text-align:center; }
footer a { color:var(--text-2); }

/* article + data pages (guides, town pages, hub) */
main { max-width:920px; margin:0 auto; padding:56px var(--gut) 104px; }
h1 { font-family:var(--display); font-stretch:66%; font-weight:800; text-transform:uppercase; font-size:clamp(2.7rem,7.4vw,4.9rem); line-height:.92; letter-spacing:-.012em; margin:14px 0 22px; text-wrap:balance; }
h1 .gradient-text { color:var(--accent); }
h2 { font-family:var(--body); font-weight:600; font-size:clamp(1.3rem,3vw,1.6rem); line-height:1.25; margin:56px 0 14px; padding-top:22px; border-top:2px solid var(--text); }
p { margin:0 0 16px; }
main > p, main li { color:var(--text-2); }
.lede { color:var(--text-2); font-size:1.18rem; line-height:1.5; max-width:38em; }
.updated { color:var(--faint); font-family:var(--mono); font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; margin-top:12px; }
main ul { padding-left:1.1em; }
main li { margin:8px 0; }
strong { color:var(--text); font-weight:600; }

.breadcrumb { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:22px; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--accent-hi); }
.breadcrumb span[aria-hidden] { margin:0 8px; }

.callout { background:var(--panel); border:1px solid var(--rule-2); padding:22px 24px; margin:30px 0; color:var(--text-2); }
.cta { display:inline-block; background:var(--accent); color:var(--ink); text-decoration:none; padding:14px 22px; font-weight:600; white-space:nowrap; }
.cta:hover { background:var(--accent-hi); }

/* town pages + hub */
.callout { display:flex; align-items:center; justify-content:space-between; gap:20px 28px; flex-wrap:wrap; }
.callout p { margin:0; color:var(--text); }
.callout > div { flex:1 1 360px; }
.callout > div p + p { color:var(--muted); margin-top:6px; }
.callout-title { font-size:1.2rem; font-weight:600; }
.callout.slim { padding:18px 22px; margin:22px 0 34px; }

.snap-row { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-top:18px; }
.snap-badge, .live-tag { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; padding:7px 11px; border:1px solid var(--rule-2); color:var(--muted); text-decoration:none; }
.live-tag { color:var(--green); border-color:rgba(61,220,132,.4); }
.live-tag:hover { background:rgba(61,220,132,.1); }
.pulse { width:8px; height:8px; background:var(--green); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion:reduce) { .pulse { animation:none; } }

.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:36px 0; border-top:2px solid var(--text); border-bottom:1px solid var(--rule); }
.stat-card { padding:22px 20px 24px; border-left:1px solid var(--rule); min-width:0; }
.stat-card:first-child { padding-left:0; border-left:0; }
.stat-card .label { font-family:var(--mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.stat-card .value { font-family:var(--display); font-stretch:66%; font-weight:800; font-size:3.1rem; line-height:1; margin-top:10px; }
.stat-card .delta { font-size:.85rem; margin-top:8px; line-height:1.35; }
.delta.cheaper { color:var(--green); }
.delta.pricier { color:var(--red); }
.delta.neutral { color:var(--muted); }
.lock { width:1em; height:1em; vertical-align:-.12em; flex-shrink:0; }
.stat-card.locked { display:block; text-decoration:none; color:inherit; background:var(--panel); padding-left:20px; }
.stat-card.locked:hover { background:var(--panel-2); }
.stat-card.locked .value { display:flex; align-items:center; gap:10px; color:var(--accent-hi); }
.stat-card.locked .value .lock { font-size:1.6rem; }
.stat-card.locked .blur { filter:blur(7px); color:var(--text); user-select:none; }
.stat-card .delta.live { color:var(--accent-hi); font-weight:600; }

.compare { color:var(--text); font-size:1.08rem; line-height:1.7; }
.trend-placeholder { background:var(--panel); border:1px dashed var(--rule-2); padding:28px; text-align:center; color:var(--muted); margin:20px 0; }
.trend-chart { background:var(--panel); border:1px solid var(--rule); padding:22px 20px 18px; margin:20px 0; }
.trend-chart svg { width:100%; height:120px; display:block; }
.trend-chart polyline { stroke:var(--accent-hi); }
.trend-labels { display:flex; justify-content:space-between; margin-top:12px; font-family:var(--mono); font-size:.68rem; color:var(--muted); text-align:center; }
.trend-labels strong { color:var(--text); font-size:.78rem; font-weight:500; }

.brand-table { width:100%; border-collapse:collapse; margin:12px 0 8px; font-size:.98rem; }
.brand-table th, .brand-table td { text-align:left; padding:12px 8px 12px 0; border-bottom:1px solid var(--rule); }
.brand-table th { font-family:var(--mono); color:var(--muted); font-weight:500; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; }
.brand-table td:nth-child(n+2), .brand-table th:nth-child(n+2) { text-align:right; padding-right:0; padding-left:8px; font-variant-numeric:tabular-nums; }
.brand-list { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.brand-pill { border:1px solid var(--rule-2); padding:6px 12px; font-size:.88rem; color:var(--text); }
.brand-pill .count { color:var(--muted); }

.station-list { list-style:none; margin:16px 0; padding:0 !important; border-top:1px solid var(--rule); }
.station-list li { margin:0; padding:14px 0; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; gap:16px; align-items:center; }
.station-list .s-name { font-weight:600; color:var(--text); }
.station-list .s-addr { color:var(--muted); font-size:.86rem; }
.station-list .s-side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.station-list .s-brand { font-family:var(--mono); color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; flex-shrink:0; }
.live-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid rgba(255,138,61,.45); color:var(--accent-hi); font-size:.78rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.live-chip:hover { background:rgba(255,138,61,.14); }

.town-index { list-style:none; margin:28px 0; padding:0 !important; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); column-gap:32px; border-top:2px solid var(--text); }
.town-index li { margin:0; }
.town-index a { display:block; padding:14px 0; border-bottom:1px solid var(--rule); text-decoration:none; }
.town-index a:hover { border-bottom-color:var(--accent-hi); }
.town-index a:hover .t-name { color:var(--accent-hi); }
.town-index .t-name { display:block; font-weight:600; color:var(--text); }
.town-index .t-meta { display:block; color:var(--muted); font-size:.82rem; margin-top:2px; }

.faq details { border-bottom:1px solid var(--rule); padding:16px 0; }
.faq summary { cursor:pointer; font-weight:600; color:var(--text); }
.faq summary:hover { color:var(--accent-hi); }
.faq p { color:var(--muted); margin:10px 0 0; }

.sticky-cta { display:none; }
@media (max-width:720px) {
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat-card { border-top:1px solid var(--rule); }
  .stat-card:nth-child(-n+2) { border-top:0; }
  .stat-card:nth-child(odd) { padding-left:0; border-left:0; }
  .stat-card.locked { padding-left:20px; }
  .stat-card .value { font-size:2.6rem; }
  .callout { flex-direction:column; align-items:flex-start; }
  .callout > div { flex:0 0 auto; }
  .trend-chart { padding:18px 12px 14px; }
  .trend-labels { font-size:.56rem; }
  .trend-labels strong { font-size:.6rem; }
  .sticky-cta { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px 10px 16px; background:var(--panel-2); border-top:1px solid var(--rule-2); font-size:.82rem; color:var(--muted); }
  .sticky-cta strong { color:var(--text); }
  .sticky-cta .cta { padding:10px 16px; font-size:.88rem; }
  body { padding-bottom:72px; }
}

/* UK-wide pages: uk-average, cheapest-towns, brands */
.brand-table td a { color:var(--text); text-decoration:none; border-bottom:1px solid var(--rule-2); }
.brand-table td a:hover { color:var(--accent-hi); border-bottom-color:var(--accent-hi); }
.rank-table td:first-child, .rank-table th:first-child { width:2.6em; padding-right:8px; color:var(--muted); font-family:var(--mono); font-size:.78rem; }
.rank-table td:nth-child(2), .rank-table th:nth-child(2) { text-align:left; padding-left:0; }
.note { color:var(--faint); font-size:.9rem; margin-top:14px; }
.note a { color:var(--text-2); }
@media (max-width:720px) {
  .hide-sm { display:none; }
  .brand-table { font-size:.92rem; }
}

h3 { font-family:var(--body); font-weight:600; font-size:1.06rem; line-height:1.3; color:var(--text); margin:30px 0 4px; }
h3 .count { color:var(--muted); font-weight:400; }

/* Google preferred source badge */
.pref-source { display:inline-block; line-height:0; }
.pref-source img { display:block; width:200px; height:auto; }
footer .pref-source { display:block; width:200px; margin:0 auto 16px; }