/* ====================================================================
   lista.css — HLAVIČKA, KTERÁ JE VŠUDE STEJNÁ.

   Načítá ji appka (`index.html`) i každá statická stránka (generuje ji
   `.scripts/layout.mjs`). Dokud byl pruh dvakrát — jednou ve `style.css`
   a jednou v `blog.css` — vypadala hlavička na článku jinak než v appce:
   jiné odsazení, jiné písmo značky, odkazy bez ikon a bez karet. Po
   prokliku z faktury na článek se lišta přeskládala a návštěvník ztratil
   orientaci.

   Obsah nabídky drží `src/menu.ts`, tenhle soubor jen její vzhled.
   Nástroje appky (zámek, nastavení) zůstávají ve `style.css` — na článku
   nemají co dělat.
==================================================================== */
:root {
  --cyan: #1fafd6;
  --bar: #131f25; /* vrchní pruh — tmavý protiklad papírové šedi pod ním */
  --bar-tabs: #0e171c; /* žlábek, ze kterého vystupuje činná karta */
  --bar-ink: #e6eef1;
  --bar-muted: #93a8b1;
  /* Patička si linku kreslí sama; `style.css` i `blog.css` si `--line`
     předefinují po svém, tohle je jen výchozí hodnota, aby pravidlo
     fungovalo i bez nich. */
  --line: #d8d8d8;
  --page-w: 1000px;
}

/* ── vrchní pruh ───────────────────────────────────────────────────
   Značka vlevo, nastavení vpravo. Tmavý, ne papírově šedý jako zbytek
   stránky: odděluje ovládání od dokumentu, do kterého se píše — na šedé
   splývala lišta s okrajem faktury a nebylo poznat, kde končí appka
   a začíná papír.

   Přes celou šířku okna (záporné okraje ruší postranní `padding` body),
   vnitřek na šířku faktury. Pruh užší než okno by vypadal jako další
   kartička na ploše, ne jako hlavička appky. */
.toolbar {
  margin: 0;
  padding: 10px 12px;
  /* Vlastní řádkování: článek má tělo na 1.65, appka na 1.35, a bez tohohle
     by byla hlavička na webu o čtyři pixely vyšší než v appce. */
  line-height: 1.35;
  background: var(--bar);
  /* Cyanová linka dole: tmavý pruh jinak přechází rovnou do bílého listu
     a hrana vypadá jako uříznutá. Linka je táž barva jako značka. */
  border-bottom: 2px solid var(--cyan);
  color: var(--bar-ink);
}
/* Titulek a pás karet pod ním — skladba panelu nástrojů: název aplikace nahoře,
   oddíly dokumentu jako karty dole. Karty nejsou ozdoba, jsou to odkazy na dva
   oddíly stránky (faktura a přehled), takže na dlouhé stránce nahrazují rolování.
   Činná karta má barvu titulku a vystupuje ze tmavšího žlábku — tak se pozná
   karta bez toho, aby se musela obtahovat. */
.tabs {
  margin: 8px -12px -10px;
  padding: 0 12px;
  background: var(--bar-tabs);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.tabs .in {
  max-width: var(--page-w);
  margin: 0 auto;
  display: flex;
  gap: 2px;
  /* Popisky se na telefon nevejdou — tam z lišty zbývají ikony (viz oddíl
     „mobil"). Rolování UVNITŘ SEBE tu zůstává jako pojistka pro zvětšené
     systémové písmo a pro delší nabídku: stránka se vodorovně rolovat nesmí,
     uživatel do ní píše a pole by mu ujížděla pod prstem. `scrollbar-width:
     none` schová pruh, který by na dotykovém zařízení stejně nikdo netáhl. */
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs .in::-webkit-scrollbar {
  display: none;
}
.tabs a {
  /* `flex: none` je tu schválně: při přetečení se nesmí smrsknout položka,
     jinak se ikona ořízne. Jediné pravidlo pro `.tabs a` — dvě za sebou už
     jednou uspala test, který četl to první a prázdné. */
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  color: var(--bar-muted);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
/* Svislá linka mezi kartami dokladu a nabídkou webu. Nalevo se přepínají
   pohledy téže appky, napravo se odchází na jiné stránky — a to je rozdíl,
   který má být vidět dřív, než na odkaz někdo klikne.

   NENÍ to `.del`: tak se jmenuje mazací křížek u položky faktury a `style.css`
   ho na mobilu přibíjí do pravého horního rohu (`position: absolute; right: 0`).
   Oddělovač v liště tím odlétal z řady doprava a mezi Šanonem a Blogem chyběl. */
.tabs .predel {
  align-self: center;
  /* Bez `flex: none` se linka na úzké liště SMRSKNE NA NULU: odkazy se
     smršťovat nesmí (`.tabs a { flex: none }`), takže při přetečení ubere
     šířku prohlížeč jedinému prvku, který mu to dovolí — právě jí. */
  flex: none;
  width: 1px;
  height: 18px;
  margin: 0 8px;
  background: rgba(255, 255, 255, 0.16);
  /* Na širokém displeji se linka nekreslí: popisky tam mají všechny položky
     a nabídka má číst jako jedna řada. Hranici mezi kartami dokladu
     a nabídkou webu nese MEZERA (níž) — na telefonu, kde jsou z položek
     holé ikony, se linka vrací. */
  display: none;
}
.tabs .predel + a {
  margin-left: 16px;
}
/* Jedna velikost ikony pro široký displej i telefon: dvě sady rozměrů
   znamenaly dvě místa k ladění a rozdíl stejně nikdo neocenil. */
.tabs a svg {
  width: 28px;
  height: 28px;
}
.tabs a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--bar-ink);
}
.tabs a.on {
  background: var(--bar);
  color: #fff;
}
.tabs a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}
.toolbar .bar {
  max-width: var(--page-w);
  margin: 0 auto;
  /* Výška podle tlačítek appky (zámek a nastavení, 34 px). Statická stránka
     je nemá, a bez tohohle by měla hlavičku o dva pixely nižší — po prokliku
     z faktury na článek by lišta poskočila. */
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
}
/* Manrope veze jen osm znaků slova „QRFaktura" (1,4 kB, podmnožina z Google
   Fonts, OFL). Jinde v appce se nepoužívá — faktura má systémové písmo, aby
   vypadala jako doklad, ne jako web. Když se značka přejmenuje, podmnožinu je
   nutné stáhnout znovu, jinak chybějící znaky spadnou na náhradní písmo:

     https://fonts.googleapis.com/css2?family=Manrope:wght@800&text=QRFaktura

   Soubor je vlastní, cizí origin by CSP stejně nepustila.

   Řez 800, ne 700: Manrope je měkký geometrický grotesk s otevřenými kresbami
   a na sedmnácti pixelech v tmavém pruhu se sedmistovka čte spíš jako
   polotučná. Osmistovka drží tíhu, jakou měl předchozí Bricolage Grotesque. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("manrope.woff2") format("woff2");
}
/* Značka a podtitulek pod ní ve sloupci vedle ikony. Řádkování je vlastní
   a těsné: dva řádky se musí vejít do výšky pruhu, aby hlavička nevyrostla. */
.brand .jmeno {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand b {
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 800;
  /* Manrope má kulaté kresby a mezi nimi víc vzduchu než Bricolage, takže
     stažení je dvojnásobné — jinak by slovo v pruhu vypadalo rozvolněně. */
  letter-spacing: -0.02em;
}
/* „QR" cyanem, zbytek inkoustem pruhu. Předěl řekne, že název je složenina,
   aniž by se do něj musela dát mezera (rozpadl by se na dvě slova) nebo druhý
   řez (podmnožina by vezla dva). Sada glyfů se nemění, takže zůstává i
   `manrope.woff2`. Cyan na `--bar` má kontrast 6,5 : 1 — nad hranicí
   AA i pro drobný text, takže zkratka nezůstane jen ozdobou pro ostrý zrak. */
.brand b .qr {
  color: var(--cyan);
}
/* Podtitulek říká, co ta appka je, tomu, kdo přišel na článek z vyhledávače
   a značku nezná. Tlumený a drobný — je to vysvětlivka, ne nadpis. */
.brand small {
  color: var(--bar-muted);
  font-size: 10.5px;
  letter-spacing: 0.01em;
}

/* Ozubené kolečko místo slova „Nastavení": v pruhu je jediné tlačítko, takže
   se nemá s čím splést, a na telefonu nezabere půl řádku. Popisek zůstává
   v `title` a `aria-label`. */
.iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--bar-muted);
  cursor: pointer;
}
.iconbtn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--bar-ink);
}
/* Zámek a nastavení vedle sebe; mezera je menší než mezi značkou a nimi. */
.nastroje {
  display: flex;
  align-items: center;
  gap: 2px;
}
.iconbtn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Značka je na statických stránkách odkaz do appky, v appce jen popisek —
   klikat na ni tam není kam. */
a.brand {
  color: var(--bar-ink);
  text-decoration: none;
}

/* Táž hranice jako v appce: mobilní rozvržení nesmí na papír (A4 je v CSS
   794 px, takže `(max-width: 820px)` bez `screen` platí i pro tisk). */
@media screen and (max-width: 820px) {
  /* ── lišta na telefonu: ikony a jeden popisek ─────────────────────
     S popisky se šest položek na 360px displej nevejde a poslední dvě
     zůstanou za okrajem. Krátit nabídku ale nechceme, takže z ní zbývají
     IKONY — a popisek si nese jen ta položka, na které zrovna stojíte
     (`.on`), plus ta, kterou má uživatel právě pod prstem (`:active`).
     Díky tomu je pořád vidět, KDE jsem, a čeho se právě dotýkám.

     Popisek se přitom nemaže, jen odklízí z plochy: `display: none` by
     odkazu vzal přístupné jméno a čtečka by hlásila holý obrázek. */
  .tabs .popis {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tabs a.on .popis,
  .tabs a:active .popis,
  .tabs a:focus-visible .popis {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
  /* Lišta si na telefonu bere i okraje, které na širokém displeji drží
     zarovnání se značkou. Těch dvakrát šest pixelů je přesně to, co chybí,
     aby se šest ikon s většími rozestupy vešlo na 360px displej. */
  .tabs {
    padding: 0 3px;
  }
  .tabs a {
    /* Bez popisku je mezera mezi ikonou a textem k ničemu a ukusovala by
       z dotykové plochy. Odsazení po stranách je naopak to jediné, co ikony
       od sebe odděluje, a je svázané s jejich velikostí: při ikoně 28 px
       je na 360px displeji strop deset pixelů (naměřeno: obsah končí na
       350 z 354 dostupných). Kdo zvětší ikonu, musí odsazení ubrat —
       jinak poslední položka spadne za okraj a dá se jen vyrolovat.

       Na 320px displeji (iPhone SE první generace) se šest položek nevejde
       tak jako tak; tam pomůže rolování lišty uvnitř sebe. */
    gap: 0;
    padding: 11px 9px;
    /* Popisek nese jen činná položka a je proti širokému displeji o něco
       menší — těch pár pixelů rozhoduje o tom, jestli se poslední ikona
       vejde na 360px displej. */
    font-size: 12px;
  }
  .tabs a.on,
  .tabs a:active,
  .tabs a:focus-visible {
    gap: 6px;
  }
  /* Bez podbarvení: činnou položku pozná uživatel podle toho, že jako
     jediná nese popisek, a bílá ikona to potvrdí. Blok jiné barvy pod
     ikonou k tomu nic nepřidával — na úzké liště vypadal spíš jako vada
     vykreslení a při ťuknutí probliknul i na odkazech, ze kterých se
     stejně odchází jinam. */
  .tabs a.on,
  .tabs a:hover,
  .tabs a:active {
    background: none;
  }
  /* Ikony bez popisků splývají v jednu řadu, takže je od sebe odděluje
     linka — jinak není poznat, kde končí jedno tlačítko a začíná druhé.
     Je slabší než `.predel`: ta dělí karty appky od nabídky webu a ten rozdíl
     má zůstat čitelnější než mřížka mezi ikonami. */
  .tabs a + a {
    position: relative;
  }
  .tabs a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 18px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
  }
  /* Hranice mezi kartami dokladu a nabídkou webu se teď musí poznat i vedle
     linek mezi ikonami — nese ji tedy MEZERA navíc, ne jen jasnější linka. */
  .tabs .predel {
    display: block;
    margin: 0 5px;
  }
  .tabs .predel + a {
    margin-left: 0;
  }
}

/* ── patička ──────────────────────────────────────────────────────
   Táž na článku i v appce: stejné znění, stejná šířka jako sloupec textu
   (`.clanek` má 44rem). Přes celou stránku byla řádka dlouhá přes sto
   znaků a oko na jejím konci nenašlo začátek dalšího řádku. */
/* ── patička ──────────────────────────────────────────────────────── */
.pata {
  max-width: 44rem;
  margin: 0 auto;
  padding: 22px;
  line-height: 1.6;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.pata p {
  margin: 0 0 6px;
}
.drobne {
  font-size: 12.5px;
}
.stav {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.stav.dobre,
.stav-shrnuti.dobre,
td.dobre {
  color: #1a7f4b;
}
.stav.spatne,
.stav-shrnuti.spatne,
td.spatne {
  color: #b23c17;
}

/* Hlavička ani patička nejsou obsah — z papíru pryč. */
@media print {
  .toolbar,
  .pata {
    display: none !important;
  }
}