/* An area's own page (/stats/<country>/<area>/): what it adds on top of roadside.css.
   Spec: docs/superpowers/specs/2026-10-12-area-pages-design.md */
:root, [data-theme="day"] { --sign:#243528; --sign-ink:#f6faf3; --car:#f6faf3; --line:rgba(36,53,40,.12); --hit:#cfe9c8; }
[data-theme="night"] { --sign:#0a130e; --sign-ink:#e8f1e9; --car:#e8f1e9; --line:rgba(232,241,233,.12); --hit:#1a3424; }
:focus-visible { outline:2px solid var(--brand-bright); outline-offset:2px; border-radius:4px; }

.area .block { margin-top:72px; }
.area .block h2 { font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 22px; max-width:22ch; }
.area .block .page-kick { margin-bottom:2px; display:inline-block; }
.area .notes { margin:-8px 0 26px; }
.area .notes p { font-size:.92rem; margin:0 0 4px; }

.fuels { list-style:none; padding:0 !important; margin:0 !important; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 64px; }
.fuels li { max-width:none !important; }
/* A long fuel name on a narrow phone sends its price to a line of its own, still at the right. */
.fuel-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 12px; }
.fuel-head h3 { margin:0 !important; font-size:1.12rem; color:var(--ink); }
.grade { font-size:.72rem; font-weight:500; color:var(--ink-faint); letter-spacing:.06em; margin-left:6px; }
.fuel-price { display:flex; align-items:baseline; gap:8px; white-space:nowrap; margin-left:auto; }
.big { font-size:1.9rem; font-weight:600; color:var(--ink); letter-spacing:-.02em; }
.lbl { font-size:.8rem; color:var(--ink-faint); }
.band { position:relative; height:6px; margin:12px 0 6px; border-radius:3px; background:linear-gradient(90deg,rgb(46,125,68),rgb(233,222,150),rgb(194,59,46)); }
.band i { position:absolute; top:-5px; width:3px; height:16px; border-radius:2px; background:var(--ink); transform:translateX(-1.5px); }
.ends { display:flex; justify-content:space-between; gap:12px; font-size:.78rem; color:var(--ink-dim); }
.area .fuel-foot { margin:8px 0 0; font-size:.88rem; max-width:none; display:flex; flex-wrap:wrap; gap:2px 18px; }
.fuel-foot span { white-space:nowrap; }
.chg { font-weight:600; color:var(--ink-dim); } .chg.down { color:var(--brand); } .chg.up { color:var(--tier-high); }

.two { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:64px; align-items:end; }
.mini, .near { list-style:none; padding:0 !important; margin:0 !important; }
.mini li, .near li { max-width:none !important; }
.area .mini a, .mini .row { display:flex; align-items:baseline; gap:14px; padding:13px 14px; border-bottom:1px dashed var(--line); color:var(--ink); text-decoration:none; }
/* A neighbour's row: its name, the word for the difference and its price. On a narrow phone the name
   takes a line of its own, so a long one never runs under the other two. */
.area .near a { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:baseline; gap:2px 14px; padding:13px 14px; border-bottom:1px dashed var(--line); color:var(--ink); text-decoration:none; }
.mini .r { width:2.2em; color:var(--ink-faint); font-size:.82rem; }
.mini .n { flex:1; min-width:0; font-weight:600; }
.near .n { min-width:0; font-weight:600; }
.near .v { justify-self:end; }
.mini .v, .near .v { font-weight:600; font-size:1.02rem; white-space:nowrap; }
.mini li.hit .row { background:var(--hit); border-radius:10px; border-bottom-color:transparent; }
.near { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 64px; }
.near .w { font-size:.86rem; color:var(--ink-dim); white-space:nowrap; } .near .w.down { color:var(--brand); } .near .w.up { color:var(--tier-high); }
@media (hover:hover) { .area .mini a:hover .n, .area .near a:hover .n { text-decoration:underline wavy var(--brand); text-decoration-thickness:1px; text-underline-offset:4px; } }

.get { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:64px; align-items:center; }
.get .phone { width:300px; height:auto; }
[data-theme="day"] .get .phone.night-only, [data-theme="night"] .get .phone.day-only { display:none; }
.get .phone.day-only, .get .phone.night-only { display:block; }
[data-theme="night"] .get .phone.night-only { display:block; }
.area .badges { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:22px; }
.store-badge img { height:46px; width:auto; display:block; }
.area .source { margin-top:72px; font-size:.86rem; max-width:560px; }
.area .source.credit { margin-top:6px; }

@media (max-width:900px) {
  .fuels, .two, .get { grid-template-columns:minmax(0,1fr); gap:28px; }
  .near { grid-template-columns:minmax(0,1fr); gap:0; }
  .area .block { margin-top:52px; }
  .get .phone { width:240px; margin:0 auto; }
}
@media (max-width:480px) {
  .area .near a { grid-template-columns:minmax(0,1fr) auto; }
  .near .n { grid-column:1 / -1; }
}