/* ==========================================================================
   hlidaci.css — styly stránky /kdo-hlida-stat
   Vlastní režie stránky; přebírá barevné proměnné webu (--c-*) a fonty.
   Prefix tříd .hl-, kořen .hlidaci.
   ========================================================================== */

.hlidaci {
    /* čtyři klastry — kategorická paleta, validovaná pro světlou plochu */
    --hl-bezp: #0072b2;
    --hl-just: #a4459c;
    --hl-fin: #00875f;
    --hl-reg: #9a6a10;
    /* vazby */
    --hl-dozor: #b3261e;
    --hl-spol: #5c6672;
    /* komponenta „na papíře / v praxi" */
    --hl-papir: #5c6672;
    --hl-praxe: #b3261e;
    --hl-papir-soft: rgba(92, 102, 114, .08);
    --hl-praxe-soft: rgba(179, 38, 30, .07);
    max-width: 100%;
    font-family: var(--font-sans);
}

[data-theme="dark"] .hlidaci {
    --hl-bezp: #4a8fd6;
    --hl-just: #ad5aa5;
    --hl-fin: #1f9e71;
    --hl-reg: #b8862a;
    --hl-dozor: #e0685c;
    --hl-spol: #93a0b0;
    --hl-papir: #93a0b0;
    --hl-praxe: #e0685c;
    --hl-papir-soft: rgba(147, 160, 176, .1);
    --hl-praxe-soft: rgba(224, 104, 92, .1);
}

.hlidaci section { margin: 0 0 3.2rem; }
.hlidaci a { color: inherit; }

/* ---------- drobná typografie ---------- */
.hl-kicker {
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    font-weight: 600;
    margin: 0 0 .4rem;
}
.hl-sec-head { margin: 0 0 1.2rem; }
.hl-sec-head h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 3.4vw, 1.9rem);
    line-height: 1.15;
    margin: 0 0 .5rem;
    color: var(--c-text);
}
.hl-sec-head p {
    color: var(--c-text-secondary);
    max-width: 72ch;
    margin: 0 0 .4rem;
    line-height: 1.6;
}
.hl-sec-head p b { color: var(--c-text); }
.hl-sec-head a { color: var(--c-accent); text-decoration: none; font-weight: 600; }
.hl-sec-head a:hover { text-decoration: underline; }

/* ---------- hero ---------- */
.hl-hero {
    padding: 2.2rem 0 1rem;
    border-bottom: 3px double var(--c-border);
    margin-bottom: 2rem;
}
.hl-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 5.5vw, 3rem);
    line-height: 1.08;
    margin: 0 0 .8rem;
    color: var(--c-text);
}
.hl-hero__lede {
    font-size: clamp(1rem, 2.4vw, 1.15rem);
    color: var(--c-text-secondary);
    max-width: 72ch;
    line-height: 1.65;
    margin: 0 0 1.1rem;
}
.hl-hero__lede b { color: var(--c-text); }
.hl-hero__pair {
    margin: 0 0 1.3rem;
    padding: .7rem 1rem;
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--hl-bezp);
    border-radius: 0 10px 10px 0;
    background: var(--c-surface);
    font-size: .9rem;
    color: var(--c-text-secondary);
    max-width: 66ch;
    line-height: 1.55;
}
.hl-hero__pair a { color: var(--c-accent); text-decoration: none; font-weight: 600; }
.hl-hero__pair a:hover { text-decoration: underline; }
.hl-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .6rem;
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
}
.hl-hero__stats li {
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .82rem;
    color: var(--c-text-secondary);
}
.hl-hero__stats b { color: var(--c-text); font-weight: 700; }

/* ---------- vnitřní navigace ---------- */
.hl-toc {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .65rem 0;
}
.hl-toc a {
    text-decoration: none;
    font-size: .84rem;
    font-weight: 600;
    color: var(--c-text-secondary);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    border-radius: 999px;
    padding: .38rem .9rem;
    transition: color .15s, border-color .15s, background .15s;
}
.hl-toc a:hover { color: var(--c-text); border-color: var(--c-text-muted); }
.hl-toc a.is-act {
    color: #fff;
    background: var(--c-primary);
    border-color: var(--c-primary);
}
[data-theme="dark"] .hl-toc a.is-act {
    color: #10131c;
    background: var(--c-accent);
    border-color: var(--c-accent);
}
@media (min-width: 900px) {
    .hl-toc {
        position: sticky;
        top: 0;
        z-index: 40;
        background: var(--c-bg);
        border-bottom: 1px solid var(--c-border);
        margin-bottom: 1.4rem;
    }
}

/* ---------- pojmy ---------- */
.hl-terms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .8rem;
    margin: 1.2rem 0;
}
.hl-term {
    border: 1px solid var(--c-border);
    border-top: 4px solid var(--c-text-muted);
    border-radius: 10px;
    background: var(--c-surface);
    padding: .9rem 1rem;
}
.hl-term--bezp { border-top-color: var(--hl-bezp); }
.hl-term--just { border-top-color: var(--hl-just); }
.hl-term--fin { border-top-color: var(--hl-fin); }
.hl-term--reg { border-top-color: var(--hl-reg); }
.hl-term > b {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--c-text);
    margin: 0 0 .35rem;
}
.hl-term p b, .hl-term small b { color: var(--c-text); font-weight: 700; }
.hl-term p {
    margin: 0 0 .4rem;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--c-text-secondary);
}
.hl-term p:last-child { margin-bottom: 0; }
.hl-term small { display: block; font-size: .74rem; color: var(--c-text-muted); }
.hl-term ul { margin: .2rem 0 .3rem; padding-left: 1.1rem; font-size: .84rem; line-height: 1.5; color: var(--c-text-secondary); }
.hl-term li { margin: 0 0 .15rem; }

/* ---------- diagramy (SVG) ---------- */
.hl-diagram-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: var(--c-surface);
    padding: .5rem;
}
.hl-diagram-scroll svg {
    display: block;
    min-width: 900px;
    width: 100%;
    height: auto;
    font-family: var(--font-sans);
}
.hl-scrollhint {
    display: none;
    font-size: .78rem;
    color: var(--c-text-muted);
    margin: .4rem 0 0;
}
@media (max-width: 940px) {
    .hl-scrollhint { display: block; }
}

/* ---------- mapa hlídačů ---------- */
.hl-head rect {
    fill: var(--c-bg);
    stroke: var(--c-text-muted);
    stroke-width: 1.5;
}
.hl-head--mimo rect { stroke-dasharray: 6 4; }
.hl-head--vlada rect { stroke: var(--c-text); stroke-width: 2; }
.hl-head text { pointer-events: none; }
.hl-head__t1 { font-size: 12.5px; font-weight: 800; fill: var(--c-text); letter-spacing: .02em; }
.hl-head__t2 { font-size: 10px; fill: var(--c-text-muted); }

.hl-spine {
    fill: none;
    stroke: var(--c-text-muted);
    stroke-width: 2;
}
.hl-spine--mimo { stroke-dasharray: 5 4; stroke-width: 1.5; }

.hl-node { cursor: pointer; }
.hl-node rect {
    fill: var(--c-surface);
    stroke: var(--c-text-muted);
    stroke-width: 1.8;
    transition: opacity .18s, stroke-width .15s;
}
.hl-node text { pointer-events: none; }
.hl-node__t1 { font-size: 12px; font-weight: 700; fill: var(--c-text); }
.hl-node__t1b { font-size: 11.5px; font-weight: 700; fill: var(--c-text); }
.hl-node__t2 { font-size: 10px; fill: var(--c-text-muted); }
.hl-node--bezpecnost rect { fill: color-mix(in srgb, var(--hl-bezp) 12%, var(--c-surface)); stroke: var(--hl-bezp); }
.hl-node--justice rect { fill: color-mix(in srgb, var(--hl-just) 12%, var(--c-surface)); stroke: var(--hl-just); }
.hl-node--finance rect { fill: color-mix(in srgb, var(--hl-fin) 12%, var(--c-surface)); stroke: var(--hl-fin); }
.hl-node--regulace rect { fill: color-mix(in srgb, var(--hl-reg) 12%, var(--c-surface)); stroke: var(--hl-reg); }
.hl-node:hover rect { stroke-width: 3; }
.hl-node:focus { outline: none; }
.hl-node:focus-visible rect { stroke: var(--c-text); stroke-width: 3; }
.hl-node.is-on rect { stroke-width: 3.5; }
.hl-svg.has-sel .hl-node:not(.is-on) { opacity: .3; }
.hl-svg.has-sel .hl-edge:not(.is-on) { opacity: .15; }
.hl-svg[data-filter="bezpecnost"] .hl-node:not([data-klastr="bezpecnost"]),
.hl-svg[data-filter="justice"] .hl-node:not([data-klastr="justice"]),
.hl-svg[data-filter="finance"] .hl-node:not([data-klastr="finance"]),
.hl-svg[data-filter="regulace"] .hl-node:not([data-klastr="regulace"]) { opacity: .18; }

.hl-badge rect { fill: var(--c-text); stroke: none; }
.hl-badge text { font-size: 8.5px; font-weight: 800; fill: var(--c-surface); letter-spacing: .06em; }

.hl-edge path {
    fill: none;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: opacity .18s;
}
.hl-edge--dozor path { stroke: var(--hl-dozor); stroke-dasharray: 7 4; }
.hl-edge--spoluprace path { stroke: var(--hl-spol); stroke-dasharray: 2 4; }
.hl-edge.is-on path { stroke-width: 2.6; }
#hl-arr-dozor path { fill: var(--hl-dozor); }

.hl-legend-svg text { font-size: 11px; fill: var(--c-text-secondary); }
.hl-legend-svg .hl-legend__line { fill: none; stroke-width: 2; stroke-linecap: round; }
.hl-legend-svg .hl-legend__pod { stroke: var(--c-text-muted); }
.hl-legend-svg .hl-legend__dozor { stroke: var(--hl-dozor); stroke-dasharray: 7 4; }
.hl-legend-svg .hl-legend__spol { stroke: var(--hl-spol); stroke-dasharray: 2 4; }
.hl-legend-svg .hl-legend__k rect { stroke-width: 1.5; }
.hl-legend-svg .hl-legend__k--bezp rect { fill: color-mix(in srgb, var(--hl-bezp) 12%, var(--c-surface)); stroke: var(--hl-bezp); }
.hl-legend-svg .hl-legend__k--just rect { fill: color-mix(in srgb, var(--hl-just) 12%, var(--c-surface)); stroke: var(--hl-just); }
.hl-legend-svg .hl-legend__k--fin rect { fill: color-mix(in srgb, var(--hl-fin) 12%, var(--c-surface)); stroke: var(--hl-fin); }
.hl-legend-svg .hl-legend__k--reg rect { fill: color-mix(in srgb, var(--hl-reg) 12%, var(--c-surface)); stroke: var(--hl-reg); }

/* ---------- čtyři pohledy na mapu ----------
   Všechny pohledy jsou v HTML; aktivní odkrývá data-view na .hl-mapa. Skrývá se
   třídou, ne atributem hidden, protože ten by u SVG prvků přebilo pravidlo výše. */
.hl-mapa .hl-view,
.hl-mapa .hl-pop,
.hl-mapa .hl-view-note { display: none; }
.hl-mapa[data-view="podrizenost"] .hl-view--podrizenost,
.hl-mapa[data-view="zasah"] .hl-view--zasah,
.hl-mapa[data-view="jmenovani"] .hl-view--jmenovani,
.hl-mapa[data-view="kontrola"] .hl-view--kontrola,
.hl-mapa[data-view="podrizenost"] .hl-pop--podrizenost,
.hl-mapa[data-view="zasah"] .hl-pop--zasah,
.hl-mapa[data-view="jmenovani"] .hl-pop--jmenovani,
.hl-mapa[data-view="kontrola"] .hl-pop--kontrola { display: inline; }
.hl-mapa[data-view="podrizenost"] .hl-view-note--podrizenost,
.hl-mapa[data-view="zasah"] .hl-view-note--zasah,
.hl-mapa[data-view="jmenovani"] .hl-view-note--jmenovani,
.hl-mapa[data-view="kontrola"] .hl-view-note--kontrola { display: block; }
/* křížové vazby a štítek PS patří jen tam, kde něco znamenají */
.hl-mapa:not([data-view="podrizenost"]) .hl-edge,
.hl-mapa[data-view="jmenovani"] .hl-badge--ps,
.hl-mapa .hl-badge--mandat { display: none; }
.hl-mapa[data-view="jmenovani"] .hl-badge--mandat { display: inline; }
.hl-badge--mandat text { letter-spacing: .01em; }

.hl-node { transition: transform .38s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) {
    .hl-node { transition: none; }
}

.hl-view-note {
    font-size: .88rem;
    line-height: 1.6;
    color: var(--c-text-secondary);
    max-width: 78ch;
    margin: .7rem 0 0;
}

/* prstenec kontroly: kvadranty od 12 h po směru hodinových ručiček */
.hl-mapa .hl-ring,
.hl-mapa .hl-legend__ring { display: none; }
.hl-mapa.has-ring .hl-ring,
.hl-mapa.has-ring .hl-legend__ring { display: inline; }
.hl-ring__bg { fill: var(--c-surface); stroke: none; }
.hl-ring__q { fill: none; }
.hl-ring__q.is-on { fill: var(--c-text); }
.hl-ring__edge { fill: none; stroke: var(--c-text-muted); stroke-width: 1; }

.hl-filter--views { margin-bottom: 0; }
.hl-btn-ring { display: inline-flex; align-items: center; gap: .3rem; }
.hl-btn-ring__ico { width: 12px; height: 12px; overflow: visible; }
.hl-btn-ring__ico path { fill: currentColor; }
.hl-btn-ring__ico circle { fill: none; stroke: currentColor; stroke-width: 1.8; }

/* filtr klastrů */
.hl-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 .4rem; }
.hl-filter button {
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-text-secondary);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: .32rem .85rem;
    cursor: pointer;
}
.hl-filter button:hover { color: var(--c-text); border-color: var(--c-text-muted); }
.hl-filter button.is-act {
    color: #fff;
    background: var(--c-primary);
    border-color: var(--c-primary);
}
[data-theme="dark"] .hl-filter button.is-act {
    color: #10131c;
    background: var(--c-accent);
    border-color: var(--c-accent);
}
.hl-filter__dot {
    display: inline-block;
    width: .6em;
    height: .6em;
    border-radius: 50%;
    margin-right: .4em;
    vertical-align: baseline;
}
.hl-filter__dot--bezpecnost { background: var(--hl-bezp); }
.hl-filter__dot--justice { background: var(--hl-just); }
.hl-filter__dot--finance { background: var(--hl-fin); }
.hl-filter__dot--regulace { background: var(--hl-reg); }

/* ---------- karty uzlů ---------- */
.hl-cards-hint {
    font-size: .86rem;
    color: var(--c-text-secondary);
    line-height: 1.55;
    margin: .8rem 0 .6rem;
    max-width: 76ch;
}
.hl-cards { display: flex; flex-direction: column; gap: .9rem; }
.hl-cards.is-tabbed { display: block; }
.hl-cards.is-tabbed .hl-card { display: none; }
.hl-cards.is-tabbed .hl-card.is-act { display: block; }
.hl-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 5px solid var(--c-border);
    border-radius: 10px;
    padding: 1.1rem 1.3rem;
    scroll-margin-top: 70px;
}
.hl-card--bezpecnost { border-left-color: var(--hl-bezp); }
.hl-card--justice { border-left-color: var(--hl-just); }
.hl-card--finance { border-left-color: var(--hl-fin); }
.hl-card--regulace { border-left-color: var(--hl-reg); }
.hl-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin: 0 0 .7rem; flex-wrap: wrap; }
.hl-card h3 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    margin: 0;
    color: var(--c-text);
}
.hl-card__sub { margin: .1rem 0 0; font-size: .82rem; color: var(--c-text-muted); }
.hl-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.hl-card__tags li {
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--c-text-secondary);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: .18rem .5rem;
}
.hl-card__tags li.hl-tag--ps { color: var(--c-surface); background: var(--c-text); border-color: var(--c-text); }
.hl-card > p {
    margin: 0 0 .7rem;
    color: var(--c-text-secondary);
    line-height: 1.6;
    font-size: .93rem;
    max-width: 76ch;
}
.hl-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .5rem .9rem;
    margin: 0 0 .8rem;
}
.hl-card__meta p {
    margin: 0;
    font-size: .82rem;
    color: var(--c-text-secondary);
    line-height: 1.5;
    border-top: 1px dashed var(--c-border);
    padding-top: .4rem;
}
.hl-card__meta span {
    display: block;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    font-weight: 700;
    margin-bottom: .15rem;
}
.hl-card__ctrl {
    margin: 0 0 .8rem;
    padding: .6rem .9rem;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg);
}
.hl-card__ctrl span {
    display: block;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    font-weight: 700;
    margin-bottom: .3rem;
}
.hl-card__ctrl ul { margin: 0; padding-left: 1.1rem; font-size: .84rem; line-height: 1.5; color: var(--c-text-secondary); }
.hl-card__ctrl li { margin: 0 0 .2rem; }
.hl-card__link { margin: .7rem 0 0; font-size: .85rem; }
.hl-card__link a { color: var(--c-accent); text-decoration: none; font-weight: 600; }
.hl-card__link a:hover { text-decoration: underline; }

/* ---------- komponenta „na papíře / v praxi" ---------- */
.hl-vs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .9rem;
    margin: 1.2rem 0;
}
.hl-vs--solo { grid-template-columns: 1fr; margin: 0 0 .2rem; }
.hl-vs__col {
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: .9rem 1.1rem;
}
.hl-vs__col--papir { border-left: 4px solid var(--hl-papir); background: var(--hl-papir-soft); }
.hl-vs__col--praxe { border-left: 4px solid var(--hl-praxe); background: var(--hl-praxe-soft); }
.hl-vs__col h4 {
    margin: 0 0 .4rem;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
}
.hl-vs__col--papir h4 { color: var(--hl-papir); }
.hl-vs__col--praxe h4 { color: var(--hl-praxe); }
.hl-vs__col p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--c-text-secondary);
}
.hl-vs__col b { color: var(--c-text); }
.hl-vs__col a { color: var(--c-accent); text-decoration: none; font-weight: 600; }
.hl-vs__col a:hover { text-decoration: underline; }

/* ---------- mřížka boxů ---------- */
.hl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: .9rem;
    margin-top: 1.2rem;
}
.hl-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 1rem 1.15rem;
}
.hl-box h3 {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    margin: 0 0 .5rem;
    color: var(--c-text);
}
.hl-box p {
    font-size: .9rem;
    color: var(--c-text-secondary);
    line-height: 1.6;
    margin: 0 0 .5rem;
}
.hl-box p:last-child { margin-bottom: 0; }
.hl-box b { color: var(--c-text); }
.hl-box a { color: var(--c-accent); text-decoration: none; font-weight: 600; }
.hl-box a:hover { text-decoration: underline; }
.hl-list {
    margin: .2rem 0 .6rem;
    padding-left: 1.15rem;
    font-size: .88rem;
    color: var(--c-text-secondary);
    line-height: 1.6;
}
.hl-list li { margin: 0 0 .35rem; }
.hl-list b { color: var(--c-text); }

/* ---------- řetěz trestního řízení (SVG) ---------- */
.hl-fl-node rect {
    fill: var(--c-surface);
    stroke: var(--c-text-muted);
    stroke-width: 2;
}
.hl-fl-node text { pointer-events: none; }
.hl-fl-node .hl-t1 { font-size: 14px; font-weight: 800; fill: var(--c-text); letter-spacing: .04em; }
.hl-fl-node .hl-t3 { font-size: 11px; fill: var(--c-text-secondary); }
.hl-fl-node--pol rect { stroke: var(--hl-bezp); }
.hl-fl-node--sz rect { stroke: var(--hl-just); stroke-width: 2.6; }
.hl-fl-node--soud rect { stroke: var(--hl-just); }
.hl-fl-node--gibs rect { stroke: var(--hl-bezp); stroke-dasharray: 6 4; }
.hl-fl-edge path { fill: none; stroke: var(--c-text-muted); stroke-width: 2; }
.hl-fl-edge text { font-size: 11px; fill: var(--c-text-muted); }
#hl-arr-flow path { fill: var(--c-text-muted); }
.hl-fl-back path {
    fill: none;
    stroke: var(--hl-dozor);
    stroke-width: 1.8;
    stroke-dasharray: 6 4;
}
.hl-fl-back text { font-size: 11px; fill: var(--hl-dozor); font-weight: 600; }
#hl-arr-back path { fill: var(--hl-dozor); }

/* ---------- stupně soustavy ---------- */
.hl-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .7rem;
    margin: 1.2rem 0;
}
.hl-tier {
    border: 1px solid var(--c-border);
    border-top: 4px solid var(--hl-just);
    border-radius: 10px;
    background: var(--c-surface);
    padding: .85rem 1rem;
}
.hl-tier--mimo { border-top-style: dashed; }
.hl-tier b {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--c-text);
}
.hl-tier span {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-text-secondary);
    margin: .25rem 0 .3rem;
}
.hl-tier small { font-size: .76rem; color: var(--c-text-muted); line-height: 1.45; display: block; }

/* ---------- tabulka regulátorů ---------- */
.hl-table-wrap { margin-top: 1.2rem; }
.hl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    overflow: hidden;
}
.hl-table th, .hl-table td {
    text-align: left;
    vertical-align: top;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-secondary);
    line-height: 1.45;
}
.hl-table th {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    background: var(--c-bg);
}
.hl-table tr:last-child td { border-bottom: 0; }
.hl-table td:first-child { color: var(--c-text); font-weight: 600; }
.hl-table td:first-child small { display: block; font-weight: 400; color: var(--c-text-muted); font-size: .74rem; }
.hl-table td[data-th]::before { display: none; }
@media (max-width: 720px) {
    .hl-table thead { display: none; }
    .hl-table, .hl-table tbody, .hl-table tr, .hl-table td { display: block; width: 100%; box-sizing: border-box; }
    .hl-table tr { border-bottom: 1px solid var(--c-border); padding: .3rem 0; }
    .hl-table tr:last-child { border-bottom: 0; }
    .hl-table td { border: 0; padding: .3rem .85rem; }
    .hl-table td[data-th]::before {
        content: attr(data-th);
        display: block;
        font-size: .66rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--c-text-muted);
        font-weight: 700;
        margin-bottom: .1rem;
    }
    .hl-table td:first-child { padding-top: .6rem; }
    .hl-table td:last-child { padding-bottom: .6rem; }
}

/* ---------- matice „kdo hlídá hlídače" ---------- */
.hl-matrix-head { margin: 1.4rem 0 .8rem; }
.hl-matrix-head h3 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    margin: 0 0 .35rem;
    color: var(--c-text);
}
.hl-matrix-head p { font-size: .9rem; color: var(--c-text-secondary); line-height: 1.55; margin: 0 0 .7rem; max-width: 72ch; }
.hl-matrix { display: flex; flex-direction: column; gap: .6rem; }
.hl-mrow {
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-surface);
    padding: .8rem 1rem;
}
.hl-mrow__name {
    font-family: var(--font-serif);
    font-size: 1rem;
    margin: 0 0 .55rem;
    color: var(--c-text);
}
.hl-mrow__cells {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
}
.hl-mcell {
    border-left: 3px solid var(--c-border);
    padding-left: .6rem;
}
.hl-mcell__lvl {
    display: block;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--c-text-muted);
    margin-bottom: .2rem;
}
.hl-mcell p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--c-text-secondary); }
.hl-mcell__dash { color: var(--c-text-muted); font-style: italic; }
.hl-mcell[data-level="exekutiva"] { border-left-color: var(--hl-bezp); }
.hl-mcell[data-level="parlament"] { border-left-color: var(--hl-reg); }
.hl-mcell[data-level="justice"] { border-left-color: var(--hl-just); }
.hl-mcell[data-level="nezavisly"] { border-left-color: var(--hl-fin); }
.hl-mcell--empty { opacity: .55; }
.hl-matrix[data-filter="exekutiva"] .hl-mcell:not([data-level="exekutiva"]),
.hl-matrix[data-filter="parlament"] .hl-mcell:not([data-level="parlament"]),
.hl-matrix[data-filter="justice"] .hl-mcell:not([data-level="justice"]),
.hl-matrix[data-filter="nezavisly"] .hl-mcell:not([data-level="nezavisly"]) { display: none; }
.hl-matrix:not([data-filter="vse"]) .hl-mrow__cells { grid-template-columns: 1fr; }
@media (max-width: 780px) {
    .hl-mrow__cells { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .hl-mrow__cells { grid-template-columns: 1fr; }
}

/* ---------- zdroj ---------- */
.hl-zdroj {
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-surface);
    padding: 1.1rem 1.3rem;
    font-size: .86rem;
    color: var(--c-text-secondary);
    line-height: 1.65;
}
.hl-zdroj p { margin: 0 0 .7rem; }
.hl-zdroj p:last-child { margin-bottom: 0; }
.hl-zdroj a { color: var(--c-accent); text-decoration: none; font-weight: 600; }
.hl-zdroj a:hover { text-decoration: underline; }
.hl-zdroj b { color: var(--c-text); }

/* skryté prvky nesmí prosvítat žádným pravidlem výše */
.hlidaci [hidden] { display: none !important; }