/* ══════════════════════════════════════════════════════════════════════════
   /garance — styly JEN pro tuhle stránku. Načítá se přes $extra_css.
   ⚠️ Barvy VÝHRADNĚ z proměnných base.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* Skryté, ale ovladatelné klávesnicí — přepínač níž. Nepoužívat display:none,
   tím by prvek vypadl z pořadí tabulátoru. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Poměr rizika ──────────────────────────────────────────────────────────
   Jediné, co má tenhle obrázek říct: záloha je proti ceně webu drobek.
   Šířka oranžového dílu se POČÍTÁ z ceníku (viz garance.php), nepíše se
   ručně — jinak by se po první změně ceny rozešla se skutečností. */
.risk{max-width:720px;margin:0 auto}
.risk-bar{position:relative;height:56px;border-radius:12px;overflow:hidden;
  background:var(--navy-tint);border:1px solid var(--border);display:flex}
.risk-you{background:var(--orange);height:100%;position:relative;
  transition:width .9s cubic-bezier(.65,.02,.3,1) .1s}
/* Před odhalením je pruh nulový a při najetí sekce doroste. Kdo má vypnuté
   animace, uvidí ho rovnou celý (viz níž). */
.reveal .risk-you{width:0}
.reveal.in .risk-you{width:var(--risk-w)}
.risk-rest{flex:1;display:grid;place-items:center;color:var(--muted);font-size:.9rem;
  padding:0 12px;text-align:center}
.risk-legend{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
  margin-top:16px;font-size:.94rem;color:var(--muted)}
.risk-legend span{display:inline-flex;align-items:center;gap:8px}
.risk-legend i{width:13px;height:13px;border-radius:4px;flex:none}
.risk-legend .i-you{background:var(--orange)}
.risk-legend .i-rest{background:var(--navy-tint);border:1px solid var(--border)}
.risk-note{text-align:center;color:var(--muted);font-size:.95rem;max-width:64ch;
  margin:18px auto 0}
@media(prefers-reduced-motion:reduce){
  .reveal .risk-you,.reveal.in .risk-you{width:var(--risk-w);transition:none}
}

/* ── Rozcestník „líbí / nelíbí" ────────────────────────────────────────────
   Dvě tlačítka a pod nimi panel, který se mění. Čistě CSS přes :checked.
   ⚠️ Vstupy MUSÍ zůstat v DOM před přepínači i panely. */
.fork input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0)}
.fork-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px}
.fork-tabs label{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);border-radius:999px;
  padding:11px 20px;font-size:1rem;font-weight:600;color:var(--navy);
  transition:background .15s,border-color .15s,color .15s}
.fork-tabs label:hover{border-color:var(--navy)}
.fork input:focus-visible + label{outline:2px solid var(--orange);outline-offset:2px}
#g-libi:checked   ~ .fork-tabs label[for="g-libi"]{background:var(--green);
  border-color:var(--green);color:#fff}
#g-nelibi:checked ~ .fork-tabs label[for="g-nelibi"]{background:var(--navy);
  border-color:var(--navy);color:#fff}

.fork-panel{display:none}
#g-libi:checked   ~ .fork-panels .fork-panel--libi,
#g-nelibi:checked ~ .fork-panels .fork-panel--nelibi{display:block}

.fork-card{border-radius:var(--radius);padding:26px 22px;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow)}
.fork-card--libi{border-color:var(--green)}
.fork-card h3{font-size:1.2rem;margin-bottom:.45em}
.fork-card > p{color:var(--muted);margin:0 0 16px}
.fork-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fork-list li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);
  font-size:.97rem;line-height:1.5}
.fork-list svg{width:19px;height:19px;flex:none;margin-top:2px;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;stroke:var(--orange)}
.fork-card--libi .fork-list svg{stroke:var(--green-600)}
.fork-list b{color:var(--navy);font-weight:600}