/* Stránka se čte vestoje u auta, často na slunci a jednou rukou: velká čísla,
   vysoký kontrast, nic, na co se musí mířit.

   Nosná myšlenka rozvržení: dlaždice paliv jsou ve VŠECH kartách stejně široké
   a ve stejném pořadí, takže stejné palivo drží napříč stanicemi jeden svislý
   sloupec a ceny se dají porovnat sjetím očí dolů. Když stanice palivo nemá,
   zůstane po něm prázdné místo — nic se neposune. */

/* Světlý i tmavý režim v jedné deklaraci přes light-dark(). O tom, který
   platí, rozhoduje `color-scheme`: bez volby se řídí systémem, přepínač
   v hlavičce ho přibije na jeden (viz [data-theme] níž a app.js → theme). */
:root {
  color-scheme: light dark;

  --bg: light-dark(#f4f5f7, #0f1115);
  --card: light-dark(#ffffff, #191d24);
  --ink: light-dark(#14171c, #eef1f5);
  --muted: light-dark(#626a76, #98a1ae);
  --line: light-dark(#e2e5ea, #2a303a);
  --accent: light-dark(#1c6fe0, #6aa6ff);

  /* Stáří ceny */
  --fresh: light-dark(#0a6a35, #4ade80);   /* dnes */
  --warn: light-dark(#8a5200, #fbbf24);    /* pár dní */
  --stale: light-dark(#a81f18, #ff8177);   /* týden a víc */

  /* Pořadí ceny mezi zobrazenými stanicemi: nejlevnější zelená, druhá žlutá,
     třetí oranžová a nejdražší červená — od „ber" po „tady ne".
     Podklady jsou schválně jen jemný nádech: přes ně musí zůstat čitelný
     i barevný text stáří, který má vlastní význam (ověřeno na kontrast AA). */
  --rank1-bg: light-dark(#e8f5ec, #16301e);
  --rank1-ink: light-dark(#0a6a35, #4ade80);
  --rank1-line: light-dark(#8fc9a5, #2f6b45);
  --rank2-bg: light-dark(#fbf6dd, #2f2c11);
  --rank2-ink: light-dark(#7a6000, #fde047);
  --rank2-line: light-dark(#d9c87f, #635c1d);
  --rank3-bg: light-dark(#fdf0e2, #33240f);
  --rank3-ink: light-dark(#9a5200, #fdba74);
  --rank3-line: light-dark(#e2b482, #6b4a1f);
  --worst-bg: light-dark(#fdeceb, #33191a);
  --worst-ink: light-dark(#a8251d, #ff8f86);
  --worst-line: light-dark(#e8a9a4, #6b2f2c);

  /* Panel s ceníkem sítě — měřítko, ne pumpa, kam se dá zajet. */
  --compare-bg: light-dark(#eef2f8, #141b27);
  --compare-line: light-dark(#ccd7e8, #2f3d52);

  --radius: 14px;
}

/* Volba z přepínače přebíjí systém. Mění se jen `color-scheme`; všechny
   barvy výš se přepočítají samy. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 0 12px env(safe-area-inset-bottom) 12px;
  max-width: 640px;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

/* ------------------------------------------------------------- hlavička */

.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 10px;
}

.bar h1 {
  flex: 1;
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.icon-btn {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn:disabled { opacity: 0.5; }
.icon-btn.busy svg { animation: spin 0.9s linear infinite; }

/* Přepínač ukazuje, co se stane po klepnutí: ve světlém režimu měsíc,
   v tmavém slunce. Musí to platit i tehdy, když žádná volba uložená není
   a rozhoduje systém — proto ta tři pravidla. */
#theme .sun { display: none; }
#theme .moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme .sun { display: block; }
  :root:not([data-theme="light"]) #theme .moon { display: none; }
}

:root[data-theme="dark"] #theme .sun { display: block; }
:root[data-theme="dark"] #theme .moon { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- filtr */

/* Všech šest paliv musí zůstat na jednom řádku i na úzkém telefonu —
   zalomené LPG pod ostatními vypadalo jako omyl. Proto nowrap a chipy,
   které se v případě potřeby srazí (proto `min-width: 0` a zkracování textu
   místo přetékání). */
.filter {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding-bottom: 10px;
}

.chip {
  flex: 0 1 auto;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: light-dark(#fff, #0f1115);
}

.status {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13.5px;
}

.status.error { color: var(--stale); }

/* ---------------------------------------------------------------- karty */

.list { display: grid; gap: 10px; }

/* Celá karta vede do navigace (klepnutí obsluhuje app.js), takže se chová
   jako tlačítko — kurzor, odezva na stisk. Vnořené odkazy (detail u mbenzinu)
   si klepnutí uzmou pro sebe. */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px;
}

.card[data-nav] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.card[data-nav]:active { border-color: var(--accent); }

.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Vzdálenost a odkaz na detail u mbenzinu pod sebou v pravém sloupci: karta
   má být především velká plocha „navigovat sem", tohle je vedlejší cesta. */
.meta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.detail {
  color: var(--muted);
  font-size: 10.5px;
  text-decoration: none;
  white-space: nowrap;
}

.detail:hover { color: var(--accent); }

/* Logo sítě bere mbenzin ze své knihovny (`/static/chains/…`). Obrázky jdou
   od kraje ke kraji a leckterý má bílé pozadí, takže potřebují bílý podklad
   a odsazení — jinak jim zaoblený roh ukousne kus loga. Stejně to dělá
   i mbenzin (`.st-logo`).

   Síť, kterou v knihovně nemají — a to jsou hlavně malé místní pumpy —
   dostane obecný stojan, aby nadpisy karet držely jednu linku. */
.logo {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  object-fit: contain;
}

.logo:not(.has-logo) {
  padding: 5px;
  border-color: transparent;
  background: transparent;
  opacity: 0.55;
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23888" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20V6a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v14"/><path d="M3 20h13"/><path d="M5 10h9"/><path d="M16 8l2.5 2.5V17a1.5 1.5 0 0 0 3 0v-5.5L19 9"/></svg>');
}

.who {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
}

.name { font-weight: 650; }

/* Adresa běží rovnou za názvem a smí se zalomit — jméno sítě samo o sobě
   pumpu neidentifikuje, tři Shelly ve městě rozezná až ulice. */
.addr { color: var(--muted); font-size: 13.5px; }

.km {
  flex: none;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------- ceny */

/* Každé palivo je samostatná dlaždice s vlastním rámečkem a mezi sousedy je
   vždycky malá mezera. Dlaždice mají svou velikost a drží se u sebe vlevo —
   zbylé místo na kartě se mezi ně NErozděluje: dvě paliva mají být dvě
   dlaždice vedle sebe, ne dva pruhy přes celou šířku.

   `minmax(0, …)` je na to přesně: dokud se dlaždice vejdou, mají svou
   velikost; při pěti a šesti se zmenší tak, aby se na řádek vešly.
   Sloupců je tolik, kolik paliv je ve filtru (--cols nastavuje app.js). */
.prices {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 112px));
  justify-content: start;
  gap: 4px;
}

/* Čtverec, dokud je na to místo; `min-height` drží dlaždici čitelnou i ve
   chvíli, kdy ji šest paliv vedle sebe zúží na padesát pixelů. */
.price {
  container-type: inline-size;
  aspect-ratio: 1;
  min-height: 56px;
  min-width: 0;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}

/* Palivo, které stanice nemá: drží místo ve sloupci, ale nekreslí se. */
.price.empty { border-color: transparent; }
.price.empty > * { display: none; }

/* Pořadí ceny mezi zobrazenými stanicemi. Ceník sítě ONO se do porovnání
   počítá taky — když je nejlevnější, má to být vidět. */
.price.rank-1 { background: var(--rank1-bg); border-color: var(--rank1-line); }
.price.rank-2 { background: var(--rank2-bg); border-color: var(--rank2-line); }
.price.rank-3 { background: var(--rank3-bg); border-color: var(--rank3-line); }
.price.rank-worst { background: var(--worst-bg); border-color: var(--worst-line); }

.price.rank-1 .value { color: var(--rank1-ink); }
.price.rank-2 .value { color: var(--rank2-ink); }
.price.rank-3 .value { color: var(--rank3-ink); }
.price.rank-worst .value { color: var(--worst-ink); }

.fuel {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
}

.value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-size: 15px;
}

.age {
  min-height: 12px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.age.fresh { color: var(--fresh); font-weight: 600; }
.age.warn { color: var(--warn); font-weight: 600; }
.age.stale { color: var(--stale); font-weight: 600; }

/* Velikost písma řídí samotná dlaždice: při šesti palivech vedle sebe je sotva
   padesát pixelů široká, při jednom přes tři sta. Jednotka „Kč" se v nejužším
   stavu vypouští — číslo je důležitější než jednotka, kterou u nás nikdo
   neplete. */
.unit { font-size: 0.55em; font-weight: 600; opacity: 0.75; }

@container (max-width: 92px) {
  .unit { display: none; }
}

@container (min-width: 46px) {
  .value { font-size: 16px; }
}

@container (min-width: 60px) {
  .value { font-size: 19px; }
  .fuel { font-size: 10.5px; }
  .age { font-size: 10.5px; }
}

@container (min-width: 80px) {
  .value { font-size: 24px; }
  .fuel { font-size: 11.5px; }
  .age { font-size: 12px; }
}

@container (min-width: 104px) {
  .value { font-size: 30px; }
  .fuel { font-size: 12px; }
  .age { font-size: 13px; }
}

@container (min-width: 150px) {
  .value { font-size: 36px; }
}

/* Výzva k opravě ceny u pumpy, u které člověk zrovna stojí. Má být vidět, ale
   ne křičet — je to nabídka, ne chyba. */
.nudge {
  margin: 9px 0 0;
  padding: 8px 10px;
  border: 1px dashed var(--accent);
  border-radius: 9px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.nudge a {
  font-weight: 600;
  white-space: nowrap;
}

/* Řádek s oficiálním ceníkem sítě pod kartou její pumpy. */
.ono {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.ono b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Srovnávací panel nad výpisem: stejné dlaždice, ale jiný podklad, aby se
   nepletl se stanicí, ke které se dá dojet — tohle je měřítko, ne cíl. */
.card.compare {
  background: var(--compare-bg);
  border-color: var(--compare-line);
}

.card.compare .km {
  border-color: var(--compare-line);
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}

/* V panelu s ceníkem sítě mají dlaždice bez zvýraznění rámeček v jeho odstínu;
   pořadí ceny (rank-*) si svou barvu ponechá. */
.card.compare .price:not([class*="rank-"]):not(.empty) { border-color: var(--compare-line); }

/* Předěl pod měřítkem: čára s popiskem, ať je jasné, že teprve odsud jsou
   pumpy, kam se dá zajet. */
.divider {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 2px 0;
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ------------------------------------------------------------- ostatní */

.actions { display: grid; padding: 12px 0; }

.btn {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.btn:disabled { opacity: 0.5; }

.foot {
  padding: 4px 0 24px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Kostry karet během prvního načtení: stránka nesmí blikat prázdnotou. */
.skeleton { opacity: 0.55; }
.skeleton .line {
  height: 12px;
  border-radius: 6px;
  background: var(--line);
}
.skeleton .line.short { width: 40%; margin-top: 8px; }
.skeleton .box { aspect-ratio: 1; border-radius: 9px; background: var(--line); }

/* Spinner na místě stáří, dokud nedojede detail stanice. */
.spin {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid var(--line);
  border-top-color: var(--muted);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}