/* AI Radar — redakční vizuální systém (redesign 2026-07).
   Bez build kroku, bez externích požadavků: vše je v jednom CSP-kompatibilním
   souboru (style-src 'self'). Nová identita staví na STÁVAJÍCÍCH názvech tříd,
   takže stránky, jejichž šablony se nemění (archiv, metodika, porovnání
   modelů), dostanou nový vzhled samy. Nové komponenty jsou dole v sekcích
   „Pruh zobrazení“, „Osnova dne“, „Zpráva dne“, „Řádek události“ a „Úvodní okno“. */

/* ------------------------------------------------------------------ fonty
   Soubory patří do app/statika/fonty/. Dokud tam nejsou, systém spadne
   na Georgia / system-ui — návrh drží i bez nich. */

@font-face {
    font-family: Newsreader;
    src: url("/statika/fonty/newsreader-600.woff2?v=69e362979ada") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Newsreader;
    src: url("/statika/fonty/newsreader-500.woff2?v=b1b2b69beef1") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Newsreader;
    src: url("/statika/fonty/newsreader-400.woff2?v=2cdf89e6c4a7") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plex Sans";
    src: url("/statika/fonty/plex-sans-400.woff2?v=ba711a3085ff") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plex Sans";
    src: url("/statika/fonty/plex-sans-600.woff2?v=f78048030eab") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plex Mono";
    src: url("/statika/fonty/plex-mono-400.woff2?v=ba204497f16b") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plex Mono";
    src: url("/statika/fonty/plex-mono-600.woff2?v=6a825b4824c0") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------ tokeny */

:root {
    --serif: Newsreader, Georgia, "Times New Roman", serif;
    --sans: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --paper: #f4f1ea;
    --surface: #fffefb;
    --surface-2: #ebe7de;
    --ink: #14130f;
    --ink-2: #3a3730;
    --muted: #6f6a60;
    --hair: #ddd8cc;
    --hair-strong: #c9c2b2;
    --vermilion: #bc3f22;
    --vermilion-soft: #f7e9e3;
    --indigo: #2e4a7d;
    --indigo-soft: #e7ebf3;
    --green: #2f6a4d;

    /* Jediná škála pro veřejný text. Metadata neklesají pod 12 px a běžný
       čtený obsah začíná na 15–16 px; nadpisy si drží redakční hierarchii. */
    --text-meta: 0.75rem;
    --text-small: 0.875rem;
    --text-body-small: 0.9375rem;
    --text-body: 1rem;
    --text-card-title: 1.25rem;

    --max: 1240px;
    --text-max: 66ch;
    --radius: 2px;
    --card-radius: 5px;
    --card-shadow: 0 8px 24px rgb(42 37 24 / 4.5%);
    --hair-line: 1px solid var(--hair);
    --hair-line-strong: 1px solid var(--hair-strong);
}

html[data-theme="dark"] {
    --paper: #15140f;
    --surface: #1c1b16;
    --surface-2: #24231c;
    --ink: #f3f0e7;
    --ink-2: #cdc8bb;
    --muted: #aaa496;
    --hair: #323026;
    --hair-strong: #474437;
    --vermilion: #e2704f;
    --vermilion-soft: #33221c;
    --indigo: #93aad6;
    --indigo-soft: #1e2433;
    --green: #7ab793;
    --card-shadow: 0 10px 28px rgb(0 0 0 / 16%);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 128px;
}

body {
    min-width: 320px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--text-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--vermilion);
}

img {
    max-width: 100%;
}

button,
input,
select {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--vermilion);
    outline-offset: 2px;
}

::selection {
    background: var(--vermilion-soft);
}

.preskocit {
    position: fixed;
    z-index: 100;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--paper);
    transform: translateY(-150%);
}

.preskocit:focus {
    transform: none;
}

/* Sdílené drobnosti: mono zůstává jen pro skutečná metadata a štítky. */

.eyebrow,
.mono {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.eyebrow {
    margin-bottom: 0.5rem;
    color: var(--vermilion);
}

h1,
h2,
h3,
.serif {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.12;
    color: var(--ink);
    text-wrap: balance;
}

.tlacitko {
    min-height: 44px;
    padding: 0.7rem 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    font-size: var(--text-body-small);
    font-weight: 600;
    cursor: pointer;
}

.tlacitko-primarni {
    background: var(--ink);
    color: var(--paper);
}

.tlacitko-primarni:hover {
    background: var(--vermilion);
    border-color: var(--vermilion);
    color: var(--paper);
}

.tlacitko-sekundarni,
.tlacitko-svetle {
    background: transparent;
    color: var(--ink);
}

.tlacitko-sekundarni:hover,
.tlacitko-svetle:hover {
    border-color: var(--vermilion);
    color: var(--vermilion);
}

.textovy-odkaz,
.odkaz-detail {
    font-family: var(--sans);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--indigo);
}

.textovy-odkaz:hover,
.odkaz-detail:hover {
    color: var(--vermilion);
}

.zpet {
    margin-bottom: 1rem;
    display: inline-block;
    font-family: var(--sans);
    font-size: var(--text-meta);
    letter-spacing: 0;
    color: var(--muted);
}

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

.hlavicka-webu {
    position: sticky;
    z-index: 40;
    top: 0;
    border-bottom: var(--hair-line-strong);
    background: var(--paper);
}

.hlavicka-vnitrni {
    width: min(calc(100% - 2.5rem), var(--max));
    margin: 0 auto;
    padding: 0.85rem 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.znacka {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: none;
}

/* Nový geometrický znak má vlastní barevnou variantu pro každý motiv.
   Text zůstává vedle něj, takže značka je čitelná i bez načtených obrázků. */

.znacka-symbol {
    position: relative;
    width: 64px;
    height: 30px;
    display: block;
    flex: 0 0 64px;
}

.znacka-symbol img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.znacka-symbol-tmavy {
    opacity: 0;
}

html[data-theme="dark"] .znacka-symbol-svetly {
    opacity: 0;
}

html[data-theme="dark"] .znacka-symbol-tmavy {
    opacity: 1;
}

.znacka-text {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.nazev {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.podpis {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}







.hlavicka-nastroje {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hlavicka-hledani {
    width: 220px;
    min-height: 44px;
    padding: 0.4rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: var(--hair-line-strong);
    border-radius: var(--radius);
    background: var(--surface);
}

.hlavicka-hledani input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: var(--text-body-small);
}

.hlavicka-hledani::before {
    content: "⌕";
    color: var(--muted);
}

.tema-prepinac,
.uvod-spustit {
    min-height: 44px;
    padding: 0.4rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: var(--hair-line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tema-prepinac:hover,
.uvod-spustit:hover {
    border-color: var(--vermilion);
    color: var(--vermilion);
}







.navigace {
    display: flex;
    gap: 0.1rem;
}

.navigace a {
    padding: 0.65rem 0.85rem 0.6rem;
    border-bottom: 2px solid transparent;
    font-size: var(--text-body-small);
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
}

.navigace a:hover {
    color: var(--vermilion);
}

.navigace a.aktivni {
    border-bottom-color: var(--vermilion);
    font-weight: 600;
    color: var(--ink);
}

.navigace-pocet {
    min-width: 1.25rem;
    margin-left: 0.2rem;
    padding: 0.05rem 0.32rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--vermilion);
    font-family: var(--mono);
    font-size: var(--text-meta);
    line-height: 1.25;
    color: var(--paper);
}





.mobilni-menu {
    display: none;
    margin-left: auto;
}

.mobilni-menu summary {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: center;
    border: var(--hair-line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    list-style: none;
}

.mobilni-menu summary::-webkit-details-marker {
    display: none;
}

.mobilni-menu nav {
    position: absolute;
    z-index: 45;
    right: 1.25rem;
    left: 1.25rem;
    display: grid;
    padding: 0.4rem;
    border: 1px solid var(--ink);
    background: var(--surface);
}

.mobilni-menu nav a,
.mobilni-menu nav .mobilni-menu-akce {
    padding: 0.75rem;
    border-bottom: var(--hair-line);
    font-size: var(--text-body-small);
}

/* Spouštěč průvodce vypadá v menu jako ostatní položky, ale je to tlačítko
   (otevírá dialog, nevede nikam), takže potřebuje shodit vzhled tlačítka. */
.mobilni-menu nav .mobilni-menu-akce {
    border-right: 0;
    border-left: 0;
    border-top: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* --------------------------------------------------------- pruh výpadků */







.vypadky-dnes-seznam {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.vypadek-dnes {
    min-width: 0;
    flex: 1 1 0;
    padding: 0.45rem 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.45rem;
    color: var(--ink);
    text-decoration: none;
}

.vypadek-dnes + .vypadek-dnes {
    padding-left: 0.8rem;
    border-left: var(--hair-line);
}

.vypadek-dnes strong {
    overflow: hidden;
    font-size: var(--text-body-small);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vypadek-dnes time,
.vypadky-dnes-prazdne {
    color: var(--ink-2);
    font-size: var(--text-small);
}

.vypadek-dnes-stav {
    padding: 0.16rem 0.32rem;
    border-radius: 2px;
    background: var(--vermilion);
    color: var(--paper);
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vypadek-dnes-urgentni strong {
    color: var(--vermilion);
}

.vypadky-dnes-prazdne {
    flex: 1 1 auto;
}

/* ------------------------------------------------------ obsah a mřížka dne */

.obsah {
    width: min(calc(100% - 2.5rem), var(--max));
    margin: 0 auto;
    padding: 1.6rem 0 4rem;
}

/* ------------------------------------------------------ AI Flash na titulce */

















/* Kolik čtení stojí za počítadlem osy. `flex-basis: 100%` mu v zalamovací
   hlavičce dá vlastní řádek pod nadpisem i akcemi — kontext zůstane u čísla,
   ale nekrade místo kartám v mřížce. Uvnitř `.flash-nahled-akce` by svou
   min-content šířkou přetlačil nadpis do čtyř řádků, proto je o úroveň výš. */
.flash-nahled-trychtyr {
    /* `flex: 0 0 100%`, ne pouhý `flex-basis` — se zapnutým smršťováním se
       položka vejde vedle nadpisu a rozláme ho, místo aby přešla na nový řádek. */
    flex: 0 0 100%;
    margin: 0;
    text-align: right;
    font-family: var(--sans);
    font-size: var(--text-meta);
    line-height: 1.7;
    color: var(--ink);
}

/* Čísla červeně jako u počítadla osy nad ním — oko po řádku skáče po nich,
   ne po slovech. Popisky zůstávají v základní barvě textu. */
.flash-nahled-trychtyr strong {
    font-size: var(--text-small);
    color: var(--vermilion);
}



.flash-nahled-karta {
    min-width: 0;
    min-height: 214px;
    padding: 0.9rem 1.15rem 1rem;
    display: flex;
    flex-direction: column;
}







.flash-nahled-karta + .flash-nahled-karta {
    border-left: var(--hair-line);
}





.flash-stitek,
.signal-flash {
    display: inline-flex;
    align-items: center;
    min-height: 1rem;
    padding: 0.06rem 0.34rem;
    border-radius: 3px;
    background: var(--vermilion);
    color: var(--surface);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.flash-nahled-meta .flash-stitek,
.signal-meta .signal-flash {
    color: var(--surface);
}

.flash-nahled-karta h2 {
    margin-top: 0.35rem;
    font-size: var(--text-card-title);
    line-height: 1.25;
}

.flash-nahled-karta h2 a:hover {
    color: var(--vermilion);
}





.flash-nahled-zdroj span:last-child {
    text-align: right;
    color: var(--indigo);
}





/* Poslední oficiální zprávy o resetech: na titulce jediný nízký řádek, protože
   reset není živý incident a nesmí vytlačit hlavní zprávy z prvního viewportu. */
.reset-prehled {
    min-height: 42px;
    padding: 0.6rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.65rem 1rem;
    border-top: var(--hair-line);
    background: var(--surface-2);
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

.reset-prehled-nadpis {
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.reset-jen-mobil {
    display: none;
}

.reset-prehled-polozka {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
}

.reset-prehled-polozka b {
    color: var(--indigo);
}

.reset-prehled-polozka:hover b {
    text-decoration: underline;
}

.reset-prehled-stav-provedeno {
    color: var(--green);
}

.reset-prehled-stav-oznameno {
    color: var(--vermilion);
}

/* Když sběr z X stojí, řádek to musí přiznat — jinak zastaralé „provedeno“
   působí jako čerstvá informace. */
.reset-prehled-pozastaveno {
    color: var(--vermilion);
    font-style: italic;
}

.reset-prehled-historie {
    margin-left: auto;
    color: var(--indigo);
    font-weight: 600;
}

.reset-prehled-plny {
    margin-top: 1rem;
    border: var(--hair-line-strong);
    border-left: 4px solid var(--indigo);
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.reset-prehled-plny .reset-prehled-polozka {
    align-self: stretch;
    padding-left: 1rem;
    border-left: var(--hair-line);
}

.reset-prehled-plny small {
    flex-basis: 100%;
    line-height: 1.5;
}









/* Osnova dne — hlavní nástroj orientace: co dnes na stránce je a kolik toho je. */



.osnova h2,
.osnova-nadpis {
    margin-bottom: 0.7rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

















/* Značky závažnosti a důvěry — stejný jazyk na všech stránkách. */

.znak {
    font-family: var(--mono);
    letter-spacing: 1px;
}

.znak-3 {
    color: var(--vermilion);
}

.znak-2 {
    color: var(--ink-2);
}

.znak-1 {
    color: var(--hair-strong);
}

.duvera {
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--green);
}

.duvera-slaba {
    color: var(--muted);
}

/* ------------------------------------------------------------- zpráva dne */

.sekce {
    margin-top: 2.6rem;
}

.sekce-hlavicka {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    margin-bottom: 1rem;
    padding: 0.1rem 0 0.65rem 1rem;
    border-bottom: 0;
}

.sekce-hlavicka::before {
    content: "";
    position: absolute;
    top: 0.15rem;
    bottom: 0.65rem;
    left: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--vermilion);
}

.sekce-hlavicka h2 {
    font-size: 1.45rem;
}

.sekce-hlavicka .sekce-popis,
.sekce-hlavicka .eyebrow {
    margin: 0;
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.sekce-hlavicka > :last-child.textovy-odkaz {
    margin-left: auto;
}







.zprava-dne {
    padding-top: 1.1rem;
}

.zprava-dne-titulek {
    max-width: 22ch;
    font-size: clamp(2rem, 3.4vw, 2.95rem);
    line-height: 1.02;
    letter-spacing: -0.022em;
}











.dopad-nadpis {
    margin-bottom: 0.3rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vermilion);
}

.dopad-nadpis-firma {
    color: var(--indigo);
}







/* --------------------------------------------------------- řádek události
   Nahrazuje kartu ve výpisu. Sken zleva: čas → závažnost → hráč → titulek. */

.seznam-radku {
    display: grid;
}

.radek-udalosti {
    display: grid;
    /* Šířky sloupců jdou přes proměnnou schválně. Kontextové varianty (titulka)
       ji přepisují na svém kontejneru, ne selektorem `.neco .radek-udalosti` —
       takový selektor má vyšší specificitu a mobilní pravidlo v media query by
       se pak vůbec neuplatnilo. Proměnná nastavená přímo na řádku naopak
       přebije hodnotu zděděnou z kontejneru bez ohledu na specificitu.
       Sloupec s časem musí pojmout nejdelší popisek („aktualizováno" = 13 znaků
       mono, tj. ~96 px) — užší sloupec text nezalomí, ale nechá ho přetéct přes
       sloupec se znakem závažnosti. */
    grid-template-columns: var(--radek-sloupce, 104px 34px minmax(0, 1fr));
    gap: 0.85rem;
    padding: 0.9rem 0;
    border-bottom: var(--hair-line);
}

.radek-cas,
.radek-znak {
    padding-top: 0.2rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

/* Pojistka pro případ delšího popisku, než počítá šířka sloupce: obsah se radši
   zalomí uvnitř slova, než aby se otiskl přes značky závažnosti vedle. */
.radek-cas {
    min-width: 0;
    overflow-wrap: anywhere;
}

.radek-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.radek-hrac {
    font-weight: 600;
    color: var(--ink);
}

.radek-meta > .duvera {
    margin-left: auto;
}

.radek-titulek {
    font-size: 1.35rem;
    line-height: 1.2;
}

.radek-dopad {
    margin-top: 0.35rem;
    max-width: 68ch;
    font-size: var(--text-body-small);
    line-height: 1.6;
    color: var(--muted);
}





/* ---------------------------------------------------- titulní redakční proud */















.zprava-dne-kompaktni.zprava-dne-s-obrazkem:has(.zprava-dne-media[hidden]) {
    grid-template-columns: minmax(0, 1fr);
}













.zprava-dne-souvislosti p:last-child {
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--ink-2);
}

















/* Šířka prvního sloupce je na kontejneru, aby ji mohla média přepsat — viz
   komentář u `.radek-udalosti`. Hodnota je zatím shodná s výchozí, drží se tu
   proto, aby šla titulka přeladit bez zásahu do sdíleného pravidla. */










.titulka-doplnky {
    margin-top: 2.2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
}

.titulka-doplnky-jeden {
    grid-template-columns: minmax(0, 1fr);
}

.titulka-doplnek {
    min-width: 0;
    border-top: 3px solid var(--vermilion);
    background: var(--surface);
}

.titulka-doplnek-vyzkum {
    border-top-color: var(--ink);
}

.titulka-doplnek-hlavicka {
    padding: 0.85rem 1rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: var(--hair-line);
}

.titulka-doplnek-hlavicka .eyebrow {
    margin-bottom: 0.2rem;
}

.titulka-doplnek-hlavicka h2 {
    font-size: 1.4rem;
}

.titulka-doplnek-seznam {
    display: grid;
}

.titulka-doplnek-radek {
    min-width: 0;
    padding: 0.8rem 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    border-bottom: var(--hair-line);
}

.titulka-doplnek-radek h3 {
    font-size: 1rem;
    line-height: 1.25;
}

.titulka-doplnek-radek p {
    margin-top: 0.25rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--text-small);
    line-height: 1.45;
    color: var(--muted);
}

.titulka-doplnek-radek time {
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}



















/* ------------------------------------------- pravý sloupec (Na radaru ap.) */









.radar-polozka-meta,
.radar-polozka > span:last-child {
    display: block;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}













.poprve {
    margin-top: 1.6rem;
    padding: 1rem;
    background: var(--surface-2);
}

.poprve h3 {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.poprve p,
.poprve ul {
    margin-top: 0.5rem;
    font-size: var(--text-body-small);
    line-height: 1.55;
    color: var(--ink-2);
    list-style: none;
}

.poprve li + li {
    margin-top: 0.25rem;
}

.poprve-odkaz {
    display: inline-block;
    margin-top: 0.7rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--indigo);
}

/* ------------------------------------------------ magazínové karty a panely */

:is(.karta-udalosti, .karta-mala, .model-karta).karta-akcent-vyznam {
    --karta-akcent: var(--vermilion);
}

:is(.karta-udalosti, .karta-mala, .model-karta).karta-akcent-duvera {
    --karta-akcent: var(--green);
}

:is(.karta-udalosti, .karta-mala, .model-karta).karta-akcent-kontext {
    --karta-akcent: var(--indigo);
}

.karta-udalosti {
    --karta-akcent: var(--indigo);
    position: relative;
    padding: 1.3rem 1.4rem 1.35rem;
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    border: var(--hair-line-strong);
    border-top: 4px solid var(--karta-akcent);
    border-radius: var(--card-radius);
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.karta-udalosti.horka {
    border-left: var(--hair-line-strong);
}

.karta-udalosti + .karta-udalosti {
    margin-top: 1rem;
}

@media (hover: hover) {
    .karta-udalosti,
    .karta-mala,
    .model-karta {
        transition:
            border-color 160ms ease,
            box-shadow 160ms ease,
            transform 160ms ease;
    }

    .karta-udalosti:hover,
    .karta-mala:hover,
    .model-karta:hover {
        border-color: var(--karta-akcent);
        box-shadow: 0 12px 30px rgb(42 37 24 / 8%);
        transform: translateY(-1px);
    }

    html[data-theme="dark"] .karta-udalosti:hover,
    html[data-theme="dark"] .karta-mala:hover,
    html[data-theme="dark"] .model-karta:hover {
        box-shadow: 0 14px 34px rgb(0 0 0 / 24%);
    }
}

.karta-obsah {
    min-width: 0;
    flex: 1;
}

.karta-signal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.karta-signal .signal-vyznam {
    font-weight: 600;
    color: var(--vermilion);
}

.karta-signal .signal-hrac {
    font-weight: 600;
    color: var(--ink);
}

.karta-titulek {
    margin-top: 0.25rem;
    font-size: 1.35rem;
    line-height: 1.2;
}

.karta-shrnuti {
    max-width: 70ch;
    margin-top: 0.35rem;
    font-size: var(--text-body-small);
    line-height: 1.6;
    color: var(--muted);
}

.karta-dopad {
    margin-top: 0.6rem;
    padding: 0.65rem 0.8rem 0.7rem;
    border-left: 3px solid var(--vermilion);
    border-radius: var(--radius);
    background: var(--vermilion-soft);
}

.karta-dopad-firma {
    border-left-color: var(--indigo);
    background: var(--indigo-soft);
}

.karta-dopad span {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vermilion);
}

.karta-dopad-firma span {
    color: var(--indigo);
}

.karta-dopad p {
    margin-top: 0.15rem;
    font-size: var(--text-body-small);
    line-height: 1.5;
    color: var(--ink-2);
}

.karta-pata {
    margin-top: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.karta-duvera {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

.karta-obrazek-odkaz {
    width: 132px;
    flex: none;
}

.karta-obrazek {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    background: var(--surface-2);
}

/*
 * Externí náhled se ukáže až po skutečném načtení. Skript v <head> při
 * chybě skryje obrázek nebo celý jeho blok; bez JavaScriptu zůstává běžné
 * chování prohlížeče jako nouzový fallback.
 */
.obrazky-js img[data-volitelny-obrazek]:not(.obrazek-nacteny) {
    visibility: hidden;
}

[data-volitelny-obrazek-kontejner][hidden],
img[data-volitelny-obrazek][hidden] {
    display: none !important;
}

.seznam-karet {
    display: grid;
    gap: 1rem;
}

.seznam-karet .karta-udalosti + .karta-udalosti {
    margin-top: 0;
}

.signal-seznam {
    border-top: 2px solid var(--ink);
}

.flash-vysvetleni {
    margin-top: 1.5rem;
    padding: 1.1rem 1.2rem;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 1.5rem;
    align-items: center;
    border: var(--hair-line-strong);
    border-top: 4px solid var(--indigo);
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.flash-vysvetleni h2 {
    margin-top: 0.2rem;
    font-size: 1.35rem;
}

.flash-vysvetleni > div > p:last-child {
    margin-top: 0.45rem;
    max-width: 60ch;
    font-size: var(--text-body-small);
    line-height: 1.6;
    color: var(--muted);
}

.flash-vysvetleni a {
    color: var(--indigo);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.flash-legenda {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
}

.flash-legenda li {
    min-width: 0;
    padding: 0.55rem 0.8rem;
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.1rem 0.4rem;
    align-content: start;
    border-left: var(--hair-line);
}

.flash-legenda-znak {
    grid-row: 1 / span 2;
    font-family: var(--mono);
    font-weight: 700;
    color: var(--muted);
}

.flash-legenda-oficialni {
    color: var(--indigo);
}

.flash-legenda-potvrzena {
    color: var(--green);
}

.flash-legenda-redakcni {
    color: var(--vermilion);
}

.flash-legenda strong {
    font-size: var(--text-small);
}

.flash-legenda small {
    font-size: var(--text-meta);
    line-height: 1.45;
    color: var(--muted);
}

.flash-feed {
    margin-top: 2.2rem;
}

.flash-filtry {
    margin-top: 1rem;
}

.flash-filtry + .flash-filtry {
    margin-top: 0.45rem;
}

.reset-legenda-oznameno {
    color: #9a6a17;
}

.reset-legenda-kredit {
    color: var(--indigo);
}

.reset-seznam {
    margin-top: 1.2rem;
    border-top: 2px solid var(--ink);
}

.reset-karta {
    padding: 1.1rem 1.2rem 1rem;
    border-right: var(--hair-line);
    border-bottom: var(--hair-line);
    border-left: 4px solid var(--hair-strong);
    background: var(--surface);
}

.reset-karta-provedeno {
    border-left-color: var(--green);
}

.reset-karta-oznameno {
    border-left-color: #b47b19;
}

.reset-karta-kredit {
    border-left-color: var(--indigo);
}

.reset-karta-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
    text-transform: uppercase;
}

.reset-karta-meta > strong {
    color: var(--ink);
}

.reset-stav {
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
}

.reset-stav-provedeno {
    background: color-mix(in srgb, var(--green) 13%, var(--surface));
    color: var(--green);
}

.reset-stav-oznameno {
    background: #f5ead4;
    color: #7a5413;
}

.reset-stav-kredit {
    background: var(--indigo-soft);
    color: var(--indigo);
}

.reset-karta h3 {
    margin-top: 0.45rem;
    max-width: 42ch;
    font-size: 1.35rem;
}

.reset-karta > p:not(.reset-karta-meta) {
    margin-top: 0.45rem;
    max-width: 72ch;
    font-size: var(--text-body-small);
    line-height: 1.55;
    color: var(--muted);
}

.reset-fakta {
    margin-top: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.5rem;
}

.reset-fakta div {
    display: flex;
    gap: 0.4rem;
    font-size: var(--text-small);
}

.reset-fakta dt {
    font-family: var(--mono);
    color: var(--muted);
    text-transform: uppercase;
}

.reset-fakta dd {
    color: var(--ink);
}

.reset-karta footer {
    margin-top: 0.9rem;
    padding-top: 0.65rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-top: var(--hair-line);
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

.reset-karta footer a {
    color: var(--indigo);
}

.flash-den + .flash-den {
    margin-top: 1.8rem;
}

.flash-den-hlavicka {
    padding-bottom: 0.45rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.flash-den-hlavicka h2 {
    font-size: 1.1rem;
}

.flash-den-hlavicka span {
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

.signal-radek {
    padding: 1rem 0 1.05rem;
    border-bottom: var(--hair-line);
}

.signal-radek-urgentni {
    margin-top: 0.7rem;
    padding: 0.95rem 1rem 1rem;
    border: 1px solid rgba(188, 63, 34, 0.35);
    border-left: 4px solid var(--vermilion);
    background: var(--vermilion-soft);
}

.signal-radek-redakcni {
    margin-top: 0.7rem;
    padding: 0.95rem 1rem 1rem;
    border: 1px solid color-mix(in srgb, var(--indigo) 32%, transparent);
    border-left: 4px solid var(--indigo);
    background: color-mix(in srgb, var(--indigo) 6%, var(--surface));
}

.signal-meta,
.signal-pata {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.75rem;
    font-family: var(--sans);
    font-size: var(--text-meta);
    color: var(--muted);
}

.signal-kategorie {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vermilion);
}

.signal-titulek {
    max-width: 34ch;
    margin-top: 0.35rem;
    font-family: var(--serif);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 600;
    line-height: 1.2;
}

.signal-titulek a:hover,
.signal-pata a:hover {
    color: var(--vermilion);
}

.signal-shrnuti {
    max-width: 78ch;
    margin-top: 0.35rem;
    font-size: var(--text-body-small);
    line-height: 1.55;
    color: var(--muted);
}

.signal-pata {
    justify-content: space-between;
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px dotted var(--hair);
}

.signal-pata a {
    font-weight: 600;
    color: var(--indigo);
}

.mrizka-karet {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}



.karta-mala {
    --karta-akcent: var(--indigo);
    min-height: 100%;
    padding: 1.15rem 1.2rem 1.25rem;
    display: flex;
    flex-direction: column;
    border: var(--hair-line-strong);
    border-top: 4px solid var(--karta-akcent);
    border-radius: var(--card-radius);
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.karta-mala-titulek {
    margin-top: 0.35rem;
    font-family: var(--serif);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.25;
}

.karta-mala-hodnota {
    margin-top: 0.35rem;
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--muted);
}

.karta-vyzkouseni {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.55rem;
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--ink-2);
}

.karta-vyzkouseni p {
    display: grid;
    gap: 0.1rem;
}

.karta-vyzkouseni strong {
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

.karta-vyzkouseni-meta {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.35rem !important;
}

.karta-vyzkouseni-meta span {
    padding: 0.2rem 0.4rem;
    border: var(--hair-line);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green);
}

.karta-vyzkouseni-odkaz {
    width: fit-content;
    margin-top: 0.1rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--indigo);
}

.karta-mala-pata {
    margin-top: auto;
    padding-top: 0.8rem;
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

/* ----------------------------------------------- hero podstránek a teasery */

.hero,
.podstranka-hero,
.metodika-hero,
.modely-hero,
.porovnani-hero,
.model-detail-hero {
    padding: 2rem 0 1.4rem;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--ink);
}



.hero h1,
.podstranka-hero h1,
.metodika-hero h1,
.modely-hero h1,
.porovnani-hero h1,
.model-detail-hero h1 {
    max-width: 22ch;
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    line-height: 1.03;
    letter-spacing: -0.022em;
    color: var(--ink);
}

.hero-perex,
.podstranka-hero > div > p:not(.eyebrow),
.metodika-hero > div > p:not(.eyebrow),
.modely-hero-text > p:not(.eyebrow) {
    max-width: 62ch;
    margin-top: 0.8rem;
    font-size: var(--text-body-small);
    line-height: 1.65;
    color: var(--ink-2);
}

.hero::before,
.modely-teaser::after,
.modely-hero::after {
    content: none;
}



.cesty {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cesta {
    min-height: 40px;
    padding: 0.5rem 0.9rem;
    display: inline-flex;
    align-items: center;
    border: var(--hair-line-strong);
    border-radius: var(--radius);
    font-size: var(--text-body-small);
    font-weight: 500;
    color: var(--ink);
}

.cesta:hover {
    border-color: var(--vermilion);
    color: var(--vermilion);
}





.pruh-stavu {
    margin: 0;
    padding: 0.7rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    border-bottom: var(--hair-line);
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.06em;
    color: var(--muted);
}

.pruh-stavu strong {
    color: var(--ink);
}

.pruh-cas {
    margin-left: auto;
}

.podstranka-principy,
.firemni-kompas,
.modely-hero-princip {
    display: grid;
    gap: 0;
    border-top: var(--hair-line-strong);
    padding: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
}





.firemni-kompas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem 0 0;
    border: 0;
}

.firemni-kompas span {
    padding: 0.3rem 0.6rem;
    border: var(--hair-line-strong);
    border-radius: var(--radius);
    background: transparent;
    font-size: var(--text-small);
    color: var(--ink-2);
}

.modely-teaser,
.prepojeni,
.rubriky {
    margin-top: 2.2rem;
    padding: 1.4rem;
    border: var(--hair-line-strong);
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
}



.modely-teaser h2,
.prepojeni h2 {
    font-size: 1.6rem;
}

.modely-teaser p:not(.eyebrow),
.prepojeni p:not(.eyebrow) {
    margin: 0.5rem 0 0.9rem;
    font-size: var(--text-body-small);
    color: var(--ink-2);
}







.zaverecna-cta {
    margin-top: 3rem;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border-radius: 0;
    background: var(--ink);
    box-shadow: none;
    color: var(--paper);
}

.zaverecna-cta h2 {
    font-size: 1.8rem;
    color: var(--paper);
}

.zaverecna-cta .eyebrow {
    color: var(--vermilion);
}

.zaverecna-cta p:not(.eyebrow) {
    max-width: 60ch;
    margin-top: 0.6rem;
    font-size: var(--text-body-small);
    color: var(--surface-2);
}

.zaverecna-cta .tlacitko {
    flex: none;
    border-color: var(--paper);
    background: var(--paper);
    color: var(--ink);
}

/* ------------------------------------------------ živý důkaz práce systému
   Marketingový pás stojí mezi denním obsahem a firemní CTA: nejdřív ukáže
   výsledek, potom měřitelný provoz, teprve pak nabídne spolupráci. */

.provoz-kpi {
    margin-top: 3rem;
    padding: 2rem 0;
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 1.05fr) minmax(330px, 1.15fr);
    gap: 0;
    border-top: 2px solid var(--ink);
    border-bottom: var(--hair-line-strong);
}

.provoz-kpi-uvod,
.provoz-tokeny,
.provoz-sluzby {
    min-width: 0;
}

.provoz-kpi-uvod {
    padding-right: 1.7rem;
}

.provoz-kpi-uvod h2 {
    max-width: 13ch;
    margin-top: 0.3rem;
    font-size: clamp(1.55rem, 2.3vw, 2.15rem);
}

.provoz-kpi-uvod > p:not(.eyebrow) {
    max-width: 34ch;
    margin-top: 0.8rem;
    font-size: var(--text-body-small);
    line-height: 1.6;
    color: var(--muted);
}

.provoz-kpi-uvod .textovy-odkaz {
    margin-top: 1rem;
    display: inline-block;
}

.provoz-tokeny,
.provoz-sluzby {
    padding-left: 1.7rem;
    border-left: var(--hair-line);
}

.provoz-tokeny {
    padding-right: 1.7rem;
}

.provoz-popisek {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.provoz-hodnota {
    margin-top: 0.25rem;
    font-family: var(--serif);
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    font-weight: 650;
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: var(--vermilion);
}

.provoz-jednotka {
    margin-top: 0.15rem;
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ink);
}

.provoz-presne,
.provoz-vysvetleni {
    margin-top: 0.45rem;
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--muted);
}

.provoz-presne {
    font-family: var(--mono);
    color: var(--ink-2);
}

.provoz-vysvetleni {
    max-width: 48ch;
}

.provoz-rozpad {
    margin-top: 1.3rem;
    border-top: var(--hair-line);
}

.provoz-rozpad-radek {
    padding: 0.75rem 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.9rem;
    border-bottom: var(--hair-line);
}

.provoz-rozpad-radek > div {
    min-width: 0;
}

.provoz-rozpad-radek strong,
.provoz-sluzba strong {
    display: block;
    font-size: var(--text-small);
    font-weight: 650;
    color: var(--ink);
}

.provoz-rozpad-radek > div span,
.provoz-sluzba small {
    display: block;
    margin-top: 0.12rem;
    font-size: var(--text-meta);
    line-height: 1.4;
    color: var(--muted);
}

.provoz-rozpad-cislo {
    align-self: start;
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--ink-2);
    white-space: nowrap;
}

.provoz-rozpad-cislo small {
    margin-left: 0.35rem;
    color: var(--muted);
}

.provoz-rozpad-radek progress {
    width: 100%;
    height: 4px;
    grid-column: 1 / -1;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--surface-2);
    color: var(--indigo);
    appearance: none;
}

.provoz-rozpad-radek progress::-webkit-progress-bar {
    background: var(--surface-2);
}

.provoz-rozpad-radek progress::-webkit-progress-value {
    background: var(--indigo);
}

.provoz-rozpad-radek progress::-moz-progress-bar {
    background: var(--indigo);
}

.provoz-rozpad-trideni progress::-webkit-progress-value {
    background: var(--vermilion);
}

.provoz-rozpad-trideni progress::-moz-progress-bar {
    background: var(--vermilion);
}

.provoz-rozpad-shrnuti progress::-webkit-progress-value {
    background: var(--green);
}

.provoz-rozpad-shrnuti progress::-moz-progress-bar {
    background: var(--green);
}

.provoz-sluzby-hlavicka {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.provoz-sluzby-hlavicka h3 {
    margin-top: 0.25rem;
    font-size: 1.25rem;
}

.provoz-celkovy-stav {
    flex: none;
    padding: 0.3rem 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green);
}

.provoz-celkovy-stav > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentcolor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentcolor 14%, transparent);
}

.provoz-celkovy-stav-varovani {
    border-color: color-mix(in srgb, var(--vermilion) 45%, transparent);
    color: var(--vermilion);
}

.provoz-sluzby-seznam {
    margin-top: 1rem;
    border-top: var(--hair-line-strong);
}

.provoz-sluzba {
    min-width: 0;
    padding: 0.7rem 0;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    border-bottom: var(--hair-line);
}

.provoz-sluzba-poradi,
.provoz-stav {
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

.provoz-stav {
    position: relative;
    padding-left: 0.8rem;
    color: var(--green);
}

.provoz-stav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentcolor;
    transform: translateY(-50%);
}

.provoz-stav-varovani {
    color: var(--vermilion);
}

.provoz-sluzby-pata {
    margin-top: 0.85rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

.provoz-sluzby-pata strong {
    color: var(--ink);
}

.provoz-kpi + .zaverecna-cta {
    margin-top: 0;
}

/* ------------------------------------------------------- detail události */

.detail {
    --detail-hlavni: 46rem;
    --detail-zdroje: 20rem;
    --detail-mezera: 2.5rem;
    width: 100%;
    max-width: 68.5rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns:
        minmax(0, var(--detail-hlavni))
        minmax(16rem, var(--detail-zdroje));
    column-gap: var(--detail-mezera);
    justify-content: center;
}

.detail > .zpet {
    grid-column: 1;
    grid-row: 1;
}

.detail > .detail-hlavicka {
    grid-column: 1;
    grid-row: 2;
}

.detail-obsah {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
    align-self: start;
    padding-top: 1.4rem;
}

.detail-hlavicka {
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--ink);
}

.detail-titulek {
    max-width: 100%;
    margin-top: 0.6rem;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    line-height: 1.02;
    letter-spacing: -0.022em;
}

.detail-meta {
    margin-top: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.detail-meta span + span::before,
.detail-meta time + span::before,
.detail-meta span + time::before {
    content: "·";
    margin-right: 0.7rem;
}

.detail-obrazek {
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
    margin: 0;
    display: block;
    border-radius: 0;
    object-fit: cover;
    background: var(--surface-2);
}

.detail-perex {
    width: min(100%, 58ch);
    max-width: none;
    margin: 0 0 1rem;
    font-family: var(--serif);
    font-size: clamp(1.25rem, 1.11rem + 0.3vw, 1.5rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--ink-2);
}

.detail-obrazek + .detail-perex {
    margin-top: 1.4rem;
}

.detail-text {
    width: min(100%, 68ch);
    max-width: none;
    margin-inline: 0 auto;
}

.detail-text p {
    margin-bottom: 1rem;
    font-size: clamp(1rem, 0.91rem + 0.24vw, 1.14rem);
    line-height: 1.72;
    color: var(--ink-2);
}

.detail-text h2 {
    margin: 1.8rem 0 0.6rem;
    font-size: 1.5rem;
}

.detail-text a {
    color: var(--indigo);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.detail-text code {
    padding: 0.05rem 0.3rem;
    border: var(--hair-line);
    background: var(--surface-2);
    font: 0.86em var(--mono);
    word-break: break-all;
}

.proc-dulezite {
    width: min(100%, 68ch);
    max-width: none;
    margin: 1.6rem auto 1.6rem 0;
    padding: 1.1rem 1.3rem;
    border-left: 3px solid var(--vermilion);
    border-radius: 0;
    background: var(--surface);
}

.proc-dulezite h2 {
    font-size: 1.35rem;
}

.proc-dulezite p:not(.eyebrow) {
    margin-top: 0.4rem;
    font-family: var(--serif);
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--ink);
}

.cenova-cta {
    width: min(100%, 68ch);
    margin: 1.8rem auto 1.8rem 0;
    padding: 1.25rem 1.35rem;
    border: 2px solid var(--vermilion);
    background: var(--vermilion-soft);
}

.cenova-cta h2 {
    margin-top: 0.2rem;
    font-size: clamp(1.35rem, 1.2rem + 0.45vw, 1.7rem);
}

.cenova-cta > p:not(.eyebrow) {
    margin-top: 0.5rem;
    font-size: var(--text-body-small);
    line-height: 1.6;
    color: var(--ink-2);
}

.cenova-cta > a {
    margin-top: 0.9rem;
    min-height: 44px;
    padding: 0.62rem 0.85rem;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--vermilion);
    background: var(--vermilion);
    font-size: var(--text-body-small);
    font-weight: 700;
    color: var(--paper);
}

.cenova-cta > a:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.redakcni-vysvetleni,
.redakcni-zaver,
.redakcni-cta {
    width: min(100%, 68ch);
    margin: 1.6rem auto 0 0;
    padding: 1.1rem 1.3rem;
    border-left: 3px solid var(--indigo);
    background: var(--surface);
}

.redakcni-vysvetleni h2,
.redakcni-zaver h2 {
    margin-top: 0.2rem;
    font-size: 1.35rem;
}

.redakcni-vysvetleni > p:not(.eyebrow),
.redakcni-zaver > p:not(.eyebrow),
.redakcni-cta > p:not(.eyebrow) {
    margin-top: 0.45rem;
    font-size: var(--text-body-small);
    line-height: 1.65;
    color: var(--ink-2);
}

.redakcni-dopady {
    margin-top: 2.2rem;
}

.redakcni-zaver {
    margin-top: 2rem;
    border-left-color: var(--vermilion);
}

.redakcni-cta {
    border: 2px solid var(--indigo);
    border-left-width: 4px;
    background: color-mix(in srgb, var(--indigo) 6%, var(--surface));
}

.redakcni-cta h2 {
    margin-top: 0.2rem;
    font-size: clamp(1.35rem, 1.2rem + 0.45vw, 1.7rem);
}

.redakcni-cta > a {
    margin-top: 0.9rem;
    min-height: 44px;
    padding: 0.62rem 0.85rem;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--indigo);
    background: var(--indigo);
    font-size: var(--text-body-small);
    font-weight: 700;
    color: var(--paper);
}

.redakcni-cta > a:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.redakcni-test-text {
    margin-top: 1.7rem;
}

.redakcni-test-sekce + .redakcni-test-sekce {
    margin-top: 1.8rem;
    padding-top: 1.25rem;
    border-top: var(--hair-line);
}

.redakcni-test-fakta {
    margin: 0.9rem 0 1.15rem;
    display: grid;
    gap: 0.35rem;
}

.redakcni-test-fakta div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.38fr) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: var(--hair-line);
}

.redakcni-test-fakta dt {
    font: var(--text-meta) var(--mono);
    color: var(--muted);
}

.redakcni-test-fakta dd {
    color: var(--ink-2);
}

.redakcni-test-odrazky {
    margin: 0.8rem 0 1rem;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.35rem;
    color: var(--ink-2);
}

.redakcni-test-kod {
    margin: 1rem 0;
    padding: 0.95rem 1rem;
    overflow-x: auto;
    border: var(--hair-line);
    background: var(--surface-2);
    font: var(--text-small)/1.55 var(--mono);
    white-space: pre-wrap;
}

.redakcni-test-reference {
    width: min(100%, 68ch);
    margin: 2rem auto 0 0;
    padding: 1.1rem 1.3rem;
    border-left: 3px solid var(--indigo);
    background: var(--surface);
}

.redakcni-test-reference h2 {
    margin-top: 0.2rem;
    font-size: 1.35rem;
}

.redakcni-test-reference ul {
    margin-top: 0.65rem;
    display: grid;
    gap: 0.35rem;
}

.redakcni-test-reference a {
    color: var(--indigo);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.redakcni-zdroje-poznamka {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: var(--hair-line);
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--muted);
}

.cenova-analyza {
    width: 100%;
    margin-top: 2.4rem;
    padding-top: 1.3rem;
    border-top: 2px solid var(--ink);
}

.cenova-analyza-hlavicka {
    align-items: end;
}

.cenova-analyza-hlavicka h2 {
    max-width: 20ch;
    font-size: clamp(1.55rem, 1.35rem + 0.6vw, 2rem);
}

.cenova-overeno {
    flex: none;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.cenovy-scenar {
    margin-top: 1.2rem;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(11rem, 1fr)) minmax(8rem, 0.42fr) auto;
    gap: 0.7rem;
    align-items: end;
    background: var(--surface);
    border: var(--hair-line);
}

.cenovy-scenar label {
    min-width: 0;
    display: grid;
    gap: 0.3rem;
}

.cenovy-scenar label > span {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.cenovy-scenar select,
.cenovy-scenar input {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border: var(--hair-line-strong);
    border-radius: var(--radius);
    background: var(--paper);
}

.cenovy-scenar .tlacitko {
    background: var(--ink);
    color: var(--paper);
}

.cenova-zmena {
    margin-top: 1.2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: var(--hair-line);
    border-bottom: var(--hair-line);
}

.cenova-zmena > div {
    padding: 0.9rem 1rem 0.9rem 0;
}

.cenova-zmena > div + div {
    padding-left: 1rem;
    border-left: var(--hair-line);
}

.cenova-zmena span {
    display: block;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.cenova-zmena strong {
    display: block;
    margin-top: 0.18rem;
    font-family: var(--serif);
    font-size: 1.55rem;
}

.cenova-zmena p {
    grid-column: 1 / -1;
    padding: 0.65rem 0;
    border-top: var(--hair-line);
    font-size: var(--text-body-small);
    font-weight: 600;
    color: var(--ink-2);
}

.cenovy-graf {
    margin: 1.4rem 0 0;
}

.cenovy-graf-radek {
    padding: 0.85rem 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 1rem;
    border-bottom: var(--hair-line);
}

.cenovy-graf-popis span,
.cenovy-graf-zdroj {
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

.cenovy-graf-popis span,
.cenovy-graf-popis strong {
    display: block;
}

.cenovy-graf-popis strong {
    margin-top: 0.1rem;
    font-size: var(--text-body-small);
}

.cenovy-graf-hodnota {
    align-self: end;
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    white-space: nowrap;
}

.cenovy-graf-radek progress {
    width: 100%;
    height: 12px;
    grid-column: 1 / -1;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--surface-2);
    color: var(--indigo);
    appearance: none;
}

.cenovy-graf-radek progress::-webkit-progress-bar {
    background: var(--surface-2);
}

.cenovy-graf-radek progress::-webkit-progress-value {
    background: var(--indigo);
}

.cenovy-graf-radek progress::-moz-progress-bar {
    background: var(--indigo);
}

.cenovy-graf-radek.pred-zmenou progress::-webkit-progress-value {
    background: var(--muted);
}

.cenovy-graf-radek.pred-zmenou progress::-moz-progress-bar {
    background: var(--muted);
}

.cenovy-graf-radek.po-zmene progress::-webkit-progress-value {
    background: var(--vermilion);
}

.cenovy-graf-radek.po-zmene progress::-moz-progress-bar {
    background: var(--vermilion);
}

.cenovy-graf-zdroj {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.8rem;
}

.cenovy-graf-zdroj a {
    color: var(--indigo);
}

.cenove-slozky {
    margin-top: 1.8rem;
}

.cenove-slozky h3 {
    font-size: 1.25rem;
}

.cenove-slozky .tabulka-obal {
    margin-top: 0.65rem;
    overflow-x: auto;
}

.cenove-slozky table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: var(--text-small);
}

.cenove-slozky th,
.cenove-slozky td {
    padding: 0.65rem 0.55rem;
    border-bottom: var(--hair-line);
    text-align: right;
    white-space: nowrap;
}

.cenove-slozky th:first-child {
    padding-left: 0;
    text-align: left;
}

.cenove-slozky thead th {
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}

.cenove-slozky tbody th {
    font-weight: 600;
}

.cenove-slozky tbody th small {
    display: block;
    font-weight: 400;
    color: var(--muted);
}

.cenova-metodika {
    margin-top: 1.2rem;
    padding: 0.75rem 0;
    border-top: var(--hair-line);
    border-bottom: var(--hair-line);
    font-size: var(--text-small);
    color: var(--ink-2);
}

.cenova-metodika summary {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
}

.cenova-metodika p {
    max-width: 70ch;
    margin-top: 0.65rem;
}

.dopady {
    width: 100%;
    margin-inline: 0;
    margin-top: 2.2rem;
}

.dopady-mrizka {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: var(--hair-line);
}

.dopady-mrizka.jeden-pohled {
    grid-template-columns: minmax(0, 1fr);
}

.dopad-panel {
    padding: 1rem 1.2rem 1.2rem 0;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: none;
}

.dopad-panel + .dopad-panel {
    padding: 1rem 0 1.2rem 1.2rem;
    border-left: var(--hair-line);
}

.dopad-cislo {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vermilion);
}

.dopad-panel-firma .dopad-cislo {
    color: var(--indigo);
}

.dopad-panel h3 {
    margin-top: 0.3rem;
    font-size: 1.2rem;
}

.dopad-panel p {
    margin: 0.4rem 0 0.8rem;
    font-size: var(--text-body-small);
    line-height: 1.6;
    color: var(--ink-2);
}

.dopad-panel a {
    margin-top: auto;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--indigo);
}

.dopad-oblast {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    text-transform: uppercase;
    color: var(--muted);
}

.dopad-akce {
    margin-bottom: 0.8rem;
    padding-top: 0.6rem;
    border-top: var(--hair-line);
}

.dopad-akce span {
    display: block;
    margin-bottom: 0.15rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.dopad-akce strong {
    display: block;
    font-size: var(--text-body-small);
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
}





.detail-strucne,
.prazdno,
.prazdny-stav {
    padding: 1.1rem 1.2rem;
    border: var(--hair-line-strong);
    border-radius: 0;
    background: var(--surface);
    font-size: var(--text-body-small);
    color: var(--muted);
}

.detail-strucne {
    width: min(100%, 68ch);
    margin-inline: 0 auto;
}

.prazdny-stav h1,
.prazdny-stav h3 {
    font-size: 1.2rem;
    color: var(--ink);
}

.stitky {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.detail-stitky {
    width: 100%;
    margin-inline: 0;
    margin-top: 1.2rem;
}

.stitek {
    max-width: 100%;
    padding: 0.2rem 0.55rem;
    border: var(--hair-line-strong);
    border-radius: var(--radius);
    background: transparent;
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
    overflow-wrap: anywhere;
}

/* Zdroje jsou samostatný sloupec, nikdy implicitní protějšek volitelného
   obsahového bloku. Pod 1160 px se zařadí až pod celý článek. */

.zdroje {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    align-self: start;
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 2px solid var(--ink);
}

.zdroje .sekce-hlavicka h2 {
    font-size: 1.35rem;
}

.zdroje-pocet {
    width: auto;
    height: auto;
    display: block;
    margin-left: auto;
    border-radius: 0;
    background: none;
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

.zdroj-radek {
    position: relative;
    display: block;
    margin: 0;
    padding: 0.75rem 2rem 0.75rem 0;
    border: 0;
    border-bottom: var(--hair-line);
    border-radius: 0;
    background: none;
}

.zdroj-radek::after {
    content: "↗";
    position: absolute;
    top: 50%;
    right: 0.2rem;
    color: var(--indigo);
    transform: translateY(-50%);
}

.zdroj-radek:hover {
    background: var(--surface);
}

.zdroj-horni {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.zdroj-horni strong {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--indigo);
}

.zdroj-horni span,
.zdroj-cas {
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

.zdroj-titulek {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--text-body-small);
    color: var(--ink);
}

.zdroj-kontext {
    display: block;
    margin-top: 0.4rem;
    max-width: 72ch;
    font-family: var(--mono);
    font-size: var(--text-meta);
    line-height: 1.5;
    color: var(--muted);
}

/* ----------------------------------------------------- metodika a slovník */





.projekt-flash-tok {
    margin-bottom: 1.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: stretch;
}

.projekt-flash-tok a {
    padding: 1rem 1.1rem;
    display: grid;
    align-content: start;
    gap: 0.25rem;
    border: var(--hair-line-strong);
    border-top: 4px solid var(--vermilion);
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.projekt-flash-tok a:last-child {
    border-top-color: var(--green);
}

.projekt-flash-tok a > span {
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.projekt-flash-tok strong {
    font-family: var(--serif);
    font-size: 1.3rem;
}

.projekt-flash-tok p {
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--muted);
}

.projekt-flash-sipka {
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 1.2rem;
    color: var(--vermilion);
}

.projekt-srovnani {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: var(--hair-line-strong);
}

.projekt-srovnani > div {
    padding: 1.1rem 1.5rem 1.4rem 0;
    border-right: var(--hair-line);
    border-bottom: var(--hair-line);
}

.projekt-srovnani > div + div {
    padding-right: 0;
    padding-left: 1.5rem;
    border-right: 0;
}

.projekt-srovnani h3,
.projekt-cesty h3 {
    font-size: 1.3rem;
}

.projekt-srovnani p:not(.eyebrow),
.projekt-cesty p:not(.eyebrow) {
    margin-top: 0.45rem;
    font-size: var(--text-body-small);
    line-height: 1.65;
    color: var(--muted);
}

.projekt-cesty {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: var(--hair-line-strong);
}

.projekt-cesty > a {
    min-height: 230px;
    padding: 1rem 1.1rem 1.2rem 0;
    display: flex;
    flex-direction: column;
    border-right: var(--hair-line);
    border-bottom: var(--hair-line);
}

.projekt-cesty > a + a {
    padding-left: 1.1rem;
}

.projekt-cesty > a:last-child {
    padding-right: 0;
    border-right: 0;
}

.projekt-cesty > a:hover h3,
.projekt-cesty > a:hover > span {
    color: var(--vermilion);
}

.projekt-cesty > a > span {
    margin-top: auto;
    padding-top: 1rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--indigo);
}

.projekt-dalsi-cesty {
    margin-top: 0.9rem;
    font-size: var(--text-body-small);
    color: var(--muted);
}

.projekt-dalsi-cesty a {
    color: var(--indigo);
    text-decoration: underline;
    text-underline-offset: 3px;
}











.metodika-duvera-hlavicka {
    max-width: 78ch;
}

.duvera-hlavni-stav {
    margin-top: 1.4rem;
    padding: clamp(1.1rem, 0.95rem + 0.55vw, 1.55rem);
    border: var(--hair-line);
    border-top: 4px solid var(--green);
    border-radius: var(--card-radius);
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.duvera-hlavni-stav-pozor {
    border-top-color: var(--vermilion);
}

.duvera-hlavni-popisek,
.duvera-pokryti-popisek {
    font: 600 0.68rem/1.4 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.duvera-hlavni-vysledek {
    display: flex;
    align-items: baseline;
    gap: 0.75rem 1.2rem;
    margin-top: 0.45rem;
}

.duvera-hlavni-vysledek strong {
    flex: 0 0 auto;
    font: 600 clamp(2rem, 1.65rem + 1.35vw, 3.1rem)/1 var(--serif);
    color: var(--green);
}

.duvera-hlavni-stav-pozor .duvera-hlavni-vysledek strong {
    color: var(--vermilion);
}

.duvera-hlavni-vysledek span {
    max-width: 34ch;
    font: 500 clamp(1.08rem, 1rem + 0.3vw, 1.3rem)/1.35 var(--serif);
}

.duvera-hlavni-kontext {
    max-width: 64ch;
    margin-top: 0.5rem;
    color: var(--muted);
}

.duvera-stavy {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    list-style: none;
}

.duvera-stav {
    --duvera-akcent: var(--hair-strong);

    min-width: 0;
    padding: 1.1rem 1.15rem 1.2rem;
    border: var(--hair-line);
    border-top: 3px solid var(--duvera-akcent);
    border-radius: var(--card-radius);
    background: var(--surface);
}

.duvera-stav-nezavisly {
    --duvera-akcent: var(--green);
}

.duvera-stav-oficialni {
    --duvera-akcent: var(--indigo);
}

.duvera-stav-jeden {
    --duvera-akcent: var(--muted);
}

.duvera-stav-znak {
    display: block;
    margin-bottom: 0.55rem;
    font: 600 0.75rem/1 var(--mono);
    color: var(--duvera-akcent);
}

.duvera-stav strong {
    display: block;
    font: 600 1.23rem/1.25 var(--serif);
}

.duvera-stav p {
    max-width: 42ch;
    margin-top: 0.45rem;
    color: var(--ink-2);
}

.duvera-pokryti {
    display: grid;
    grid-template-columns: minmax(12rem, 0.5fr) minmax(0, 1.5fr);
    gap: 0.6rem 1.5rem;
    margin-top: 1.2rem;
    padding: 1rem 1.15rem;
    border-left: 3px solid var(--hair-strong);
    background: var(--surface-2);
}

.duvera-pokryti > p:last-child {
    max-width: 72ch;
    color: var(--ink-2);
}

.duvera-pokryti strong {
    color: var(--ink);
}

.duvera-metodika {
    margin-top: 1rem;
    padding: 0.9rem 0;
    border-top: var(--hair-line);
    border-bottom: var(--hair-line);
}

.duvera-metodika summary {
    width: fit-content;
    cursor: pointer;
    font-weight: 600;
    color: var(--indigo);
}

.duvera-metodika[open] summary {
    margin-bottom: 0.9rem;
}

.duvera-metodika .detail-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .duvera-hlavni-vysledek {
        align-items: flex-start;
        flex-direction: column;
    }

    .duvera-stavy,
    .duvera-pokryti {
        grid-template-columns: minmax(0, 1fr);
    }
}

.proces-kroky {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: var(--hair-line-strong);
    list-style: none;
}

.proces-kroky-pet {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.proces-kroky li {
    min-height: 0;
    padding: 0.9rem 1rem 1.2rem;
    border: 0;
    border-right: var(--hair-line);
    border-radius: 0;
    background: none;
}

.proces-kroky li:first-child {
    padding-left: 0;
}

.proces-kroky li:last-child {
    padding-right: 0;
    border-right: 0;
}

.proces-kroky li > span {
    font-family: var(--mono);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vermilion);
}

.proces-kroky strong {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}

.proces-kroky p {
    margin-top: 0.3rem;
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--muted);
}

.metodika-mrizka,
.slovnicek,
.zdroje-skupiny,
.modely-zdroje,
.recepty-mrizka {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: var(--hair-line-strong);
}

.slovnicek,
.zdroje-skupiny {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metodika-blok,
.slovnicek > div,
.zdroje-skupina {
    min-width: 0;
    padding: 1rem 1.2rem 1.3rem;
    border: 0;
    border-right: var(--hair-line);
    border-bottom: var(--hair-line);
    border-radius: 0;
    background: none;
}

.metodika-mrizka > :nth-child(even) {
    border-right: 0;
}

.slovnicek > :nth-child(3n),
.zdroje-skupiny > :nth-child(3n) {
    border-right: 0;
}

.zdroje-skupina ul {
    margin-top: 0.55rem;
    padding-left: 1.15rem;
}

.zdroje-skupina li {
    padding-left: 0.15rem;
    overflow-wrap: anywhere;
}

.metodika-blok h2 {
    font-size: 1.3rem;
}

.metodika-blok > p:not(.eyebrow) {
    margin-top: 0.5rem;
    font-size: var(--text-body-small);
    line-height: 1.6;
    color: var(--muted);
}

.slovnicek dt {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
}

.slovnicek dd {
    margin-top: 0.25rem;
    font-size: var(--text-body-small);
    line-height: 1.6;
    color: var(--muted);
}

/* ------------------------------------------------------- modelový radar */

.modely-stav {
    padding: 0.6rem 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    border-bottom: var(--hair-line);
    border-radius: 0;
    background: none;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.06em;
    color: var(--muted);
}

.modely-oblasti {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: var(--hair-line-strong);
}

.modely-oblasti a {
    min-height: 0;
    padding: 0.9rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 0;
    border-right: var(--hair-line);
    border-bottom: var(--hair-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
}

.modely-oblasti a:nth-child(4n) {
    border-right: 0;
}

.modely-oblasti a:hover,
.modely-oblasti a.aktivni {
    background: var(--surface);
    border-color: var(--hair);
    box-shadow: none;
    transform: none;
}

.modely-oblasti strong {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
}

.modely-oblasti span {
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--muted);
}

.modely-mrizka {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.model-karta {
    --karta-akcent: var(--indigo);
    min-height: 100%;
    padding: 1.2rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    border: var(--hair-line-strong);
    border-top: 4px solid var(--karta-akcent);
    border-radius: var(--card-radius);
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.model-karta-hlavicka {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.model-poskytovatel,
.model-role {
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.model-poskytovatel {
    font-weight: 600;
    color: var(--ink);
}

.model-karta h3 {
    margin-top: 0.4rem;
    font-size: 1.5rem;
}

.model-karta > p {
    margin-top: 0.35rem;
    font-size: var(--text-body-small);
    line-height: 1.55;
    color: var(--muted);
}

.model-karta-pouziti {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: var(--hair-line);
}

.model-karta-pouziti > strong {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.model-karta-pouziti ul,
.model-pouziti ul,
.porovnani-pouziti ul {
    margin-top: 0.4rem;
    display: grid;
    gap: 0.3rem;
    list-style: none;
}

.model-karta-pouziti li,
.model-pouziti li,
.porovnani-pouziti li {
    position: relative;
    padding-left: 1rem;
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--ink-2);
}

.model-karta-pouziti li::before,
.model-pouziti-ano li::before,
.porovnani-pouziti article > ul:first-of-type li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
}

.model-karta-fakta {
    margin-top: 0.8rem;
    display: grid;
    gap: 0.25rem;
}

.model-karta-fakta div {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 0.5rem;
}

.model-karta-fakta dt {
    font-family: var(--mono);
    font-size: var(--text-meta);
    text-transform: uppercase;
    color: var(--muted);
}

.model-karta-fakta dd {
    font-family: var(--mono);
    font-size: var(--text-small);
    color: var(--ink);
}

.model-karta-odkaz {
    margin-top: auto;
    padding-top: 0.8rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--indigo);
}

/* Modelový radar používá stejný redakční systém jako zbytek webu, ale jeho
   rozhodovací nástroje potřebují přesnější tabulkové zarovnání. */

.modelovy-radar,
.model-detail,
.porovnani-modelu,
.metodika,
.podstranka-hero-firmy {
    min-width: 0;
}

.modely-hero-akce,
.model-detail-akce {
    margin-top: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem 1rem;
}









.modely-hero-princip dl div:last-child {
    padding-right: 0;
    border-right: 0;
}





.recepty-mrizka {
    gap: 1px;
    border: var(--hair-line);
    background: var(--hair);
}

.recept-karta {
    min-width: 0;
    padding: 1.2rem;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-content: start;
    gap: 1rem;
    background: var(--paper);
}

.recept-cislo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: var(--hair-line-strong);
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    color: var(--vermilion);
}

.recept-karta h3,
.detail-recepty h3 {
    font-size: 1.25rem;
}

.recept-situace,
.recept-prinos {
    margin-top: 0.35rem;
    font-size: var(--text-body-small);
    line-height: 1.55;
    color: var(--muted);
}

.recept-prinos {
    color: var(--ink-2);
    font-weight: 600;
}

.recept-karta ol {
    margin-top: 1rem;
    display: grid;
    gap: 0.8rem;
    list-style: none;
}

.recept-karta li {
    padding-left: 0.8rem;
    border-left: 2px solid var(--hair-strong);
}

.recept-karta li > strong {
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
}

.recept-karta li > p {
    margin-top: 0.2rem;
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--muted);
}

.recept-modely {
    margin-top: 0.45rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.recept-modely a {
    padding: 0.25rem 0.5rem;
    border: var(--hair-line-strong);
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--indigo);
}

.recept-pozor {
    margin-top: 1rem;
    padding: 0.7rem 0.8rem;
    border-left: 3px solid var(--vermilion);
    background: var(--surface-2);
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--ink-2);
}

.modely-zdroje {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: var(--hair-line);
    background: var(--hair);
}

.modely-zdroje > a {
    min-width: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 0;
    background: var(--paper);
}

.modely-zdroje > a:hover {
    background: var(--surface);
}

.modely-zdroje strong {
    font-family: var(--serif);
    font-size: 1.05rem;
}

.modely-zdroje span {
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--muted);
}

.modely-zdroje small {
    margin-top: auto;
    padding-top: 0.6rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--indigo);
}

.modely-upozorneni {
    margin-top: 1rem;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: minmax(140px, 0.28fr) minmax(0, 1fr);
    gap: 1.2rem;
    border-top: 2px solid var(--ink);
    border-bottom: var(--hair-line);
}

.modely-upozorneni strong {
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vermilion);
}

.modely-upozorneni p {
    max-width: 76ch;
    font-size: var(--text-body-small);
    line-height: 1.6;
    color: var(--ink-2);
}

.drobecky {
    margin-bottom: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.drobecky a {
    color: var(--indigo);
}

/* ------------------------------------------------------- detail modelu */



.model-detail-hero > div > p:not(.eyebrow) {
    max-width: 62ch;
    margin-top: 0.8rem;
    font-size: var(--text-body-small);
    line-height: 1.65;
    color: var(--ink-2);
}

.model-specifikace {
    align-self: end;
    border-top: 2px solid var(--ink);
}

.model-specifikace div {
    padding: 0.65rem 0;
    display: grid;
    grid-template-columns: minmax(90px, 0.32fr) minmax(0, 1fr);
    gap: 0.8rem;
    border-bottom: var(--hair-line);
}

.model-specifikace dt {
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.model-specifikace dd {
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--ink-2);
}

.model-detail-revize {
    padding: 0.7rem 0;
    border-bottom: var(--hair-line);
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.04em;
    color: var(--muted);
}

.hodnoceni-mrizka {
    border-top: var(--hair-line-strong);
}

.hodnoceni-radek {
    padding: 0.85rem 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    align-items: center;
    gap: 1.5rem;
    border-bottom: var(--hair-line);
}

.hodnoceni-radek > div:first-child {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
}

.hodnoceni-radek strong {
    font-family: var(--serif);
    font-size: 1rem;
}

.hodnoceni-radek > div:first-child span {
    font-size: var(--text-body-small);
    line-height: 1.5;
    color: var(--muted);
}

.uroven {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.3rem;
}

.uroven > span {
    height: 7px;
    background: var(--hair-strong);
}

.uroven > span.aktivni {
    background: var(--indigo);
}

.model-pouziti {
    margin-top: 1.2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border: var(--hair-line);
    background: var(--hair);
}

.model-pouziti > div {
    min-width: 0;
    padding: 1.2rem;
    background: var(--paper);
}

.model-pouziti h2 {
    font-size: 1.35rem;
}

.model-pouziti-ne {
    background: color-mix(in srgb, var(--vermilion) 4%, var(--paper)) !important;
}

.model-pouziti-ne li::before,
.porovnani-limity li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--vermilion);
    font-weight: 600;
}

.dukazy-modelu,
.detail-recepty {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: var(--hair-line);
    background: var(--hair);
}

.dukazy-modelu article,
.detail-recepty article {
    min-width: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    background: var(--paper);
}

.dukaz-modelu-hlavicka {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.dukazy-modelu h3 {
    margin-top: 0.7rem;
    font-size: 1.05rem;
}

.dukaz-vysledek {
    margin-top: 0.25rem;
    font-family: var(--serif);
    font-size: 1.45rem;
    color: var(--indigo);
}

.dukazy-modelu p,
.detail-recepty > article > p {
    margin-top: 0.55rem;
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--muted);
}

.dukazy-modelu article > a {
    margin-top: auto;
    padding-top: 0.8rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--indigo);
}

.detail-recepty {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-recepty small {
    margin-top: 0.8rem;
    display: block;
    font-size: var(--text-meta);
    line-height: 1.5;
    color: var(--muted);
}

.model-detail-pata {
    margin-top: 3rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background: var(--ink);
    color: var(--paper);
}

.model-detail-pata h2 {
    max-width: 28ch;
    font-size: 1.6rem;
    color: inherit;
}

.model-detail-pata p:not(.eyebrow) {
    margin-top: 0.35rem;
    max-width: 60ch;
    font-size: var(--text-body-small);
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.model-detail-pata .eyebrow {
    color: color-mix(in srgb, currentColor 72%, transparent);
}

.model-detail-pata .tlacitko-svetle {
    flex: none;
    border-color: currentColor;
    color: currentColor;
}

/* ------------------------------------------------------ porovnání modelů */

.porovnani-hero > p:not(.eyebrow) {
    max-width: 72ch;
    margin-top: 0.7rem;
    font-size: var(--text-body-small);
    line-height: 1.65;
    color: var(--ink-2);
}

.porovnani-formular {
    margin: 1rem 0;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.8rem;
    border-top: var(--hair-line-strong);
    border-bottom: var(--hair-line);
}

.porovnani-formular label {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}

.porovnani-formular label > span {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.porovnani-vs {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.porovnani-formular select {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 2.2rem 0.55rem 0.7rem;
    border: var(--hair-line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

.porovnani-shodne {
    margin-bottom: 1rem;
    padding: 0.7rem 0.8rem;
    border-left: 3px solid var(--vermilion);
    background: var(--surface-2);
    font-size: var(--text-body-small);
    color: var(--ink-2);
}

.porovnani-hlavicky {
    display: grid;
    grid-template-columns: 160px repeat(2, minmax(0, 1fr));
    border: var(--hair-line);
    background: var(--hair);
    gap: 1px;
}

.porovnani-hlavicky-popisek {
    padding: 1rem;
    align-self: stretch;
    background: var(--paper);
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.porovnani-hlavicky article {
    min-width: 0;
    padding: 1rem;
    background: var(--paper);
}

.porovnani-hlavicky article:nth-of-type(1) {
    box-shadow: inset 0 3px 0 var(--indigo);
}

.porovnani-hlavicky article:nth-of-type(2) {
    box-shadow: inset 0 3px 0 var(--vermilion);
}

.porovnani-model-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem 0.8rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.porovnani-model-meta span:first-child {
    font-weight: 600;
    color: var(--ink);
}

.porovnani-hlavicky h2 {
    margin-top: 0.45rem;
    font-size: 1.55rem;
}

.porovnani-hlavicky article > strong {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--text-small);
    color: var(--ink-2);
}

.porovnani-hlavicky article > p {
    margin-top: 0.5rem;
    max-width: 56ch;
    font-size: var(--text-body-small);
    line-height: 1.55;
    color: var(--muted);
}

.porovnani-tabulka,
.porovnani-fakta,
.porovnani-zdroje {
    margin-top: 1rem;
    border: var(--hair-line);
}

.porovnani-tabulka > h2,
.porovnani-fakta > h2 {
    padding: 0.9rem 1rem;
    border-bottom: var(--hair-line);
    font-size: 1.25rem;
}

.porovnani-radek,
.porovnani-fakta > div {
    display: grid;
    grid-template-columns: 160px repeat(2, minmax(0, 1fr));
    border-bottom: var(--hair-line);
}

.porovnani-radek:last-child,
.porovnani-fakta > div:last-child {
    border-bottom: 0;
}

.porovnani-radek > strong,
.porovnani-fakta > div > strong {
    padding: 0.9rem 1rem;
    font-family: var(--serif);
    font-size: 1rem;
}

.porovnani-bunka {
    min-width: 0;
    padding: 0.9rem 1rem;
    border-left: var(--hair-line);
}

.porovnani-bunka-model {
    display: none;
    margin-bottom: 0.45rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.porovnani-bunka p {
    margin-top: 0.5rem;
    max-width: 60ch;
    font-size: var(--text-body-small);
    line-height: 1.55;
    color: var(--ink-2);
}

.porovnani-fakta .porovnani-bunka p {
    margin-top: 0;
}

.porovnani-radek > .porovnani-bunka:nth-child(2) .uroven > span.aktivni {
    background: var(--indigo);
}

.porovnani-radek > .porovnani-bunka:nth-child(3) .uroven > span.aktivni {
    background: var(--vermilion);
}

.porovnani-pouziti {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border: var(--hair-line);
    background: var(--hair);
}

.porovnani-pouziti article {
    min-width: 0;
    padding: 1.1rem;
    background: var(--paper);
}

.porovnani-pouziti article:first-child {
    box-shadow: inset 0 3px 0 var(--indigo);
}

.porovnani-pouziti article:last-child {
    box-shadow: inset 0 3px 0 var(--vermilion);
}

.porovnani-pouziti h2 {
    font-size: 1.35rem;
}

.porovnani-pouziti h3 {
    margin-top: 1.2rem;
    font-size: 1rem;
}

.porovnani-zdroje {
    padding: 1rem;
}

.porovnani-zdroje .sekce-hlavicka {
    margin-bottom: 1rem;
}

.porovnani-zdroje-mrizka {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border: var(--hair-line);
    background: var(--hair);
}

.porovnani-zdroje-mrizka > div {
    min-width: 0;
    padding: 1rem;
    display: grid;
    align-content: start;
    gap: 0.5rem;
    background: var(--paper);
}

.porovnani-zdroje-mrizka h3 {
    font-size: 1.1rem;
}

.porovnani-zdroje-mrizka a {
    padding: 0.7rem 0;
    display: grid;
    gap: 0.2rem;
    border-top: var(--hair-line);
}

.porovnani-zdroje-mrizka strong {
    font-size: var(--text-small);
    line-height: 1.45;
    color: var(--indigo);
}

.porovnani-zdroje-mrizka span {
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

/* --------------------------------------------------- filtry, formuláře */

.filtry {
    margin: 0.9rem 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.filtr {
    min-height: 32px;
    padding: 0.3rem 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: var(--hair-line-strong);
    border-radius: var(--radius);
    background: transparent;
    font-size: var(--text-small);
    color: var(--ink-2);
}

.filtr:hover {
    border-color: var(--vermilion);
    background: transparent;
    color: var(--vermilion);
}

.filtr.aktivni {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}

.filtr .pocet {
    font-family: var(--mono);
    font-size: var(--text-meta);
    opacity: 0.7;
}



.filtry-panel {
    margin: 0 0 1.2rem;
    border: var(--hair-line-strong);
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
}

.filtry-panel summary {
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.filtry-panel[open] summary {
    border-bottom: var(--hair-line);
}

.filtry-formular {
    padding: 0.9rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.filtry-formular label {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.filtry-formular label > span {
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.filtry-formular input,
.filtry-formular select,
.archiv-datum input,
.hledani-form input {
    width: 100%;
    min-height: 40px;
    padding: 0.5rem 0.6rem;
    border: var(--hair-line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

.filtr-zaskrtavaci {
    grid-column: 1 / -1;
    min-height: 40px;
    display: flex !important;
    align-items: center;
    gap: 0.55rem !important;
}

.filtr-zaskrtavaci input {
    width: 18px;
    min-height: 18px;
    padding: 0;
    flex: none;
    accent-color: var(--vermilion);
}

.filtr-zaskrtavaci span {
    color: var(--ink) !important;
}

.filtry-akce {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.archiv-datum {
    max-width: 680px;
    margin: 1rem 0 2rem;
    padding: 1rem 0;
    border-top: var(--hair-line-strong);
    border-bottom: var(--hair-line);
}

.archiv-datum > label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.archiv-datum > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
}

.archiv-sekce {
    margin-top: 2.5rem;
}

.archiv-dlazdice {
    min-height: 112px;
    justify-content: space-between;
}

.archiv-mesic {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 600;
}

.archiv-pocet {
    margin-top: 0.3rem;
    font-family: var(--mono);
    font-size: var(--text-meta);
    color: var(--muted);
}

.hledani-form {
    margin: 1rem 0 1.4rem;
    display: flex;
    gap: 0.5rem;
    max-width: 720px;
}

.hledani-form input {
    flex: 1;
    min-height: 46px;
    font-size: 1rem;
}

.hledani-form button {
    min-height: 46px;
    padding: 0 1.2rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    font-weight: 600;
}









.kpi-dlazdice:first-child {
    padding-left: 0;
}

.kpi-dlazdice:last-child {
    padding-right: 0;
    border-right: 0;
}





.kpi-stitky {
    margin: 0.8rem 0 1.4rem;
}

.trend {
    font-weight: 600;
}

.trend-roste {
    color: var(--green);
}

.trend-klesa {
    color: var(--vermilion);
}

.trend-stabilni {
    color: var(--muted);
}

.strankovani {
    margin-top: 1.5rem;
    padding: 0.7rem 0;
    display: grid;
    grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr);
    align-items: center;
    gap: 1rem;
    border: 0;
    border-top: var(--hair-line-strong);
    border-radius: 0;
    background: none;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.strankovani-odkaz {
    min-height: 44px;
    padding: 0.45rem 0;
    display: flex;
    align-items: center;
    color: var(--indigo);
}

.strankovani-odkaz:last-child {
    justify-content: flex-end;
    text-align: right;
}

.strankovani-odkaz.neaktivni {
    color: var(--muted);
    opacity: 0.45;
}

.strankovani-stav {
    display: grid;
    justify-items: center;
    text-align: center;
    color: var(--ink-2);
}

.strankovani-stav small {
    font-size: var(--text-meta);
    color: var(--muted);
}

.dopad-panel-spolecny,
.crawler-info {
    max-width: var(--text-max);
}

.prazdny-stav-cisla {
    font-size: var(--text-small);
    color: var(--muted);
}

/* ------------------------------------------------------------- úvodní okno
   Čtyři kroky, zobrazí se jen první návštěvě (uvod.js). Bez JS se nezobrazí
   vůbec — obsah stránky tím není nijak blokovaný. */

.uvod {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: rgb(20 19 15 / 45%);
    backdrop-filter: blur(6px);
    animation: uvod-zatmeni 240ms ease both;
}

.uvod[hidden] {
    display: none;
}

.uvod-okno {
    width: min(720px, 100%);
    max-height: min(86vh, 780px);
    overflow: auto;
    border: 1px solid var(--ink);
    background: var(--surface);
    box-shadow: 0 30px 70px rgb(20 19 15 / 30%);
    animation: uvod-vstup 380ms cubic-bezier(0.22, 0.9, 0.28, 1) both;
}

.uvod-hlavicka {
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border-bottom: var(--hair-line);
}

.uvod-krok-popis {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.uvod-tecky {
    margin-left: auto;
    display: flex;
    gap: 0.3rem;
}

.uvod-tecka {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hair-strong);
}

.uvod-tecka.hotovo {
    background: var(--vermilion);
}

.uvod-preskocit {
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.uvod-krok {
    display: none;
    padding: 1.7rem 2rem 1.4rem;
    animation: uvod-krok 280ms ease both;
}

.uvod[data-krok="1"] .uvod-krok-1,
.uvod[data-krok="2"] .uvod-krok-2,
.uvod[data-krok="3"] .uvod-krok-3,
.uvod[data-krok="4"] .uvod-krok-4 {
    display: block;
}

.uvod-krok h2 {
    font-size: clamp(1.7rem, 3vw, 2.1rem);
    line-height: 1.08;
}

.uvod-perex {
    max-width: 62ch;
    margin-top: 0.65rem;
    font-size: var(--text-body-small);
    line-height: 1.6;
    color: var(--ink-2);
}

.uvod-seznam {
    margin-top: 1rem;
    display: grid;
    border-top: var(--hair-line-strong);
    list-style: none;
}

.uvod-seznam li {
    padding: 0.7rem 0;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.1rem;
    border-bottom: var(--hair-line);
}

.uvod-seznam strong {
    font-family: var(--mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vermilion);
}

.uvod-seznam span {
    font-size: var(--text-body-small);
    line-height: 1.6;
    color: var(--ink-2);
}

.uvod-seznam-mrizka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    border-top: 0;
}

.uvod-seznam-mrizka li {
    padding: 0.9rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
    border: var(--hair-line-strong);
}

.uvod-zaver {
    margin-top: 0.9rem;
    padding-left: 0.8rem;
    border-left: 2px solid var(--vermilion);
    font-size: var(--text-body-small);
    line-height: 1.55;
    color: var(--muted);
}

.uvod-ukazka {
    margin-top: 1rem;
    padding: 0.9rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 1.1rem;
    background: var(--surface-2);
}

.uvod-ukazka-legenda {
    display: grid;
    gap: 0.4rem;
    align-content: start;
    font-family: var(--mono);
    font-size: var(--text-meta);
    line-height: 1.5;
    color: var(--muted);
}

/* Titulek ukázky zrcadlí skutečný řádek titulky (.titulka-seznam-radku .radek-titulek),
   jen bez sémantiky nadpisu — ukázka je ilustrace, ne obsah stránky. */
.uvod-ukazka-titulek {
    margin-top: 0.35rem;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.18rem;
    letter-spacing: -0.018em;
    line-height: 1.2;
    color: var(--ink);
}

.uvod-ukazka-dopad {
    margin-top: 0.35rem;
    max-width: 68ch;
    font-size: var(--text-body-small);
    line-height: 1.6;
    color: var(--muted);
}

.uvod-cesty {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.uvod-cesta {
    padding: 1rem;
    display: grid;
    align-content: start;
    gap: 0.3rem;
    border: var(--hair-line-strong);
    border-radius: var(--radius);
}

.uvod-cesty strong {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
}

.uvod-cesty span {
    font-size: var(--text-body-small);
    line-height: 1.5;
    color: var(--muted);
}

.uvod-pata {
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: var(--hair-line);
}

.uvod-dal {
    margin-left: auto;
}

.uvod-zpet {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.stranka {
    transition: filter 260ms ease, opacity 260ms ease;
}

body.uvod-otevreno {
    overflow: hidden;
}

body.uvod-otevreno .stranka {
    filter: blur(3px);
    opacity: 0.72;
}

@keyframes uvod-zatmeni {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes uvod-vstup {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes uvod-krok {
    from {
        opacity: 0;
        transform: translateX(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uvod,
    .uvod-okno,
    .uvod-krok {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ---------------------------------------------------------------- patička */

.paticka-webu {
    border-top: var(--hair-line-strong);
    background: var(--surface-2);
}

.paticka-hlavni,
.paticka-spodni {
    width: min(calc(100% - 2.5rem), var(--max));
    margin: 0 auto;
}

.paticka-hlavni {
    padding: 2rem 0 1.2rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2rem;
}

.paticka-znacka {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ink);
}

.paticka-hlavni p {
    max-width: 34ch;
    margin-top: 0.4rem;
    font-size: var(--text-body-small);
    line-height: 1.55;
    color: var(--muted);
}

.paticka-odkazy {
    display: grid;
    align-content: start;
    gap: 0.35rem;
}

.paticka-odkazy a,
.paticka-cta a {
    font-size: var(--text-body-small);
    color: var(--ink-2);
}

.paticka-odkazy a:hover,
.paticka-cta a:hover {
    color: var(--vermilion);
}

.paticka-cta {
    display: grid;
    align-content: start;
    gap: 0.3rem;
}

.paticka-cta span {
    font-family: var(--mono);
    font-size: var(--text-meta);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.paticka-cta a {
    font-weight: 600;
    color: var(--indigo);
}

.paticka-spodni {
    padding: 0.8rem 0 1.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 2rem;
    row-gap: 0.45rem;
    border-top: var(--hair-line-strong);
    font-family: var(--sans);
    font-size: var(--text-meta);
    letter-spacing: 0.04em;
    line-height: 1.55;
    color: var(--muted);
}

.paticka-copyright,
.paticka-identita {
    text-align: right;
}

.paticka-identita {
    grid-column: 1 / -1;
}

/* ----------------------------------------------------------- responzivita */

/* Široké a ultrawide displeje využijí víc prostoru, textové bloky si ale
   ponechávají vlastní limity v ch/rem a neroztahují se přes celou obrazovku. */

@media (min-width: 1600px) {
    :root {
        --max: 1480px;
    }
}

@media (min-width: 2400px) {
    :root {
        --max: 1680px;
    }
}

/* Úzké desktopy: hlavička se nesmí lámat — stavový pruh ustupuje ve dvou
   krocích. Délka pruhu závisí na obsahu: „zpracování má zpoždění“ je o sto
   pixelů delší než „sběr běží“, takže jediná hranice by ho buď schovala i tam,
   kde se pohodlně vejde, nebo by ho na běžném notebooku nechala přetéct.
   Nejdřív tedy mizí doplňky a zůstává samotné datum. */

@media (max-width: 1300px) {
    .hlavicka-stav > *:not(:first-child) {
        display: none;
    }
}

@media (max-width: 1080px) {


    .hlavicka-hledani {
        width: 180px;
    }
}

@media (max-width: 1160px) {






    .detail {
        max-width: var(--detail-hlavni);
        grid-template-columns: minmax(0, 1fr);
    }

    .detail > .zdroje {
        grid-column: 1;
        grid-row: 4;
    }

    .modely-oblasti,
    .proces-kroky {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .proces-kroky li {
        padding-right: 1rem;
        padding-left: 1rem;
        border-right: var(--hair-line);
    }

    .proces-kroky li:nth-child(odd) {
        padding-left: 0;
    }

    .proces-kroky li:nth-child(even) {
        padding-right: 0;
        border-right: 0;
    }

    .proces-kroky-pet li:last-child {
        grid-column: 1 / -1;
        padding-right: 0;
        padding-left: 0;
        border-right: 0;
    }

    .projekt-cesty {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .projekt-cesty > a {
        min-height: 200px;
    }

    .projekt-cesty > a:nth-child(2) {
        padding-right: 0;
        border-right: 0;
    }

    .projekt-cesty > a:nth-child(3) {
        padding-left: 0;
    }

    .modely-mrizka,
    .mrizka-karet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modely-oblasti a:nth-child(even) {
        border-right: 0;
    }

    .modely-zdroje,
    .dukazy-modelu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .provoz-kpi {
        grid-template-columns: minmax(210px, 0.75fr) minmax(0, 1.25fr);
    }

    .provoz-sluzby {
        grid-column: 1 / -1;
        margin-top: 1.7rem;
        padding: 1.7rem 0 0;
        border-top: var(--hair-line);
        border-left: 0;
    }
}

@media (max-width: 900px) {
    .navigace,
    .hlavicka-hledani,
    .hlavicka-stav {
        display: none;
    }

    .mobilni-menu {
        display: block;
    }

    .paticka-spodni {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.45rem;
    }

    .paticka-copyright,
    .paticka-identita {
        text-align: left;
    }

    .paticka-identita {
        grid-column: auto;
    }





    .flash-nahled-karta:nth-child(3) {
        border-top: var(--hair-line);
        border-left: 0;
    }

    .flash-nahled-karta:nth-child(4) {
        border-top: var(--hair-line);
    }

    .flash-vysvetleni {
        grid-template-columns: minmax(0, 1fr);
    }















    .dopady-dvojice,
    .dopady-mrizka,
    .slovnicek,
    .zdroje-skupiny,
    .metodika-mrizka,
    .projekt-srovnani,
    .projekt-cesty,
    .kpi,
    .filtry-formular,
    .uvod-ukazka,
    .uvod-cesty,
    .paticka-hlavni,
    .podstranka-hero,
    .modely-hero,
    .model-detail-hero,
    .proces-kroky,
    .detail-recepty {
        grid-template-columns: minmax(0, 1fr);
    }

    .dopady-dvojice > * + *,
    .dopad-panel + .dopad-panel {
        padding: 0.9rem 0;
        border-left: 0;
        border-top: var(--hair-line);
    }

    .metodika-blok,
    .slovnicek > div,
    .zdroje-skupina,
    .projekt-srovnani > div,
    .projekt-cesty > a,
    .proces-kroky li,
    .kpi-dlazdice {
        padding-left: 0;
        padding-right: 0;
        border-right: 0;
    }

    .projekt-srovnani > div,
    .projekt-srovnani > div + div,
    .projekt-cesty > a,
    .projekt-cesty > a + a {
        min-height: 0;
        padding: 1rem 0 1.2rem;
        border-right: 0;
    }

    /* Na úzké obrazovce jde řádek do jednoho sloupce. Musí to být proměnná:
       znak se níž schovává a ve třísloupcovém gridu by obsah propadl do jeho
       úzkého sloupce — přesně tak vypadal rozbitý výpis dnešních událostí. */
    .radek-udalosti {
        --radek-sloupce: minmax(0, 1fr);
        gap: 0.4rem;
    }

    .radek-cas {
        padding-top: 0;
    }



    .zprava-dne-kompaktni.zprava-dne-s-obrazkem,
    .zprava-dne-kompaktni.zprava-dne-s-obrazkem:has(.zprava-dne-media[hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }



    .titulka-doplnky {
        grid-template-columns: minmax(0, 1fr);
    }



    .titulka-cesty a:nth-child(3) {
        border-top: var(--hair-line);
        border-left: 0;
    }

    .titulka-cesty a:nth-child(4) {
        border-top: var(--hair-line);
    }

    .zaverecna-cta,
    .pruh-pohledu-vnitrni {
        flex-wrap: wrap;
    }

    .vypadky-dnes-seznam {
        flex-basis: 100%;
        order: 3;
    }

    .uvod {
        padding: 0;
        place-items: end stretch;
    }

    .uvod-okno {
        max-height: 92vh;
        border: 0;
        border-top: 1px solid var(--ink);
    }

    .porovnani-formular {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .porovnani-vs {
        display: none;
    }

    .porovnani-formular .tlacitko {
        grid-column: 1 / -1;
    }

    .porovnani-hlavicky,
    .porovnani-radek,
    .porovnani-fakta > div {
        grid-template-columns: 140px repeat(2, minmax(0, 1fr));
    }

    .model-pouziti {
        grid-template-columns: minmax(0, 1fr);
    }

    .provoz-kpi {
        grid-template-columns: minmax(0, 1fr);
    }

    .provoz-kpi-uvod {
        padding-right: 0;
    }

    .provoz-kpi-uvod h2 {
        max-width: 20ch;
    }

    .provoz-tokeny,
    .provoz-sluzby {
        margin-top: 1.7rem;
        padding: 1.7rem 0 0;
        border-top: var(--hair-line);
        border-left: 0;
    }

    .cenovy-scenar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cenovy-scenar .tlacitko {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    /* Průvodce má na mobilu spouštěč v rozbalovacím menu (`.mobilni-menu-akce`).
       V hlavičce necháváme jen značku, motiv a menu, aby nevznikalo
       vodorovné přetékání. */
    .uvod-spustit,
    .znacka .podpis {
        display: none;
    }

    .hlavicka-vnitrni {
        gap: 0.75rem;
    }

    .hlavicka-nastroje {
        gap: 0.3rem;
    }

    .cenova-analyza-hlavicka {
        align-items: start;
    }

    .cenova-overeno {
        margin-top: 0.4rem;
    }

    .cenovy-scenar {
        grid-template-columns: minmax(0, 1fr);
    }

    .cenovy-scenar .tlacitko {
        grid-column: 1;
    }

    .cenova-zmena {
        grid-template-columns: minmax(0, 1fr);
    }

    .cenova-zmena > div + div {
        padding-left: 0;
        border-top: var(--hair-line);
        border-left: 0;
    }

    .mobilni-menu .navigace-pocet {
        float: right;
        margin-top: 0.1rem;
    }



    .vypadky-dnes-seznam {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }

    .vypadek-dnes {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 0.45rem 0;
    }

    .vypadek-dnes + .vypadek-dnes {
        padding-left: 0;
        border-top: var(--hair-line);
        border-left: 0;
    }

    .vypadek-dnes time {
        grid-column: 2;
    }









    /* Hlavička je tu na sloupec zarovnaná doleva, tak i trychtýř —
       zarovnání doprava by na úzkém displeji viselo mimo osu textu. */
    .flash-nahled-trychtyr {
        text-align: left;
    }



    .flash-nahled-karta {
        padding: 0.85rem 0.9rem 0.95rem;
    }

    .flash-nahled-karta + .flash-nahled-karta {
        border-top: var(--hair-line);
        border-left: 0;
    }





    .reset-prehled {
        min-height: 40px;
        padding: 0.5rem 0.9rem;
        gap: 0.35rem 0.65rem;
        overflow: hidden;
        white-space: nowrap;
    }

    .reset-jen-desktop {
        display: none;
    }

    .reset-jen-mobil {
        display: inline;
    }

    .reset-prehled-stav,
    .reset-prehled-rozsah,
    .reset-prehled-plny small {
        display: none;
    }

    .reset-prehled-historie .reset-jen-mobil {
        font-size: var(--text-body-small);
    }

    .reset-prehled-plny {
        margin-top: 0.8rem;
        align-items: flex-start;
        flex-wrap: wrap;
        white-space: normal;
    }

    .reset-prehled-plny .reset-prehled-polozka {
        padding-left: 0;
        border-left: 0;
    }

    .reset-karta {
        padding: 0.95rem 0.9rem;
    }

    .reset-karta h3 {
        font-size: 1.15rem;
    }

    .reset-fakta {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .reset-karta footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .flash-vysvetleni {
        padding: 1rem;
    }

    .flash-legenda {
        grid-template-columns: minmax(0, 1fr);
    }

    .flash-legenda li {
        padding: 0.5rem 0;
        border-top: var(--hair-line);
        border-left: 0;
    }

    .projekt-flash-tok {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .projekt-flash-sipka {
        transform: rotate(90deg);
    }

    [data-theme-label] {
        display: none;
    }

    .uvod-seznam-mrizka {
        grid-template-columns: minmax(0, 1fr);
    }

    .mrizka-karet,
    .modely-mrizka,
    .modely-oblasti,
    .modely-zdroje,
    .recepty-mrizka,
    .dukazy-modelu,
    .porovnani-hlavicky,
    .porovnani-pouziti,
    .porovnani-zdroje-mrizka {
        grid-template-columns: minmax(0, 1fr);
    }

    .modely-oblasti a {
        padding-left: 0;
        padding-right: 0;
        border-right: 0;
    }

    .karta-udalosti {
        padding: 1rem;
        align-items: stretch;
        flex-direction: column;
        gap: 0.85rem;
    }

    .karta-obrazek-odkaz {
        order: -1;
        width: 100%;
    }

    .karta-obrazek {
        aspect-ratio: 16 / 9;
    }

    .karta-pata {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.65rem;
    }

    .signal-pata {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }



    .recept-karta {
        grid-template-columns: minmax(0, 1fr);
    }

    .modely-upozorneni {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .hodnoceni-radek {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
    }

    .hodnoceni-radek > div:first-child {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.2rem;
    }

    .model-detail-pata {
        align-items: flex-start;
        flex-direction: column;
    }

    .porovnani-formular {
        grid-template-columns: minmax(0, 1fr);
    }

    .porovnani-formular .tlacitko {
        grid-column: auto;
        width: 100%;
    }

    .porovnani-hlavicky {
        border: 0;
        gap: 0.7rem;
        background: none;
    }

    .porovnani-hlavicky-popisek {
        display: none;
    }

    .porovnani-hlavicky article {
        border: var(--hair-line);
    }

    .porovnani-radek,
    .porovnani-fakta > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .porovnani-radek > strong,
    .porovnani-fakta > div > strong {
        padding-bottom: 0.55rem;
        border-bottom: var(--hair-line);
        background: var(--surface-2);
    }

    .porovnani-bunka {
        border-left: 0;
        border-top: var(--hair-line);
    }

    .porovnani-radek > strong + .porovnani-bunka,
    .porovnani-fakta > div > strong + .porovnani-bunka {
        border-top: 0;
    }

    .porovnani-bunka-model {
        display: block;
    }

    .porovnani-zdroje {
        padding: 0.8rem;
    }

    .archiv-datum > div,
    .strankovani {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .archiv-datum .tlacitko {
        width: 100%;
    }

    .strankovani-stav {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .strankovani > :first-child,
    .strankovani > :last-child {
        grid-row: 2;
    }

    .sekce-hlavicka {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .sekce-hlavicka > :last-child.textovy-odkaz {
        margin-left: 0;
    }





















    .titulka-doplnek-hlavicka {
        align-items: flex-start;
    }

    .titulka-doplnek-radek {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }



    .titulka-cesty a + a,
    .titulka-cesty a:nth-child(3),
    .titulka-cesty a:nth-child(4) {
        border-top: var(--hair-line);
        border-left: 0;
    }



    .paticka-odkazy a,
    .paticka-cta a {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    .provoz-kpi {
        padding: 1.6rem 0;
    }

    .provoz-hodnota {
        font-size: clamp(2.4rem, 16vw, 3.5rem);
    }

    .provoz-sluzby-hlavicka,
    .provoz-sluzby-pata {
        align-items: flex-start;
        flex-direction: column;
    }

    .provoz-sluzba {
        grid-template-columns: 1.6rem minmax(0, 1fr);
    }

    .provoz-stav {
        grid-column: 2;
        justify-self: start;
    }
}

.signal-aktualizace {
    color: var(--vermilion);
    font-weight: 600;
}

.karta-aktualizace {
    margin: 0.7rem 0 0;
    padding-left: 0.8rem;
    border-left: 2px solid var(--vermilion);
    color: var(--ink);
}

.aktualizace {
    width: 100%;
    margin-inline: 0;
    margin-top: clamp(2rem, 5vw, 4rem);
}

.aktualizace-seznam {
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
    border-top: var(--hair-line);
}

.aktualizace-polozka {
    padding: 1.2rem 0;
    border-bottom: var(--hair-line);
}

.aktualizace-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--mono);
    font-size: var(--text-small);
}

.aktualizace-polozka p {
    max-width: 70ch;
}

@media (max-width: 400px) {
    /* Značka, přepínač motivu a menu se musí vejít i do reálných 320 px. */
    .znacka .podpis {
        display: none;
    }

    .znacka {
        gap: 0.5rem;
    }

    .znacka-symbol {
        width: 52px;
        height: 25px;
        flex-basis: 52px;
    }

    .nazev {
        font-size: 1.45rem;
    }
}

@media print {
    .hlavicka-webu,
    .pruh-pohledu,
    .uvod,
    .paticka-webu,
    .osnova,
    .denni-sloupec {
        display: none;
    }

    body {
        background: #fff;
    }
}

/* ---------------------------------------------------------------------------
   Čerstvá vydání modelů — /modely#cerstva-vydani a karta v detailu události.
   Vizuálně se odlišuje od kurátorovaných profilů: zelený akcent říká
   „doložený fakt“, indigo profilů znamená „naše hodnocení“.
   --------------------------------------------------------------------------- */

.vydani-mrizka {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.vydani-karta {
    --karta-akcent: var(--green);
    min-height: 100%;
    padding: 1.2rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border: var(--hair-line-strong);
    border-top: 4px solid var(--karta-akcent);
    border-radius: var(--card-radius);
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.vydani-hlavicka,
.vydani-detail-hlavicka {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vydani-vyrobce,
.vydani-detail-vyrobce {
    font-family: var(--sans);
    font-size: var(--text-small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.vydani-karta h3 {
    margin: 0.15rem 0 0;
    font-size: 1.28rem;
    line-height: 1.2;
}

.vydani-znacky {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.vydani-znacka {
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: var(--text-small);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.vydani-znacka-otevreny {
    color: var(--green);
    border: 1px solid currentcolor;
}

.vydani-znacka-nahled {
    color: var(--vermilion);
    border: 1px solid currentcolor;
}

.vydani-datum {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--text-body-small);
    color: var(--muted);
}

.vydani-fakta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0.75rem 0;
    border-top: var(--hair-line);
    border-bottom: var(--hair-line);
}

.vydani-fakta div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.vydani-fakta dt {
    font-family: var(--sans);
    font-size: var(--text-small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.vydani-fakta dd {
    margin: 0;
    font-size: var(--text-body-small);
    overflow-wrap: anywhere;
}

.vydani-mereni strong,
.vydani-pouziti strong {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--sans);
    font-size: var(--text-small);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.vydani-mereni ul,
.vydani-pouziti ul {
    margin: 0;
    padding-left: 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vydani-mereni li {
    font-size: var(--text-body-small);
    line-height: 1.45;
}

.vydani-hodnota {
    font-family: var(--mono);
    font-size: var(--text-body-small);
    color: var(--ink);
}

.vydani-vyznam {
    display: block;
    font-size: var(--text-body-small);
    color: var(--muted);
}

.vydani-pouziti li {
    font-size: var(--text-body-small);
    line-height: 1.45;
}

.vydani-limity strong {
    color: var(--vermilion);
}

.vydani-vymezeni {
    margin: 0;
    padding-left: 0.7rem;
    border-left: 2px solid var(--hair-strong);
    font-size: var(--text-body-small);
    color: var(--muted);
}

.vydani-odkazy {
    margin-top: auto;
    padding-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: baseline;
}

.vydani-odkaz {
    font-family: var(--sans);
    font-size: var(--text-body-small);
    font-weight: 600;
}

.vydani-poznamka {
    margin: 1rem 0 0;
    font-size: var(--text-body-small);
    color: var(--muted);
    max-width: var(--text-max);
}

/* Karta vydání uvnitř detailu události. */
.vydani-detail {
    margin: 1.6rem 0;
    padding: 1.25rem 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    border: var(--hair-line-strong);
    border-left: 4px solid var(--green);
    border-radius: var(--card-radius);
    background: var(--surface);
}

.vydani-detail h2 {
    margin: 0.15rem 0 0;
    font-size: 1.5rem;
}

.vydani-detail-vyrobce {
    margin: 0.2rem 0 0;
}

.vydani-detail-pouziti {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vydani-detail-poznamka {
    margin: 0;
    padding-top: 0.6rem;
    border-top: var(--hair-line);
    font-size: var(--text-body-small);
    color: var(--muted);
}

@media (max-width: 600px) {
    .vydani-mrizka,
    .vydani-fakta,
    .vydani-detail-pouziti {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------- zkrácení mobilní titulky

   Měření provozu 12.–18. 8. 2026: mobilní titulka měla 7 808 px (9,6 obrazovky)
   a polovina návštěv nedošla dál než na 1 328 px — tedy ani k hlavní události,
   která začínala na 1 332 px. Mobil je přitom 59 % provozu.

   Bloky se proto na úzkých obrazovkách krátí nebo skrývají. Skrývá se jen to,
   co má vlastní stránku nebo co měření označilo za málo čtené; obsah samotný
   nikam nemizí. Na širokých obrazovkách se nemění nic — tam má titulka 3 455 px
   a čte se ze 72 %.

   Cílem není nejkratší stránka, ale dostat hlavní událost nad hranici čtení. */

@media (max-width: 600px) {

    /* „AI Radar pod kapotou" — 1 247 px, doscrollovalo se k němu 12 % návštěv.
       Tokeny a běžící služby jsou provozní sebeprezentace; jejich místo je
       v metodice, ne v denním přehledu. */
    .provoz-kpi {
        display: none;
    }

    /* Pozvánka k průvodci — 120 px. Od 2026-08-18 má průvodce spouštěč přímo
       v rozbalovacím menu (`.mobilni-menu-akce`), takže je tenhle blok
       na telefonu nadbytečný. */


    /* Náhled AI Flash: popisný odstavec opakuje, co nadpis a karty ukážou samy,
       a statistika zpracování je argument pro vracejícího se čtenáře, ne pro
       někoho, kdo web vidí poprvé. Obojí stálo ~190 px úplně nahoře, kde je
       místo nejdražší. Statistika zůstává na `/metodika`. */
    .flash-nahled-popis,
    .flash-nahled-trychtyr {
        display: none;
    }

    /* Čtvrtá karta feedu (~214 px). Server jich posílá 4 kvůli desktopu;
       na telefonu stačí tři, zbytek je za odkazem „Celý živý feed". */
    .flash-nahled-karta:nth-of-type(n + 4) {
        display: none;
    }

    /* Ze šesti dalších událostí zůstávají na telefonu tři (~880 px úspory).
       Pod seznamem je odkaz do archivu, takže se nic neztrácí. */
    .titulka-seznam-radku > *:nth-child(n + 4) {
        display: none;
    }

    /* Odkaz na historii výpadků duplikuje cestu, kterou nabízí blok „Sledujeme"
       i navigace — a zabírá řádek v úplně prvním viewportu. */


    /* „Sledujeme" a „Výzkum" mají po dvou řádcích à 144 px. Na telefonu
       zůstává z každého bloku jeden; oba mají vlastní stránku za odkazem
       „Všechny →", takže se nic neztrácí (−288 px). */
    .titulka-doplnek-radek:nth-of-type(n + 2) {
        display: none;
    }

    /* Patička skládá čtyři skupiny odkazů pod sebe do 723 px. Do dvou sloupců
       se vejdou na polovinu (−259 px) a pořád jsou pohodlně klikatelné. */
    .paticka-hlavni {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem;
    }

    /* Rozcestník zůstává celý — navigace je na mobilu slabé místo (14 prokliků
       na 1 000 návštěv proti 110 na počítači), ubírat cesty by to zhoršilo.
       Snižují se jen řádky, ne jejich počet. */


    /* Vysvětlivka pod seznamem událostí opakuje, co říká metodika; odkaz
       „Starší události →" vedle ní zůstává. */

}

/* --------------------------------------- navigace na úzkých obrazovkách

   Měření 12.–18. 8. 2026: z mobilu připadalo 14 navigačních prokliků na 1 000
   návštěv, z notebooku 134 a ze stolního počítače 110 — devítinásobný rozdíl.
   Cesty schované pod tlačítkem „Menu" lidé na telefonu nehledají, takže mobilní
   návštěvník viděl titulku a nic dalšího.

   Navigační pruh se proto ukazuje i tady, jen se vodorovně posouvá. Rozbalovací
   menu zůstává — vede navíc na hledání a na průvodce, které v pruhu nejsou. */

@media (max-width: 900px) {


    .navigace {
        display: flex;
        overflow-x: auto;
        /* Posuvník by na dotykovém zařízení jen ukrajoval výšku řádku. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .navigace::-webkit-scrollbar {
        display: none;
    }

    /* „Bez registrace" je argument pro rozhodování, ne cesta. V pruhu, který
       se posouvá, by jen překážel položkám. */

}

/* ------------------------------------------- klikatelná plocha karet

   Karta AI Flash vypadá jako jeden celek, ale odkazem byl jen titulek.
   Rubrika, čas, shrnutí i prázdné místo kolem nereagovaly — a na titulce
   je „Původní zdroj ↗" pouhý <span> obarvený jako odkaz, takže ke kliknutí
   svádí, aniž by kamkoli vedl.

   Třídu přidává `karta.js` až po načtení: bez skriptu by kurzor sliboval
   klikatelnou plochu, která neklikne. */

.karta-klikatelna {
    cursor: pointer;
}

/* Odezva na najetí ať platí pro celou kartu, ne jen pro titulek — jinak
   plocha vypadá mrtvě i ve chvíli, kdy už klikatelná je. */
@media (hover: hover) {
    .karta-klikatelna:hover .flash-nahled-zdroj span:last-child,
    .karta-klikatelna:hover h2 > a,
    .karta-klikatelna:hover h3 > a {
        color: var(--vermilion);
    }
}

/* Výběr modelu: čitelné úplné věty a postupné odkrytí podrobností. */
.modelovy-radar .model-karta-fakta dd,
.model-specifikace dd,
.porovnani-fakta .porovnani-bunka p,
.vydani-hodnota {
    font-family: var(--sans);
    letter-spacing: normal;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.model-datum {
    font-family: var(--sans);
    color: var(--muted);
    font-size: var(--text-body-small);
}
.model-podrobnosti summary,
.modely-archiv summary {
    cursor: pointer;
    font-weight: 600;
    padding: .6rem 0;
}
.model-podrobnosti summary:focus-visible,
.modely-archiv summary:focus-visible {
    outline: 2px solid var(--vermilion);
    outline-offset: 4px;
}
.model-podrobnosti[open] > :not(summary) {
    margin-top: .8rem;
}
.modely-archiv {
    padding: 1rem 1.25rem;
    border: var(--hair-line);
    margin: 2rem 0;
}
.modely-archiv ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .65rem 1.5rem;
    padding-left: 1.25rem;
}
.modelovy-radar .model-karta,
.modelovy-radar .vydani-karta {
    min-width: 0;
    overflow-wrap: anywhere;
}
.modelovy-radar .modely-mrizka,
.modelovy-radar .vydani-mrizka {
    align-items: start;
}
.modelovy-radar .sekce-popis,
.model-detail .sekce-popis,
.porovnani-modelu .sekce-popis,
.modely-stav,
.model-role,
.dukaz-vysledek {
    font-family: var(--sans);
    font-size: var(--text-body-small);
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
}
.model-karta-hlavicka {
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    .modely-stav {
        flex-direction: column;
        gap: .35rem;
    }
}