/* =========================================================================
   Klientská sekce
   -------------------------------------------------------------------------
   Načítá se jen na /clients/*. Tokeny, písma a reset bere ze site.css —
   tenhle soubor přidává výhradně chrome a rozvržení členské části.

   Návrh drží užší mřížku než veřejný web: 1360 px místo 1560, protože
   obsah je hustší a řádek přes celou šířku monitoru se špatně čte.

   POZOR na past ze site.css: bloky, které nesou i třídu .wrap, nesmí mít
   zkratku `padding` — vynulovala by vodorovné odsazení z .wrap a na mobilu
   by text najel na hranu okna. Vždycky padding-top / padding-bottom.
   ========================================================================= */

/* Šířka sekce. Pevných 1360 px nechávalo na širokém monitoru pruh prázdna po
   obou stranách — mřížka teď roste s oknem a strop drží jen proto, aby se
   výpisy nerozpadly do nekonečně širokých řádků. */
.ca {
  --ca-maxw: 2200px;
  /* Paleta se dosud definovala jen na .research. Zvýraznění a karty se ale
     používají i mimo lekci, tak ji sekce nese celá. */
  --r-1: #E8A33D; --r-2: #5FA8D3; --r-3: #6FBF8B; --r-4: #D2706A; --r-5: #9B87D4;
}
.ca .wrap { max-width: var(--ca-maxw); }
/* Analýzy a lekce zůstávají užší než zbytek sekce. Text má sice vlastní míru,
   ale grafy a tabulky by se do 1360 px roztáhly a přestaly být čitelné. */
.ca .research .wrap { max-width: 1240px; }
/* Čtecí stránky se nenatahují s oknem. Mřížky ano — u výpisu se šířka zaplní
   dalšími kartami, u textu by se zaplnila jen delšími řádky, a ty se čtou hůř.
   Na ultraširokém monitoru je proto rozdíl mezi výpisem a lekcí záměrný. */
.ca .research--kurz .wrap { max-width: 1560px; }

/* --- Hlavička ------------------------------------------------------------ */

.ca-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.ca-nav__inner {
  max-width: var(--ca-maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 72px;
}
.ca-brand {
  flex: none;
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink);
  border: 0;
}
.ca-brand:hover { color: var(--ink); opacity: 0.85; }

.ca-nav__panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ca-nav__links { display: flex; align-items: center; gap: 4px; }
.ca-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 24px 12px;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-2);
  border: 0;
  transition: color 160ms ease;
}
.ca-nav__link:hover { color: var(--ink); }
.ca-nav__link[aria-current="page"] { color: var(--ink); }
/* Podtržení jen u aktivní položky, těsně nad spodní linkou hlavičky. */
.ca-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}
.ca-nav__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.ca-nav__right { display: flex; align-items: center; gap: 12px; }
.ca-search,
.ca-user {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line-frame);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.ca-search:hover,
.ca-user:hover { color: var(--ink); border-color: var(--line-accent); }

/* Ztlumený zvuk. Stav musí být poznat i bez čtení popisku — a přeškrtnutí
   nese význam samo o sobě, na rozdíl od pouhé změny barvy, kterou člověk
   bez druhého tlačítka vedle nemá s čím srovnat. */
.ca-zvuk[aria-pressed="false"] {
  color: var(--ink-3, var(--ink-2));
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.7;
}

/* Přepínač je vidět až ve složené liště; do té doby zabírá místo zbytečně. */
.ca-nav__toggle { display: none; }

/* **Lišta se skládá podle měření, ne podle šířky okna.** Rozhodovalo o tom
   `@media (max-width: 1080px)` — a to číslo je odhad o obsahu, který se mění
   pod rukama. Anglická lišta má delší položky, hodnost může být „Augustus"
   místo „Tiro", úroveň trojmístná a jméno v tlačítku dlouhé; v nejhorší
   uvěřitelné kombinaci potřebuje řádek **1410 px**, tedy skoro o čtyři sta
   víc, než kde se skládal. Mezi 1080 a 1410 px proto čip vytékal z lišty —
   na 1280 px v angličtině o 113 px — a jakmile přebytek přerostl volný okraj
   kolem `.wrap`, začala se celá stránka posouvat do strany a text u levého
   okraje se ořízl. Nespadlo nic; jen byla useknutá hlavička.

   Rozhoduje proto změřená potřebná šířka řádku (`listaTesno()` v
   `clients.js`), která zvedne `html.ca-tesno`. Číslo v médiu zůstává jedině
   jako záchrana pro prohlížeč bez JavaScriptu, kde se řádek aspoň zalomí. */
@media (max-width: 1080px) {
  html:not(.js) .ca-nav__inner { flex-wrap: wrap; gap: 0; }
}

.ca-tesno .ca-nav__inner { flex-wrap: wrap; gap: 0; }
.ca-tesno .ca-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line-frame);
  cursor: pointer;
}
.ca-tesno .ca-nav__bars { display: block; width: 18px; }
.ca-tesno .ca-nav__bars i {
  display: block;
  height: 1px;
  background: var(--ink);
  margin: 4px 0;
}
/* Bez JS zůstává panel otevřený — navigace je důležitější než úhlednost.
   Skript dokument označí a teprve pak se panel skládá. */
.js.ca-tesno .ca-nav__panel {
  display: none;
  /* `flex: 0 0 100%`, ne `width: 100%`. Základní pravidlo dává panelu
     `flex: 1`, tedy `flex-basis: 0%` — a ta **přebíjí** `width` při výpočtu
     výchozí velikosti flex položky. Panel se proto nezalomil na vlastní
     řádek, zůstal vedle tlačítka menu a to skončilo vlevo uprostřed
     otevřené nabídky, přes položku „Dílna". Změřeno na 390 px; na 375 px
     se to neprojevilo, protože se tam náhodou zalomil čip místo panelu —
     což je na tom nejhorší, rozvržení záviselo na pár pixelech šířky. */
  flex: 0 0 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-bottom: 16px;
}
.js.ca-tesno .ca-nav__panel[data-open] { display: flex; }
.ca-tesno .ca-nav__links { flex-direction: column; align-items: stretch; }
.ca-tesno .ca-nav__link { padding: 14px 0; }
.ca-tesno .ca-nav__link[aria-current="page"]::after { left: 0; right: auto; width: 18px; bottom: 8px; }
.ca-tesno .ca-nav__right { padding-top: 12px; }

/* --- Patička ------------------------------------------------------------- */

.ca-foot {
  margin-top: 80px;
  border-top: 1px solid var(--line);
}
.ca-foot__inner {
  padding-top: 26px;
  padding-bottom: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
}
.ca-foot__legal,
.ca-foot__back {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-foot__legal a,
.ca-foot__back a { color: var(--muted); border: 0; }
.ca-foot__legal a:hover,
.ca-foot__back a:hover { color: var(--accent); }

/* --- Hlavička přehledu --------------------------------------------------- */

.ca-head {
  padding-top: clamp(40px, 6vh, 64px);
  padding-bottom: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}
.ca-head__eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.ca-head__title {
  margin: 0;
  max-width: 30ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* Odznak hodnosti v hlavičce přehledu.
   Na jeho místě býval přepínač zaměření se třemi tlačítky; dvě z nich měla
   v kódu identické pořadí pruhů, takže „Investice“ nedělalo nic. */
.ca-odznak {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--line-frame);
  text-decoration: none;
  transition: border-color 160ms ease;
}
.ca-odznak:hover { border-color: var(--line-accent); }
.ca-odznak__znak {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid rgba(232, 163, 61, 0.3);
}
.ca-odznak__znak svg { width: 26px; height: 26px; }
.ca-odznak__text { display: block; min-width: 168px; }
.ca-odznak__nazev {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.1;
  color: var(--ink);
}
.ca-odznak__lvl,
.ca-odznak__xp {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--muted-2);
}
.ca-odznak__lvl { margin-top: 4px; }
.ca-odznak__lvl b { color: var(--ink-2); font-weight: 500; }
.ca-bar--uzka { display: block; height: 2px; margin: 7px 0 5px; background: var(--line-strong); }
.ca-bar--uzka .ca-bar__fill { display: block; }

/* --- Medailonek --------------------------------------------------------- */

.ca-medal {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 32px 48px;
  padding: 30px 30px 32px;
  background: var(--bg-alt);
  border: 1px solid var(--line-frame);
}
.ca-medal__kdo { display: flex; gap: 24px; align-items: flex-start; }
.ca-medal__znak {
  flex: none;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid rgba(232, 163, 61, 0.35);
}
.ca-medal__znak svg { width: 54px; height: 54px; }
.ca-medal__text { min-width: 0; }
.ca-medal__poradi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ca-medal__sluzba { color: var(--muted-2); }
.ca-medal__nazev {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  color: var(--ink);
}
.ca-medal__kdoje {
  max-width: 46ch;
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-2);
}
.ca-medal__lvl { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.ca-medal__lvl b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  color: var(--accent);
}
.ca-medal__lvl-l {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-medal__pod {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-2);
}
.ca-medal__dalsi {
  margin-top: 20px;
  padding-left: 16px;
  border-left: 1px solid var(--accent);
}
.ca-medal__dalsi-l {
  margin: 0 0 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ca-medal__dalsi-t { margin: 0; font-size: 15px; font-weight: 300; color: var(--ink-2); }

/* Deset dílků, jeden za každou úroveň do další hodnosti. Dělá se to zářezy
   přes výplň, ne deseti elementy — pruh tak zůstane jedno číslo v JS. */
.ca-bar--seg { height: 10px; position: relative; background: var(--line); }
.ca-bar--seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(10% - 5px), var(--bg-alt) calc(10% - 5px) 10%);
}

/* --- Žebříček hodností --------------------------------------------------- */

.ca-zeb-obal { padding-top: 44px; }
.ca-zeb__nadpis {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.ca-zeb__nadpis span {
  margin-left: 14px;
  letter-spacing: 0.12em;
  color: var(--muted-3);
}
/* Jedenáct hodností se do žádného počtu sloupců nevejde beze zbytku, takže
   poslední řádek je vždycky neúplný. Kdyby linky kreslila mřížka pozadím,
   prázdná místa v posledním řádku by se vybarvila taky a četla by se jako
   chybějící dlaždice. Rámeček proto nosí každá dlaždice sama v `outline`,
   který nezabírá místo: v jednopixelové mezeře splynou rámečky sousedů do
   jedné linky a neúplný řádek prostě skončí. */
.ca-zeb {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(124px, 100%), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ca-zeb__item {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 20px 8px 16px;
  background: var(--bg-alt);
  outline: 1px solid var(--line);
  color: var(--muted-3);
}
.ca-zeb__znak {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-frame);
}
.ca-zeb__znak svg { width: 30px; height: 30px; }
.ca-zeb__rozsah {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted-3);
}
.ca-zeb__nazev {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted-2);
}
/* Dosažená hodnost svítí. Je to jediné místo v sekci, kde barva něco odměňuje
   — proto jen tady a jen jedna dlaždice. */
.ca-zeb__item.is-current { color: var(--accent); background: var(--bg-deep); }
.ca-zeb__item.is-current .ca-zeb__znak { border-color: var(--accent); }
.ca-zeb__item.is-current .ca-zeb__nazev,
.ca-zeb__item.is-current .ca-zeb__rozsah { color: var(--accent); }

/* --- Zlatý přechod na znaku --------------------------------------------- */

/* Definice přechodu leží v `clients.njk` ve `<svg class="ca-defs">`. Nesmí
   dostat `display: none` — prohlížeč pak barevný server nevykreslí a znak
   zmizí úplně. Nulové rozměry a `overflow: hidden` schovají tentýž prvek
   bez toho rizika. */
.ca .ca-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Přechod se zapíná ze stylu, ne z HTML. V HTML zůstává `fill="currentColor"`,
   takže bez CSS i bez `<defs>` je znak pořád vidět, jen plochý; vlastnost
   z CSS přebije prezentační atribut vždycky, opačně to neplatí.

   Zapíná se jen tam, kde barva něco odměňuje. Dlaždice žebříčku, na které
   člověk ještě nedosáhl, zůstávají ploché a tlumené — kdyby zlatem svítilo
   všech jedenáct, přestalo by to znamenat „tady jste“. */
/* Zlato zůstává výchozím kovem tam, kde se kreslí značka **dosažené**
   hodnosti bez ohledu na to které — čip, odznak, medailon, scéna odemčení.
   Níž ho přebije `data-ca-kov`, jakmile hodnost svůj kov má. */
.ca .ca-chip__znak svg,
.ca-odznak__znak svg,
.ca-medal__znak svg,
.ca-fx__znak-svg svg,
.ca-zeb__item.is-current .ca-zeb__znak svg {
  fill: url(#znak-zlato);
  stroke: url(#znak-zlato);
}

/* --- Kovy pěti nejvyšších hodností -------------------------------------- */

/* Původně svítila zlatem jedině dlaždice, na které člověk právě stál, a mělo
   to svůj důvod: kdyby zářilo všech jedenáct, přestalo by to znamenat „tady
   jste“. Pět nejvyšších teď nese kov **vždycky**, protože kov neříká „tady
   jste“ — říká, jak vysoko ta hodnost je, a to platí i pro toho, kdo tam
   ještě nedošel. Je to vidět shora dolů jako řada: bronz, stříbro, stříbro
   přecházející ve zlato, zlato, a nakonec Augustus.

   „Tady jste“ tím nezmizelo, jen se přestěhovalo z barvy znaku na dlaždici:
   rámeček, tmavší pozadí a jantarový popisek. Kdyby ten signál zůstal jen na
   znaku, splynul by u Konzula s jeho vlastním zlatem — což je přesně ta vada,
   kterou je vidět až u toho jednoho člověka, který na Konzula dojde.

   Šest nižších hodností kov nemá a zůstávají ploché. Kdyby ho měly všechny,
   nebyla by to řada, ale duha. */
.ca [data-ca-kov="bronz"] svg,
.ca [data-ca-kov="bronz"] .ca-zeb__znak svg {
  fill: url(#znak-bronz);
  stroke: url(#znak-bronz);
}
.ca [data-ca-kov="stribro"] svg,
.ca [data-ca-kov="stribro"] .ca-zeb__znak svg {
  fill: url(#znak-stribro);
  stroke: url(#znak-stribro);
}
.ca [data-ca-kov="stribro-zlato"] svg,
.ca [data-ca-kov="stribro-zlato"] .ca-zeb__znak svg {
  fill: url(#znak-stribro-zlato);
  stroke: url(#znak-stribro-zlato);
}
.ca [data-ca-kov="zlato"] svg,
.ca [data-ca-kov="zlato"] .ca-zeb__znak svg {
  fill: url(#znak-zlato);
  stroke: url(#znak-zlato);
}
.ca [data-ca-kov="augustus"] svg,
.ca [data-ca-kov="augustus"] .ca-zeb__znak svg {
  fill: url(#znak-augustus);
  stroke: url(#znak-augustus);
}

/* Rámeček podle kovu. U dlaždice žebříčku je to jediné místo, kde je kov
   vidět i bez znaku — a u Augusta to zadání chtělo výslovně celé zlaté. */
.ca [data-ca-kov="bronz"] .ca-zeb__znak { border-color: rgba(192, 122, 58, 0.55); }
.ca [data-ca-kov="stribro"] .ca-zeb__znak { border-color: rgba(168, 179, 190, 0.5); }
.ca [data-ca-kov="stribro-zlato"] .ca-zeb__znak { border-color: rgba(201, 174, 124, 0.6); }
.ca [data-ca-kov="zlato"] .ca-zeb__znak { border-color: rgba(232, 163, 61, 0.55); }

/* --- Augustus ------------------------------------------------------------ */

/* Poslední hodnost má být vidět, že je poslední. Tři věci, každá jiná:
   celý rámeček ve zlatě, teplý nádech pozadí a mihotání.

   Mihotání není animace barev. Posouvá se `x1/y1` přechodu, tedy **světlo po
   kovu** — barvy zůstávají, takže z toho nevznikne blikající LED, ale odlesk.
   Rozdíl je v tom, že se to dá dívat déle než pět vteřin. */
.ca [data-ca-kov="augustus"] .ca-zeb__znak {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(232, 163, 61, 0.35), 0 0 22px -6px rgba(232, 163, 61, 0.55);
  background: radial-gradient(circle at 50% 45%, rgba(232, 163, 61, 0.13), transparent 72%);
}
.ca .ca-zeb__item[data-ca-kov="augustus"] {
  background: linear-gradient(180deg, rgba(232, 163, 61, 0.07), transparent 62%), var(--bg-alt);
  outline-color: rgba(232, 163, 61, 0.3);
}
.ca .ca-zeb__item[data-ca-kov="augustus"] .ca-zeb__nazev { color: var(--accent); }

/* Mihotání je **jas, ne pohyb**. První verze posouvala `transform` o 1 %,
   aby po kovu přejelo světlo — jenže znak měří 30 px, takže z jednoho
   procenta je třetina pixelu: není to odlesk, je to rozmazání. A Playwright
   odmítl znak vyfotit („element is not stable"), protože se prvek nikdy
   nezastavil, takže se tím rozbilo i měření.

   Zbyl proto puls jasu se dvěma nesoudělnými periodami, aby se opakování
   nedalo napočítat — kov se tím tetelí jako od plamene a nebliká jako dioda. */
@keyframes znak-mihotani {
  0%, 100% { filter: brightness(1); }
  38% { filter: brightness(1.16); }
  71% { filter: brightness(0.94); }
}
@keyframes znak-zar {
  0%, 100% { opacity: 0.55; }
  44% { opacity: 1; }
}
.ca [data-ca-kov="augustus"] svg {
  animation: znak-mihotani 4.3s ease-in-out infinite;
}
/* Záře kolem rámečku dýchá o vlastní periodě. Dvě různé délky znamenají, že
   se souzvuk vrací až po půl minutě, a to už oko nesleduje. */
.ca [data-ca-kov="augustus"] .ca-zeb__znak::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  box-shadow: 0 0 18px -4px rgba(232, 163, 61, 0.75);
  animation: znak-zar 6.7s ease-in-out infinite;
}
.ca [data-ca-kov="augustus"] .ca-zeb__znak { position: relative; }

/* Mihotání je ozdoba, ne informace: kdo si vypnul pohyb, nepřijde o nic,
   protože kov, rámeček i popisek říkají totéž beze změny. */
@media (prefers-reduced-motion: reduce) {
  .ca [data-ca-kov="augustus"] svg,
  .ca [data-ca-kov="augustus"] .ca-zeb__znak::after { animation: none; }
}

/* „Tady jste“ musí přežít i na dlaždici, která má vlastní kov.
 *
 * U Augusta se to předtím ztratilo, a tiše: jeho pravidlo výš má vyšší
 * specificitu než `.ca-zeb__item.is-current`, takže mu přebilo pozadí —
 * poslední hodnost pak vypadala stejně, ať na ní člověk stál nebo ne. Je to
 * tentýž tvar jako v `.prose`: komponenta stylovaná jednou třídou tiše
 * prohraje s pravidlem, které má tříd víc.
 *
 * Signál proto nese **pruh nad dlaždicí**, který žádný kov nepoužívá, a celý
 * blok stojí až za kovy, aby vyhrál. Barva znaku už „tady jste“ říkat nemůže:
 * u Konzula by splynula s jeho vlastním zlatem. */

/* Kovová linka nad dlaždicí.
 *
 * Kov dosud mluvil jen rámečkem znaku a výplní kresby — tedy na ploše
 * o třiceti pixelech. V řadě jedenácti dlaždic se z toho nedá vyčíst, kde
 * hodnosti přestávají být obyčejné a začínají být kovové; linka nad dlaždicí
 * to řekne přes celou její šířku.
 *
 * **Tím se ale sráží s „tady jste“, které ten pruh dosud mělo pro sebe.**
 * U Konzula by zlatá linka a oranžový pruh na témž místě byly k nerozeznání.
 * Signál polohy se proto stěhuje na **levou** hranu a obojí se skládá do
 * jednoho `box-shadow` — dva stíny, dvě různé věci, žádná z nich nepřebíjí
 * druhou. Je to potřetí, co se „tady jste“ stěhuje, a pokaždé ze stejného
 * důvodu: nese-li barvu i sama hodnost, nemůže barva říkat ještě polohu.
 *
 * Sytost je vyšší než u rámečku znaku: 1px rámeček snese 0,6, dvoupixelová
 * linka přes celou šířku by při téže hodnotě vypadala jako nedotažená. */
.ca .ca-zeb__item[data-ca-kov="bronz"] { box-shadow: inset 0 2px 0 rgba(172, 95, 39, 0.85); }
.ca .ca-zeb__item[data-ca-kov="stribro"] { box-shadow: inset 0 2px 0 rgba(174, 189, 204, 0.8); }
.ca .ca-zeb__item[data-ca-kov="stribro-zlato"] { box-shadow: inset 0 2px 0 rgba(201, 174, 124, 0.9); }
.ca .ca-zeb__item[data-ca-kov="zlato"] { box-shadow: inset 0 2px 0 rgba(232, 163, 61, 0.85); }
/* Augustus nedostane plochou linku, ale přechod přes celou šířku — týž kov
   jako na znaku a na rámečku, aby dlaždice mluvila jedním hlasem. Kreslí se
   `::before`, protože `box-shadow` přechod neumí. */
.ca .ca-zeb__item[data-ca-kov="augustus"] { position: relative; }
.ca .ca-zeb__item[data-ca-kov="augustus"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #8a5a1c, #f0c268 42%, #fff0c9 55%, #e8a33d 70%, #8a5a1c);
  pointer-events: none;
}

/* „Tady jste“ na levé hraně, a **za** kovy, aby vyhrálo specificitou.
   Skládá se s kovovou linkou: dvě hrany, dvě tvrzení. */
.ca .ca-zeb__item.is-current {
  background: var(--bg-deep);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ca .ca-zeb__item.is-current[data-ca-kov="bronz"] { box-shadow: inset 3px 0 0 var(--accent), inset 0 2px 0 rgba(172, 95, 39, 0.85); }
.ca .ca-zeb__item.is-current[data-ca-kov="stribro"] { box-shadow: inset 3px 0 0 var(--accent), inset 0 2px 0 rgba(174, 189, 204, 0.8); }
.ca .ca-zeb__item.is-current[data-ca-kov="stribro-zlato"] { box-shadow: inset 3px 0 0 var(--accent), inset 0 2px 0 rgba(201, 174, 124, 0.9); }
.ca .ca-zeb__item.is-current[data-ca-kov="zlato"] { box-shadow: inset 3px 0 0 var(--accent), inset 0 2px 0 rgba(232, 163, 61, 0.85); }
.ca .ca-zeb__item.is-current .ca-zeb__znak { border-color: var(--accent); }

/* Kov mluví i v písmu.
 *
 * Barva zatím žila jen na znaku a na lince nad dlaždicí, tedy v grafice.
 * Jenže v řadě jedenácti dlaždic čte člověk **jméno** — a to bylo u všech
 * hodností stejně šedé, takže obrázek říkal „tahle je zlatá“ a text pod ním
 * nic. Jméno i rozsah proto nesou týž kov jako znak.
 *
 * Odstíny jsou **světlejší než u grafiky**: linka nad dlaždicí je dva pixely
 * plné plochy, kdežto písmo je devět pixelů tenkých tahů. Táž rgba by na
 * lince byla akorát a v textu nečitelná — kontrast se u písma počítá na tahu,
 * ne na ploše. */
.ca .ca-zeb__item[data-ca-kov="bronz"] .ca-zeb__nazev,
.ca .ca-zeb__item[data-ca-kov="bronz"] .ca-zeb__rozsah { color: #c07a45; }
.ca .ca-zeb__item[data-ca-kov="stribro"] .ca-zeb__nazev,
.ca .ca-zeb__item[data-ca-kov="stribro"] .ca-zeb__rozsah { color: #aebdcc; }
.ca .ca-zeb__item[data-ca-kov="stribro-zlato"] .ca-zeb__nazev,
.ca .ca-zeb__item[data-ca-kov="stribro-zlato"] .ca-zeb__rozsah { color: #d3b681; }
.ca .ca-zeb__item[data-ca-kov="zlato"] .ca-zeb__nazev,
.ca .ca-zeb__item[data-ca-kov="zlato"] .ca-zeb__rozsah { color: #e8a33d; }

/* Augustus: jméno i „100“ týmž kovem a týmž řezem. Číslo úrovně bylo o půl
   bodu menší a v barvě `--dim`, takže poslední hodnost měla nadpis ve zlatě
   a pod ním šedivou drobnost — u stovky, která je vrchol celého žebříčku, to
   vypadá jako popisek, ne jako výsledek. */
.ca .ca-zeb__item[data-ca-kov="augustus"] .ca-zeb__nazev,
.ca .ca-zeb__item[data-ca-kov="augustus"] .ca-zeb__rozsah {
  color: var(--accent);
  font-weight: 600;
}
.ca .ca-zeb__item[data-ca-kov="augustus"] .ca-zeb__rozsah { font-size: inherit; letter-spacing: 0.1em; }

/* A „tady jste“ musí přebít i tohle — jinak by u kovové hodnosti zmizel
   rozdíl mezi „sem dojdete“ a „tady stojíte“. Proto ještě jednou, za kovy. */
.ca .ca-zeb__item.is-current .ca-zeb__nazev,
.ca .ca-zeb__item.is-current .ca-zeb__rozsah { color: var(--accent); }

/* --- Roční strop a dvojice sloupců -------------------------------------- */

.ca-strop {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: end;
  padding-top: 44px;
}
.ca-strop__radek {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.ca-strop__radek span:first-child { color: var(--accent); }
.ca-strop__vysvetleni {
  max-width: 46ch;
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
}

.ca-dvojice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 44px 56px;
  padding-top: 48px;
}

.ca-xp { margin: 0; padding: 0; list-style: none; }
.ca-xp__r {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-2);
}
.ca-xp__r b { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--accent); }
/* Řádek, který se zatím nepočítá. Ztlumený, ne skrytý — člověk má vidět, co
   hodnost jednou zohlední, i to, že se to dnes nezapočítává. */
.ca-xp__r.is-off { color: var(--muted-3); }
.ca-xp__r.is-off b { color: var(--muted-3); }
.ca-xp__pozn {
  margin: 14px 0 0;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted-2);
}
.ca-xp__pozn b { color: var(--ink-2); font-weight: 500; }

.ca-hodn { margin: 0; }
.ca-hodn__r {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 0 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.ca-hodn__r dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 3px;
}
.ca-hodn__r dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
}
.ca-hodn__r dd b { color: var(--ink); font-weight: 500; }

@media (max-width: 900px) {
  .ca-medal { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ca-strop { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ca-medal__znak { width: 68px; height: 68px; }
  .ca-medal__znak svg { width: 40px; height: 40px; }
  .ca-hodn__r { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 560px) {
  /* Hodnost na přehledu se na telefonu **schovává**. Tentýž údaj — jméno
     hodnosti, úroveň a pruh — nese čip v liště, který je na obrazovce pořád;
     tady z toho byla stopadesátipixelová karta hned pod vyhledávacím polem,
     tedy třetina první obrazovky za informaci, kterou má člověk o dva
     centimetry výš.

     `display: none`, ne jen zmenšení: karta je odkaz na Postup a ten je i
     v liště pod tlačítkem menu, takže se nikam nedá ztratit. Na monitoru
     zůstává — tam je vedle pole místo a čip v liště je proti ní malý. */
  .ca-uvod .ca-odznak { display: none; }
  .ca-odznak { width: 100%; }
  .ca-medal { padding: 22px 18px 24px; }
  .ca-medal__kdo { gap: 16px; }
}

/* --- Pruhy přehledu ------------------------------------------------------ */

.ca-streams {
  display: grid;
  /* auto-fit, ne pevné čtyři: pruhů může ubýt (právní výbava zmizela) a
     pevný počet sloupců by nechal prázdné místo. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.ca-stream {
  padding: 26px 28px 40px;
  border-left: 1px solid var(--line);
}
.ca-stream:first-child { border-left: 0; padding-left: 0; }
.ca-stream:last-child { padding-right: 0; }
.ca-stream__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.ca-stream__name,
.ca-stream__count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ca-stream__name { color: var(--accent); }
.ca-stream__count { color: var(--muted-2); }
/* Odkaz „otevřít →" vpravo v hlavičce pruhu. Podtržení pruhu je oranžové,
   protože v návrhu odděluje sekci od obsahu; počet a odkaz vedle sebe se
   vejdou, dokud je počet krátký — proto se na úzkém pruhu skrývá počet
   a zůstane odkaz, ne naopak: odkaz někam vede, počet je jen údaj. */
.ca-stream__head { border-bottom-color: var(--line-accent); }
.ca-stream__vic {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.ca-stream__vic:hover { color: var(--accent); }
.ca-stream__pozn {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted-3);
}
@media (max-width: 900px) {
  .ca-stream__head .ca-stream__count { display: none; }
}

/* Třetí sloupec se dvěma bloky pod sebou. Mřížka `.ca-streams` dělá z každé
   `.ca-stream` vlastní sloupec, takže sledované firmy a firmy z analýz by
   stály vedle sebe — jsou to ale dvě půlky téže otázky a patří nad sebe.
   Obalem je jedna položka mřížky; vnitřní sekce nemají ani rámeček, ani
   odsazení, jen mezeru mezi sebou. */
.ca .ca-stream--dvojity { display: flex; flex-direction: column; gap: 38px; }
.ca .ca-stream--dvojity > .ca-stream {
  padding: 0;
  border-left: 0;
}

/* --- Firmy z analýz na přehledu ------------------------------------------- */

/* Řádek je odkaz do analýzy, ne do Tickeru: čtenář, který na přehledu vidí
   NET a chce vědět proč, hledá text, který jsme o něm napsali. Do Tickeru
   vede pole nahoře. */
.ca .ca-firma {
  display: grid;
  /* Čtvrtý sloupec je čára za měsíc (64 px); bez dat zůstane prázdný a řádek
     drží tvar, aby ceny seděly na jedné svislici i u firmy bez řady. */
  grid-template-columns: 4.2rem minmax(0, 1fr) 64px auto;
  grid-template-areas: "tik jmeno graf cena" "tik jmeno graf zmena";
  align-items: center;
  gap: 0 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-3);
  border-left: 0;
}
.ca .ca-firma:hover { color: var(--ink); }
.ca .ca-firma__tik {
  grid-area: tik;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.ca .ca-firma__jmeno {
  grid-area: jmeno;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca .ca-firma__cena {
  grid-area: cena;
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: right;
  color: var(--ink-2);
}
.ca .ca-firma__zmena {
  grid-area: zmena;
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
  color: var(--muted-3);
}
/* Zelená nahoru, červená dolů. Barva je tu jediný rychlý signál a bez ní by
   se znaménko muselo číst. */
.ca .ca-firma__graf { grid-area: graf; width: 64px; height: 26px; align-self: center; }
.ca .ca-firma__zmena[data-smer="nahoru"] { color: var(--r-3, #6FBF8B); }
.ca .ca-firma__zmena[data-smer="dolu"] { color: var(--r-4, #D2706A); }

/* Tečka u sledované firmy: od minule něco podala u SEC. Je to `::before` na
   zkratce, ne prvek navíc, protože řádek sází skript a každý další uzel je
   místo, kde se dvě verze rozejdou.

   **Místo pro tečku drží každý řádek, i ten bez ní.** Jinak se zkratka firmy
   s tečkou posune o jedenáct pixelů doprava a sloupec zkratek přestane být
   sloupec — vypadá to, jako by ten řádek patřil jinam. Odsazení je proto na
   všech řádcích v tomhle bloku a mění se jen obsah `::before`. */
.ca [data-ca-sledovane] .ca-firma__tik { position: relative; padding-left: 11px; }
.ca .ca-firma[data-nove] .ca-firma__tik::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: var(--accent);
}

/* Tlačítko „Sledovat" v hlavičce firmy v Tickeru. Zapnuté je vyplněné, aby
   se stav poznal bez čtení — obrys a výplň nesou význam samy o sobě, na
   rozdíl od pouhé změny barvy, kterou nemá s čím srovnat ten, kdo vidí jen
   jeden stav. */
.rsh .rsh__sleduj {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 16px;
  padding: 0 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line-frame);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.rsh .rsh__sleduj:hover { color: var(--ink); border-color: var(--line-accent); }
.rsh .rsh__sleduj[aria-pressed="true"] {
  color: var(--accent);
  border-color: rgba(232, 163, 61, 0.55);
  background: rgba(232, 163, 61, 0.1);
}

/* --- Dílna jako vlastní blok na přehledu ---------------------------------- */

.ca .ca-dilna-blok { padding-top: 54px; padding-bottom: 10px; }
.ca .ca-dilna-blok__titul {
  margin: 22px 0 26px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 24ch;
}

.ca-item { display: flex; gap: 12px; padding: 16px 0; }
.ca-item + .ca-item { border-top: 1px solid var(--line-soft); }
.ca-item__mark {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  background: var(--dim);
}
.ca-item.is-new .ca-item__mark { background: var(--accent); }

/* Kurz v pruhu přehledu. Proti řádku analýzy nese navíc pruh postupu, takže
   potřebuje víc vzduchu — a značka vlevo se srovnává s nadpisem, ne s pruhem. */
.ca-item--kurz { padding: 20px 0; }
.ca-item--kurz .ca-bar { margin: 12px 0 8px; max-width: 420px; }
.ca-item--kurz .ca-item__lede { margin-top: 4px; }
/* Dokončený kurz se ztlumí stejně jako dokončená lekce, ale stav i pruh
   zůstanou v plné síle — jinak by hotový kurz vypadal jako nedostupný. */
.ca-item--kurz.is-done .ca-item__title,
.ca-item--kurz.is-done .ca-item__lede,
.ca-card2.is-done .ca-card2__name,
.ca-card2.is-done .ca-card2__perex { opacity: 0.55; }
.ca-item__body { min-width: 0; }
.ca-item__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}
.ca-item__link { color: inherit; border: 0; }
.ca-item__link:hover { color: var(--accent-hi); }
.ca-item__lede {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--ink-3);
}
.ca-item__meta {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-item__flag { color: var(--accent); }

/* Prázdný pruh říká, co v něm bude, ne „nic tu není“. */
.ca-empty {
  margin: 0;
  padding: 18px 0 0;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--muted);
}

/* --- Karta uvnitř pruhu (cesta, Q&A) ------------------------------------- */

.ca-card {
  margin-top: 24px;
  padding: 20px 18px 22px;
  background: var(--bg-deep);
  border: 1px solid var(--line-frame);
}
.ca-card__label {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-card__line { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ca-card__big {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
}

.ca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 22px;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-accent);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.ca-btn:hover { color: #12151A; background: var(--accent); }
.ca-btn--solid { color: #12151A; background: var(--accent-btn); border-color: var(--accent-btn); }
.ca-btn--solid:hover { background: var(--accent-hi); }

/* --- Ukazatel postupu ---------------------------------------------------- */

.ca-bar {
  height: 2px;
  margin: 14px 0 10px;
  background: var(--bar-track);
}
.ca-bar__fill { height: 100%; background: var(--accent); }

/* --- Spodní pruhy: úroveň a rozečtené ------------------------------------ */

.ca-strip { border-top: 1px solid var(--line); }
.ca-strip__inner {
  padding-top: 28px;
  padding-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
}
.ca-strip__body { flex: 1; min-width: min(420px, 100%); }
.ca-strip__label {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-strip__line {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}
.ca-strip__meta {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-strip__cta { flex: none; }

@media (max-width: 1080px) {
  .ca-streams { grid-template-columns: repeat(2, 1fr); }
  .ca-stream:nth-child(3) { border-left: 0; padding-left: 0; }
  .ca-stream:nth-child(2) { padding-right: 0; }
}

@media (max-width: 720px) {
  .ca-streams { grid-template-columns: 1fr; }
  .ca-stream {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .ca-stream:first-child { border-top: 0; }
  .ca-head { display: block; }
  .ca-strip__cta,
  .ca-btn { width: 100%; }
}

/* --- Kurzy --------------------------------------------------------------- */

.ca-course { padding-top: 44px; padding-bottom: 8px; border-top: 1px solid var(--line); }
.ca-course:first-child { border-top: 0; }
.ca-course__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.ca-course__no,
.ca-course__meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ca-course__no { color: var(--accent); }
.ca-course__meta { color: var(--muted-2); margin-left: auto; }
.ca-course__name {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  color: var(--ink);
}

.ca-lessons { margin: 26px 0 0; padding: 0; list-style: none; }
.ca-lesson { border-top: 1px solid var(--line); }
.ca-lesson:last-child { border-bottom: 1px solid var(--line); }
.ca-lesson__link {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 0;
  border: 0;
  transition: opacity 180ms ease;
}
.ca-lesson__link:hover { opacity: 0.84; }
.ca-lesson__no {
  flex: none;
  width: 2.2em;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted-3);
}
.ca-lesson__body { flex: 1; min-width: 0; }
.ca-lesson__title {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}
.ca-lesson__lede {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--ink-3);
}
.ca-lesson__state {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ca-lesson__arrow { flex: none; font-family: var(--mono); font-size: 13px; color: var(--accent); }

/* --- Archiv -------------------------------------------------------------- */

.ca-archive { margin: 0; padding: 0; list-style: none; }
.ca-archive__row {
  display: grid;
  grid-template-columns: 9rem 7rem 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.ca-archive__row:last-child { border-bottom: 1px solid var(--line); }
.ca-archive__date,
.ca-archive__kind {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-archive__title {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
  border: 0;
}
.ca-archive__title:hover { color: var(--accent-hi); }

@media (max-width: 640px) {
  .ca-archive__row { grid-template-columns: 1fr; gap: 6px; }
  .ca-lesson__link { gap: 14px; }
  .ca-lesson__lede { display: none; }
}

/* --- Souvislý text v sekci ----------------------------------------------- */

/* Nese i .wrap, takže vodorovné odsazení musí zůstat na ní — jen svislé. */
.ca-prose { padding-top: 8px; padding-bottom: 40px; max-width: 78ch; }
.ca-prose p,
.ca-prose li {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--ink-2);
}
.ca-prose p { margin: 0 0 20px; }
.ca-prose ul { margin: 0 0 20px; padding-left: 1.1em; }
.ca-prose li { margin-bottom: 10px; }
.ca-prose strong { color: var(--ink); font-weight: 400; }

/* --- Achievementy -------------------------------------------------------- */

/* --- Achievement: detail po rozkliknutí ---------------------------------- */

/* Tlačítko **je** ta karta, nesedí v ní.
   Nejdřív tu bylo `display: contents`, aby se kvůli klikatelnosti nemuselo
   měnit rozvržení. Jenže takový prvek nemá vlastní box: nedá se na něj
   kliknout, nezaměří se a v části prohlížečů vypadne z přístupnostního
   stromu. Playwright ho odmítl kliknout se slovy „element is outside of the
   viewport“, což byla pravda — žádný výřez neměl.
   Rozvržení karty proto drží rovnou tlačítko a `<li>` je jen buňka mřížky. */
.ca .ca-ach2__spust {
  display: flex;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.ca .ca-ach2__spust:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.ca .ca-achd { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.ca .ca-achd[hidden] { display: none; }
.ca .ca-achd__zavoj { position: absolute; inset: 0; background: rgba(8, 10, 13, 0.78); }
.ca .ca-achd__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  padding: 28px 30px 26px;
  background: var(--bg);
  border: 1px solid var(--line-accent);
}
.ca .ca-achd__x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-2);
  background: none;
  border: 0;
  cursor: pointer;
}
.ca .ca-achd__x:hover { color: var(--ink); }

.ca .ca-achd__hlava { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; padding-right: 40px; }
.ca .ca-achd__znak {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  color: var(--muted);
  border: 1px solid var(--line-frame);
}
.ca .ca-achd__znak.is-done {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(232, 163, 61, 0.1);
}
.ca .ca-achd__znak svg { width: 26px; height: 26px; }
.ca .ca-achd__nazev { margin: 0 0 4px; font-size: 20px; font-weight: 600; color: var(--ink); }
.ca .ca-achd__stav {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ca .ca-achd__znak.is-done + div .ca-achd__stav { color: var(--accent); }

.ca .ca-achd__seznam { margin: 0; }
.ca .ca-achd__radek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line-frame);
}
.ca .ca-achd__radek dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ca .ca-achd__radek dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.ca .ca-achd__slabe { color: var(--muted); }
.ca .ca-achd__pozn {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.ca .ca-achd__postup { display: flex; align-items: center; gap: 12px; }
.ca .ca-achd__postup .ca-bar { flex: 1 1 auto; margin: 0; }
.ca .ca-achd__postup b { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }

/* Reset postupu pod medailonkem. Tiché tlačítko, protože je to nevratná akce,
   kterou nikdo nehledá omylem — ale kdo testuje, ji chce mít po ruce. */
/* Patka za mřížkou achievementů. `padding-top`, ne zkratka `padding`:
   vodorovné odsazení dodává `.wrap` a zkratka by ho vynulovala — desktop by
   to schoval, protože `max-width` blok stejně vycentruje, a projevilo by se
   to až pod tou šířkou, kde text narazí na hranu okna. */
.ca .ca-ach2__pata { padding-top: 26px; }
.ca .ca-ach2__pata .ca-strip__meta { margin: 0; }
/* Vlastní míra, ne půjčená z ročního stropu. Tam je `46ch` správně, protože
   je to jeden ze dvou sloupců; tady je to jediný text přes celou šířku a na
   46 znacích se lámal v půlce řádku. */
.ca .ca-ach2__ulozeni {
  max-width: 74ch;
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
}
.ca .ca-ach2__reset { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.ca .ca-ach2__reset span { font-size: 12.5px; color: var(--muted); }

/* Potvrzení psaním. Sází ho skript do rodiče tlačítka, takže je stejné na
   Postupu i na Účtu a v obou jazycích — čtyři šablony, jedno místo. */
.ca .ca-smaz {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-accent);
  background: var(--bg-deep);
}
.ca .ca-smaz__vyzva { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--ink-2); }
.ca .ca-smaz__vyzva b { color: var(--accent); font-weight: 500; letter-spacing: 0.08em; }
.ca .ca-smaz__pole {
  flex: 0 1 200px;
  min-width: 0;
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
}
.ca .ca-smaz__pole:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Tři ovládací prvky na jednom řádku měly tři různé sazby: pole neproporcionálně
   13 px verzálkami, „Smazat natrvalo" Interem 14 px v běžném řezu a „Zrušit"
   neproporcionálně 10,5 px verzálkami. Vedle sebe to nevypadá jako tři prvky
   jednoho formuláře, ale jako tři kusy z různých stránek. Potvrzení se proto
   sází stejně jako zrušení — liší se barvou, ne písmem. */
.ca .ca-smaz__ano {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* `.ca-btn` má `margin-top: 18px` kvůli tlačítkům pod odstavcem. Ve flexovém
   řádku s `align-items: center` se ale centruje **marginový** box, takže obě
   tlačítka sedla o devět a půl pixelu níž než pole vedle nich (pole 610–647,
   tlačítka 616–660). Nic se nepřekrývá, jen to nesedí na jednu linku — a to
   je přesně ten druh vady, kterou člověk vidí a neumí pojmenovat. */
.ca .ca-smaz .ca-btn { margin-top: 0; }
/* A stejná výška jako tlačítka: 37 px bylo i pod hranicí 44 px, kterou si
   projekt drží u dotykových cílů jinde. */
.ca .ca-smaz__pole { min-height: 44px; }

/* Ničivé tlačítko je červené, ne v barvě značky. V řadě, kde jedno tlačítko
   smaže celý postup a druhé zavře okno, je barva nejrychlejší signál — a ta
   oranžová říkala opak: zvýrazněné bylo to nebezpečné, protože oranžová je
   tady barva „hlavní akce". */
.ca .ca-smaz__ano {
  color: var(--r-4);
  /* Odstín psaný ručně, ne `color-mix`. Zbytek téhle stylesheety ho nepoužívá
     a jedno tlačítko není důvod ho sem zavádět — je to tatáž úvaha jako
     u výplně čipu podání v `site.css`. */
  border-color: rgba(210, 112, 106, 0.55);
}
.ca .ca-smaz__ano:hover:not([disabled]) { color: #12151A; background: var(--r-4); }
/* Vypnuté tlačítko musí *vypadat* vypnuté. Jinak se na něj klikne, nic se
   nestane a vypadá to jako rozbité tlačítko místo nesplněné podmínky. */
.ca .ca-smaz__ano[disabled] { opacity: 0.45; cursor: not-allowed; }
.ca .ca-smaz__ano[disabled]:hover { background: transparent; color: var(--r-4); }
.ca .ca-btn--tichy {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-color: var(--line-frame);
}
.ca .ca-btn--tichy:hover { color: var(--ink); border-color: var(--r-4, var(--line-accent)); }

@media (max-width: 560px) {
  .ca .ca-achd__panel { padding: 24px 18px 20px; }
  .ca .ca-achd__radek { grid-template-columns: 1fr; gap: 4px; }
}

/* --- Achievementy: karty ------------------------------------------------- */

/* Nahradily plochý seznam. Ten měl u každé položky jen jméno, popis a slovo
   „Nezískáno“ — čtyřicet tři takových řádků pod sebou je tabulka, ne odměna,
   a hlavně z ní nešlo poznat, co je blízko a co je na deset let.

   Rozdělení do skupin dělá tu práci, kterou u seznamu musel dělat člověk sám:
   „Vytrvalost 2 z 9“ řekne, kde má smysl přidat, a „Nejtěžší 0 ze 6“ řekne,
   že tam se nepřidává vůbec.

   Specificita: `.ca-ach2` je pod `.ca`, kde jsou pravidla kvalifikovaná
   prvkem (0,1,1). Komponenta stylovaná jednou třídou (0,1,0) by prohrála,
   takže se všechno píše jako `.ca .ca-ach2 …`. Viz CLAUDE.md. */

.ca .ca-ach2 { padding-top: 8px; }
.ca .ca-ach2__hlava {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.ca .ca-ach2__titulek {
  margin: 8px 0 0;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ca .ca-ach2__filtry { display: flex; flex-wrap: wrap; gap: 8px; }
.ca .ca-ach2__filtr {
  min-height: 44px;
  padding: 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line-frame);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.ca .ca-ach2__filtr:hover { color: var(--ink); border-color: var(--line-accent); }
.ca .ca-ach2__filtr.is-on { color: var(--accent); border-color: var(--accent); }

.ca .ca-ach2__skupina { margin-bottom: 34px; }
.ca .ca-ach2__nadpis {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.ca .ca-ach2__pocet { color: var(--muted); letter-spacing: 0.12em; }
.ca .ca-ach2__pozn { color: var(--muted); letter-spacing: 0.06em; text-transform: none; }

/* Dvousloupcová mřížka, která se na úzkém okně sama složí do jednoho.
   `minmax(0, …)` je tu proto, aby dlouhý popis nerozjel sloupec do šířky. */
.ca .ca-ach2__mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line-frame);
  border: 1px solid var(--line-frame);
}
.ca .ca-ach2__karta {
  display: flex;
  background: var(--bg);
  transition: background 160ms ease;
}
.ca .ca-ach2__karta:hover { background: var(--bg-deep); }

.ca .ca-ach2__znak {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--muted);
  border: 1px solid var(--line-frame);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.ca .ca-ach2__znak svg { width: 20px; height: 20px; }
.ca .ca-ach2__telo { min-width: 0; }
.ca .ca-ach2__nazev {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.ca .ca-ach2__popis {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.ca .ca-ach2__postup { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ca .ca-ach2__postup .ca-bar { flex: 1 1 auto; max-width: 160px; margin: 0; }
.ca .ca-ach2__zlomek {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}

.ca .ca-ach2__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Oddělovač se kreslí, ne píše: tečka mezi dvěma <span> v HTML by se při
   skrytém stavu („Získáno“ přibude až ze skriptu) osamostatnila na řádku. */
.ca .ca-ach2__meta > * + *::before { content: "· "; color: var(--line-strong); }
.ca .ca-ach2__xp { color: var(--ink-2); }
.ca .ca-ach2__karta[data-ca-tier="vzacny"] .ca-ach2__tier { color: var(--accent); }
.ca .ca-ach2__rucne { color: var(--ink-2); }

/* Získaný odznak. Znak dostane plnou barvu — je to jediné místo, kde se
   pozná stav bez čtení, a proto nese hlavní rozdíl. */
.ca .ca-ach2__karta.is-done .ca-ach2__znak {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(232, 163, 61, 0.1);
}
.ca .ca-ach2__karta.is-done .ca-ach2__stav { color: var(--accent); }

/* Nezískaný odznak se neztlumuje. Ztlumená karta se čte jako nedostupná, což
   u odznaku, který stačí získat, není pravda — a je to ta polovina seznamu,
   kvůli které na stránku člověk jde. Ztlumí se jen ten, který se uděluje
   ručně, protože ten opravdu nedostupný je. */
.ca .ca-ach2__karta.is-rucne { background: var(--bg-deep); }
.ca .ca-ach2__karta.is-rucne .ca-ach2__nazev,
.ca .ca-ach2__karta.is-rucne .ca-ach2__popis { color: var(--muted); }
.ca .ca-ach2__karta.is-rucne .ca-ach2__znak { border-style: dashed; }

/* Skryté filtrem. `display: none` místo `visibility`, aby mřížka přeskládala
   zbytek a nezůstaly v ní díry. */
.ca .ca-ach2__karta[hidden],
.ca .ca-ach2__skupina[hidden] { display: none; }

@media (max-width: 640px) {
  .ca .ca-ach2__spust { padding: 16px; gap: 13px; }
  .ca .ca-ach2__znak { width: 34px; height: 34px; }
  .ca .ca-ach2__znak svg { width: 17px; height: 17px; }
  .ca .ca-ach2__filtry { width: 100%; }
  .ca .ca-ach2__filtr { flex: 1 1 auto; padding: 0 12px; }
}
/* Nedostupné se neschovává — vědět, že něco existuje a minul jsem to, je
   součást toho, proč jsou achievementy zajímavé. */

/* --- Zařazovací test ----------------------------------------------------- */

.ca-test { padding-bottom: 40px; }
.ca-test__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.ca-test__pips { display: flex; gap: 6px; }
.ca-test__pip { width: 26px; height: 2px; background: var(--line-strong); }
.ca-test__pip.is-done { background: var(--accent); }
.ca-test__pip.is-now { background: var(--accent-hi); }
.ca-test__count {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.ca-test__q { margin: 0; padding: 36px 0 0; border: 0; }
.ca-test__kicker {
  padding: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.ca-test__text {
  margin: 14px 0 28px;
  max-width: 32ch;
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}
.ca-test__opts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ca-test__opt {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 18px 20px;
  text-align: left;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--bg-deep);
  border: 0;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.ca-test__opt:hover { color: var(--ink); background: var(--bg-card-hover); }
.ca-test__letter {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 3px;
}
.ca-test__nav { margin-top: 20px; }
.ca-test__back,
.ca-test__skiplink {
  min-height: 44px;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ca-test__back:hover,
.ca-test__skiplink:hover { color: var(--accent); }
.ca-test__skip { margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* --- Výsledek ------------------------------------------------------------ */

.ca-result { padding-top: 20px; padding-bottom: 50px; }
.ca-result__head { padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.ca-result__code {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.ca-result__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  color: var(--ink);
}
.ca-result__desc {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--ink-2);
}
.ca-result__axes {
  padding: 30px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 24px 40px;
  border-bottom: 1px solid var(--line);
}
.ca-axis__labels {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-result__notes {
  padding: 30px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 26px 40px;
  border-bottom: 1px solid var(--line);
}
.ca-result__level { padding-top: 30px; }
.ca-result__levelname {
  margin: 8px 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  color: var(--ink);
}

/* --- Karty kurzů --------------------------------------------------------- */

.ca-cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ca-card2 { background: var(--bg-deep); }
.ca-card2__link {
  display: block;
  padding: 30px 28px 26px;
  border: 0;
  transition: background 160ms ease;
}
.ca-card2__link:hover { background: var(--bg-card-hover); }
.ca-card2__no,
.ca-card2__meta,
.ca-card2__state {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ca-card2__no { color: var(--accent); }
.ca-card2__meta { margin-top: 16px; color: var(--muted-2); }
.ca-card2__state { margin-top: 8px; color: var(--muted); }
.ca-card2__name {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.22;
  color: var(--ink);
}
.ca-card2__link .link-arrow { display: inline-block; margin-top: 20px; }

.ca-lesson__tag {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* --- Video --------------------------------------------------------------- */

/* Video a text jsou dvě podoby téže lekce, ne titulek a příloha — proto stejná
   šířka jako text a žádný rámeček navíc. */
.ca-video { padding-top: 30px; }
.ca-video video {
  display: block;
  width: 100%;
  max-width: 940px;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line-frame);
}
.ca-video__meta {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* --- Odškrtnutí lekce ---------------------------------------------------- */

.ca-done {
  padding-top: 34px;
  padding-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  border-top: 1px solid var(--line);
  margin-top: 34px;
}
.ca-done .ca-btn { margin-top: 0; }
.ca-done__note {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

@media (max-width: 560px) {
  .ca-done { display: block; }
  .ca-done__note { margin-top: 12px; }
}

/* --- Pole ---------------------------------------------------------------- */

.ca-field { display: block; max-width: 340px; }
.ca-field__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-field__input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg-deep);
  border: 1px solid var(--line-frame);
}
.ca-field__input:focus {
  outline: none;
  border-color: var(--line-accent);
}
/* Barva rámečku sama o sobě zaměření nesdělí — kdo se pohybuje tabulátorem,
   potřebuje vidět prstenec. :focus-visible proto, aby nevyskakoval při kliknutí
   myší, kde by jen rušil. */
.ca-field__input:focus-visible,
.ca-calc__in input:focus-visible,
.ca-years__row input:focus-visible {
  outline: 2px solid var(--line-accent);
  outline-offset: 2px;
}

/* --- Dvousloupcová lekce ------------------------------------------------- */

/* Obsah kurzu vlevo, lekce vpravo. Uvnitř se vnořené `.wrap` zplošťují —
   okraje drží tenhle obal, jinak by se odsazení sečetlo dvakrát. */
.ca-split {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 0 56px;
  align-items: start;
  padding-top: 8px;
}
.ca-split--solo { display: block; }
.ca-split .wrap,
.ca-split .research__prose,
.ca-split .research section {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.ca-split__main { min-width: 0; }

.ca-side {
  position: sticky;
  top: 96px;
  padding-bottom: 40px;
}
.ca-side__label {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-side__label + .ca-bar { margin-top: 0; }
.ca-side__list { margin: 0 0 30px; padding: 0; list-style: none; }
.ca-side__item {
  display: flex;
  gap: 10px;
  padding: 7px 0 7px 12px;
  border-left: 2px solid transparent;
}
.ca-side__item.is-current { border-left-color: var(--accent); }
.ca-side__no {
  flex: none;
  min-width: 2.4em;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted-3);
  padding-top: 3px;
}
.ca-side__link {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  border: 0;
}
a.ca-side__link:hover { color: var(--accent-hi); }
.ca-side__item.is-current .ca-side__link { color: var(--ink); }
.ca-side__link--soon { color: var(--muted-3); }
.ca-side__state {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.ca-done__next {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 0;
}
.ca-done__next:hover { color: var(--accent); }

/* Pod 1024 px se sidebar posílá nad text a odlepuje — sloupec 250 px vedle
   textu už nedává čitelnou míru a sticky prvek na dotyku spíš překáží. */
@media (max-width: 1024px) {
  /* Jeden sloupec, ale pořád mřížka — kvůli vlastnosti order. Hlavička lekce
     sedí uvnitř hlavního sloupce, takže při prostém display:block by obsah
     kurzu předběhl nadpis a čtenář by nevěděl, co otevřel. Obsah jde pod text. */
  .ca-split { grid-template-columns: 1fr; gap: 0; }
  .ca-split__main { order: 1; }
  .ca-side {
    order: 2;
    position: static;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
  }
  .ca-side__list { margin-bottom: 20px; }
  .research--kurz .ca-split { grid-template-columns: 1fr; gap: 0; }
}

/* --- Přehled kurzu ------------------------------------------------------- */

.ca-head--course { display: block; }
.ca-course__perex {
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--ink-2);
}
.ca-overview { padding-bottom: 20px; }
.ca-overview__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 46px;
}
.ca-stat { background: var(--bg-deep); padding: 22px 22px 24px; }
.ca-stat__label,
.ca-stat__note {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-stat__value {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
}
.ca-stat__note { margin-top: 10px; }
.ca-overview__title {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 25px);
  color: var(--ink);
}
.ca-overview__learn { margin-bottom: 46px; }
.ca-learn { margin: 0; padding: 0; list-style: none; max-width: 74ch; }
.ca-learn__item {
  position: relative;
  padding: 10px 0 10px 26px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ink-2);
}
.ca-learn__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

/* Připravovaná lekce zůstává ve výpisu. Skrýt ji by znamenalo tvrdit, že kurz
   je hotový — a čtenář má právo vědět, co ho ještě čeká. */
.ca-lesson.is-soon { opacity: 0.55; }
.ca-lesson__link--soon { cursor: default; }
.ca-lesson.is-soon .ca-lesson__title { color: var(--ink-3); }
.ca-card2__perex {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--ink-3);
}

/* --- Kapitoly videa ------------------------------------------------------ */

.ca-video__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 10px;
}
.ca-video__resume {
  min-height: 36px;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--line-accent);
  cursor: pointer;
}
.ca-video__resume:hover { color: #12151A; background: var(--accent); }

.ca-chapters {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ca-chapters__item { flex: 1 1 auto; background: var(--bg-deep); }
.ca-chapters__btn {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ca-chapters__btn:hover { background: var(--bg-card-hover); }
.ca-chapters__time {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.ca-chapters__name {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}

/* --- Lekce v kurzu: šířka ------------------------------------------------ */

/* Míru kurzové lekce určuje pravidlo nahoře; tady zůstává jen mřížka. */
/* Dvousloupcová podoba platí až od tabletu. Selektor .research--kurz .ca-split
   má vyšší specificitu než mobilní .ca-split, takže bez téhle hranice by
   přebíjel jednosloupcové rozvržení bez ohledu na pořadí v souboru. */
@media (min-width: 1025px) {
  .research--kurz .ca-split {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 0 72px;
  }
}
/* Delší řádek než u analýzy, ale pořád v mezích čitelnosti. Text roste jen do
   78 znaků; zbytek šířky spolkne graf, tabulka a citace, kterým to prospěje. */
.research--kurz .research__prose p,
.research--kurz .research__prose ul,
.research--kurz .research__prose ol { max-width: 78ch; }
.research--kurz .research__title { max-width: 26ch; }
.research--kurz .research__lede { max-width: 68ch; }

/* Rozsah, ne jen strop. Bez dolní hranice tohle pravidlo přebíjelo mobilní
   rozvržení níž v souboru a na úzkém displeji dělalo sloupce 260px a 11px. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .research--kurz .ca-split { grid-template-columns: 260px minmax(0, 1fr); gap: 0 48px; }
}

/* --- Široké monitory ----------------------------------------------------- */

/* Nad 1500 px je místa dost na širší sidebar i o něco delší řádek. Text roste
   jen do 84 znaků; za tou hranicí se oko na dalším řádku hůř trefuje zpět. */
@media (min-width: 1500px) {
  .research--kurz .ca-split { grid-template-columns: 340px minmax(0, 1fr); gap: 0 88px; }
  .research--kurz .research__prose p,
  .research--kurz .research__prose ul,
  .research--kurz .research__prose ol { max-width: 84ch; }
  .ca-nav__inner { min-height: 80px; }
}

/* --- Hlavní akce kurzu --------------------------------------------------- */

.ca-overview__cta { margin: 0 0 46px; }
.ca-btn--lg {
  min-height: 60px;
  padding: 0 40px;
  font-size: 17px;
}

/* --- Dokončená lekce ----------------------------------------------------- */

/* Ztlumí se text, ne štítek. Kdyby zšedlo všechno, splynula by hotová lekce
   s tou, která ještě není napsaná — a to jsou opačné stavy. */
.ca-lesson.is-done .ca-lesson__title,
.ca-lesson.is-done .ca-lesson__lede { color: var(--muted-2); }
.ca-lesson.is-done .ca-lesson__no { color: var(--dim); }
.ca-lesson.is-done .ca-lesson__state { color: var(--accent); }
.ca-side__item.is-done .ca-side__link { color: var(--muted-2); }
.ca-side__item.is-done.is-current .ca-side__link { color: var(--ink); }

/* --- Jméno firmy s bublinou ---------------------------------------------- */

/* Podtržení tečkované, ne plné — plné by se pletlo s odkazem, a tohle nikam
   nevede. Bublina se otevírá na hover i na fokus, aby existovala i bez myši. */
.ent {
  position: relative;
  color: var(--ink);
  border-bottom: 1px dotted var(--line-accent);
  cursor: help;
}
.ent--plain { border-bottom: 0; cursor: inherit; }
.ent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ent__pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 30;
  width: max-content;
  max-width: 320px;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg-deep);
  border: 1px solid var(--line-accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease;
}
.ent:hover .ent__pop,
.ent:focus .ent__pop,
.ent.is-open .ent__pop { opacity: 1; visibility: visible; }

/* U kraje okna by bublina utekla ven; skript ji překlopí doprava. */
.ent__pop.is-right { left: auto; right: 0; }

@media (max-width: 560px) {
  .ent__pop { max-width: min(280px, 80vw); }
}

/* --- Barevné zvýraznění -------------------------------------------------- */

.hl { color: var(--r-1); }
.hl--amber  { color: var(--r-1); }
.hl--cyan   { color: var(--r-2); }
.hl--green  { color: var(--r-3); }
.hl--burn   { color: var(--r-4); }
.hl--purple { color: var(--r-5); }

.num {
  font-family: var(--mono);
  font-size: 0.94em;
  letter-spacing: 0.01em;
  color: var(--r-1);
}
.num--amber  { color: var(--r-1); }
.num--cyan   { color: var(--r-2); }
.num--green  { color: var(--r-3); }
.num--burn   { color: var(--r-4); }
.num--purple { color: var(--r-5); }

/* --- Karty s údaji ------------------------------------------------------- */

.statgrid { margin: 34px 0; }
.statgrid__cap {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.statgrid__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.statgrid__item { background: var(--bg-alt); padding: 20px 18px 22px; }
.statgrid__v {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--r-1);
}
.statgrid__v--amber  { color: var(--r-1); }
.statgrid__v--cyan   { color: var(--r-2); }
.statgrid__v--green  { color: var(--r-3); }
.statgrid__v--burn   { color: var(--r-4); }
.statgrid__v--purple { color: var(--r-5); }
.statgrid__l {
  margin: 9px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* --- Přehled kurzu: mřížka ----------------------------------------------- */

/* Stejné rozvržení jako u lekce, aby přechod mezi přehledem a lekcí nepřeskočil.
   Stav a akce vlevo, obsah vpravo — dřív šly statistiky přes celou šířku jako
   dvě skoro prázdné krabice a seznam lekcí zabíral třetinu okna. */
.ca-course-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0 72px;
  align-items: start;
  padding-bottom: 30px;
}
.ca-course-side {
  position: sticky;
  top: 96px;
  padding: 24px 22px 26px;
  background: var(--bg-deep);
  border: 1px solid var(--line-frame);
}
.ca-course-side__stav {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}
.ca-course-side__cta { width: 100%; margin-top: 20px; }
.ca-course-main { min-width: 0; }
.ca-course-block + .ca-course-block { margin-top: 52px; }

/* Body "co budete umět" ve dvou sloupcích — pět řádků pod sebou nechávalo
   napravo pruh prázdna, který nic nenesl. */
.ca-learn--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 0 44px;
  max-width: none;
}

@media (min-width: 1500px) {
  .ca-course-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 0 88px; }
}

@media (max-width: 1024px) {
  .ca-course-grid { display: block; }
  .ca-course-side {
    position: static;
    margin-bottom: 40px;
  }
  .ca-course-block + .ca-course-block { margin-top: 40px; }
}

/* --- Hlavička lekce uvnitř sloupce --------------------------------------- */

/* U lekce hlavička nestojí nad mřížkou, ale v hlavním sloupci vedle obsahu
   kurzu — jinak vedle ní zbývala víc než polovina okna prázdná. Odsazení
   shora tedy patří mřížce, ne hlavičce. */
.research__head--inline { padding-top: 0; padding-bottom: 6px; }
.research--kurz .ca-split { padding-top: 40px; }
.research--kurz .ca-side { top: 96px; }

/* Titulek smí být širší, když nesedí sám na řádku přes celé okno. */
.research__head--inline .research__title { max-width: 22ch; }
.research__head--inline .research__lede { max-width: 62ch; }

/* --- Logo firmy ----------------------------------------------------------
   Dlaždice stojí v hlavičce analýzy a ve výpisu analýz. Má dva stavy: obrázek,
   když v src/assets/img/logo leží soubor pojmenovaný tickerem, a monogram,
   když neleží. Monogram je záměrný stav — logo je ochranná známka a nedá se
   dokreslit —, takže musí vypadat jako součást návrhu, ne jako díra po
   nenačteném obrázku. Proto rámeček a podklad drží dlaždice, ne obrázek.

   Selektory jsou dvoutřídní (`.ca .ca-logo`) kvůli pasti popsané níž:
   uvnitř `.research` jsou pravidla kvalifikovaná elementem se specificitou
   (0,1,1), která by jednotřídní komponentu přebila.
   ------------------------------------------------------------------------- */

.ca .ca-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line-frame);
  border-radius: 3px;
}
/* Odznak si nese vlastní 22px shora, takže dlaždice žádné odsazení zdola
   nepotřebuje — jinak mezi nimi zeje 40 px. */
.ca .ca-logo--lg { width: 56px; height: 56px; margin: 4px 0 0; }
.ca .ca-logo--sm { width: 44px; height: 44px; }
.ca .ca-logo__img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain;
}
/* Monogram je ticker, ne zkratka názvu: v odznaku nad nadpisem stojí totéž,
   takže se čtenář nemusí učit dvě značky pro jednu firmu. */
.ca .ca-logo__mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.ca .ca-logo--lg .ca-logo__mono { font-size: 12.5px; }

/* Skutečná loga jsou nápisy, ne ikony: Palantir má poměr 4 : 1, SpaceX 8 : 1.
   Ve čtverci by z osmi ku jedné zbyl proužek vysoký sedm pixelů. Obrázek proto
   dlaždici opouští — drží se jen výška, šířka se řídí logem a rámeček
   s podkladem odpadají, protože nápis v rámečku vypadá jako tlačítko.
   Čtverec zůstává monogramu, kde má poměr 1 : 1 smysl. */
.ca .ca-logo:not(.ca-logo--mono) {
  width: auto;
  justify-content: flex-start;
  background: none;
  border: 0;
  border-radius: 0;
}
.ca .ca-logo--lg:not(.ca-logo--mono) { height: 34px; max-width: 230px; }
.ca .ca-logo--sm:not(.ca-logo--mono) { height: 26px; max-width: 150px; }
.ca .ca-logo__img { width: auto; height: 100%; padding: 0; }
.ca .ca-logo--mono .ca-logo__img { width: 100%; padding: 6px; }

/* Výpis analýz: logo vlevo, text vedle. Sloupec loga má pevnou šířku, aby
   text u všech řádků začínal na stejném místě — logo si uvnitř drží vlastní
   šířku podle svého poměru. Text má vlastní obal, jinak by se odstavce
   zalomily pod logo. */
.ca .research-item__link {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 22px;
  align-items: start;
}
.ca .research-item__link > .ca-logo { justify-self: start; }
.ca .research-item__text { min-width: 0; }

/* Na telefonu jde logo nad text, ne vedle něj. Sloupec 104 px vypadá na 390 px
   nevinně, ale textu zbylo 250 px a perex se lámal po třech slovech. */
@media (max-width: 560px) {
  .ca .research-item__link { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
  .ca .ca-logo--sm:not(.ca-logo--mono) { height: 22px; max-width: 130px; }
  .ca .ca-logo--mono.ca-logo--sm { width: 38px; height: 38px; }
  .ca .ca-logo--sm .ca-logo__mono { font-size: 10px; }
}

/* --- Barva podle typu entity --------------------------------------------- */

/* Jméno bylo dosud bílé jako okolní text a odlišovalo ho jen tečkované
   podtržení. Barva podle typu říká, na co se čtenář dívá, ještě než na to
   najede — a rozliší firmu od burzy, indexu a tickeru. */
.ent--firma  { color: var(--r-1); border-bottom-color: rgba(232, 163, 61, 0.45); }
.ent--trh    { color: var(--r-2); border-bottom-color: rgba(95, 168, 211, 0.45); }
.ent--index  { color: var(--r-5); border-bottom-color: rgba(155, 135, 212, 0.45); }
.ent--ticker {
  color: var(--r-1);
  border-bottom-color: rgba(232, 163, 61, 0.45);
  font-family: var(--mono);
  font-size: 0.92em;
  letter-spacing: 0.02em;
}

/* --- Kalkulačka ---------------------------------------------------------- */

.ca-calc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ca-calc__col { background: var(--bg-alt); padding: 24px 22px 26px; }
.ca-calc__label,
.ca-calc__note {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-calc__value {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  color: var(--r-1);
}
.ca-calc__note { margin-top: 12px; text-transform: none; letter-spacing: 0.04em; }

/* Vstupy scénáře bydlí přímo ve sloupci s jeho výsledkem — člověk mění tempo
   růstu tam, kde rovnou vidí, co to udělalo. V postranním panelu zůstává jen
   to, co mají všechny tři scénáře společné. */
.ca-calc__in { display: flex; gap: 10px; margin: 14px 0 4px; }
.ca-calc__in label { flex: 1 1 0; min-width: 0; }
.ca-calc__in span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-calc__in input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg-deep);
  border: 1px solid var(--line-frame);
}
.ca-calc__in input:focus { border-color: var(--line-accent); }
.ca-calc__verdict {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
/* Zeleně, když je cena pod hodnotou — ale bez slova „kupovat“. Vzorec dává
   odhad, ne pokyn, a barva to nesmí přetlačit do doporučení. */
.ca-calc__verdict.is-pod { color: var(--r-3); }
.ca-calc__verdict.is-nad { color: var(--r-4); }
/* Třetí stav vedle „pod“ a „nad“: výsledek sedí v pásmu, které lekce označuje
   za otázku, ne za odpověď. Barvu proto nedostane ani jednu. */
.ca-calc__verdict.is-tesne { color: var(--ink-2); }

/* Řada let: rok vlevo, dvě čísla vedle sebe. Párovaně proto, že se zadává
   počet akcií a zisk za týž rok — kdyby stály v samostatných blocích, dala by
   se snadno posunout jedna řada proti druhé o rok. */
.ca-years { display: grid; gap: 8px; }
.ca-years__head,
.ca-years__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.ca-years__head span,
.ca-years__no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-years__row input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg-deep);
  border: 1px solid var(--line-frame);
}
.ca-years__row input:focus { border-color: var(--line-accent); }

/* --- Osm zásad z výkazu ---------------------------------------------------- */

/* Řádek nese vedle výsledku i to, co se čím dělilo. Bez toho je podíl jen
   číslo, u kterého se nedá poznat, jestli na tuhle firmu vůbec sedí — a lekce
   staví právě na tom, že u banky nebo u cyklické firmy nesedí. */
.ca-rules { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); }
.ca-rule {
  display: grid;
  grid-template-columns: 30px minmax(0, 1.2fr) minmax(0, 1.5fr) 92px 116px 150px;
  gap: 0 14px;
  align-items: baseline;
  padding: 15px 20px;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
}
.ca-rule:first-child { border-top: 0; }
.ca-rule--head {
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--bg-deep);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ca-rule__no, .ca-rule__formula, .ca-rule__limit, .ca-rule__state {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.ca-rule__name { font-size: 15px; color: var(--ink); }
.ca-rule__value {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.1;
  color: var(--r-1);
}
.ca-rule__state { text-transform: uppercase; letter-spacing: 0.12em; }
/* Stejná logika jako u verdiktu kalkulačky: barva popisuje výsledek, 
   nedává pokyn. „Těsně“ proto nedostane ani zelenou, ani červenou. */
.ca-rule__state.is-ok { color: var(--r-3); }
.ca-rule__state.is-ne { color: var(--r-4); }
.ca-rule__state.is-tesne { color: var(--ink-2); }

/* Pod dvousloupcovým prahem se řádek rozpadne na dvojice popisek–hodnota;
   šest sloupců by se do šířky telefonu nevešlo ani zdaleka. */
/* Automatické rozmístění by tady zradilo: „Vyšlo“ přijde v pořadí hned za
   dvousloupcovým vzorcem a spadne do třicetipixelového sloupce s číslem
   zásady, kde přeteče. Na úzkém displeji proto sedí každá buňka napevno. */
@media (max-width: 900px) {
  .ca-rule { grid-template-columns: 30px minmax(0, 1fr) 110px; row-gap: 7px; }
  .ca-rule--head { display: none; }
  .ca-rule__no      { grid-area: 1 / 1 / 2 / 2; }
  .ca-rule__name    { grid-area: 1 / 2 / 2 / 4; }
  .ca-rule__formula { grid-area: 2 / 2 / 3 / 4; }
  .ca-rule__value   { grid-area: 3 / 2 / 4 / 3; }
  .ca-rule__limit   { grid-area: 3 / 3 / 4 / 4; text-align: right; }
  .ca-rule__state   { grid-area: 4 / 2 / 5 / 4; }
}

.ca-formula {
  margin: 20px 0;
  padding: 18px 20px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--bg-deep);
  border-left: 2px solid var(--line-accent);
  overflow-x: auto;
}
/* --- Analýza s obsahem: šířka -------------------------------------------- */

/* Stejná úvaha jako u lekce v kurzu, jen o dokument dál. Analýza bez obsahu
   drží 1080 px; jakmile jí přibude postranní sloupec, zbyde na text 660 px,
   sankey narazí na svých minimálních 820 a začne rolovat uvnitř sebe, zatímco
   napravo je prázdno. Se sloupcem tedy platí míra sekce, ne míra samostatného
   dokumentu. Změřeno, ne odhadnuto.

   1640 px, ne strop sekce: se sloupcem obsahu a odsazením zbyde na hlavní
   sloupec necelých 1200 px, což je šířka, do které se vejde graf i tabulka
   a přitom se text nerozpadne na pruh u levé hrany dvoumetrového monitoru. */
.ca .research--rail .wrap { max-width: 1640px; }
.research--rail .ca-split {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 0 64px;
}
/* Text zůstává v mezích čitelnosti; zbytek šířky spolknou grafy a tabulky,
   kterých je v analýze třináct a kterým to prospěje. */
.research--rail .research section p { max-width: 78ch; }

/* Popisek pod obrázkem není odstavec, je to jeho součást — a když měl 78ch pod
   kartou širokou 1200 px, vypadal ten rozdíl jako chyba sazby. Dostává proto
   vlastní, širší míru. Na plnou šířku karty nejde schválně: pod 950 px se
   čtyřřádkový výklad při 14 px ještě sleduje, přes celý sloupec už ne. */
.research--rail .how,
.research--rail .cap,
.research--rail .sub { max-width: 110ch; }

/* Sankey měl strop 1000 px, protože se kreslil do pevného souřadnicového
   prostoru a s širším plátnem rostlo i písmo popisků. To řeší sankey.js —
   prostor se odvozuje od skutečné šířky, takže jednotka je vždycky pixel.
   Strop tím ztratil důvod a je pryč: obrázek dostane celý sloupec. */

/* Graf si výšku bere z pixelu, ne z poměru stran. V širokém sloupci by pět
   sloupečků leželo v pruhu 3,5 : 1 a rozdíly mezi nimi by se zploštily. */
.research--rail .chart-box { height: 380px; }
.research--rail .chart-box.tall { height: 440px; }

@media (min-width: 1025px) and (max-width: 1200px) {
  .research--rail .ca-split { grid-template-columns: 220px minmax(0, 1fr); gap: 0 44px; }
}

/* Pod 1024 px platí totéž co u lekce: obsah pod text, jeden sloupec. Pravidlo
   se tu musí zopakovat, protože rail přepisuje mřížku níž v souboru než
   společný mobilní blok — bez toho zůstane na telefonu sloupec 220 px vedle
   textu a stránka roluje do strany. Změřeno na 375 px, ne odhadnuto. */
@media (max-width: 1024px) {
  .research--rail .ca-split { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------------------------------------------------------------------
   Dlouhá analýza — jedna věta upozornění a poznámky na okraji

   POZOR NA SPECIFICITU: `.research` obsahuje pravidla kvalifikovaná elementem
   (`.research p`, `.research h2`) se specificitou (0,1,1). Komponenta s jednou
   třídou je (0,1,0) a tiše prohraje — vykreslí se špatným písmem a odsazením
   a vypadá to jako chyba v CSS, která tam není. Proto `.research .neco`.
   Tahle past už v projektu stála čas třikrát; neúřezávat selektory.
--------------------------------------------------------------------------- */

/* Upozornění pod obsahem v postranním sloupci. Nad titulkem zabíralo tři
   řádky nejlépe viditelného místa; tady je pořád na očích a nestojí v cestě.
   Sloupec je úzký, takže drobnější písmo a jantarová linka jen jako svislý
   akcent — celý rámeček by v 240 px vypadal jako druhá karta. */
.research .ca-side__notice {
  max-width: none;
  margin: 26px 0 0;
  padding: 12px 0 12px 14px;
  border-left: 1px solid var(--line-accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted-2);
}
.research .ca-side__notice b { font-weight: 500; color: var(--ink-3); }

/* Cena akcie pod titulkem analýzy — podle návrhu, varianta 1b.

   **Je to figura, ne próza: bere celý sloupec.** První verze měla
   `max-width: 110ch` jako text a na širokém monitoru vedle ní zbývalo prázdno.

   **Tři stavy, ne dva.** Pod prahem ±15 % je číslo šedé, karta bez nádechu
   a nic se nehlásí; nad prahem se obarví, karta dostane gradient a přibude
   jantarový řádek. Barvit ±1 % stejně jako ±40 % znamená, že barva přestane
   něco znamenat — a upozornění, které svítí pořád, přestane být upozorněním.

   Směr nenese jen barva: procento má znaménko a řádek POZOR má text. */
.research .ca-kurz { margin: 26px 0 0; }

.research .ca-kurz__karta {
  border: 1px solid var(--line-frame);
  background: var(--bg-deep);
  padding: 24px 26px 20px;
}
.research .ca-kurz__karta[data-stav="up"] {
  background-image: linear-gradient(to top, rgba(111, 191, 139, 0.16) 0%, rgba(15, 18, 23, 0) 52%);
}
.research .ca-kurz__karta[data-stav="down"] {
  background-image: linear-gradient(to top, rgba(210, 112, 106, 0.16) 0%, rgba(15, 18, 23, 0) 52%);
}

.research .ca-kurz__vrch {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
}
.research .ca-kurz__dnes { min-width: 0; }
.research .ca-kurz__tehdy { flex: 0 0 auto; text-align: right; }

.research .ca-kurz__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  max-width: none;
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  line-height: 1.2;
  color: var(--muted-3);
}
.research .ca-kurz__tehdy .ca-kurz__meta { justify-content: flex-end; }
.research .ca-kurz__tick { color: var(--accent); }

.research .ca-kurz__cenaRadek {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: baseline;
  max-width: none;
  margin: 0;
}
/* `tabular-nums` proto, že se cena při obnovení přepíše: bez pevné šířky
   číslic by se řádek pod rukou posunul a vypadalo by to jako překreslení
   stránky, ne jako nová cena. */
.research .ca-kurz__cena {
  font-family: var(--mono);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}
.research .ca-kurz__pct {
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
}
.research .ca-kurz__karta[data-stav="up"] .ca-kurz__pct { color: var(--r-3); }
.research .ca-kurz__karta[data-stav="down"] .ca-kurz__pct { color: var(--r-4); }
.research .ca-kurz__odStitek {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted-3);
}
.research .ca-kurz__tehdyCena {
  max-width: none;
  margin: 0;
  font-family: var(--mono);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--muted-2);
}

/* Křivka bere celou šířku karty — je to figura a nese průběh, ne ozdobu.
   Výška je pevná v pixelech, protože souřadnice kresby jsou v pixelech. */
.research .ca-kurz__graf {
  position: relative;
  width: 100%;
  height: 130px;
}
.research .ca-kurz__graf svg { display: block; width: 100%; height: 100%; }
.research .ca-kurz__cara { stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.research .ca-kurz__zaklad { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.research .ca-kurz__graf[data-stav="up"] .ca-kurz__cara { stroke: var(--r-3); }
.research .ca-kurz__graf[data-stav="up"] .ca-kurz__plocha { fill: rgba(111, 191, 139, 0.12); }
.research .ca-kurz__graf[data-stav="down"] .ca-kurz__cara { stroke: var(--r-4); }
.research .ca-kurz__graf[data-stav="down"] .ca-kurz__plocha { fill: rgba(210, 112, 106, 0.12); }
.research .ca-kurz__graf[data-stav="klid"] .ca-kurz__cara { stroke: var(--muted-2); }
.research .ca-kurz__graf[data-stav="klid"] .ca-kurz__plocha { fill: rgba(134, 140, 150, 0.10); }

/* Značky jsou HTML, ne SVG: kolečko v HTML zůstane kolečkem, ať se rámeček
   zvětší jakkoli. Tak je má i návrh. */
.research .ca-kurz__bodVydani,
.research .ca-kurz__bodDnes {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
}
.research .ca-kurz__bodVydani { background: var(--bg-deep); border: 1.5px solid var(--accent); }
.research .ca-kurz__bodDnes { background: var(--muted-2); }
.research .ca-kurz__graf[data-stav="up"] .ca-kurz__bodDnes { background: var(--r-3); }
.research .ca-kurz__graf[data-stav="down"] .ca-kurz__bodDnes { background: var(--r-4); }

.research .ca-kurz__popisVydani {
  position: absolute;
  margin-left: 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--accent);
}

.research .ca-kurz__osa {
  display: flex;
  justify-content: space-between;
  max-width: none;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--muted-3);
}

.research .ca-kurz__pozor {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: baseline;
  max-width: none;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-accent);
}
.research .ca-kurz__pozorStitek {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.research .ca-kurz__pozorText {
  flex: 1 1 320px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
}

.research .ca-kurz__pozn {
  max-width: 110ch;
  margin: 16px 0 0;
  padding: 4px 0 4px 16px;
  border-left: 1px solid var(--line-accent);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-2);
}

.research .ca-kurz__stav { font-size: 14px; font-weight: 300; color: var(--muted-2); }
.research .ca-kurz__radek { max-width: none; margin: 0; }

/* Lišta, která jede s textem (varianta 1c). Analýza je dlouhá; kdo je v půlce
   u ocenění, hlavičku už nevidí. Objeví se teprve tehdy, až plný blok vyjede
   nahoru — dokud je vidět, byla by to druhá kopie téhož. */
.ca-lista {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 60;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-accent);
}
.ca-lista[data-stav="up"] {
  background-image: linear-gradient(to top, rgba(111, 191, 139, 0.2) 0%, rgba(15, 18, 23, 0) 52%);
}
.ca-lista[data-stav="down"] {
  background-image: linear-gradient(to top, rgba(210, 112, 106, 0.2) 0%, rgba(15, 18, 23, 0) 52%);
}
.ca-lista__in {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 11px var(--pad-x);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.ca-lista__tick { font-size: 10px; letter-spacing: 0.14em; color: var(--accent); }
.ca-lista__cena { font-size: 16px; color: var(--ink); }
.ca-lista__pct { font-size: 12px; color: var(--muted-2); }
.ca-lista[data-stav="up"] .ca-lista__pct { color: var(--r-3); }
.ca-lista[data-stav="down"] .ca-lista__pct { color: var(--r-4); }
.ca-lista__text {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--muted-3);
}

/* Na telefonu drží lišta jen ticker, cenu a procento — tak to žádá návrh.
   Datum vydání se skryje, protože čtyři údaje na 375 px se zalomí do dvou
   řádků a lišta pak ukrajuje pětinu obrazovky. */
@media (max-width: 620px) {
  .research .ca-kurz__karta { padding: 18px 16px 16px; }
  .research .ca-kurz__vrch { gap: 14px 20px; }
  .research .ca-kurz__tehdy { text-align: left; }
  .research .ca-kurz__tehdy .ca-kurz__meta { justify-content: flex-start; }
  .research .ca-kurz__graf { height: 96px; }
  .ca-lista__text { display: none; }
}

/* Snímek z prezentace firmy a citace vedení. Dvě komponenty, které přinesla
   analýza Cloudflare — starší tři je nepoužívaly.

   Scope je `.research .x` (0,2,0) schválně: uvnitř `.research` stojí pravidla
   kvalifikovaná elementem (`.research p`) se specificitou (0,1,1) a komponenta
   s jednou třídou by tiše prohrála. Tahle past v projektu stála čas třikrát. */
.research .slide {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 6px;
  border: 1px solid var(--line-frame);
  border-radius: 6px;
}
.research .slide-cap {
  max-width: 110ch;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted-3);
}

/* Citace vedení. Kurzíva nese, že jsou to cizí slova, a jméno pod ní říká
   čí — bez toho je citace jen odstavec v uvozovkách. */
.research .quote {
  max-width: 110ch;
  margin: 22px 0;
  padding: 18px 0 18px 20px;
  border-left: 2px solid var(--r-5);
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.7;
  color: var(--ink-2);
}
.research .quote .who {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--r-5);
}

/* Upozornění se objevuje třikrát a nikdy v cestě: tady pod titulkem, jako
   trvalý odkaz vedle obsahu a v plném znění v patě. */
.research .research__notice {
  max-width: 68ch;
  margin: 26px 0 0;
  padding: 12px 0 12px 18px;
  border-left: 1px solid var(--accent);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
}

/* Poznámka patří vedle odstavce, který komentuje. Na širokém monitoru ji CSS
   zvedne do pravého okraje sloupce; na telefonu zůstane v toku jako odsazený
   blok, protože poznámka bez okraje patří tam, kde se čte. */
.research .mnote {
  display: block;
  margin: 18px 0;
  padding: 12px 0 12px 16px;
  border-left: 1px solid rgba(232, 163, 61, 0.4);
}
.research .mnote__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.research .mnote__body {
  display: block;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
}

/* Dost místa na skutečný okraj. Poznámka plave k pravé hraně textového
   sloupce a zůstává *uvnitř* něj — záporný okraj by ji vysunul za obal
   a poslal celou stránku do strany, což je jediné, co poznámka nesmí. */
@media (min-width: 1240px) {
  .research .mnote {
    float: right;
    clear: right;
    width: 190px;
    margin: 6px 0 18px 28px;
  }
}

/* --- Odznak v liště a scény odměn ---------------------------------------- */

/* Odznak je cíl přeletu. Bez něj by popup XP odletěl doprostřed ničeho, takže
   nesedí jen na přehledu, ale v navigaci každé stránky sekce — a tím se
   z „někde jsou nějaká XP“ stane místo, kam se dá podívat. */
.ca .ca-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.ca .ca-chip:hover { border-color: var(--line-accent); background: var(--bg-deep); }
.ca .ca-chip__znak {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-accent);
  color: var(--accent);
}
.ca .ca-chip__znak svg { width: 15px; height: 15px; }
.ca .ca-chip__text { display: grid; gap: 5px; min-width: 0; }
.ca .ca-chip__radek {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ca .ca-chip__nazev { color: var(--ink); letter-spacing: 0.1em; }
/* V odznaku je pruh o pixel vyšší než v textu stránky. Dva pixely vedle
   devítibodového písma a šestadvacetipixelového znaku zaniknou i při
   správném kontrastu — je to otázka plochy, ne barvy.

   Dráha je tady laděná do oranžova, ne šedá jako jinde. Pruh v liště je
   jediný ukazatel, který je vidět na každé stránce sekce, takže má nést
   barvu XP i prázdný — jinak se při nule čte jako škrábanec v rámečku.

   Alfa 0,52 je měřená, ne odhadnutá. Jedna barva tu má dvě úlohy a nad
   3 : 1 obě nezvládne:

     alfa   dráha vs stránka   výplň vs dráha
     0,40        2,36 : 1          3,59 : 1
     0,46        2,71 : 1          3,13 : 1
     0,52        3,14 : 1          2,70 : 1   ← tahle
     0,58        3,60 : 1          2,36 : 1

   Přednost dostala viditelnost dráhy, protože to je ta otázka, kterou
   norma klade prvkům rozhraní: „je tu vůbec něco?“ Naplněnou část odliší
   záře a přejíždějící lesk — tedy věci, které se poměrem jasů neměří. */
.ca .ca-chip .ca-bar {
  width: 108px;
  height: 3px;
  margin: 0;
  overflow: hidden;
  background: rgba(232, 163, 61, 0.52);
}

/* Lesk, který přejíždí po naplněné části.
   Je to jediný pohyb v liště, takže je pomalý a málo kontrastní — čtyři
   vteřiny a průsvitná bílá. Rychlejší nebo výraznější přetahuje pozornost
   z textu, kvůli kterému je člověk na stránce.

   Kreslí se pseudoprvkem uvnitř výplně, takže se pohybuje jen po tom, co je
   opravdu získané. Lesk přes prázdnou dráhu by sliboval postup, který tam
   není. */
.ca .ca-chip .ca-bar__fill {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(232, 163, 61, 0.5);
}
.ca .ca-chip .ca-bar__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: caChipLesk 4s ease-in-out infinite;
}
@keyframes caChipLesk {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
/* Pruh doroste, neskočí — přírůstek má být vidět jako pohyb, ne jako jiná
   hodnota při dalším překreslení. */
.ca .ca-bar__fill { transition: width 900ms cubic-bezier(0.16, 0.84, 0.28, 1); }
/* Potvrzení příjmu ve chvíli, kdy popup dosedne. */
.ca .ca-chip.is-prijem { border-color: var(--accent); background: rgba(232, 163, 61, 0.1); }

/* Odznak stojí v HTML hned za značkou, aby na mobilu zůstal na viditelném
   řádku hlavičky. Na desktopu ho `order` posune na pravý konec, kam patří.
   Uvnitř sbalitelného panelu být nemůže: tam má ve sbaleném stavu nulovou
   velikost, takže by přelet XP mířil do levého horního rohu okna. */
.ca .ca-nav__inner > .ca-brand { order: 0; }
.ca .ca-nav__panel { order: 1; }
.ca .ca-chip { order: 2; }

/* Pořadí ve složené liště. Váže se na `ca-tesno`, tedy na tutéž podmínku,
   která lištu skládá — ne na vlastní číslo o 56 px vedle. */
.ca-tesno .ca-chip { order: 1; margin-left: 14px; padding: 5px 10px; }
.ca-tesno .ca-nav__toggle { order: 2; }
.ca-tesno .ca-nav__panel { order: 3; }
/* Na úzké hlavičce zbude znak a číslo úrovně. Název hodnosti a pruh jsou
   to první, co se dá obětovat — celý údaj je o klik dál na stránce Postup,
   kam odznak vede. `ca-uzko` je mezistupeň: řádek se ještě vejde celý, jen
   bez těchhle dvou kusů čipu. Bez něj by se anglická lišta skládala do
   hamburgeru už na 1340 px, ačkoli jí po jejich odebrání stačí 1200. */
.ca-tesno .ca-chip__nazev,
.ca-uzko .ca-chip__nazev,
.ca-tesno .ca-chip .ca-bar,
.ca-uzko .ca-chip .ca-bar { display: none; }
.ca-tesno .ca-chip__text,
.ca-uzko .ca-chip__text { gap: 0; }

/* Druhá polovina mezistupně: mezery a odsazení v liště. Samotné odebrání
   názvu hodnosti a pruhu posunulo anglickou lištu z 1340 na 1300 px; tohle
   ji dostane pod běžný laptop. Jsou to jednotky pixelů na položku, kterých
   si při rozložené liště nikdo nevšimne — a při složené je to jedno. */
.ca-uzko .ca-nav__inner { gap: 18px; }
.ca-uzko .ca-nav__panel { gap: 16px; }
.ca-uzko .ca-search,
.ca-uzko .ca-user { padding: 0 11px; }

/* Na telefonu zbude ze čipu značka a číslo. „ÚROVEŇ 3 ZE 100" je 162 px a
   spolu se značkou a tlačítkem menu se to na 390 px na jeden řádek nevejde —
   tlačítko pak spadne pod hlavičku. Komentář o řádek výš tohle slibuje už
   dlouho; splněné to nebylo, protože se schovával název hodnosti a pruh, ne
   slova kolem čísla. */
@media (max-width: 520px) {
  .ca .ca-chip__slovo { display: none; }
  .ca .ca-chip { margin-left: 10px; padding: 5px 9px; }
  .ca-nav__inner { gap: 0 10px; }
}

/* --- Účet ----------------------------------------------------------------- */

.ca-ucet { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 60px; }
.ca-ucet__rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.ca-ucet__rail a {
  padding: 7px 0 7px 12px;
  border: 0;
  border-left: 2px solid var(--line);
  color: var(--muted-3);
  font-size: 13px;
  transition: color 140ms ease, border-color 140ms ease;
}
.ca-ucet__rail a:hover { color: var(--ink-3); border-left-color: var(--line-strong); }
.ca-ucet__rail a[aria-current] { color: var(--accent); border-left-color: var(--accent); }

.ca-ucet__telo { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.ca-karta { background: var(--bg-2, #171B21); border: 1px solid var(--line); border-radius: 8px; padding: 24px 26px; scroll-margin-top: 96px; }
.ca-karta__n { font-family: var(--serif); font-size: 20px; margin: 0 0 14px; color: var(--ink); }
.ca-karta__p { margin: 0 0 12px; font-size: 14px; line-height: 1.62; color: var(--ink-3); max-width: 74ch; }
.ca-karta__pozn { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted-3); max-width: 74ch; }
.ca-karta__odkazy { display: flex; gap: 20px; flex-wrap: wrap; margin: 16px 0 0; font-size: 13px; }

.ca-udaj { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.ca-udaj__l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-3); }
.ca-udaj__v { font-family: var(--mono); font-size: 14px; color: var(--ink); }

/* Řádek předvolby: text vlevo, ovládání vpravo. Na telefonu pod sebou —
   přepínač vedle třířádkového vysvětlení nemá kam. */
.ca-volba { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.ca-volba:first-of-type { border-top: 0; padding-top: 4px; }
.ca-volba__t { min-width: 0; }
.ca-volba__n { display: block; font-size: 14px; color: var(--ink); }
.ca-volba__p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted-3); max-width: 60ch; }

/* Spínač. Vidět je dráha 46×26, ale **tlačítko samo má 44 px na výšku** —
   cíl pod tou hranicí si projekt nikde jinde nedovolí a rozšířit ho jen
   pseudoprvkem znamená, že se to nedá změřit na prvku, na který se sahá.
   Dráhu proto kreslí `::before`, ne pozadí tlačítka. */
.ca-spinac {
  flex: none;
  position: relative;
  width: 46px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.ca-spinac::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 26px;
  margin-top: -13px;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  transition: background 160ms ease, border-color 160ms ease;
}
.ca-spinac span {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--muted-3);
  border-radius: 50%;
  transition: left 160ms ease, background 160ms ease;
}
.ca-spinac[aria-checked="true"]::before { background: rgba(232, 163, 61, 0.18); border-color: #8A6524; }
.ca-spinac[aria-checked="true"] span { left: 24px; background: var(--accent); }
.ca-spinac[aria-disabled="true"] { cursor: not-allowed; opacity: 0.6; }
.ca-spinac:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 6px; }

.ca-prepinac-dvoj { flex: none; display: inline-flex; margin: 6px 0; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.ca-prepinac-dvoj a {
  padding: 8px 16px;
  border: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted-3);
}
.ca-prepinac-dvoj a[aria-current] { background: #1F2630; color: var(--ink); }

.ca-postup-h { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ca-postup-h__znak { flex: none; width: 44px; height: 44px; color: var(--accent); }
.ca-postup-h__znak svg { width: 100%; height: 100%; }
.ca-postup-h__nazev { display: block; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.ca-postup-h__lvl { display: block; font-size: 12.5px; color: var(--muted-3); margin-top: 2px; }
.ca-postup-h__xp { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted-3); margin-top: 6px; }

.ca-cisla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
.ca-cislo { background: var(--bg-deep); padding: 13px 15px; }
.ca-cislo__l { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-3); }
.ca-cislo__v { display: block; font-family: var(--mono); font-size: 17px; color: var(--ink); margin-top: 5px; }

/* Prázdný stav. Není to chybová hláška — je to odpověď, tak vypadá jako
   obsah, ne jako porucha. */
.ca-prazdno { border: 1px dashed var(--line-strong); border-radius: 6px; padding: 18px 20px; }
.ca-prazdno__l { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.ca-prazdno__t { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--muted-3); max-width: 72ch; }
.ca-prazdno__t:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .ca-ucet { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Rail se na úzkém okně mění na vodorovný pruh. `position: sticky` by
     z něj udělal lištu, která zabírá třetinu telefonu. */
  .ca-ucet__rail { position: static; flex-direction: row; overflow-x: auto; gap: 0; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
  .ca-ucet__rail a { flex: none; padding: 8px 14px 10px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .ca-ucet__rail a[aria-current] { border-left-color: transparent; border-bottom-color: var(--accent); }
}
@media (max-width: 600px) {
  .ca-karta { padding: 20px 18px; }
  .ca-volba { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ca-cisla { grid-template-columns: minmax(0, 1fr); }
}

/* Omezení pohybu z předvoleb. Systémové `prefers-reduced-motion` má vlastní
   blok výš a platí bez ohledu na tohle; tenhle je pro toho, kdo systémové
   nastavení měnit nechce. Scény zůstávají, jen dosednou. */
.ca-klid *,
.ca-klid *::before,
.ca-klid *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

/* --- hlavička přehledu ---------------------------------------------------- */

.ca .ca-uvod { align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.ca .ca-uvod__t { flex: 1 1 260px; min-width: 0; }
.ca .ca-uvod__meta {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted-3);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ca .ca-uvod__oddel { opacity: 0.5; }
/* Zelená a šedá, ne zelená a červená: zavřený trh není špatná zpráva. */
.ca [data-ca-trh][data-stav="otevreno"] { color: var(--r-3, #6FBF8B); }

/* --- pruh trhů ------------------------------------------------------------ */

/* Sedm dlaždic v jednom řádku; na užší obrazovce se pás posouvá do strany
   uvnitř sebe (`overflow-x`), ne stránka. Dlaždice má pevnou minimální
   šířku, aby čára měla vždycky stejné měřítko. */
.ca .ca-pruh {
  margin: 22px 0 6px;
  border: 1px solid var(--line);
  background: var(--bg-deep);
}
.ca .ca-pruh__hlava {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px 0;
}
.ca .ca-pruh__nadpis {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ca .ca-pruh__kdy {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted-3);
}
.ca .ca-pruh__pas {
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 6px 4px 8px;
  gap: 2px;
}
.ca .ca-pruh__polozka {
  /* 168 px: „Russell 2000 IWM" a „Nasdaq 100 QQQ" se vejdou bez trojtečky
     (změřeno 10. 9. 2026 na 1440 px: sedm dlaždic po 168 = 1176 px). */
  flex: 1 0 168px;
  min-width: 168px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  grid-template-areas: "jmeno graf" "cena graf" "zmena graf";
  align-items: center;
  gap: 1px 8px;
  padding: 6px 8px;
  border-left: 1px solid var(--line-soft);
}
.ca .ca-pruh__polozka:first-child { border-left: 0; }
.ca .ca-pruh__jmeno {
  grid-area: jmeno;
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ca .ca-pruh__jmeno small {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--muted-3);
  margin-left: 5px;
}
.ca .ca-pruh__cena {
  grid-area: cena;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
}
.ca .ca-pruh__zmena {
  grid-area: zmena;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted-3);
  white-space: nowrap;
}
.ca .ca-pruh__zmena[data-smer="nahoru"], .ca .ca-mini[data-smer="nahoru"] { color: var(--r-3, #6FBF8B); }
.ca .ca-pruh__zmena[data-smer="dolu"], .ca .ca-mini[data-smer="dolu"] { color: var(--r-4, #D2706A); }
.ca .ca-pruh__graf { grid-area: graf; width: 56px; height: 28px; }
/* Čára bere barvu z `currentColor`, plocha pod ní je táž barva o síle 0,14:
   tak to kreslí i Yahoo a ve dvou barvách se směr pozná dřív než z čísla. */
.ca .ca-mini { display: block; width: 100%; height: 100%; color: var(--muted-2); overflow: visible; }
.ca .ca-mini polyline { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.ca .ca-mini polygon { fill: currentColor; opacity: 0.14; stroke: none; }
.ca .ca-mini line { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.45; }
@media (max-width: 700px) {
  .ca .ca-pruh { margin-top: 16px; }
  /* Dlaždice na telefonu **širší**, ne užší: pás se posouvá prstem a jméno
     se nekrátí. Na 140 px vyšlo „S&P 5…", na 168 ještě „Russell 2000…"
     (dlaždice tu neroste, sloupec jména má jen 88 px); 184 změřeno čisté. */
  .ca .ca-pruh__polozka { flex-basis: 184px; min-width: 184px; }
  .ca .ca-firma { grid-template-columns: 4.2rem minmax(0, 1fr) 48px auto; }
  .ca .ca-firma__graf { width: 48px; }
}

/* Pole na zkratku firmy. Na rozdíl od hledání v sekci je to **opravdové**
   pole s formulářem, protože míří na jinou stránku a musí fungovat i bez
   JavaScriptu; hledání v sekci zůstalo v liště, kde je na každé stránce. */
.ca .ca-uvod__ticker {
  position: relative;
  position: relative;
  display: flex;
  align-items: center;
  /* Spodkem na spodek odznaku hodnosti. `.ca-uvod` má `align-items:
     flex-start`, takže pole viselo u horního okraje a proti o dvacet pixelů
     vyššímu odznaku vedle sedělo nahoře — v návrhu jsou obě spodní hrany na
     jedné lince. Zarovnává se **spodek**, ne střed: nad polem není nic, kdežto
     pod ním končí i odznak, a společná spodní hrana je to, co oko čte. */
  align-self: flex-end;
  gap: 9px;
  flex: 1 1 320px;
  max-width: 520px;
  /* 52 px, ne 48. Tlačítko uvnitř má 2 px odsazení nahoře i dole, takže
     z 48 px zbude 40 — cíl pod hranicí 44 px, kterou si projekt drží jinde
     a kterou `kontrola-listy.js` měří. Vsazený prvek potřebuje víc výšky,
     než sám zabírá; tatáž úvaha jako u šipky v poli Tickeru. */
  min-height: 52px;
  padding: 0 4px 0 14px;
  background: var(--bg-deep);
  border: 1px solid var(--line-accent);
  border-radius: 6px;
  transition: border-color 160ms ease;
}
.ca .ca-uvod__ticker:focus-within { border-color: var(--accent); }
.ca .ca-uvod__ticker-ikona { width: 15px; height: 15px; flex: none; color: var(--accent); }
.ca .ca-uvod__ticker-vstup {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.ca .ca-uvod__ticker-vstup::placeholder { color: var(--muted-3); letter-spacing: 0.02em; }
/* Tlačítko sahá od okraje k okraji pole, aby mělo 44 px na výšku. Vsazený
   čtvereček s odsazením ze všech stran je hezčí a má 36 px — cíl pod hranicí,
   kterou si projekt drží jinde. Tatáž úvaha jako u šipky v Tickeru. */
.ca .ca-uvod__ticker-ok {
  flex: none;
  width: 46px;
  align-self: stretch;
  margin: 2px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-btn);
  border: 0;
  border-radius: 4px;
  color: #12151A;
  cursor: pointer;
}
.ca .ca-uvod__ticker-ok svg { width: 18px; height: 18px; }
.ca .ca-uvod__ticker-ok:hover { background: var(--accent-hi); }

@media (max-width: 720px) {
  .ca .ca-uvod__ticker { flex: 0 0 100%; max-width: none; }
}

/* Přehled: blok Qvestoru (pole na firmu, naposledy otevřené, sledované a
   firmy z analýz), blok portfolia a odkaz na archiv dole. */
.ca .ca-qv { padding-top: 44px; }
/* Hlavička bloku Qvestoru bez podtitulu a bez linky (Filip, 17. 9. 2026:
   „smaž tento text a lajnu u přehledu“) — pole na firmu hned pod ní je
   samo dost zřetelný předěl. */
.ca .ca-qv .ca-stream__head { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
.ca .ca-qv .ca-uvod__ticker { align-self: auto; flex: none; max-width: none; width: 100%; margin: 4px 0 16px; min-height: 66px; padding-left: 20px; }
.ca .ca-qv .ca-uvod__ticker-ikona { width: 18px; height: 18px; }
.ca .ca-qv .ca-uvod__ticker-vstup { font-size: 15.5px; }
.ca .ca-qv .ca-uvod__ticker-ok { width: 58px; }
.ca .ca-pfb.pf { padding-bottom: 0; padding-top: 54px; }
.ca .ca-pfb .pf__ucet { margin-top: 0; }
.ca .pf__zalozky--odkazy .pf__zalozka { text-decoration: none; }
.ca .ca-qv__nedavne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 26px; }
.ca .ca-qv__popisek { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-3); margin-right: 4px; }
.ca .ca-chip2 { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 13px; min-height: 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2, #171B21); color: var(--ink); text-decoration: none; font-family: var(--mono); font-size: 12px; font-weight: 600; max-width: 100%; }
.ca .ca-chip2 small { font-family: var(--sans); font-weight: 400; font-size: 11.5px; color: var(--muted-2); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca .ca-chip2:hover { border-color: var(--accent); color: var(--accent); }
.ca .ca-qv__mrizka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 48px; }
@media (max-width: 900px) { .ca .ca-qv__mrizka { grid-template-columns: minmax(0, 1fr); } }
.ca .ca-pfb { padding-top: 54px; }
.ca .ca-pfb__nepripojeno { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 22px 24px; background: var(--bg-2, #171B21); border: 1px solid var(--line); border-radius: 8px; }
.ca .ca-pfb__veta { margin: 0; flex: 1 1 320px; font-family: var(--serif); font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.ca .ca-pfb__nepripojeno .ca-btn { margin-top: 0; }
.ca .ca-pfb__dlazdice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.ca .ca-pfb__dlazdice > div { padding: 16px 18px; background: var(--bg-2, #171B21); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.ca .ca-pfb__l { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 8px; }
.ca .ca-pfb__dlazdice b { display: block; font-family: var(--mono); font-size: 21px; font-weight: 500; color: var(--ink); font-feature-settings: 'tnum' 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca .ca-pfb__dlazdice b[data-smer="up"] { color: var(--good, #6FBF8B); }
.ca .ca-pfb__dlazdice b[data-smer="down"] { color: var(--r-4, #D2706A); }
@media (max-width: 720px) { .ca .ca-pfb__dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Řádek pozice v bloku Portfolio: místo čáry je podíl, a ten se na 390 px
   v pevných 48 px lámal na „37,6 / %". Sloupec si bere šířku obsahu. */
.ca .ca-pfb .ca-firma { grid-template-columns: 4.2rem minmax(0, 1fr) auto auto; }
.ca .ca-pfb .ca-firma__graf { width: auto; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.ca .ca-archiv-odkaz { padding-top: 34px; padding-bottom: 14px; text-align: center; }
.ca .ca-archiv-odkaz a { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted-2); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.ca .ca-archiv-odkaz a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Vrstva scén. Popup XP nechává klikat skrz sebe, protože pod ním pokračuje
   čtení; scény úrovně a achievementu si klik berou, aby šly přeskočit. */
.ca-fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.ca-fx__lvl,
.ca-fx__ach { pointer-events: auto; }

@keyframes caFxZavoj { from { opacity: 0; } to { opacity: 1; } }
@keyframes caFxPop {
  0% { opacity: 0; transform: scale(0.72) translateY(14px); }
  55% { opacity: 1; transform: scale(1.06) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Pořadí je schválně translate → scale: kdyby se škálovalo první, zmenšil by
   se i posun a popup by doletěl jen do půlky cesty k odznaku. */
@keyframes caFxLet {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--fx-dx, 30vw), var(--fx-dy, -38vh)) scale(0.42); }
}
@keyframes caFxPryc { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
@keyframes caFxKruh { from { opacity: 0.85; transform: scale(0.6); } to { opacity: 0; transform: scale(2.6); } }
@keyframes caFxZnak {
  0% { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  60% { opacity: 1; transform: scale(1.08) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes caFxText { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes caFxSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes caFxAch {
  0% { opacity: 0; transform: translateX(40px); }
  70% { opacity: 1; transform: translateX(-4px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes caFxOtoc { from { opacity: 0; transform: rotate(-90deg) scale(0.6); } to { opacity: 1; transform: rotate(0deg) scale(1); } }

.ca-fx__xp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* Závoj má dvě vrstvy: rovnoměrné ztmavení a nad ním jantarová záře.
   Původní jednovrstvý přechod ztmavoval jen okraje, takže uprostřed — přesně
   tam, kde stojí „+100" — prosvítal nadpis lekce a odměna se v něm ztrácela.
   Neblokuje se dál nic; `pointer-events` zůstávají vypnuté a text pod závojem
   je pořád vidět, jen potlačený. */
.ca-fx__zavoj {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 38% at 50% 46%,
      rgba(232, 163, 61, 0.16) 0%, rgba(232, 163, 61, 0.04) 44%, rgba(232, 163, 61, 0) 72%),
    rgba(11, 13, 17, 0.88);
  animation: caFxZavoj 300ms ease both;
}
.ca-fx__pop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: caFxPop 620ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.ca-fx__pop.is-let { animation: caFxLet 640ms cubic-bezier(0.5, 0, 0.75, 0) both; }
.ca-fx__pop.is-pryc { animation: caFxPryc 420ms ease both; }
.ca-fx__kruh {
  position: absolute;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(232, 163, 61, 0.55);
  border-radius: 50%;
  animation: caFxKruh 1100ms ease-out both;
}
.ca-fx__kruh--2 { border-color: rgba(232, 163, 61, 0.3); animation-delay: 180ms; }
.ca-fx__druh {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.ca-fx__cislo {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(72px, 13vw, 150px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.ca-fx__xpl {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.ca-fx__linka { width: 56px; height: 1px; margin: 26px 0 18px; background: rgba(232, 163, 61, 0.5); }
.ca-fx__popis {
  max-width: 26ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: var(--muted-2, #BDB9B1);
}

.ca-fx__lvl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ca-fx__lzavoj { position: absolute; inset: 0; background: var(--bg-deep); opacity: 0.94; animation: caFxZavoj 340ms ease both; }
.ca-fx__lzare {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 54% 46% at 50% 44%,
    rgba(232, 163, 61, 0.18) 0%, rgba(232, 163, 61, 0.04) 42%, rgba(232, 163, 61, 0) 72%);
  animation: caFxZavoj 600ms ease both;
}
.ca-fx__lstred {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  text-align: center;
}
.ca-fx__lkick {
  margin: 0 0 38px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--accent);
  animation: caFxText 500ms ease both;
}
.ca-fx__znak {
  display: grid;
  place-items: center;
  width: clamp(118px, 17vw, 168px);
  height: clamp(118px, 17vw, 168px);
  border: 1px solid rgba(232, 163, 61, 0.6);
  box-shadow: 0 0 70px rgba(232, 163, 61, 0.22);
  animation: caFxZnak 700ms cubic-bezier(0.2, 0.9, 0.3, 1) 120ms both;
}
.ca-fx__znak-in {
  display: grid;
  place-items: center;
  gap: 12px;
  width: 78%;
  height: 78%;
  border: 1px solid rgba(232, 163, 61, 0.28);
}
.ca-fx__znak-svg { display: grid; place-items: center; color: var(--accent); animation: caFxOtoc 620ms ease 380ms both; }
.ca-fx__znak-svg svg { width: 42px; height: 42px; }
.ca-fx__znak-cara { width: 40px; height: 1px; background: rgba(232, 163, 61, 0.5); }
.ca-fx__znak-cislo { margin: 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--accent); }
.ca-fx__ltext { margin-top: 40px; animation: caFxText 560ms ease 300ms both; }
.ca-fx__lradek { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin: 0 0 18px; }
.ca-fx__lmalé { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--muted); }
.ca-fx__lcislo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 104px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: var(--accent);
}
.ca-fx__lnazev {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.ca-fx__lpopis { max-width: 38ch; margin: 0 auto; font-size: 16.5px; line-height: 1.75; color: var(--muted-2, #BDB9B1); }
.ca-fx__lsweep {
  width: min(420px, 80vw);
  height: 1px;
  margin-top: 44px;
  background: rgba(232, 163, 61, 0.45);
  transform-origin: left;
  animation: caFxSweep 900ms cubic-bezier(0.16, 0.84, 0.28, 1) 520ms both;
}
.ca-fx__lpata {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  animation: caFxText 500ms ease 760ms both;
}

.ca-fx__lskip {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--dim);
  animation: caFxText 500ms ease 1400ms both;
}

.ca-fx__ach {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 40px);
  width: min(400px, calc(100vw - 32px));
}
.ca-fx__karta {
  border: 1px solid var(--line-accent);
  background: var(--bg-deep);
  box-shadow: 0 0 54px rgba(232, 163, 61, 0.14);
  animation: caFxAch 620ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.ca-fx__ahlava {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.ca-fx__atelo { display: flex; gap: 18px; align-items: flex-start; padding: 22px 18px 24px; }
/* Znak achievementu, ne zástupný čtvereček. Dokud se kreslil pozadím
   (`linear-gradient` na 16 × 16 px), měl každý ze třiačtyřiceti achievementů
   na kartě odemčení týž oranžový čtverec — a to je jediná obrazovka, kterou
   člověk uvidí právě jednou, přesně ve chvíli, kdy ho to zajímá. */
.ca-fx__aznak {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid var(--line-accent);
  animation: caFxOtoc 620ms ease 200ms both;
}
.ca-fx__aznak svg { width: 28px; height: 28px; display: block; }
.ca-fx__anazev { margin: 0 0 10px; font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--ink); }
.ca-fx__apopis { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
/* Bonus u odemčeného odznaku. Barvu má akcentní, protože je to jediný údaj
   na kartě, který se přičetl někam jinam — do XP v liště. */
.ca-fx__axp {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* Systémové omezení pohybu: scény zůstávají, jen dosednou. Odměna se nemá
   ztratit tomu, komu vadí pohyb — má se jen přestat hýbat. */
@media (prefers-reduced-motion: reduce) {
  .ca-fx__pop,
  .ca-fx__pop.is-let,
  .ca-fx__pop.is-pryc,
  .ca-fx__kruh,
  .ca-fx__znak,
  .ca-fx__znak-svg,
  .ca-fx__ltext,
  .ca-fx__lkick,
  .ca-fx__lsweep,
  .ca-fx__lpata,
  .ca-fx__lskip,
  .ca-fx__karta,
  .ca-fx__aznak,
  .ca-fx__zavoj,
  .ca-fx__lzavoj,
  .ca-fx__lzare { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .ca .ca-bar__fill { transition-duration: 1ms; }
  /* Lesk je dekorace, ne informace — při omezeném pohybu zmizí celý.
     Zpomalit ho by znamenalo nechat běžet to, co člověk vypnout chtěl. */
  .ca .ca-chip .ca-bar__fill::after { animation: none; display: none; }
}

/* --- Položky, které zatím existují jen v druhém jazyce -------------------- */

/* Blok „zatím jen česky" není chybová hláška, je to nabídka. Proto vypadá jako
   zbytek výpisu, jen ztlumeně a s jazykovou značkou — ne jako varování.
   Prázdný anglický seznam by tvrdil „nic tu není“, zatímco pravda je „je toho
   dost, ale v druhém jazyce“, a to je rozdíl, který má člověk vidět. */
.ca .ca-jinak { padding-top: 44px; }
.ca .ca-jinak .research-list,
.ca .ca-jinak .ca-cards { opacity: 0.72; transition: opacity 200ms ease; }
.ca .ca-jinak .research-list:hover,
.ca .ca-jinak .ca-cards:hover { opacity: 1; }

/* Jazyková značka. Mono a malá, aby se četla jako údaj, ne jako nadpis. */
.ca .ca-jazyk {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.ca .research-item--jinak .research-item__title,
.ca .ca-card2--jinak .ca-card2__name { color: var(--ink-2); }

.ca .ca-archive__row--jinak .ca-archive__title { color: var(--ink-2); }
.ca .ca-archive__row--jinak .ca-archive__title:hover { color: var(--ink); }

.ca .ca-empty--jinak { color: var(--muted); }
.ca .ca-empty--jinak a { color: var(--accent); }
.ca .ca-empty--jinak a:hover { color: var(--accent-hi); }

/* Místo grafu, na který nejsou čísla. Prázdný rámeček s nadpisem nad ním
   a legendou pod ním se čte jako rozbitá stránka — tahle věta se čte jako
   to, co to je. Vymyslet ta čísla by bylo horší než obojí. */
.research .chart-chybi {
  margin: 0;
  padding: 18px 20px;
  border: 1px dashed var(--line-strong);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}
.research .chart-chybi b { color: var(--ink-2); }

/* ---- Hledání ----------------------------------------------------------
   Vrstva přes stránku, ne stránka s výsledky. Sekce má sto osmnáct stránek
   a hledá se z rozečtené lekce — odejít kvůli tomu na jinou adresu a pak se
   vracet zpátky je o dvě navigace navíc než hledání samo.

   Panel sedí na 12 vh, ne uprostřed: seznam pod polem roste dolů, a kdyby
   byl vystředěný, celý blok by při psaní poskakoval nahoru a dolů.

   `[hidden]` musí přebít `display: flex` explicitně — atribut nese jen
   `display: none` z prohlížečového stylu a jakékoli `display` v autorském
   stylu ho utne. Přesně tenhle případ dělá „schovaný“ dialog, který je
   vidět. */
.ca .ca-find {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  padding: 12vh 20px 20px;
  background: rgba(8, 10, 13, 0.78);
  overflow-y: auto;
}
.ca .ca-find[hidden] { display: none; }

.ca .ca-find__box {
  width: min(680px, 100%);
  height: max-content;
  background: var(--bg);
  border: 1px solid var(--line-accent);
}

.ca .ca-find__box { position: relative; }
.ca .ca-find__x {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
}
.ca .ca-find__x:hover { color: var(--ink); }

.ca .ca-find__input {
  display: block;
  width: 100%;
  padding: 18px 56px 18px 20px;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-frame);
  outline: 0;
}
.ca .ca-find__input::placeholder { color: var(--muted-2); }
/* Křížek, který si `type="search"` kreslí sám, je v tmavém poli černý na
   tmavém a vypadá jako smítko. Zavírá se Escapem a kliknutím mimo. */
.ca .ca-find__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.ca .ca-find__stav {
  margin: 0;
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
/* Prázdný řádek stavu by pod polem držel patnáct pixelů nicoty. */
.ca .ca-find__stav:empty { display: none; }

.ca .ca-find__list {
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  max-height: 60vh;
  overflow-y: auto;
}
.ca .ca-find__item a {
  display: block;
  padding: 12px 20px;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid transparent;
}
/* Zvýraznění nese `is-on`, protože se řídí klávesnicí i myší zároveň:
   `:hover` sám by při šipkách svítil na dvou místech najednou. */
.ca .ca-find__item.is-on a,
.ca .ca-find__item a:hover {
  color: var(--ink);
  background: var(--bg-alt);
  border-left-color: var(--accent);
}
.ca .ca-find__druh {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.ca .ca-find__t { display: block; margin-top: 3px; font-size: 15.5px; }
.ca .ca-find__s,
.ca .ca-find__p {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.ca .ca-find__s { margin-top: 2px; }
.ca .ca-find__p {
  margin-top: 3px;
  /* Perex je kontext, ne obsah. Dva řádky stačí na rozpoznání, tři už
     tlačí čtvrtý výsledek pod okraj okna. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stránka pod vrstvou se nesmí posouvat, když se roluje v seznamu. */
.ca-find-open, .ca-find-open body { overflow: hidden; }

@media (max-width: 640px) {
  .ca .ca-find { padding: 0; }
  .ca .ca-find__box { width: 100%; min-height: 100%; border: 0; }
  .ca .ca-find__list { max-height: none; }
}

/* ---- přepínač odběru ----------------------------------------------------- */

/* Scope je `.ca .ca-check`, ne holá třída: uvnitř `.ca-prose` platí
   element-qualified pravidla se specificitou (0,1,1) a komponenta stylovaná
   jedinou třídou by tiše prohrála na písmu i odsazení. */

.ca .ca-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  /* 44 px je nejmenší cíl, který se dá na telefonu trefit palcem. Řádek
     s popiskem ho dá i s menším zaškrtávátkem, protože klikací je celý. */
  min-height: 44px;
  padding: 8px 0;
}

.ca .ca-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.ca .ca-check input[type="checkbox"]:disabled { cursor: progress; opacity: 0.5; }
.ca .ca-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--line-accent); outline-offset: 3px; }

.ca .ca-check span { line-height: 1.5; }

.ca .ca-check__stav {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-3);
}
.ca .ca-check__stav[data-druh="ok"] { color: var(--accent); }
.ca .ca-check__stav[data-druh="chyba"] { color: #E0836A; }

/* ---- právní upozornění pod analýzou -------------------------------------- */

/* `.research p` drží prózu na 74ch, což je správně pro text, který se čte
   souvisle. Upozornění se ale nečte souvisle — proletí se — a v širokém
   amberovém boxu z něj ta míra dělá úzký proužek u levé hrany, takže box
   vypadá poloprázdný a text jako by tam zbyl omylem.
   110ch je táž míra, jakou v téhle sazbě mají popisky a „jak číst“: širší než
   próza, pořád ne přes celý sloupec. Scope je `.research .note-box__body p`
   (0,3,0), aby přebil element-qualified `.research p` (0,1,1). */
.research .note-box__body p { max-width: 110ch; }

/* ---- hlavička analýzy: perex a krátké upozornění ------------------------- */

/* Obojí je v širokém sloupci vysázené na míru běžné prózy a zbyde vedle nich
   půl obrazovky prázdna — perex se zalomí do tří řádků a upozornění do čtyř,
   ačkoli místa je dvakrát tolik. Vypadá to jako useknutý text, ne jako sazba.

   Ani jedno se nečte souvisle jako tělo článku: perex se přelétne, upozornění
   se vezme na vědomí. Platí pro ně tedy totéž, co pro popisky a „jak číst“ —
   širší míra než próza. Scope je `.research …` (0,2,0), aby přebil
   element-qualified `.research p` (0,1,1). */
/* Perex a upozornění u ANALÝZY berou celý sloupec.

   Filip na to ukázal potřetí, takže to není odhad vkusu: 92ch perexu dělalo
   při šířce okna 1512 px strop 1023 px a vedle textu zbývalo skoro pět set
   pixelů prázdna. Perex se nečte souvisle jako tělo článku — přelétne se —
   a upozornění se vezme na vědomí; ani jedno tedy míru prózy nepotřebuje.

   `:not(.research--kurz)` je tu proto, že lekce mají užší sloupec s obsahem
   kurzu vedle sebe a tam by celá šířka byla zase něco jiného. Bez toho by
   navíc pravidlo o řádek výš (`.research--kurz .research__lede`) prohrálo
   pořadím — má stejnou specificitu a stojí dřív. */
.research:not(.research--kurz) .research__lede,
.research:not(.research--kurz) .research__notice,
.research:not(.research--kurz) .ca-kurz__pozn { max-width: none; }

.research--kurz .research__lede { max-width: 68ch; }
.research--kurz .research__notice { max-width: 110ch; }

/* =========================================================================
   Ticker — fundamenty libovolné firmy z podání u SEC
   -------------------------------------------------------------------------
   Návrh (Ticker Research.dc.html) je psaný s vlastní paletou a vlastními
   písmy. Tady se překládá na tokeny sekce: #E6E2DA → --ink, #9AA3AF →
   --ink-3, #626B78 → --muted-3, #171B21 → --bg-alt, #232932 → --line.
   Struktura zůstává, obličej je webu.

   **Skoro nic z toho nemá výchozí stav „vidět".** Stránka bez odpovědi
   serveru neukazuje prázdné karty s pomlčkami — ukazuje úvod, co nástroj
   umí. Karty se odkrývají až s daty a `[hidden]` je v tomhle projektu
   `!important`, takže se odkrývají odebráním atributu, ne CSS pravidlem.
   ========================================================================= */

.rsh { --rsh-nav: 72px; padding-bottom: 90px; }

/* --- vyhledání ------------------------------------------------------------ */

.rsh__hledani { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
/* Pole a tlačítko jsou jeden útvar: obal drží rozměr, vstup si nechá vpravo
   místo a tlačítko v něm sedí. Odsazení vpravo musí být větší než tlačítko,
   jinak dlouhá zkratka doběhne pod něj a poslední znak zmizí. */
.rsh__pole { position: relative; display: block; width: 260px; max-width: 100%; }
.rsh__vstup {
  width: 100%;
  min-height: 48px;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 56px 0 14px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  outline: none;
}
.rsh__vstup:focus { border-color: var(--accent); }

/* Napovídání firem pod polem (naseptavac.js) — na Fundamentech i na
   Přehledu. Seznam je absolutně pod polem, takže nic pod ním neposune;
   obal musí být `position: relative` (`.rsh__pole` je, `.ca-uvod__ticker`
   ho dostává níž). Scope `.ca` kvůli element-qualified pravidlům v sekci:
   `.ca li` by jinak vyhrálo nad holou třídou. */
.ca .nasept {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  max-height: 320px;
  overflow-y: auto;
  text-align: left;
}
.ca .nasept[hidden] { display: none; }
.ca .nasept__radek {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 9px 10px;
  border-radius: 5px;
  cursor: pointer;
  margin: 0;
}
.ca .nasept__radek[aria-selected="true"] { background: rgba(255, 255, 255, 0.07); }
.ca .nasept__zkratka {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 500;
}
.ca .nasept__jmeno {
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ca .nasept__radek[aria-selected="true"] .nasept__jmeno { color: var(--ink); }
.rsh__vstup::placeholder { color: var(--muted-3); letter-spacing: 0; }
/* Tlačítko sahá od horního k dolnímu okraji pole. Vsazený čtvereček by byl
   hezčí a měl by 36 px — cíl pod hranicí, kterou si tenhle projekt drží
   jinde (44 px). Takhle má 46×46 a vypadá jako součást pole, ne jako věc
   položená na něj. */
.rsh__tlacitko {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-btn);
  color: var(--bg);
  border: 0;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}
.rsh__sipka { width: 18px; height: 18px; display: block; }
.rsh__tlacitko:hover { background: var(--accent-hi); }
.rsh__tlacitko:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.rsh__tlacitko[disabled] { opacity: 0.5; cursor: default; }
/* Dva pixely místa nahoře, a odsazení se o ně zmenší, takže se řádek nikam
   neposune. Je to kvůli `transform: translateY(-1px)` na `.rsh__navrh:hover`
   o pár set řádků níž: obal je `.rsh__sbal` s `overflow: hidden` (kvůli
   sbalení hlavičky) a jeho výška je přesně výška řádku, takže nadzvednuté
   tlačítko přišlo nahoře o pixel. Vypadá to, jako by mu chyběl horní rámeček
   — na fotce z monitoru s dvojnásobným rozlišením jako by bylo useknuté. */
.rsh__navrhy {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 2px;
  align-items: center;
}
.rsh__navrh {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 6px 11px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.rsh__navrh:hover { color: var(--accent); border-color: var(--line-accent); }

/* Bez JavaScriptu nástroj nefunguje — data se dotahují za běhu. Formulář,
   který jde odeslat a nic neudělá, je horší než formulář, který tam není:
   proto je skrytý a místo něj stojí věta, co se stalo. Stejné řešení jako
   u hledání v liště. */
.rsh__hledani, .rsh__navrhy { display: none; }
.js .rsh__hledani { display: flex; }
.js .rsh__navrhy { display: flex; }
.js .rsh__bezjs { display: none; }

/* --- rozpad tržeb --------------------------------------------------------- */

/* Rozdělení celku: jeden pás složený z dílů. Poměry se čtou z šířky, přesná
   čísla z legendy pod ním — pár procent se do dílu stejně nevejde a popisek
   přes dva pixely je horší než žádný. */
.rsh .rsh__rozpad-pas {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.rsh .rsh__rozpad-pas i {
  display: block;
  height: 100%;
  min-width: 2px;
  transition: opacity 160ms ease;
}
.rsh .rsh__rozpad-pas:hover i { opacity: 0.55; }
.rsh .rsh__rozpad-pas i:hover { opacity: 1; }

/* Výběr položek, které se překrývají: každá na svém řádku. Mřížka je pevná,
   aby čísla vpravo stála pod sebou — u jmen různé délky by se jinak rozjela
   a poměry se přestaly číst. */
.rsh .rsh__karta--siroka { grid-column: 1 / -1; }
.rsh .rsh__rozpad-radky { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.rsh .rsh__rozpad-radek {
  display: grid;
  grid-template-columns: minmax(0, 24ch) 1fr auto;
  align-items: center;
  gap: 10px;
}
.rsh .rsh__rozpad-jmeno {
  font-size: 12px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsh .rsh__rozpad-drah { display: block; height: 10px; background: var(--bg-deep); border-radius: 3px; overflow: hidden; }
.rsh .rsh__rozpad-drah i { display: block; height: 100%; }
.rsh .rsh__rozpad-hod { font-family: var(--mono); font-size: 11px; color: var(--muted-3); white-space: nowrap; }

@media (max-width: 560px) {
  /* Na telefonu se jméno nevejde vedle dráhy a čísla zároveň. Řádek se proto
     zalomí na dva: jméno nad, dráha s číslem pod ním. */
  .rsh .rsh__rozpad-radek { grid-template-columns: 1fr auto; }
  .rsh .rsh__rozpad-jmeno { grid-column: 1 / -1; }
}

/* --- redakční blok: co si o firmě myslíme my ------------------------------- */

/* Vypadá jinak než sekce z výkazu, a je to celý smysl toho bloku: čtenář musí
   na první pohled poznat, co si ověří u SEC a co je náš názor. Odtud rámeček
   a jiné pozadí — sekce s čísly žádné nemají. */
.rsh .rsh__redakce {
  margin-top: 46px;
  padding: 26px 26px 22px;
  border: 1px solid var(--line-accent);
  background: var(--bg-deep);
}
.rsh .rsh__redakce .rsh__cislo { color: var(--accent); }
.rsh__redakce-teze {
  margin: 6px 0 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 74ch;
}
.rsh__redakce-radek {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.rsh__redakce-l {
  flex: 0 0 8.5rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.rsh__redakce-v { font-size: 13.5px; color: var(--ink); }
.rsh__redakce-stitky { display: flex; flex-wrap: wrap; gap: 7px; }
.rsh__stitek {
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.rsh__redakce-podpis {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted-3);
}

@media (max-width: 560px) {
  /* Popisek nad hodnotou, ne vedle ní: osm a půl rem na štítek vedle textu
     nechá na telefonu pro hodnotu pár znaků. */
  .rsh__redakce-radek { flex-direction: column; gap: 4px; }
  .rsh__redakce-l { flex: none; }
}

/* --- lišta při odrolování ------------------------------------------------- */

/* `top` se počítá z **naměřené** výšky `.ca-nav`, ne z čísla v CSS. Lišta
   `position: fixed` a lišta `position: sticky; top: 0` se v layoutu nikdy
   nepotkají — sdílejí jen roh obrazovky — takže by se navigace dala překrýt,
   aniž by cokoli přeteklo. Přesně tahle chyba už jednou byla u ceny akcie
   v analýze; kontrola je `elementFromPoint` uprostřed `.ca-nav`. */
.rsh__lista {
  position: fixed;
  top: var(--rsh-nav);
  left: 0;
  right: 0;
  z-index: 30;
  background: rgba(18, 21, 26, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-110%);
  opacity: 0;
  transition: transform 250ms ease, opacity 250ms ease;
}
.rsh__lista[data-vidno] { transform: translateY(0); opacity: 1; }
.rsh__lista-inner {
  max-width: var(--ca-maxw);
  margin: 0 auto;
  padding: 9px var(--pad-x);
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-feature-settings: 'tnum' 1;
  overflow: hidden;
  white-space: nowrap;
}
.rsh__lista-t { font-weight: 500; letter-spacing: 0.06em; color: var(--ink); }
.rsh__lista-n { font-family: var(--sans); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.rsh__lista-c { color: var(--ink); }
.rsh__lista-d { margin-left: auto; color: var(--muted-3); flex: none; }

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

.rsh__hlava {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: 34px 0 30px;
}
.rsh__stitky { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rsh__tik { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; color: var(--ink); }
.rsh__znak {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-3);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
}
.rsh__nazev {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink);
}
.rsh__podnazev {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.75;
  font-feature-settings: 'tnum' 1;
  margin: 0;
}
.rsh__podnazev span { color: var(--muted-3); }

.rsh__cena {
  text-align: right;
  font-feature-settings: 'tnum' 1;
  border: 1px solid var(--line-frame);
  background: var(--bg-alt);
  padding: 22px 26px 18px;
  min-width: 240px;
}
.rsh__cena--up { background-image: linear-gradient(to top, rgba(111, 191, 139, 0.16) 0%, rgba(18, 21, 26, 0) 55%); }
.rsh__cena--down { background-image: linear-gradient(to top, rgba(210, 112, 106, 0.16) 0%, rgba(18, 21, 26, 0) 55%); }
.rsh__cena-v { font-family: var(--mono); font-size: 38px; font-weight: 500; line-height: 1; color: var(--ink); }
.rsh__cena-m { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 12px; }
.rsh__cena-m b { color: var(--ink); font-weight: 500; }
.rsh__cena-p { font-family: var(--mono); font-size: 11px; color: var(--muted-3); margin-top: 4px; }
/* Karta bez ceny nesmí vypadat jako karta s cenou, u které se něco nenačetlo.
   Proto nemá velké číslo ani přechod — má větu. */
.rsh__cena--bez { text-align: left; max-width: 300px; }
.rsh__cena--bez .rsh__cena-m { margin-top: 0; line-height: 1.7; }

/* --- pruh zastaralosti ---------------------------------------------------- */

.rsh__pruh {
  border: 1px solid rgba(232, 163, 61, 0.35);
  border-radius: 6px;
  padding: 13px 17px;
  margin-bottom: 30px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.rsh__pruh-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); flex: none; }
.rsh__pruh-t { font-size: 13.5px; color: var(--ink-3); line-height: 1.65; margin: 0; }

/* --- sekce ---------------------------------------------------------------- */

.rsh__sekce { padding-top: 60px; }
.rsh__cara { border-top: 1px solid var(--line); }
.rsh__hlavicka { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.rsh__cislo { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted-3); }
.rsh__titul { font-family: var(--serif); font-weight: 600; font-size: 25px; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.rsh__pozn { font-family: var(--mono); font-size: 11px; color: var(--muted-3); }
.rsh__uvodni { font-size: 13.5px; color: var(--muted-3); margin: 0 0 22px; max-width: 70ch; line-height: 1.65; }

/* --- karta s grafem ------------------------------------------------------- */

.rsh__karta {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 22px 16px;
}
.rsh__karta-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rsh__karta-n { font-family: var(--serif); font-weight: 600; font-size: 17px; margin: 0; color: var(--ink); }
.rsh__karta-p { font-family: var(--mono); font-size: 11px; color: var(--muted-3); margin: 4px 0 0; }
.rsh__prepinac { display: flex; gap: 2px; flex: none; }
.rsh__prepinac button {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 10px;
  color: var(--muted-3);
  min-height: 32px;
}
.rsh__prepinac button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.rsh__prepinac button:hover { color: var(--ink-2); }

/* Chart.js má `maintainAspectRatio: true`, dokud se nevypne — canvas si pak
   bere výšku od šířky a přeteče box s pevnou výškou na text pod ním. Skript
   ho vypíná; tahle výška je druhá polovina té dohody. */
.rsh__box { position: relative; height: 280px; margin-top: 18px; }
.rsh__box--nizky { height: 210px; }
.rsh__zdroj { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 11px; }
.rsh__zdroj a, .rsh__odkaz {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
}
.rsh__zdroj a:hover, .rsh__odkaz:hover { color: var(--accent); border-bottom-color: var(--line-accent); }
.rsh__legenda { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.rsh__legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }

.rsh__mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.rsh__mrizka--tri { grid-template-columns: repeat(3, 1fr); gap: 34px; }
/* Položka mřížky má ve výchozím stavu `min-width: auto`, tedy šířku svého
   obsahu — a obsahem je tady `<canvas>`, kterému Chart.js zapisuje šířku do
   atributu. Při zmenšení okna se sloupec proto odmítl zúžit pod **starou**
   šířku plátna a stránka se na telefonu kývala do stran o tři sta pixelů.

   Nejde to vidět na první načtení: plátno tehdy vznikne rovnou malé. Objeví
   se to teprve otočením telefonu nebo zúžením okna, což je přesně ta situace,
   kterou snímek obrazovky neukáže.

   Obě pravidla zabírají i samostatně (změřeno: vypnout jedno nestačí, aby se
   chyba vrátila, vypnout obě ano). Zůstávají obě schválně — první říká, že
   se sloupec **smí** zúžit, druhé že se plátno zúží **s ním**; kdo v budoucnu
   dá do karty jiný prvek s vlastní šířkou, má první z nich už na místě. */
.rsh__mrizka > * { min-width: 0; }
.rsh__box > canvas { max-width: 100%; }

/* --- fakta o firmě -------------------------------------------------------- */

.rsh__fakta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 2.05;
  font-feature-settings: 'tnum' 1;
  margin: 0;
}
.rsh__fakta div { display: flex; gap: 12px; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.rsh__fakta b { color: var(--ink); font-weight: 400; text-align: right; }
.rsh__citat { padding: 4px 0 4px 18px; border-left: 1px solid var(--line-frame); }
.rsh__citat p { font-size: 15px; line-height: 1.7; margin: 0 0 12px; color: var(--ink-2); font-weight: 300; }

/* --- prázdné stavy -------------------------------------------------------- */

/* Prázdný stav není chybová hláška. Říká, **co by muselo existovat**, aby tu
   něco bylo — stejné pravidlo jako u obrazovek administrace, které nemají
   zdroj dat. Vyplnit je věrohodným číslem je přesně to, co si tenhle web
   zakazuje u grafů v analýzách. */
.rsh__prazdno {
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  padding: 26px 24px;
  text-align: center;
}
.rsh__prazdno-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted-3); display: block; margin-bottom: 10px; }
.rsh__prazdno-t { font-size: 13.5px; color: var(--ink-3); line-height: 1.7; margin: 0 auto; max-width: 46ch; }
.rsh__prazdno .rsh__odkaz { display: inline-block; margin-top: 12px; }

/* --- násobky -------------------------------------------------------------- */

.rsh__nasobky {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rsh__nasobek { padding: 22px 24px 20px; border-left: 1px solid var(--line); }
.rsh__nasobek:first-child { border-left: 0; padding-left: 0; }
.rsh__nasobek-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted-3); text-transform: uppercase; }
.rsh__nasobek-v { font-family: var(--mono); font-size: 25px; font-weight: 500; margin: 8px 0 6px; font-feature-settings: 'tnum' 1; color: var(--ink); }
.rsh__nasobek-p { font-family: var(--mono); font-size: 11px; color: var(--muted-3); line-height: 1.6; margin: 0; }
.rsh__nasobek--nic .rsh__nasobek-v { color: var(--muted-3); font-size: 19px; }

/* --- Sankey --------------------------------------------------------------- */

/* Diagram se stylizuje **třídou, ne id**. `#sankey` v pravidle přestane
   platit ve chvíli, kdy je na stránce druhý diagram — a ten druhý se pak
   smrskne na šířku rodiče s pětipixelovými popisky. */
.rsh .sankey { display: block; width: 100%; min-width: 780px; height: auto; }
/* `overflow-y: hidden`: obal se posouvá jen do stran. S `auto` (které
   `overflow-x: auto` dává i svisle) udělala vyšší kopie starého diagramu
   při prolnutí z obalu svislý posuvník — diagram se zúžil o 15 px a
   kolečko myši posouvalo obal místo stránky. */
.rsh__sankey-obal { position: relative; overflow-x: auto; overflow-y: hidden; margin-top: 16px; }
.rsh__jak { font-size: 13px; color: var(--ink-3); line-height: 1.7; margin: 14px 0 0; max-width: 110ch; }
.rsh__jak b { color: var(--ink); font-weight: 500; }

/* --- načítání ------------------------------------------------------------- */

@keyframes rsh-shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.rsh__kost {
  background: linear-gradient(90deg, var(--bg-alt) 25%, #222833 50%, var(--bg-alt) 75%);
  background-size: 200% 100%;
  animation: rsh-shim 1.6s linear infinite;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) { .rsh__kost { animation: none; } }
.rsh__kost--n { height: 16px; width: 38%; }
.rsh__kost--p { height: 10px; width: 56%; margin-top: 10px; }
.rsh__kost--g { height: 190px; margin-top: 18px; }

/* --- chyba ---------------------------------------------------------------- */

.rsh__chyba { border: 1px solid rgba(210, 112, 106, 0.4); border-radius: 6px; padding: 18px 20px; max-width: 70ch; }
.rsh__chyba-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--r-4); display: block; margin-bottom: 8px; }
.rsh__chyba-t { font-size: 14px; color: var(--ink-2); line-height: 1.7; margin: 0; }

/* --- naše analýzy --------------------------------------------------------- */

.rsh__nase { border-top: 1px solid var(--line); }
.rsh__nase a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  flex-wrap: wrap;
}
.rsh__nase a:hover { background: rgba(232, 163, 61, 0.03); }
.rsh__nase-n { font-family: var(--serif); font-size: 16.5px; color: var(--ink); flex: 1; min-width: 240px; }
.rsh__nase-m { font-family: var(--mono); font-size: 11px; color: var(--muted-3); flex: none; }

.rsh__pata {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-3);
  line-height: 1.85;
  max-width: 92ch;
}

@media (max-width: 900px) {
  .rsh__mrizka, .rsh__mrizka--tri { grid-template-columns: 1fr; gap: 18px; }
  .rsh__nasobky { grid-template-columns: 1fr 1fr; }
  .rsh__nasobek { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-right: 16px; }
  .rsh__nasobek:first-child, .rsh__nasobek:nth-child(2) { border-top: 0; }
  .rsh__nazev { font-size: 30px; }
  .rsh__cena { min-width: 0; width: 100%; text-align: left; }
  .rsh__cena-v { font-size: 32px; }
  .rsh__hlava { padding-top: 26px; gap: 24px; }
  .rsh__lista-d { display: none; }
}
@media (max-width: 560px) {
  .rsh__nasobky { grid-template-columns: 1fr; }
  .rsh__nasobek { border-top: 1px solid var(--line); padding-right: 0; }
  .rsh__nasobek:nth-child(2) { border-top: 1px solid var(--line); }
  /* Šířku drží obal, ne vstup — ten je uvnitř vždycky na 100 %. Původní
     `.rsh__tlacitko { width: 100% }` roztáhlo tlačítko přes celé pole, což
     po přesunu dovnitř znamená, že překryje i text. */
  .rsh__pole { width: 100%; }
}

/* Čtyři dlaždice v mřížce postavené na pět. Bez tohohle by pátý sloupec
   zůstal prázdný a strip by končil čárou uprostřed ničeho. */
.rsh__nasobky--ctyri { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .rsh__nasobky--ctyri { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rsh__nasobky--ctyri { grid-template-columns: 1fr; } }

/* =========================================================================
   Ticker — druhé kolo: sbalená hlavička, křivka ceny, síto a pohyb
   ========================================================================= */

/* --- hlavička, která po nalezení firmy ustoupí ---------------------------- */

/* Titulek a perex vysvětlují nástroj tomu, kdo ho vidí poprvé. Jakmile je na
   obrazovce firma, je to půl obrazovky textu, který čtenář právě přečetl —
   proto se sbalí a zůstane řádek s polem.

   Sbaluje se `max-height`, ne `display: none`: mezi „je" a „není" se nedá
   přejít plynule a skok o půl obrazovky vypadá jako chyba vykreslení. */
.rsh__head { align-items: flex-start; }
.rsh__head-in { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rsh__head-t { min-width: 0; }
.rsh__sbal {
  max-height: 320px;
  opacity: 1;
  overflow: hidden;
  visibility: visible;
  transition: max-height 420ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease,
              margin-top 420ms ease, margin-bottom 420ms ease, visibility 0s;
}
/* `visibility: hidden` na konci přechodu, ne jen nulová výška. Sbalený blok
   s `overflow: hidden` je neviditelný, ale tlačítka v něm **zůstávají
   dosažitelná tabulátorem** — člověk, který stránku ovládá klávesnicí, se
   proklikává do prázdna a neví kam. (Chytila to kontrola: Playwright odmítl
   kliknout na rychlou volbu, protože ji překrývá formulář. Myš na ni nedosáhne,
   klávesnice ano — a to je horší, protože to není vidět.) */
.rsh[data-rsh-kompakt] .rsh__sbal {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  visibility: hidden;
  transition: max-height 420ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease,
              margin-top 420ms ease, margin-bottom 420ms ease, visibility 0s 420ms;
}
.rsh[data-rsh-kompakt] .ca-head { padding-top: 26px; padding-bottom: 14px; }

@media (min-width: 900px) {
  .rsh[data-rsh-kompakt] .rsh__head-in {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
  }
  .rsh[data-rsh-kompakt] .rsh__head-f { flex: none; }
  /* Pole se zarovnává **doprava**, ne doleva jako zbytek formuláře. Rychlé
     volby („nebo rovnou: NVDA…") jsou sice sbalené, ale `max-height: 0` jim
     nebere šířku — `.rsh__head-f` je proto o jejich řádku širší než pole samo
     a pole končilo sto dvacet pixelů před pravým okrajem hlavičky, tedy
     viditelně jinde než cenová karta a graf pod ním. Zarovnání je odolnější
     než šířka: kdyby rychlých voleb přibylo, mezera by se jen zvětšila. */
  .rsh[data-rsh-kompakt] .rsh__hledani { margin-top: 0; justify-content: flex-end; }
}

/* --- vstupní obrazovka nástroje -------------------------------------------- */

/* Prázdný stav je vlastní stránka, ne jen pole nad prázdnem: nadpis vlevo,
   vyhledávací pole vpravo, pod ním jedna věta o tom, co se stane. Jakmile se
   najde firma, sbalí se to celé (`rsh__sbal`) a zůstane pole vpravo nahoře.

   Řádek se skládá až od 900 px. Pod tím jsou nadpis a pole nad sebou —
   nadpis má na telefonu přes dvacet znaků na řádek a vedle něj by na pole
   zbylo sto padesát pixelů. */
.rsh .rsh__oko {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.rsh .rsh__nadpis {
  font-family: var(--serif);
  font-weight: 400;
  /* Menší než nadpis analýzy schválně: tohle je rozcestník k nástroji, ne
     titul dokumentu, a pod ním hned začíná práce. */
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.rsh .rsh__napoveda {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-3);
  max-width: 54ch;
  margin: 12px 0 0;
}
@media (min-width: 900px) {
  .rsh .rsh__head-in {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }
  .rsh .rsh__head-t { flex: 1 1 auto; }
  /* `flex: 0 0 auto` a ne `flex: 1`: pravý sloupec má držet šířku pole, ne si
     ji dělit s nadpisem. Je to tentýž tvar jako u panelu v liště — `flex-basis`
     vyhrává nad `width`, takže se šířka musí napsat do obojího. */
  .rsh .rsh__head-f { flex: 0 0 auto; width: 420px; max-width: 46%; }

  /* Na vstupní obrazovce pole **roste s oknem**. Pevných 420 px vypadalo
     správně na notebooku a na monitoru ne: nadpis má dva krátké řádky, takže
     levý sloupec se roztáhl na 1404 px prázdna a pole zůstalo přesně tak malé
     jako na 1024 px — a pole je to jediné, kvůli čemu sem člověk přišel.
     (Změřeno na pěti šířkách; poměr 420 : 1404 je to, co je na obrázku vidět
     jako „vyhledávání se ztratilo v rohu".)

     `clamp` a ne další breakpoint: mezi notebookem a monitorem je pět šířek
     a vypisovat je po jedné znamená, že šestá zůstane rozbitá. Dolní mez je
     ta původní, horní 760 px — nad ní už je to pole na šest znaků zkratky
     dlouhé přes půl obrazovky. Procentní strop drží poměr k nadpisu.

     Sbaleného stavu se to netýká (`:not([data-rsh-kompakt])`): tam pole stojí
     vedle jména firmy a ceny a širší by je odtlačilo z řádku. */
  .rsh:not([data-rsh-kompakt]) .rsh__head-f {
    width: clamp(420px, 42vw, 760px);
    max-width: 52%;
  }
  .rsh .rsh__hledani { margin-top: 0; }
  .rsh .rsh__pole { width: 100%; }
}

/* --- kalendář výsledků ----------------------------------------------------- */

/* Pět sloupců, ne sedm. V sobotu a v neděli firmy výsledky nehlásí, takže by
   dva sloupce z osmadvaceti procent plochy byly trvale prázdné — a mřížka,
   ve které je čtvrtina místa vyhrazená ničemu, vypadá jako rozbitá.

   Pod 700 px se z toho stane jeden sloupec: pět sloupců na telefonu má na
   buňku sedmdesát pixelů, do kterých se nevejde zkratka se slovem
   „po zavření" pod ní. */
.rsh .rsh__kal { margin-top: 34px; }
.rsh .rsh__kal-hlava { flex-wrap: wrap; gap: 10px 16px; }
.rsh .rsh__kal-ovl {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
.rsh .rsh__kal-jen {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  cursor: pointer;
}
.rsh .rsh__kal-mesic {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  min-width: 12ch;
  text-align: center;
}
/* Šipky mají 32 px, ne 44: sedí v hlavičce vedle textu, ne v hlavní ploše,
   a čtyřicetčtyřkový terč by tu hlavičku rozhodil na dva řádky. */
.rsh .rsh__kal-sip {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  line-height: 1;
}
.rsh .rsh__kal-sip:hover { color: var(--ink); border-color: var(--accent); }
.rsh .rsh__kal-nav { display: inline-flex; align-items: center; gap: 10px; }
.rsh .rsh__kal-rozbal {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.rsh .rsh__kal-rozbal:hover { color: var(--accent); border-color: var(--accent); }

/* Zmenšený stav: bez mřížky a bez listování měsíci; rozbalený: bez
   pruhu týdne, protože mřížka ukazuje totéž a víc. Řídí to atribut na
   sekci, který nastavuje `kalRozbal()`. */
.rsh .rsh__kal:not([data-rsh-kal-rozbaleno]) .rsh__kal-mrizka,
.rsh .rsh__kal:not([data-rsh-kal-rozbaleno]) .rsh__kal-nav { display: none; }
.rsh .rsh__kal[data-rsh-kal-rozbaleno] .rsh__kal-tyden { display: none; }

.rsh .rsh__kal-tyden {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}
.rsh .rsh__kal-t-den {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-deep);
  color: var(--ink);
  font: inherit;
  min-width: 0;
}
.rsh button.rsh__kal-t-den { cursor: pointer; }
.rsh button.rsh__kal-t-den:hover { border-color: var(--accent); }
.rsh .rsh__kal-t-den--vikend { opacity: 0.5; }
.rsh .rsh__kal-t-jm {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.rsh .rsh__kal-t-c {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: 15px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-2);
}
.rsh .rsh__kal-t-den--dnes { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(232, 163, 61, 0.09); }
.rsh .rsh__kal-t-den--dnes .rsh__kal-t-c { background: var(--accent); color: #141414; font-weight: 600; }
.rsh .rsh__kal-t-dnes {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Odznak s počtem sedí na rohu buňky, ne v ní: uvnitř by ležel přes
   název dne. Lem v barvě pozadí ho odděluje od rámečku. */
.rsh .rsh__kal-t-pocet {
  position: absolute;
  top: -8px;
  right: -8px;
  box-shadow: 0 0 0 2px var(--bg);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #141414;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.rsh .rsh__kal-t-den--ma:not(.rsh__kal-t-den--dnes) { border-color: var(--line-accent, var(--accent)); }

.rsh .rsh__kal-mrizka {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  background: var(--line);
  border: 1px solid var(--line);
}
.rsh .rsh__kal-den-h {
  background: var(--bg-deep);
  padding: 9px 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-3);
  text-align: center;
}
.rsh .rsh__kal-bunka {
  background: var(--bg-deep);
  min-height: 92px;
  padding: 8px 10px 10px;
  min-width: 0;
}
.rsh .rsh__kal-bunka--mimo { background: var(--bg-alt); min-height: 0; }
.rsh .rsh__kal-cislo {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-3);
  margin-bottom: 6px;
}
.rsh .rsh__kal-firma {
  display: block;
  text-decoration: none;
  margin-top: 6px;
  min-width: 0;
}
.rsh .rsh__kal-tik {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
/* Sledovaná firma je oranžová. Barva, ne tečka: v buňce jsou nejvýš dvě firmy
   a tečka by si vzala jedenáct pixelů z šířky, kterou potřebuje zkratka. */
.rsh .rsh__kal-firma[data-sleduji] .rsh__kal-tik { color: var(--accent); }
.rsh .rsh__kal-firma:hover .rsh__kal-tik { text-decoration: underline; }
/* Jméno firmy pod zkratkou. Zkratka sama („NET") čtenáři, který firmu
   nesleduje, neřekne nic; jméno je z téhož řádku zdroje, zkrácené o „Inc". */
.rsh .rsh__kal-nazev {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Kolik dalších firem z celého trhu ten den hlásí. Odznak, ne seznam:
   v sezóně je to sto firem na den a mřížka není na to, aby je nesla. */
.rsh .rsh__kal-trh {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--muted-3);
}
/* Dnešek: tónované pozadí, dvoupixelový rámeček, číslo v plném kroužku
   a slovo „dnes" vedle něj. Jednopixelový rámeček z první verze se
   v mřížce dvaceti buněk ztrácel (Filip, 15. 9. 2026). */
.rsh .rsh__kal-bunka--dnes {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: rgba(232, 163, 61, 0.09);
}
.rsh .rsh__kal-bunka--dnes .rsh__kal-cislo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--accent);
  color: #141414;
  font-weight: 600;
  margin-right: 6px;
}
.rsh .rsh__kal-dnes {
  display: inline-block;
  vertical-align: top;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 22px;
  margin-bottom: 6px;
}
.rsh .rsh__kal-bunka--minule .rsh__kal-cislo,
.rsh .rsh__kal-bunka--minule .rsh__kal-trh { opacity: 0.55; }

/* Nejbližší termíny — seznam nad mřížkou. Řádek: datum a odpočet vlevo
   v pevné šířce, firma uprostřed, doba a období vpravo. Mřížka o třech
   sloupcích, ne flex: sloupce musí sedět na svislici napříč řádky. */
.rsh .rsh__kal-seznam {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-deep);
}
.rsh .rsh__kal-seznam:empty { display: none; }
.rsh .rsh__kal-radek {
  display: grid;
  grid-template-columns: 15ch minmax(0, 1fr) auto;
  gap: 6px 18px;
  align-items: baseline;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.rsh .rsh__kal-seznam li:first-child .rsh__kal-radek { border-top: 0; }
.rsh .rsh__kal-radek:hover { background: var(--bg-alt); }
.rsh .rsh__kal-r-datum {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
}
.rsh .rsh__kal-r-za {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 3px;
}
.rsh .rsh__kal-r-za--daleko { color: var(--muted-3); }
.rsh .rsh__kal-r-tik {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.rsh .rsh__kal-radek[data-sleduji] .rsh__kal-r-tik { color: var(--accent); }
.rsh .rsh__kal-radek:hover .rsh__kal-r-tik { text-decoration: underline; }
.rsh .rsh__kal-r-nazev {
  display: block;
  font-size: 13px;
  color: var(--muted-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsh .rsh__kal-r-pravo {
  text-align: right;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-2);
  white-space: nowrap;
}
.rsh .rsh__kal-r-pravo span { display: block; }
.rsh .rsh__kal-r-eps { color: var(--muted-3); }
/* Prázdný stav seznamu je věta, ne prázdný rámeček. */
.rsh .rsh__kal-seznam-nic {
  padding: 11px 14px;
  font-size: 13px;
  color: var(--muted-2);
}
@media (max-width: 700px) {
  .rsh .rsh__kal-radek { grid-template-columns: 11ch minmax(0, 1fr); }
  .rsh .rsh__kal-r-pravo { grid-column: 2; text-align: left; white-space: normal; }
  .rsh .rsh__kal-r-pravo span { display: inline; }
  .rsh .rsh__kal-r-pravo span + span::before { content: " · "; }
  .rsh .rsh__kal-nazev { display: none; }
}
.rsh .rsh__kal-kdy {
  display: block;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted-3);
}
@media (max-width: 700px) {
  .rsh .rsh__kal-mrizka { grid-template-columns: minmax(0, 1fr); }
  /* Datum vlevo, firmy pod sebou vpravo. Mřížka, ne `flex-wrap`: s wrapem
     seděly dvě firmy vedle sebe a popisek „před otevřením" pod nimi vypadal,
     že patří k oběma. */
  .rsh .rsh__kal-bunka {
    min-height: 0;
    display: grid;
    grid-template-columns: 3ch minmax(0, 1fr);
    gap: 4px 12px;
    align-items: baseline;
  }
  .rsh .rsh__kal-cislo { margin-bottom: 0; }
  .rsh .rsh__kal-firma { margin-top: 0; grid-column: 2; }
  .rsh .rsh__kal-kdy { display: inline; margin-left: 8px; }
  /* Záhlaví dnů a prázdné buňky nemají v jednom sloupci co dělat: datum je
     u každé buňky vlastní a prázdné dny by byly pruhy ničeho.

     **Musí stát až za pravidlem `.rsh__kal-bunka` výš.** Obě mají specificitu
     (0,2,0), takže rozhoduje pořadí — a když tohle stálo první, `display: grid`
     o pár řádků níž ho přebilo a prázdné dny se kreslily dál. Nic přitom
     nespadlo: na fotce z telefonu je z toho patnáct řádků s čísly. */
  .rsh .rsh__kal-den-h,
  .rsh .rsh__kal-bunka--mimo,
  .rsh .rsh__kal-bunka--nic { display: none; }
}

/* Sledované firmy na vstupní obrazovce. Blok je tentýž jako na přehledu,
   jen tady stojí přes celou šířku, ne ve třetím sloupci mřížky. */
.rsh .rsh__sledovane {
  margin-top: 34px;
  padding-top: 0;
}

/* --- souhrnný pruh nad profilem -------------------------------------------- */

/* Deset dlaždic v jednom pruhu. `auto-fit` s minimem místo pevného počtu
   sloupců: mezi telefonem a monitorem je pět různých rozvržení a vypisovat je
   po jednom znamená, že šesté zůstane rozbité. Minimum je 118 px, protože to
   je šířka nejdelší hodnoty („Telekomunikace" se zalomí, ale $3,23 bil. ne).

   Pruh nese `overflow: hidden` **ne**: dlaždice se mají zalomit do dalšího
   řádku, ne oříznout. Přetečení do stran hlídá `kontrola-tickeru`. */
/* Počet sloupců **dělí deset**, jinak zbude osiřelý řádek s jednou nebo dvěma
   dlaždicemi. `auto-fit` s minimem to samo neudělá: na 1280 px vyjde devět
   a jedna. Rozvržení jsou proto tři — 10, 5 a 2 — a hranice mezi nimi je
   spočítaná, ne odhadnutá: nejširší hodnota v pruhu („$302,97 mld." písmem
   14 px neproporcionálně) potřebuje 101 px, s odsazením 132 px na dlaždici,
   tedy 1329 px na deset. Tolik obsahu má `.wrap` až od zhruba 1400 px okna;
   na 1366 px se proto sází pět a pět.

   Číslo v médiu je tady na rozdíl od lišty v pořádku, protože se o nic
   neopírá: když se netrefí, rozvržení se jen přepne o krok dřív nebo později.
   Co by se rozbilo — zalomená hodnota — hlídá `kontrola-tickeru` měřením
   výšky, a to na obou šířkách. */
.rsh .rsh__souhrn {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: 34px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 1400px) {
  .rsh .rsh__souhrn { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
/* Mezera mezi dlaždicemi je **spára v mřížce**, ne rámeček u každé: rámečky by
   se na hranách zdvojily a pruh by měl místy dvoupixelovou linku. */
.rsh .rsh__souhrn .rsh__nasobek {
  margin: 0;
  padding: 13px 12px 12px;
  border: 0;
  background: var(--bg-deep);
  min-width: 0;
}
/* Popisek drží místo pro **dva** řádky, i když má jeden. „Tržní
   kapitalizace" a „Dividendový výnos" se zalomí, ostatní ne — a hodnoty pod
   nimi pak startují každá jinde, takže řada deseti čísel nesedí na jednu
   linku. Není to překryv ani přetečení, jen to nesedí; přesně ten druh vady,
   kterou člověk na fotce vidí a neumí pojmenovat. Hlídá se rozptyl horních
   hran hodnot, ne existence popisku. */
.rsh .rsh__souhrn .rsh__nasobek-l {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  line-height: 1.35;
  min-height: 2.7em;
}
/* 14 px, ne 16. Nejširší hodnota v pruhu je „$302,97 mld." a na 1280 px
   připadá na dlaždici 118 px; při šestnáctce se ta částka zalomí mezi číslo
   a jednotku, což vypadá jako chyba sazby. Hlídá to kontrola, ne oko —
   měří se, že se **žádná číselná hodnota nezalomí na druhý řádek**.
   Odvětví je jediná dlaždice, kde je zalomení v pořádku: je to slovo. */
.rsh .rsh__souhrn .rsh__nasobek-v { font-size: 14px; margin-top: 7px; overflow-wrap: normal; }
/* Poznámka pod hodnotou je v pruhu tichá — je to jistota pro toho, kdo se
   ptá „z čeho to je", ne text ke čtení. V sekcích dole zůstává jak byla. */
.rsh .rsh__souhrn .rsh__nasobek-p { font-size: 9.5px; margin-top: 5px; opacity: 0.75; }
.rsh .rsh__souhrn-pozn { display: block; margin-top: 10px; }

@media (max-width: 560px) {
  /* Na telefonu dvě dlaždice na řádek. Pod 118 px by se „Telekomunikace"
     zalomilo na tři řádky a pruh by byl vyšší než sekce pod ním. */
  .rsh .rsh__souhrn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- křivka ceny ---------------------------------------------------------- */

.rsh__kurz { padding-top: 20px; padding-bottom: 6px; }
.rsh__kurz-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rsh__box--kurz { height: 200px; margin-top: 10px; }

/* --- síto: osm zásad z lekce 3.1 ------------------------------------------ */

.rsh__sito { display: grid; grid-template-columns: 250px 1fr; gap: 40px; align-items: start; }
.rsh__sito > * { min-width: 0; }
/* Prstenec a číslo sdílejí jednu buňku mřížky, takže číslo sedí uprostřed
   kruhu bez záporných okrajů, které se rozejdou při jiné velikosti písma. */
.rsh__sito-souhrn { display: grid; justify-items: center; text-align: center; }
.rsh__prstenec { grid-area: 1 / 1; width: 152px; height: 152px; transform: rotate(-90deg); }
.rsh__prstenec-drah { fill: none; stroke: var(--line-strong); stroke-width: 7; }
.rsh__prstenec-tah {
  fill: none;
  stroke: url(#rsh-sito-zlato);
  stroke-width: 7;
  stroke-linecap: round;
  /* Obvod kružnice o poloměru 50 je 2πr = 314,16. Dráha i posun se nastavují
     odtud, ne od oka; skript posun přepíše podle výsledku. */
  stroke-dasharray: 314.16;
  stroke-dashoffset: 314.16;
  transition: stroke-dashoffset 900ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) { .rsh__prstenec-tah { transition: none; } }
.rsh__sito-cislo {
  grid-area: 1 / 1;
  align-self: center;
  margin: 0;
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 500;
  color: var(--ink);
  font-feature-settings: 'tnum' 1;
}
.rsh__sito-pozn { font-size: 12.5px; color: var(--muted-3); line-height: 1.6; margin: 12px 0 0; max-width: 30ch; }
.rsh__sito-souhrn .rsh__odkaz { margin-top: 14px; display: inline-block; }

.rsh__pravidla { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rsh__pravidlo {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.rsh__pravidlo-n { font-size: 14.5px; color: var(--ink-2); font-weight: 300; }
.rsh .rsh__pravidlo-pozn { grid-column: 1 / -1; margin: 6px 0 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--muted-2); max-width: 78ch; }
.rsh__pravidlo-p { font-family: var(--mono); font-size: 11px; color: var(--muted-3); display: block; margin-top: 3px; }
.rsh__pravidlo-v {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  font-feature-settings: 'tnum' 1;
  text-align: right;
  white-space: nowrap;
}
.rsh__znamka {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  white-space: nowrap;
  color: var(--muted-3);
  background: rgba(122, 129, 140, 0.12);
}
.rsh__znamka[data-s="ano"] { color: var(--r-3); background: rgba(111, 191, 139, 0.15); }
.rsh__znamka[data-s="ne"] { color: var(--r-4); background: rgba(210, 112, 106, 0.15); }
.rsh__znamka[data-s="tesne"] { color: var(--accent); background: rgba(232, 163, 61, 0.15); }

@media (max-width: 900px) {
  .rsh__sito { grid-template-columns: 1fr; gap: 26px; }
  .rsh__pravidlo { grid-template-columns: 1fr auto; }
  .rsh__pravidlo .rsh__znamka { grid-column: 2; }
}

/* --- pohyb ---------------------------------------------------------------- */

/* Třídu `rsh__najezd` sází skript, ne šablona. V CSS by to znamenalo, že
   prvek začíná neviditelný — a když by pozorovatel z jakéhokoli důvodu
   nenaskočil, zůstal by neviditelný napořád. Takhle je bez skriptu všechno
   prostě vidět. */
@media (prefers-reduced-motion: no-preference) {
  .rsh__najezd {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .rsh__najezd.je-videt { opacity: 1; transform: none; }
  .rsh__pravidlo { animation: rsh-radek 380ms ease both; }
}
/* Pásy a uzly Sankey dřív nabíhaly vlastní animací, a ta se spouštěla při
   každém `innerHTML` — tedy i při změně šířky okna a přepnutí období:
   diagram při tom problikl (Filip, 17. 9. 2026). Kresby teď odhaluje
   oziveni.js jednou na firmu ořezem obalu; překreslení je okamžité. */

/* Prolnutí grafu Chart.js při přepnutí období, řady nebo indexu: nad
   plátnem na chvíli leží kopie starého obrázku a rozplyne se do nového.
   Kopie je plátno bez data-* atributů a bez událostí myši, takže ji
   nenajde ani výběr grafu, ani klik. */
/* Specificita schválně nad `.rsh .rsh__box--kurz > canvas` (0,2,1): kopie
   je taky plátno v boxu ceny, a pod slabším pravidlem zůstala v toku pod
   grafem — duch starého grafu přes tlačítka období a dlaždice. */
.rsh .rsh__box > canvas.rsh__prolni,
.rsh .rsh__sankey-obal > svg.rsh__prolni { position: absolute; z-index: 2; pointer-events: none; opacity: 1; transition: opacity 280ms ease; }
.rsh .rsh__box > canvas.rsh__prolni.je-pryc,
.rsh .rsh__sankey-obal > svg.rsh__prolni.je-pryc { opacity: 0; }
@media print {
  .rsh__prolni { display: none !important; }
  .rsh__prstenec-tah { transition: none !important; }
  .rsh__najezd { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@keyframes rsh-radek { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

.rsh__karta { transition: border-color 240ms ease; }
.rsh__karta:hover { border-color: var(--line-strong); }
.rsh__navrh { transition: color 160ms ease, border-color 160ms ease, transform 160ms ease; }
.rsh__navrh:hover { transform: translateY(-1px); }
.rsh__tlacitko { transition: background 160ms ease, transform 120ms ease; }
.rsh__tlacitko:active { transform: translateY(1px); }
.rsh__nase a { transition: background 200ms ease, padding-left 200ms ease; }
.rsh__nase a:hover { padding-left: 10px; }

/* Číslo sekce nese přechod. `color: transparent` bez podpory `background-clip`
   by znamenalo neviditelné číslo, takže se to zapíná až tam, kde to funguje. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .rsh__cislo {
    background: linear-gradient(100deg, var(--accent) 10%, var(--accent-hi) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --- Ticker: cena se směrem, poměr hotovosti a prázdné stavy se značkou --- */

/* Zelený a červený přechod pod cenou. Návrh ho má a nese informaci, ne
   ozdobu: karta řekne směr dřív, než člověk přečte číslo. Barva se sází
   podle **denní změny** z odpovědi poskytovatele, ne podle křivky — křivka
   ukazuje rok a za rok může být firma nahoře i v den, kdy padá o pět procent. */
.rsh__cena-z { font-family: var(--mono); font-size: 13.5px; margin-top: 7px; }
.rsh__cena-z[data-smer="up"] { color: var(--r-3); }
.rsh__cena-z[data-smer="down"] { color: var(--r-4); }
.rsh__cena--up { background-image: linear-gradient(to top, rgba(111, 191, 139, 0.20) 0%, rgba(18, 21, 26, 0) 58%); }
.rsh__cena--down { background-image: linear-gradient(to top, rgba(210, 112, 106, 0.20) 0%, rgba(18, 21, 26, 0) 58%); }
.rsh__cena--up { border-color: rgba(111, 191, 139, 0.28); }
.rsh__cena--down { border-color: rgba(210, 112, 106, 0.28); }

/* --- hotovost proti dluhu jedním pruhem ----------------------------------- */

.rsh__pomer { margin-top: 20px; }
.rsh__pomer-drah {
  display: flex;
  height: 12px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--line);
}
.rsh__pomer-a { background: linear-gradient(90deg, rgba(111, 191, 139, 0.85), rgba(111, 191, 139, 0.45)); }
.rsh__pomer-b { background: linear-gradient(90deg, rgba(210, 112, 106, 0.45), rgba(210, 112, 106, 0.85)); }
/* Bez přechodu šířky: pruh nabíhá ořezem spolu s ostatními kresbami.
   Přechod šířky přeléval hodnoty z minulé firmy, a u první firmy vůbec
   nejel, protože pruh byl předtím skrytý. */
.rsh__pomer-p {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-3);
  margin: 8px 0 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.rsh__pomer-p b { font-weight: 400; }
.rsh__pomer-p i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }

/* --- značka u prázdného stavu --------------------------------------------- */

/* Prázdný stav je poctivý, ale byl to blok textu bez jediného tvaru. Značka
   nic netvrdí — je to schválně **nakreslená prázdná osa**, ne fiktivní graf. */
.rsh__prazdno-znak {
  display: block;
  width: 40px;
  height: 28px;
  margin: 0 auto 14px;
  color: var(--muted-3);
}
.rsh__prazdno-t { font-size: 13px; }


/* ==== Portfolio (portfolio.njk, portfolio.js) ==============================
   Podle návrhu Portfolio.dc.html: nepřipojený stav ve dvou sloupcích
   (napojení 1.35fr, jiný broker 1fr), připojený stav se souhrnem, záložkami
   a tabulkou. Scope `.ca .pf…` kvůli element-qualified pravidlům sekce. */
.ca .pf { padding-bottom: 80px; }
.ca .pf__eyebrow { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-3); margin: 0 0 12px; }
.ca .pf__eyebrow--akcent { color: var(--accent); display: inline; margin: 0; }
.ca .pf__p { font-size: 13.5px; line-height: 1.65; color: var(--ink-3); margin: 0 0 18px; max-width: 60ch; }
.ca .pf__mono { font-family: var(--mono); font-size: 11px; color: var(--muted-3); line-height: 1.8; margin: 16px 0 0; max-width: 80ch; }
.ca .pf__napojeni { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 28px; }
.ca .pf__brokeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
/* Tři brokeři vedle sebe se vejdou jen do široké levé půlky; pod 1100 px
   jdou pod sebe rovnou na jeden sloupec — dva a jeden by byl osiřelý řádek. */
@media (max-width: 1100px) { .ca .pf__brokeri { grid-template-columns: minmax(0, 1fr); } }
.ca .pf__broker { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-2, #171B21); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ca .pf__broker[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ca .pf__broker-ikona { width: 34px; height: 34px; border-radius: 6px; background: var(--bg-deep); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; font-weight: 600; flex: none; }
.ca .pf__broker-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ca .pf__broker-t b { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.ca .pf__broker-t small { font-family: var(--mono); font-size: 10.5px; color: var(--muted-3); }
.ca .pf__karta { background: var(--bg-2, #171B21); border: 1px solid var(--line); border-radius: 8px; padding: 24px 26px 22px; }
.ca .pf__kroky { margin: 0 0 22px; padding: 0; list-style: none; counter-reset: k; display: grid; gap: 12px; }
/* Číslo je absolutně vlevo, ne mřížka: v mřížce by se `<b>` uvnitř kroku
   stalo vlastní buňkou a věta by se rozpadla na tři řádky. */
.ca .pf__kroky li { position: relative; padding-left: 30px; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.ca .pf__kroky li::before { counter-increment: k; content: counter(k); position: absolute; left: 0; top: 3px; font-family: var(--mono); font-size: 11px; color: var(--muted-3); }
.ca .pf__kroky b { color: var(--ink); font-weight: 500; }
.ca .pf__pole { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ca .pf__field { max-width: none; }
.ca .pf__field .ca-field__input { font-family: var(--mono); font-size: 13px; }
.ca .pf__volby { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin: 14px 0 18px; }
.ca .pf__volba { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.ca .pf__select { width: auto; min-width: 220px; font-family: var(--mono); font-size: 12px; text-transform: none; letter-spacing: 0; }
.ca .pf__volba--check { cursor: pointer; }
.ca .pf__akce { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ca .pf__akce .ca-btn { margin-top: 0; width: auto; }
.ca .pf__stav { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.ca .pf__stav[data-pf-chyba="1"] { color: var(--r-4, #D2706A); }
.ca .pf__stav--ucet { margin: 0 0 8px; }
.ca .pf__stav[hidden] { display: none; }
.ca .pf__jencteni { border: 1px solid rgba(232, 163, 61, 0.35); border-radius: 6px; padding: 16px 18px; margin-top: 18px; }
.ca .pf__jencteni-h { display: flex; gap: 14px; align-items: baseline; margin-bottom: 10px; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.ca .pf__jencteni-mrizka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); }
.ca .pf__jiny { padding-top: 36px; }
.ca .pf__seznam-brokeru { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ca .pf__seznam-brokeru li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--bg-2, #171B21); border: 1px solid var(--line); border-radius: 6px; font-family: var(--mono); font-size: 12px; }
.ca .pf__seznam-brokeru small { font-size: 10.5px; color: var(--muted-3); }

.ca .pf__souhrn { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 36px 0 26px; }
.ca .pf__souhrn-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ca .pf__souhrn-h .pf__eyebrow { margin: 0; }
.ca .pf__stitek { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 8px; color: var(--muted-2); }
.ca .pf__stitek--ok { color: var(--good, #6FBF8B); border-color: rgba(111, 191, 139, 0.4); }
.ca .pf__celkem { font-family: var(--mono); font-size: 44px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.ca .pf__radek-cisel { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.ca .pf__tlum { color: var(--muted-3); }
.ca .pf [data-smer="up"] { color: var(--good, #6FBF8B); }
.ca .pf [data-smer="down"] { color: var(--r-4, #D2706A); }
.ca .pf__meta { font-family: var(--mono); font-size: 11px; color: var(--muted-3); text-align: right; line-height: 1.9; flex: none; }
.ca .pf__odkaz { background: none; border: 0; padding: 0; color: var(--muted-2); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ca .pf__odkaz:hover { color: var(--accent); }
.ca .pf__tecka { padding: 0 6px; }
.ca .pf__zalozky { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.ca .pf__zalozka { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 18px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--muted-3); cursor: pointer; }
.ca .pf__zalozka[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.ca .pf__tab-obal { overflow-x: auto; margin-top: 24px; }
.ca .pf__tab { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.ca .pf__tab th { text-align: left; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-3); font-weight: 500; padding: 0 8px 12px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ca .pf__tab th.num, .ca .pf__tab td.num { text-align: right; }
.ca .pf__tab td { padding: 14px 8px 14px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-3); }
.ca .pf__tab tbody tr:hover td { background: var(--bg-2, #171B21); }
.ca .pf__zkr { font-weight: 600; letter-spacing: 0.04em; color: var(--ink); margin-right: 9px; }
.ca .pf__druh { font-size: 9.5px; letter-spacing: 0.08em; color: var(--muted-3); }
.ca .pf__nazev { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--muted-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
.ca .pf__cash td { color: var(--muted-3); }
.ca .pf__th-q, .ca .pf__q { text-align: right; width: 56px; }
.ca .pf__q a { color: var(--muted-3); text-decoration: none; font-size: 15px; }
.ca .pf__q a:hover { color: var(--accent); }
.ca .pf__prazdno { font-size: 14px; color: var(--ink-3); margin: 18px 0 0; }
.ca .pf__pozn { margin-top: 22px; }

.ca .pf__dlazdice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 28px 0 44px; }
.ca .pf__dlazdice-i { background: var(--bg-2, #171B21); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.ca .pf__dlazdice-i .pf__eyebrow { margin: 0; font-size: 10.5px; }
.ca .pf__velke { font-family: var(--mono); font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.ca .pf__velke--akcent { color: var(--accent); }
.ca .pf__dva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.ca .pf__h2 { display: flex; align-items: baseline; gap: 14px; font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; margin: 0 0 18px; color: var(--ink); }
.ca .pf__cislo { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted-3); font-weight: 400; }
.ca .pf__pas { display: flex; height: 10px; border-radius: 2px; overflow: hidden; background: var(--bg-deep); margin-bottom: 18px; }
.ca .pf__pas i { display: block; height: 100%; }
.ca .pf__polozky { list-style: none; margin: 0; padding: 0; }
.ca .pf__polozky li { display: grid; grid-template-columns: 9px auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ca .pf__polozky li i { width: 9px; height: 9px; border-radius: 2px; }
.ca .pf__polozky li b { font-weight: 600; letter-spacing: 0.04em; color: var(--ink); }
.ca .pf__polozky li span { font-family: var(--sans); font-size: 13px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca .pf__polozky li em { font-style: normal; color: var(--ink); }
/* Osm odstínů pro pás i tečky: akcent pro největší, pak šedé od světlé po tmavou. */
.ca .pf [data-i="0"] { background: var(--accent); }
.ca .pf [data-i="1"] { background: #7E8EA0; }
.ca .pf [data-i="2"] { background: #5A6675; }
.ca .pf [data-i="3"] { background: #454F5C; }
.ca .pf [data-i="4"] { background: #343C47; }
.ca .pf [data-i="5"] { background: #252B34; }
.ca .pf [data-i="6"] { background: #1B2028; }
.ca .pf [data-i="7"] { background: #14181E; }

@media (max-width: 900px) {
  .ca .pf__napojeni, .ca .pf__dva { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ca .pf__dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca .pf__jiny { padding-top: 0; }
}
@media (max-width: 640px) {
  .ca .pf__brokeri, .ca .pf__pole, .ca .pf__jencteni-mrizka, .ca .pf__dlazdice { grid-template-columns: minmax(0, 1fr); }
  .ca .pf__souhrn { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 26px; }
  .ca .pf__meta { text-align: left; }
  .ca .pf__celkem { font-size: 34px; }
  .ca .pf__select { width: 100%; min-width: 0; }
}

/* Research: tři pruhy v tabulce a pásy kvality v Rentgenu. */
.ca .pf__th-r, .ca .pf__r { text-align: center; width: 76px; }
.ca .pf__pruhy { display: inline-flex; gap: 4px; vertical-align: middle; }
.ca .pf__pruhy i { display: block; width: 16px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.ca .pf__pruhy[data-mimo="1"] i { background: transparent; border: 1px dashed var(--line-strong); height: 2px; }
.ca .pf [data-stav="ano"] { background: var(--good, #6FBF8B); }
.ca .pf [data-stav="tesne"] { background: var(--accent); }
.ca .pf [data-stav="ne"] { background: var(--r-4, #D2706A); }
.ca .pf__dva--dalsi { margin-top: 48px; }
.ca .pf__kv-radek { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ca .pf__kv-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.ca .pf__kv-h b { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); flex: 1; }
.ca .pf__kv-h span { font-family: var(--mono); font-size: 12.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.ca .pf__kv-pas { display: flex; gap: 2px; height: 5px; margin-bottom: 8px; }
.ca .pf__kv-pas i { display: block; height: 100%; border-radius: 2px; }
.ca .pf__kv-pozn { font-size: 12.5px; color: var(--muted-2); line-height: 1.6; margin: 0; min-height: 1em; }
/* Qvestor · Poslední výsledky: dlaždice vlevo, zdrojové dokumenty vpravo,
   přepis pod tím. Přepis je dlouhý, takže se ukazuje zkrácený a rozbaluje. */
.rsh .rsh__vys { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.rsh .rsh__vys-dlazdice { margin-bottom: 18px; }
.rsh .rsh__vys-body { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-family: var(--serif); font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.rsh .rsh__vys-body li::before { content: "— "; color: var(--muted-3); }
.rsh .rsh__vys-zdroje { padding: 20px 22px; margin-top: 24px; }
.rsh .rsh__vys-zdroje .rsh__cislo { margin: 0 0 10px; }
.rsh .rsh__vys-dok { display: inline-block; font-family: var(--mono); font-size: 13px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.rsh .rsh__vys-dok:hover { color: var(--accent); border-bottom-color: var(--accent); }
.rsh .rsh__vys-pozn { margin: 10px 0 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--muted-2); }
.rsh .rsh__vys-znacky { font-family: var(--mono); font-size: 11.5px; word-break: break-word; }
.rsh .rsh__prepis { margin-top: 24px; }
.rsh .rsh__prepis-tl { font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--ink); background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: 6px; padding: 12px 16px; cursor: pointer; min-height: 44px; }
.rsh .rsh__prepis-tl:hover { border-color: var(--accent); color: var(--accent); }
.rsh .rsh__prepis-telo { margin-top: 14px; max-height: 460px; overflow: auto; padding-right: 8px; display: grid; gap: 14px; }
.rsh .rsh__prepis-telo[data-cely="1"] { max-height: none; overflow: visible; }
.rsh .rsh__prepis-vstup { font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.rsh .rsh__prepis-kdo { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; }
.rsh .rsh__prepis-kdo b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .rsh .rsh__vys { grid-template-columns: minmax(0, 1fr); } }
.ca .pf__odminule { margin-top: 18px; padding: 14px 18px; background: var(--bg-2, #171B21); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; }
.ca .pf__odminule-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.ca .pf__odminule-h .pf__eyebrow { margin: 0; }
.ca .pf__odminule-seznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-family: var(--serif); font-size: 15px; line-height: 1.45; color: var(--ink); }
.ca .pf__odminule-seznam a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.ca .pf__odminule-seznam a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ca .pf__odminule-seznam li[data-smer="up"] { color: rgb(111, 191, 139); }
.ca .pf__odminule-seznam li[data-smer="down"] { color: rgb(210, 112, 106); }
.ca .pf__karty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.ca .pf__kartaI { background: var(--bg-2, #171B21); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }
.ca .pf__kartaI .pf__eyebrow { margin-bottom: 10px; font-size: 10.5px; }
.ca .pf__kseznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-family: var(--serif); font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.ca .pf__kseznam a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.ca .pf__kseznam a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ca .pf__kseznam-nic { font-family: var(--sans); font-size: 12.5px; color: var(--muted-2); }
@media (max-width: 640px) { .ca .pf__karty { grid-template-columns: minmax(0, 1fr); } }

/* Portfolio, druhé kolo: tichá hlavička, koláč, čáry, sloupce, dividendy. */
.ca .ca-head--pf-tichy .ca-head__title, .ca .ca-head--pf-tichy .ca-course__perex { display: none; }
.ca .ca-head--pf-tichy { padding-bottom: 0; }
.ca .pf__zkr { color: var(--ink); text-decoration: none; }
.ca a.pf__zkr { border-bottom: 1px solid var(--line-strong); }
.ca a.pf__zkr:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ca .pf__kolac { position: relative; width: 120px; height: 120px; flex: none; margin-left: auto; }
.ca .pf__kolac svg { width: 120px; height: 120px; display: block; }
.ca .pf__donut-pozadi { fill: none; stroke: var(--bg-deep); stroke-width: 14; }
.ca .pf__donut-dil { fill: none; stroke-width: 14; stroke: var(--line-strong); transition: stroke-dasharray 600ms ease; }
.ca .pf__donut-dil[data-i="0"] { stroke: var(--accent); }
.ca .pf__donut-dil[data-i="1"] { stroke: #7E8EA0; }
.ca .pf__donut-dil[data-i="2"] { stroke: #5A6675; }
.ca .pf__donut-dil[data-i="3"] { stroke: #454F5C; }
.ca .pf__donut-dil[data-i="4"] { stroke: #343C47; }
.ca .pf__donut-dil[data-i="5"] { stroke: #252B34; }
.ca .pf__donut-dil[data-i="6"] { stroke: #1B2028; }
.ca .pf__donut-dil[data-i="7"] { stroke: #14181E; }
.ca .pf__kolac-t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--ink); }
.ca .pf__th-mini, .ca .pf__mini { width: 72px; text-align: center; }
.ca .pf__mini-svg { width: 64px; height: 24px; display: inline-block; vertical-align: middle; }
.ca .pf__mini-svg polygon { fill: currentColor; opacity: 0.12; }
.ca .pf__mini-svg polyline { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ca .pf__mini-svg[data-smer="up"] { color: var(--good, #6FBF8B); }
.ca .pf__mini-svg[data-smer="down"] { color: var(--r-4, #D2706A); }
.ca .pf__mini-svg[data-smer="flat"] { color: var(--muted-2); }
.ca .pf__pl { font-weight: 500; }
.ca .pf__tab tbody tr { animation: pf-vjezd 320ms ease both; }
@keyframes pf-vjezd { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* V portfoliu řádky najíždějí jednou na zobrazení účtu (`.oz-radek` pod
   blokem z oziveni.js). `pf-vjezd` se spouštěl při každé přestavbě tabulky
   — pětiminutová obnova, každé řazení, každá dávka hodnocení při aktivním
   řazení —, a to je přesně problikávání, které se odstraňovalo. Ostatní
   tabulky (screener, Qvestor) ho mají dál. */
.ca .pf .pf__tab-obal[data-oz-odhal] tbody tr { animation: none; }
.ca .pf__velke--dobre { color: var(--good, #6FBF8B); }
.ca .pf__velke--spatne { color: var(--r-4, #D2706A); }
.ca .pf__dlazdice--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ca .pf__sloupce { list-style: none; margin: 0; padding: 0; }
.ca .pf__sloupce li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ca .pf__sloupce li b { font-weight: 600; letter-spacing: 0.04em; color: var(--ink); }
.ca .pf__sloupce li em { font-style: normal; color: var(--ink-2); white-space: nowrap; }
.ca .pf__sloupce li[data-smer="up"] em { color: var(--good, #6FBF8B); }
.ca .pf__sloupce li[data-smer="down"] em { color: var(--r-4, #D2706A); }
.ca .pf__sl-pas { display: grid; grid-template-columns: 1fr 1fr; height: 8px; }
.ca .pf__sl-neg { justify-self: end; height: 100%; border-radius: 2px 0 0 2px; background: var(--r-4, #D2706A); }
.ca .pf__sl-pos { height: 100%; border-radius: 0 2px 2px 0; background: var(--good, #6FBF8B); }
.ca .pf__sloupce-nic { font-family: var(--sans); font-size: 13px; color: var(--muted-2); padding: 8px 0; }
.ca .pf__drzeni-pas { display: block; height: 6px; background: var(--bg-deep); border-radius: 2px; }
.ca .pf__drzeni-pas i { display: block; height: 100%; border-radius: 2px; }
.ca .pf__mesice { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 160px; }
.ca .pf__mesic { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 6px; }
.ca .pf__mesic i { display: block; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; transition: height 500ms ease; }
.ca .pf__mesic span { font-family: var(--mono); font-size: 9.5px; color: var(--muted-3); text-align: center; }
@media (max-width: 640px) { .ca .pf__dlazdice--tri { grid-template-columns: minmax(0, 1fr); } .ca .pf__kolac { margin-left: 0; } }

/* Tabulka ve stylu Fey: čipy, sloupec odvětví, cena s denní změnou, šipky. */
.ca .pf__chip { display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px; background: var(--bg-deep); border: 1px solid var(--line); color: var(--muted-2); vertical-align: middle; margin-left: 8px; }
.ca .pf__chip--den { margin-left: 8px; font-size: 10.5px; letter-spacing: 0.02em; }
.ca .pf__chip--den[data-smer="up"] { color: var(--good, #6FBF8B); background: rgba(111, 191, 139, 0.12); border-color: transparent; }
.ca .pf__chip--den[data-smer="down"] { color: var(--r-4, #D2706A); background: rgba(210, 112, 106, 0.12); border-color: transparent; }
.ca .pf__chip--den[data-smer="flat"] { color: var(--muted-2); }
.ca .pf__chip[hidden] { display: none; }
.ca .pf__sektor { font-family: var(--sans); font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.ca .pf__cena { white-space: nowrap; }
.ca .pf__cena > span:first-child { color: var(--ink); font-weight: 500; }
.ca .pf__termin { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.ca .pf__tab tbody tr td:first-child { border-radius: 8px 0 0 8px; }
.ca .pf__tab tbody tr td:last-child { border-radius: 0 8px 8px 0; }
.ca .pf__tab tbody tr:hover td { background: var(--bg-2, #171B21); }
.ca .pf__tab td { padding: 13px 10px 13px 6px; }
.ca .pf__tab th { padding: 0 10px 12px 6px; }

/* Řazení: záhlaví jsou tlačítka, aktivní sloupec nese šipku. */
.ca .pf__tab th button { background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; white-space: nowrap; }
.ca .pf__tab th button:hover { color: var(--ink); }
.ca .pf__tab th[aria-sort="ascending"] button::after { content: " ↑"; color: var(--accent); }
.ca .pf__tab th[aria-sort="descending"] button::after { content: " ↓"; color: var(--accent); }
.ca .pf__nasobek { color: var(--ink-3); white-space: nowrap; }

/* Logo firmy (Massive přes /api/logo) s písmenem jako zálohou. */
.ca .pf__prvni { display: flex; align-items: center; gap: 12px; }
.ca .pf__prvni-t { min-width: 0; }
.ca .pf__logo { position: relative; width: 30px; height: 30px; border-radius: 8px; background: var(--bg-deep); border: 1px solid var(--line); flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.ca .pf__logo i { font-family: var(--mono); font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted-2); }
.ca .pf__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; opacity: 0; transition: opacity 240ms ease; }
.ca .pf__logo[data-ma="1"] img { opacity: 1; }
.ca .pf__logo[data-ma="1"] i { visibility: hidden; }

.ca .pf__zalozka[hidden], .ca .pf section[hidden] { display: none; }

/* Rok s dnešními pozicemi: jedna křivka přes celou šířku, čtyři popisky. */
.ca .pf__rok { margin-top: 48px; }
.ca .pf__rok-graf { margin: 6px 0 10px; }
.ca .pf__rok-graf svg { width: 100%; height: 180px; display: block; color: var(--muted-2); }
.ca .pf__rok-graf svg[data-smer="up"] { color: var(--good, #6FBF8B); }
.ca .pf__rok-graf svg[data-smer="down"] { color: var(--r-4, #D2706A); }
.ca .pf__rok-plocha { fill: currentColor; opacity: 0.1; }
.ca .pf__rok-cara { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ca .pf__rok-start { stroke: var(--line-strong); stroke-dasharray: 3 3; }
.ca .pf__rok-text { font-family: var(--mono); font-size: 10.5px; fill: var(--muted-2); }
.ca .pf__rok-text--max, .ca .pf__rok-text--min { fill: var(--ink-2); }
.ca .pf__rok-popis { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-family: var(--mono); font-size: 13px; }
.ca .pf__rok-popis b { font-weight: 500; }
.ca .pf__rok-popis span { color: var(--muted-2); font-size: 12px; }
.ca .pf__rok-spy { stroke: var(--muted-3); stroke-width: 1.2; fill: none; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.ca p.pf__rok-spy { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.ca p.pf__rok-spy[data-smer="up"]::before { content: "▲ "; color: var(--good, #6FBF8B); }
.ca p.pf__rok-spy[data-smer="down"]::before { content: "▼ "; color: var(--r-4, #D2706A); }
.ca .pf__tah-h { margin: 26px 0 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.ca .pf__tah { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ca .pf__tah li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-family: var(--mono); font-size: 12.5px; }
.ca .pf__tah li a { color: var(--ink); text-decoration: none; font-weight: 600; }
.ca .pf__tah-pas { display: block; height: 8px; background: var(--bg-deep); border-radius: 2px; overflow: hidden; }
.ca .pf__tah-pas i { display: block; height: 100%; background: currentColor; }
.ca .pf__tah li[data-smer="up"] .pf__tah-pas { color: var(--good, #6FBF8B); }
.ca .pf__tah li[data-smer="down"] .pf__tah-pas { color: var(--r-4, #D2706A); }
.ca .pf__tah li em { font-style: normal; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 640px) { .ca .pf__tah li { grid-template-columns: 56px minmax(0, 1fr); } .ca .pf__tah li em { grid-column: 1 / -1; } }

/* ---- Qvestor, 16. 9. 2026: graf ceny, tok peněz, stupnice, analytici ----- */
/* Graf ceny podle návrhu: vyšší box, tečkované pozadí s maskou a jemný
   zelený nádech nahoře; osa ceny je vpravo, mřížka žádná. */
.rsh .rsh__box--kurz { height: 260px; margin-top: 10px; position: relative; }
.rsh .rsh__box--kurz::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(#1F2530 1px, transparent 1px); background-size: 18px 18px; background-position: -9px -9px;
  -webkit-mask-image: radial-gradient(65% 75% at 50% 46%, #000 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.18) 68%, transparent 88%);
  mask-image: radial-gradient(65% 75% at 50% 46%, #000 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.18) 68%, transparent 88%); }
.rsh .rsh__box--kurz::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 80% at 50% 8%, rgba(95,169,124,.06) 0%, rgba(18,21,26,0) 60%); }
.rsh .rsh__box--kurz > canvas:not(.rsh__prolni) { position: relative; z-index: 1; }
.rsh .rsh__prepinac--obdobi { gap: 4px; flex-wrap: wrap; }
.rsh .rsh__prepinac--obdobi button { border: 1px solid #232932; border-radius: 6px; padding: 6px 12px; min-height: 30px; color: #9AA3AF; letter-spacing: .04em; font-size: 11.5px; }
.rsh .rsh__prepinac--obdobi button:hover { border-color: #39424F; color: var(--ink); }
.rsh .rsh__prepinac--obdobi button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #12151A; }
@media (max-width: 560px) { .rsh .rsh__prepinac--obdobi button { padding: 6px 9px; } }

/* Stupnice proti mediánu v dlaždici násobku: linka, svislá značka uprostřed
   (medián), bod (firma). Barva bodu podle směru — nad mediánem je dražší. */
.rsh .rsh__skala { position: relative; height: 14px; margin: 10px 0 2px; }
.rsh .rsh__skala::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line-strong); }
.rsh .rsh__skala::after { content: ""; position: absolute; left: 50%; top: 2px; width: 1px; height: 11px; background: var(--muted-2); }
.rsh .rsh__skala i { position: absolute; top: 3px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px rgba(237,234,227,.12); }
.rsh .rsh__skala[data-smer="nad"] i { background: #D2706A; box-shadow: 0 0 0 3px rgba(210,112,106,.18); }
.rsh .rsh__skala[data-smer="pod"] i { background: #6FBF8B; box-shadow: 0 0 0 3px rgba(111,191,139,.18); }
.rsh .rsh__skala-p { font-family: var(--mono); font-size: 11px; margin: 4px 0 6px; color: var(--muted-2); }
.rsh .rsh__skala-p[data-smer="nad"] { color: #D2706A; }
.rsh .rsh__skala-p[data-smer="pod"] { color: #6FBF8B; }

/* Zisk na akcii proti odhadu. */
.rsh .rsh__odhady { margin-top: 24px; }
.rsh .rsh__odhady-cisla { display: flex; gap: 28px; align-items: flex-end; flex-wrap: wrap; }
.rsh .rsh__odhady-v { display: block; font-family: var(--mono); font-size: 24px; font-weight: 500; color: var(--ink); font-feature-settings: 'tnum' 1; }
.rsh .rsh__odhady-l { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted-2); margin-top: 4px; }
.rsh .rsh__odhady-obal { margin-top: 14px; overflow-x: auto; }
.rsh .rsh__odhady-graf { display: block; width: 100%; min-width: 480px; }
.rsh .rsh__odhady-legenda { font-family: var(--mono); font-size: 11px; color: var(--muted-2); margin: 8px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rsh .rsh__odhady-plna, .rsh .rsh__odhady-prazdna { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.rsh .rsh__odhady-plna { background: #C9CFD8; }
.rsh .rsh__odhady-prazdna { border: 1.4px solid #7A8696; margin-left: 10px; }

/* Hodnocení analytiků a cílová cena. */
.rsh .rsh__anal-mrizka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; }
.rsh .rsh__anal .rsh__cislo { margin: 0 0 10px; }
.rsh .rsh__anal-slovo { font-family: var(--serif); font-weight: 600; font-size: 30px; margin: 0; color: var(--ink); line-height: 1.1; }
.rsh .rsh__anal-n { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); margin: 6px 0 0; }
.rsh .rsh__anal-pas { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 16px; background: var(--bg-deep); gap: 2px; }
.rsh .rsh__anal-pas i { display: block; height: 100%; }
.rsh .rsh__anal-pas i[data-k="silneKoupit"], .rsh .rsh__anal-legenda li[data-k="silneKoupit"]::before { background: #6FBF8B; }
.rsh .rsh__anal-pas i[data-k="koupit"], .rsh .rsh__anal-legenda li[data-k="koupit"]::before { background: #9FD3B2; }
.rsh .rsh__anal-pas i[data-k="drzet"], .rsh .rsh__anal-legenda li[data-k="drzet"]::before { background: #7E8EA0; }
.rsh .rsh__anal-pas i[data-k="prodat"], .rsh .rsh__anal-legenda li[data-k="prodat"]::before { background: #E0A19C; }
.rsh .rsh__anal-pas i[data-k="silneProdat"], .rsh .rsh__anal-legenda li[data-k="silneProdat"]::before { background: #D2706A; }
.rsh .rsh__anal-legenda { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.rsh .rsh__anal-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.rsh .rsh__anal-legenda li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
.rsh .rsh__anal-legenda b { color: var(--ink); font-weight: 600; }
.rsh .rsh__anal-graf-obal { margin-top: 4px; }
.rsh .rsh__anal-graf { display: block; width: 100%; }
.rsh .rsh__anal-veta { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 8px 0 0; }
@media (max-width: 760px) { .rsh .rsh__anal-mrizka { grid-template-columns: minmax(0, 1fr); } }

/* ---- Widget Události (návrh 1a) — Qvestor i Portfolio ----------------------
   Karta s hlavičkou, hlavní položkou (větší znak a písmo) a řádky pod ní;
   odkaz na celý kalendář a legenda AMC/BMO v patě. Sdílené třídy `ud__*`,
   kreslí je udalosti.js. */
.ca .ud { margin-top: 24px; padding: 22px 24px 10px; border-radius: 12px; }
.ca .pf .ud { margin-top: 32px; background: var(--bg-2, #171B21); border: 1px solid var(--line); }
.ca .ud__hlava { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.ca .ud__nadpis { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--muted-3); }
.ca .ud__pocet { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--muted-3); opacity: .8; }
.ca .ud__seznam { display: block; }
.ca .ud__hlavni, .ca .ud__radek { display: flex; align-items: center; gap: 16px; color: inherit; text-decoration: none; border-top: 1px solid var(--line); padding: 14px 0; min-height: 44px; }
.ca .ud__hlavni { border-top: 0; padding: 4px 0 20px; }
.ca .ud__hlavni:first-child + .ud__radek { border-top: 1px solid var(--line); }
.ca .ud__znak { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-deep); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--muted-2); flex: none; }
.ca .ud__hlavni .ud__znak { width: 44px; height: 44px; font-size: 15px; color: var(--ink); }
.ca .ud__telo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ca .ud__titul-r { display: flex; align-items: center; gap: 6px 10px; min-width: 0; flex-wrap: wrap; }
.ca .ud__titul { font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink); white-space: nowrap; flex: none; }
.ca .ud__hlavni .ud__titul { font-size: 19px; letter-spacing: -.01em; }
.ca .ud__stitek { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-2); background: var(--bg-deep); border-radius: 5px; padding: 3px 7px; flex: none; }
.ca .ud__popis { font-family: var(--sans); font-size: 13px; color: var(--muted-2); }
.ca .ud__prava { text-align: right; flex: none; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.ca .ud__datum { font-family: var(--sans); font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ca .ud__hlavni .ud__datum { font-size: 16px; }
.ca .ud__tag { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--muted-3); min-height: 12px; }
.ca .ud__tag--akcent { color: var(--accent); }
.ca a.ud__hlavni:hover .ud__titul, .ca a.ud__radek:hover .ud__titul { color: var(--accent); }
.ca .ud__prazdno { font-family: var(--sans); font-size: 13px; color: var(--muted-2); margin: 0; padding: 6px 0 12px; }
.ca .ud__pata { border-top: 1px solid var(--line); margin-top: 4px; padding: 14px 0 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ca .ud__odkaz { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--muted-2); text-decoration: none; }
.ca .ud__odkaz:hover { color: var(--accent); }
.ca .ud__legenda { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--muted-3); }
@media (max-width: 560px) { .ca .ud { padding: 18px 16px 8px; } .ca .ud__popis { display: none; } .ca .ud__legenda { margin-left: 0; } }

/* ---- Screener ------------------------------------------------------------ */
.ca .scr { padding-top: 8px; padding-bottom: 72px; }
.ca .scr__stav { font-family: var(--mono); font-size: 12.5px; color: var(--muted-2); }
.ca .scr__bez { margin-top: 12px; }
.ca .scr__filtry { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 10px; margin-bottom: 6px; }
.ca .scr__hledej { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2, #171B21); color: var(--muted-2); min-width: 220px; }
.ca .scr__hledej svg { width: 14px; height: 14px; flex: none; }
.ca .scr__hledej input { background: none; border: 0; color: var(--ink); font: 13px var(--sans); width: 100%; min-width: 0; outline: none; }
.ca .scr__hledej:focus-within { border-color: var(--accent); }
.ca .scr__filtr { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2, #171B21); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-3); }
.ca .scr__filtr select { background: none; border: 0; color: var(--ink); font: 12.5px var(--mono); padding: 6px 4px; outline: none; cursor: pointer; text-transform: none; letter-spacing: 0; max-width: 180px; }
.ca .scr__filtr select option { background: #171B21; color: var(--ink); }
.ca .scr__filtr:has(select:not([value=""]):not(:invalid)) { border-color: var(--line-strong); }
.ca .scr__filtr:has(select:focus) { border-color: var(--accent); }
.ca .scr__zrusit { background: none; border: 0; color: var(--muted-2); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; min-height: 40px; padding: 0 8px; }
.ca .scr__zrusit:hover { color: var(--accent); }
.ca .scr__pocet { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.ca .scr__obal { margin-top: 12px; }
.ca .scr__tab .pf__logo { margin-right: 10px; vertical-align: middle; }
.ca .scr__firma { display: inline-flex; align-items: center; min-width: 0; }
.ca .scr__firma .pf__nazev { max-width: 26ch; }
.ca .scr__zmena[data-smer="up"] { color: #6FBF8B; }
.ca .scr__zmena[data-smer="down"] { color: #D2706A; }
.ca .scr__ztrata { color: var(--muted-3); font-size: 11.5px; }
.ca .scr__nic { margin-top: 16px; }
.ca .scr__pozn { margin-top: 16px; max-width: 110ch; line-height: 1.6; }
.ca .scr__pozn + .scr__pozn { margin-top: 8px; }
.ca .pf__q-odkaz { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--mono); }
.ca .pf__q-odkaz:hover { border-color: var(--accent); color: var(--accent); }
.ca-stream__vic + .ca-stream__vic { margin-left: 18px; }
.rsh .rsh__oko--odkaz { display: inline-block; margin-left: 14px; color: var(--muted-2); text-decoration: none; }
.rsh .rsh__oko--odkaz:hover { color: var(--accent); }
@media (max-width: 640px) { .ca .scr__pocet { margin-left: 0; width: 100%; } .ca .scr__hledej { width: 100%; } }

/* Qvestor, 16. 9. 2026 (druhé kolo): období pod grafem ceny, přepis a
   události vedle sebe, záložky Výsledovky. */
.rsh .rsh__kurz-pata { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 14px; }
.rsh .rsh__kurz-pozn { margin: 0 0 0 auto; }
.rsh .rsh__dvojice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 24px; align-items: start; }
.rsh .rsh__dvojice .rsh__prepis, .rsh .rsh__dvojice .ud { margin-top: 0; }
.rsh .rsh__dvojice:has(.rsh__prepis-telo[data-cely="1"]) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .rsh .rsh__dvojice { grid-template-columns: minmax(0, 1fr); } }
.rsh .rsh__taby { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 14px; }
.rsh .rsh__taby button { background: none; border: 1px solid #232932; border-radius: 6px; padding: 6px 12px; min-height: 30px; cursor: pointer; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: #9AA3AF; }
.rsh .rsh__taby button:hover { border-color: #39424F; color: var(--ink); }
.rsh .rsh__taby button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #12151A; }

/* Na 375 px: dlouhá značka XBRL v podtitulku karty a dlouhá hodnota v řádku
   zásad (EPS „ze ztráty do ztráty") vytlačovaly stránku do strany
   (Cloudflare, 16. 9. 2026). Podtitulek se láme kdekoli, hodnota zásady
   se pod 560 px smí zalomit. */
.rsh .rsh__karta-h > div { min-width: 0; }
.rsh .rsh__karta-p { overflow-wrap: anywhere; }
@media (max-width: 560px) { .rsh__pravidlo-v { white-space: normal; overflow-wrap: anywhere; } }
@media (max-width: 560px) {
  /* Dlouhý verdikt („v řadě je ztráta — zásada chce kladný zisk…") se
     nevejde do sloupce vedle hodnoty; jde na vlastní řádek a smí se lámat. */
  .rsh__pravidlo { grid-template-columns: minmax(0, 1fr) auto; }
  .rsh__pravidlo .rsh__znamka { grid-column: 1 / -1; justify-self: start; white-space: normal; }
}
.ca .ud__rozbal { background: none; border: 0; padding: 0; cursor: pointer; min-height: 44px; }

/* Qvestor, 16. 9. 2026 (třetí kolo): S&P 500 v grafu ceny, reakce ceny,
   podobné firmy, dvě firmy vedle sebe. */
.rsh .rsh__kurz-spy { background: none; border: 1px solid #232932; border-radius: 6px; padding: 6px 12px; min-height: 30px; cursor: pointer; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: #9AA3AF; }
.rsh .rsh__kurz-spy:hover { border-color: #39424F; color: var(--ink); }
.rsh .rsh__kurz-spy[aria-pressed="true"] { border-color: #8A94A6; color: var(--ink); border-style: dashed; }
.rsh .rsh__podobne-tab td, .rsh .rsh__proti-tab td { font-size: 13px; }
.rsh .rsh__podobne-tab tr[data-vlastni] td { background: rgba(232, 163, 61, 0.06); }
.rsh .rsh__proti { margin: 22px 0 0; }
.rsh .rsh__proti-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rsh .rsh__proti-vstup { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-deep); color: var(--ink); font: 13px var(--mono); width: 170px; text-transform: uppercase; }
.rsh .rsh__proti-vstup:focus { outline: none; border-color: var(--accent); }
.rsh .rsh__proti-tl { min-height: 40px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #12151A; font: 500 12px var(--mono); letter-spacing: .04em; cursor: pointer; }
.rsh .rsh__proti-tl--zrusit { background: none; border-color: var(--line-strong); color: var(--muted-2); }
.rsh .rsh__proti-tab th[scope="row"] { text-align: left; font-family: var(--sans); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink-2); padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.rsh .rsh__proti-tab thead th.num { font-size: 12px; color: var(--ink); }

/* Ikona porovnání vedle Sledovat firmu. */
.rsh .rsh__porovnat { padding: 0 12px; margin-left: 8px; min-width: 44px; justify-content: center; }
.rsh .rsh__porovnat svg { display: block; }

/* Obchody insiderů (Form 4). */
.rsh .rsh__ins-dlazdice .rsh__nasobek[data-smer="up"] .rsh__nasobek-v { color: #6FBF8B; }
.rsh .rsh__ins-dlazdice .rsh__nasobek[data-smer="down"] .rsh__nasobek-v { color: #D2706A; }
.rsh .rsh__ins-tab td { font-size: 12.5px; }
.rsh .rsh__ins-tab .pf__nazev { max-width: 30ch; }
.rsh .rsh__ins-typ { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 3px 7px; border-radius: 4px; background: var(--bg-deep); color: var(--muted-2); white-space: nowrap; }
.rsh .rsh__ins-typ[data-druh="nakup"] { color: #6FBF8B; background: rgba(111, 191, 139, 0.12); }
.rsh .rsh__ins-typ[data-druh="prodej"] { color: #D2706A; background: rgba(210, 112, 106, 0.12); }
.rsh .rsh__ins-tab tr[data-kod="P"] td, .rsh .rsh__ins-tab tr[data-kod="S"] td { color: var(--ink); }
.rsh [data-rsh-ins-vic] { margin-top: 14px; }

/* ---- bezplatný účet Qvestoru (Filip, 16. 9. 2026) -------------------------
   Čip s počtem firem v hlavě výsledku a odkaz pod zdí. Čip je odkaz do
   pokladny, ne tlačítko: nic na stránce nemění. Scope `.rsh .x`, protože
   `.rsh .rsh__sleduj` vedle něj má (0,2,0) a jednotřídní pravidlo by
   prohrálo s obecnými pravidly pro odkazy. */
.rsh .rsh__ucet { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 16px; margin-right: 10px; padding: 0 12px;
  border: 1px solid var(--accent); border-radius: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); text-decoration: none; white-space: nowrap; }
.rsh .rsh__ucet:hover { background: rgba(232, 163, 61, 0.1); color: var(--accent-hi); }
.rsh .rsh__ucet-o { color: var(--ink); }
.rsh .rsh__chyba-odkaz { display: inline-block; margin-top: 14px; min-height: 44px; line-height: 44px; padding: 0 16px; border-radius: 6px;
  background: var(--accent-btn); color: #111; font-size: 13px; font-weight: 600; text-decoration: none; }
.rsh .rsh__chyba-odkaz:hover { filter: brightness(1.06); color: #111; }
@media (max-width: 560px) { .rsh .rsh__ucet { white-space: normal; line-height: 1.3; padding: 8px 12px; } }