.pedigree-canvas{font-family:system-ui,Arial,Helvetica,sans-serif}
.ped-backbar{margin-bottom:.5rem;display:flex;gap:.5rem;align-items:center}
.ped-btn{padding:.25rem .5rem;border:1px solid #bbb;background:#f0f0f0;border-radius:4px;cursor:pointer;color:#111;font-weight:600}
.ped-btn:hover{background:#e6e6e6}
.ped-btn-right{margin-left:.5rem}
.ped-cols{display:flex;gap:1rem;align-items:flex-start;overflow:auto}
.pedigree-col{min-width:12rem;background:transparent}
.ped-col-header{font-weight:bold;margin-bottom:.5rem}
.ped-node{padding:.25rem .5rem;border:1px solid #ddd;background:#fbfbfb;border-radius:6px;margin-bottom:.5rem;display:flex;align-items:center;justify-content:space-between}
.ped-name{font-size:0.95rem;color:#111}
.ped-surname-link{text-decoration:none;font-weight:700;margin-left:.25rem;color:#0a47a1}
.ped-surname-link:hover{text-decoration:underline}
.ped-surname-text{font-weight:700;margin-left:.25rem;color:#111}

/* SVG pedigree styles */
svg { margin-top: 12px; border: 1px solid #ddd; background: #fff }
.person rect { fill: #fff; stroke: steelblue; stroke-width: 1px }
.person { font: 12px sans-serif }
.link { fill: none; stroke: #ccc; stroke-width: 1.5px }
.nav-right { font-weight:700; fill:#0a47a1 }
.svg-surname-link { font-weight:700; fill:#0a47a1; font-size:12px }
.svg-surname-text { font-weight:700; fill:#111; font-size:12px }
.nav-btn text { font-size:12px }
.nav-btn rect { stroke: none }
.nav-btn text { font-size:14px }
.nav-right-btn rect, .nav-left-btn rect { fill:#0a47a1 }
.nav-right-btn text, .nav-left-btn text { fill:#fff; font-weight:700 }