/* DataDent – hero ukázka aplikace v2 (schválená odchylka od podkladů v32, 31/10/2026)
   Varianta A „Dnešní program + karta pacienta“ s vyložkou z varianty B; vzor: hero-kombinace-nahled.html.
   Nahrazuje původní mock #app (browser lišta, ikonová lišta, searchbar, taby, tabulka #heroTbl).
   Vše s prefixem hv2-; av a mono jsou společné třídy ze style.css. Stavy = .hv2-stav (alias .stav ze stavy.css), ne pilulky .chip. */

.hv2-ram{position:relative;max-width:1240px;margin:0 auto;container:hv2/inline-size}
.hx-v1 .hv2-ram{transform:rotateY(-9deg) rotateX(3deg);transform-origin:left center}

.hv2-okno{background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg),0 0 0 1px rgba(221,235,235,.9)}
.hv2-lista{display:flex;align-items:center;gap:6px 14px;padding:12px 20px;border-bottom:1px solid var(--line);background:#f8fbfb;flex-wrap:wrap}
.hv2-znacka{display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--ink)}
.hv2-znacka svg,.hv2-znacka span{color:var(--violet)}
.hv2-misto{color:var(--muted);font-size:13px}
.hv2-role{margin-left:auto;display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:12.5px;font-weight:600}
.hv2-role span{padding:5px 14px;color:var(--muted)}
.hv2-role span.on{background:var(--ink);color:#fff}

.hv2-telo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);min-height:460px}
.hv2-linka{padding:22px 10px 22px 24px;border-right:1px solid var(--line);min-width:0}
.hv2-linka-h{display:flex;align-items:baseline;gap:12px;padding:0 14px 12px 0}
.hv2-linka-h b{font-family:var(--f-display);font-size:15px}
.hv2-linka-h span{color:var(--muted);font-size:12.5px;margin-left:auto}

.hv2-radek{display:grid;grid-template-columns:58px minmax(0,1fr);gap:0 14px;position:relative;border:0;background:none;
  width:100%;text-align:left;font:inherit;color:inherit;padding:0;cursor:pointer}
.hv2-radek:focus-visible{outline:2px solid var(--violet-2);outline-offset:2px;border-radius:var(--r-sm)}
.hv2-cas{font-weight:600;font-size:13px;color:var(--muted);padding-top:13px;text-align:right}
.hv2-bunka{position:relative;display:block;border-left:2px solid var(--line);padding:10px 14px 14px 18px;transition:background .2s}
.hv2-bunka::before{content:"";position:absolute;left:-6px;top:17px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--violet)}
.hv2-radek:hover .hv2-bunka{background:var(--sand);border-radius:0 var(--r-sm) var(--r-sm) 0}
.hv2-radek.on .hv2-bunka{background:var(--mint);border-left-color:var(--violet);border-radius:0 var(--r-sm) var(--r-sm) 0}
.hv2-radek.on .hv2-bunka::before{background:var(--violet)}
.hv2-kdo{display:block;font-weight:600;line-height:1.3}
.hv2-co{display:block;color:var(--muted);font-size:13px}
.hv2-stavy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;margin-top:7px}

/* stav (pojištění / anamnéza): v časové ose 2 lícující sloupce, v detailu hodnota za štítkem (.hv2-hodnota).
   Vzhled a barvy .hv2-stav = alias sdílené komponenty .stav v stavy.css (tokeny --stav-*). */

.hv2-detail{padding:22px 24px;background:#fdfefe;min-width:0}
.hv2-d-h{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.hv2-d-h b{font-family:var(--f-display);font-size:18px;letter-spacing:-.02em}
.hv2-d-h small{display:block;color:var(--muted);font-size:12.5px}
.hv2-stitek-cas{margin-left:auto;background:var(--lav);color:var(--peri-d);font-weight:700;font-size:12.5px;border-radius:8px;padding:4px 9px}

.hv2-d-radky{margin-top:16px;border-top:1px solid var(--line)}

/* zubní kříž = náhled ostrého kříže aplikace v32 (01/11/2026, pokyn majitele: „jakože v náhledu“ #dc-chart karty pacienta).
   Blok #hv2Kriz vkládá LandingRenderer z resources/landing/hero-kriz.html (generuje scripts/landing-hero-kriz.php z těl
   zubů aplikace DkZuby): horní čelist korunkami dolů, okluzní řady, dolní čelist korunkami nahoru, čísla FDI jako #dc-chart.
   Tvary = <use> do spritu webu /assets/img/hv2-kriz-zuby.svg (kopie geometrie aplikace + šroub implantátu); <use> nesou
   stejné atributy jako v aplikaci (var(--tooth-status-color…)) → tady jen tokeny dd-kriz.css a barvy stavů hero.
   Stav (dnešní výkon/plán/ošetřeno) = výplň korunky jako paleta aplikace; druh zubu jazykem boky(): chybí = duch,
   implantát = šroub místo kořenů, endo = barvené kořeny, mezičlen = kořeny duch. Přepnutí pacienta mění jen třídy .hv2-t. */
.hv2-detail{display:flex;flex-direction:column}
.hv2-kriz{--tooth-status-color:#fff;--tooth-root-color:#f4f7f7;--tooth-stroke:#7f9a9b;--tooth-endo-color:transparent;
  --dd-ghost:#b6c9c9;--dd-tooth-line:#7f9a9b;--dd-tooth-fis:#abbebf;--dd-m-impl:#8a96a3;--hv2-plocha:#fafafa;--hv2-kn:var(--muted);
  flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;margin-top:16px;padding:12px 12px 10px;
  border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.hv2-kriz>svg{display:block;width:100%;max-width:620px;height:auto;margin:0 auto;overflow:visible}
.hv2-kriz svg svg{overflow:visible}
.hv2-kriz text{fill:var(--hv2-kn);font:700 22px var(--f-mono);text-anchor:middle;font-variant-numeric:tabular-nums}
.hv2-kriz-osa{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:6 5}
.hv2-kriz-stred{fill:none;stroke:var(--line);stroke-width:2}
.hv2-t.extr{--tooth-status-color:color-mix(in srgb,var(--bad) 32%,#fff);--hv2-kn:var(--bad)}
.hv2-t.plan{--tooth-status-color:color-mix(in srgb,var(--warn) 32%,#fff);--hv2-kn:var(--warn)}
.hv2-t.os{--tooth-status-color:color-mix(in srgb,var(--violet) 30%,#fff);--hv2-kn:var(--peri-d)}
.hv2-z-impl{display:none}
.hv2-t.impl .hv2-z-impl{display:inline}
.hv2-t.impl .hv2-z-rt,.hv2-t.impl .hv2-z-endo,.hv2-t.chybi .hv2-z-endo,.hv2-t.mez .hv2-z-endo{display:none}
.hv2-t.endo{--tooth-endo-color:#16a34a}
.hv2-t.chybi .hv2-z-rt,.hv2-t.mez .hv2-z-rt{fill:none;stroke:var(--dd-ghost);stroke-dasharray:1.6 1.3}
.hv2-t.chybi .hv2-z-cr{fill-opacity:.35;stroke:var(--dd-ghost);stroke-dasharray:1.6 1.3}
.hv2-t.chybi .hv2-z-ln{stroke:var(--dd-ghost);stroke-dasharray:1.6 1.3}
.hv2-kriz-pozn{display:flex;justify-content:center;gap:6px 16px;flex-wrap:wrap;color:var(--muted);font-size:11.5px;margin-top:10px}
.hv2-kriz-pozn i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;border:1.5px solid}
.hv2-kriz-pozn i.extr{background:color-mix(in srgb,var(--bad) 32%,#fff);border-color:var(--bad)}
.hv2-kriz-pozn i.plan{background:color-mix(in srgb,var(--warn) 32%,#fff);border-color:var(--warn)}
.hv2-kriz-pozn i.os{background:color-mix(in srgb,var(--violet) 30%,#fff);border-color:var(--peri-d)}
/* řádek detailu = štítek (min. 140 px, jinak nejdelší štítek) | mezera 16 px | hodnota; hodnoty tří řádků lícují vlevo pod sebou
   (pokyn majitele 31/10/2026, místo hodnoty u pravé hrany karty; 140 px místo těsných 110 px, aby hodnota neležela na štítku) */
.hv2-d-radek{display:grid;grid-template-columns:minmax(140px,max-content) minmax(0,1fr);align-items:center;column-gap:16px;padding:10px 0;border-bottom:1px solid #edf4f5;font-size:13.5px}
.hv2-d-radek b{font-weight:600}
.hv2-d-radek>.hv2-hodnota{justify-self:start}
/* dlouhý stav se v užší kartě zalomí na 2 řádky (písmo beze změny), druhý řádek lícuje s textem, tečka u prvního řádku */
.hv2-d-radek>.hv2-stav{align-items:flex-start;line-height:1.35}
.hv2-d-radek>.hv2-stav i{margin-top:calc((1.35em - 7px)/2)}
.hv2-d-radek .hv2-pozn{color:var(--muted);font-size:12.5px}

/* vyložka (z varianty B): tmavý štítek s výkonem vybraného pacienta u horního okraje okna nad detailem */
.hv2-vylozka{position:absolute;z-index:2;right:22px;top:-18px;background:var(--ink);color:#fff;border-radius:12px;padding:10px 16px;
  font-size:13px;line-height:1.35;box-shadow:var(--shadow-md)}
.hv2-vylozka b{display:block;font-family:var(--f-display)}
.hv2-vylozka small{opacity:.75}

/* užší okno (hero ve dvou sloupcích na menším monitoru): vyrovnané sloupce, menší odsazení */
@container hv2 (max-width:760px){
  .hv2-telo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hv2-linka{padding:18px 8px 18px 16px}
  .hv2-radek{grid-template-columns:44px minmax(0,1fr);gap:0 10px}
  .hv2-bunka{padding:9px 10px 12px 14px}
  .hv2-stavy{grid-template-columns:minmax(0,1fr)}
  .hv2-detail{padding:18px 16px}
  .hv2-kriz{padding:10px 8px 8px}
}
/* úzké okno / telefon: sloupce pod sebe, vyložka nad oknem */
@container hv2 (max-width:600px){
  .hv2-telo{grid-template-columns:minmax(0,1fr);min-height:0}
  .hv2-linka{border-right:0;border-bottom:1px solid var(--line)}
  .hv2-vylozka{position:static;display:inline-block;margin-bottom:12px}
  .hv2-d-radek{grid-template-columns:minmax(0,1fr);row-gap:4px}
  /* kříž 1080 jednotek široký se na telefonu zmenší ~3,5× → větší čísla FDI (mezi zuby je 69 jednotek) */
  .hv2-kriz text{font-size:30px}
}
@media(max-width:860px){
  .hv2-telo{grid-template-columns:minmax(0,1fr);min-height:0}
  .hv2-linka{border-right:0;border-bottom:1px solid var(--line)}
  .hv2-vylozka{position:static;display:inline-block;margin-bottom:12px}
}
@media(max-width:960px){.hx-v1 .hv2-ram{transform:none}}
@media(max-width:520px){
  .hv2-okno{border-radius:16px}
  .hv2-lista{padding:10px 14px}
  .hv2-linka{padding:16px 6px 16px 10px}
  .hv2-detail{padding:16px 14px}
}

/* Akce nad nadpisem (01/11/2026, pokyn majitele): místo kapsle .badge „PROMO AKCE“ tichý řádek ve stylu .stav —
   čtvereček v akcentu + věcný text z /akce + šipka; bez pozadí a kapsle, lícuje se sloupcem hero copy. */
.hero-akce{display:inline-flex;align-items:flex-start;gap:9px;padding:0;background:none;font-size:13.5px;font-weight:500;line-height:1.4;color:var(--ink-2);text-align:left;text-decoration:none}
.hero-akce>i{width:7px;height:7px;border-radius:2px;background:var(--violet);flex:none;margin-top:calc((1.4em - 7px)/2)}
.hero-akce b{font-weight:700;color:var(--peri-d)}
.hero-akce .arr{color:var(--peri-d);transition:transform .2s}
.hero-akce:hover span:not(.arr),.hero-akce:focus-visible span:not(.arr){text-decoration:underline;text-underline-offset:3px}
.hero-akce:hover .arr{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.hero-akce .arr{transition:none}}