/* Grafy a ukazatele (src/grafy.ts, src/vizual.ts) a řádek dlaždic KPI (src/kpi-radek.ts).
Pravidla: grafy bez kruhů, půlkruhů a koláčů, linky 1 px; dlaždice KPI jsou zaoblené karty (vzhled „Sklo“, 2026-10-08),
první dlaždice je zvýrazněná modrým přechodem jako „Total Sales“ v podkladu Boltshift.
Pruhy jsou SVG s preserveAspectRatio none, proto mají čáry vector-effect: non-scaling-stroke (tloušťka se neroztahuje).
Barvy jen z proměnných v zaklad.css. Soubor se načítá i na sdíleném přehledu. */
/* ---------- čárový a sloupcový graf (data po dnech, nejlepší stránky) ---------- */
.mrizka-grafu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.graf { margin: 0 0 8px; padding: 0; min-width: 0; }
.graf-nazev { font-weight: 600; font-size: 13px; margin-bottom: 8px; color: var(--inkoust); }
.graf-obal { overflow-x: auto; }
.graf-svg { display: block; width: 100%; min-width: 440px; max-width: 760px; height: auto; }
.graf-mrizka { stroke: var(--linka-jemna); stroke-width: 1; shape-rendering: crispEdges; }
.graf-osa { stroke: var(--linka-silna); }
.graf-text { fill: var(--tlumeny); font-size: 12px; font-family: var(--pisma); font-variant-numeric: tabular-nums; }
.graf-stitek { fill: var(--inkoust-2); font-size: 13px; }
.graf-hodnota { fill: var(--inkoust); font-size: 13px; font-weight: 600; }
.graf-cara { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: butt; }
.graf-cara-a { stroke: var(--google); }
.graf-cara-b { stroke: var(--inkoust-2); }
.graf-cara-ai { stroke: var(--ai); }
.graf-cara-web { stroke: var(--web); }
.graf-plocha-a { fill: var(--google); opacity: 0.1; }
.graf-plocha-b { fill: var(--inkoust-2); opacity: 0.08; }
.graf-plocha-ai { fill: var(--ai); opacity: 0.1; }
.graf-plocha-web { fill: var(--web); opacity: 0.1; }
.graf-bod-a { fill: var(--google); }
.graf-bod-b { fill: var(--inkoust-2); }
.graf-bod-ai { fill: var(--ai); }
.graf-bod-web { fill: var(--web); }
.graf-tip { fill: var(--google); fill-opacity: 0; }
.graf-tip:hover { fill-opacity: 0.08; }
.graf-sloupec-a { fill: var(--google); }
.graf-sloupec-b { fill: var(--inkoust-2); }
.graf-sloupec-ai { fill: var(--ai); }
.graf-sloupec-web { fill: var(--web); }
.graf-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; padding: 0; font-size: 13px; color: var(--inkoust-2); }
.graf-kapka { display: inline-block; width: 10px; height: 10px; margin-right: 6px; }
.graf-kapka-a { background: var(--google); }
.graf-kapka-b { background: var(--inkoust-2); }
.graf-kapka-ai { background: var(--ai); }
.graf-kapka-web { background: var(--web); }
.graf-prazdny { color: var(--tlumeny); }
/* ---------- pruh 0 až 100 % s pásmem nejistoty (úsečka s ohraničením) ---------- */
.pasmo-pruh { display: block; width: 100%; height: 20px; overflow: visible; --pasmo-sloupec: var(--google-linka); --pasmo-cara: var(--google); }
.pasmo-pruh-ai { --pasmo-sloupec: var(--ai-linka); --pasmo-cara: var(--ai); }
.pasmo-pruh-web { --pasmo-sloupec: var(--web-linka); --pasmo-cara: var(--web); }
.pasmo-pruh .graf-mrizka, .pasmo-pruh .graf-osa { vector-effect: non-scaling-stroke; }
.pasmo-sloupec { fill: var(--pasmo-sloupec); }
.pasmo-usecka, .pasmo-uzaver, .pasmo-hodnota { stroke: var(--pasmo-cara); vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.pasmo-usecka { stroke-width: 2; }
.pasmo-uzaver { stroke-width: 2; }
.pasmo-hodnota { stroke-width: 3; stroke: var(--inkoust); }
.pasmo-osa { display: flex; justify-content: space-between; font-size: 12px; color: var(--tlumeny); font-variant-numeric: tabular-nums; margin-top: 2px; }
/* ---------- velké číslo nad pruhem (skóre webu) ---------- */
.ukazatel { margin: 2px 0 4px; }
.ukazatel-cislo { margin: 0 0 8px; font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--inkoust); }
/* malý pruh podílu (nejcitovanější weby) */
.mini-pruh { display: block; width: 100%; height: 6px; }
.mini-pruh-draha { fill: var(--linka-jemna); }
.mini-pruh-hodnota { fill: var(--google); }
.mini-pruh-ai .mini-pruh-hodnota { fill: var(--ai); }
.mini-pruh-web .mini-pruh-hodnota { fill: var(--web); }
/* ---------- skládaný sloupec ---------- */
.graf-skladany { margin: 8px 0 4px; }
.skladany-pruh { display: block; width: 100%; height: 16px; }
.skladany-dil { fill: var(--c); stroke: var(--karta); stroke-width: 1; vector-effect: non-scaling-stroke; }
.skladany-ai { --c: var(--ai); }
.skladany-google { --c: var(--google); }
.skladany-web { --c: var(--web); }
.skladany-ok { --c: var(--zelena); }
.skladany-chyba { --c: var(--cervena); }
.skladany-neutralni { --c: var(--linka-silna); }
.skladany-a { --c: color-mix(in srgb, var(--google) 65%, var(--karta)); }
.skladany-b { --c: color-mix(in srgb, var(--google) 38%, var(--karta)); }
.skladany-c { --c: color-mix(in srgb, var(--google) 20%, var(--karta)); }
.skladany-d { --c: color-mix(in srgb, var(--google) 10%, var(--karta)); }
.skladany-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--inkoust-2); }
.skladany-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.skladany-kapka { display: inline-block; width: 10px; height: 10px; background: var(--c); flex: none; }
.skladany-legenda strong { font-variant-numeric: tabular-nums; color: var(--inkoust); }
.skladany-podil { color: var(--tlumeny); font-variant-numeric: tabular-nums; }
/* ---------- sparkline ---------- */
.sparkline { display: block; width: 100%; height: 32px; }
.sparkline-cara { fill: none; stroke: var(--google); stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sparkline-plocha { fill: var(--google); opacity: 0.1; }
.sparkline-konec { stroke: var(--google); stroke-width: 3; vector-effect: non-scaling-stroke; }
.sparkline-ai .sparkline-cara, .sparkline-ai .sparkline-konec { stroke: var(--ai); }
.sparkline-ai .sparkline-plocha { fill: var(--ai); }
.sparkline-web .sparkline-cara, .sparkline-web .sparkline-konec { stroke: var(--web); }
.sparkline-web .sparkline-plocha { fill: var(--web); }
.sparkline-b .sparkline-cara, .sparkline-b .sparkline-konec { stroke: var(--inkoust-2); }
.sparkline-b .sparkline-plocha { fill: var(--inkoust-2); }
/* ---------- segmentovaný pruh (změny na webu) ---------- */
.segmenty { display: block; width: 100%; height: 10px; margin: 6px 0 8px; }
.segment { fill: var(--pozadi-hluboke); stroke: var(--karta); stroke-width: 1; vector-effect: non-scaling-stroke; }
.segment-ok { fill: var(--zelena); }
.segment-chyba { fill: var(--cervena); }
.segment-varovani { fill: var(--akcent); }
.segment-neutralni { fill: var(--linka-silna); }
.segmenty-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; padding: 0; font-size: 13px; color: var(--inkoust-2); }
.segment-kapka { display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: var(--linka-silna); }
.segment-kapka.segment-ok { background: var(--zelena); }
.segment-kapka.segment-chyba { background: var(--cervena); }
.segment-kapka.segment-varovani { background: var(--akcent); }
/* ---------- řádek dlaždic KPI ---------- */
/* tři dlaždice v řadě (podklad Boltshift). Na širokém displeji mozaika ve čtyřech sloupcích: zmínky v AI (modrá) a skóre
webu jsou dvojnásobně široké, takže pruhy s pásmem nejistoty a skóre mají víc místa a řada nepůsobí jako tabulka.
Pořadí v HTML zůstává (AI, podíl hlasu, kliknutí, zobrazení, pozice, skóre), mozaika ho jen rozloží:
[ AI ][ podíl ][ kliknutí ]
[ zobrazení ][ pozice ][ skóre ] */
.kpi-radek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
@media (min-width: 1360px) {
.kpi-radek { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-radek > .kpi:first-child, .kpi-radek > .kpi-web { grid-column: span 2; }
}
.kpi { --kpi-b: var(--akcent); --kpi-prechod: var(--prechod-ucet); position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 20px 22px 18px; background: var(--plocha); border: 1px solid var(--sklo-linka); border-radius: var(--polomer-karta); box-shadow: var(--stin); transition: transform 0.5s var(--pohyb), box-shadow 0.5s var(--pohyb); }
@media (hover: hover) {
.kpi:hover { transform: translateY(-3px); box-shadow: var(--stin-vyssi); }
.kpi:first-child:hover { box-shadow: var(--stin-zvyrazneni); }
.kpi:nth-child(1 of .kpi-google):hover { box-shadow: var(--stin-zvyrazneni-2); }
}
/* ikona zdroje v plném barevném kruhu vpravo nahoře (bílá ikona, lesk nahoře); na modré a oranžové dlaždici bílý kruh */
.kpi-ikona { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: auto; border-radius: var(--pilulka); background: var(--kpi-prechod); color: #ffffff; box-shadow: var(--stin-kruh); transition: transform 0.6s var(--pohyb); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.kpi:hover .kpi-ikona { transform: rotate(-10deg) scale(1.08); }
}
.kpi:is(:first-child, :nth-child(1 of .kpi-google)) .kpi-ikona { background: #ffffff; color: #2563eb; }
.kpi:nth-child(1 of .kpi-google) .kpi-ikona { color: #ea580c; }
.kpi-ikona::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--kpi-ikona) center / contain no-repeat; mask: var(--kpi-ikona) center / contain no-repeat; }
.kpi-ai { --kpi-ikona: url("data:image/svg+xml;utf8,"); --kpi-b: var(--ai); --kpi-prechod: var(--prechod-ai); }
.kpi-google { --kpi-ikona: url("data:image/svg+xml;utf8,"); --kpi-b: var(--google); --kpi-prechod: var(--prechod-google); }
.kpi-web { --kpi-ikona: url("data:image/svg+xml;utf8,"); --kpi-b: var(--web); --kpi-prechod: var(--prechod-web); }
/* zvýrazněné dlaždice: první (zmínky v AI) modrý přechod, první dlaždice Googlu (kliknutí) oranžový přechod; bílý text,
lesk nahoře, světlo z pravého horního rohu. Barvy uvnitř se přepnou jen proměnnými. :is() je shovívavé, takže prohlížeč
bez „nth-child(… of …)“ nechá modrou dlaždici a kliknutí ukáže jako běžnou bílou dlaždici. */
.kpi:is(:first-child, :nth-child(1 of .kpi-google)) {
--kurzor-svetlo: rgba(255, 255, 255, 0.16);
--sklo-hrana: linear-gradient(165deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.18) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.22) 100%);
--inkoust: #ffffff;
--inkoust-2: rgba(255, 255, 255, 0.9);
--tlumeny: rgba(255, 255, 255, 0.82);
--kpi-b: #ffffff;
--ai: #ffffff;
--google: #ffffff;
--web: #ffffff;
--zelena: #ffffff;
--zelena-svetla: rgba(255, 255, 255, 0.18);
--linka-jemna: rgba(255, 255, 255, 0.22);
--linka-silna: rgba(255, 255, 255, 0.4);
--pozadi-hluboke: rgba(255, 255, 255, 0.2);
--ukazka-pozadi: rgba(255, 255, 255, 0.18);
--ukazka-text: #ffffff;
--ukazka-linka: rgba(255, 255, 255, 0.4);
--akcent: #ffffff;
--akcent-tmavy: #ffffff;
--ai-linka: rgba(255, 255, 255, 0.3);
--google-linka: rgba(255, 255, 255, 0.3);
--web-linka: rgba(255, 255, 255, 0.3);
--karta: transparent;
--plocha-jemna: rgba(255, 255, 255, 0.12);
background: var(--lesk-tlacitko), var(--zvyrazneni);
border-color: transparent;
box-shadow: var(--stin-zvyrazneni);
color: #fff;
}
.kpi:nth-child(1 of .kpi-google) { background: var(--lesk-tlacitko), var(--zvyrazneni-2); box-shadow: var(--stin-zvyrazneni-2); }
.kpi:is(:first-child, :nth-child(1 of .kpi-google)) .kpi-nazev::before { box-shadow: none; }
/* tlačítko v prázdné zvýrazněné dlaždici (třeba „Spustit měření“): bílá pilulka s inkoustovým textem, ne bílé na bílém */
.kpi:is(:first-child, :nth-child(1 of .kpi-google)) .tlacitko-sekundarni { --inkoust: #0b0d12; background: #ffffff; color: #0b0d12; border-color: transparent; }
.kpi-hlava { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px 6px; min-height: 40px; }
.kpi-nazev { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--tlumeny); line-height: 1.3; }
.kpi-nazev::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: var(--pilulka); background: var(--kpi-b); }
.kpi-nazev a { color: inherit; text-decoration: none; }
.kpi-nazev a:hover { color: var(--inkoust); text-decoration: underline; text-decoration-color: var(--kpi-b); }
.kpi-hlava .info { margin-left: 0; }
.kpi-hlava .info:last-child { margin-left: auto; }
.kpi-cislo { margin: 6px 0 0; font-size: 38px; line-height: 1.1; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--inkoust); overflow-wrap: anywhere; }
.kpi-jednotka { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--tlumeny); }
.kpi-zmena { margin: 0; }
.kpi-graf { display: flex; align-items: center; min-height: 32px; margin-top: 6px; }
.kpi-graf > * { flex: 1; min-width: 0; }
.kpi-drobne { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--tlumeny); overflow-wrap: anywhere; }
.kpi-zdroj { margin: auto 0 0; padding-top: 8px; font-size: 12px; line-height: 1.4; color: var(--tlumeny); }
.kpi-chybi-text { margin: 2px 0 8px; font-size: 13px; line-height: 1.4; color: var(--tlumeny); }
.kpi-chybi .tlacitko { align-self: flex-start; }
@media (max-width: 1240px) {
.kpi-radek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.mrizka-grafu { grid-template-columns: minmax(0, 1fr); }
.kpi-radek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi { padding: 12px 14px 10px; }
.kpi-cislo { font-size: 24px; }
}
@media (max-width: 400px) {
.kpi-radek { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- pohyb při načtení (Sklo, druhá vlna 2026-10-08) ----------
Dlaždice a karty najedou zespodu, pruhy a sloupce dorostou. Jen s povoleným pohybem a jen při prvním zobrazení:
když stránka sama obnovuje (běží měření, data-obnovit), nic se znovu nepřehrává. */
@media (prefers-reduced-motion: no-preference) {
.kpi { animation: nabeh 0.8s var(--pohyb) backwards; }
.kpi:nth-child(2) { animation-delay: 0.06s; }
.kpi:nth-child(3) { animation-delay: 0.12s; }
.kpi:nth-child(4) { animation-delay: 0.18s; }
.kpi:nth-child(5) { animation-delay: 0.24s; }
.kpi:nth-child(6) { animation-delay: 0.3s; }
.mrizka-karet > .karta { animation: nabeh 0.85s var(--pohyb) 0.28s backwards; }
.mrizka-karet > .karta:nth-child(2) { animation-delay: 0.36s; }
.mrizka-karet > .karta:nth-child(3) { animation-delay: 0.44s; }
.mrizka-karet > .karta:nth-child(4) { animation-delay: 0.52s; }
.mrizka-karet > .karta:nth-child(n + 5) { animation-delay: 0.6s; }
/* ostatní stránky (Odpovědi AI, Google, Zdraví, Změny, Moje weby, Kredity): bloky obsahu najedou jeden po druhém */
.obsah > :not(.kpi-radek, .mrizka-karet, .oblasti) { animation: nabeh 0.75s var(--pohyb) backwards; }
.obsah > :nth-child(2):not(.kpi-radek, .mrizka-karet, .oblasti) { animation-delay: 0.04s; }
.obsah > :nth-child(3):not(.kpi-radek, .mrizka-karet, .oblasti) { animation-delay: 0.09s; }
.obsah > :nth-child(4):not(.kpi-radek, .mrizka-karet, .oblasti) { animation-delay: 0.14s; }
.obsah > :nth-child(5):not(.kpi-radek, .mrizka-karet, .oblasti) { animation-delay: 0.19s; }
.obsah > :nth-child(6):not(.kpi-radek, .mrizka-karet, .oblasti) { animation-delay: 0.24s; }
.obsah > :nth-child(n + 7):not(.kpi-radek, .mrizka-karet, .oblasti) { animation-delay: 0.29s; }
.mini-pruh-hodnota,
.pasmo-sloupec,
.skladany-dil,
.segment { transform-box: fill-box; transform-origin: 0 50%; animation: rust-x 1.1s var(--pohyb) 0.5s backwards; }
.trend-sloupec,
.graf-svg :is(.graf-sloupec-a, .graf-sloupec-b, .graf-sloupec-ai, .graf-sloupec-web) { transform-box: fill-box; transform-origin: 50% 100%; animation: rust-y 1.1s var(--pohyb) 0.55s backwards; }
/* čáry a plochy grafů se nakreslí zleva doprava, body se ukážou až za čárou */
.sparkline,
.graf-svg :is(.graf-cara, .graf-plocha-a, .graf-plocha-b, .graf-plocha-ai, .graf-plocha-web) { animation: kresba 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.45s backwards; }
.graf-svg :is(.graf-bod-a, .graf-bod-b, .graf-bod-ai, .graf-bod-web) { animation: objeveni 0.5s ease-out 1.5s backwards; }
html:has([data-obnovit]) :is(.kpi, .karta, .obsah > *, .mini-pruh-hodnota, .pasmo-sloupec, .skladany-dil, .segment, .trend-sloupec, .sparkline, .graf-svg *) { animation: none; }
}
/* nájezd zespodu s krátkým rozostřením (jako na webu), kreslení čáry výřezem zleva */
@keyframes nabeh { from { opacity: 0; transform: translateY(16px); filter: blur(5px); } }
@keyframes rust-x { from { transform: scaleX(0); } }
@keyframes rust-y { from { transform: scaleY(0); } }
@keyframes kresba { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }