:root {
  --pozadi: #f6f7f9;
  --text: #1c2430;
  --tlumeny: #5b6675;
  --akcent: #0b5cad;
  --chyba: #b3261e;
  --okraj: #d5dae1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--pozadi);
  color: var(--text);
  line-height: 1.5;
}

.hlavicka {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--okraj);
}

.znacka { font-weight: 600; color: var(--text); text-decoration: none; }

.uzivatel { display: flex; gap: 1rem; align-items: center; }
.uzivatel a { color: var(--akcent); }
.odhlaseni { display: flex; gap: 0.5rem; align-items: center; margin: 0; }

.obsah { max-width: 72rem; margin: 2rem auto; padding: 0 1rem; }

.formular { display: grid; gap: 0.5rem; max-width: 22rem; }

input { padding: 0.5rem; border: 1px solid var(--okraj); border-radius: 4px; font: inherit; }

button {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 4px;
  background: var(--akcent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.chyba { color: var(--chyba); }
.poznamka { color: var(--tlumeny); }

.radek-nadpis { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.radek-nadpis h1 { margin: 0; }
.tlacitko, .tlacitko:visited {
  display: inline-block; padding: 0.5rem 1rem; border-radius: 4px;
  background: var(--akcent); color: #fff; text-decoration: none;
}
.stav { padding: 0.25rem 0.75rem; border-radius: 999px; background: #e3ecf7; color: var(--akcent); font-weight: 600; }
.souhrn { display: flex; gap: 1.5rem; color: var(--tlumeny); }

.fronta { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--okraj); }
.fronta th, .fronta td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--okraj); vertical-align: top; }
.fronta th { color: var(--tlumeny); font-weight: 600; font-size: 0.9rem; }
.fronta tr.zelena .lhuta { color: #1b7f3b; }
.fronta tr.zluta .lhuta { color: #a56a00; }
.fronta tr.cervena .lhuta { color: var(--chyba); font-weight: 600; }
.fronta tr.po-lhute .lhuta { color: #000; background: #ffd7d4; font-weight: 700; }
p.cervena, p.po-lhute { color: var(--chyba); font-weight: 600; }
p.zluta { color: #a56a00; }

.sloupce { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; }
.sloupce h2 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.sloupce h2:first-child { margin-top: 0; }
.pole { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; }
.pole dt { color: var(--tlumeny); }
.pole dd { margin: 0; }
.seznam { padding-left: 1.2rem; }

.akce { display: grid; gap: 0.5rem; margin: 0 0 0.75rem; }
.akce label { font-size: 0.9rem; color: var(--tlumeny); }
.akce select, .akce input { padding: 0.5rem; border: 1px solid var(--okraj); border-radius: 4px; font: inherit; }
.akce .helptext { font-size: 0.85rem; color: var(--tlumeny); }
button.druhotne { background: #fff; color: var(--akcent); border: 1px solid var(--akcent); }

.osa { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--okraj); }
.osa li { padding: 0.25rem 0 0.5rem 1rem; }
.osa time { color: var(--tlumeny); font-size: 0.85rem; display: block; }
.osa .kdo { color: var(--tlumeny); }

.formular .helptext { font-size: 0.85rem; color: var(--tlumeny); }
.formular label { font-size: 0.9rem; }
.formular > div { display: grid; gap: 0.25rem; }
.filtr a { margin-left: 0.75rem; color: var(--tlumeny); }
.filtr a.aktivni { color: var(--akcent); font-weight: 600; }
pre.telo { white-space: pre-wrap; font: inherit; font-size: 0.85rem; background: #fff; border: 1px solid var(--okraj); padding: 0.5rem; max-height: 14rem; overflow: auto; }
.navrh { padding: 0.5rem 0.75rem; background: #fff7dc; border: 1px solid #f0dc9a; border-radius: 4px; }

.fronta .akce { margin: 0; grid-template-columns: auto 1fr auto; align-items: center; }
.fronta .akce .errorlist { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; color: var(--chyba); font-size: 0.85rem; }
.fronta tr.jen-clovek td { color: var(--tlumeny); font-style: italic; }
.poloha-automat { color: #1b7f3b; font-weight: 600; }
.brana-hotovo { color: #1b7f3b; font-weight: 600; }
.zona { max-width: 40rem; }
.stav-slovy { font-size: 1.2rem; font-weight: 600; color: var(--akcent); }
.odkaz-zona { word-break: break-all; }
textarea { padding: 0.5rem; border: 1px solid var(--okraj); border-radius: 4px; font: inherit; }
.koncept > div { display: grid; gap: 0.25rem; }
.koncept input, .koncept textarea { width: 100%; box-sizing: border-box; }
.email-koncept { color: var(--tlumeny); font-style: italic; }
/* E-mail, který se jen uložil (odchozí pošta je vypnutá): ať se neplete s odeslaným. */
.email-nanecisto { background: #fff4d6; color: #7a5200; border: 1px solid #e0b400; border-radius: 3px; padding: 0 .35em; font-size: .85em; }
.poznamka.varovani { background: #fff4d6; border-left: 3px solid #e0b400; padding: .4em .6em; }
.email-selhalo { color: var(--chyba); font-weight: 600; }
.sloupce h3 { font-size: 0.95rem; margin: 0.75rem 0 0.25rem; }
.nahled-zakresu svg { width: 100%; height: auto; max-height: 24rem; border: 1px solid var(--okraj); background: #fff; }

.nahled summary { cursor: pointer; color: var(--akcent); font-size: 0.9rem; }
.nahled pre.telo { max-height: 22rem; margin: 0.25rem 0 0.5rem; }

.sablona { background: #fff; border: 1px solid var(--okraj); border-radius: 4px; padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
.sablona summary { cursor: pointer; }
.sablona .sloupce { margin-top: 0.75rem; }
.sablona .errorlist { color: var(--chyba); list-style: none; padding: 0; margin: 0; }
.sablona code { background: var(--pozadi); padding: 0 0.25rem; border-radius: 3px; }
.stitek { font-size: 0.85rem; color: #a56a00; margin-left: 0.5rem; }

.fronty-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.fronty-nav a { display: flex; flex-direction: column; min-width: 12rem; padding: .6rem .9rem; border-radius: 8px; background: #fff; border: 1px solid var(--okraj); color: var(--text); text-decoration: none; font-weight: 600; }
.fronty-nav a .pocet { position: absolute; }
.fronty-nav a { position: relative; padding-right: 3rem; }
.fronty-nav a .pocet { right: .8rem; top: .55rem; background: var(--pozadi); border-radius: 99px; padding: 0 .55rem; font-size: .9rem; }
.fronty-nav a small { font-weight: 400; color: var(--tlumeny); font-size: .8rem; }
.fronty-nav a.aktivni { border-color: var(--akcent); box-shadow: inset 0 -3px 0 var(--akcent); }
.karty-180 { display: grid; gap: .75rem; }
.karta-180 { background: #fff; border: 1px solid var(--okraj); border-left: 4px solid var(--okraj); border-radius: 8px; padding: .75rem 1rem; }
.karta-180.zelena { border-left-color: #1b7f3b; } .karta-180.zluta { border-left-color: #a56a00; } .karta-180.cervena, .karta-180.po-lhute { border-left-color: var(--chyba); }
.karta-180 header { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; margin-bottom: .5rem; }
.karta-180 .cislo { font-weight: 700; font-size: 1.05rem; }
.karta-180 .stav { padding: .05rem .6rem; border-radius: 99px; background: #e3ecf7; color: var(--akcent); font-size: .85rem; font-weight: 600; }
.karta-180 .stav.faze-platba { background: #fff3d6; color: #8a5a00; }
.karta-180 .lhuta, .karta-180 .ceka { color: var(--tlumeny); font-size: .9rem; }
.karta-180 .ceka { margin-left: auto; font-weight: 600; color: var(--text); }
.karta-180-telo { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .25rem 1.5rem; }
.karta-180-telo .pole { grid-template-columns: 6rem 1fr; font-size: .92rem; }
.karta-180-telo details summary { cursor: pointer; color: var(--akcent); font-size: .85rem; }
.zluta { color: #a56a00; font-weight: 600; }

.hk { display: inline-block; padding: .05rem .6rem; border-radius: 99px; font-size: .85rem; font-weight: 700; }
.hk-v_ceste { background: #fde2e0; color: #9b1c12; }
.hk-blizko { background: #fff3d6; color: #8a5a00; }
.hk-mimo { background: #e0f2e6; color: #1b6b35; }
.hk-nelze { background: #eceff3; color: var(--tlumeny); }

.mapa-sekce { margin: 0 0 1.5rem; }
.mapa-sekce .radek-nadpis h2 { margin: 0; font-size: 1.05rem; }
.mapa-sekce .radek-nadpis p { margin: 0; }
.mapa-detail-velka { height: 30rem; min-height: 20rem; margin: .5rem 0; }
@media (max-width: 700px) { .mapa-detail-velka { height: 22rem; } }
.mapa-nastroje form.radek { display: inline; margin: 0; }
.postup-180 { background: #fff; border: 1px solid var(--okraj); border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
.postup-180 ol { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .35rem; }
.postup-180 li { display: flex; gap: .6rem; align-items: flex-start; }
.postup-180 .znacka-kroku { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--pozadi); color: var(--tlumeny); border: 1px solid var(--okraj); }
.postup-180 .nazev-kroku small { display: block; color: var(--tlumeny); font-size: .82rem; }
.postup-180 li.hotovo .znacka-kroku { background: #1b7f3b; color: #fff; border-color: #1b7f3b; }
.postup-180 li.ted .znacka-kroku { background: var(--akcent); color: #fff; border-color: var(--akcent); }
.postup-180 li.ted .nazev-kroku { font-weight: 700; }
.postup-180 li.pozdeji { color: var(--tlumeny); }
.postup-akce { display: grid; gap: .5rem; border-top: 1px solid var(--okraj); padding-top: .75rem; }
.postup-akce form { margin: 0; }
.postup-akce form.radek { display: flex; gap: .5rem; flex-wrap: wrap; }
.postup-akce input[name=cislo_jednaci] { padding: .45rem; border: 1px solid var(--okraj); border-radius: 4px; }
.odeslat-vyjadreni { width: 100%; }
button[disabled] { background: #c9d2dc; cursor: not-allowed; }

.souhrn-kontaktu { display: flex; flex-wrap: wrap; gap: 1.25rem; color: var(--tlumeny); margin: .5rem 0 .75rem; }
.souhrn-kontaktu strong { color: var(--text); }

/* „Potřeba řešit": proč žádost čeká na člověka. Naléhavé (lhůta) výrazněji. */
.duvod { display: inline-block; margin: 0.1rem 0.2rem 0.1rem 0; padding: 0 0.35em; font-size: 0.8rem; border-radius: 3px; background: #eef1f5; color: #33404f; border: 1px solid #ccd4de; }
.duvod.naleha { background: #fdecea; color: #8a1c13; border-color: #f0b3ad; font-weight: 600; }
.filtr a.resit.aktivni, .filtr a.resit { font-weight: 600; }

/* Nepřečtená zpráva od žadatele: ve frontě rozklikávací, v detailu panel. */
details.zprava { margin: 0.2rem 0; }
details.zprava > summary { cursor: pointer; font-size: 0.85rem; color: var(--akcent); }
.nova-zprava { border: 1px solid #e0b400; background: #fffaf0; border-radius: 4px; padding: 0.6rem 0.8rem; margin: 0.8rem 0; }
.nova-zprava h2 { margin-top: 0; }
.nova-zprava article + article { border-top: 1px solid var(--okraj); margin-top: 0.6rem; padding-top: 0.6rem; }

/* ---------------------------------------------------------------------------
   Detail žádosti: vlevo práce (co teď, mapa, úkony), vpravo kontext (údaje,
   pošta, historie). Cíl: zpracovatel má na první pohled vidět, co má udělat.
   --------------------------------------------------------------------------- */
.zpet { margin: 0 0 0.5rem; }
.detail-hlavicka {
  position: sticky; top: 0; z-index: 500;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding: 0.7rem 1rem;
  background: #fff; border: 1px solid var(--okraj); border-radius: 8px;
  box-shadow: 0 1px 3px rgba(16, 32, 48, 0.08);
}
.detail-titulek { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.detail-titulek h1 { margin: 0; font-size: 1.5rem; }
.odznak { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.odznak-typ { background: #e3ecf7; color: var(--akcent); }
.odznak-typ.typ-nejasne { background: #f1f3f5; color: #5a6b7a; }
.odznak-stav { background: #eef1f5; color: #33404f; }
.odznak-lhuta { background: #eef1f5; color: #33404f; }
.odznak-lhuta.zelena { background: #e6f4ea; color: #1b7f3b; }
.odznak-lhuta.zluta { background: #fff4d6; color: #7a5200; }
.odznak-lhuta.cervena, .odznak-lhuta.po-lhute { background: #fdecea; color: #b3261e; }
.odznak-naleha { background: #fdecea; color: #b3261e; }
/* Hlavní akce: jediné modré tlačítko na stránce, ať je jasné, kam kliknout. */
.hlavni-akce { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.5rem 1.1rem; line-height: 1.25; }
.hlavni-akce small { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; font-weight: 600; }
.hlavni-akce.ceka { background: #eef1f5; color: #33404f; border: 1px solid var(--okraj); }
.hlaska { padding: 0.5rem 0.8rem; border-radius: 6px; background: #eef1f5; }
.hlaska.chyba { background: #fdecea; }

.detail-mrizka { display: grid; grid-template-columns: minmax(0, 2fr) minmax(19rem, 1fr); gap: 1.25rem; align-items: start; }
.detail-prace, .detail-kontext { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.karta { background: #fff; border: 1px solid var(--okraj); border-radius: 8px; padding: 0.9rem 1.1rem; }
.karta > h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.karta > h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; }
.karta-akce { border-color: var(--akcent); box-shadow: 0 1px 3px rgba(11, 92, 173, 0.12); }
.detail-kontext .karta { font-size: 0.93rem; }
.detail-kontext .osa { max-height: 26rem; overflow: auto; }
@media (max-width: 70rem) {
  .detail-mrizka { grid-template-columns: 1fr; }
  .detail-hlavicka { position: static; }
}

/* Rychlá lišta v detailu § 180: nejčastější závěry na jedno kliknutí.
   Potvrdí výsledek střetu a rovnou připraví koncept podle vzoru. */
.hotbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1rem; padding: 0.5rem 0.75rem;
  background: #fff; border: 1px solid var(--okraj); border-radius: 8px; }
.hotbar form { margin: 0; }
.hotbar-popis { font-size: 0.85rem; color: var(--tlumeny); font-weight: 600; margin-right: 0.25rem; }
.hotbar-tlacitko { display: inline-block; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--okraj);
  background: #f6f7f9; color: var(--text); font: inherit; font-size: 0.9rem; cursor: pointer; text-decoration: none; }
.hotbar-tlacitko:hover { background: #eef1f5; border-color: #b9c2cd; }
.hotbar-bez { border-color: #b7e0c2; background: #eef8f1; color: #1b7f3b; }
.hotbar-podzemni, .hotbar-nadzemni { border-color: #f3c9c4; background: #fdf0ee; color: #b3261e; }
.hotbar-povolena_trasa { border-color: #e0cfa8; background: #fdf7e9; color: #7a5200; }
.hotbar-uzavrit { margin-left: auto; }

/* Dokument vyjádření: vyplněný vzor je vidět rovnou na stránce. */
.dokument-radek { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--okraj); }
.dokument-radek:last-of-type { border-bottom: 0; }
.dokument-popis { margin: 0; }
.dokument-aktualni .dokument-popis strong { color: var(--akcent); }
.nahled-pdf { margin: 0.5rem 0 0.25rem; }
.nahled-pdf > summary { cursor: pointer; color: var(--akcent); font-size: 0.9rem; }
.nahled-pdf object { width: 100%; height: 42rem; margin-top: 0.5rem; border: 1px solid var(--okraj); border-radius: 6px; background: #fff; }
@media (max-width: 70rem) { .nahled-pdf object { height: 28rem; } }

/* Popisek a nápověda u pole přímo v postupu (aby nikdo nehádal, co vyplnit). */
.postup-akce label { font-weight: 600; font-size: 0.9rem; }
.napoveda-pole { flex-basis: 100%; }

/* Odkaz u kroku postupu („není úplná? ↓") a okýnko pro vyžádání doplnění. */
.odkaz-krok { margin-left: 0.5rem; font-size: 0.8rem; font-weight: 400; color: var(--akcent); white-space: nowrap; }
.vyzadat-doplneni { margin-top: 1rem; padding: 0.75rem 0.9rem; border: 1px dashed var(--okraj); border-radius: 6px; background: #fbfcfd; }
.vyzadat-doplneni h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }

/* Nápověda pro obsluhu: čtecí stránka, širší řádky, obsah nahoře. */
.napoveda { max-width: 76rem; }
.napoveda > :not(.postup) { max-width: 48rem; }
.napoveda h1 { margin-bottom: .35rem; }
.napoveda .uvodni { color: var(--tlumeny); margin: 0 0 1.25rem; }
.napoveda .karta { margin-bottom: 1.25rem; line-height: 1.65; }
.napoveda .karta h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
.napoveda .karta h3 { font-size: .98rem; margin: 1.1rem 0 .4rem; }
.napoveda-obsah { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
.napoveda-obsah a { padding: .3rem .75rem; border: 1px solid var(--okraj); border-radius: 999px;
  background: #fff; color: var(--akcent); text-decoration: none; font-size: .9rem; }
.napoveda-obsah a:hover { background: #eef1f5; }
.napoveda .kroky { padding-left: 1.2rem; }
.napoveda .kroky > li { margin-bottom: .6rem; }
.napoveda .odrazky { padding-left: 1.2rem; }
.napoveda .odrazky > li { margin-bottom: .45rem; }
.filtr a.tlacitko-odkaz { color: #fff; background: var(--akcent); padding: .3rem .9rem; border-radius: 6px; text-decoration: none; font-weight: 600; }
.filtr a.tlacitko-odkaz:hover { filter: brightness(1.1); }

/* Nápověda: diagram postupu s odkazy (agenda/postup.py) */
.postup-legenda { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .88rem; color: var(--tlumeny); }
.kdo { display: inline-block; padding: .02rem .55rem; border-radius: 99px; font-size: .78rem; font-weight: 700; letter-spacing: .01em; }
.kdo.kdo-system { background: #e3ecf7; color: var(--akcent); }
.kdo.kdo-zadatel { background: #fff3d6; color: #8a5a00; }
.kdo.kdo-vy { background: #e2f3e7; color: #1b6e35; }
.postup-tok { list-style: none; padding: 0; margin: 0; }
.postup-tok > .postup-krok { position: relative; margin-bottom: 1.6rem; }
.postup-tok > .postup-krok:not(:last-child)::after { content: "↓"; position: absolute; left: 1.4rem; bottom: -1.55rem; color: var(--tlumeny); font-size: 1.1rem; line-height: 1.5rem; }
.postup-krok { background: #fff; border: 1px solid var(--okraj); border-left: 4px solid var(--okraj); border-radius: 8px; padding: .6rem .9rem; line-height: 1.5; }
.postup-krok.kdo-system { border-left-color: var(--akcent); }
.postup-krok.kdo-zadatel { border-left-color: #d49a00; }
.postup-krok.kdo-vy { border-left-color: #1b7f3b; }
.postup-krok:target { box-shadow: 0 0 0 3px rgba(11, 92, 173, .25); }
.postup-krok p { margin: .35rem 0 .45rem; font-size: .93rem; }
.postup-hlava strong { font-size: .98rem; }
.postup-odkazy { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin-top: .3rem; }
.postup-popisek { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tlumeny); min-width: 4.2rem; }
.cip { display: inline-flex; align-items: baseline; gap: .35rem; padding: .12rem .55rem; border: 1px solid var(--okraj); border-radius: 6px; font-size: .84rem; text-decoration: none; color: var(--text); background: #fff; }
a.cip:hover { background: #eef1f5; }
.cip-sablona { border-color: #9dbbe0; color: var(--akcent); }
.cip-prepinac { border-color: #c3b5e0; color: #5a3f99; }
.cip-stranka { color: var(--akcent); }
.cip-server { border-style: dashed; color: var(--tlumeny); background: #fafbfc; }
.cip-server b { color: var(--text); font-weight: 600; }
.cip-kod { border-style: dotted; color: var(--tlumeny); font-style: italic; background: #fafbfc; }
.cip-stav { font-size: .76rem; color: var(--tlumeny); }
.cip-stav.zvyrazneny { color: #a56a00; font-weight: 600; }
.postup-rozcesti { text-align: center; color: var(--tlumeny); font-size: .88rem; margin: -.4rem 0 .8rem; }
.postup-rozcesti::before { content: "↙ "; } .postup-rozcesti::after { content: " ↘"; }
.postup-vidlice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.postup-vetev { background: #f8f9fb; border: 1px solid var(--okraj); border-radius: 10px; padding: .75rem; }
.postup-vetev > h3 { margin: 0 0 .7rem; font-size: 1rem; }
.postup-vetev > h3 small { display: block; font-weight: 400; color: var(--tlumeny); font-size: .85rem; }
.postup-mrizka { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .8rem; }
.sablona:target, tr:target { outline: 3px solid rgba(11, 92, 173, .3); outline-offset: 2px; }
@media (max-width: 52rem) {
  .postup-vidlice { grid-template-columns: 1fr; }
  .postup-mrizka { grid-template-columns: 1fr; }
}