/* ==========================================================================
   MPOZ – schema.html (Jak funguje systém ochrany zvířat, celé schéma)
   Linkuj na stránce AŽ ZA style.css a mpoz-doplnky.css:
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="mpoz-doplnky.css">
     <link rel="stylesheet" href="schema.css">
   Barvy jednotlivých orgánů (--akter-color) se nastavují za běhu z akteri.js,
   ať zůstane jeden zdroj pravdy pro to, "kdo je kdo" napříč celým webem.
   Záměrně tu není žádná nová oranžová plocha reprezentující orgán/aktéra –
   viz poznámka v akteri.js, oranžová je vyhrazená analytické vrstvě MPOZ.
   Kde schéma potřebuje odlišit "sankce" / "náprava", používá existující
   .tag-kauza / .tag-metodika ze style.css, ne novou barvu.
   ========================================================================== */

.sch-h1 { margin-top: 6px; }

.sch-disclaimer {
  display: block;
  white-space: normal;
  border-radius: 14px;
  line-height: 1.6;
  margin: 22px 0 8px;
}

/* --- legenda aktérů --- */
.sch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 28px;
}

.sch-legend .chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
  font-size: 13px;
  font-weight: 600;
  --akter-color: var(--navy);
}

.sch-legend .chip span { color: var(--akter-color); }

.sch-legend .chip img,
.sch-legend .chip .sch-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--soft);
  flex-shrink: 0;
}

.sch-legend .chip .sch-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.sch-legend .chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- fáze schématu --- */
.sch-stage {
  margin: 0 0 12px;
}

.sch-stage + .sch-stage {
  margin-top: 48px;
}

.sch-stage-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.sch-stage-head .idx {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.sch-stage-head h2 {
  font-size: 21px;
  margin: 3px 0 0;
}

.sch-stage-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* --- spojovací šipka mezi fázemi hlavního toku --- */
.sch-connector {
  display: flex;
  justify-content: center;
  margin: 4px 0 28px;
  color: var(--border);
}

.sch-connector svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- mřížky karet --- */
.sch-row {
  display: grid;
  gap: 16px;
}

.sch-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.sch-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sch-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* --- karta kroku --- */
.sch-card {
  --akter-color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--akter-color);
  border-radius: 14px;
  padding: 20px 22px;
}

.sch-card .who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--akter-color);
  margin: 0 0 8px;
  min-height: 20px;
}

.sch-card .who img,
.sch-card .who .sch-fallback {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

.sch-card .who .sch-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
  background: var(--akter-color);
}

.sch-card h3 {
  font-size: 16.5px;
  margin: 0 0 9px;
  line-height: 1.3;
}

/* ikona + nadpis v jednom řádku – použij tam, kde by .who a h3 jinak
   opakovaly stejné jméno orgánu pod sebou (viz "Kdo je v systému…") */
.sch-card-title { display: flex; align-items: center; gap: 12px; margin: 0 0 9px; }
.sch-card-title h3 { margin: 0; color: var(--akter-color); }

.who.who-ikona {
  min-height: 0;
  margin: 0;
  flex-shrink: 0;
}
.who.who-ikona img,
.who.who-ikona .sch-fallback {
  width: 32px;
  height: 32px;
}
.who.who-ikona .sch-fallback { font-size: 11px; }

.sch-card p {
  font-size: 13.5px;
  color: var(--text);
  margin: 0 0 10px;
}

.sch-card p:last-child { margin-bottom: 0; }

.sch-card .tag { margin: 0 0 10px; }

.par {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

.sch-note {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--soft);
  border-radius: 8px;
  padding: 8px 10px;
}

.sch-sublist {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text);
}

.sch-sublist li { margin: 0 0 8px; }
.sch-sublist li:last-child { margin-bottom: 0; }

/* --- zvýrazněný box (např. předběžná náhradní péče) --- */
.sch-callout {
  --akter-color: var(--navy);
  background: var(--navy-tint);
  border: 1px solid var(--navy);
  border-radius: 18px;
  padding: 26px 30px;
}

.sch-callout .who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--akter-color);
  margin: 0 0 8px;
}

.sch-callout .who img,
.sch-callout .who .sch-fallback {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: contain;
}

.sch-callout .who .sch-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--akter-color);
}

.sch-callout h3 {
  font-size: 19px;
  margin: 0 0 12px;
  color: var(--navy);
}

.sch-callout p {
  font-size: 14.5px;
  margin: 0 0 12px;
}

.sch-callout p:last-child { margin-bottom: 0; }

.sch-callout .sch-note {
  background: #fff;
}

/* --- neutrální štítek karty ---
   Pro karty v sekci Mezery, které vadou návrhu nejsou: vědomé odložení,
   legislativní překlep. Šedá je záměrně bez hodnocení — .tag-kauza
   („Mezera“) i .tag-metodika („Přínos“) by čtenáři podsouvaly soud. */
.tag-poznamka {
  background: var(--soft);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* --- lidský dodatek (zelená = ryze lidský, neanalytický hlas) ---
   Zelená není barvou žádného aktéra v akteri.js, takže nekoliduje ani
   s orgány, ani s oranžovou analytickou vrstvou MPOZ. Modrá zůstává
   technické poznámce (.sch-disclaimer) a shrnutí (.sch-callout). */
.sch-lidske {
  --lidske: #3f7a55;
  background: #f4f9f5;
  border: 1px solid #bcd9c4;
  border-left: 4px solid var(--lidske);
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: 18px;
}

.sch-lidske p { font-size: 14px; line-height: 1.7; margin: 0 0 12px; }
.sch-lidske p:last-child { margin-bottom: 0; }

/* --- tabulka souhrnu důsledků --- */
.sch-table-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 6px 24px;
  overflow-x: auto;
}

.sch-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}

.sch-table th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 14px 12px;
  border-bottom: 2px solid var(--border);
  font-weight: 700;
}

.sch-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.sch-table tr:last-child td { border-bottom: none; }
.sch-table td.par { white-space: nowrap; }
.sch-table tr:hover td { background: var(--soft); }

/* --- responzivita --- */
@media (max-width: 1000px) {
  .sch-row.cols-3,
  .sch-row.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .sch-row.cols-2,
  .sch-row.cols-3,
  .sch-row.cols-4 { grid-template-columns: 1fr; }
  .sch-callout { padding: 22px; }
  .sch-lidske { padding: 18px; }
}

/* --- Kotvy z grafů procesních následků na index.html ---------------------
   .site-header je position:sticky, takže bez odsazení by odkaz skočil pod ni
   a nadpis kroku by zůstal schovaný. */
#krok-2-vyhodnoceni-kvs,
#krok-5-rizeni-u-orp { scroll-margin-top: 90px; }