/* trend-chart.css — sloupcový graf časové řady (admin analytika).
   ⚓ VLASTNÍ SOUBOR, ⛔ ne kus `components.css`: admin ten sheet NENAČÍTÁ (linkuje jen
      fonts/tokens/nav/data-table) a přidat mu ho celý by přestylovalo existující prvky,
      které sdílejí jména tříd (`.field`, `.card`, `.btn`). Komponenta má stejně už vlastní
      skript `js/trend-chart.js`, takže dvojice soubor+skript drží pohromadě.
   ⚓ JEDINÝ KONZUMENT JE `admin.html` (owner 2026-09-03 „a dej to do admin stránky né
      do showcase"). ⛔ Ve showcase to NENÍ a proto ani ve `WEBCSS` v `verify-ui-parity.py`
      být nemusí — ten seznam legalizuje třídy POUŽITÉ VE SHOWCASE, a tyhle tam nejsou.
   ⚓ Barvy sérií jsou VÝSTUP validátoru palety, ⛔ ne volba — čísla a důvod u skriptu. */

/* ⚓ **DVĚ KARTY VEDLE SEBE, ⛔ ne pod sebou** (owner 2026-09-03 „dej ty grafy vedle
   sebe, roztahuješ to"). ⚠️ ZMĚŘENO PŘED opravou na okně 1576 px: křivka byla 1197 px
   široká při 428 px výšky a žebříček ležel až 721 px pod ní — dohromady 1215 px, tedy
   dvě obrazovky na dva grafy. ⚓ Časová řada drží ŠIRŠÍ mřížkový sloupec (1,5 : 1),
   protože nese ČASOVOU OSU s ~30 pásmy; žebříček je svislý seznam a šířku nepotřebuje.
   ⚓ **`align-items:stretch` — OBĚ KARTY KONČÍ NA TÉŽE LINCE** (owner 2026-09-05 „výškově
   ty grafy srovnej"). ⚠️ RUŠÍ zdejší „`align-items:start`: karty mají RŮZNOU výšku podle
   počtu řad a natahovat kratší by vyrobilo prázdnou plochu". Ta úvaha stála na tom, že
   časová řada má PEVNOU výšku a při natažení by pod ní zbylo prázdno — od 2026-09-05 už
   ji pevnou nemá: `H` v `js/trend-chart.js` se měří z plochy, takže graf ten prostor
   VYPLNÍ. ⚠️ Prázdno tedy zbývá jen v OPAČNÉM případě (rozpad kratší než podlaha 250 px,
   např. „Devices" = 3 řádky) — a to je zaplacená cena za srovnanou linku, ⛔ ne přehlédnutí. */
/* ⛔ **`--tr-surface` SMAZÁN i s prstencem kolem bodu** (2026-09-05, přechod na sloupce).
   Držel `.trend-dot`/`.trend-live` čitelné tam, kde křížily čáru — sloupcový graf ale
   žádné body nemá a sousedy u něj odděluje VOLNÉ MÍSTO v pásmu, ⛔ ne kroužek v barvě
   podkladu. ⚓ Kdyby se prstenec někdy vracel, vrací se i tahle proměnná: musí sledovat
   plochu, na které graf leží (dnes `--bg-well`), jinak obtáhne značku světlejší kroužek. */
.trend-row{margin-bottom:16px;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:stretch}
/* Pod tuhle šířku už by časová řada měla na pásmo méně než 20 px → zpátky pod sebe. */
@media(max-width:1180px){.trend-row{grid-template-columns:minmax(0,1fr)}}
/* ⚓ JEDNA KARTA, ⛔ uz ne mrizka ctyr. Barvy serii nese SKRIPT (osm hodnot
   z validatoru), ⛔ ne CSS promenne — pri osmi seriich by osm tokenu jen
   duplikovalo seznam, ktery uz v `js/trend-chart.js` je.
   ⚠️ `--tr-s1..s4` SMAZANY i s hlavickou karty (titulek, hrdinske cislo,
   podtitulek, odznak trendu, legenda) — po prechodu na jeden prepinatelny
   graf je nic nepouzivalo. Souhrn nese `.trend-tg`. */
.trend-fig{background:var(--bg-card);border-radius:var(--radius);padding:18px 20px 14px;margin:0}

/* ⛔ **HRDINSKÁ HLAVIČKA NEEXISTUJE — ANI U JEDNÉ KARTY** (owner 2026-09-03 „tohle jsem
   říkal ať dáš pryč!"). ⚠️ Ruší to můj vlastní výklad z TÉHOŽ DNE: u časové řady jsem ji
   smazal, ale u rozpadu nechal s odůvodněním „tam celkový součet nikde jinde není".
   Owner ale mínil OBĚ. ⛔ Nevracet: `.trend-heads`, `.trend-h`, `.trend-h-v` a `.trend-h-l`
   jsou SMAZANÉ, ne jen nepoužité — kartu tvoří graf a ovládání pod ním. */

/* ⚓ **FILTRY VLEVO VEDLE GRAFU, ⛔ ne pod ním** (owner 2026-09-05 „dej to vlevo vedle
   grafu jako filtry"). ⚠️ RUŠÍ tím zdejší „Ovládání pod grafem" — a s ním i důvod, proč
   měl `.bd-foot` níž zrovna 14 px (srovnával spodní patra dvou karet; časová řada už
   žádné nemá).
   ⚓ Mřížka je CONTENT-GATED přes `:has()`, ⛔ ne nová třída na `<figure>`: `.trend-fig`
   sdílí i karta ROZPADU (`.bd-card`), která přepínač nemá — grid položený rovnou na
   `.trend-fig` by rozhodil i ji. Týž idiom jako řádek ovladačů v appce.
   ⚠️ Gate je `> .trend-side`, ⛔ ne `> .trend-toggles`: seznam je od 2026-09-05 o patro níž.
   ⚠️ Sloupec filtrů má PEVNOU šířku, ⛔ ne `auto`: nejdelší název by jinak sloupec
   roztahoval podle toho, které série zrovna v datech jsou, a graf by se při každé změně
   dat zúžil jinak.
   ⚓ **178 px je ZMĚŘENÁ hodnota, ⛔ ne kulaté číslo.** Nejširší řádek („Avg Conversion" +
   „12,8 %") potřebuje 157 px, plus 2 × 4px padding seznamu a **10 px na SVISLÝ POSUVNÍK**
   (sedmnáct řádků se do 274 px nevejde, `scrollbar-width:thin` si to místo bere UVNITŘ)
   = 175 px. ⚠️ Bez těch deseti pixelů se přesně jeden název ořízl na „Avg Conversio…" —
   ellipsis na `.trend-tg-n` je pojistka, ⛔ ne plán. */
.trend-fig:has(> .trend-side){display:grid;grid-template-columns:178px minmax(0,1fr);
  gap:12px;align-items:stretch}
/* ⚠️ **OBÁLKA `.trend-side` NENÍ DEKORACE — DRŽÍ SMĚR ZÁVISLOSTI** (změřeno 2026-09-05).
   Výška řádku má jít ROZPAD → karta → graf. Jenže sedmnáct filtrů měří ~509 px, a dokud
   byl seznam V TOKU, sázel do výšky řádku právě on: karta se natáhla na 470 a už NIKDY
   se nezkrátila, i když rozpad spadl na 210. ⚠️ `max-height` to NEŘEŠÍ — cokoli, co
   seznamu dovolí být vysoký, ho zároveň nechá tu výšku prosadit.
   ⚓ Obálka má výšku jen z mřížky, seznam v ní leží `absolute` a vyplní ji. */
/* ⚠️ **`min-height` DRŽÍ OBÁLKU I BEZ MŘÍŽKY.** `:has()` je v `APP_WEB/css` PRVNÍ svého
   druhu (v appce je běžný — 93 výskytů v `panelario-theme.css`), takže v prohlížeči, který
   ho neumí, se grid NEPOSTAVÍ: `.trend-side` a `.trend-plot` zůstanou obyčejné bloky pod
   sebou. ⛔ Bez tohohle řádku by obálka měla výšku NULA (seznam v ní leží `absolute`) a
   filtry by se položily přes graf. ⚓ 274 px = táž podlaha jako `.trend-plot`, takže se
   tím ve funkčním prohlížeči NIC nemění — řádek má podlahu 274 tak jako tak. */
.trend-side{position:relative;min-height:274px}

/* ⚓ **OBA GRAFY LEŽÍ V ZAPUŠTĚNÉ PLOŠE** (owner 2026-09-03 „grafy dej do well outlineru").
   Táž trojice jako u `.trend-toggles` níž — výplň `--bg-well`, vnitřní stín, malý rádius —
   ⛔ ne rámeček: obrys je inkoust, který nenese data. Karta tím má tři patra: titulek,
   zapuštěný graf, ovládání. */
.trend-plot,.bd-list{background:var(--bg-well);box-shadow:var(--well-shadow);
  border-radius:var(--radius-sm);padding:12px 14px}
/* ⚠️ **GRAF LEŽÍ MIMO TOK, ⛔ ne v něm — jinak se výška zasekne (změřeno 2026-09-05).**
   Od chvíle, kdy se `H` MĚŘÍ z plochy, platilo by v toku tohle: nakreslím svg vysoké 414,
   tím se plocha stane 414 vysokou SAMA OD SEBE, a když pak vedlejší karta ROZPADU spadne
   na tři řádky, řádek se už NEZKRÁTÍ — svou výšku si drží graf. Naměřeno: po přepnutí
   voliče na „Devices" zůstaly obě karty na 470 px, ačkoli rozpad potřeboval 210.
   ⚓ `position:absolute` to přetrhne: mimo tok graf do vlastní výšky plochy NEMLUVÍ, takže
   výšku řádku určuje ROZPAD (a `min-height` níž dělá podlahu). ⚠️ Odsazení musí být
   `14px`/`12px`, ⛔ ne `0`: obsahový blok je PADDING BOX plochy, tedy včetně odsazení —
   `inset:0` by graf přilepilo na okraj wellu. Týmiž čtrnácti pixely počítá i bublina. */
.trend-plot{position:relative;min-height:274px}
.trend-plot svg{position:absolute;left:14px;top:12px;right:14px;width:auto;
  display:block;overflow:visible}
/* Mřížka je TENKÁ a POLOPRŮHLEDNÁ — má nést oko, ⛔ ne soutěžit s daty. Plná, ⛔ nikdy čárkovaná. */
.trend-grid{stroke:var(--bg-card-hover);stroke-width:1;opacity:.55}
.trend-axis{fill:var(--text-muted);font-size:9px;font-family:inherit}
/* ⚓ Sloupec je JEN VÝPLŇ, ⛔ nemá obrys: obtah kolem značky je inkoust, který nenese
   data — sousedy odděluje MEZERA v barvě plochy, a tu vyměřuje skript.
   ⚓ Barvu série drží SKUPINA (`fill` na `g.trend-cols`), ⛔ ne tenhle soubor: CSS
   o sériích neví a osm hodnot z validátoru palety má jediné bydliště v `js/trend-chart.js`. */
.trend-cols{stroke:none}
/* ⚓ Pásmo pod kurzorem = JEDEN KROK od plochy, ⛔ čárkovaný kříž: u sloupců není co
   protínat, kurzor ukazuje na DEN a den je interval. Leží pod sloupci, takže musí
   zůstat SVĚTLE ztlumené — sytější podklad by sloupcům ubral kontrast. */
.trend-band{fill:var(--bg-card-hover);pointer-events:none;transition:opacity .1s}
/* ⚠️ **POSLEDNÍ HODNOTA SÉRIE — BEZ TOHOTO PRAVIDLA JE ČERNÁ A NEVIDITELNÁ** (owner
   2026-09-04 „hodnoty na konci grafu jsou černě a nejsou vidět"). ⚓ SVG `<text>` má
   výchozí `fill:black`; každá ostatní textová třída tady výplň nastavuje (`.trend-axis`,
   `.bd-name`, `.bd-num`, `.bd-share`) — u téhle se na to zapomnělo a na tmavé zapuštěné
   ploše po ní nezbylo nic. ⛔ Nedědit: text ve svg si barvu NEBERE z okolního CSS textu.
   ⚓ Barvu SÉRIE text NENESE (týž kánon jako u `.bd-num`) — identitu drží značka a sloupec
   vedle něj; světlá série by jako text na téhle ploše byla nečitelná. */
.trend-end{fill:var(--text-primary);font-size:11px;font-weight:700;font-family:inherit;font-variant-numeric:tabular-nums}
.trend-hit{fill:transparent}

/* ⚠️ `--bg-card-hover`, ⛔ ne `--bg-app`: `--bg-well` JE `--bg-app`, takže od chvíle,
   kdy graf leží ve wellu, měla bublina PŘESNĚ barvu podkladu pod sebou a splynula
   s ním — zbyl by z ní jen stín. */
.trend-tip{position:absolute;pointer-events:none;background:var(--bg-card-hover);border-radius:var(--radius-sm);
  box-shadow:0 8px 20px rgba(0,0,0,.5);padding:9px 11px;font-size:10px;white-space:nowrap;z-index:5}
.trend-tip-d{color:var(--text-muted);margin-bottom:5px;font-variant-numeric:tabular-nums}
.trend-tip-r{display:flex;align-items:center;gap:7px;color:var(--text-secondary);line-height:1.7}
/* ⚓ ZNAČKA JE DESTIČKA, ⛔ vlásková linka: klíč má ukazovat MARK, který v grafu
   stojí — a to je od 2026-09-05 sloupec, ne čára. Týž tvar v bublině i v přepínači. */
.trend-tip-r i{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.trend-tip-r b{color:var(--text-primary);font-variant-numeric:tabular-nums;margin-left:auto;padding-left:14px}

/* Pod tuhle šířku by po 178px sloupci filtrů zbylo na graf míň než 300 px → filtry
   zpátky POD graf (`order:1`, protože v markupu stojí PŘED ním). ⚓ Nad grafem by je nikdo
   nechtěl: na úzké obrazovce se čte nejdřív graf a filtruje se až potom. */
@media(max-width:640px){
  .trend-fig{padding:16px 14px 12px}
  .trend-fig:has(> .trend-side){grid-template-columns:minmax(0,1fr)}
  /* ⚠️ **`.trend-fig > .trend-toggles`, ⛔ holé `.trend-toggles`:** základní pravidlo stojí
     V SOUBORU NÍŽ, takže by stejná specificita z tohohle bloku PROHRÁLA na pořadí —
     změřeno (274 px místo zamýšlených 232). Dva selektory to rozhodnou bez ohledu na pořadí.
     ⚓ Strop tu ale řeší jen okamžik před prvním kreslením; pak ho stejně přepíše inline
     hodnota ze skriptu, a ta ve stohnutém rozvržení vyjde na výšku grafu. */
  .trend-fig > .trend-side{order:1}
}

/* ── Filtr obdobi ─────────────────────────────────────────────────────────────
   ⚓ JEDEN RADEK NAD OBSAHEM, ktery filtruje — ⛔ ne uvnitr karty grafu a ⛔ ne
      per-graf. Filtr scopuje VSECHNO pod sebou (dlazdice, oba grafy, tabulka),
      takze cisla vzdy souhlasi.
   ⚓ PRESETY JSOU RADKY, ⛔ ne kalendarni mrizka: nikdo nechce v kalendari lovit
      „poslednich 30 dni". Kalendar je az pro VLASTNI obdobi, a ten sedi za
      vlasovou linkou v paticce — tam, kde ho hleda jen ten, kdo ho fakt chce. */
.rng{position:relative;display:inline-block}
.rng-btn{display:inline-flex;align-items:center;gap:8px;height:var(--adm-ctl-h,30px);box-sizing:border-box;
  padding:0 12px;background:var(--bg-control);border:none;border-radius:var(--radius-sm);
  box-shadow:var(--btn-shadow);color:var(--text-secondary);font:inherit;font-size:10px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.rng-btn:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.rng-btn.open{background:var(--bg-card-hover);color:var(--text-primary)}
.rng-btn svg{width:12px;height:12px;flex-shrink:0;opacity:.7}

.rng-pop{display:none;position:absolute;top:calc(100% + 5px);right:0;z-index:60;min-width:216px;
  background:var(--bg-card);border-radius:var(--radius);box-shadow:0 10px 28px rgba(0,0,0,.5);padding:5px}
.rng-pop.open{display:block}
.rng-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:8px 10px;background:none;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);
  font:inherit;font-size:11px;text-align:left;cursor:pointer;transition:background .12s,color .12s}
/* Hover je GHOST WASH — ⛔ nesmi soutezit s vyberem, ktery nese fajfka. */
.rng-opt:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.rng-opt.sel{color:var(--text-primary)}
/* Vyber nese ZNACKA, ⛔ ne jen barva — 16px, tucne, aby byla videt na prvni pohled. */
.rng-check{font-size:16px;line-height:1;font-weight:700;color:var(--accent-active);visibility:hidden}
.rng-opt.sel .rng-check{visibility:visible}

/* ⚓ Vlasova linka i UVNITR presetu: oddeluje KLOUZAVA okna („poslednich N dni")
   od KALENDARNICH („tento mesic"). Jsou to dva ruzne zpusoby, jak myslet na cas. */
.rng-sep-row{height:1px;background:var(--bg-card-hover);margin:5px 10px}
/* Vlasova linka oddeluje presety od vlastniho obdobi. */
.rng-foot{margin-top:5px;padding:9px 10px 4px;border-top:1px solid var(--bg-card-hover)}
.rng-foot-lbl{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);margin-bottom:6px}
.rng-dates{display:flex;align-items:center;gap:6px}
.rng-dates input{flex:1;min-width:0;background:var(--bg-well);box-shadow:var(--well-shadow);border:none;
  border-radius:var(--radius-sm);padding:6px 8px;color:var(--text-primary);font:inherit;font-size:11px;
  outline:none;color-scheme:dark}
.rng-dates input:focus-visible{outline:2px solid var(--text-secondary);outline-offset:1px}
.rng-sep{color:var(--text-muted);font-size:11px;flex-shrink:0}
.rng-apply{width:100%;margin-top:7px;padding:7px 10px;background:var(--accent-active);color:var(--bg-app);
  border:none;border-radius:var(--radius-sm);font:inherit;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.rng-apply:disabled{opacity:.45;cursor:default}
.rng-err{margin-top:6px;font-size:10px;color:var(--red)}

/* ⚓ Prekresleni DRZI RAM: data se nactou pod snizenou kryci schopnosti, ⛔ zadny
   skeleton a ⛔ zadny skok layoutu. */
.trend-row.is-loading,.summary-grid.is-loading{opacity:.45;transition:opacity .15s}

/* ── Prepinac krivek = SEZNAM VE WELLU (outliner) ────────────────────────────
   ⚓ SEZNAM VE WELLU, ⛔ pretekajici rada chipu (owner 2026-09-03 „dej to jako
      seznam ve well outlineru"). Sedmnact chipu se lámalo do ctyr radku a poradi
      se v tom ztracelo; svisly seznam ma jeden sloupec cisel, ktery jde odshora
      dolu precist.
   ⚓ Well = TYZ idiom, jaky ma `.data-card` v adminu: `--bg-well` + `--well-shadow`,
      ⛔ vlastni odstin. Tenky scrollbar taky odtud.
   ⚓ Radek nese barvu, nazev a SOUCET — je to legenda, souhrn i ovladac zaroven.
   ⛔ Stav NENI jen barva: vypnuty radek je ZTLUMENY a nese `aria-pressed=false`. */
/* ⚠️ MEZERA MEZI RADKY JE POVINNA, ⛔ kosmetika. ZMERENO: radky na sebe presne
   navazovaly (0 px), takze dva sousedni ZAPNUTE splynuly v jeden blok a jejich
   zaoblene rohy vypadaly jako prelozene pres sebe. ⚓ Odděluje je MEZERA
   v barve plochy — tyz princip jako u znacek v grafu, ⛔ ne obrys kolem radku. */
/* ⚓ **SEZNAM ROSTE PODLE OBSAHU, JEN SE STROPEM.** Visí v obálce `.trend-side` shora
   (`top:0`, ⛔ ne `inset:0`) a `max-height:100%` je vůči NÍ — a její výšku dává mřížka karty.
   Sedmnáct řádků se tedy zastaví přesně u linky grafu a začne scrollovat, kdežto dva řádky
   zaberou dva řádky. ⚠️ `inset:0` tu bylo první a bylo špatně: na kartě VÝROBCE jsou série
   jen dvě, takže z filtrů byl 274px vysoký prázdný well.
   ⛔ Procento MUSÍ mířit na obálku, ⛔ ne na kartu — proto je `.trend-side` `relative`.
   ⛔ Žádný `margin-top`: odstup nese `gap` mřížky. ⚠️ Dřív tu bylo 14 px, protože přepínač
   visel POD grafem. */
.trend-toggles{position:absolute;left:0;right:0;top:0;max-height:100%;display:flex;flex-direction:column;gap:2px;
  background:var(--bg-well);box-shadow:var(--well-shadow);
  border-radius:var(--radius-sm);padding:4px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.trend-toggles::-webkit-scrollbar{width:8px}
.trend-toggles::-webkit-scrollbar-track{background:transparent}
.trend-toggles::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.trend-toggles::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}
.trend-tg{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:10px;width:100%;
  flex:0 0 auto;padding:5px 9px;background:none;border:none;border-radius:var(--radius-sm);color:var(--text-muted);
  font:inherit;font-size:11px;text-align:left;cursor:pointer;opacity:.5;
  transition:opacity .12s,background .12s}
.trend-tg:hover{background:var(--bg-card-hover);opacity:.8}
.trend-tg.is-on{opacity:1;color:var(--text-secondary);background:var(--bg-card-hover)}
.trend-tg i{width:10px;height:10px;border-radius:2px}
.trend-tg-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-tg b{color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:11px}
.trend-tg:not(.is-on) b{color:var(--text-muted);font-weight:400}
.trend-tg:focus-visible{outline:2px solid var(--text-secondary);outline-offset:-2px}

/* ── Filtr obdobi ─────────────────────────────────────────────────────────────
   ⚓ JEDEN RADEK NAD OBSAHEM, ktery filtruje — ⛔ ne uvnitr karty grafu a ⛔ ne
      per-graf. Filtr scopuje VSECHNO pod sebou (dlazdice, oba grafy, tabulka),
      takze cisla vzdy souhlasi.
   ⚓ PRESETY JSOU RADKY, ⛔ ne kalendarni mrizka: nikdo nechce v kalendari lovit
      „poslednich 30 dni". Kalendar je az pro VLASTNI obdobi, a ten sedi za
      vlasovou linkou v paticce — tam, kde ho hleda jen ten, kdo ho fakt chce. */
.rng{position:relative;display:inline-block}
.rng-btn{display:inline-flex;align-items:center;gap:8px;height:var(--adm-ctl-h,30px);box-sizing:border-box;
  padding:0 12px;background:var(--bg-control);border:none;border-radius:var(--radius-sm);
  box-shadow:var(--btn-shadow);color:var(--text-secondary);font:inherit;font-size:10px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.rng-btn:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.rng-btn.open{background:var(--bg-card-hover);color:var(--text-primary)}
.rng-btn svg{width:12px;height:12px;flex-shrink:0;opacity:.7}

.rng-pop{display:none;position:absolute;top:calc(100% + 5px);right:0;z-index:60;min-width:216px;
  background:var(--bg-card);border-radius:var(--radius);box-shadow:0 10px 28px rgba(0,0,0,.5);padding:5px}
.rng-pop.open{display:block}
.rng-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:8px 10px;background:none;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);
  font:inherit;font-size:11px;text-align:left;cursor:pointer;transition:background .12s,color .12s}
/* Hover je GHOST WASH — ⛔ nesmi soutezit s vyberem, ktery nese fajfka. */
.rng-opt:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.rng-opt.sel{color:var(--text-primary)}
/* Vyber nese ZNACKA, ⛔ ne jen barva — 16px, tucne, aby byla videt na prvni pohled. */
.rng-check{font-size:16px;line-height:1;font-weight:700;color:var(--accent-active);visibility:hidden}
.rng-opt.sel .rng-check{visibility:visible}

/* ⚓ Vlasova linka i UVNITR presetu: oddeluje KLOUZAVA okna („poslednich N dni")
   od KALENDARNICH („tento mesic"). Jsou to dva ruzne zpusoby, jak myslet na cas. */
.rng-sep-row{height:1px;background:var(--bg-card-hover);margin:5px 10px}
/* Vlasova linka oddeluje presety od vlastniho obdobi. */
.rng-foot{margin-top:5px;padding:9px 10px 4px;border-top:1px solid var(--bg-card-hover)}
.rng-foot-lbl{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);margin-bottom:6px}
.rng-dates{display:flex;align-items:center;gap:6px}
.rng-dates input{flex:1;min-width:0;background:var(--bg-well);box-shadow:var(--well-shadow);border:none;
  border-radius:var(--radius-sm);padding:6px 8px;color:var(--text-primary);font:inherit;font-size:11px;
  outline:none;color-scheme:dark}
.rng-dates input:focus-visible{outline:2px solid var(--text-secondary);outline-offset:1px}
.rng-sep{color:var(--text-muted);font-size:11px;flex-shrink:0}
.rng-apply{width:100%;margin-top:7px;padding:7px 10px;background:var(--accent-active);color:var(--bg-app);
  border:none;border-radius:var(--radius-sm);font:inherit;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.rng-apply:disabled{opacity:.45;cursor:default}
.rng-err{margin-top:6px;font-size:10px;color:var(--red)}

/* ⚓ Prekresleni DRZI RAM: data se nactou pod snizenou kryci schopnosti, ⛔ zadny
   skeleton a ⛔ zadny skok layoutu. */
.trend-row.is-loading,.summary-grid.is-loading{opacity:.45;transition:opacity .15s}

/* ── Rozpad kategorii (vodorovny sloupcovy graf) ──────────────────────────────
   ⚓ Je to SVG GRAF, ⛔ divy s pruhy. Prvni verze byla `div` + `width:%` a
      vypadala jako seznam, protoze to seznam byl: bez hodnotove osy se delka
      sloupce neda odecist.
   ⚓ JEDNA BARVA, ⛔ duha: jedna velicina napric kategoriemi, velikost nese DELKA.
   ⚓ Mezeru mezi sousedy dela VOLNE MISTO v radku (sloupec 13 px v kroku 26 px),
      ⛔ ne obrys kolem sloupce — obrys je inkoust, ktery neni data. */
/* ⚓ Karta rozpadu je TATAZ plocha jako casova rada: sdili `.trend-fig`, ⛔ nema vlastni
   kopii — dve definice teze karty se rozejdou a pozna se to az tim, ze jedna vypada
   jinak. Zde zustava jen to, co je pro rozpad SPECIFICKE. */
/* ⚓ Sloupec, aby se `.bd-list` roztáhl do NATAŽENÉ karty a `.bd-foot` zůstal dole:
   od chvíle, kdy řádek srovnává výšky, může být rozpad ten KRATŠÍ z dvojice a prázdno
   patří dovnitř wellu, ⛔ ne pod kartu. */
.bd-card{margin:0;display:flex;flex-direction:column}   /* odsazení nese mřížka řádku (`gap`), ⛔ ne karta sama */
.bd-list{flex:1;min-height:0}
/* Ovládání pod žebříčkem. ⚠️ Těch 14 px kdysi SROVNÁVALO spodní patro s přepínačem časové
   řady — ten je od 2026-09-05 VEDLE grafu, takže je to dnes prostě odstup ovladače od
   grafu, ⛔ už ne shoda dvou karet. */
.bd-foot{display:flex;justify-content:flex-end;margin-top:14px}
.bd-list svg{width:100%;display:block;overflow:visible}
.bd-bar{fill:var(--accent-active)}
/* „Ostatni" je PRIZNANI, ⛔ ne dalsi kategorie — proto ztlumene. */
.bd-bar.is-rest{fill:var(--bg-control)}
/* Text NIKDY nenese barvu znacky — identitu nese sloupec vedle nej. */
/* ⚓ Vlajka je SOUCAST identity radku, ⛔ ne ozdoba — proto sedi tesne u jmena. */
.bd-flag{opacity:.95}
.bd-name{fill:var(--text-primary);font-size:11px;font-family:inherit}
.bd-num{fill:var(--text-primary);font-size:11px;font-weight:700;font-family:inherit;font-variant-numeric:tabular-nums}
.bd-share{fill:var(--text-muted);font-size:10px;font-family:inherit;font-variant-numeric:tabular-nums}
.bd-empty{color:var(--text-muted);font-size:11px;padding:6px 0}