*{box-sizing:border-box}
body{font-family:system-ui,Segoe UI,Arial,sans-serif;margin:0;background:#f4f1ea;color:#222;line-height:1.4}
header{background:#3b2f1e;color:#fff;padding:10px 16px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
header a{color:#fff;text-decoration:none}
.logo{font-weight:bold;font-size:1.15rem}
nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-left:auto}
nav a{opacity:.9}nav a:hover{opacity:1;text-decoration:underline}
main{max-width:1200px;margin:0 auto;padding:16px}
footer{max-width:1200px;margin:0 auto;padding:12px 16px;color:#777;font-size:.8rem}
.card{background:#fff;border-radius:8px;padding:14px;margin-bottom:14px;box-shadow:0 1px 3px #0002}
h1{font-size:1.4rem;margin:.2em 0 .6em}h2{font-size:1.15rem;margin:.2em 0 .6em}
label{display:block;font-size:.85rem;margin:8px 0 2px;color:#555}
input,select,textarea{width:100%;padding:7px;border:1px solid #bbb;border-radius:5px;font-size:.95rem;font-family:inherit}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.btn,button{background:#c98a2b;color:#fff;border:0;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.95rem;text-decoration:none;display:inline-block}
.btn.sec{background:#777}.btn.del{background:#b33}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid #e3ded2;vertical-align:top}
th{background:#efe9da}
a{color:#8a5a10}
.flash{padding:10px 14px;border-radius:6px;margin-bottom:12px}
.flash.ok{background:#d8f0d8}.flash.err{background:#ffc2c2}
.res{font-size:1.4rem;font-weight:bold;padding:10px;border-radius:6px;margin:8px 0}
.ok{background:#d8f0d8}.mid{background:#fff2c2}.hi{background:#ffd9b3}.vhi{background:#ffc2c2}
td.ok,td.mid,td.hi,td.vhi{font-weight:bold}
.muted{color:#777;font-size:.85rem}
.ped{display:flex;gap:6px;overflow-x:auto;margin-top:8px}
.ped .col{display:flex;flex-direction:column;flex:1;min-width:140px;gap:3px}
.box{flex:1;border:1px solid #bbb;border-radius:4px;padding:2px 6px;font-size:.75rem;display:flex;flex-direction:column;justify-content:center;background:#fff;overflow:hidden;line-height:1.15}
.box a{text-decoration:none;color:#222}
.box.M{border-left:4px solid #3a7bd5}.box.F{border-left:4px solid #d5527a}.box.U{border-left:4px solid #999}
.box.u{background:#eee;color:#999}.box.root{background:#f7eed9;font-size:.85rem}
.box small{color:#777}.box small.x{color:#a33;font-weight:bold}
.box.dup{border-width:2px}
.c0{background:#e6f2ff}.c1{background:#fff0d6}.c2{background:#e8f7e3}.c3{background:#f6e3f7}.c4{background:#fde5e5}.c5{background:#e3f6f6}
.ac{position:relative}
.ac ul{position:absolute;z-index:5;left:0;right:0;background:#fff;border:1px solid #bbb;border-radius:5px;margin:0;padding:0;list-style:none;max-height:240px;overflow:auto}
.ac li{padding:6px 8px;cursor:pointer}.ac li:hover{background:#f3e7cc}
.row3{display:grid;grid-template-columns:1fr 1fr 2fr;gap:8px;margin-bottom:6px}
.pager a{margin-right:8px}
@media print{
 header,footer,.noprint,.flash{display:none}
 body{background:#fff}main{max-width:none;padding:0}
 .card{box-shadow:none;padding:0}
 @page{size:landscape;margin:10mm}
}

/* seznam psů */
table.list a{text-decoration:none}
table.list a:hover{text-decoration:underline}
table.list a.dn{font-weight:600}
table.list tbody tr:hover td{background:#faf5e8}
table.list td{padding:8px}
table.list th{white-space:nowrap}
.sx{font-size:1.1rem;font-weight:bold}
.sx.M{color:#3a7bd5}.sx.F{color:#d5527a}
.na{color:#bbb}
.dead{color:#777;font-weight:normal}
td.nw{white-space:nowrap}

/* odkazy v seznamu psů */
table.list a.dn{color:#8a5a10;font-weight:600}
table.list a.dn:hover{color:#5c3a08;text-decoration:underline}
table.list a.pa{font-weight:500;cursor:pointer}
table.list a.pM{color:#2f5f9e}
table.list a.pF{color:#b8386a}
table.list a.pa:hover{text-decoration:underline}
table.list a.pa .sx{font-size:.95rem}

/* nápověda k inbreedingu */
.qm{display:inline-block;vertical-align:middle;width:22px;height:22px;padding:0;border-radius:50%;background:#3a7bd5;color:#fff;font-size:.85rem;font-weight:bold;line-height:22px;text-align:center;margin-left:8px}
.qm:hover{background:#2f63ad}
.hlpbox{background:#eef4fb;border:1px solid #b7cdea;border-radius:8px;padding:12px 14px;margin:8px 0 12px;font-size:.9rem}
.hlpbox[hidden]{display:none}
.hlpbox p{margin:.5em 0}
.hlpbox table{width:auto;min-width:280px;margin:6px 0}
@media print{.qm,.hlpbox{display:none !important}}

/* rodokmen ve tvaru stromu */
.vt{margin:8px 0;font-size:.9rem}
.vtb{display:inline-block;padding:4px 12px;border:1px solid #c98a2b;border-radius:14px;text-decoration:none;color:#8a5a10;margin-left:6px;background:#fff}
.vtb.on{background:#c98a2b;color:#fff}
.treewrap{overflow-x:auto;padding:10px 0 4px;margin-top:8px}
.tree{display:flex;justify-content:center;min-width:max-content;margin:0 auto}
.tn{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;padding:0 4px}
.tp{display:flex;justify-content:center;position:relative}
.tp>.tn{padding-bottom:18px}
.tp>.tn::after{content:"";position:absolute;left:50%;bottom:9px;height:9px;border-left:2px solid #aaa;margin-left:-1px}
.tp>.tn::before{content:"";position:absolute;bottom:9px;left:0;right:0;border-top:2px solid #aaa}
.tp>.tn:first-child::before{left:50%}
.tp>.tn:last-child::before{right:50%}
.tp::after{content:"";position:absolute;left:50%;bottom:0;height:9px;border-left:2px solid #aaa;margin-left:-1px}
.tree .box{width:112px;min-height:50px;flex:none;text-align:center;align-items:center;font-size:.72rem;padding:4px 6px}
.tree .box.M{border-left:1px solid #bbb;border-top:4px solid #3a7bd5}
.tree .box.F{border-left:1px solid #bbb;border-top:4px solid #d5527a}
.tree .box.U{border-left:1px solid #bbb;border-top:4px solid #999}
.tree .box.root{width:170px;font-size:.85rem}
.tree .box.u{min-height:34px}
.tree .box b{word-break:break-word}
@media print{.treewrap{overflow:visible}}
.forestwrap{overflow-x:auto;margin-top:8px;border-radius:10px;background:linear-gradient(#dff1fb,#f3fbe9 70%)}
.forest{position:relative;margin:0 auto}
.fsvg{position:absolute;left:0;top:0}
.fn{position:absolute;width:112px;display:flex;justify-content:center}
.fn.rootn{width:180px}
.fn .box{width:112px;min-height:50px;flex:none;text-align:center;align-items:center;font-size:.72rem;padding:4px 6px;box-shadow:0 1px 4px #0003;border-radius:8px}
.fn .box.M{border-top:4px solid #3a7bd5}.fn .box.F{border-top:4px solid #d5527a}.fn .box.U{border-top:4px solid #999}
.fn .box.root{width:180px;font-size:.9rem;background:#f7eed9;border:2px solid #6b4a2b}
.fn .box b{word-break:break-word}
.fq{position:absolute;width:28px;height:28px;border-radius:50%;background:#ffffffb0;border:1px dashed #999;color:#999;text-align:center;line-height:26px;font-size:.8rem}
@media print{.forestwrap{overflow:visible}}

/* přibližování rodokmenu */
.zbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 0}
.zb{background:#fff;color:#8a5a10;border:1px solid #c98a2b;border-radius:14px;padding:4px 12px;font-size:.9rem;cursor:pointer}
.zb:hover{background:#f3e7cc}
.zlbl{font-size:.85rem;color:#555;min-width:48px}
.zhint{font-size:.78rem;color:#888;margin-left:auto}
.forestwrap,.treewrap{overflow:auto;touch-action:pan-x pan-y;cursor:grab}
.forestwrap.grab,.treewrap.grab{cursor:grabbing;user-select:none}
.zsizer{position:relative;margin:0 auto}
@media print{.zsizer{width:auto !important;height:auto !important}.zsizer>*{transform:none !important}.zbar{display:none}}
@media(max-width:700px){main{padding:10px}.card{overflow-x:auto}.grid,.row3{grid-template-columns:1fr !important}table.list th:nth-child(n+4):nth-child(-n+6),table.list td:nth-child(n+4):nth-child(-n+6){display:none}}
@media(max-width:480px){header{padding:8px 10px}table{font-size:.85rem}table.list td{padding:6px 4px}table.list th:nth-child(n+7),table.list td:nth-child(n+7){display:none}}
