/* Předci – vzhled.
   Inkoust na archivním papíře; jediné syté barvy jsou barvy osmi rodů. */
:root {
  --papir: #eceee9;
  --list: #f8f8f5;
  --inkoust: #1c2536;
  --seda: #586173;
  --linka: #c9cec6;
  --odkaz: #1f5560;
  --odkaz-hover: #0f3a42;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --text: 42rem;
  --siroke: 74rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papir);
  color: var(--inkoust);
  font: 400 1.0625rem/1.65 var(--serif);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--odkaz); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--odkaz-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--odkaz); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--serif); line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; font-weight: 600; margin-top: 2.2em; }
h3 { font-size: 1.15rem; font-weight: 600; margin-top: 1.6em; }
p { margin: 0 0 1em; }
.lead { font-size: 1.25rem; line-height: 1.55; color: var(--inkoust); max-width: 38rem; }
.muted { color: var(--seda); }
.small { font-family: var(--sans); font-size: 0.9rem; line-height: 1.5; }

/* --- záhlaví ----------------------------------------------------------- */
.hlavicka {
  border-bottom: 1px solid var(--linka);
  background: var(--list);
}
.hlavicka .vnitrek {
  max-width: var(--siroke); margin: 0 auto; padding: 0.7rem 1.25rem;
  display: flex; align-items: baseline; gap: 0.6rem 1.6rem; flex-wrap: wrap;
}
@media (max-width: 1420px) { .znak span { display: none; } }
.znak { text-decoration: none; color: var(--inkoust); display: flex; align-items: baseline; gap: 0.6rem; }
.znak b { font: 600 1.6rem/1 var(--serif); letter-spacing: -0.01em; }
.znak span { font: 400 0.95rem/1 var(--sans); color: var(--seda); }
.menu { display: flex; gap: 0.4rem 1rem; flex-wrap: wrap; font-family: var(--sans); font-size: 0.98rem; }
.menu a { color: var(--inkoust); text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--inkoust); }
.ucet { margin-left: auto; font-family: var(--sans); font-size: 0.9rem; color: var(--seda); display: flex; gap: 0.9rem; align-items: baseline; }
.ucet form { display: inline; }
.ucet button { font: inherit; color: var(--odkaz); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; }

main { max-width: var(--siroke); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.text { max-width: var(--text); }
.paticka { border-top: 1px solid var(--linka); padding: 1.5rem 1.25rem 2.5rem; font-family: var(--sans); font-size: 0.88rem; color: var(--seda); }
.paticka div { max-width: var(--siroke); margin: 0 auto; }

/* --- úvod: sbíhání rodů ------------------------------------------------ */
.uvod { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }
.uvod h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); max-width: 20ch; }
.graf { overflow-x: auto; margin: 0 -1.25rem 2.5rem; padding: 0 1.25rem; }
.posun { display: none; margin-top: -2rem; }
@media (max-width: 760px) { .posun { display: block; } .sbihani { min-width: 720px; } }
.sbihani { min-width: 760px; width: 100%; height: auto; display: block; }
.sbihani .grid { stroke: var(--linka); stroke-width: 1; }
.sbihani .tick { font: 400 13px var(--sans); fill: var(--seda); text-anchor: middle; }
.sbihani path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sbihani path.hit { stroke: transparent; stroke-width: 18; }
.sbihani a.rod:hover path:not(.hit), .sbihani a.rod:focus-visible path:not(.hit) { stroke-width: 8; }
.sbihani a.rod:hover .rodname { text-decoration: underline; }
.sbihani .rodname { font: 600 15px var(--serif); fill: var(--inkoust); }
.sbihani .rodyear { font: 400 13px var(--sans); fill: var(--seda); }
.sbihani .merge { font: 400 13px var(--sans); fill: var(--seda); }
.sbihani .finale { font: 600 19px var(--serif); fill: var(--inkoust); }
.sbihani .sidelabel { font: 400 13px var(--sans); fill: var(--seda); text-anchor: end; }

.strany { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 2.5rem 3rem; }
.strana h2 { margin-top: 0; font-size: 1.3rem; }
.rody { list-style: none; margin: 0; padding: 0; }
.rody li { border-top: 1px solid var(--linka); }
.rody a { display: grid; grid-template-columns: 0.5rem 1fr; gap: 0 1rem; padding: 1rem 0; text-decoration: none; color: var(--inkoust); }
.rody a:hover h3 { text-decoration: underline; }
.rody .barva { grid-row: span 3; border-radius: 3px; }
.rody h3 { margin: 0; font-size: 1.2rem; }
.rody p { margin: 0.2rem 0 0; font-size: 0.98rem; color: var(--seda); }
.rody .cisla { font-family: var(--sans); font-size: 0.88rem; color: var(--seda); margin-top: 0.35rem; }

.pribeh-upoutavka { margin: 3.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 2rem 3rem; border-top: 2px solid var(--inkoust); padding-top: 1.5rem; }
.pribeh-upoutavka h2 { margin-top: 0; }
.pribeh-upoutavka .lead { font-size: 1.15rem; }

.cisla-radek { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-family: var(--sans); color: var(--seda); margin: 0 0 2rem; }
.cisla-radek b { color: var(--inkoust); font-weight: 600; }

/* --- jistota údaje ------------------------------------------------------ */
.jistota { display: inline-flex; align-items: center; gap: 0.4em; font: 400 0.85rem/1.3 var(--sans); color: var(--seda); white-space: nowrap; }
.jistota::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; border: 1.5px solid var(--inkoust); }
.j-doc::before { background: var(--inkoust); }
.j-prob::before { background: linear-gradient(90deg, var(--inkoust) 50%, transparent 50%); }
.j-fam::before { border-style: solid; background: transparent; box-shadow: inset 0 0 0 2px var(--list), inset 0 0 0 4px var(--inkoust); }
.j-mh::before, .j-unk::before { border-style: dashed; }

/* --- osoba -------------------------------------------------------------- */
.zarazeni { font-family: var(--sans); font-size: 0.95rem; color: var(--seda); display: flex; gap: 0.5rem 1.2rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.6rem; }
.rodstitek { display: inline-flex; align-items: center; gap: 0.45em; color: var(--inkoust); text-decoration: none; }
.rodstitek::before { content: ""; width: 0.8em; height: 0.8em; border-radius: 2px; background: var(--c); }
.osoba-hlava { margin-bottom: 2rem; }
.osoba-hlava .roky { font: 400 1.35rem var(--serif); color: var(--seda); margin: -0.2rem 0 0.6rem; }
.dvesloupce { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .dvesloupce { grid-template-columns: 1fr; gap: 2rem; } }
.fakta { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem 1rem; margin: 0 0 1.5rem; }
.fakta dt { font: 400 0.92rem/1.7 var(--sans); color: var(--seda); }
.fakta dd { margin: 0; }
.poznamka { border-left: 3px solid var(--linka); padding: 0.1rem 0 0.1rem 1rem; color: var(--inkoust); }
.poznamka h2 { font-size: 1.05rem; margin: 0 0 0.4rem; font-family: var(--sans); font-weight: 600; }

.panel { background: var(--list); border: 1px solid var(--linka); border-radius: 4px; padding: 1.2rem 1.3rem; }
.panel h2 { font-size: 1.1rem; margin: 1.4rem 0 0.5rem; }
.panel h2:first-child { margin-top: 0; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { padding: 0.25rem 0; line-height: 1.4; }
.panel .roky { color: var(--seda); font-family: var(--sans); font-size: 0.88rem; white-space: nowrap; }
.panel .ja { font-weight: 600; }
.panel .vic { font-family: var(--sans); font-size: 0.92rem; display: inline-block; margin-top: 0.4rem; }
.znacka { font-family: var(--sans); font-size: 0.78rem; color: var(--seda); border: 1px solid var(--linka); border-radius: 3px; padding: 0 0.35em; margin-left: 0.3em; white-space: nowrap; }

.stromek { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; font-size: 0.92rem; line-height: 1.3; }
.stromek > * { border: 1px solid var(--linka); border-radius: 3px; padding: 0.35rem 0.5rem; background: var(--papir); min-height: 2.6rem; }
.stromek .r4 { grid-column: span 1; }
.stromek .prazdne { color: var(--seda); font-style: italic; }
.stromek-ctyri { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; margin-bottom: 0.4rem; font-size: 0.82rem; line-height: 1.25; }
.stromek-ctyri > * { border: 1px solid var(--linka); border-radius: 3px; padding: 0.3rem 0.35rem; background: var(--papir); min-height: 2.4rem; }

/* zápisy jako kartičky */
.zapisy { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.zapisy a { display: block; text-decoration: none; color: var(--inkoust); }
.zapisy .nahled { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--linka); border-radius: 3px; background: #ddd; }
.zapisy .nahled img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.zapisy .druh { font-family: var(--sans); font-size: 0.85rem; color: var(--seda); margin-top: 0.45rem; }
.zapisy .nazev { line-height: 1.35; }
.zapisy a:hover .nazev { text-decoration: underline; }

/* --- rodinný list -------------------------------------------------------- */
.osa { margin: 2rem 0 1rem; font-family: var(--sans); }
.osa-radek { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 1rem; align-items: center; min-height: 2.3rem; }
.osa-radek .jmeno { font-family: var(--serif); line-height: 1.25; }
.osa-radek .jmeno small { display: block; font: 400 0.82rem var(--sans); color: var(--seda); }
.osa-radek.predek .jmeno a { font-weight: 600; }
.stopa { position: relative; height: 0.85rem; }
.stopa::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px dotted var(--linka); }
.pruh { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--c); }
.osa-radek.predek .pruh { box-shadow: 0 0 0 2px var(--inkoust); }
.pruh.otevreny { background: linear-gradient(90deg, var(--c) 35%, transparent); border-radius: 99px 0 0 99px; }
.pruh.bez-narozeni { background: linear-gradient(90deg, transparent, var(--c) 65%); border-radius: 0 99px 99px 0; }
.osa-delic { border-top: 1px solid var(--linka); margin: 0.6rem 0; }
.osa-roky { position: relative; height: 1.4rem; margin-left: calc(min(15rem, max(9rem, 25%)) + 1rem); font-size: 0.78rem; color: var(--seda); }
.osa-roky span { position: absolute; transform: translateX(-50%); }
.osa-telo { position: relative; }
.svatba { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--inkoust); }
.svatba span { position: absolute; top: -1.4rem; left: 0.3rem; font-size: 0.78rem; white-space: nowrap; color: var(--inkoust); }
.legenda { font-family: var(--sans); font-size: 0.85rem; color: var(--seda); display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-bottom: 2rem; }
.legenda i { display: inline-block; width: 2rem; height: 0.6rem; border-radius: 99px; vertical-align: middle; margin-right: 0.4rem; background: var(--seda); }
.legenda i.o { background: linear-gradient(90deg, var(--seda) 35%, transparent); }
.legenda i.p { box-shadow: 0 0 0 2px var(--inkoust); background: var(--linka); }

.deti { list-style: none; padding: 0; margin: 0; }
.deti > li { border-top: 1px solid var(--linka); padding: 1rem 0; display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 1rem; }
@media (max-width: 640px) { .deti > li, .osa-radek { grid-template-columns: 1fr; gap: 0.2rem; } .osa-roky { margin-left: 0; } }
.deti h3 { margin: 0; font-size: 1.08rem; }
.deti .udaje { font-size: 0.98rem; }
.deti .udaje p { margin: 0 0 0.4rem; }

/* --- rod ------------------------------------------------------------------ */
.rod-hlava { border-left: 0.6rem solid var(--c); padding-left: 1.2rem; margin-bottom: 2.5rem; }
.generace { list-style: none; padding: 0; margin: 0; }
.generace > li { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; border-top: 1px solid var(--linka); padding: 0.8rem 0; }
.generace .g { font-family: var(--sans); font-size: 0.9rem; color: var(--seda); }
.generace ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 2rem; }
@media (max-width: 640px) { .generace > li { grid-template-columns: 1fr; } }

/* --- seznam osob ------------------------------------------------------------ */
.filtr { font: 400 1rem var(--sans); padding: 0.6rem 0.8rem; width: min(100%, 26rem); border: 1px solid var(--linka); border-radius: 4px; background: var(--list); color: var(--inkoust); margin-bottom: 1.5rem; }
.seznam { columns: 3 17rem; column-gap: 2.5rem; list-style: none; padding: 0; margin: 0 0 2rem; }
.seznam li { break-inside: avoid; padding: 0.15rem 0; }
.seznam .roky { color: var(--seda); font-family: var(--sans); font-size: 0.85rem; }

/* --- zápis z matriky ------------------------------------------------------ */
.zapis { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .zapis { grid-template-columns: 1fr; } }
.sken { position: relative; overflow: hidden; border: 1px solid var(--linka); background: #ddd; }
.sken .ramecek { position: absolute; border: 3px solid #c0392b; border-radius: 2px; box-shadow: 0 0 0 9999px rgba(28, 37, 54, 0.18); pointer-events: none; }
.prepis { white-space: pre-wrap; font-size: 0.98rem; line-height: 1.6; }
.prepis.orig { font-style: italic; color: #2c3445; }
.shrnuti { max-width: var(--text); font-size: 1.12rem; line-height: 1.6; }
.pramen { font-family: var(--sans); font-size: 0.92rem; color: var(--seda); }

/* --- příběhy, deník, otázky ---------------------------------------------- */
.clanek { max-width: var(--text); }
.clanek h2 { font-size: 1.45rem; }
.clanek p, .clanek li { font-size: 1.1rem; line-height: 1.75; }
.vypis { list-style: none; padding: 0; margin: 0; }
.vypis li { border-top: 1px solid var(--linka); padding: 1.1rem 0; }
.vypis h2 { margin: 0 0 0.3rem; font-size: 1.3rem; }
.tabulka { overflow-x: auto; }
.tabulka table { border-collapse: collapse; font: 400 0.88rem/1.45 var(--sans); min-width: 60rem; }
.tabulka th, .tabulka td { text-align: left; vertical-align: top; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--linka); }
.tabulka th { position: sticky; top: 0; background: var(--papir); font-weight: 600; }
.otazky { list-style: none; padding: 0; margin: 0; max-width: var(--text); }
.otazky li { border-top: 1px solid var(--linka); padding: 1rem 0; }
.otazky h3 { margin: 0 0 0.3rem; font-size: 1.08rem; }

/* --- přihlášení ------------------------------------------------------------ */
.prihlaseni { max-width: 25rem; margin: 3rem auto; }
.prihlaseni h1 { font-size: 2.6rem; margin-bottom: 0.3rem; }
.formular label { display: block; font-family: var(--sans); font-size: 0.95rem; margin: 1rem 0 0.3rem; }
.formular input[type=text], .formular input[type=password] { width: 100%; font: 400 1.05rem var(--sans); padding: 0.65rem 0.8rem; border: 1px solid var(--seda); border-radius: 4px; background: var(--list); color: var(--inkoust); }
.tlacitko { font: 600 1rem var(--sans); background: var(--inkoust); color: #fff; border: 0; border-radius: 4px; padding: 0.7rem 1.3rem; margin-top: 1.3rem; cursor: pointer; }
.tlacitko:hover { background: var(--odkaz-hover); }
.chyba { color: #9b2c1f; font-family: var(--sans); font-size: 0.95rem; }

@media (prefers-reduced-motion: no-preference) {
  .sbihani path:not(.hit) { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: kresba 2.4s cubic-bezier(.3,.1,.3,1) forwards; }
  .sbihani a.rod:nth-of-type(2n) path:not(.hit) { animation-delay: .12s; }
  @keyframes kresba { to { stroke-dashoffset: 0; } }
}
.clanek .lead { font-size: 1.3rem; line-height: 1.55; }

/* --- přepínač pohledů (podrobnosti / strom / vějíř) ------------------------ */
.strom-hlava { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 1rem; }
.strom-hlava h1 { margin-bottom: 0; }
.prepinac { display: inline-flex; border: 1px solid var(--inkoust); border-radius: 4px; overflow: hidden; font-family: var(--sans); font-size: 0.95rem; }
.prepinac a { padding: 0.45rem 0.95rem; text-decoration: none; color: var(--inkoust); background: var(--list); }
.prepinac a + a { border-left: 1px solid var(--inkoust); }
.prepinac a:hover { background: var(--papir); }
.prepinac a[aria-current="page"] { background: var(--inkoust); color: #fff; }
.napoveda { margin: 0 0 1rem; }
.cesta { margin: -0.3rem 0 1rem; color: var(--seda); }

/* --- strom kolem osoby ------------------------------------------------------ */
.strom-okno { overflow-x: auto; margin: 0 -1.25rem; padding: 0.5rem 1.25rem 1.5rem; }
.strom { position: relative; margin: 0 auto; }
.spoje { position: absolute; inset: 0; pointer-events: none; }
.spoje path { fill: none; stroke: var(--seda); stroke-width: 1.5; }
.spoje text { font: 600 12px var(--sans); fill: var(--seda); text-anchor: middle; }
.karta {
  position: absolute; width: var(--cw); height: var(--ch);
  display: flex; flex-direction: column; justify-content: center; gap: 0.1rem;
  padding: 0.35rem 0.6rem 0.35rem 0.85rem; overflow: hidden;
  background: var(--list); border: 1px solid var(--linka); border-left: 6px solid var(--c); border-radius: 4px;
  text-decoration: none; color: var(--inkoust); line-height: 1.2;
}
.karta:hover { border-color: var(--seda); border-left-color: var(--c); background: #fff; }
.karta .vztah { font: 400 0.76rem var(--sans); color: var(--seda); }
.karta .jm { font: 600 0.98rem/1.2 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.karta .ro { font: 400 0.8rem var(--sans); color: var(--seda); }
.karta.prima .jm { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 3px; text-underline-offset: 0.15em; }
.karta.role-sib:not(.prima), .karta.role-child:not(.prima) { background: var(--papir); }
.karta.role-focus { background: #fff; border: 2px solid var(--inkoust); border-left: 8px solid var(--c); box-shadow: 0 6px 18px rgba(28, 37, 54, 0.14); }
.karta.role-focus .jm { font-size: 1.05rem; }
.karta .dal { position: absolute; right: 0.4rem; font: 400 0.68rem var(--sans); color: var(--seda); }
.karta .dal.nahoru { top: 0.25rem; }
.karta .dal.nahoru::before { content: "▲ "; }
.karta .dal.dolu { bottom: 0.25rem; }
.karta .dal.dolu::before { content: "▼ "; }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-group(*) { animation-duration: 0.35s; }

/* --- vějíř ---------------------------------------------------------------------- */
.vejir-misto { position: relative; }
.vejir-karta { position: absolute; top: 0; right: 0; width: 17rem; box-shadow: 0 8px 24px rgba(28, 37, 54, 0.16); }
@media (max-width: 900px) { .vejir-karta { position: static; width: auto; margin-top: 1rem; } }
.lupa { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.lupa button { font: 400 0.92rem var(--sans); border: 1px solid var(--inkoust); background: var(--list); color: var(--inkoust); border-radius: 4px; padding: 0.3rem 0.8rem; cursor: pointer; }
.lupa button[aria-pressed="true"] { background: var(--inkoust); color: #fff; }
.vejir-obal { overflow-x: auto; }
.vejir { width: 100%; height: auto; display: block; margin: 0 auto; }
.vejir path { stroke: var(--papir); stroke-width: 1.2; }
.vejir .prazdne { fill: none; stroke: var(--linka); stroke-dasharray: 2 3; }
.vejir .vysec { cursor: pointer; outline: none; }
.vejir .vysec.j-prob path, .vejir .vysec.j-fam path { fill-opacity: 0.55; }
.vejir .vysec.j-mh path, .vejir .vysec.j-unk path { fill-opacity: 0.3; }
.vejir .vysec:hover path, .vejir .vysec:focus-visible path { stroke: var(--inkoust); stroke-width: 2; }
.vejir .vysec.vybrana path { stroke: var(--inkoust); stroke-width: 3; }
.vejir .pop { font-family: var(--sans); fill: var(--inkoust); pointer-events: none; }
.vejir .pop .roky { fill: #3b4456; }
.vejir .stred circle { fill: var(--list); stroke: var(--inkoust); stroke-width: 1.5; }
.vejir .stred text { text-anchor: middle; font-family: var(--serif); fill: var(--inkoust); }
.vejir .stred-jm { font-size: 17px; font-weight: 600; }
.vejir .stred-pr { font-size: 13px; }
.vejir .stred-roky { font: 400 11px var(--sans); fill: var(--seda); }
.vejir-karta h2 { margin: 0 0 0.2rem; }
.vejir-karta p { margin: 0 0 0.4rem; }
.vejir-karta .odkazy { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--sans); margin-top: 0.8rem; }
.legenda i.j { background: var(--seda); }
.legenda i.j.f { opacity: 0.55; }
.legenda i.j.e { background: none; border: 1px dashed var(--seda); }

/* --- tlačítka na stránce osoby --------------------------------------------------- */
.pohledy { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; font-family: var(--sans); }
.pohledy a { border: 1px solid var(--inkoust); border-radius: 4px; padding: 0.4rem 0.9rem; text-decoration: none; color: var(--inkoust); background: var(--list); }
.pohledy a:hover { background: var(--inkoust); color: #fff; }
.potomci { font-family: var(--sans); font-size: 0.92rem; color: var(--seda); margin-top: 0.6rem; }
.potomci a { color: var(--inkoust); }
.ja-v-rade { font-weight: 600; }

/* --- mapa ------------------------------------------------------------------------ */
.mapa { height: min(72vh, 640px); border: 1px solid var(--linka); border-radius: 4px; margin: 0.8rem 0 0.6rem; background: #dfe3dc; }
.mapa-ovladani { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; align-items: center; }
.rody-filtr { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.rody-filtr legend { float: left; margin-right: 0.8rem; color: var(--seda); }
.rody-filtr label, .mapa-ovladani > label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.dum-ikona span { display: block; width: 14px; height: 14px; border: 2px solid #1c2536; border-radius: 2px; transform: rotate(45deg); }
.popup-lidi { margin: 0.4rem 0; padding-left: 1.1rem; }
.leaflet-container { font-family: var(--sans); }
.mapa .leaflet-tile-pane { filter: saturate(0.45) contrast(0.95) brightness(1.03); }
.staveni { list-style: none; padding: 0; margin: 0; columns: 2 22rem; column-gap: 3rem; }
.staveni > li { break-inside: avoid; border-top: 1px solid var(--linka); padding: 0.8rem 0; }
.staveni h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.staveni ul { list-style: none; padding: 0; margin: 0 0 0.3rem; }
.odkazy-dnes { margin: 0; }

/* --- skryté větve ---------------------------------------------------------------- */
.sbihani .skryty path { stroke: var(--linka); stroke-width: 4; fill: none; }
.karta.skryta { background: transparent; border: 1px dashed var(--linka); border-left: 1px dashed var(--linka); color: var(--seda); }
.karta.skryta .jm { font-weight: 400; font-style: italic; }

/* --- celý strom ----------------------------------------------------------------- */
.cs-ovladani { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center; margin: 0.4rem 0 0.7rem; }
.cs-ovladani label { display: inline-flex; gap: 0.45rem; align-items: center; cursor: pointer; }
.cs-hledat input { font: 400 0.95rem var(--sans); padding: 0.35rem 0.6rem; border: 1px solid var(--seda); border-radius: 4px; background: var(--list); width: 16rem; max-width: 60vw; }
.cs-lupa { display: inline-flex; gap: 0.3rem; }
.cs-lupa button { font: 400 0.95rem var(--sans); min-width: 2.2rem; border: 1px solid var(--inkoust); background: var(--list); color: var(--inkoust); border-radius: 4px; padding: 0.3rem 0.7rem; cursor: pointer; }
.cs-lupa button:hover { background: var(--inkoust); color: #fff; }
.cs-okno { position: relative; height: min(76vh, 900px); overflow: hidden; border: 1px solid var(--linka); border-radius: 4px; background: #e4e7e1; cursor: grab; touch-action: none; margin: 0 -0.25rem 0.6rem; }
.cs-okno.tahne { cursor: grabbing; }
.cs-platno { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cs-spoje { position: absolute; inset: 0; pointer-events: none; }
.cs-spoje path { fill: none; stroke: #8d95a3; stroke-width: 2.2; stroke-linejoin: round; transition: opacity .2s; }
.cs-gen { position: absolute; top: 8px; font: 600 0.85rem var(--sans); color: var(--seda); border-bottom: 1px solid var(--linka); padding-bottom: 0.2rem; }
.cs-blok { position: absolute; }
.cs-osoba {
  position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 56px;
  text-align: left; padding: 0.3rem 2.2rem 0.3rem 0.75rem; background: var(--list); color: var(--inkoust);
  border: 1px solid var(--linka); border-left: 6px solid var(--c); border-radius: 4px; cursor: pointer; font: inherit;
}
.cs-osoba:hover { background: #fff; border-color: var(--seda); border-left-color: var(--c); }
.cs-osoba.vybrana { background: #fff; outline: 3px solid var(--inkoust); outline-offset: 0; }
.cs-osoba.j-prob, .cs-osoba.j-fam { border-left-style: solid; }
.cs-osoba.j-mh, .cs-osoba.j-unk { border-left-style: dashed; background: var(--papir); }
.cs-osoba .jm { font: 600 0.95rem/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-osoba .ro { font: 400 0.8rem var(--sans); color: var(--seda); }
.cs-pocet { position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%); font: 600 0.75rem var(--sans); color: var(--seda); border: 1px solid var(--linka); border-radius: 99px; padding: 0 0.4rem; background: var(--papir); }
.cs-sib { list-style: none; margin: 0.25rem 0 0 0.9rem; padding: 0 0 0 0.6rem; border-left: 2px solid var(--linka); font: 400 0.78rem/21px var(--sans); }
.cs-sib li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-sib a { color: var(--inkoust); }
.cs-sib span { color: var(--seda); }
.cs-karta { position: absolute; top: 0.7rem; right: 0.7rem; width: min(22rem, calc(100% - 1.4rem)); max-height: calc(100% - 1.4rem); overflow: auto; cursor: auto; box-shadow: 0 8px 24px rgba(28, 37, 54, 0.18); }
.cs-karta h2 { margin: 0.1rem 0 0.2rem; font-size: 1.35rem; }
.cs-karta h3 { margin: 1rem 0 0.3rem; font-size: 1rem; }
.cs-karta p { margin: 0 0 0.3rem; }
.cs-karta ul { list-style: none; padding: 0; margin: 0; }
.cs-karta li { padding: 0.12rem 0; }
.cs-karta .odkazy { display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--sans); margin-top: 0.9rem; }
.cs-zavrit { position: absolute; top: 0.3rem; right: 0.5rem; border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--seda); }
.cs-platno.maly .cs-osoba { background: var(--c); border-color: rgba(28, 37, 54, 0.35); }
.cs-platno.maly .cs-spoje path { stroke-width: 2.5; }
.cs-platno.maly .cs-gen { font-size: 2.2rem; }

/* --- kroky pátrání --------------------------------------------------------------- */
.kroky { list-style: none; padding: 0; margin: 0 0 1.5rem; max-width: 48rem; }
.kroky > li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--linka); position: relative; }
.kroky .kdy { font: 400 0.88rem var(--sans); color: var(--seda); padding-top: 0.2rem; }
.kroky h3 { margin: 0 0 0.3rem; font-size: 1.08rem; }
.kroky p { margin: 0 0 0.5rem; }
.den h2 { font-size: 1.2rem; font-family: var(--sans); color: var(--seda); font-weight: 600; margin: 2rem 0 0.3rem; }
.den .kroky .kdy { display: none; }
.den .kroky > li { grid-template-columns: 1fr; }
@media (max-width: 640px) { .kroky > li { grid-template-columns: 1fr; gap: 0.2rem; } }

/* celý strom – pásy generací, barevné spoje, cesta k Anně, otočení */
.cs-smer a { padding: 0.3rem 0.8rem; }
.cs-pas { position: absolute; pointer-events: none; }
.cs-pas.lichy { background: rgba(255, 255, 255, 0.35); }
.cs-pas span { position: absolute; left: 0.7rem; top: 0.35rem; font: 600 0.82rem var(--sans); color: var(--seda); white-space: nowrap; }
.smer-vodorovne .cs-pas span { left: 0.6rem; top: 0.6rem; }
.cs-svatba { position: absolute; font: 600 0.72rem var(--sans); color: var(--seda); white-space: nowrap; pointer-events: none; }
.cs-blok { transition: opacity .2s; }
.cs-platno.zvyrazneno .cs-blok:not(.cesta) { opacity: 0.32; }
.cs-platno.zvyrazneno .cs-spoje path:not(.cesta) { opacity: 0.18; }
.cs-platno.zvyrazneno .cs-spoje path.cesta { stroke-width: 4.5; }
.cs-platno.zvyrazneno .cs-svatba { opacity: 0.35; }
.cs-platno.zvyrazneno .cs-blok.cesta .cs-osoba { background: #fff; border-color: var(--inkoust); border-left-color: var(--c); }
.smer-svisle .cs-osoba { padding-right: 1.9rem; }
.smer-svisle .cs-osoba .jm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.88rem; line-height: 1.15; }
.smer-svisle .cs-sib { margin-left: 0.4rem; }
.cs-platno.maly .cs-pas span { font-size: 2.4rem; }
@media (prefers-reduced-motion: reduce) { .cs-blok, .cs-spoje path { transition: none; } }
.smer-vodorovne.maly .cs-pas span { font-size: 1.5rem; white-space: normal; width: 260px; line-height: 1.1; }

/* === celý strom přes celou plochu (přepisuje starší pravidla výše) =========== */
main.plocha { max-width: none; padding: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-okno { position: relative; height: 80vh; margin: 0; border: 0; border-radius: 0; overflow: hidden; background: #e4e7e1; }
.cs-okno:fullscreen { height: 100vh; }
.cs-okno:focus-visible { outline-offset: -3px; }

.cs-nastroje {
  position: absolute; top: 0.8rem; left: 0.8rem; z-index: 5; width: min(21rem, calc(100% - 1.6rem));
  display: flex; flex-direction: column; gap: 0.55rem; padding: 0.8rem 0.9rem;
  background: rgba(248, 248, 245, 0.96); border: 1px solid var(--linka); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(28, 37, 54, 0.12); cursor: auto;
}
.cs-titul { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.cs-titul h1 { font-size: 1.35rem; margin: 0; }
.cs-hledat input { width: 100%; font: 400 1rem var(--sans); padding: 0.5rem 0.7rem; border: 1px solid var(--seda); border-radius: 4px; background: #fff; color: var(--inkoust); }
.cs-volby { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; font-family: var(--sans); font-size: 0.92rem; }
.prepinac button { font: 400 0.92rem var(--sans); padding: 0.32rem 0.75rem; border: 0; background: var(--list); color: var(--inkoust); cursor: pointer; }
.prepinac button + button { border-left: 1px solid var(--inkoust); }
.prepinac button[aria-pressed="true"] { background: var(--inkoust); color: #fff; }
.cs-check { display: inline-flex; gap: 0.35rem; align-items: center; cursor: pointer; }
.cs-jinam { display: flex; gap: 1rem; }

.cs-zoom { position: absolute; right: 0.8rem; bottom: 0.8rem; z-index: 5; display: flex; flex-direction: column; border: 1px solid var(--linka); border-radius: 6px; overflow: hidden; box-shadow: 0 6px 20px rgba(28, 37, 54, 0.12); }
.cs-zoom button { width: 2.6rem; height: 2.6rem; font: 400 1.3rem/1 var(--sans); border: 0; border-top: 1px solid var(--linka); background: var(--list); color: var(--inkoust); cursor: pointer; }
.cs-zoom button:first-child { border-top: 0; }
.cs-zoom button:hover { background: var(--inkoust); color: #fff; }

.cs-mapka { position: absolute; left: 0.8rem; bottom: 0.8rem; z-index: 5; width: 200px; height: 140px; border: 1px solid var(--linka); border-radius: 6px; box-shadow: 0 6px 20px rgba(28, 37, 54, 0.12); cursor: crosshair; touch-action: none; }

.cs-karta {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: 24rem; max-width: 100%; max-height: none;
  overflow: auto; padding: 1.3rem 1.4rem 2rem; background: var(--list); border-left: 1px solid var(--linka);
  border-radius: 0; box-shadow: -10px 0 30px rgba(28, 37, 54, 0.12); cursor: auto;
}
.cs-karta h2 { font-size: 1.5rem; margin: 0.15rem 2rem 0.2rem 0; }
.cs-karta .odkazy { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0.8rem 0 0.4rem; }
.tlacitko-maly { background: var(--inkoust); color: #fff !important; text-decoration: none; padding: 0.4rem 0.8rem; border-radius: 4px; }
.odkaz { font: inherit; color: var(--odkaz); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; text-align: left; }
@media (max-width: 760px) {
  .cs-karta { top: auto; left: 0; width: auto; height: 55%; border-left: 0; border-top: 1px solid var(--linka); box-shadow: 0 -10px 30px rgba(28, 37, 54, 0.15); }
  .cs-mapka { display: none; }
  .cs-nastroje { padding: 0.6rem; gap: 0.4rem; }
  .cs-jinam { display: none; }
}

/* popisky generací přilepené k okraji */
.cs-osa { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.cs-osa span { position: absolute; font: 600 0.8rem var(--sans); color: var(--seda); background: rgba(236, 238, 233, 0.9); border-radius: 3px; padding: 0.1rem 0.4rem; white-space: nowrap; }
.osa-svisle span { left: 0.6rem; top: 0; }
.osa-vodorovne span { bottom: 0.6rem; left: 0; }
.cs-pas span { display: none; }

/* úroveň detailu: při oddálení jen příjmení, větší */
.cs-osoba .pr { display: none; }
.cs-platno.maly .cs-osoba .jm, .cs-platno.maly .cs-osoba .ro, .cs-platno.maly .cs-pocet { display: none; }
.cs-platno.maly .cs-osoba .pr { display: block; font: 600 1.7rem/1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--inkoust); }
.cs-platno.maly .cs-svatba { font-size: 1.4rem; }
.cs-platno.maly .cs-sib { visibility: hidden; }
.cs-platno.mini .cs-svatba, .cs-platno.mini .cs-osoba .pr { display: none; }

.cs-napoveda { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 4; margin: 0; padding: 0.45rem 0.9rem; border-radius: 99px; background: rgba(28, 37, 54, 0.85); color: #fff; pointer-events: none; transition: opacity 0.6s; max-width: calc(100% - 2rem); text-align: center; }
.cs-napoveda.skryj { opacity: 0; }
@media (max-width: 760px) { .cs-napoveda { bottom: 4rem; } }
.smer-svisle .cs-osoba { justify-content: flex-start; padding-top: 0.45rem; }
.smer-svisle .cs-osoba .ro { margin-top: auto; padding-bottom: 0.1rem; }

/* pátrání: rody u kroků a výběr rodu */
.krok-rody { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font: 400 0.85rem var(--sans); margin-bottom: 0.15rem; }
.krok-rody .rodstitek { color: var(--inkoust); text-decoration: none; }
.tyka-se { color: var(--seda); margin: 0 0 0.45rem; }
.filtr-rodu { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0.5rem; max-width: 60rem; }
.filtr-rodu button { font: 400 0.9rem var(--sans); border: 1px solid var(--linka); background: var(--list); color: var(--inkoust); border-radius: 99px; padding: 0.3rem 0.8rem; cursor: pointer; }
.filtr-rodu button[aria-pressed="true"] { border-color: var(--inkoust); background: #fff; box-shadow: inset 0 0 0 1px var(--inkoust); }
@media (max-width: 760px) { .cs-titul span { display: none; } .cs-titul h1 { font-size: 1.1rem; } }
.cs-koren { border-top: 1px solid var(--linka); padding-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--sans); }
.cs-koren b { font-family: var(--serif); font-size: 1.05rem; }
.cs-dolu { color: var(--seda); }