/* ============================================================
   MeteoTrace — vzhled
   Vanilla CSS, žádný build krok (R1). Barvy jako proměnné, ať jde motiv
   přidat jednou sadou hodnot (vzor Gulpka).
   ============================================================ */

:root {
  --bg: #f4f7fb;
  --bg-grad: linear-gradient(180deg, #e8f1fb 0%, #f4f7fb 42%);
  --surface: #ffffff;
  --surface-2: #f0f4f9;
  --line: #dfe6ee;
  --text: #16202b;
  --text-soft: #63717f;
  --accent: #1a7fd4;
  --accent-soft: #e3f0fc;
  --warn-bg: #fff5e2;
  --warn-line: #e6b45c;
  --warn-text: #7a4f0d;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(16, 32, 48, .05), 0 6px 20px rgba(16, 32, 48, .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f151c;
    --bg-grad: linear-gradient(180deg, #16212e 0%, #0f151c 42%);
    --surface: #17202b;
    --surface-2: #1d2836;
    --line: #26323f;
    --text: #e8eef5;
    --text-soft: #93a2b2;
    --accent: #55b0f5;
    --accent-soft: #14293c;
    --warn-bg: #2e2413;
    --warn-line: #8a6a2a;
    --warn-text: #f0d9a8;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .35);
  }
}

/* Vynucený tmavý režim z nastavení — tytéž hodnoty, jiná podmínka. */
:root[data-theme="dark"] {
  --bg: #0f151c;
  --bg-grad: linear-gradient(180deg, #16212e 0%, #0f151c 42%);
  --surface: #17202b;
  --surface-2: #1d2836;
  --line: #26323f;
  --text: #e8eef5;
  --text-soft: #93a2b2;
  --accent: #55b0f5;
  --accent-soft: #14293c;
  --warn-bg: #2e2413;
  --warn-line: #8a6a2a;
  --warn-text: #f0d9a8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .35);
}

/* ── Růžové motivy ──────────────────────────────────────────────────────
   Michal 29. 8. 2026: *„udělej i růžový a tmavě růžový motiv pro dámy."*

   ⚠️ Není to přebarvený modrý motiv. Kontrast se musí hlídat znovu:
   růžová má při stejné světlosti nižší kontrast proti bílé než modrá,
   takže text i tlumené popisky jsou tu ZÁMĚRNĚ tmavší, než by vyšlo
   prostým posunem odstínu. Údaj, který se špatně čte, je horší než údaj
   v nudné barvě.

   ⚠️ Semaforové tóny (`--ton-*`) se NEPŘEBARVUJÍ. Zelená pořád znamená
   klid a červená nebezpečí — kdyby se přizpůsobily motivu, přestal by
   semafor fungovat právě tam, kde na něm nejvíc záleží. */
:root[data-theme="pink"] {
  --bg: #fdf4f8;
  --bg-grad: linear-gradient(180deg, #fbe8f1 0%, #fdf4f8 42%);
  --surface: #ffffff;
  --surface-2: #fbeef4;
  --line: #f2d9e5;
  --text: #2b1622;
  --text-soft: #86697a;
  --accent: #c2185b;
  --accent-soft: #fce4ec;
  --warn-bg: #fff5e2;
  --warn-line: #e6b45c;
  --warn-text: #7a4f0d;
  --shadow: 0 1px 2px rgba(80, 20, 50, .06), 0 6px 20px rgba(80, 20, 50, .08);
}

:root[data-theme="pink-dark"] {
  /* ⚠️ Sytější, než by stačilo. Při #1a1016 byl motiv od obyčejného tmavého
     k nerozeznání a vypadal by jako by se přepnutí nepovedlo — volba, kterou
     není poznat, je totéž jako volba, která nefunguje. */
  --bg: #1f1119;
  --bg-grad: linear-gradient(180deg, #331a29 0%, #1f1119 42%);
  --surface: #2b1926;
  --surface-2: #372030;
  --line: #4a2c3f;
  --text: #f6e9f0;
  --text-soft: #bb96ab;
  --accent: #ff8ab8;
  --accent-soft: #3a1f2e;
  --warn-bg: #33251a;
  --warn-line: #8a6a2a;
  --warn-text: #f0d9a8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .4);
  /* Na tmavém pozadí musí být podbarvení sytější, aby vůbec bylo vidět —
     tatáž úvaha jako u tmavého motivu. */
  --ton-sila: 0.16;
}


* { box-sizing: border-box; }

/* 🚨 PROHLÍŽEČ MÁ VLASTNÍ POTAŽENÍ DOLŮ A PŘEBIL BY TO NAŠE. Chrome na
   Androidu na přetažení nahoře stránku CELOU ZNOVU NAČTE — a s ní by zmizela
   i rozdělaná trasa. `contain` ho vypne, ale rolování uvnitř appky nechá být.
   Patří na `html` I na `body`: prohlížeče se liší v tom, který z nich se ptají. */
html, body { overscroll-behavior-y: contain; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg-grad) no-repeat, var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

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

.top {
  position: sticky; top: 0; z-index: 10;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark { color: var(--accent); font-size: 20px; }
.brand-mark.big { font-size: 44px; }
.brand-name { font-weight: 700; letter-spacing: -.01em; }

/* ── Značka jako tlačítko nabídky ──────────────────────────────────────── */
/* Celý řádek se značkou je tlačítko: na telefonu je to ta největší plocha,
   která v hlavičce zbývá, a trefí se palcem naslepo. */
.brand-toggle {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;                    /* ať se kontext může zkrátit */
  padding: 8px 4px; margin: -8px 0 -8px -4px;   /* větší terč, tentýž vzhled */
  font: inherit; text-align: left;
  color: var(--text); background: none; border: 0;
  cursor: pointer;
}
/* ⚠️ Šipka musí být vidět, jinak nikoho nenapadne na značku klepnout.
   Při 10 px a barvě popisků splývala s pozadím — na fotce mobilu byla
   k nerozeznání od tečky. */
.brand-sipka { flex: none; font-size: 13px; color: var(--accent); transition: transform .18s; }
.brand-toggle[aria-expanded="true"] .brand-sipka { transform: rotate(180deg); }

/* Co je vidět dole, když je nabídka sbalená. Bez toho by zmizely záložky
   a nebylo by poznat, jestli se člověk dívá na místo, nebo na trasu —
   a zmizelé nastavení se nedá odlišit od ztraceného. */
.brand-kontext {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: right;
  font-size: 13px; font-weight: 500; color: var(--text-soft);
}
.brand-toggle[aria-expanded="true"] .brand-kontext { display: none; }

/* ⚠️ Sbaluje se OBAL, ne jednotlivé kusy: jinak by v hlavičce zůstaly
   mezery po prvcích, které nejsou vidět. Schování obstará `[hidden]`. */
.top-menu { margin-top: 10px; }

.search { display: flex; gap: 8px; }

.search input {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  font: inherit; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.icon-btn {
  flex: none; width: 44px;                 /* 44 px = spolehlivě trefitelné prstem */
  font-size: 20px; line-height: 1;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.icon-btn:active { background: var(--accent-soft); }

.results {
  list-style: none; margin: 8px 0 0; padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.results li { padding: 11px 14px; cursor: pointer; border-top: 1px solid var(--line); }
.results li:first-child { border-top: 0; }
.results li:hover, .results li:focus-visible { background: var(--accent-soft); }
.results .muted { color: var(--text-soft); font-size: 14px; }
.results li.empty { cursor: default; color: var(--text-soft); }

/* ---------- potažení dolů: načíst znovu ---------- */

/* Pruh visí nad stránkou a vytahuje ho prst. `position: fixed` schválně:
   kdyby byl v toku, tlačil by při tažení celou appku dolů a mapa by pod ním
   poskakovala. Takhle se hýbe jen on.

   ⚠️ `z-index` je pod hlavičkou (10), ne nad ní — pruh má vyjíždět ZPOD ní. */
.pull {
  position: fixed; z-index: 9;
  /* ⚠️ `top: 0`, ale posun se počítá od SPODNÍHO okraje hlavičky (měří ho JS).
     Napevno zapsaná výška by nesedila: sbalená hlavička má 55 px, rozbalená
     163 px — a při „safe area" na telefonu ještě víc. Napoprvé se pruh kvůli
     tomu schoval za hlavičku celý a vykukovalo z něj 7 px. */
  top: 0; left: 0; right: 0;
  display: flex; justify-content: center;
  pointer-events: none;                    /* prst patří stránce, ne pruhu */
  transform: translateY(-100%);
  opacity: 0;
}
/* Během tažení se posun mění každý snímek, takže se NEanimuje; plynulý
   návrat po puštění zapíná JS značkou `data-hladce`. */
.pull[data-hladce="1"] { transition: transform .22s ease, opacity .22s ease; }

.pull-box {
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.pull-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Šipka se u prahu otočí vzhůru — „už můžeš pustit" musí být vidět DŘÍV,
   než člověk pustí, jinak je to hádanka. Barva to jen podtrhuje; poznat
   je to i černobíle. */
.pull-ico { flex: none; font-size: 15px; line-height: 1; transition: transform .18s; }
.pull[data-stav="release"] .pull-ico { transform: rotate(180deg); }
.pull[data-stav="release"] .pull-box,
.pull[data-stav="working"] .pull-box { color: var(--accent); border-color: var(--accent); }

/* Načítání: kolečko místo šipky. Vlastní tvar, ne emoji — ten se točí
   v každém systému jinak, a někde vůbec. */
.pull[data-stav="working"] .pull-ico {
  width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  font-size: 0;                            /* šipku schovej, kruh nech */
  animation: pull-tocit .7s linear infinite;
}
@keyframes pull-tocit { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pull[data-stav="working"] .pull-ico { animation-duration: 2.4s; }
}

/* ---------- uložená místa ---------- */

/* Nadpis jen pro odečítač obrazovky: vidoucí pozná řádek podle hvězdiček,
   nevidomý potřebuje slyšet, co ten seznam je. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.saved { margin-top: 10px; }

.chips {
  display: flex; gap: 8px;
  list-style: none; margin: 0; padding: 2px 0;
  overflow-x: auto;                          /* radši rolovat než zalamovat hlavičku */
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { height: 0; }

.chip {
  flex: none;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 7px 13px;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { background: var(--accent-soft); }
.chip[aria-current="true"] {
  color: var(--accent); font-weight: 600;
  background: var(--accent-soft);
  border-color: var(--accent);
}

.hint { margin: -6px 0 12px; font-size: 13px; color: var(--text-soft); }

.place-row { display: flex; align-items: start; gap: 10px; }
.place-row .place { flex: 1; min-width: 0; }

/* Hvězdička drží stejnou plochu jako ostatní tlačítka (44 px), ale bez rámečku —
   uvnitř karty by druhý rámeček dělal nepořádek. */
.star {
  /* ⚠️ ŽÁDNÁ pevná šířka. Tlačítko nese popisek, a když se do 44 px nevejde,
     text přeteče ven, roztáhne kartu a hodinový pruh vedle PŘESTANE ROLOVAT.
     Layoutový test pak hlásí přetečení u hodin — tedy u něčeho úplně jiného,
     než co se rozbilo. */
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;                        /* trefitelné prstem */
  padding: 0 8px; margin: -8px -8px 0 0;
  font: inherit; font-size: 13px; white-space: nowrap;
  color: var(--accent);
  background: none; border: 0; cursor: pointer;
}
.star .star-icon { font-size: 20px; line-height: 1; }
.star[aria-pressed="true"] { color: var(--accent); }
.star[disabled] { color: var(--text-soft); cursor: default; }

/* ---------- upozornění ---------- */

.notice {
  margin: 12px 16px 0;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--warn-text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 12px;
}

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

main { max-width: 720px; margin: 0 auto; padding: 16px 16px 48px; }

.card {
  margin-bottom: 16px; padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card h2 {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-soft);
}

.place { margin: 0 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }

.now-main { display: flex; align-items: center; gap: 18px; }
.now-icon { font-size: 60px; line-height: 1; }
.now-temp { font-size: 46px; font-weight: 300; letter-spacing: -.03em; }
.now-cond { font-size: 17px; }
.now-feels { margin-top: 2px; font-size: 14px; color: var(--text-soft); }

.details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px; margin: 18px 0 0;
  background: var(--line);                  /* mřížka je pozadí, buňky ji překryjí */
  border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.details > div { padding: 10px 12px; background: var(--surface); }
.details dt { font-size: 12px; color: var(--text-soft); }
.details dd { margin: 2px 0 0; font-size: 16px; font-variant-numeric: tabular-nums; }
/* Celý název směru větru pod hodnotou — „severovýchodní", ne „SV". */
.details dd .dir { display: block; margin-top: 2px; font-size: 12px; color: var(--text-soft); font-variant-numeric: normal; }

/* ── Piktogramy údajů ───────────────────────────────────────────────────
   Sedí v rohu buňky, tenkou čarou a tlumeně — v duchu mapy. Jsou JEN
   doplněk: popis i hodnota stojí vedle nich (Michal 28. 8. 2026 chtěl mít
   jistotu, že „to je opravdu západ", ne aby ikona nesla údaj sama). */
.details > div { position: relative; }

.sky-icon {
  width: 20px; height: 20px;
  color: var(--accent);
  opacity: 0.55;
}
.details .fact-ico { position: absolute; top: 8px; right: 10px; line-height: 0; }

/* UV nese vlastní sdělení („tohle jde po tvém zdraví"), ne jen značku
   u popisku — proto větší a sytější než ostatní piktogramy. */
.fact-ico-velka .sky-icon { width: 30px; height: 30px; opacity: 0.75; }

/* ── Semafor dlaždic ────────────────────────────────────────────────────
   🚨 BARVA NIKDY NENESE ÚDAJ SAMA. Vedle každé podbarvené buňky stojí
   popis i hodnota („Vítr / 82 km/h"), takže kdo odstíny nerozliší —
   a barvoslepost má každý dvanáctý muž — nepřijde o nic. Barva je
   zvýrazňovač, ne sdělení.

   Prahy, kdy se který stupeň nasadí, jsou v `lib/tile-tone.js` a mají
   samotest: barva, která svítí pořád, přestane cokoli znamenat.

   ⚠️ Podbarvení je ZÁMĚRNĚ slabé (8–16 %). Sytá plocha by přebila text,
   který na ní stojí, a dlaždice by se hůř četla právě tehdy, kdy na ní
   nejvíc záleží. */
:root {
  --ton-klid: 140 62% 42%;
  --ton-mirne: 82 60% 42%;
  --ton-pozor: 38 92% 50%;
  --ton-zle: 18 88% 52%;
  --ton-krize: 356 78% 52%;
  --ton-sila: 0.10;                 /* jak sytě se podbarvuje */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ton-sila: 0.16; }
}
:root[data-theme="dark"] { --ton-sila: 0.16; }

.details > div[data-ton="mirne"] { background: color-mix(in srgb, hsl(var(--ton-mirne)) calc(var(--ton-sila) * 100%), var(--surface)); }
.details > div[data-ton="pozor"] { background: color-mix(in srgb, hsl(var(--ton-pozor)) calc(var(--ton-sila) * 100%), var(--surface)); }
.details > div[data-ton="zle"]   { background: color-mix(in srgb, hsl(var(--ton-zle))   calc(var(--ton-sila) * 130%), var(--surface)); }
.details > div[data-ton="krize"] { background: color-mix(in srgb, hsl(var(--ton-krize)) calc(var(--ton-sila) * 160%), var(--surface)); }

/* Soumrak a svítání se nebarví stupni, ale plynule — sílu dodává JS
   proměnnou `--zar` (0–1), protože „jak moc zrovna zapadá" je spojitá
   věc, ne pět přihrádek. */
.details > div[data-soumrak] {
  background: color-mix(in srgb, hsl(var(--soumrak-barva)) calc(var(--zar, 0) * 22%), var(--surface));
}
.details > div[data-soumrak="vychod"] { --soumrak-barva: 42 95% 55%; }
.details > div[data-soumrak="zapad"]  { --soumrak-barva: 14 90% 52%; }

/* Ikony východu a západu mají vlastní teplou barvu i mimo soumrak.
   ⚠️ Rozdíl mezi nimi ale pořád nese ŠIPKA, ne barva — kdo barvy
   nerozliší, musí východ od západu poznat dál (poučení z 28. 8. 2026). */
#ico-sunrise .sky-icon { color: hsl(42 92% 52%); opacity: 0.9; }
#ico-sunset .sky-icon { color: hsl(14 88% 55%); opacity: 0.9; }

/* Střelka větru se barví podle síly — barvu dosazuje JS podle `windTon()`.
   ⚠️ Větší než ostatní značky: nese barvu, a ta se na dvaceti pixelech
   špatně rozeznává. Údaj sám o sobě si zaslouží víc místa než popisek. */
#ico-wind .sky-icon {
  width: 26px; height: 26px;
  color: var(--vitr-barva, var(--accent));
  opacity: 0.95;
}

/* Silueta v UV zčervená se zátěží. Slunce nad ní zůstává sluncem. */
#ico-uv .sky-icon { color: var(--uv-barva, var(--accent)); }

/* Šipka „dorůstá / couvá" vedle kotouče Měsíce. Menší než kotouč: je to
   dovětek k údaji, ne údaj sám. */
.moon-trend { width: 14px; height: 14px; vertical-align: -2px; color: var(--text-soft); }

/* Měsíc stojí přímo v hodnotě, tak je o kousek větší a plně sytý —
   je to údaj sám o sobě, ne značka u popisu. */
.moon-icon { width: 22px; height: 22px; vertical-align: -5px; color: var(--text); }

/* Nadmořská výška pod teplotou: patří k ní, tak se drží jejího sloupce. */
/* Ikona počasí a pod ní nadmořská výška.

   🚨 Sloupec s ikonou je nižší než ten s teplotou (60 px proti ~85 px),
   takže se výška vejde do místa, které tam už bylo — karta nenaroste. */
.now-icon-box { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.now-elev {
  display: flex; align-items: center; gap: 5px;
  /* ⚠️ Odstup od ikony počasí nad ní. Při 2px mezeře se výška o ikonu
     opírala a vypadala jako její součást — Michal 29. 8. 2026: „je to moc
     nalepené". Kotouč slunce má měkký okraj, takže potřebuje víc místa,
     než se od oka zdá. */
  margin-top: 10px;
  font-size: 12px; color: var(--text-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.now-elev .sky-icon { width: 16px; height: 16px; opacity: 0.7; }


.updated { margin: 12px 0 0; font-size: 12px; color: var(--text-soft); }

/* ---------- po hodinách ---------- */

/* 🚨 ROLOVÁNÍ MUSÍ BÝT VIDĚT. Pruh rolovat uměl (48 dlaždic, 3514 px obsahu
   v okně širokém 466), jenže posuvník byl schovaný — takže to nebylo poznat
   a vypadalo to, že se předpověď „nevejde". Michal 27. 8. 2026.

   Řeší to dvě věci naráz: tenký, ale VIDITELNÝ posuvník a stín na tom kraji,
   kde ještě něco je (třídy přidává `hlidejRolovani()` v app.js). */
.hours {
  display: flex; gap: 6px;
  overflow-x: auto;                          /* vodorovné rolování, ne zalamování */
  scroll-snap-type: x proximity;
  margin: 0 -18px; padding: 0 18px 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.hours::-webkit-scrollbar { height: 6px; }
.hours::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.hours::-webkit-scrollbar-thumb:hover { background: var(--text-soft); }

/* Stín na kraji říká „tímhle směrem pokračuje". Zmizí, jakmile tam nic není —
   trvalý stín u konce seznamu by lhal. */
.hours-box { position: relative; }
.hours-box::before,
.hours-box::after {
  content: ''; position: absolute; top: 0; bottom: 8px; width: 28px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.hours-box::before { left: -18px; background: linear-gradient(90deg, var(--surface), transparent); }
.hours-box::after { right: -18px; background: linear-gradient(270deg, var(--surface), transparent); }
.hours-box[data-vlevo="1"]::before,
.hours-box[data-vpravo="1"]::after { opacity: 1; }

.hour {
  flex: none; width: 66px;
  padding: 10px 4px;
  text-align: center;
  background: var(--surface-2);
  border-radius: 12px;
  scroll-snap-align: start;
}
.hour .t { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.hour .i { display: block; margin: 4px 0; font-size: 22px; }
.hour .v { font-size: 15px; font-variant-numeric: tabular-nums; }
.hour .p { margin-top: 2px; font-size: 11px; color: var(--accent); min-height: 15px; }

/* ---------- po dnech ---------- */

.days { list-style: none; margin: 0; padding: 0; }
.days li {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.days li:first-child { border-top: 0; }
.days .d { font-size: 15px; }
.days .i { font-size: 22px; }
.days .p { font-size: 12px; color: var(--accent); min-width: 42px; text-align: right; }
.days .r { font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }
.days .lo { color: var(--text-soft); }

/* ---------- pyl ---------- */

.pollen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pollen li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pollen .lvl {
  padding: 3px 10px; font-size: 13px; font-weight: 600;
  border-radius: 999px; background: var(--surface-2);
}
/* Semafor: zelená v pohodě · oranžová vyšší riziko · červená vysoké.
   Odstíny jsou schválně z téže rodiny jako štítky u výstrah — kdyby si
   každá karta barvila po svém, appka by mluvila dvěma jazyky.

   ⚠️ Barva NIKDY nestojí sama: vedle ní je vždycky slovo („Nízká", „Střední").
   Barvoslepý uživatel ani telefon na přímém slunci se z odstínu nedozví nic. */
.pollen .lvl[data-level="low"] { background: #e3f2e5; color: #2c5730; }
.pollen .lvl[data-level="moderate"] { background: #fdeacd; color: #8a5310; }
.pollen .lvl[data-level="high"] { background: #fbdcd3; color: #8c3a18; }
.pollen .lvl[data-level="veryHigh"] { background: #f7cdcd; color: #7f1710; }

/* Nula není „v pohodě", je to „nic". Šedá to říká líp než zelená: zelená
   by tvrdila, že se něco naměřilo a je toho málo. */
.pollen .lvl[data-level="none"] { background: var(--surface-2); color: var(--text-soft); font-weight: 400; }
.pollen li:has(.lvl[data-level="none"]) { opacity: .65; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pollen .lvl[data-level="low"] { background: #16281a; color: #a9d6b0; }
  :root:not([data-theme="light"]) .pollen .lvl[data-level="moderate"] { background: #3a2f14; color: #f0d9a8; }
  :root:not([data-theme="light"]) .pollen .lvl[data-level="high"] { background: #40291a; color: #f5c4a4; }
  :root:not([data-theme="light"]) .pollen .lvl[data-level="veryHigh"] { background: #42201f; color: #f5b0b0; }
}

/* Vynucený tmavý režim z nastavení — tytéž hodnoty, jiná podmínka. */
:root[data-theme="dark"] .pollen .lvl[data-level="low"] { background: #16281a; color: #a9d6b0; }
:root[data-theme="dark"] .pollen .lvl[data-level="moderate"] { background: #3a2f14; color: #f0d9a8; }
:root[data-theme="dark"] .pollen .lvl[data-level="high"] { background: #40291a; color: #f5c4a4; }
:root[data-theme="dark"] .pollen .lvl[data-level="veryHigh"] { background: #42201f; color: #f5b0b0; }


/* ---------- úvodní obrazovka ---------- */

.splash {
  display: grid; place-content: center; justify-items: center; gap: 12px;
  min-height: 60dvh; color: var(--text-soft); text-align: center; padding: 24px;
}

/* 🚨 `display: flex` PŘEBIJE `[hidden]`.
   Prohlížeč skrývá `hidden` pravidlem `display: none`, jenže naše vlastní
   pravidlo se stejnou vahou ho přepíše — a prvek zůstane vidět, i když ho
   kód schoval. Chytlo se to 28. 8. 2026 na sbaleném formuláři trasy: pruh
   svítil prázdný nad rozbaleným formulářem. Proto se u KAŽDÉHO flexového
   prvku, který se schovává atributem, musí `hidden` doplnit ručně. */
[hidden] { display: none !important; }

.splash[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .card { animation: rise .28s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
}

/* ---------- mapa s radarem ---------- */

.map-card { padding-bottom: 12px; }

.map {
  position: relative;               /* kotva pro sdělení, když mapa nejde */
  height: 320px;
  border-radius: 12px;
  overflow: hidden;                 /* jinak rohy dlaždic přečuhují přes zaoblení */
  background: var(--surface-2);
}

.radar-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.radar-bar .icon-btn { width: 40px; height: 40px; font-size: 15px; }

.radar-time {
  font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums;   /* ať čísla při animaci neposkakují */
}

.radar-kind {
  padding: 3px 9px; font-size: 12px; font-weight: 600;
  border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft);
}
/* Dopočet musí být poznat — odhad se nesmí tvářit jako naměřený stav. */
.radar-kind[data-forecast="true"] { background: var(--accent-soft); color: var(--accent); }

/* Odstup od teď — „před 40 min". Absolutní čas sám o sobě nutí člověka
   odečítat v hlavě, a to zrovna ve chvíli, kdy sleduje pohyb srážek. */
.radar-offset { font-size: 13px; color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* ── Posuvník času radaru ───────────────────────────────────────────────
   Dráha nese informaci: kde končí měření a začíná dopočet, mění barvu.
   Podíl počítá JS (`forecastSplit`) a sem přijde jako proměnná — CSS
   o snímcích nic neví a vědět nemá.

   ⚠️ Když se nedopočítává, je proměnná 100 % a dráha zůstane jednobarevná.
   Nikdy se nesmí stát, že by odhad vypadal jako měření. */
.radar-scrub {
  --split: 100%;
  width: 100%; margin: 8px 0 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  /* Palec je 22 px, takže se do dráhy trefí i prst na telefonu. */
  height: 26px;
  cursor: pointer;
}
.radar-scrub::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--accent) 0 var(--split), var(--accent-soft) var(--split) 100%);
}
.radar-scrub::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--accent) 0 var(--split), var(--accent-soft) var(--split) 100%);
}
.radar-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  border-radius: 50%; border: 3px solid var(--surface);
  background: var(--accent);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
}
.radar-scrub::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%; border: 3px solid var(--surface);
  background: var(--accent);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
}
.radar-scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.radar-scrub:disabled { opacity: 0.5; cursor: default; }

/* MapLibre si nese vlastní barvy; srovnat je s motivem appky. */
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-group { border-radius: 10px !important; overflow: hidden; }

/* ── Výstrahy ──────────────────────────────────────────────────────────
   Barva nese závažnost, ale NIKDY sama: vedle ní vždycky stojí i slovo
   („Vysoká", „Střední"). Barvoslepý uživatel ani telefon na slunci by se
   z odstínu nic nedozvěděl. */
.warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.warn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: baseline;
  padding: 10px 12px;
  border: 1px solid var(--warn-line);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--warn-bg);
  color: var(--warn-text);
}

.warn-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn-line) 30%, transparent);
}

.warn-title { font-size: 15px; }

.warn-where {
  grid-column: 2;
  font-size: 13px;
  opacity: .85;
}

/* Rozsah se čte z lidského textu, takže nemusí vyjít. Když nevyšel, musí to
   být vidět — jinak se odhad tváří jako zjištění. */
.warn-uncertain { font-style: italic; }

.warn-extreme { --warn-line: #b3261e; --warn-bg: #fdecea; --warn-text: #7f1710; }
.warn-severe  { --warn-line: #d2691e; --warn-bg: #fdf0e6; --warn-text: #7a3d0b; }
.warn-unknown { --warn-line: #6b7a8c; --warn-bg: #eef2f6; --warn-text: #37424f; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .warn-extreme { --warn-line: #a3352c; --warn-bg: #351916; --warn-text: #f6c8c2; }
  :root:not([data-theme="light"]) .warn-severe  { --warn-line: #96591f; --warn-bg: #32210f; --warn-text: #f3d4ac; }
  :root:not([data-theme="light"]) .warn-unknown { --warn-line: #4a5867; --warn-bg: #1c242e; --warn-text: #ccd6e0; }
}

/* Vynucený tmavý režim z nastavení — tytéž hodnoty, jiná podmínka. */
:root[data-theme="dark"] .warn-extreme { --warn-line: #a3352c; --warn-bg: #351916; --warn-text: #f6c8c2; }
:root[data-theme="dark"] .warn-severe  { --warn-line: #96591f; --warn-bg: #32210f; --warn-text: #f3d4ac; }
:root[data-theme="dark"] .warn-unknown { --warn-line: #4a5867; --warn-bg: #1c242e; --warn-text: #ccd6e0; }


/* Nízká závažnost se ztlumí — vedle střední byla k nerozeznání a čtyři stejně
   výrazné řádky se čtou stejně špatně jako žádný. */
.warn-minor { --warn-line: #b0b8c2; --warn-bg: #f6f8fa; --warn-text: #4a5561; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .warn-minor { --warn-line: #3c4653; --warn-bg: #1a212a; --warn-text: #b6c1cd; }
}

/* Vynucený tmavý režim z nastavení — tytéž hodnoty, jiná podmínka. */
:root[data-theme="dark"] .warn-minor { --warn-line: #3c4653; --warn-bg: #1a212a; --warn-text: #b6c1cd; }


/* ── Správa uložených míst ─────────────────────────────────────────────── */
/* 🚨 KAŽDÁ SKUPINA SEDÍ POD SVOU ZÁLOŽKOU. Michal 26. 8. 2026: „Moje trasy
   pod záložkou trasy zarovnaně a Moje místa pod záložkou místa." Dvě stejně
   široké dráhy s týmž odstupem jako záložky nad nimi — jinak by nadpis
   ukazoval jinam, než kam patří.

   ⚠️ Dráhy se PŘIŘAZUJÍ napevno (`grid-column`), ne pořadím. Kdyby jedna
   skupina byla prázdná a schovaná, druhá by se jinak přesunula pod cizí
   záložku. */
.saved { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
.saved .chips { flex: 1; min-width: 0; }

.saved[data-primary="route"] #group-routes,
.saved[data-primary="station"] #group-places { grid-column: 1; }
.saved[data-primary="route"] #group-places,
.saved[data-primary="station"] #group-routes { grid-column: 2; }

.icon-btn.manage {
  flex: none;
  font-size: 18px;
  line-height: 1;
  color: var(--text-soft);
}

/* Nativní <dialog>: zavření Escapem, vrácení ohniska a zamčené pozadí
   zadarmo. Na telefonu vypadá jako spodní list, na širokém displeji jako
   okno uprostřed. */
.sheet {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 16px;
  width: min(520px, calc(100vw - 24px));
  box-shadow: var(--shadow);
}
.sheet::backdrop { background: rgba(8, 14, 22, .55); }

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.sheet-head h2 { margin: 0; font-size: 17px; }

.manage-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }

.manage-row { display: flex; align-items: center; gap: 8px; }

.manage-name {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.manage-name:disabled { opacity: .6; }

.manage-remove {
  flex: none;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

/* Druhé klepnutí maže. Musí to být vidět na první pohled — tlačítko, které
   po prvním klepnutí vypadá stejně, svádí ke klepnutí naslepo. */
.manage-remove.armed {
  border-color: #b3261e;
  color: #b3261e;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .manage-remove.armed { border-color: #e0736a; color: #e0736a; }
}

/* Vynucený tmavý režim z nastavení — tytéž hodnoty, jiná podmínka. */
:root[data-theme="dark"] .manage-remove.armed { border-color: #e0736a; color: #e0736a; }


/* Nápověda pod mapou. Tlumená — je to pobídka, ne sdělení. */
.map-hint { margin: 8px 0 0; font-size: 12px; }

/* Lístek alergenu vedle jména. Barvu dědí po řádku, takže drží semafor. */
.pollen-name { display: inline-flex; align-items: center; gap: 8px; }
.pollen-icon { width: 22px; height: 22px; flex: none; }

.pollen li[data-level="low"] .pollen-icon { color: #2c5730; }
.pollen li[data-level="moderate"] .pollen-icon { color: #b57614; }
.pollen li[data-level="high"] .pollen-icon { color: #b3491e; }
.pollen li[data-level="veryHigh"] .pollen-icon { color: #b3261e; }
.pollen li[data-level="none"] .pollen-icon { color: var(--text-soft); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pollen li[data-level="low"] .pollen-icon { color: #8fc79a; }
  :root:not([data-theme="light"]) .pollen li[data-level="moderate"] .pollen-icon { color: #e0b464; }
  :root:not([data-theme="light"]) .pollen li[data-level="high"] .pollen-icon { color: #e59468; }
  :root:not([data-theme="light"]) .pollen li[data-level="veryHigh"] .pollen-icon { color: #e0736a; }
}

/* Vynucený tmavý režim z nastavení — tytéž hodnoty, jiná podmínka. */
:root[data-theme="dark"] .pollen li[data-level="low"] .pollen-icon { color: #8fc79a; }
:root[data-theme="dark"] .pollen li[data-level="moderate"] .pollen-icon { color: #e0b464; }
:root[data-theme="dark"] .pollen li[data-level="high"] .pollen-icon { color: #e59468; }
:root[data-theme="dark"] .pollen li[data-level="veryHigh"] .pollen-icon { color: #e0736a; }




/* ── Přepínač obrazovek ────────────────────────────────────────────────── */
.tabs { display: flex; gap: 6px; margin-top: 10px; }

/* Pořadí záložek je volba uživatele (nastavení). Vlevo patří to hlavní —
   u téhle appky trasa, protože meteostanice pro jedno místo umí kdekdo
   a odlišovač je počasí po cestě (`R8`). Kdo to má naopak, přehodí si to. */
.tabs[data-primary="station"] #tab-station { order: 1; }
.tabs[data-primary="station"] #tab-route { order: 2; }
.tabs[data-primary="route"] #tab-route { order: 1; }
.tabs[data-primary="route"] #tab-station { order: 2; }

.tab {
  flex: 1;
  min-height: 40px;
  padding: 8px 12px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
/* Vybraná záložka se pozná i bez barvy — plnou výplní a tučností.
   Samotný odstín by na slunci ani barvoslepému nic neřekl. */
.tab[aria-selected="true"] {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* ── Obrazovka trasy ───────────────────────────────────────────────────── */
.route-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.route-field { display: block; position: relative; }
.route-field > span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-soft); }
.route-field input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  font: inherit; font-size: 15px;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
}
/* Prohazovací tlačítko sedí mezi oběma poli a přes obě řádky mřížky. */
.route-form > .icon-btn { grid-row: span 2; align-self: center; height: 44px; }
.route-field:nth-of-type(2) { grid-column: 1; }

/* Výsledky hledání uvnitř karty, ne přes celou stránku. */
.results.inline { position: absolute; z-index: 5; left: 0; right: 0; margin-top: 4px; }

.route-controls { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }

/* 🚨 ZPŮSOBY SE ZALAMUJÍ, NESMRSKÁVAJÍ. Čtyři volby potřebují 313 px, ale
   vedle tlačítka „Ukázat počasí" jich na telefonu zbývá ~200 — a protože
   `flex: 1` (tedy `1 1 0%`) položku zmenší místo zalomení, vylezla poslední
   („Vzdušnou čarou") POD sousední tlačítko. Nebylo ji vidět ani trefit.

   ⚠️ Layoutový test to nechytil a chytit nemohl: nic nepřeteklo z okna,
   volba se jen schovala za souseda uvnitř karty. Našlo se to až na snímku. */
.modes { display: flex; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }

.mode {
  flex: 1 1 auto;
  padding: 8px 10px;
  font: inherit; font-size: 13px;
  color: var(--text-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
}
.mode[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.primary {
  flex: none;
  min-height: 44px; padding: 0 18px;
  font: inherit; font-size: 15px; font-weight: 600;
  color: #fff; background: var(--accent);
  border: 0; border-radius: 10px; cursor: pointer;
}

.route-summary { margin: 0; font-size: 17px; font-weight: 600; }
.route-extra { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--text-soft); }

/* Rada o posunu odjezdu. Ukazuje se jen když má cenu, takže si smí říct
   o pozornost — kdyby svítila pořád, přestala by být zpráva. */
.route-advice {
  margin: 12px 0 0; padding: 10px 12px;
  font-size: 14px;
  color: var(--warn-text); background: var(--warn-bg);
  border: 1px solid var(--warn-line); border-radius: 10px;
}

.route-points { list-style: none; margin: 0; padding: 0; }

.route-point {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.route-point:first-child { border-top: 0; }

.rp-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.rp-icon { font-size: 22px; }
.rp-text { display: flex; flex-direction: column; min-width: 0; }
.rp-cond { font-size: 14px; }
.rp-km { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.rp-temp { font-size: 15px; font-variant-numeric: tabular-nums; }

/* Nebezpečný úsek se pozná i bez barvy — pruhem u kraje a tučným časem. */
.route-point[data-hazard="1"] {
  margin: 0 -8px; padding: 10px 8px;
  border-left: 3px solid var(--warn-line);
  background: var(--warn-bg);
  border-radius: 8px;
}

/* Pole s rychlostí. Ukazuje se jen u vzdušné čáry — u silnice ji zná router. */
.route-speed { display: block; margin-top: 12px; }
.route-speed > span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-soft); }
.route-speed input {
  width: 120px; padding: 8px 10px;
  font: inherit; font-size: 15px;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
}
.route-speed .hint { display: block; margin: 4px 0 0; }

/* Nabídka v polích trasy. Tlačítko na celou šířku, jméno nad obcí —
   ⚠️ tatáž ulice je v desítce měst, takže OBEC je to jediné, co je rozliší.
   Bez zalomení se obojí slepilo do „náměstí RepublikyHoršovský Týn". */
.results.inline li { padding: 0; }

.results.inline button {
  display: block; width: 100%;
  padding: 10px 14px;
  font: inherit; text-align: left;
  color: var(--text); background: none; border: 0; cursor: pointer;
}
.results.inline button:hover,
.results.inline button:focus-visible { background: var(--accent-soft); }

.r-name { display: block; font-size: 15px; }
.r-meta { display: block; margin-top: 2px; font-size: 13px; color: var(--text-soft); }

/* ── Nastavení: jazyk a jednotky ─────────────────────────────────────────
   Ozubené kolo je vpravo v řádku se značkou — appka, která mluví cizí řečí,
   je k nepotřebě hned, ne až se člověk někam proklikne. */
.icon-btn.settings {
  margin-left: auto;
  font-size: 17px;
  color: var(--text-soft);
}

.setting {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

/* Popisek si vezme, co zbyde; nabídka drží svou šířku. Na úzkém displeji se
   tak dlouhý překlad zalomí, místo aby vytlačil nabídku z obrazovky. */
.setting label { flex: 1; min-width: 0; }

.setting select {
  flex: none; max-width: 60%;
  padding: 8px 10px;
  font: inherit; color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.sheet h3 { margin: 18px 0 6px; font-size: 15px; }

/* Sdělení v nabídce hledání („nic jsme nenašli", „neřadí se podle polohy").
   Není to místo, tak se ani nesmí tvářit jako klikací řádek. */
.results .empty { padding: 10px 14px; font-size: 13px; color: var(--text-soft); cursor: default; }
.results .empty:hover { background: none; }

/* Jméno uložené trasy se needituje — appka si ho drží sama („Praha → Brno"). */
.manage-name-static { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Srovnání časů odjezdu. Vodorovné rolování schválně: variant může přibýt
   a zabalit je do dvou řad by rozbilo čtení „zleva doprava = později". */
.departures {
  display: flex; gap: 6px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.departures::-webkit-scrollbar { display: none; }

.departure {
  flex: none;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px;
  font: inherit; text-align: left;
  color: var(--text-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer;
}
.departure[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* Nejlepší varianta je poznat i nevybraná — rada nad přepínačem na ni ukazuje. */
.departure[data-best="1"] { box-shadow: inset 0 -2px 0 var(--accent); }
.dep-time { font-size: 14px; font-weight: 600; color: var(--text); }
.dep-badge { font-size: 12px; white-space: nowrap; }
.departure[data-hazard="1"] .dep-badge { color: var(--warn, #b3261e); }

/* Sdělení místo mapy. Prázdný černý obdélník je nejhorší možná odpověď —
   kdo se dívá do plochy mapy, hledá vysvětlení v ní, ne o dva řádky níž. */
.map-zprava {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 24px;
  font-size: 14px; text-align: center; color: var(--text-soft);
  background: var(--surface);
}

/* Zpráva o dílčí chybě sedí DOLE a mapu nepřekrývá — pod ní je co vidět.
   `pre-line` proto, že druhý řádek nese technický důvod (adresu, stav). */
.map-zprava--pruh {
  inset: auto 0 0 0;
  padding: 8px 12px;
  font-size: 12px; line-height: 1.35;
  white-space: pre-line; word-break: break-word;
  color: var(--text); background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-top: 1px solid var(--border);
}

/* Mezibody trasy. Vznikají až na vyžádání — většina cest je z A do B. */
.route-via { display: flex; flex-direction: column; gap: 8px; }
.route-via:not(:empty) { margin-bottom: 10px; }
.route-via-row { display: flex; align-items: end; gap: 8px; }
.route-via-row .route-field { flex: 1; min-width: 0; }

/* Odkaz, ne tlačítko: přidat mezibod je nabídka, ne hlavní akce. */
.link-btn {
  margin-bottom: 12px; padding: 0;
  font: inherit; font-size: 14px;
  color: var(--accent); background: none; border: 0; cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

/* Rozpis úseků trasy. Jen u cesty se zastávkami — u A→B by opakoval souhrn. */
.legs { list-style: none; margin: 10px 0 0; padding: 0; }
.leg {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  border-top: 1px solid var(--line);
}
.leg-kam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-km, .leg-cas { font-variant-numeric: tabular-nums; color: var(--text-soft); }
/* Součet drží pohromadě s rozpisem, ale je poznat na první pohled. */
.leg-soucet { font-weight: 600; }
.leg-soucet .leg-km, .leg-soucet .leg-cas { color: var(--text); }

/* Trasa mezi uloženými místy musí být na první pohled poznat — jinak řádek
   vypadá jako seznam míst, ve kterém se jedno chová divně. */
.chip-route { display: inline-flex; align-items: center; gap: 6px; }
.chip-znak { color: var(--accent); font-size: 15px; line-height: 1; }

/* Věta o cíli. Nejdůležitější řádek obrazovky trasy: kilometry si člověk
   umí představit, počasí v cíli je to, kvůli čemu sem přišel. */
.route-arrival {
  margin: 10px 0 0;
  font-size: 15px; line-height: 1.45;
}

/* Druhý řádek u bodu trasy: vítr, nárazy, pocitovka. Menší a tlumené —
   je to doplněk k tomu, co je na řádku vidět hned. */
.rp-detail { display: block; margin-top: 2px; font-size: 12px; color: var(--text-soft); }
/* Bod s nárazy větru je pro pilota to hlavní, co na trase hledá. */
.route-point[data-gusts="1"] .rp-detail { color: var(--warn-text); }

/* Hláška k trase. Kurzívou a tlumeně: je to dovětek pod údaji, ne údaj.
   U nebezpečného počasí se neukáže vůbec (viz lib/quips.js). */
.route-quip {
  margin: 8px 0 0;
  font-size: 13px; font-style: italic; line-height: 1.45;
  color: var(--text-soft);
}


/* ── Uložené věci ve dvou pojmenovaných skupinách ────────────────────────
   Vlevo nadpis, který se dá rozklepnout na celý seznam; vedle tolik
   posledních, kolik se doopravdy vejde (změřeno, viz lib/fit-row.js). */
.saved-group {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  min-width: 0;                    /* v dráze mřížky se musí umět zúžit */
  margin-top: 8px;
}

/* 🚨 Nadpis skupiny se vedle štítků ZTRÁCEL. Michal 26. 8. 2026: „jak nemaj
   žádné pozadí". Dostal proto vlastní plochu — ale jinou než štítky: plnou
   výplň bez rámečku, aby bylo poznat, že je to popiska a ovládání, ne další
   uložená věc. */
.saved-toggle {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px;
  font: inherit; font-size: 13px; font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 0; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
}
.saved-toggle:hover { filter: brightness(1.08); }
/* Rozbalený nadpis je „zapnutý": plná barva, ať je vidět, odkud panel visí. */
.saved-toggle[aria-expanded="true"] { color: #fff; background: var(--accent); }
.saved-toggle .sipka { font-size: 10px; }
.saved-toggle[aria-expanded="true"] .sipka { transform: rotate(180deg); }

/* Řádek posledních. Co se nevejde, appka schová — nerolujeme, od toho je
   rozbalení. */
.chips-fit { flex: 1; min-width: 0; overflow: hidden; flex-wrap: nowrap; }

/* ⚠️ Ten jeden štítek, který se ukazuje vždycky (viz `fitCount`), se musí
   umět zúžit — jinak na displeji širokém 320 px vystrčí dlouhé jméno celou
   hlavičku z okna. Zkrátí se tedy třemi tečkami.

   🚨 Zúžit se musí I POLOŽKA SEZNAMU, ne jen tlačítko v ní: `li` je taky
   položka ohebného rozvržení a má `min-width: auto`, takže se pod obsah
   nesmrskne. Když se ošetří jen tlačítko, přetéká dál — o tři pixely, které
   se hledají mizerně. */
/* 🚨 Štítky se NEZUŽUJÍ, jen se schovávají. Když se smrsknou, zbude z nich
   „↝…" a řádek přestane k čemukoli sloužit — o kolik se jich vejde,
   rozhoduje `fitCount`, ne stlačení. Strop na šířku je tu jen pro ten
   jediný štítek, který se ukazuje vždycky: dlouhé jméno se zkrátí tečkami
   místo aby vystrčilo hlavičku z okna. */
.chips-fit > li { flex: 0 0 auto; min-width: 0; max-width: 100%; }
.chips-fit .chip { max-width: 100%; }

/* Rozbalený seznam. Nad obsahem, ne v toku — jinak by při každém otevření
   poskočila celá stránka. */
/* 🚨 `display` v pravidle PŘEBÍJÍ atribut `hidden`. Bez téhle výjimky
   zůstane panel ve stránce pořád, roztáhne hlavičku a layoutová kontrola
   hlásí přetečení u úplně jiného prvku (u hodinového pruhu). Stálo to
   čtvrthodinu hledání 26. 8. 2026. */
.saved-panel[hidden] { display: none; }

.saved-panel {
  position: absolute; top: 100%; left: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: min(520px, calc(100vw - 32px));
  max-height: 40vh; overflow-y: auto;
  margin: 4px 0 0; padding: 10px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

/* Poslední řádek rozbaleného seznamu: správa. Vypadá jinak než uložené věci
   nad ním — jinak by na něj člověk klepl omylem místo na místo. */
.chip-sprava {
  color: var(--text-soft);
  background: none;
  border-style: dashed;
}
.chip-sprava:hover { color: var(--text); background: var(--surface-2); }

/* 🚨 Předěl dne v hodinovém pruhu. Osmačtyřicet dlaždic s časy 0–23 a znovu
   0–23 je bez něj bludiště: „v 8:00" se dá číst jako dnes i zítra. */
.hour-newday {
  position: relative;
  margin-left: 14px;
  border-left: 1px solid var(--line);
  padding-left: 14px;
}
.hour-newday::before {
  content: attr(data-day);
  position: absolute; top: -2px; left: 14px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
/* ⚠️ Místo pro jméno dne se dělá NAD CELÝM PRUHEM, ne uvnitř jedné dlaždice.
   Když se odsazovala jen ta jedna, byla vyšší než ostatní a řada vypadala
   rozhozeně. */
.hours { padding-top: 14px; }
.hour-newday::before { top: -14px; }

/* ── Sbalený formulář trasy ─────────────────────────────────────────────
   Když je trasa spočítaná, formulář se srolí do jednoho řádku a plochu
   dostane mapa (Michal 28. 8. 2026). Řádek je tlačítko a nese, co je
   zadané — sbalené nastavení, ze kterého není nic poznat, by se nedalo
   odlišit od nastavení ztraceného. */
.route-collapsed {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin: 0; padding: 12px 14px;
  font: inherit; text-align: left; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer;
}
.route-collapsed:hover { border-color: var(--accent); }
.route-collapsed:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#route-collapsed-text { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.route-collapsed-akce { flex: none; font-size: 13px; color: var(--accent); }