/* rozcestnik.css — vzhled rozcestníku (site/index.html).
 *
 * Do 21. 8. to byl vložený <style> uvnitř šablony v app/.scripts/mesta.mjs.
 * Vyhodila ho CSP: `style-src 'self'` vložený blok zablokuje, takže se
 * rozcestník v náhledu vykreslil úplně bez stylů (ikony vozů přes půl
 * obrazovky). Hashovat blok jako u skriptů by šlo, jenže hash se mění
 * s každou úpravou stylu a musel by se ručně přenášet do Caddyfile —
 * soubor je proti tomu zadarmo a navíc se dá editovat jako CSS.
 *
 * Patří jen na kořen webu, ne do měst: appka má vlastní style.css a tenhle
 * soubor by v každém městě ležel nevyužitý (mesta.mjs ho z kopie maže).
 * Odkazuje se bez ?v= — stejně jako style.css na rozcestníku, viz Caddyfile.
 */
/* Papír a panel — rozcestník stojí na světlejší ploše než appka sama.

   Deset položek na prázdném pozadí se rozpadalo do stran; rám je drží
   pohromadě a dává stránce střed. Odstín je o stupeň jinam než plocha
   appky, ne o polovinu: kdyby byl rozdíl velký, začal by panel vypadat
   jako karta v kartě, a přesně tomu se dlaždice vyhýbají.

   Ve světlém je poměr obrácený, jako všude v paletě — papír tmavší, panel
   světlejší. Prohodit to znamená obrátit i význam: panel má být ten
   popředí, ať je vzhled jakýkoli. */
/* V tmavém vzhledu panel stín nemá. Stín je černá na podkladu, a když je
   podklad sám skoro černý, nevznikne hloubka, ale šmouha kolem rohů —
   přesně to bylo na rámu vidět. Panel tam odděluje rozdíl odstínů a rám;
   ve světlém stín smysl má, tam se čte jako zvednutí nad papír. */
:root { --papir: #0d1219; --panel-stin: none }
:root[data-tema='svetlo'] {
  --papir: #eceff4;
  --panel-stin: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
}
/* Tělo na sloupec: panel a patička pod ním. Ve style.css je body vodorovný
   střed jediného sloupce (shell), tady jsou prvky dva. */
body { background: var(--papir); flex-direction: column; align-items: center }
.note { width: 100%; max-width: 640px; margin-top: 14px }
/* Otevřený „Moje cesta" přebírá obrazovku i tady. Hlavní pravidlo nese
   `.shell.jenMujJr` ve style.css, jenže patička stojí na rozcestníku **mimo**
   shell (viz `body` výš) — bez tohohle by pod zavřeným seznamem měst zůstala
   viset sama. */
body:has(> .shell.jenMujJr) > .note { display: none }
/* A obrazovka to má být celá, tedy i tvarem. Rozcestník stojí na světlejším
   papíru a jeho obsah drží rám — deset položek na prázdném pozadí se rozpadá
   do stran. Uložené cesty ale nejsou seznam měst: je to táž obrazovka jako
   v appce, kde žádný rám kolem obsahu není a pozadí je o stupeň tmavší. Rám
   kolem ní by z panelu udělal kartu v kartě, což je přesně to, čemu se
   dlaždice vyhýbají. */
/* A nahoru, ne doprostřed. `body` má ve `style.css` `justify-content: center`
   pro vodorovný střed jediného sloupce; tady je ale směr `column`, takže táž
   vlastnost centruje **na výšku**. U seznamu měst to není vidět — je vyšší než
   obrazovka —, kdežto samotný panel se odlepil od horního okraje a hlavička
   odplula doprostřed. */
body:has(> .shell.jenMujJr) { background: var(--pozadi); justify-content: flex-start }
.shell.jenMujJr { background: none; border-color: transparent; box-shadow: none; padding: 0 }
/* Titulek stojí na rozcestníku uprostřed, protože ho nic nedoprovází. Jakmile
   pod ním přibude „Moje cesta", je to dvouřádkový blok — a vycentrovaný
   vypadá jako titulní strana, ne jako hlavička obrazovky. Táž mřížka jako
   `.masthead.app` ve style.css; třídou `app` se to udělat nedá, ta znamená
   „hlavička appky", a rozcestník appka není. */
.shell.jenMujJr .masthead { grid-template-columns: 1fr auto }
.shell.jenMujJr .masthead h1 { grid-column: 1; text-align: left }
.shell.jenMujJr .masthead .vpravo { grid-column: 2 }

/* Značka v levém sloupci hlavičky, do 29. 8. prázdném. Blokový obrázek, ať pod
   ním nezbude mezera po účaří řádku. 34 px sedí k titulku o 26 px — kotouč
   značky je opticky menší než jeho krabice, takže stejná výška jako u písma by
   vypadala drobně. */
.masthead .znacka { grid-column: 1; justify-self: start; display: block; width: 34px; height: 34px }
/* V panelu „Moje cesta" mřížka spadne na dva sloupce a titulek se stěhuje do
   prvního — značka by mu seděla pod nohama. */
.shell.jenMujJr .masthead .znacka { display: none }
.shell {
  background: var(--pozadi);
  border: 1px solid var(--ram);
  border-radius: 18px;
  padding: 18px 18px 20px;
  box-shadow: var(--panel-stin);
}
/* Na telefonu se rám ztenčí, ať mu obsah neplatí dvojí odsazení: tělo
   stránky má svoje a panel by přidal další. */
@media (max-width: 430px) {
  .shell { padding: 14px 12px 16px; border-radius: 14px }
  /* Titulek jde na 20 px (style.css), značka s ním — jinak by ho přerostla. */
  .masthead .znacka { width: 28px; height: 28px }
}
/* Jeden sloupec, ne mřížka. Města byla po dvou vedle sebe, aby se jich
   šest vešlo na obrazovku — jenže vedle nich stojí sedmdesát dva obcí
   s MHD, a ty jsou seznam. Dva tvary nad sebou (mřížka a pod ní seznam)
   dělaly ze skupiny dvě různé věci, ačkoli se v obou vybírá město podle
   jména. Řádky jsou tedy všude; nahoře zůstávají karty pro čtyři volby,
   které pokrývají republiku.

   Jedno <ul> zůstává schválně: skript rozcestníku řadí připnuté nahoru
   mezi nadpisy a druhý seznam by mu tu logiku rozpůlil. */
.mesta {
  list-style: none; display: grid; gap: 9px;
  grid-template-columns: minmax(0, 1fr);
}
/* Nadpis skupiny. Je to <li> kvůli platnému <ul>, ale chová se jako
   popiska — proto nereaguje na najetí myší a nemá odkazovou výšku. */
/* Podklad i předěl se přepisují výslovně: třída .skupina je ve style.css
   nadpisem skupiny na tabuli a nese obojí. Bez přebití z toho tady byly
   šedé pruhy přes celou šířku. */
/* Nadpis na střed. U levého okraje stál nad sloupcem řádků, které začínají
   jménem města — dvě věci pod sebou u téže hrany, z nichž jedna je popiska
   a druhá volba. Uprostřed se čte jako předěl, ne jako první položka. */
.mesta li.skupina { padding: 12px 2px 0; color: var(--text3); text-align: center }
.mesta li.skupina:first-child { padding-top: 2px }
/* Tlačítko má tvar řádku, ne pilulky. Pilulka byla drobný ovál nalevo pod
   sloupcem širokých řádků a působila jako štítek, na který se nekliká;
   tvar řádku říká „tady seznam pokračuje". Podklad zůstává prázdný a rám
   tečkovaný, aby se to pořád četlo jako ovladač, ne jako další město. */
.mesta li.skupina.vic { padding: 2px 0 0 }
.mesta li.skupina.vic button {
  /* Tučné výslovně: dokud typografii nesl li.skupina, dědilo se sem
     font-weight 600 přes button { font: inherit } ve style.css. Nadpis ji
     teď má z .eyebrow, kterou tenhle řádek nemá — a beze změny by
     tlačítko zhublo. */
  width: 100%; padding: 9px 13px; font-size: 13px; font-weight: 600; color: var(--text2);
  border: 1px dashed var(--ram); border-radius: 12px; background: none;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mesta li.skupina.vic button:hover { color: var(--akcent); border-color: var(--akcent) }
/* Dvě třídy, ne jedna: pravidlo pro dlaždici níž má stejnou specificitu
   a stojí v souboru za tímhle, takže samotná třída obecmhd prohrála
   a sedmdesát dva obcí se ukazovalo i sbalených. */
.mesta li.dlazdice.obecmhd { display: none }
.mesta.rozbaleno li.dlazdice.obecmhd { display: flex }
/* Připnuté nebo výchozí město je vidět i ve sbaleném seznamu. Bez tohohle
   by se hvězdička dala zmáčknout, ale schovala by to, co má vytáhnout
   nahoru — a domeček by mlčky přesměrovával na město, které v seznamu
   není vidět. */
.mesta li.dlazdice.obecmhd.vytazena { display: flex }

/* Společné oběma tvarům: karta s rámem místo řádku s předělem. */
.mesta li.velka, .mesta li.dlazdice {
  display: flex; min-width: 0;
  background: var(--karta); border: 1px solid var(--ram); border-radius: 12px;
}
.mesta li.velka:hover, .mesta li.dlazdice:hover { border-color: var(--akcent) }
.mesta a { color: inherit; text-decoration: none; min-width: 0 }
.mesta a:hover .mesto { color: var(--akcent) }
.mesta .mesto { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em }
/* Přívlastek „MHD" jen na připnuté kartě nahoře — v seznamu by z něj byl
   sloupec téhož slova před každým jménem. Píše ho jmeno() v mesta.mjs. */
.mesta .pre { display: none }
.mesta li.dlazdice.pripnuta .pre { display: inline }

/* Karta nahoře: vůz vlevo, jméno vedle něj, ovládání vpravo. Týž tvar mají
   připnutá města, viz pravidlo pripnuta níž. */
.mesta li.velka, .mesta li.dlazdice.pripnuta { align-items: center; padding: 13px 14px }
.mesta li.dlazdice.pripnuta { flex-direction: row }
.mesta li.velka a, .mesta li.dlazdice.pripnuta a {
  flex: 1; display: flex; align-items: center; gap: 13px; min-width: 0;
}
.mesta .vuz {
  flex: none; width: 42px; height: 42px; border-radius: 11px;
  background: var(--akcent-tlum); display: flex; align-items: center; justify-content: center;
}
.mesta .vuz svg { width: 23px; height: 23px; color: var(--akcent); display: block }
.mesta li.velka .mesto, .mesta li.dlazdice.pripnuta .mesto { font-size: 17.5px; min-width: 0 }

/* Připnuté město. Hvězdička ho vytáhne nahoru a dá mu tvar velké karty —
   to je celý její smysl: kdo v Pardubicích bydlí, má je mít mezi hlavními
   volbami, ne jako první z dvaadvaceti dlaždic. Popis a počet zastávek se
   přitom schovají, protože nahoře jsou jména, ne odstavce; vůz naopak
   vyjede, ten v dlaždici jinak jen zabírá místo. */
.mesta li.dlazdice .vuz { display: none }
.mesta li.dlazdice.pripnuta .vuz { display: flex }
.mesta li.dlazdice.pripnuta .nastroje { margin-top: 0; padding-top: 0; border-top: none }

/* MĚSTO = ŘÁDEK: jméno vlevo, dvě ikony vpravo. Dřív to byla dlaždice
   s textem nad sebou a ovládáním na vlastním řádku dole; ve dvou sloupcích
   to dávalo smysl, v jednom by z každého města byly tři řádky a ze šesti
   měst půl obrazovky. */
.mesta li.dlazdice { flex-direction: row; align-items: center; padding: 9px 13px }
.mesta li.dlazdice a {
  flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0;
}
.mesta li.dlazdice .mesto { font-size: 15.5px }
.mesta li.dlazdice .nastroje { margin-top: 0; padding-top: 0; border-top: none }

.mesta .nastroje { display: flex; align-items: center; gap: 2px; flex: none }
.mesta .fav { padding: 2px 8px; font-size: 17px; color: var(--text3) }
.mesta .fav:hover, .mesta .fav[aria-pressed="true"] { color: var(--akcent) }
/* Domeček = výchozí město. Nesvítí, dokud není nastavený, ať dva
   ovládací prvky nesoupeří o pozornost s názvem města. */
.mesta .dom { padding: 2px 6px; color: var(--text3); display: flex; align-items: center }
.mesta .dom svg { width: 17px; height: 17px; display: block }
.mesta .dom:hover, .mesta .dom[aria-pressed="true"] { color: var(--akcent) }


/* ─────────── zásady soukromí (/privacy.html) ─────────── */

/* Jediná stránka na webu, která je souvislý text. Karta i nadpisy jsou
   `.zastavka` ze style.css, jen odstavce tam nemají tvar: statické stránky
   zastávek mají jediný odstavec a ten nese `.uvod`. Klíčovat jím šest odstavců
   za sebou by bylo lhaní o tom, co ta třída znamená.

   Bydlí to tady, a ne ve style.css, protože rozcestnik.css se servíruje jen
   z kořene webu — a stránka je taky jen tam. Do měst by se to vezlo nevyužité. */
.soukromi p { font-size: 14px; color: var(--text2); line-height: 1.6; margin-bottom: 10px }
.soukromi p:last-child { margin-bottom: 0 }