/* ==========================================================================
   JP&Partneři – poradenský systém
   Koncept: pracovní kniha, ne dashboard. Řádky místo karet, hustota s klidem.
   Zlatá je vyhrazená pro „tady se čeká na tebe“ – kdyby zdobila, přestane
   to znamenat cokoliv.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Tokeny
   Světlý motiv je výchozí. Tmavý přepíná jen hodnoty, ne pravidla – proto
   nikde níž nesmí být napsaná konkrétní barva.
   -------------------------------------------------------------------------- */
:root{
  --papir:        #FBFAF8;   /* plocha, na které se pracuje */
  --papir-vedle:  #F1EEE8;   /* levý panel, hlavičky tabulek */
  --papir-zvyraz: #F6F3ED;   /* řádek pod myší */
  --inkoust:      #1C1B18;
  --inkoust-tise: #5B574E;
  --inkoust-slabe:#6F6A5F;
  --linka:        #E6E2D9;
  --linka-silna:  #DFDBD2;

  --zlata:        #A87F2E;
  --zlata-tmava:  #8C6A26;
  --zlata-jasna:  #C9A24B;   /* hover na zlatém tlačítku */
  --zlata-jemna:  #FAF6EC;   /* podklad pod zlatým rámečkem */
  /* Zlatá z webu má na papíru poměr 3,5:1 – na plochy a rámečky to stačí,
     na drobný text ne. Text má proto vlastní, tmavší odstín, který projde
     i na béžovém panelu (5,1:1), ne jen na bílém papíru. */
  --zlata-text:   #7E5F22;

  --varovna:      #A3402C;   /* případ stojí moc dlouho */
  --varovna-text: #A3402C;
  --hotova:       #4A6B3F;   /* vyhraný stav */

  /* Stejné dvě rodiny jako web, nic dalšího. Názvy proměnných sedí
     s `styles.css` webu, aby se v tom dalo přepínat bez přemýšlení. */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius: 8px;
  --rail: 176px;
  --prechod: 120ms ease;
}

html[data-motiv="tmavy"]{
  --papir:        #1C1B18;
  --papir-vedle:  #16150F;
  --papir-zvyraz: #24231D;
  --inkoust:      #F2EFE9;
  --inkoust-tise: #9A958A;
  --inkoust-slabe:#948F84;
  --linka:        #2C2A24;
  --linka-silna:  #34322C;

  /* Na černé musí být zlatá světlejší, jinak neprojde kontrastem. */
  --zlata:        #C9A24B;
  --zlata-tmava:  #8C6A26;
  --zlata-jasna:  #DDBA6C;
  --zlata-jemna:  #241F14;
  --zlata-text:   #C9A24B;   /* tady už zlatá na text stačí (7,2:1) */

  /* Cihlová z webu je na tmavém podkladu příliš temná (4,0:1). Plocha linky
     si to dovolí, drobný text vedle ní ne. */
  --varovna:      #C4593F;
  --varovna-text: #D2705A;
  --hotova:       #8FA87E;
}

*, *::before, *::after{ box-sizing: border-box; }

/* Atribut `hidden` musí přebít vlastní `display`.
   Prohlížeč ho řeší pravidlem `[hidden]{display:none}` ve svém stylu, jenže
   `.brana{display:grid}` má stejnou specificitu a je až za ním — takže vyhraje
   a schovaný prvek zůstane vidět. Přesně to se stalo po přihlášení: brána se
   „skryla“, aplikace se vykreslila pod ní a vypadalo to, že se nic nestalo. */
[hidden]{ display: none !important; }

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--inkoust);
  background: var(--papir);
  -webkit-font-smoothing: antialiased;
}

/* Čísla případů, částky a data.
   Monospace by sloupce zarovnal taky, ale přinesl by do systému třetí
   rodinu navíc. Inter umí tabulární číslice (`tnum`) – `1 200 000` a
   `980 000` se pod sebou srovnají stejně, jen v písmu webu. Trochu širší
   prostrkání pomáhá číst `H000014` po znacích. */
.cisla{
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv05' 1;
  letter-spacing: .01em;
  font-size: .8125rem;
}

.preskocit{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--inkoust); color: var(--papir);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.preskocit:focus{ left: 0; }

:where(a, button, input, textarea, select):focus-visible{
  outline: 2px solid var(--zlata);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2) Přihlašovací brána
   -------------------------------------------------------------------------- */
.brana{
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--papir-vedle);
}
.brana-panel{
  width: min(100%, 23rem);
  background: var(--papir);
  border: 1px solid var(--linka-silna);
  border-radius: 12px;
  padding: 2rem 1.75rem;
}
.brana-nadpis{
  font-size: 1.0625rem;
  font-weight: 500;
  margin: 0 0 1.5rem;
}
.znacka{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: -.01em;
  margin: 0;
}
.znacka span{ color: var(--zlata); }
.znacka--velka{ font-size: 1.375rem; margin-bottom: .5rem; }

.pole{ display: block; margin-bottom: 1rem; }
.pole-popis{
  display: block;
  font-size: .8125rem;
  color: var(--inkoust-tise);
  margin-bottom: .3rem;
}
.pole input, .pole textarea{
  width: 100%;
  font: inherit;
  color: var(--inkoust);
  background: var(--papir);
  border: 1px solid var(--linka-silna);
  border-radius: var(--radius);
  padding: .55rem .7rem;
  transition: border-color var(--prechod);
}
.pole input:hover, .pole textarea:hover{ border-color: var(--inkoust-slabe); }
.pole textarea{ resize: vertical; min-height: 4.5rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   3) Tlačítka
   -------------------------------------------------------------------------- */
.tl{
  font: inherit;
  font-size: .875rem;
  border-radius: var(--radius);
  border: 1px solid var(--linka-silna);
  background: var(--papir);
  color: var(--inkoust);
  padding: .45rem .85rem;
  cursor: pointer;
  transition: background var(--prechod), border-color var(--prechod), transform var(--prechod);
}
.tl:hover{ background: var(--papir-zvyraz); border-color: var(--inkoust-slabe); }
.tl:active{ transform: translateY(1px); }
.tl[disabled]{ opacity: .5; cursor: default; transform: none; }

/* Tmavý text na zlaté, ne světlý: bílá na `#A87F2E` má jen 3,5:1, inkoust
   4,7:1. Díky tomu zůstane na tlačítku přesně ta zlatá z webu a nemusí se
   kvůli čitelnosti ztmavovat. V obou motivech je to stejné pravidlo. */
.tl--hlavni{
  background: var(--zlata);
  border-color: var(--zlata);
  color: #1C1B18;
  font-weight: 500;
}
.tl--hlavni:hover{
  background: var(--zlata-jasna, #C9A24B);
  border-color: var(--zlata-jasna, #C9A24B);
}

.tl--tiche{ border-color: transparent; background: transparent; color: var(--inkoust-tise); }
.tl--tiche:hover{ background: var(--papir-zvyraz); border-color: var(--linka); color: var(--inkoust); }

.tl--siroke{ width: 100%; }
.tl--male{ font-size: .8125rem; padding: .3rem .6rem; }

/* --------------------------------------------------------------------------
   4) Rozvržení: levý panel + obsah
   -------------------------------------------------------------------------- */
.rozvrzeni{
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100dvh;
}

.rail{
  background: var(--papir-vedle);
  border-right: 1px solid var(--linka);
  padding: 1.1rem 0 1rem;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
}
.rail .znacka{ padding: 0 1rem 1.25rem; }

.rail-skupina{
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--inkoust-slabe);
  margin: 0;
  padding: .75rem 1rem .25rem;
}
.rail-seznam{ list-style: none; margin: 0; padding: 0; }

.rail-odkaz{
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .4rem 1rem;
  font-size: .875rem;
  color: var(--inkoust-tise);
  text-decoration: none;
  /* Průhledný pruh drží text na místě i u neaktivních položek – jinak by
     aktivní odkaz o dva pixely poskočil. */
  border-left: 2px solid transparent;
  transition: background var(--prechod), color var(--prechod);
}
.rail-odkaz:hover{ background: var(--papir-zvyraz); color: var(--inkoust); }
.rail-odkaz[aria-current="page"]{
  background: var(--papir);
  color: var(--inkoust);
  border-left-color: var(--zlata);
}

.odznak{
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  font-weight: 500;
  color: var(--zlata-text);
}
.rail-odkaz .pocet{
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  color: var(--inkoust-slabe);
}

.rail-pata{ margin-top: auto; padding: 0 .75rem; display: grid; gap: .25rem; }

.rail-ja{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .35rem;
  margin: .5rem 0 .1rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: background var(--prechod);
}
.rail-ja:hover{ background: var(--papir-zvyraz); }
.rail-kdo{
  font-size: .75rem;
  color: var(--inkoust-slabe);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fotka vyplní kolečko; když chybí, zůstanou iniciály. */
.ini img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.obsah{ padding: 1.75rem 2rem 4rem; max-width: 68rem; }
.obsah:focus{ outline: none; }

/* --------------------------------------------------------------------------
   5) Hlavička pohledu
   -------------------------------------------------------------------------- */
.hlavicka{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.hlavicka h1{
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 0;
}
.hlavicka .cisla{ color: var(--inkoust-slabe); }
.podnadpis{
  color: var(--inkoust-tise);
  font-size: .875rem;
  margin: .15rem 0 1.5rem;
}

.skupina-nadpis{
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--inkoust-slabe);
  margin: 2rem 0 .5rem;
}
.skupina-nadpis:first-of-type{ margin-top: 0; }

/* --------------------------------------------------------------------------
   5b) Dlaždice s čísly
   Čtyři čísla, která rozhodují o tom, co dělat dnes. Popisek nahoře, číslo
   dole — oko jde po velkém a teprve pak čte, co znamená.
   -------------------------------------------------------------------------- */
.kachle-rada{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem;
  margin-bottom: 2rem;
}
.kachle{
  display: grid;
  gap: .1rem;
  align-content: start;
  background: var(--papir-vedle);
  border: 1px solid var(--linka);
  border-radius: 12px;
  padding: .75rem .9rem;
  /* Levý pruh nese význam: zlatý = čeká se na tebe, červený = něco stojí.
     Bez důvodu se nerozsvítí, jinak by přestal cokoliv znamenat. */
  border-left: 3px solid var(--linka-silna);
}
.kachle--zlata{ border-left-color: var(--zlata); background: var(--zlata-jemna); }
.kachle--varovna{ border-left-color: var(--varovna); }

.kachle-popis{
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--inkoust-slabe);
}
.kachle-cislo{
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kachle--zlata .kachle-cislo{ color: var(--zlata-text); }
.kachle--varovna .kachle-cislo{ color: var(--varovna-text); }
.kachle-doplnek{ font-size: .75rem; color: var(--inkoust-tise); }

/* Iniciály místo fotky: dají seznamu rytmus a nic se nemusí stahovat. */
.ini{
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--papir-vedle);
  border: 1px solid var(--linka-silna);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--inkoust-tise);
}
.ini--velke{ width: 2.5rem; height: 2.5rem; font-size: .875rem; }

.hlavicka--pripad{ align-items: center; gap: .6rem; }

/* --------------------------------------------------------------------------
   5c) Stopa: kde v pipeline případ je
   „Schůzka“ sama o sobě neřekne, jestli je případ na začátku, nebo skoro
   hotový. Tohle to ukáže na první pohled.
   -------------------------------------------------------------------------- */
.stopa{
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.krok-bod{
  position: relative;
  height: 4px;
  flex: 1;
  min-width: 1.5rem;
  border-radius: 2px;
  background: var(--linka-silna);
}
.krok-bod--hotovo{ background: var(--zlata-tmava); }
.krok-bod--tady{ background: var(--zlata); height: 6px; }

/* Název stavu jen u toho aktuálního — devět popisků vedle sebe je nečitelných. */
.krok-popis{
  position: absolute;
  left: -9999px;
}
.krok-bod--tady .krok-popis{
  position: static;
  display: block;
  font-size: .6875rem;
  color: var(--zlata-text);
  white-space: nowrap;
  transform: translateY(.5rem);
}

/* --------------------------------------------------------------------------
   6) Lead čekající na převzetí
   Jediné místo se zlatou. Když ji vidíš, něco to znamená.
   -------------------------------------------------------------------------- */
.lead{
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid var(--linka-silna);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  margin-bottom: .4rem;
  background: var(--papir);
}
.lead--cerstvy{ border-color: var(--zlata); background: var(--zlata-jemna); }
.lead-telo{ flex: 1; min-width: 0; }
.lead-jmeno{ font-size: .9375rem; }
.lead-popis{ color: var(--inkoust-slabe); }
.lead--cerstvy .lead-popis{ color: var(--zlata-text); }

/* --------------------------------------------------------------------------
   7) Tabulka případů
   Řádky, ne karty. Karta kolem každého případu vypadá vzdušně u pěti kusů
   a je nečitelná u čtyřiceti.
   -------------------------------------------------------------------------- */
.pripady{ border-top: 1px solid var(--linka); }

.pripad{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem 9rem 4.5rem;
  align-items: center;
  gap: .75rem;
  padding: .45rem .5rem;
  border-bottom: 1px solid var(--linka);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: background var(--prechod);
}
.pripad:hover{ background: var(--papir-zvyraz); }
.pripad-kdo{ display: flex; align-items: center; gap: .55rem; min-width: 0; }
.pripad-cislo{ color: var(--inkoust-slabe); }
.pripad-jmeno{
  font-size: .9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pripad-stav{ font-size: .8125rem; color: var(--inkoust-tise); }

/* Linka stáří: jak dlouho případ visí ve stejném stavu. Kvůli ní nemusíš
   nic otevírat, abys viděl, co ti usychá. Šířka = díl z 21 dnů. */
.stari-linka{
  height: 3px;
  background: var(--linka-silna);
  border-radius: 0;
}
.stari-popis{ display: block; color: var(--inkoust-slabe); margin-top: .2rem; }
.stari--pozor .stari-linka{ background: var(--zlata); }
.stari--pozor .stari-popis{ color: var(--inkoust-tise); }
.stari--stoji .stari-linka{ background: var(--varovna); }
.stari--stoji .stari-popis{ color: var(--varovna-text); }
.stari--hotovo .stari-linka{ background: var(--hotova); }

/* --------------------------------------------------------------------------
   8) Kanban
   Sloupce vedle sebe. Devět stavů se na monitor nevejde, takže se scrolluje
   do stran — proto má každý sloupec počet v hlavičce a součet v patičce.
   Díky nim má smysl i sloupec, na který zrovna nevidíš.
   -------------------------------------------------------------------------- */
/* Flex, ne grid: `grid-auto-columns` dává všem sloupcům stejnou šířku
   a sbalený sloupec si ji z gridu neumí přebít. Ve flexu si každý sloupec
   šířku určí sám. */
.kanban{
  display: flex;
  align-items: stretch;
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .75rem;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.kanban::-webkit-scrollbar{ height: 10px; }
.kanban::-webkit-scrollbar-thumb{ background: var(--linka-silna); border-radius: 5px; }

.sl{
  flex: 0 0 15rem;
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  background: var(--papir-vedle);
  border: 1px solid var(--linka);
  border-radius: 12px;
  scroll-snap-align: start;
  transition: flex-basis var(--prechod);
}
.sl--konec{ border-color: var(--hotova); }

.sl-hlava{
  display: flex;
  padding: 0;
  border-bottom: 1px solid var(--linka);
}
/* Hlavička je tlačítko, ale nesmí vypadat jako tlačítko — je to nadpis,
   na který se dá kliknout. */
.sl-prepnout{
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
  padding: .6rem .7rem .5rem;
  background: none;
  border: none;
  border-radius: 12px 12px 0 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sl-prepnout:hover .sl-nazev{ color: var(--zlata-text); }
.sl-prepnout:focus-visible{ outline: 2px solid var(--zlata); outline-offset: -2px; }
.sl-nazev{ font-size: .8125rem; font-weight: 500; line-height: 1.25; }
.sl-pocet{ color: var(--inkoust-slabe); }
.sl--konec .sl-nazev{ color: var(--hotova); }

/* Sbalený sloupec: zbude z něj svislý proužek s názvem a počtem.
   Neschovává se úplně — poradce musí vidět, že tam něco je, a musí do něj
   jít pustit kartu. */
.sl--zabaleny{ flex-basis: 2.75rem; }
.sl--zabaleny .sl-telo,
.sl--zabaleny .sl-pata{ display: none; }
.sl--zabaleny .sl-hlava{ border-bottom: none; height: 100%; }
.sl--zabaleny .sl-prepnout{
  writing-mode: vertical-rl;
  align-items: center;
  justify-content: flex-start;
  gap: .6rem;
  padding: .7rem .5rem;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce){
  .sl{ transition: none; }
}

.sl-telo{
  flex: 1;
  padding: .5rem;
  display: grid;
  gap: .4rem;
  align-content: start;
  transition: background var(--prechod);
}
.sl-telo--cil{ background: var(--zlata-jemna); }

.sl-pata{
  padding: .5rem .7rem;
  border-top: 1px solid var(--linka);
  color: var(--inkoust-tise);
  text-align: right;
}

/* Dlaždice případu */
.dl{
  display: grid;
  gap: .2rem;
  background: var(--papir);
  border: 1px solid var(--linka-silna);
  border-radius: var(--radius);
  padding: .5rem .6rem;
  text-decoration: none;
  color: inherit;
  cursor: grab;
  transition: border-color var(--prechod), transform var(--prechod);
}
.dl:hover{ border-color: var(--zlata); }
.dl:active{ cursor: grabbing; }
.dl--taha{ opacity: .4; transform: rotate(1.5deg); }

.dl-hlava{ display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.dl-cislo{ color: var(--inkoust-slabe); }
.dl-jmeno{
  font-size: .875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.dl-radek{ display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.dl-datum{ color: var(--inkoust-slabe); }
.dl-zdroj{ font-size: .75rem; color: var(--inkoust-slabe); font-style: italic; }

/* Tečka stáří: na dlaždici není místo na linku ze seznamu, ale informaci
   „tenhle případ stojí“ ztratit nechceme. */
.tecka{
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--linka-silna);
  flex: none;
  align-self: center;
}
.tecka--pozor{ background: var(--zlata); }
.tecka--stoji{ background: var(--varovna); }
.tecka--hotovo{ background: var(--hotova); }

/* --------------------------------------------------------------------------
   9) Karta případu
   -------------------------------------------------------------------------- */
.karta{
  border: 1px solid var(--linka-silna);
  border-radius: 12px;
  background: var(--papir);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.udaje{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .9rem 1.25rem;
  margin: 0;
}
.udaje dt{ font-size: .75rem; color: var(--inkoust-slabe); }
.udaje dd{ margin: .1rem 0 0; font-size: .9375rem; }

/* Vlastní slova klienta. Odsazená linkou, ne rámečkem — je to citace,
   ne další pole formuláře. */
.od-klienta{
  margin-top: 1.1rem;
  padding-left: .9rem;
  border-left: 2px solid var(--zlata);
}
.od-klienta-popis{
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--inkoust-slabe);
  margin: 0 0 .2rem;
}

.krok{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.krok select{
  font: inherit;
  font-size: .875rem;
  color: var(--inkoust);
  background: var(--papir);
  border: 1px solid var(--linka-silna);
  border-radius: var(--radius);
  padding: .4rem .5rem;
}

.zaznam{
  border-bottom: 1px solid var(--linka);
  padding: .7rem 0;
}
.zaznam:last-child{ border-bottom: none; }
.zaznam-hlava{
  display: flex;
  gap: .5rem;
  align-items: baseline;
  margin-bottom: .15rem;
}
.zaznam-kdo{ font-size: .8125rem; font-weight: 500; }
.zaznam-text{ margin: 0; white-space: pre-wrap; font-size: .9375rem; }

.osa{ list-style: none; margin: 0; padding: 0; }
.osa li{
  display: flex;
  gap: .6rem;
  align-items: baseline;
  padding: .3rem 0;
  font-size: .875rem;
  color: var(--inkoust-tise);
}

/* --------------------------------------------------------------------------
   9a) Záložky na kartě případu
   -------------------------------------------------------------------------- */
.zalozky{
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--linka-silna);
  margin-bottom: 1.25rem;
}
.zal{
  font: inherit;
  font-size: .875rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--inkoust-tise);
  padding: .45rem .8rem;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--prechod), border-color var(--prechod);
}
.zal:hover{ color: var(--inkoust); }
.zal[aria-selected="true"]{
  color: var(--inkoust);
  border-bottom-color: var(--zlata);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   9d) Formulář žádosti
   Dvanáctisloupcová mřížka: pole si šířku určují samy podle toho, kolik
   znaků se do nich reálně píše. PSČ nemá být stejně široké jako ulice.
   -------------------------------------------------------------------------- */
.zad{
  border: 1px solid var(--linka-silna);
  border-radius: 12px;
  margin-bottom: .75rem;
  background: var(--papir);
  overflow: hidden;
}
.zad-hlava{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .75rem;
  background: var(--papir-vedle);
  border-bottom: 1px solid var(--linka);
}
.zad--zavreny .zad-hlava{ border-bottom: none; }
.zad--zavreny .zad-telo{ display: none; }

.zad-prepnout{
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.zad-sipka{ color: var(--inkoust-slabe); font-size: .75rem; }
.zad-jmeno{ font-weight: 500; }
.zad-poradi, .zad-vek, .zad-role{ font-size: .75rem; color: var(--inkoust-slabe); }
.zad-role{ white-space: nowrap; }

.zad-telo{ padding: 1rem .75rem .75rem; display: grid; gap: 1rem; }

.fb{
  border: none;
  border-top: 1px solid var(--linka);
  margin: 0;
  padding: .75rem 0 0;
}
.fb:first-child{ border-top: none; padding-top: 0; }
.fb legend{
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--inkoust-slabe);
  padding: 0;
}
.fb-podnadpis{
  font-size: .75rem;
  color: var(--inkoust-tise);
  margin: .9rem 0 .35rem;
}
.fb-tise{ color: var(--inkoust-slabe); font-size: .6875rem; }
.fb-pata{ display: flex; gap: .4rem; margin-top: .6rem; }

.fm{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .5rem .6rem;
}
.fp{ display: block; min-width: 0; }
.fp-popis{
  display: block;
  font-size: .6875rem;
  color: var(--inkoust-slabe);
  margin-bottom: .15rem;
}
.fp input, .fp select{
  width: 100%;
  font: inherit;
  font-size: .875rem;
  color: var(--inkoust);
  background: var(--papir);
  border: 1px solid var(--linka-silna);
  border-radius: var(--radius);
  padding: .35rem .45rem;
  min-width: 0;
}
.fp input:hover, .fp select:hover{ border-color: var(--inkoust-slabe); }

.fpr-skupina{ display: grid; gap: .35rem; margin-top: .5rem; }
.fpr{ display: flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; }

.fr{
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: .6rem;
  margin-top: .5rem;
}

@media (max-width: 52rem){
  .fm{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fp{ grid-column: span 6 !important; }
  .zalozky{ overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   9b) Dokumenty
   -------------------------------------------------------------------------- */
.dsk{ margin-bottom: 1.25rem; }
.dsk:last-child{ margin-bottom: 0; }
.dsk-hlava{
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--linka-silna);
  padding-bottom: .3rem;
  margin-bottom: .5rem;
}
.dsk-nazev{ font-size: .875rem; font-weight: 500; }
.dsk-pocet{ color: var(--inkoust-slabe); margin-right: auto; }

.pz{
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: .5rem .6rem;
  margin-bottom: .35rem;
}
/* Chybějící dokument je jediná věc na téhle obrazovce, která si říká
   o pozornost — proto zlatá, stejně jako nepřevzatý lead. */
.pz--ceka{ border-color: var(--zlata); background: var(--zlata-jemna); }
.pz--zamitnuto{ border-color: var(--varovna); }

.pz-hlava{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pz-nazev{ font-size: .875rem; flex: 1; min-width: 12rem; }
.pz-stav{ font-size: .75rem; color: var(--inkoust-tise); }
.pz--ceka .pz-stav{ color: var(--zlata-text); }
.pz-nahrat{ cursor: pointer; }

.zadatel, .citlivy{
  font-size: .6875rem;
  border: 1px solid var(--linka-silna);
  border-radius: 4px;
  padding: 0 .3rem;
  margin-left: .3rem;
  color: var(--inkoust-tise);
  white-space: nowrap;
}
.citlivy{ border-color: var(--varovna); color: var(--varovna-text); }

.soubory{ list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .2rem; }
.soubor{ display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.soubor-nazev{
  font: inherit;
  font-size: .8125rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--zlata-text);
  text-decoration: underline;
  cursor: pointer;
}
.soubor-meta{ color: var(--inkoust-slabe); margin-right: auto; }

/* Okno výběru dokumentů */
.jpmodal{
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(28, 27, 24, .45);
  display: grid;
  place-items: center;
  padding: 1rem;
}
.jpmodal-panel{
  width: min(100%, 40rem);
  max-height: min(85dvh, 44rem);
  display: flex;
  flex-direction: column;
  background: var(--papir);
  border: 1px solid var(--linka-silna);
  border-radius: 12px;
  padding: 1rem 1.15rem;
}
.jpmodal-hlava{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.jpmodal-pata{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px solid var(--linka);
  padding-top: .75rem;
  margin-top: .75rem;
}
.jpmodal-pata .cisla{ color: var(--inkoust-tise); }

.dok-seznam{ overflow-y: auto; border-top: 1px solid var(--linka); }
.dok-radek{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .2rem;
  border-bottom: 1px solid var(--linka);
  font-size: .875rem;
}
.dok-radek:hover{ background: var(--papir-zvyraz); }
.dok-nazev{ flex: 1; min-width: 0; }
.dok-zadatele{ display: flex; gap: .4rem; }
.zadatel-volba{
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .75rem;
  color: var(--inkoust-tise);
  border: 1px solid var(--linka-silna);
  border-radius: 4px;
  padding: .1rem .35rem;
  cursor: pointer;
}
.zadatel-volba:hover{ border-color: var(--zlata); }

/* --------------------------------------------------------------------------
   9e) Modelace: varianty vedle sebe
   Klient u stolu se nedívá do tabulky, ale porovnává dvě tři možnosti.
   Karty vedle sebe jsou přesně to — proto vodorovný posun, ne řádky.
   -------------------------------------------------------------------------- */
.var-rada{
  display: grid;
  grid-auto-flow: column;
  /* 25rem je nejmenší šířka, do které se ve třech sloupcích vejde
     „10 305 515 Kč“ — osmiciferná částka u položky „Celkem zaplatí“.
     Změřeno, ne odhadnuto: při 23rem chybělo 6 px a poslední číslice
     zmizela pod tři tečky. Částka, u které nejde přečíst konec, je k ničemu. */
  grid-auto-columns: minmax(25rem, 28rem);
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .75rem;
  margin-bottom: 1.25rem;
  scroll-snap-type: x proximity;
}
.var-rada::-webkit-scrollbar{ height: 10px; }
.var-rada::-webkit-scrollbar-thumb{ background: var(--linka-silna); border-radius: 5px; }

.var{
  background: var(--papir);
  border: 1px solid var(--linka-silna);
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
}
.var-hlava{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .8rem;
  background: var(--papir-vedle);
  border-bottom: 1px solid var(--linka);
}
.var-nazev{ font-size: .9375rem; font-weight: 500; }

.var-souhrn, .var-telo{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem .8rem;
  padding: .8rem;
}
.var-telo{ border-top: 1px solid var(--linka); }

/* Pás s názvem banky odděluje souhrn od parametrů produktu — stejná role
   jako modrý pruh v H:Platformě, jen v našich barvách. */
.var-pas{
  background: var(--zlata);
  color: #1C1B18;
  font-size: .8125rem;
  font-weight: 500;
  text-align: center;
  padding: .35rem .8rem;
}

.vu{ display: grid; gap: .1rem; min-width: 0; }
.vu-popis{ font-size: .6875rem; color: var(--inkoust-slabe); }
.vu-hodnota{
  font-size: .9375rem;
  border-bottom: 1px dotted var(--linka-silna);
  padding-bottom: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Barva jen u DTI a DSTI — u nich rozhoduje, jestli klient projde. */
.vu--dobre .vu-hodnota{ color: var(--hotova); }
.vu--hranice .vu-hodnota{ color: var(--zlata-text); }
.vu--zle .vu-hodnota{ color: var(--varovna-text); }

@media (max-width: 52rem){
  .var-rada{ grid-auto-columns: minmax(16rem, 90vw); }
  .var-souhrn, .var-telo{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   9c) Sazebník
   Editace přímo v tabulce. Sazby se mění po týdnech a otevírat kvůli změně
   jednoho čísla dialog je zdržení, které se nasčítá.
   -------------------------------------------------------------------------- */
.sz{ width: 100%; border-collapse: collapse; }
.sz th{
  text-align: left;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--inkoust-slabe);
  padding: 0 .3rem .35rem;
  border-bottom: 1px solid var(--linka-silna);
}
.sz td{ padding: .25rem .3rem; border-bottom: 1px solid var(--linka); }
.sz-stred{ text-align: center; }
.sz-akce{ white-space: nowrap; text-align: right; }

.sz input[type="text"], .sz input[type="number"], .sz input[type="date"], .sz select{
  width: 100%;
  font: inherit;
  font-size: .8125rem;
  color: var(--inkoust);
  background: var(--papir);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: .25rem .35rem;
}
/* Rámeček až při najetí: klidná tabulka, dokud se v ní nezačne pracovat. */
.sz input:hover, .sz select:hover{ border-color: var(--linka-silna); }
.sz input:focus, .sz select:focus{ border-color: var(--zlata); }
.sz input[type="number"]{ text-align: right; }

/* Vypnutá sazba se do výpočtu nedostane — ať je to vidět na první pohled. */
.sz--vypnuta td{ opacity: .5; }

@media (max-width: 52rem){
  .sz{ font-size: .75rem; }
  .sz th:nth-child(5), .sz td:nth-child(5){ display: none; }
}

/* --------------------------------------------------------------------------
   9f) Nastavení
   -------------------------------------------------------------------------- */
.ns-fotka{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ini--profil{
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.375rem;
  font-weight: 300;
}
.ns-fotka-akce{ display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.ns-motivy{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .6rem;
}
.ns-motiv{
  display: grid;
  gap: .15rem;
  border: 1px solid var(--linka-silna);
  border-radius: 12px;
  padding: .7rem .8rem;
  cursor: pointer;
  transition: border-color var(--prechod), background var(--prechod);
}
.ns-motiv:hover{ border-color: var(--inkoust-slabe); }
.ns-motiv--vybrany{ border-color: var(--zlata); background: var(--zlata-jemna); }
.ns-motiv input{ position: absolute; opacity: 0; pointer-events: none; }
.ns-motiv-nazev{ font-size: .9375rem; font-weight: 500; }
.ns-motiv-popis{ font-size: .75rem; color: var(--inkoust-tise); }

/* Malá ukázka barev, aby volba nebyla jen slovo. Barvy jsou tu napsané
   napevno schválně: ukázka tmavého motivu musí být tmavá i ve světlém. */
.ns-motiv-ukazka{
  height: 1.5rem;
  border-radius: 6px;
  margin-top: .35rem;
  border: 1px solid var(--linka-silna);
}
.ns-motiv-ukazka--svetly{ background: linear-gradient(90deg, #FBFAF8 60%, #A87F2E 60%); }
.ns-motiv-ukazka--tmavy{ background: linear-gradient(90deg, #1C1B18 60%, #C9A24B 60%); }
.ns-motiv-ukazka--system{
  background: linear-gradient(90deg, #FBFAF8 45%, #1C1B18 45%, #1C1B18 88%, #C9A24B 88%);
}

/* --------------------------------------------------------------------------
   10) Stavy: prázdno, načítání, chyba, oznámení
   -------------------------------------------------------------------------- */
.prazdno{
  color: var(--inkoust-tise);
  font-size: .9375rem;
  padding: 1.25rem 0;
}
.hlaska{ font-size: .8125rem; margin: 0 0 .75rem; }
.hlaska--chyba{ color: var(--varovna-text); }

.nacita{
  color: var(--inkoust-slabe);
  font-size: .875rem;
  padding: 1.5rem 0;
}

.oznameni{
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(.5rem);
  background: var(--inkoust);
  color: var(--papir);
  font-size: .875rem;
  padding: .5rem .9rem;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--prechod), transform var(--prechod);
}
.oznameni[data-vidno="ano"]{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* --------------------------------------------------------------------------
   11) Menší obrazovky
   Panel se překlopí nahoru do řádku. Poradce sedí u počítače, ale u klienta
   otevře systém na telefonu – a tam nesmí zbýt 176 px na navigaci.
   -------------------------------------------------------------------------- */
@media (max-width: 52rem){
  /* `minmax(0, 1fr)`, ne `1fr`. Sloupec gridu se totiž ve výchozím stavu
     nesmí zmenšit pod obsah, a kanban má min-content přes 1000 px — celá
     stránka se kvůli tomu roztáhla a rolovala do stran i s panelem.
     Změřeno: dokument 1088 px při okně 371 px. */
  .rozvrzeni{ grid-template-columns: minmax(0, 1fr); }
  .rail{
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    padding: .6rem .75rem;
    border-right: none;
    border-bottom: 1px solid var(--linka);
  }
  .rail .znacka{ padding: 0 .75rem 0 .25rem; }
  .rail-skupina{ display: none; }
  .rail-seznam{ display: flex; }
  .rail-odkaz{ border-left: none; border-bottom: 2px solid transparent; padding: .3rem .6rem; }
  .rail-odkaz[aria-current="page"]{ border-left: none; border-bottom-color: var(--zlata); }
  .rail-pata{ margin: 0 0 0 auto; display: flex; padding: 0; }
  .rail-kdo{ display: none; }
  .obsah{ padding: 1.25rem 1rem 3rem; }
  .pripad{ grid-template-columns: minmax(0, 1fr) 4.5rem; }
  .pripad-stav, .pripad-cislo{ display: none; }
  .kachle-rada{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachle-cislo{ font-size: 1.375rem; }
}

/* --------------------------------------------------------------------------
   Telefon (do 34rem ≈ 544 px)

   Dvě pravidla, která rozhodují o tom, jestli se to dá v ruce použít:

   1) Na co se ťuká, musí mít aspoň 44 px na výšku. Prst není kurzor;
      pod 44 px se trefuješ napodruhé. Měřeno bylo 28–34 px.
   2) Pole musí mít písmo aspoň 16 px. Safari na iPhonu jinak při kliknutí
      do pole přiblíží celou stránku a už ji nevrátí zpátky — vypadá to
      jako chyba aplikace, přitom je to obrana proti drobnému písmu.
   -------------------------------------------------------------------------- */
@media (max-width: 34rem){
  /* `!important` tu není lenost. Pole mají skoro všude `font: inherit`
     u konkrétnějšího selektoru (`.pole input`, `.sz input`, `.fp input`),
     což je 15px z `body` — a holé `input` to nepřebije. Vypisovat všechny
     ty selektory znamená, že na příští zapomenu a Safari zase přiblíží. */
  input, select, textarea{ font-size: 16px !important; }
  /* Výška se řídí stejným pravidlem: prst chce 44 px bez ohledu na to,
     ve které tabulce pole zrovna sedí. */
  input:not([type=checkbox]):not([type=radio]),
  select, textarea{ min-height: 44px; }
  /* Zaškrtávátko má vlastní výchozí velikost 13 px, kterou `min-height`
     neroztáhne. Ťukat na 13 px se nedá, tak ho zvětšíme rovnou. */
  input[type=checkbox], input[type=radio]{ width: 22px; height: 22px; }
  .fpr, .ns-prepinac{ min-height: 44px; align-items: center; }

  .rail{
    gap: .15rem;
    padding: .5rem .6rem;
    position: sticky;
    top: 0;
    z-index: 30;
  }
  /* Odkazy se vejdou na jeden řádek a rolují do stran — zalomené do dvou
     řad ukrajovaly půl obrazovky ještě než začal obsah. */
  .rail-seznam{
    flex: 1;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    gap: .1rem;
  }
  .rail-seznam::-webkit-scrollbar{ display: none; }
  .rail-odkaz{
    min-height: 44px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: .3rem .7rem;
  }
  .rail-ja{ min-height: 44px; }
  .preskocit{ min-height: 44px; }

  .obsah{ padding: 1rem .75rem 4rem; }
  .hlavicka{ flex-wrap: wrap; gap: .35rem; }
  h1{ font-size: 1.375rem; }

  /* Řádky seznamů: prst potřebuje výšku, ne hustotu. */
  .pripad, .lead, .kl{ min-height: 44px; }

  /* Formulář: dvě pole vedle sebe jsou na 370 px ještě moc. */
  .fm{ grid-template-columns: minmax(0, 1fr); }
  .fp{ grid-column: span 1 !important; }
  .fb-hlava{ min-height: 44px; align-items: center; }
  .fb-souhrn{ margin-left: 0; }

  /* Kanban: užší sloupce, ať je vidět i kus sousedního — bez toho člověk
     neví, kam kartu táhne. Zarovnání na sloupec drží rolování v kolejích. */
  .kanban{ scroll-snap-type: x mandatory; gap: .5rem; }
  .sl{ flex-basis: 12.5rem; }
  .sl--zabaleny{ flex-basis: 2.5rem; }
  .sl-prepnout{ min-height: 44px; }

  /* Sazebník: pole v tabulce byla 28 px vysoká. Tabulka se tím prodlouží,
     ale sazbu opravíš napoprvé. */
  .sz th, .sz td{ padding: .35rem .25rem; }

  .zalozky{ gap: 0; }
  .zal{ min-height: 44px; padding: .5rem .7rem; }

  /* I „malá“ tlačítka mají na telefonu plnou výšku. Hustota je přednost
     pro myš; prstem se do 38 px netrefíš napoprvé a mačkáš to dvakrát. */
  .tl, .tl--male{ min-height: 44px; }

  .pozn-sloupce{ gap: 1rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Sbalitelné sekce formuláře
   `details` má výchozí trojúhelníček, který v každém prohlížeči vypadá jinak.
   Zhasneme ho a nakreslíme vlastní, aby sekce vypadaly stejně jako žadatelé.
   -------------------------------------------------------------------------- */
details.fb > summary{ list-style: none; }
details.fb > summary::-webkit-details-marker{ display: none; }

.fb-hlava{
  display: flex;
  align-items: baseline;
  gap: .5rem;
  cursor: pointer;
  padding: .15rem 0 .3rem;
  border-radius: var(--radius);
}
.fb-hlava::before{
  content: '▸';
  font-size: .625rem;
  color: var(--inkoust-slabe);
  transition: transform var(--prechod);
  transform-origin: 45% 55%;
}
details.fb[open] > .fb-hlava::before{ transform: rotate(90deg); }
.fb-hlava:hover{ color: var(--zlata-text); }
.fb-hlava:focus-visible{
  outline: 2px solid var(--zlata);
  outline-offset: 2px;
}
.fb-nazev{
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--inkoust-slabe);
}
/* Souhrn je to jediné, co ze zavřené sekce zbude — smí být čitelnější
   než její název. */
.fb-souhrn{
  font-size: .75rem;
  color: var(--inkoust-tise);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce){
  .fb-hlava::before{ transition: none; }
}

/* --------------------------------------------------------------------------
   Našeptávač adres
   -------------------------------------------------------------------------- */
.adr{ position: relative; margin: .35rem 0 .5rem; }
.adr-pole{ max-width: 30rem; }

.adr-navrhy{
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  max-width: 30rem;
  max-height: 16rem;
  overflow-y: auto;
  margin: .15rem 0 0;
  padding: .25rem;
  list-style: none;
  background: var(--papir);
  border: 1px solid var(--linka-silna);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgb(0 0 0 / .12);
}
.adr-navrh{
  padding: .4rem .5rem;
  border-radius: 5px;
  font-size: .875rem;
  cursor: pointer;
}
.adr-navrh--vybrany,
.adr-navrh:hover{ background: var(--zlata-jemna); color: var(--zlata-text); }
.adr-navrh--prazdny{
  color: var(--inkoust-slabe);
  cursor: default;
  font-size: .8125rem;
}
.adr-navrh--prazdny:hover{ background: none; color: var(--inkoust-slabe); }

/* --------------------------------------------------------------------------
   Poznámky ve dvou proudech
   Pod 60rem se sloupce skládají pod sebe — vedle sebe by z nich zbyly dva
   úzké pruhy, ve kterých se každá věta láme na pět řádků.
   -------------------------------------------------------------------------- */
.pozn-sloupce{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
@media (max-width: 60rem){
  .pozn-sloupce{ grid-template-columns: 1fr; gap: 1.5rem; }
}
.pozn-sloupec + .pozn-sloupec{ border-left: 1px solid var(--linka); padding-left: 1.25rem; }
@media (max-width: 60rem){
  .pozn-sloupec + .pozn-sloupec{
    border-left: none;
    border-top: 1px solid var(--linka);
    padding-left: 0;
    padding-top: 1rem;
  }
}
.pozn-nadpis{
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--inkoust-slabe);
  font-weight: 500;
  margin: 0 0 .35rem;
}
.pozn-pocet{
  font-variant-numeric: tabular-nums;
  background: var(--papir-vedle);
  border-radius: 999px;
  padding: .05rem .4rem;
  font-size: .6875rem;
}
.radek-tl{ display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.napoveda{ font-size: .75rem; color: var(--inkoust-slabe); }

/* Karta tažená prstem. Klon letí nad obsahem, původní zůstane na místě
   ztlumený — bez toho by nebylo poznat, odkud se táhne. */
.dl--klon{
  box-shadow: 0 10px 24px rgb(0 0 0 / .22);
  cursor: grabbing;
}