/* Odjezdovka — vzhled přístrojové desky: tmavé pozadí, o stupeň světlejší karty,
   modrý akcent.
   Písmo je systémové — nic se nestahuje. Na Windows vyjde Segoe UI, na
   Applu SF, na Androidu Roboto; kresba se liší, ale stránka se vykreslí
   okamžitě a ušetří to půl megabajtu, což bylo víc než celý jízdní řád.

   Barvy jdou přes proměnné, aby světlý vzhled byl jen jejich přepsání. Výchozí
   je tmavý, a to i na zařízení se světlým systémem: holý :root je tmavá paleta,
   takže se nic neblikne, než naběhne JavaScript — a stránky zastávek a linek,
   které žádný skript na vzhled nemají, vyjdou stejně jako appka. Systémové
   nastavení se nesleduje vůbec; volba „podle systému" tu byla a zrušila se,
   viz tema.ts. */

:root {
  --pozadi: #070a0e;
  --karta: #10151c;
  --karta2: #151b23;            /* jemné odlišení uvnitř karty */
  --ram: #242c38;
  --ram2: #1b222b;              /* slabší předěl mezi řádky */
  --text: #e8ecf1;
  --text2: #9aa5b4;             /* popisky, vysvětlivky */
  --text3: #6b7684;             /* nejtišší */
  --akcent: #60a5fa;
  --akcent-tlum: #16243b;       /* podklad pod akcentem */
  --dobra: #4ade80;
  --spatna: #f87171;
  --pozde: #fb923c;             /* zpoždění; oranžová, ne červená — viz .dep .zpoz */
  /* Výzva „jdi teď". Táž oranžová jako u zpoždění, ale vlastní proměnná: jsou to
     dvě různá sdělení a jednou z nich se může chtít pohnout, aniž by se hnulo
     druhé. Modrá tu byla dřív a nešla použít — je to barva všeho klikacího
     v appce, takže rozsvícený pruh vypadal jako další tlačítko místo jako
     pobídka vstát. */
  --vyzva: #fb923c;
  --vyzva-tlum: #35210f;        /* podklad pod výzvou */
  --stin: none;
  /* Text na plné barvě — na akcentu i na červené značce „jdi teď". Bílá zůstává
     bílá v obou vzhledech: podklad je pod ní vždycky sytý, takže se s paletou
     otáčet nesmí. Vlastní jméno má proto, aby se při změně akcentu nemuselo
     hledat osm zapsaných #fff. */
  --na-barve: #fff;
  /* Poloměry podle role, ne podle čísla. Karta je největší, pilulka nejkulatější,
     mezi tím tlačítko a drobná ikonová plocha.
     POZOR: ikona 6 a ovladač 7 se liší o pixel — je to nános, ne záměr. Sloučit
     je do jednoho by byla oprava, ale mění to vzhled, tak to tu zatím stojí
     rozepsané. */
  --radius: 10px;               /* karty */
  --radius-tlacitko: 8px;
  --radius-ovladac: 7px;
  --radius-ikona: 6px;
  --radius-pilulka: 999px;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Světlý vzhled — jediné, co appka umí kromě výchozího tmavého, a jen na
   výslovnou volbu. Dřív tu byla tmavá paleta dvakrát, protože se psala zvlášť
   pro ruční volbu a zvlášť pro „podle systému"; ta volba je zrušená, takže
   zůstává jedno pravidlo. */
:root[data-tema='svetlo'] {
  --pozadi: #f4f6f8;
  --karta: #ffffff;
  --karta2: #f8fafc;
  --ram: #e3e8ee;
  --ram2: #eef2f6;
  --text: #111827;
  --text2: #6b7280;
  --text3: #9ca3af;
  --akcent: #2563eb;
  --akcent-tlum: #eff6ff;
  /* Ztmaveno z #16a34a: na bílé kartě mělo 3,3:1, tedy pod hranicí čitelnosti
     drobného textu. Nechat v paletě barvu, kterou nejde použít, je past
     pro toho, kdo po ní sáhne příště. */
  --dobra: #15803d;
  --spatna: #dc2626;
  --pozde: #c2410c;
  --vyzva: #c2410c;
  --vyzva-tlum: #fff7ed;
  --stin: 0 1px 2px rgba(16, 24, 40, .05);
}
* { box-sizing: border-box; margin: 0; padding: 0 }
/* Základ je tmavý, ne `light dark` — tím se řídí i to, co si kreslí prohlížeč
   sám (posuvníky, políčka), a bez toho by na světlém systému zůstaly světlé. */
html { color-scheme: dark }

/* Místo pro svislý posuvník se drží, i když zrovna není potřeba.
   `body` obsah **centruje**, takže každé objevení a zmizení posuvníku měnilo
   šířku plochy o jeho tloušťku a celá stránka poskočila o polovinu toho, tedy
   o nějakých sedm pixelů, do strany. Nejvíc to bylo znát při psaní do hledání:
   seznam se s každým písmenem zkracuje, na jednom z nich se stránka vejde na
   obrazovku, posuvník zmizí — a text pod prstem uskočí.
   Na mobilu se nic nemění, tam posuvník plave nad obsahem a šířku nebere.
   Prohlížeč, který tuhle vlastnost nezná, se chová jako dosud; horší to nebude. */
html { scrollbar-gutter: stable }
html[data-tema='svetlo'] { color-scheme: light }

body {
  background: var(--pozadi);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 20px 16px 32px;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.shell { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px }

.card {
  background: var(--karta);
  border: 1px solid var(--ram);
  border-radius: var(--radius);
  box-shadow: var(--stin);
}

/* malý velkými písmeny nad hodnotou — nosný prvek téhle grafiky */
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text2);
}

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none }
button:focus-visible, input:focus-visible {
  outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: var(--radius-ikona);
}

/* ─────────── hlavička ─────────── */

/* Titulek stojí ve skutečném středu hlavičky: krajní sloupce 1fr se vyrovnají,
   takže ho přepínač vzhledu vpravo nevychyluje. Platí to o rozcestníku; appka
   a stránky zastávek (`.app`) mají název u levého kraje, viz níž. */
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 2px }
/* Modrá značka vlevo říkala totéž co nápis vedle ní a brala místo, které je na
   mobilu drahé. Cestu domů nese název; zbyly dva sloupce, název u levého kraje
   a ovládání u pravého. Rozcestník ji nemá odkud vzít — tam název nic
   nedoprovází a značka tam nikdy nebyla. */
.masthead.app { grid-template-columns: 1fr auto }
.masthead.app h1 { grid-column: 1; text-align: left }
.masthead.app .vpravo { grid-column: 2 }
.masthead h1 { grid-column: 2; font-size: 26px; font-weight: 700; letter-spacing: -.02em; text-align: center }
/* Odkaz domů nese samotný název — na mobilu je to jediná cesta na rozcestník.
   Vypadá jako nadpis, ne jako odkaz: podtržená „Odjezdovka" v hlavičce by
   vypadala jako chyba stylu, ne jako pozvánka. */
/* Odkaz, který se nechová jako odkaz: nemění barvu ani se nepodtrhává. Je to
   nadpis stránky, který navíc vede domů — modrá „Odjezdovka" pod kurzorem
   vypadala jako chyba stylu, ne jako pozvánka. */
.masthead h1 .domu { color: inherit; text-decoration: none }
/* Město dopisuje mesta.mjs při skládání — appka sama neví, čí data veze.
   Na vlastním řádku, aby se „Liberec – Jablonec" nervalo s názvem do šířky. */
.masthead h1 .mesto, .masthead h1 .obrazovka {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text2); margin-top: 1px;
}
.masthead .vpravo { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px }

/* Ovladače v hlavičce: vzhled, Moje cesta, Nastavení. Třídou, ne třemi id —
   id nesou specificitu (1,0,0) u věci, která je čistě vizuální, a čtvrtý
   ovladač by znamenal dopsat se na čtyři místa. Rozcestník má z téhle trojice
   jen dva, ale tvar je týž. */
.ikonaBtn {
  width: 34px; height: 34px; border-radius: var(--radius-tlacitko); border: 1px solid var(--ram);
  background: var(--karta); font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.ikonaBtn:hover, .ikonaBtn[aria-expanded='true'] { border-color: var(--akcent); color: var(--akcent) }
/* Vlastní display: flex výš by přebil prohlížečové [hidden]{display:none}. */
.ikonaBtn[hidden] { display: none }
/* Bez rozměru je `<svg>` v tlačítku 300 × 150 a rozhodí celou hlavičku. */
.ikonaBtn svg { width: 17px; height: 17px; display: block }

/* ─────────── načtení balíčku ─────────── */

/* Než se zjistí, jestli je ke stránce přibalený jízdní řád, návod k jeho
   načtení se neukazuje — jinak by na Pages problikl při každém otevření. */
body.zjistuji #loader { display: none }

/* Ukazatel načítání. Dokud je délka souboru známá, jede výplň podle stažených
   bajtů; na rozbalování a zpracování se přepne do neurčitého režimu, protože
   kolik práce zbývá, se předem zjistit nedá. */
.nacitam { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px }
.nacitam[hidden] { display: none }
.nacitam .pruh {
  height: 6px; border-radius: 3px; background: var(--karta2);
  border: 1px solid var(--ram); overflow: hidden;
}
.nacitam .vypln { height: 100%; width: 0; background: var(--akcent); transition: width .15s linear }
.nacitam.neurcity .vypln { width: 40%; animation: putuje 1.1s ease-in-out infinite }
@keyframes putuje {
  0% { margin-left: -40% }
  100% { margin-left: 100% }
}
.nacitam .popis { font-size: 13px; color: var(--text2); font-variant-numeric: tabular-nums }
/* Kdo si vypnul pohyb, nemá důvod dostat zrovna tady putující pruh. Ukazatel
   zůstane, jen stojí — údaj v `.popis` nese tutéž informaci slovy. */
@media (prefers-reduced-motion: reduce) {
  .nacitam .vypln { transition: none }
  .nacitam.neurcity .vypln { animation: none; width: 100%; opacity: .4 }
}

.load { padding: 24px }
.load h2 { font-size: 18px; font-weight: 600; margin-bottom: 6px; letter-spacing: -.01em }
.load p { font-size: 14px; color: var(--text2); margin-bottom: 16px; max-width: 52ch }
.load code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px;
  background: var(--karta2); border: 1px solid var(--ram2); border-radius: 5px; padding: 1px 5px;
}

/* Tvar je jeden, prvek dvojí: v appce je `.pick` tlačítko, na generovaných
   stránkách odkaz („Vybrat město", „Zobrazit živé odjezdy"). Bez zrušeného
   podtržení tam svítil podtržený bílý text na modré — tlačítko, které vypadá
   jako odkaz uvnitř tlačítka. */
.pick {
  display: inline-block; background: var(--akcent); color: var(--na-barve);
  font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: var(--radius-tlacitko);
  text-decoration: none;
}
.pick:hover { filter: brightness(1.08) }

#status {
  font-size: 13px; color: var(--text2); margin-top: 14px;
  min-height: 1.4em; white-space: pre-line;
}
.err { color: var(--spatna) !important }
#filterRow { margin-top: 16px; display: none; gap: 8px; align-items: center; flex-wrap: wrap }

/* Hledací pole jsou type=search kvůli vypnutému našeptávači a křížku pro
   smazání; Safari k nim ale přidává vlastní ozdoby, které se sem nehodí. */
input[type=text], input[type=search] {
  font: inherit; font-size: 14.5px; padding: 10px 12px; background: var(--karta);
  border: 1px solid var(--ram); border-radius: var(--radius-tlacitko); color: var(--text); width: 100%;
  -webkit-appearance: none; appearance: none;
}
input[type=text]::placeholder, input[type=search]::placeholder { color: var(--text3) }
input[type=search]::-webkit-search-decoration { -webkit-appearance: none }

/* ─────────── karty zastávek ─────────── */

/* Pruh pod hlavičkou: zastávky, kam jezdíš, i s odpočtem. Tři se vejdou na
   širší displej, na úzkém se třetí schová — sto pixelů na kartu je minimum,
   pod kterým se odpočet přestane číst. Řeší to CSS, ne měření v JS. */
.karty { display: flex; gap: 8px; margin-bottom: 12px }
.karty[hidden] { display: none }
.karta {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 8px; background: var(--karta); border: 1px solid var(--ram);
  border-radius: var(--radius); box-shadow: var(--stin); color: var(--text2);
}
.karta .znak { flex: none; width: 20px; height: 20px }
.karta .za { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text) }
.karta:hover { border-color: var(--akcent); color: var(--akcent) }
/* Táž řeč jako na tabuli: „jdi teď" červeně, co nestihneš, zešedne */
.karta.soon .za { color: var(--spatna) }
.karta.nestihnes { opacity: .5 }
@media (max-width: 380px) {
  .karta:nth-child(3) { display: none }
}

/* Výběr ikony na tabuli */
.mista { padding: 12px 0 2px }
.mista .rada { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px }
.misto {
  flex: none; padding: 8px; border-radius: var(--radius-tlacitko); color: var(--text3);
  border: 1px solid var(--ram); background: var(--karta);
}
.misto .znak { display: block; width: 20px; height: 20px }
.misto:hover { color: var(--akcent); border-color: var(--akcent) }
.misto.on { color: var(--na-barve); background: var(--akcent); border-color: var(--akcent) }
/* Ikonové tlačítko v řádku nadpisu — záložka „uložit na kartu" a ozubené
   „uložené volby" nad tabulí. Dvě různá sdělení, ale jeden tvar: tichá ikona
   bez rámu, která se pod prstem podbarví. Psané bylo dvakrát slovo od slova,
   tak ať se to příště hne najednou. */
.ulozit, .bhead .volby {
  padding: 6px; border-radius: var(--radius-ikona); color: var(--text3); line-height: 1;
}
.ulozit .znak, .bhead .volby svg { display: block; width: 18px; height: 18px }
.ulozit:hover, .bhead .volby:hover { background: var(--karta2); color: var(--akcent) }
.ulozit.on, .bhead .volby.on, .bhead .volby[aria-expanded='true'] { color: var(--akcent) }

/* ─────────── výběr zastávky ─────────── */

#picker { display: none; flex-direction: column; gap: 12px }

/* Výběr obce na /autobusy/. Tvarem stejný jako seznam zastávek, protože je to
   totéž gesto — napiš, ťukni, jeď. */
.obce { padding: 20px 22px }
/* Pole s lupou.
   Ikona musí být uvnitř rámu, a do <input> se jiný prvek vložit nedá — rám
   proto drží obal a pole samo je bez pozadí i bez okraje. Podklad je `karta2`,
   tedy o stupeň jinam než karta kolem: pole má být poznat jako místo, kam se
   píše, ne jako další plocha. */
.hledaci {
  display: flex; align-items: center; gap: 9px;
  background: var(--karta2); border: 1px solid var(--ram);
  border-radius: 11px; padding: 11px 13px;
}
/* Rám svítí za celý obal, ne za pole uvnitř — jinak by se při psaní rozsvítil
   obdélník uvnitř obdélníku. Proto se u vnitřního pole obrys ruší. */
.hledaci:focus-within { border-color: var(--akcent) }
.hledaci svg { flex: none; width: 16px; height: 16px; color: var(--text3); display: block }
.hledaci input[type=search] {
  flex: 1; min-width: 0; width: auto; padding: 0;
  background: none; border: 0; border-radius: 0;
}
.hledaci input[type=search]:focus-visible { outline: none }
.obcelist {
  margin-top: 12px; max-height: 55vh; overflow-y: auto;
  border: 1px solid var(--ram); border-radius: var(--radius);
}
/* Než se něco napíše, seznam nic nenese — a prázdný rám pod polem by vypadal
   jako porucha. Stejné pravidlo drží `.stoplist`. */
.obcelist:empty { display: none }
.obcelist .obec, .obcelist .zastavka {
  display: block; width: 100%; text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--ram2); font-size: 15px;
}
.obcelist .obec:last-child, .obcelist .zastavka:last-child { border-bottom: none }
.obcelist .obec:hover, .obcelist .zastavka:hover { background: var(--karta2); color: var(--akcent) }
.obcelist .prazdno { padding: 12px 14px; font-size: 13px; color: var(--text2) }
/* odkaz do integrovaného systému pod položkou obce */
/* Odkaz do integrovaného systému pod položkou obce. Záporný margin, kterým se
   dřív přitahoval k názvu, ho podsouval pod tlačítko obce: horní půlka odkazu
   pak brala kliknutí to tlačítko, takže odkaz „nefungoval" a místo přechodu na
   městskou dopravu se stáhla obec. Drží se tedy vlastním odsazením. */
.obcelist .jinam {
  display: block; padding: 0 14px 10px 14px;
  font-size: 12.5px; color: var(--text2); text-decoration: none;
  border-bottom: 1px solid var(--ram2);
}
/* Tlačítko obce nad odkazem nesmí mít vlastní čáru — jinak by mezi názvem
   a odkazem, které patří k sobě, vedla linka. */
.obcelist .obec:has(+ .jinam) { border-bottom: none; padding-bottom: 4px }
.obcelist .jinam:hover { color: var(--akcent) }
#obecStav { font-size: 13px; color: var(--spatna); margin-top: 10px; white-space: pre-line }
#obecStav:empty { display: none }

/* Která obec je načtená; sedí nad hledáním zastávek jako drobná popiska. */
.obecpruh {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 2px;
}
.obecpruh[hidden] { display: none }
.obecpruh .kde { font-size: 15px; font-weight: 600 }
.obecpruh button {
  font-size: 13px; color: var(--text2); padding: 4px 8px; border-radius: var(--radius-ovladac);
  border: 1px solid var(--ram);
}
.obecpruh button:hover { color: var(--akcent); border-color: var(--akcent) }
/* Zastávka v nabídce obcí: druhý řádek nese obec, jejíž balíček se stáhne —
   právě to je ta informace, která tomu, kdo stojí u označníku, chybí. */
.obcelist .zastavka { display: flex; flex-direction: column; align-items: flex-start; gap: 1px }
.obcelist .zastavka .kdeje { font-size: 12px; color: var(--text3) }
.obcelist .zastavka:hover .kdeje { color: inherit }

.obecnastroje { display: flex; align-items: center; gap: 8px }
/* Domeček je ikona, ne text — proto bez rámečku a užší než „Změnit obec". */
.obecpruh .dom { border: none; padding: 4px; color: var(--text3); display: flex; align-items: center }
.obecpruh .dom svg { width: 18px; height: 18px; display: block }
.obecpruh .dom[aria-pressed="true"] { color: var(--akcent) }

.stoplist {
  max-height: 60vh; overflow-y: auto; background: var(--karta);
  border: 1px solid var(--ram); border-radius: var(--radius); box-shadow: var(--stin);
}
/* Prázdný seznam nemá co rámovat. Týká se stavu před prvním hledáním, kdy
   nejsou ani oblíbené: prázdná ohraničená karta vypadá jako porucha. */
.stoplist:empty { display: none }
.stoprow {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; padding: 12px 14px; border-bottom: 1px solid var(--ram2);
}
.stoprow:last-child { border-bottom: none }
.stoprow:hover { background: var(--karta2) }
.stoprow .nazev { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 2px }
.stoprow .jmeno { font-weight: 500 }
.stoprow .pesky { font-size: 12px; color: var(--text2) }
/* Zúžené na `.stoplist`, protože jméno je obsazené i jinde: rozcestník má vlastní
   `<li class="skupina">` a bez tohohle mu sem prosakoval podklad a spodní čára,
   které si tam musel rušit zpátky (`mesta.mjs`). */
.stoplist .skupina { padding: 10px 14px 6px; border-bottom: 1px solid var(--ram2); background: var(--karta2) }
.star { font-size: 16px; color: var(--text3); padding: 6px; line-height: 1; border-radius: var(--radius-ikona) }
.star:hover { background: var(--karta2) }
.star.on { color: var(--akcent) }

/* ─────────── tabule ─────────── */

#board { display: none; flex-direction: column }
.bhead { padding: 18px 20px 14px; border-bottom: 1px solid var(--ram2) }
/* Mezera platí hlavně mezi označníkem a názvem — nástroje odsune doprava
   samo roztažené h2, takže je na jejich odstupu nezávislá. */
.bhead .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 9px }
/* Označník kotví název zastávky, aniž by mu bral barvu — modrá je v appce
   vyhrazená klikacím věcem a nadpis klikací není. Zarovnává se na první řádek,
   aby u dlouhého názvu neplaval uprostřed. */
.bhead .znak {
  flex: none; width: 19px; height: 19px; margin-top: 3px; color: var(--text3);
}
.bhead .row > h2 { flex: 1; min-width: 0 }
.bhead h2 { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em }
.nastroje { display: flex; align-items: center; gap: 4px; flex-shrink: 0 }
.bhead .star { font-size: 18px }
/* Uložené volby filtrů. Ikona v hlavičce vedle hvězdy a záložky — je to
   vlastnost téhle zastávky jako ony. Pod tabulí zabíraly celý řádek lištou,
   která vypadala jako prázdné pole. Tvar sdílí s `.ulozit`, viz tam. */

.back {
  font-size: 13px; color: var(--text2); white-space: nowrap;
  padding: 5px 10px; border-radius: var(--radius-ovladac); border: 1px solid var(--ram);
}
.back:hover { color: var(--akcent); border-color: var(--akcent) }

/* Odkaz na infotabuli SŽ pod názvem stanice. Skrytí se píše výslovně: display
   na odkazu by přebil prohlížečové [hidden]{display:none} a svítil by i nad
   autobusem. Je to past, do které se tu spadlo už poněkolikáté. */
.szodkaz {
  display: inline-block; margin-top: 10px; font-size: 13px;
  color: var(--text2); text-decoration: none;
}
.szodkaz[hidden] { display: none }
.szodkaz:hover { color: var(--akcent) }

.dirs { padding: 14px 20px 4px }
.dirs .radka { display: flex; align-items: flex-start; gap: 7px }
/* Pilulky nezabírají celý řádek: disketa i rozbalovací šipka pak stojí hned za
   poslední z nich, ne u pravého okraje. */
.dirs .chips { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 7px }
/* Slovo prep. stojí v řadě jednou místo na každé pilulce. Zarovnává se na
   střed pilulky, aby leželo v jedné lince s názvy zastávek. */
.dirs .chips .pred { align-self: center; font-size: 13px; color: var(--text2); padding: 0 1px }
/* sbaleno = jen první řádek pilulek; další odkryje ▾ vedle. Přesnou výšku
   řádku dosadí tabule.ts z první pilulky, 33px je jen záloha bez měření. */
.dirs .chips.sbalene { max-height: 33px; overflow: hidden }
.dirs .roz { flex: none; padding: 5px 9px }
/* pilulka se nesmí zalomit na víc řádků textu — sbalený stav by ji ořízl vejpůl */
.dirs .chips button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dirs button {
  font-size: 13px; line-height: 1.2; padding: 7px 12px; border: 1px solid var(--ram);
  border-radius: var(--radius-pilulka); color: var(--text2); background: var(--karta);
  max-width: 100%; text-align: left;
}
.dirs button:hover { border-color: var(--akcent); color: var(--akcent) }
.dirs button.on { background: var(--akcent); border-color: var(--akcent); color: var(--na-barve) }

/* Nabídka uložených voleb. Vysune se pod hlavičkou karty, kde sedí její
   tlačítko — vlastní, ne `<select>`: do nativní se nedá dát tlačítko, a mazání
   i značka výchozí patří k položce, ne vedle celého výběru. */
/* Jen spodní čára. Hlavička karty svou už má, takže druhá hned pod ní vyrábí
   dvojitou linku a mezi nimi úzký proužek, který vypadá jako omylem. */
/* Rozbalená nabídka uložených voleb. Vlastní podklad a čára, aby byla poznat
   jako panel; nahoře mezera, jinak se lepí na pole s časem nad ní. */
.pozice {
  margin-top: 10px; background: var(--karta2);
  border-top: 1px solid var(--ram2); border-bottom: 1px solid var(--ram2);
}
.pozice .radekPozice { display: flex; align-items: stretch; border-top: 1px solid var(--ram2) }
.pozice .radekPozice:first-child { border-top: none }
.pozice .radekPozice.on { background: var(--karta) }
.pozice .popisek {
  flex: 1; min-width: 0; padding: 11px 20px; font-size: 13.5px; text-align: left;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pozice .popisek:hover { color: var(--akcent) }
/* Číslo linky jako značka, ne jako pokračování názvu. „Hlavní nádraží · 7" se
   četlo jedním dechem; v rámečku je to totéž číslo, jaké svítí v tabuli o kus
   níž, a pozná se bez čtení. Menší než `.badge` v seznamu odjezdů — tam je to
   hlavní údaj řádku, tady jen upřesnění za jménem zastávky. */
.popisekLinky { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle }
.znackaLinky {
  min-width: 2.1em; padding: 2px 5px; font-size: 11.5px; font-weight: 600;
  line-height: 1.35; text-align: center; color: var(--text);
  background: var(--karta2); border: 1px solid var(--ram); border-radius: var(--radius-ikona);
  font-variant-numeric: tabular-nums;
}
/* Na načteném štítku svítí volba akcentem, tak ať s ním značka nespadne do
   šedi — jinak by vypadala jako vypnutá. */
.nactena .znackaLinky { border-color: var(--akcent); color: var(--akcent) }
.pozice .hvezda, .pozice .smazat {
  flex: none; padding: 0 12px; font-size: 15px; line-height: 1; color: var(--text3);
}
.pozice .hvezda.on, .pozice .hvezda:hover { color: var(--akcent) }
.pozice .smazat { display: flex; align-items: center }
.pozice .smazat .ikonaKos { display: block; width: 15px; height: 15px }
.pozice .smazat:hover { color: var(--spatna) }

/* Načtená volba těsně nad osou. Štítek, ne holý řádek: takhle se čte jako
   „tímhle je osa pod ním zúžená", kdežto samotný text vypadal jako nadpis,
   ke kterému se křížek nalepil zprava. Šířka podle obsahu, ne přes celou
   kartu — je to jedna věc, ne pruh. */
.nactena { display: flex; margin: 14px 20px 0 }
.nactena[hidden] { display: none }
.nactena .popisek {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 4px 6px 10px; font-size: 13px; font-weight: 600; color: var(--akcent);
  background: var(--akcent-tlum); border: 1px solid var(--akcent); border-radius: var(--radius-pilulka);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nactena .ikonaSeznam { flex: none; width: 15px; height: 15px }
/* Křížek uvnitř štítku, ne za ním: patří k té volbě, ne k řádku. */
.nactena .zavrit {
  flex: none; margin-left: -2px; padding: 6px 10px 6px 8px;
  font-size: 15px; line-height: 1; color: var(--akcent);
}
.nactena .zavrit:hover { color: var(--text) }

/* Disketa na konci řady linek. Číslo v rohu říká, kolik pozic je uložených —
   jinak se to dá zjistit jedině pohledem pod osu, kde při žádné není nic. */
/* Disketa je tlačítko v řadě pilulek, ale pilulka to není: bez vlastního
   podkladu ji `.dirs button.on` zalije akcentem a z ikony i počtu zbude modrý
   obdélník. */
.dirs .disketa, .dirs .disketa.on {
  flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: 4px;
  padding: 6px 8px; line-height: 1; color: var(--text);
  border: 1px solid var(--ram2); border-radius: var(--radius-ovladac); background: var(--karta2);
}
.dirs .disketa .ikonaDisketa { display: block; width: 16px; height: 16px }
.dirs .disketa:hover:not(:disabled) { color: var(--akcent); border-color: var(--akcent) }
/* Uložená kombinace: ikona a rám v akcentu, podklad zůstává kartový. */
.dirs .disketa.on { color: var(--akcent); border-color: var(--akcent) }
/* Nedostupná disketa se ztlumí barvou ikony, ne průhledností celého tlačítka:
   `opacity` táhne dolů i počet uložených pozic, takže i plná paměť vypadala
   jako vypnutá věc. */
.dirs .disketa:disabled { color: var(--ram) }


/* drát s korálky: kde v okně ten odjezd leží */
/* Výška je součet pásem, ne odhad: 12 závěs + 14 drát + 19 korálek + 16 linka
   + mezera + 14 popisky osy. Při 66 px se čísla linek dotýkala „teď" a „10 min". */
.wire { position: relative; height: 84px; margin: 18px 20px 2px }
/* S popiskou načtené volby se osa přisadí k ní — patří k sobě. */
.nactena:not([hidden]) + .wire { margin-top: 4px }
.wire .line { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--ram); border-radius: 2px }
.wire .pole { position: absolute; top: 5px; width: 2px; height: 12px; background: var(--ram); border-radius: 2px }
.wire .pole.l { left: 0 }
.wire .pole.r { right: 0 }
.hanger {
  position: absolute; top: 12px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.hanger .drop { width: 1px; height: 14px; background: var(--ram) }
/* korálek je silueta prostředku — barví se přes currentColor, tvar dodá ikony.ts */
.hanger .bead {
  display: block; width: 19px; height: 19px; margin-top: -1px; color: var(--text3);
}
.hanger .lab { font-size: 12px; font-weight: 600; margin-top: 4px; line-height: 1; color: var(--text2) }
/* Blížící se spoj červeně, na drátě i v řádku (viz .dep.soon) — jeden stav,
   jedna barva. Jde proti zásadě „červená jen značce", ale „nestihneš"
   červenou nenese (je jen zeslabené), takže se významy nebijou. */
.hanger.soon .drop { background: var(--spatna) }
.hanger.soon .bead { color: var(--spatna) }
.hanger.soon .lab { color: var(--spatna) }
.hanger.nestihnes { opacity: .38 }
/* „+3" u pravého konce: na osu se víc korálků nevešlo, zbytek je v seznamu níž */
.wire .vic {
  position: absolute; right: 0; top: 30px; font-size: 11px; font-weight: 600;
  color: var(--text3); pointer-events: auto;
}
.ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 14px }
.tick { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--text3) }
.tick.l { transform: none; left: 0 }
.tick.r { transform: none; right: 0 }

.deps { padding: 4px 0 }
/* Řádek sám klikací není — jízdu otvírá jedině značka linky, viz radekOdjezdu.
   Ruka nad celým řádkem by slibovala akci, která se po ťuknutí nestane. */
.dep {
  display: flex; align-items: center; gap: 14px; padding: 12px 20px;
  border-top: 1px solid var(--ram2);
}
.dep:hover { background: var(--karta2) }
.dep:first-child { border-top: none }
.badge {
  font-size: 15px; font-weight: 600; line-height: 1; min-width: 46px;
  background: var(--karta2); color: var(--text); border: 1px solid var(--ram);
  padding: 8px 6px; text-align: center; border-radius: var(--radius-tlacitko); font-variant-numeric: tabular-nums;
}
.dep.soon .badge { background: var(--spatna); border-color: var(--spatna); color: var(--na-barve) }
.dep.nestihnes { opacity: .45 }
.dest { flex: 1; min-width: 0 }
.dest .to { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dest .meta { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.when { text-align: right; flex-shrink: 0 }
.when .min { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15 }
.dep.soon .when .min { color: var(--spatna) }
.when .abs { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums }
.empty { padding: 26px 20px; color: var(--text2); font-size: 14px }

/* ─────────── doplněk uzel ─────────── */

/* Vstup do hledání trasy na patě tabule.
   Napoprvé to byl tichý šedý řádek — „decentně" dotažené do neviditelna:
   splynul s patičkou a nikdo netušil, že tam něco je. Teď je to pruh, který
   se čte jako akce: vlastní podklad, ikona přestupu v akcentu a šipka vpravo.
   Modrá je v appce vyhrazená klikacím věcem, takže tím nic neporušuje. */
/* Rohy se musí zaoblit tady, ne u karty: tlačítko je její poslední dítě a má
   vlastní podklad, takže bez toho vykreslí ostrý čtverec přes zaoblený spodek
   karty. Mínus pixel je šířka rámečku karty — vnitřní oblouk je o něj menší
   než vnější a se stejným poloměrem by podklad z oblouku vykoukl. */
.kamodsud {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 20px; border-top: 1px solid var(--ram2);
  background: var(--karta2); text-align: left;
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}
.kamodsud .prestup { flex: none; width: 22px; height: 22px; color: var(--akcent) }
.kamodsud .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.kamodsud .text strong { font-size: 14.5px; font-weight: 600; color: var(--text) }
/* Kroužek nese režim: zelený = online (data ze sítě po plátcích), šedý =
   offline (celý řád v zařízení). Barva je na ikoně, ne na textu — tlačítko
   funguje v obou stavech, jen jednou déle. */
.kamodsud .stav.online { color: var(--dobra) }
.kamodsud .stav.offline { color: var(--text3) }
.kamodsud:hover .stav { color: inherit }
.kamodsud .sip { flex: none; font-size: 20px; color: var(--text3); line-height: 1 }
.kamodsud:hover { background: var(--akcent-tlum) }
.kamodsud:hover .text strong, .kamodsud:hover .sip { color: var(--akcent) }

/* Nastavení pod ozubeným kolečkem. Volby, které platí všude a nemění se každou
   chvíli — proto panel v hlavičce, ne ovladač na tabuli. */
.nastaveni { padding: 16px 20px; margin-bottom: 12px }
.nastaveni h2 { font-size: 15px; font-weight: 600; margin-bottom: 12px }
.nastaveni .volba { display: flex; align-items: flex-start; gap: 10px; cursor: pointer }
/* Vlastní display: flex výš by přebil prohlížečové [hidden]{display:none} —
   „Praha + PID offline" má atribut `hidden` a svítila i na Pardubicích, kde
   plátky nejsou a přepínat není co. Táž past jako u .ikonaBtn a .nacitam. */
.nastaveni .volba[hidden] { display: none }
.nastaveni .volba input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--akcent) }
.nastaveni .volba .text { display: flex; flex-direction: column; gap: 2px }
.nastaveni .volba strong { font-size: 14px; font-weight: 600; color: var(--text) }
.nastaveni .volba span { font-size: 12.5px; color: var(--text2) }
/* Předěl mezi volbami. Táž čára jako nad `.prenos` — stahování celého jízdního
   řádu není další zaškrtávátko téhož druhu, ale volba o tom, co si appka stáhne. */
.nastaveni .volba.predel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ram2) }

/* Výchozí okno. Popis vlevo, krokovadlo u pravého kraje — jako řádek chůze na
   tabuli. Vlastní blok, ne `.volba`: to je zaškrtávátko a jeho `span` by číslu
   v krokovadle přebil velikost i barvu. */
.nastaveni .oknoVychozi {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ram2);
}
.nastaveni .oknoVychozi .text { display: flex; flex-direction: column; gap: 2px }
.nastaveni .oknoVychozi .text strong { font-size: 14px; font-weight: 600; color: var(--text) }
.nastaveni .oknoVychozi .text span { font-size: 12.5px; color: var(--text2); line-height: 1.45 }
.nastaveni .oknoVychozi .okno { flex: none }

/* Přenos na jiné zařízení. Oddělený čarou, protože to není další volba, ale
   akce — a bez předělu splývá s pruhem zaškrtávátek nad ním. */
.nastaveni .prenos {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ram2);
}
.nastaveni .prenos .text { display: flex; flex-direction: column; gap: 2px }
.nastaveni .prenos .text strong { font-size: 14px; font-weight: 600; color: var(--text) }
.nastaveni .prenos .text span { font-size: 12.5px; color: var(--text2); line-height: 1.45 }
.nastaveni .prenos > button {
  font-size: 13.5px; font-weight: 600; color: var(--akcent);
  border: 1px solid var(--ram); border-radius: var(--radius-tlacitko); padding: 8px 13px;
}
.nastaveni .prenos > button:hover { border-color: var(--akcent); background: var(--akcent-tlum) }

/* Záloha stojí ve stejném pruhu jako přenos a dědí jeho rám i odsazení; liší
   se jen tím, že má tlačítka dvě vedle sebe. */
.zalohaBtny { display: flex; gap: 8px; flex-wrap: wrap }
.nastaveni .zaloha .zalohaBtny button {
  font-size: 13.5px; font-weight: 600; color: var(--akcent);
  border: 1px solid var(--ram); border-radius: var(--radius-tlacitko); padding: 8px 13px;
}
.nastaveni .zaloha .zalohaBtny button:hover {
  border-color: var(--akcent); background: var(--akcent-tlum);
}
/* Připomínka je poznámka, ne poplach: barva textu jako u popisků, žádná
   výstražná. Stárnoucí záloha není chyba, jen se o ní má vědět. */
.zalohaStav { font-size: 12.5px; color: var(--text3); line-height: 1.45 }

.prenosKod { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100% }
.prenosKod[hidden] { display: none }
/* Bílé pole pod kódem. Jediné místo v appce, kde tmavý vzhled neplatí:
   převrácený QR část čteček nepřečte — viz ui/prenos.ts. */
.qrRamecek { background: #fff; border-radius: var(--radius-tlacitko); padding: 6px; line-height: 0 }
/* Strop je v pixelech, ne v procentech: kód nemá důvod růst přes celou kartu,
   a když je moc velký, nevejde se do záběru fotoaparátu naráz. */
.qr { display: block; width: min(240px, 62vw); height: auto; image-rendering: pixelated }
.prenosHlaska { font-size: 12.5px; color: var(--text2); line-height: 1.45; text-align: center }
.prenosShrnuti { font-size: 12px; color: var(--text3); text-align: center }
.prenosKopie {
  font-size: 13px; color: var(--text2);
  border: 1px solid var(--ram); border-radius: var(--radius-tlacitko); padding: 7px 12px;
}
.prenosKopie:hover { color: var(--akcent); border-color: var(--akcent) }
.prenosAdresa {
  font: inherit; font-size: 12px; width: 100%; padding: 8px 10px;
  background: var(--karta2); color: var(--text2);
  border: 1px solid var(--ram); border-radius: var(--radius-tlacitko);
}

/* Přijaté nastavení z QR. Vlastní karta nad obsahem: je to rozhodnutí, které
   se musí udělat dřív, než člověk začne cokoli dělat s tabulí. */
.prijem { padding: 16px 20px; margin-bottom: 12px }
.prijem h2 { font-size: 15px; font-weight: 600; margin-bottom: 8px }
.prijem p { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 12px }
.prijemBtny { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.prijemBtny button {
  font-size: 13.5px; font-weight: 600; color: var(--text2);
  border: 1px solid var(--ram); border-radius: var(--radius-tlacitko); padding: 9px 13px;
}
.prijemBtny button:hover { color: var(--akcent); border-color: var(--akcent) }
.prijemBtny .ano { background: var(--akcent); color: var(--na-barve); border-color: var(--akcent) }
.prijemBtny .ano:hover { color: var(--na-barve); filter: brightness(1.08) }
.prijemBtny .ne {
  margin-left: auto; font-size: 15px; font-weight: 400; border: none;
  color: var(--text3); padding: 7px 6px;
}

/* ─────────── hlídač spoje ─────────── */

/* Zvonek v řádku odjezdu. Tichý, dokud nehlídá — je to nabídka, ne pobídka. */
/* Zvonek a prázdné místo po něm sdílejí rozměr, ne chování: u spoje, na který
   se jde teď hned, se hlídat nedá nic, ale sloupec časů se kvůli tomu nesmí
   posunout — čísla se čtou shora dolů a musí zůstat pod sebou. */
.zvon, .zvonMisto { flex: none; font-size: 14px; line-height: 1; padding: 6px }
.zvon {
  border-radius: var(--radius-ovladac); color: var(--text3); filter: grayscale(1); opacity: .55;
}
.zvonMisto { visibility: hidden }
.zvon:hover { background: var(--karta2); opacity: 1; filter: none }
.zvon.on { filter: none; opacity: 1 }
.dep.hlidany { background: var(--akcent-tlum) }

/* Pruh hlídače. Drží se dole u patičky, ne nahoře: tabule je to hlavní a
   hlídání je stav, ne obsah. Když zazvoní, teprve tehdy si vezme barvu. */
/* Sedí mezi osou a seznamem odjezdů, uvnitř karty tabule. Odsazení proto
   kopíruje `.wire` a `.deps`, a stín je pryč — ten měl smysl, dokud pruh
   stál sám pod kartou a musel se od stránky oddělit.

   Nahoře i dole stejně: pruh je vsuvka mezi dvě věci, ne hlavička seznamu pod
   ním. Nahoře se těch deset pixelů slučuje se dvěma od `.wire` (svislé marginy
   se v běžném toku sčítat neumějí, platí větší z nich), dole k nim `.deps`
   přidává vlastní čtyři — o ty je mezera pod pruhem opticky větší. */
.hlidac {
  display: flex; align-items: center; gap: 12px; margin: 10px 20px;
  padding: 12px 16px; background: var(--karta2); border: 1px solid var(--ram);
  border-radius: var(--radius);
}
.hlidac[hidden] { display: none }
.hlidac .text { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text2) }
.hlidac button {
  flex: none; font-size: 13px; padding: 6px 12px; border-radius: var(--radius-ovladac);
  border: 1px solid var(--ram); color: var(--text2);
}
.hlidac button:hover { border-color: var(--akcent); color: var(--akcent) }
/* Zazvonění je jediný okamžik, kdy si appka řekne o pozornost sama — a proto
   jediné místo, kde nesvítí modrá. Ta je v appce vyhrazená klikacím věcem, tak
   rozsvícený pruh splýval s tlačítky kolem; oranžová říká „vstávej", ne
   „klikni". Tlačítko „Díky" uvnitř zůstává v barvě pruhu, aby ho neroztrhlo. */
.hlidac.zvoni { border-color: var(--vyzva); background: var(--vyzva-tlum) }
.hlidac.zvoni .text { color: var(--text); font-weight: 600 }
.hlidac.zvoni button { border-color: var(--vyzva); color: var(--vyzva) }

/* Přes #id, ne .třídu — obrazovky se skrývají takhle všechny (#picker, #board)
   a je to specifičtější než .card, takže se o pořadí pravidel nic nehraje.

   Karta musí dole dýchat: seznam cílů i výsledky končily na hraně rámu.
   Nahoře odsazení dělají vlastní bloky, dole není co by ho udělalo. */
#trasy { display: none; flex-direction: column; padding-bottom: 16px }
/* Rám drží obal, uvnitř je šedý štítek s jízdním řádem a za ním samotné pole.
   Odsazení sedí na obalu, ne na poli — jinak by se rám odlepil od sloupce,
   ve kterém stojí ostatní bloky obrazovky. */
.trasy .trasyPole { margin: 14px 20px 0 }
/* Ve kterém řádu se hledá. Tlumeně: je to údaj, ne pobídka — a nesmí vypadat
   jako část toho, co je napsané v poli. Prázdný (náhled bez `mesta.mjs`) zmizí
   i s mezerou po sobě. */
.radStitek { flex: none; color: var(--text3); font-size: 13.5px; white-space: nowrap }
.radStitek:empty { display: none }
.trasy .stoplist { margin: 12px 20px 0; max-height: 46vh }
.vysledky:not(:empty) { padding: 6px 0 0 }
/* Kdy se jede. Jediný ovladač času v celé appce — do 28. 8. měla druhý
   i obrazovka hledání tras a byly na sobě nezávislé. Tlumeně: výchozí „teď"
   platí skoro vždycky a nemá to přetahovat pozornost k sobě. Zalomení je
   povolené, aby se tři krokovadla a „teď" vešly i na úzký telefon.

   Nad osou, pod pilulkami směrů. Krokovadlo mění počátek osy: ta hned pod ním
   začíná slovem „teď" a právě to „teď" šipky posouvají. V hlavičce karty stálo
   dřív a ovládalo něco, co bylo o tři prvky níž — mezi tím nadpis, hvězdička
   a dvě řady pilulek.

   Řeší to i trefování na mobilu, a z principu, ne opatřením: mezi šipkami
   a hvězdičkou v hlavičce leží celý řádek pilulek, takže minutí nemá kam
   dopadnout. Dřív to drželo jen tím, že zavřený ovladač šipky nemá.

   Odsazení kopíruje `.wire` pod ním, ne `.bhead` nad ním — patří k ose. Na
   střed ze stejného důvodu: osa pod ním je přes celou šířku a rozkládá si po ní
   značky, takže vycentrovaný řádek se čte jako její popiska. U levého kraje
   vypadal jako ovladač utržený od toho, co ovládá. */
.kdy {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin: 14px 20px 10px; font-size: 13px; color: var(--text2);
}
.kdy .hodnota {
  padding: 7px 12px; border: 1px solid var(--ram2); border-top-width: 1px;
  border-bottom-width: 1px; background: var(--karta2); color: var(--text);
  font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Krokovadlo: hodnota a za ní dvě šipky nad sebou, jako u číselníku. Po
   stranách stály dřív a tři takové ovladače vedle sebe zabraly celou šířku
   karty — svisle zaberou místo dvou širokých tlačítek jedno úzké.

   Šipky jsou vlevo, hodnota za nimi; ta ztrácí levý rám, aby mezi nimi nebyla
   dvojitá čára. */
/* Zavřené je to jen datum a čas, jako hodiny: šipky pryč, rámečky pryč, zbydou
   tři údaje v řádku. Rozvine se ťuknutím na kterýkoli z nich — hodnoty jsou
   proto tlačítka. Kurzor to přiznává i zavřený, jinak by nikoho nenapadlo, že
   se s tím dá hýbat. */
.kdy:not(.otevreno) .sipky { display: none }
.kdy:not(.otevreno) .hodnota {
  border-color: transparent; background: none; padding: 7px 2px; border-radius: var(--radius-ikona);
}
.kdy:not(.otevreno) .hodnota:hover { color: var(--akcent) }
/* Rámečky krokovadla mají vyšší specificitu než pravidlo výš, takže se jim
   musí odpovědět stejně adresně — jinak zůstane minutovce viset její levá
   hranička jako zaoblená čárka před číslem. Naměřeno hned po zavedení
   sbaleného stavu. */
.kdy:not(.otevreno) .krok .hodnota { border-color: transparent }
.kdy:not(.otevreno) .krok.vpravo .hodnota { border-color: transparent }
.kdy:not(.otevreno) .dvojtecka { margin: 0 -1px }
.kdy .krok { display: inline-flex; align-items: stretch }
.kdy .krok .hodnota {
  border-left: none; border-radius: 0 var(--radius-tlacitko) var(--radius-tlacitko) 0; display: flex; align-items: center;
}
.kdy .sipky { display: flex; flex-direction: column }
/* Obě šipky spolu vysoké přesně jako hodnota vedle: `flex: 1` je rozdělí na
   půl, ať se krokovadlo nerozjede podle výšky písma v tlačítku. Drobné písmo
   je záměr — trojúhelník je značka, ne text ke čtení, a plocha na ťuknutí je
   daná paddingem. */
.kdy .sipky button {
  flex: 1; padding: 0 8px; font-size: 8px; line-height: 1; color: var(--text2);
  background: var(--karta2); border: 1px solid var(--ram2);
}
.kdy .sipky button:first-child { border-radius: var(--radius-tlacitko) 0 0 0; border-bottom: none }
.kdy .sipky button:last-child { border-radius: 0 0 0 var(--radius-tlacitko) }
.kdy .sipky button:hover { color: var(--akcent); border-color: var(--akcent) }
/* Šipka, kterou se nikam nedostaneš: na „teď" nejde nic dozadu, na konci
   platnosti balíčku nic dopředu. Bez tohohle vypadala stejně jako každá jiná —
   zmáčkl jsi ji a nestalo se nic, což se od rozbité appky nepozná. */
.kdy .sipky button[disabled] { color: var(--text3); opacity: .35; cursor: default }
.kdy .sipky button[disabled]:hover { color: var(--text3); border-color: var(--ram2) }
/* Minutovka má šipky na druhé straně, aby obě políčka času sousedila přes
   dvojtečku. Zrcadlí se tím i rámy: hodnota ztrácí pravý místo levého. */
.kdy .krok.vpravo .hodnota {
  border-left: 1px solid var(--ram2); border-right: none; border-radius: var(--radius-tlacitko) 0 0 var(--radius-tlacitko);
}
.kdy .krok.vpravo .sipky button:first-child { border-radius: 0 var(--radius-tlacitko) 0 0 }
.kdy .krok.vpravo .sipky button:last-child { border-radius: 0 0 var(--radius-tlacitko) 0 }
/* Hodina, dvojtečka a minuta drží u sebe těsněji než ostatní ovladače v řádku:
   je to jeden čas, ne dva údaje. */
.kdy .cas { display: inline-flex; align-items: center; gap: 4px }
.kdy .dvojtecka {
  font-size: 15px; font-weight: 600; color: var(--text3); line-height: 1;
}
.kdy .ted { padding: 7px 10px; color: var(--akcent); font-size: 13px }
.kdy .ted:hover { text-decoration: underline }

/* Co je v seznamu cílů. Tlumené a drobné — je to vysvětlivka k nabídce, ne
   pokyn; kdo ví, co hledá, píše rovnou a číst to nemusí. */
.napoveda {
  margin: 8px 20px 0; font-size: 12.5px; line-height: 1.45; color: var(--text2);
}

/* Listování dál v čase. U vlaku podstatné: co nejede večer, jede ráno. */
.dalsiSpoje {
  width: 100%; padding: 13px 20px; border-top: 1px solid var(--ram2);
  font-size: 13.5px; font-weight: 500; color: var(--akcent);
}
.dalsiSpoje:hover { background: var(--akcent-tlum) }

/* Složená cesta: pruh nad hledáním s tím, co už je za sebou. Odsazený a
   tlumený — je to kontext k dalšímu kroku, ne výsledek, na který se kouká. */
/* Odsazení stejné jako u `.jinyRad` — bloky na téhle obrazovce stojí ve stejném
   sloupci, jinak to vypadá, že cesta patří k hlavičce. */
.cesta {
  margin: 12px 20px 0; padding: 10px 14px; background: var(--karta2);
  border: 1px solid var(--ram); border-radius: var(--radius);
}
/* Titulek složené cesty a vlevo u něj záložka „uložit na kartu". Vlevo, ne
   vpravo: řádek je nadpis, ne lišta nástrojů, a záložka je to, co s ním člověk
   dělá. `margin-bottom` přešel z nadpisu na celý řádek, jinak by mezera pod
   ním visela jen pod textem a záložka by se o ni opírala. */
.cestaTitulRadek { display: flex; align-items: center; gap: 6px; margin-bottom: 6px }
/* Záložka má kvůli ploše na ťuknutí vlastní odsazení (`.ulozit`, 6 px), takže
   její obrázek začínal o těch 6 px vpravo od ikon vozů pod ním — v levém
   sloupci byl vidět zub. Odsazení se vytáhne zpátky zápornou mezerou: plocha
   na prst zůstane, hrana sedne. */
.cestaTitulRadek .ulozit { margin-left: -6px }
/* Tlačítka pod nalezenou trasou: „Přidat" a „Pokračovat v cestě". */
.trasaAkce { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }

.cestaTitul { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3) }
/* Po uložení nese titulek jméno cesty („Do práce"), ne štítek „MOJE CESTA".
   Velká písmena a rozpal patří štítku, který říká, co ten pruh je; jméno si
   napsal člověk a čte se jako jméno, tedy normálním písmem a v plné barvě. */
.cestaTitul.jmeno {
  font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Výběr ikony pod titulkem. `.mista` nese rozestupy, tohle jen odsazení od
   řádku nad ním — v hlavičce zastávky, odkud se to přestěhovalo, ho dávalo
   okolí. */
.cestaMista { padding: 2px 0 8px }
.cestaUsek { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; font-size: 13px }
/* Na střed řádku, ne na účaří: obrázek účaří nemá a sedl by si na ni spodkem,
   tedy o kus výš než text vedle. Tlumený jako číslo linky — je to značka
   úseku, ne jeho obsah. */
.cestaVuz { flex: none; align-self: center; width: 15px; height: 15px; color: var(--text3) }
.cestaCas { flex: none; color: var(--text2); font-variant-numeric: tabular-nums }
.cestaKudy { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cestaLinka { flex: none; font-size: 12px; font-weight: 600; color: var(--text3) }
.cestaSouhrn {
  margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--ram2);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cestaNastroje { display: flex; align-items: center; gap: 14px; margin-top: 8px }
/* Tichá akcentová tlačítka: „Uložit cestu" v pruhu a „Uložit" u přejmenování.
   Tvar mají pixel na pixel stejný a byl zapsaný zvlášť u každého; liší se jen
   tím, jak stojí v řádku, což si každé nese samo níž. */
.cestaUloz, .ulozenaOk {
  font-size: 12px; color: var(--akcent);
  border: 1px solid var(--ram); border-radius: var(--radius-tlacitko); padding: 4px 10px;
}
.cestaUloz:hover:not(:disabled), .ulozenaOk:hover {
  background: var(--akcent-tlum);
}
.cestaUloz:disabled { color: var(--text3); border-color: var(--ram2); cursor: default }
/* Křížek na konci posledního řádku úseku — cesta se rozebírá odzadu, takže je
   v pruhu jeden. Tlumený jako číslo linky vedle něj: je to oprava, ne akce,
   kterou by měl někdo hledat očima. Pevná šířka drží sloupec, aby čísla linek
   nad sebou seděla i u řádků bez křížku (`.prazdny`). */
.cestaZrus {
  flex: none; width: 18px; text-align: center; font-size: 15px; line-height: 1;
  color: var(--text3); padding: 0;
}
.cestaZrus:hover { color: var(--spatna) }
.cestaZrus.prazdny { cursor: default }

/* Uložené cesty. Je to šablona, ne výsledek — proto tichá a nad hledáním,
   ať to není první, co na obrazovce padne do oka. */
.ulozene {
  margin: 0 0 10px; padding: 10px 14px; background: var(--karta2);
  border: 1px solid var(--ram); border-radius: var(--radius);
}
/* Panel z hlavičky stojí sám nad obsahem, ne uvnitř hledání — proto vlastní
   odsazení a výraznější podklad než pruh uvnitř „Kam odsud". */
.mujjr { background: var(--karta); box-shadow: var(--stin); position: relative }

/* OTEVŘENÝ PANEL JE OBRAZOVKA, ne pruh nad tabulí. Uložené cesty patří doméně,
   ne městu — jenže panel nad tabulí nechával v hlavičce „VLAKY ČR" a pod
   výpisem pole „Hledat zastávku", takže obrazovka tvrdila, že jsi ve Vlacích,
   ačkoli tytéž cesty vidí všechna města stejně.

   Schovává se to třídou na .shell, ne sekci po sekci v JS: sekcí je devět,
   panel se otvírá z kterékoli obrazovky a jinak by se musel pamatovat stav
   každé zvlášť, aby se po zavření vrátila tatáž. Takhle je zavření prosté
   zahození třídy a pod ní zůstalo všechno tak, jak bylo.

   Nastavení se otevírá z téže hlavičky a platí pro ně totéž: volby o appce
   nemají pod sebou nechat viset hledání zastávek a patičku, jako by se pořád
   stálo na tabuli. Proto tentýž mechanismus, jen s vlastním jménem třídy.

   `!important` je kvůli #board a #trasy: ty se přepínají inline stylem
   (`style.display` v main.ts a trasy.ts), který by třída jinak nepřebila. */
/* `#prenosPrijem` je z toho schválně vyňatý. Je to sourozenec obou panelů, ne
   jejich potomek, takže by ho `display: none !important` schoval — a přitom
   tlačítko „Obnovit ze souboru", které ho otevírá, je dosažitelné jedině
   z otevřeného nastavení. Bez výjimky by výběr souboru nezobrazil vůbec nic,
   ani hlášku o poškozeném souboru. Je to rozhodnutí, které stojí nad
   obrazovkou, ne obsah obrazovky. */
.shell.jenMujJr > *:not(.masthead):not(#mujJr):not(#prenosPrijem),
.shell.jenNastaveni > *:not(.masthead):not(#nastaveni):not(#prenosPrijem) {
  display: none !important;
}
.shell.jenMujJr .masthead h1 .mesto { display: none }
/* Nadpis uvnitř panelu se v téhle obrazovce neopakuje: totéž jméno stojí pod
   „Odjezdovka" v hlavičce, tam, kde jinde stojí město. Dvakrát pod sebou by to
   byl šum. V pruhu uvnitř „Kam odsud" nadpis zůstává — tam je panel jedním
   z několika bloků a bez jména by se nepoznal. */
.shell.jenMujJr .mujjr .cestaTitul { display: none }
.shell.jenMujJr .mujjr { margin-bottom: 0 }
/* Odsazení pod panelem drží odstup od toho, co bylo pod ním — a pod ním teď
   není nic. */
.shell.jenNastaveni .nastaveni { margin-bottom: 0 }
/* Jedna uložená cesta: řádek s jménem a pod ním rozbalený detail. Vlas mezi
   bloky, ne rám kolem každého — panel je seznam, ne mřížka karet. Bez něj
   splývala rozbalená cesta se jménem té následující. */
.ulozenaCesta + .ulozenaCesta { border-top: 1px solid var(--ram); margin-top: 6px; padding-top: 6px }
.ulozenaRadek { display: flex; align-items: center; gap: 8px }
.ulozena {
  flex: 1; min-width: 0; text-align: left; font-size: 13px; color: var(--text);
  padding: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ulozena:hover { color: var(--akcent) }
/* Jméno nese řádek, kudy cesta vede je pod ním tiše — bez jména zůstane
   jen ten první řádek a vypadá to jako dřív. */
/* Čas cesty nad jménem: „v kolik mi to jede" je první otázka. */
/* Čas a kudy na jednom řádku — u jedné jízdy je to celý obsah detailu. */
.ulozenaShrn { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.ulozenaCas { flex: none; font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums }
.ulozenaNazev { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ulozenaKudy {
  flex: 1; min-width: 0; font-size: 12px; color: var(--text3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Uložený čas, který v dnešních datech neplatí. Cesta se neruší ani neschovává
   — jen se řekne, že tenhle spoj dnes nejede. Oranžová jako zpoždění, ne
   červená: není to chyba, je to jiný den provozu nebo nový jízdní řád.

   Sbalený řádek nese jen jméno, takže škrtnutí padne na ně — jinak by se
   „neplatí" poznalo teprve po rozvinutí. */
.ulozenaRadek.neplati .ulozenaNazev { color: var(--pozde); text-decoration: line-through }
/* Detail je sourozenec hned za řádkem, takže se škrtnutí přenese i na čas v něm. */
.ulozenaRadek.neplati + .ulozenaDetail .ulozenaCas {
  color: var(--pozde); text-decoration: line-through;
}
.ulozenaNeplati { font-size: 12px; line-height: 1.4; color: var(--pozde) }
/* Rozbalený detail cesty: kdy, kudy a čím. Odsazený a tichý — je to doplněk
   k řádku nad ním, ne další nabídka. Táž řeč jako rozbalená jízda na tabuli. */
.ulozenaDetail { padding: 0 0 8px 4px; display: flex; flex-direction: column; gap: 2px }
.ulozenaSmaz, .ulozenaUprav {
  flex: none; font-size: 15px; line-height: 1; color: var(--text3); padding: 4px 6px;
}
.ulozenaSmaz:hover, .ulozenaUprav:hover { color: var(--text) }
/* Přejmenování na místě: pole zabere celý řádek, tlačítko zůstane vpravo. */
.ulozenaPole { flex: 1; min-width: 0; font-size: 13px; padding: 6px 8px }
.ulozenaOk { flex: none }
/* Pole pro jméno při ukládání. Roste do šířky, ale nesmí vytlačit tlačítka. */
.cestaNazev { flex: 1; min-width: 0; max-width: 260px; font-size: 12.5px; padding: 5px 8px }

/* Časová osa cesty složené z víc balíčků. Odsazená pod jménem cesty: je to
   její rozpis, ne další seznam. */
.osa { margin: 2px 0 8px 4px; padding-left: 10px; border-left: 2px solid var(--ram) }
.osaUsek { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 12.5px }
.osaCas { flex: none; color: var(--text2); font-variant-numeric: tabular-nums }
.osaKudy { flex: 1; min-width: 0 }
.osaBody { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* Kde ten úsek bydlí — u cesty přes tři balíčky jediné, podle čeho se pozná,
   že se přesedá z autobusu do vlaku. */
.osaKde { display: block; font-size: 11.5px; color: var(--text3) }
/* Přepínač jízdního řádu u výběru cíle: „hledám v autobusech, ale dál pojedu
   vlakem". Pilulky jako u směrů na tabuli, protože dělá totéž — přepíná, v čem
   se hledá. Nikam se přitom neodchází, složená cesta zůstává. */
/* Vlastní prvek nad seznamem, ne uvnitř něj: #trasyCile se scrolluje, takže
   přepínač vložený dovnitř odroloval mimo obraz a vypadal, že tam není. */
.jinyRad {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 12px 20px 0; padding: 10px 12px;
  background: var(--karta2); border: 1px solid var(--ram); border-radius: var(--radius);
}
.jinyRadOdkaz {
  font-size: 12.5px; border: 1px solid var(--akcent); border-radius: var(--radius-pilulka);
  padding: 4px 11px; line-height: 1.3;
  color: var(--akcent); background: var(--karta);
}
.jinyRadOdkaz:hover { background: var(--akcent-tlum) }
/* Kudy spoj jede — rozbalené pod řádkem tabule i pod úsekem karty. Tiché
   a odsazené: je to doplněk k řádku nad ním, ne další nabídka. */
.zastaveni {
  margin: 2px 0 8px; padding: 8px 0 8px 12px;
  border-left: 2px solid var(--ram);
  max-height: 45vh; overflow-y: auto;
}
.zastaveniRadek { display: flex; gap: 10px; font-size: 12.5px; color: var(--text3); padding: 1px 0 }
.zastaveniCas { flex: none; font-variant-numeric: tabular-nums }
.zastaveniKde { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* Úsek, který si člověk prohlíží. Zbytek jízdy ztichne, ale nemizí — podle
   toho, odkud spoj přijel, se pozná, jestli nemá nastoupit dřív. */
.zastaveniRadek.vuseku { color: var(--text) }
.zastaveniRadek.vuseku .zastaveniCas { font-weight: 600 }

/* Zastávka, na kterou se dá ťuknout a vystoupit tam. Tlačítko, ale nesmí
   vypadat jako tlačítko: je to pořád výpis jízdy a čtyřicet zvýrazněných
   řádků pod sebou by z něj udělalo nabídku. Zvýrazní se až pod prstem. */
.zastaveniRadek.volba {
  width: 100%; text-align: left; border-radius: var(--radius-ikona); margin: 0 -6px; padding: 1px 6px;
}
.zastaveniRadek.volba:hover { background: var(--akcent-tlum); color: var(--akcent) }
.zastaveniRadek.volba:hover .zastaveniCas { color: var(--akcent) }

/* Číslo linky je tlačítko, ať je poznat, že se na ně dá kliknout. */
.dep .badge, .usek .linka { cursor: pointer }
.dep .badge:hover, .usek .linka:hover { border-color: var(--akcent); color: var(--akcent) }

/* „Uložit cestu" a „Pokračovat odsud" u každé varianty. Obě tiché: rozhodnutí
   na kartě je pořád výběr spoje, tohle jsou až kroky nad ním. Týž tvar proto,
   že jsou to dvě rovnocenné možnosti, co s nalezeným spojením dál — jedno ho
   uzavírá, druhé v něm pokračuje. */
/* Obě tlačítka karty jedním pravidlem: „Přidat" i „Pokračovat v cestě" dělají
   totéž (spoj do cesty) a liší se jen tím, kam pošlou člověka — takže musí
   vypadat stejně a stát v jedné rovině. Vlastní velikost a odsazení u jednoho
   z nich stačily, aby si o pár pixelů poodskočila. */
.dalUsek, .pridejUsek {
  margin: 8px 0 2px; font-size: 12px; color: var(--akcent);
  border: 1px solid var(--ram); border-radius: var(--radius-tlacitko); padding: 5px 10px;
}
.dalUsek:hover, .pridejUsek:hover { background: var(--akcent-tlum) }

.trasa { padding: 14px 20px; border-top: 1px solid var(--ram2) }
.trasa:first-child { border-top: none }

/* Akcent nese jediná věc, stejně jako na tabuli „teď": nejbližší použitelné
   spojení. Pruh u kraje, ne barevné písmo — časy musí zůstat čitelné. */
.trasa.prvni { box-shadow: inset 3px 0 0 var(--akcent) }
.trasa.prvni .casy { color: var(--akcent) }

/* Datum u spoje, který nejede dnes. Tlumené a před časy: čte se jako
   „pátek, 5:05", ne jako součást času. */
.trasa .denKarty { flex: none; font-size: 12.5px; color: var(--text2) }
.trasa .souhrn { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px }
.trasa .casy { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums }
.trasa .delka { font-size: 13px; color: var(--text2); font-variant-numeric: tabular-nums }
.trasa .jak { font-size: 12px; color: var(--text3); margin-left: auto }

.trasa .usek { display: flex; align-items: flex-start; gap: 10px; padding: 3px 0 }
.trasa .vuz { flex: none; width: 19px; height: 19px; margin-top: 2px; color: var(--text3) }
.trasa .linka {
  flex: none; min-width: 38px; text-align: center; font-size: 13px; font-weight: 600;
  background: var(--karta2); border: 1px solid var(--ram); border-radius: var(--radius-ovladac); padding: 3px 6px;
}
.trasa .kudy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.trasa .bod {
  font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* Číslo linky v její vlastní barvě; bílý text drží kontrast na tmavých značkách
   metra i na sytých barvách tramvají. */
.zastavka h2 .cislo {
  display: inline-block; color: var(--na-barve); font-size: .82em; font-weight: 700;
  padding: 1px 9px; border-radius: var(--radius-ikona); vertical-align: 2px;
}

/* Zpoždění v podřádku odjezdu.

   Oranžová, a ne červená: červená na řádku odjezdu už znamená „jdi teď"
   (.dep.soon na drátě i v řádku) a akcent „tenhle spoj hlídám" (.dep.hlidany).
   Obarvit „+2 min" červeně by z klidného spoje udělalo naléhavý, a přitom
   zpoždění znamená pravý opak — času je víc. Vlastní odstín je proto jediná
   cesta, jak nešlápnout do významu, který už je obsazený.

   Kontrast na kartě: světlá 5,2:1 (#c2410c), tmavá 8,1:1 (#fb923c), na
   podbarveném řádku hlídaného spoje 3,0:1 a 6,9:1. Obojí je nad dosavadní
   červenou, se kterou se to nesmí splést.

   Náskok („−1 min") je zelený, ne oranžový: není to zpoždění, je to opačná
   odchylka a splývat s ní nemá. Bere si `--dobra`, protože zelená v paletě
   už je; kontrast 5,0:1 světlá a 10,5:1 tmavá.
   „načas" zůstává nejtišší — je to ujištění, ne novinka. */
.dep .zpoz { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text3) }
.dep .zpoz.pozde { color: var(--pozde) }
.dep .zpoz.driv { color: var(--dobra) }
.dep .tecka { color: var(--text3) }

.trasa .bod + .bod { color: var(--text2) }
/* Dopravce je poznámka k vozu, ne bod trasy — proto tišší a bez tabulkových číslic */
.trasa .kdo {
  font-size: 12px; color: var(--text3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Odsazené na šířku ikony a čísla linky, aby čekání viselo pod trasou, ne vedle ní */
.trasa .cekani { font-size: 12px; color: var(--text3); padding: 4px 0 4px 67px }
/* Pěší přesun není čekání — z řádku musí být poznat, že se něco dělá */
.trasa .cekani.pesky { color: var(--text2); font-weight: 500 }

/* Okno a chůze na jednom řádku pod datem: okno vlevo, chůze u pravého kraje.
   Pruh pod tabulí (`.bfoot`) tu byl do 20. 8. — ovladače stály až za tím, co
   mění, a na dlouhém okně se k nim muselo odrolovat přes stovku odjezdů. */
.ovladace { display: flex; align-items: center; gap: 7px; margin: 10px 20px 0 }
/* Okno. Posuvník tu byl a odešel: kuličkou se na mobilu o jednu zarážku
   netrefíš, prst ujede z třiceti minut na dvě hodiny. Zůstaly šipky se
   stejným krokovadlem jako u data a hodiny. */
.okno { display: flex; align-items: center; gap: 8px }
.okno .krok { display: inline-flex; align-items: stretch }
.okno .krok button {
  padding: 7px 10px; font-size: 14px; line-height: 1; color: var(--text2);
  background: var(--karta2); border: 1px solid var(--ram2);
}
.okno .krok button:first-child { border-radius: var(--radius-tlacitko) 0 0 var(--radius-tlacitko) }
.okno .krok button:last-child { border-radius: 0 var(--radius-tlacitko) var(--radius-tlacitko) 0 }
.okno .krok button:hover { color: var(--akcent); border-color: var(--akcent) }
/* Pevná šířka, ať pruh pod tabulí neposkakuje mezi „10 min" a „24 h". */
.oknoText {
  display: flex; align-items: center; justify-content: center;
  min-width: 4.2em; padding: 7px 10px; font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text);
  background: var(--karta2); border: 1px solid var(--ram2);
  border-left: none; border-right: none;
}

/* «kolik mi to trvá dojít» — posouvá hranici „jdi teď" tam, kam u téhle
   zastávky patří; při nule se tabule chová jako bez toho.

   Vlastní řádek pod datem, ve stejném sloupci jako ono: v pruhu pod tabulí
   stála až za tím, co mění, a `margin-left: auto` ji tam odsazoval doprava
   ke druhé straně karty. */
.walk { display: flex; align-items: center; gap: 7px; margin-left: auto; font-size: 13px }
.walk input {
  font: inherit; font-size: 13px; width: 3.4em; padding: 5px 8px;
  background: var(--karta); border: 1px solid var(--ram); border-radius: var(--radius-ovladac);
  color: var(--text); text-align: right; font-variant-numeric: tabular-nums;
}
.walk .unit { font-size: 12px; color: var(--text2) }
/* Zvoneček před popiskem. Ztlumený stejně jako zvonek u spoje, na který se
   zatím nehlídá (.zvon výš) — je to značka, ne tlačítko, takže nesmí lákat
   k ťuknutí. Záporný okraj mu zúží mezeru k slovu „CHŮZE": patří k němu, ne
   k okénku vlevo. */
.walk .zvonek { font-size: 13px; line-height: 1; filter: grayscale(1); opacity: .55; margin-right: -3px }

/* Vlastní banner dole — vlastní soubor, ne reklamní síť (viz index.html) */
.reklama {
  display: block; border: 1px solid var(--ram); border-radius: var(--radius);
  overflow: hidden; background: var(--karta); box-shadow: var(--stin);
}
.reklama img { display: block; width: 100%; height: auto }
.reklama:hover { border-color: var(--akcent) }

.note { font-size: 12px; color: var(--text3); text-align: center; padding: 0 8px; line-height: 1.6 }
.note a { color: var(--text2) }
/* Počet návštěv pod adresou. Menší a tišší než patička sama — je to údaj
   o webu, ne o odjezdech, a nemá přetahovat pozornost. */

/* ─────────── stránky zastávek (generuje .scripts/zastavky.mjs) ─────────── */

/* Statické stránky mimo appku: seznam zastávek města a stránka jedné zastávky.
   Sdílejí paletu i kartu, ale žádný JavaScript — musí být čitelné samy o sobě. */
.zastavka { padding: 20px 22px 24px }
.zastavka h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px }
.zastavka h3 { font-size: 14px; font-weight: 600; margin: 22px 0 8px; color: var(--text2) }
/* Bez čtecí šířky (bývalo `max-width: 62ch`): odstavec na těchhle stránkách je
   z větší části výčet čísel linek, ne souvislý text — mezera vpravo vypadala
   jako chyba sazby a nic nezlepšovala. */
.zastavka .uvod { font-size: 14px; color: var(--text2); line-height: 1.6; margin-bottom: 10px }
.zastavka .pick { margin-top: 6px }

.linky { list-style: none; margin-top: 4px }
.linky li { padding: 9px 0; border-top: 1px solid var(--ram2); font-size: 14px }
.linky li:first-child { border-top: none }
.linky strong {
  display: inline-block; min-width: 34px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.linky .druh { color: var(--text3); font-size: 12.5px }

/* Nadpis a tlačítko zpět na jedné řádce. Tlačítko stálo pod úvodní větou
   a odsouvalo seznam o dva řádky níž; vpravo vedle nadpisu nezabírá nic.
   Na úzkém displeji se zalomí pod nadpis, ne že by se zmáčklo. */
/* Odsazení pod sebou nese řádka, ne nadpis v ní: tlačítko je vyšší než text
   nadpisu, takže spodní okraj `h2` mizel pod tlačítkem a odstavec začínal
   těsně pod ním. */
.zahlavi {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
}
.zahlavi h2 { margin-bottom: 0 }
.zahlavi .pick { margin-top: 0 }

/* Abeceda nad seznamem zastávek: čtverečky vedle sebe, skok dolů na písmeno.
   Je to jediná část té stránky pro člověka — zbytek je výpis odkazů pro
   vyhledávač. Třída nesmí být `.rada`, tu má appka obsazenou pruhem ikon
   u karet míst (`.mista .rada`). */
.abeceda { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px }
.abeceda a {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 6px;
  border: 1px solid var(--ram2); border-radius: 8px;
  color: var(--text2); text-decoration: none; font-size: 14px; font-weight: 600;
}
.abeceda a:hover { color: var(--akcent); border-color: var(--akcent) }

/* Seznam zastávek města: u Prahy 1375 položek, proto do sloupců — na jeden
   sloupec by z toho byl kilometr rolování. */
.zastavky { list-style: none; margin-top: 14px; columns: 2; column-gap: 24px }
.zastavky li { break-inside: avoid; padding: 5px 0; font-size: 14px }
.zastavky a { color: inherit; text-decoration: none }
.zastavky a:hover { color: var(--akcent) }
/* Doména pod patičkou — na rozcestníku i na tabuli města stejná.
   Bydlí tady, ne v inline stylu rozcestníku, aby ji měly obě stránky. */
.note .domena { display: block; margin-top: 4px; color: var(--text2); font-weight: 600 }

/* Pruh na uzavřený test v Google Play. Stojí v toku, a to schválně: je v HTML
   od prvního vykreslení, takže nemá co posunout, a sazbou tedy nehne (CLS).
   Nabídka instalace na plochu, která tu stála do 28. 8., to měla obráceně —
   přicházela až s událostí od prohlížeče a musela se proto z toku vyjmout.

   Podklad je `--akcent-tlum`, tedy tlumená modrá, ne plný akcent. Plným
   akcentem to bylo do 28. 8. a svítilo to — pruh přes celou šířku v barvě
   všeho klikacího vypadal jako obří tlačítko. Tohle je táž úvaha, jaká stojí
   u `--vyzva` výš: barva má odlišit, ne křičet.
   Odliší i tak, protože `--akcent-tlum` se nerovná ani `--pozadi`, ani
   `--karta`. Do akcentu je obarvená jen pobídka a šipka, tedy to, na co se
   ťuká; otázka před nimi zůstává v `--text`.

   Ostré rohy, ne zaoblené. Karty na stránce mají `--radius` a zaoblený pruh
   by mezi ně zapadl jako další z nich — hrana ho odděluje jako pásku navrch.

   V nainstalované appce se schovává — kdo ji má, nemá ji proč stahovat.
   `display-mode: standalone` chytá PWA na ploše i TWA z Play, tedy oba
   způsoby, jak se sem dá dostat mimo prohlížeč. */
.pruhPlay {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--akcent-tlum); color: var(--text);
  border-radius: 0;
  padding: 10px 40px;
  font-size: 13px; line-height: 1.4; text-align: center;
}
.pruhPlay[hidden] { display: none }
.pruhPlay a { color: inherit; text-decoration: none }
.pruhPlay strong { color: var(--akcent); font-weight: 700 }
.pruhPlay .sipka { color: var(--akcent); font-weight: 700 }
.pruhPlay a:hover strong { text-decoration: underline }

/* Křížek leží nad pruhem, ne v jeho řádku: v toku by odsunul text z osy a
   pobídka by seděla nakřivo. Vodorovné odsazení pruhu je proto na obou
   stranách 40 px, aby text na křížek nedosáhl ani na úzkém displeji. */
.pruhPlay .zavri {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--text3); font-size: 14px; line-height: 1;
  padding: 8px 10px;
}
.pruhPlay .zavri:hover { color: var(--text) }

@media (display-mode: standalone) { .pruhPlay { display: none } }

@media (max-width: 440px) {
  body { padding: 14px 10px 24px }
  /* U Prahy 1375 položek: na úzkém displeji se dva sloupce nevejdou. */
  .zastavky { columns: 1 }
  .masthead h1 { font-size: 20px }
  .bhead { padding: 15px 15px 12px }
  .bhead h2 { font-size: 19px }
  .dirs { padding-left: 15px; padding-right: 15px }
  /* Týž sloupec jako ostatní bloky karty — okno a chůze mají mezeru po stranách
     z vlastního `margin`, ne z odsazení pruhu, který pod tabulí už není. */
  .ovladace, .kdy { margin-left: 15px; margin-right: 15px }
  .dep { padding: 12px 15px; gap: 11px }
  .wire { margin-left: 15px; margin-right: 15px }
  /* Krokovadlo je na dotek. Šipka nad šipkou měří na výšku šestnáct pixelů,
     tedy třetinu prstu — a kdo mine, netrefí nic neškodného: v řádku nad tím
     visí hvězdička a „← Zastávky", takže místo posunu o hodinu vypadneš
     z tabule nebo si přidáš oblíbenou.

     Políčko proto na úzkém displeji povyroste (obě šipky s ním, drží je
     `flex: 1`) a odsadí se od hlavičky. Dvaadvacet pixelů na šipku pořád není
     doporučovaných čtyřicet čtyři, ale ta se v ovladači o třech políčkách
     vedle sebe nedají mít; zbytek dělá ta mezera nad ním. */
  #tabuleKdy { margin-left: 15px; margin-right: 15px }
  .kdy .hodnota { padding: 12px }
  .kdy .sipky button { padding: 0 12px }
  .kdy .cas { gap: 6px }
}