/* ---------- tokens ---------- */
:root{
  --paper:#EDEEE7; --panel:#F8F9F3; --panel2:#E4E6DC; --sunk:#E7E9E0;
  --ink:#19231F; --ink2:#4E5A54; --ink3:#7B857D;
  --rule:#C8CDBF; --rule2:#DDE0D4;
  --accent:#2E6B4E; --accent-ink:#20503A; --accent-soft:#DCE8DE;
  --brass:#8A6113; --brass-soft:#EFE4C8;
  --shadow:0 1px 2px rgba(25,35,31,.06), 0 8px 24px -14px rgba(25,35,31,.28);
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --display:"Bodoni Moda","Spectral",Georgia,serif;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --maxw:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131714; --panel:#1A201B; --panel2:#232A23; --sunk:#171C18;
    --ink:#E8EAE1; --ink2:#A7B0A5; --ink3:#79837A;
    --rule:#2D352E; --rule2:#222922;
    --accent:#7BC89C; --accent-ink:#A6DCBD; --accent-soft:#1E2B23;
    --brass:#D6A951; --brass-soft:#2A2416;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#131714; --panel:#1A201B; --panel2:#232A23; --sunk:#171C18;
  --ink:#E8EAE1; --ink2:#A7B0A5; --ink3:#79837A;
  --rule:#2D352E; --rule2:#222922;
  --accent:#7BC89C; --accent-ink:#A6DCBD; --accent-soft:#1E2B23;
  --brass:#D6A951; --brass-soft:#2A2416;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:17px; line-height:1.62;
  font-feature-settings:"onum" 1;
}
img{max-width:100%; display:block}
a{color:var(--accent-ink); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.prose{max-width:68ch}

/* ---------- masthead ---------- */
header.top{
  position:sticky; top:0; z-index:40; background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.top-in{display:flex; align-items:center; gap:14px; min-height:60px; padding:6px 0; flex-wrap:wrap}
.mark{display:flex; align-items:baseline; gap:9px; flex:0 0 auto}
.mark b{font-family:var(--display); font-weight:700; font-size:23px; letter-spacing:.005em; line-height:1}
.mark span{font-family:var(--ui); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
nav.main{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap}
nav.main a{
  font-family:var(--ui); font-size:12.5px; letter-spacing:.01em; color:var(--ink2);
  padding:6px 9px; border-radius:3px; white-space:nowrap;
}
@media (min-width:900px) and (max-width:1180px){ nav.main a{font-size:12px; padding:6px 7px} }
nav.main a:hover{background:var(--panel2); text-decoration:none; color:var(--ink)}
nav.main a.on{color:var(--ink); background:var(--accent-soft); box-shadow:inset 0 -2px 0 var(--accent)}
.tbtn{font-family:var(--ui); font-size:12px; color:var(--ink3); padding:7px 9px; border:1px solid var(--rule); border-radius:3px}
.tbtn:hover{color:var(--ink); border-color:var(--ink3)}

/* ---------- search ---------- */
.searchbox{position:relative}
.searchbox input{
  width:100%; font-family:var(--ui); font-size:16px; color:var(--ink);
  background:var(--panel); border:1px solid var(--rule); border-radius:3px;
  padding:13px 15px 13px 42px;
}
.searchbox input::placeholder{color:var(--ink3)}
.searchbox input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.searchbox svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink3)}
.hint{font-family:var(--ui); font-size:12.5px; color:var(--ink3); margin-top:8px}

/* ---------- hero ---------- */
.hero{padding:54px 0 40px; border-bottom:1px solid var(--rule)}
.eyebrow{font-family:var(--ui); font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--brass); margin:0 0 16px}
h1.title{
  font-family:var(--display); font-weight:700; font-size:clamp(38px,6.4vw,66px); font-optical-sizing:auto;
  line-height:1.03; letter-spacing:-.012em; margin:0 0 6px; text-wrap:balance;
}
.sub{font-size:19px; color:var(--ink2); max-width:56ch; margin:14px 0 30px}
.sub em{font-style:italic; color:var(--ink)}

/* ledger stats */
.ledger{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); border-top:1px solid var(--rule); margin-top:36px}
.ledger div{padding:16px 0 4px; border-bottom:1px solid var(--rule2)}
.ledger b{display:block; font-family:var(--ui); font-weight:600; font-size:27px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.ledger span{font-family:var(--ui); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink3)}

/* ---------- sections ---------- */
section.blk{padding:46px 0; border-bottom:1px solid var(--rule)}
section.blk:last-child{border-bottom:0}
h2.sec{
  font-family:var(--display); font-weight:700; font-size:32px; letter-spacing:-.012em;
  margin:0 0 4px; text-wrap:balance; font-optical-sizing:auto;
}
h3.sub3{font-family:var(--ui); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink3); margin:0 0 18px; font-weight:600}
.lead{color:var(--ink2); max-width:64ch; margin:0 0 26px}

/* branch cards */
.branches{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.branch{background:var(--panel); padding:22px 20px 20px; display:flex; flex-direction:column; gap:9px}
.branch:hover{background:var(--accent-soft)}
.branch .num{font-family:var(--ui); font-size:11px; letter-spacing:.14em; color:var(--brass)}
.branch h4{
  font-family:var(--serif); font-weight:600; font-size:20.5px; margin:0;
  line-height:1.28; letter-spacing:-.004em; text-wrap:balance;
}
.branch .yrs{font-family:var(--ui); font-size:13px; color:var(--ink3); font-variant-numeric:tabular-nums}
.branch p{margin:0; font-size:15px; color:var(--ink2)}
.branch .cnt{margin-top:auto; padding-top:12px; font-family:var(--ui); font-size:12.5px; color:var(--accent-ink); border-top:1px solid var(--rule2)}

/* ---------- result rows (ledger lines) ---------- */
.rows{border-top:1px solid var(--rule)}
.row{
  display:grid; grid-template-columns:1fr auto; gap:4px 18px; align-items:baseline;
  padding:11px 10px 11px 12px; border-bottom:1px solid var(--rule2);
  width:100%; text-align:left; color:inherit;
}
.row:hover{background:var(--panel); text-decoration:none}
.row .nm{font-size:17px; font-weight:500}
.row .mt{font-family:var(--ui); font-size:12.5px; color:var(--ink3); font-variant-numeric:tabular-nums; grid-column:1}
.row .gg{font-family:var(--ui); font-size:11px; letter-spacing:.08em; color:var(--brass); white-space:nowrap; grid-row:1; grid-column:2}
mark{background:var(--brass-soft); color:inherit; padding:0 1px; border-radius:2px}

/* ---------- person ---------- */
.pname{font-family:var(--display); font-weight:700; font-size:clamp(31px,4.6vw,47px); font-optical-sizing:auto; line-height:1.06; margin:6px 0 10px; letter-spacing:-.012em; text-wrap:balance}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin:26px 0}
.fact{background:var(--panel); padding:14px 16px}
.fact span{display:block; font-family:var(--ui); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3); margin-bottom:5px}
.fact b{font-weight:500; font-size:16.5px; display:block}
.fact i{font-style:normal; font-size:14px; color:var(--ink2); display:block; margin-top:2px}

/* lineage chain */
.chain{margin:8px 0 0; padding:0; list-style:none; position:relative}
.chain li{position:relative; padding:7px 0 7px 30px; font-size:16px}
.chain li::before{
  content:""; position:absolute; left:8px; top:0; bottom:0; width:1px; background:var(--rule);
}
.chain li:first-child::before{top:16px}
.chain li:last-child::before{bottom:calc(100% - 16px)}
.chain li::after{
  content:""; position:absolute; left:4.5px; top:15px; width:8px; height:8px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--rule);
}
.chain li.here::after{background:var(--accent); border-color:var(--accent)}
.chain li.here{font-weight:600}
.chain .g{font-family:var(--ui); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--brass); display:block}
.chain .y{font-family:var(--ui); font-size:12.5px; color:var(--ink3); font-variant-numeric:tabular-nums}

/* relation groups */
.rel{margin:28px 0}
.rel h5{font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin:0 0 10px; font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  font-family:var(--ui); font-size:13.5px; padding:6px 11px; border:1px solid var(--rule);
  border-radius:3px; background:var(--panel); color:var(--ink);
}
.chip:hover{border-color:var(--accent); background:var(--accent-soft); text-decoration:none}
.chip small{color:var(--ink3); font-variant-numeric:tabular-nums; margin-left:5px}
.chip.sp{border-left:3px solid var(--brass)}

/* ---------- tree ---------- */
.tree{font-family:var(--ui); font-size:15px}
.tnode{padding-left:19px; border-left:1px solid var(--rule2); margin-left:7px}
.tree > .tnode{border-left:0; margin-left:0; padding-left:0}
.trow{display:flex; align-items:baseline; gap:8px; padding:4px 0}
.tw{width:19px; flex:0 0 19px; text-align:center; color:var(--ink3); font-size:12px; line-height:1.4}
.tw:hover{color:var(--accent)}
.tname{color:var(--ink); font-weight:500}
.tname:hover{color:var(--accent-ink)}
.ty{color:var(--ink3); font-size:12.5px; font-variant-numeric:tabular-nums}
.tsp{color:var(--ink2); font-size:13px}
.tsp::before{content:"⚭ "; color:var(--brass)}

/* ---------- photos ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px}
figure.ph{margin:0; background:var(--panel); border:1px solid var(--rule); padding:9px; cursor:zoom-in}
figure.ph:hover{border-color:var(--accent)}
figure.ph img{width:100%; height:180px; object-fit:cover; background:var(--sunk)}
figure.ph figcaption{font-family:var(--ui); font-size:12.5px; color:var(--ink2); margin-top:9px; line-height:1.4}
.lb{position:fixed; inset:0; background:rgba(10,14,11,.93); z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:26px; gap:14px}
.lb img{max-width:min(1100px,94vw); max-height:78vh; width:auto; object-fit:contain}
.lb p{font-family:var(--ui); font-size:14px; color:#DCE0D6; max-width:70ch; text-align:center; margin:0}
.lb .x{position:absolute; top:16px; right:20px; color:#DCE0D6; font-size:26px; line-height:1; padding:8px}

/* ---------- prose / history ---------- */
.doc h3{font-family:var(--serif); font-weight:600; font-size:22px; margin:38px 0 10px; letter-spacing:-.004em; line-height:1.3}
.doc p{margin:0 0 15px}
.toc{list-style:none; padding:0; margin:0 0 34px; border-top:1px solid var(--rule)}
.toc li{border-bottom:1px solid var(--rule2)}
.toc a{display:block; padding:10px 4px; font-family:var(--ui); font-size:14px; color:var(--ink2)}
.toc a:hover{color:var(--accent-ink); background:var(--panel); text-decoration:none}

/* ---------- misc ---------- */
.note{font-family:var(--ui); font-size:13px; color:var(--ink3); background:var(--panel); border-left:2px solid var(--brass); padding:12px 15px; margin:22px 0}
.crumb{font-family:var(--ui); font-size:12.5px; color:var(--ink3); margin:26px 0 0}
.crumb a{color:var(--ink3)}
.empty{font-family:var(--ui); color:var(--ink3); padding:40px 0}
footer{border-top:1px solid var(--rule); padding:34px 0 60px; font-family:var(--ui); font-size:13px; color:var(--ink3)}
footer a{color:var(--ink2)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .row,.chip,.branch,figure.ph{transition:background-color .13s ease, border-color .13s ease}
}
@media (max-width:640px){
  body{font-size:16px}
  .top-in{height:auto; flex-wrap:wrap; padding:10px 0; gap:10px}
  nav.main{margin-left:0; width:100%; overflow-x:auto; padding-bottom:2px}
  .hero{padding:34px 0 28px}
  .row{grid-template-columns:1fr}
  .row .gg{grid-column:1; grid-row:auto}
  figure.ph img{height:150px}
}

/* ---------- grupos de origem ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--ui); font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase; padding:3px 8px; border-radius:2px;
  border:1px solid var(--rule); color:var(--ink2); background:var(--panel); white-space:nowrap;
}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ink3)}
.badge.g-nucleo{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft)}
.badge.g-nucleo::before{background:var(--accent)}
.badge.g-conjuge{color:var(--brass); border-color:var(--brass-soft); background:var(--brass-soft)}
.badge.g-conjuge::before{background:var(--brass)}
.row .badge{grid-row:1; grid-column:2}
.row .gg{grid-row:2; grid-column:2; text-align:right}

.filtros{display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 4px}
.filtros button{
  font-family:var(--ui); font-size:12.5px; padding:6px 11px; border:1px solid var(--rule);
  border-radius:3px; background:var(--panel); color:var(--ink2);
}
.filtros button:hover{border-color:var(--ink3); color:var(--ink)}
.filtros button[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:500}
.filtros button small{color:var(--ink3); margin-left:5px; font-variant-numeric:tabular-nums}

.aviso{
  border:1px solid var(--brass); border-left-width:3px; background:var(--brass-soft);
  padding:15px 17px; margin:24px 0; font-size:15.5px; color:var(--ink);
}
.aviso b{font-weight:600}
.aviso p{margin:0 0 8px}
.aviso p:last-child{margin:0}
.aviso .q{font-style:italic; color:var(--ink2); border-left:2px solid var(--rule); padding-left:12px; margin:10px 0}

.ficha{border:1px solid var(--rule); background:var(--panel); padding:18px 20px; margin:24px 0}
.ficha h5{font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin:0 0 8px; font-weight:600}
.ficha h6{font-family:var(--serif); font-weight:600; font-size:19px; margin:0 0 6px; line-height:1.3}
.ficha .meta{font-family:var(--ui); font-size:12.5px; color:var(--ink3); margin:0 0 12px}
.ficha p{margin:0 0 10px; font-size:15.5px; color:var(--ink2)}
.ficha p:last-child{margin:0}

@media (max-width:640px){
  .row .badge, .row .gg{grid-column:1; grid-row:auto; text-align:left}
}

/* ================= protótipo: membros e contribuições ================= */
.faixa-proto{
  background:var(--brass-soft); border-bottom:1px solid var(--rule);
  font-family:var(--ui); font-size:12.5px; color:var(--ink2);
}
/* no site no ar a faixa informa, não adverte */
.faixa-proto.emuso{background:var(--panel)}
.faixa-proto.emuso a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px}
.faixa-proto .wrap{display:flex; gap:12px; align-items:baseline; padding-top:9px; padding-bottom:9px; flex-wrap:wrap}
.faixa-proto b{color:var(--ink); font-weight:600}
.faixa-proto button{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; font-size:12.5px}

.sessao{display:flex; align-items:center; gap:9px; font-family:var(--ui); font-size:12.5px; color:var(--ink2)}
.sessao .quem{display:flex; flex-direction:column; line-height:1.25; text-align:right}
.sessao .quem b{font-size:13px; color:var(--ink); font-weight:600}
.sessao .papel{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass)}

/* formulários */
.form{display:grid; gap:16px; max-width:62ch}
.campo{display:flex; flex-direction:column; gap:6px}
.campo label{font-family:var(--ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); font-weight:600}
.campo input[type=text], .campo input[type=email], .campo input[type=password],
.campo input[type=search], .campo textarea, .campo select{
  font-family:var(--ui); font-size:15px; color:var(--ink); background:var(--panel);
  border:1px solid var(--rule); border-radius:3px; padding:10px 12px; width:100%;
}
.campo textarea{min-height:120px; resize:vertical; font-family:var(--serif); font-size:16px; line-height:1.55}
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.campo .dica{font-family:var(--ui); font-size:12px; color:var(--ink3)}
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){ .dupla{grid-template-columns:1fr} }

.btn{
  font-family:var(--ui); font-size:14px; font-weight:500; padding:10px 18px; border-radius:3px;
  border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer;
}
:root[data-theme="dark"] .btn, :root:not([data-theme="light"]) .btn{ color:#0F1711 }
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .btn{ color:#fff } }
.btn:hover{ filter:brightness(1.07) }
.btn.sec, :root .btn.sec{background:var(--panel); color:var(--ink); border-color:var(--rule)}
.btn.sec:hover{border-color:var(--ink3); filter:none}
.btn.perigo, :root .btn.perigo{background:transparent; color:#9A3229; border-color:#C08A85}
.btn.perigo:hover{background:#F6E9E7; filter:none}
:root[data-theme="dark"] .btn.perigo{color:#E58C82; border-color:#6B3B36; background:transparent}
:root[data-theme="dark"] .btn.perigo:hover{background:#2A1917}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn.perigo{color:#E58C82; border-color:#6B3B36; background:transparent}
  :root:not([data-theme="light"]) .btn.perigo:hover{background:#2A1917}
}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.acoes{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* seletor de alvo */
.alvo{border:1px solid var(--rule); background:var(--panel); border-radius:3px; padding:12px}
.alvo .achados{max-height:230px; overflow-y:auto; margin-top:8px; border-top:1px solid var(--rule2)}
.alvo .achados button{
  display:block; width:100%; text-align:left; padding:8px 6px; border-bottom:1px solid var(--rule2);
  font-family:var(--ui); font-size:14px; color:var(--ink);
}
.alvo .achados button:hover{background:var(--accent-soft)}
.alvo .achados small{display:block; color:var(--ink3); font-size:12px; font-variant-numeric:tabular-nums}
.escolhido{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--accent);
  background:var(--accent-soft); border-radius:3px; font-family:var(--ui); font-size:14px;
}
.escolhido b{font-weight:600}
.escolhido span:not(.escolhido-tipo){color:var(--ink3); font-size:12.5px; font-variant-numeric:tabular-nums}
.escolhido button{margin-left:auto; color:var(--ink3); font-size:18px; line-height:1; flex:none}
.escolhido button:hover{color:var(--ink)}
label.check{
  display:flex; align-items:center; gap:9px; font-family:var(--ui); font-size:14px;
  color:var(--ink2); margin:4px 0 2px; cursor:pointer;
}
label.check input{width:16px; height:16px; accent-color:var(--accent); flex:none}
.rot-alvo{
  font-family:var(--ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink3); font-weight:600; margin:16px 0 6px;
}
.alvos-lista{display:grid; gap:8px}
.alvos-lista:not(:empty){margin-top:10px}
.escolhido-tipo{
  font-family:var(--ui); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-ink); border:1px solid var(--accent); border-radius:2px;
  padding:2px 6px; flex:none; align-self:center;
}
.doccard .lig a.lig-ramo{border-style:dashed}

/* fila de moderação */
.fila{display:grid; gap:14px}
.card{border:1px solid var(--rule); background:var(--panel); border-radius:3px; padding:18px 20px}
.card header{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-bottom:12px}
.card h4{font-family:var(--serif); font-weight:600; font-size:18.5px; margin:0; line-height:1.3}
.card .meta{font-family:var(--ui); font-size:12px; color:var(--ink3); margin-left:auto}
.selo{
  font-family:var(--ui); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:2px; border:1px solid var(--rule); color:var(--ink2);
}
.selo.pendente{border-color:var(--brass); color:var(--brass); background:var(--brass-soft)}
.selo.aprovada{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft)}
.selo.rejeitada{border-color:#C08A85; color:#A3372F}
:root[data-theme="dark"] .selo.rejeitada{color:#E58C82; border-color:#6B3B36}

table.diff{width:100%; border-collapse:collapse; font-family:var(--ui); font-size:14px; margin:6px 0 14px}
table.diff th{
  text-align:left; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink3); font-weight:600; padding:6px 10px 6px 0; border-bottom:1px solid var(--rule);
}
table.diff td{padding:8px 10px 8px 0; border-bottom:1px solid var(--rule2); vertical-align:top}
table.diff td.antes{color:var(--ink3); text-decoration:line-through}
table.diff td.depois{color:var(--accent-ink); font-weight:500}
.just{font-size:15px; color:var(--ink2); border-left:2px solid var(--rule); padding-left:12px; margin:4px 0 14px}

.previa{display:flex; gap:14px; align-items:flex-start; margin:6px 0 14px; flex-wrap:wrap}
.previa img{max-width:230px; max-height:180px; border:1px solid var(--rule); background:var(--sunk)}
.previa .arqinfo{font-family:var(--ui); font-size:12.5px; color:var(--ink3)}

.medidor{font-family:var(--ui); font-size:12px; color:var(--ink3); margin:6px 0 30px; max-width:420px}
.medidor .barra{height:4px; background:var(--rule2); border-radius:2px; overflow:hidden; margin-top:5px}
.medidor .barra i{display:block; height:100%; background:var(--accent)}
.medidor.alto .barra i{background:var(--brass)}
.medidor.critico .barra i{background:#B4453A}

.aba-vazia{font-family:var(--ui); color:var(--ink3); padding:34px 0; font-size:15px}
.docgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px}
.doccard{border:1px solid var(--rule); background:var(--panel); padding:0; display:flex; flex-direction:column}
.doccard .capa{height:170px; background:var(--sunk); display:flex; align-items:center; justify-content:center; overflow:hidden}
.doccard .capa img{width:100%; height:100%; object-fit:cover}
.doccard .capa .ext{font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
.doccard .corpo{padding:13px 15px; display:flex; flex-direction:column; gap:6px}
.doccard h5{font-family:var(--serif); font-weight:600; font-size:16px; margin:0; line-height:1.35}
.doccard .sub{font-family:var(--ui); font-size:12px; color:var(--ink3)}
.doccard .lig{display:flex; flex-wrap:wrap; gap:5px; margin-top:4px}
.doccard .lig a{font-family:var(--ui); font-size:11.5px; border:1px solid var(--rule); padding:3px 7px; border-radius:2px; color:var(--ink2)}
.doccard .lig a:hover{border-color:var(--accent); color:var(--accent-ink); text-decoration:none}

.modal{position:fixed; inset:0; background:rgba(10,14,11,.6); z-index:80; display:flex; align-items:center; justify-content:center; padding:22px}
.modal .caixa{background:var(--paper); border:1px solid var(--rule); box-shadow:var(--shadow); max-width:620px; width:100%; max-height:88vh; overflow-y:auto; padding:26px 28px}
.modal h3{font-family:var(--serif); font-weight:600; font-size:22px; margin:0 0 6px; line-height:1.3}
.modal .fechar{position:absolute; top:14px; right:18px; font-size:26px; color:#DCE0D6; padding:6px}

/* ================= grafo de ligações ================= */
:root{ --viz-a:#12735A; --viz-b:#A04E10; --viz-n:#6C766F; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --viz-a:#4FB794; --viz-b:#DC9A45; --viz-n:#8B948A; }
}
:root[data-theme="dark"]{ --viz-a:#4FB794; --viz-b:#DC9A45; --viz-n:#8B948A; }

.viz-wrap{position:relative; border:1px solid var(--rule); background:var(--panel); margin-top:18px}
.viz-wrap canvas{display:block; width:100%; height:auto; cursor:default}
.viz-dica{
  position:absolute; pointer-events:none; z-index:5; max-width:290px;
  background:var(--paper); border:1px solid var(--rule); box-shadow:var(--shadow);
  padding:11px 13px; font-family:var(--ui); font-size:12.5px; color:var(--ink2); line-height:1.45;
}
.viz-dica b{display:block; font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink); margin-bottom:3px; line-height:1.25}
.viz-dica .num{font-variant-numeric:tabular-nums}
.viz-dica em{font-style:normal; color:var(--viz-b)}

.legenda{display:flex; flex-wrap:wrap; gap:18px; margin:16px 0 2px; font-family:var(--ui); font-size:12.5px; color:var(--ink2)}
.legenda span{display:inline-flex; align-items:center; gap:7px}
.legenda i{display:inline-block; width:26px; height:0; border-top-width:2px; border-top-style:solid}
.legenda .no{width:13px; height:13px; border-radius:50%; border:1.5px solid var(--viz-a); border-top:1.5px solid var(--viz-a)}
.legenda .no.cheio{background:var(--viz-a)}
.legenda .no.ilha{border-style:dashed; border-color:var(--viz-n)}

.tab-lig{width:100%; border-collapse:collapse; font-size:15px; margin-top:8px}
.tab-lig th{
  text-align:left; font-family:var(--ui); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink3); font-weight:600; padding:8px 12px 8px 0; border-bottom:1px solid var(--rule); white-space:nowrap;
}
.tab-lig td{padding:11px 12px 11px 0; border-bottom:1px solid var(--rule2); vertical-align:top}
.tab-lig td.fam{white-space:nowrap; font-weight:500}
.tab-lig td.decl{color:var(--ink2); font-size:14.5px}
.tab-lig .marca{
  display:inline-block; font-family:var(--ui); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border:1px solid var(--rule); border-radius:2px; color:var(--ink3); white-space:nowrap;
}
.tab-lig .marca.sangue{border-color:var(--viz-b); color:var(--viz-b)}
.rolagem{overflow-x:auto}

/* ---------- painel de seleção do grafo ---------- */
.painel{
  border:1px solid var(--rule); border-top:0; background:var(--panel);
  padding:20px 22px 22px;
}
.painel-topo{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:6px}
.painel-topo > div{flex:1 1 260px; min-width:0}
.painel-topo h3{font-family:var(--serif); font-weight:600; font-size:21px; margin:0 0 4px; line-height:1.25; letter-spacing:-.004em}
.painel-topo .meta{font-family:var(--ui); font-size:12.5px; color:var(--ink3); margin:0; font-variant-numeric:tabular-nums}
.painel-topo .btn{white-space:nowrap; padding:8px 14px; font-size:13px; text-decoration:none}
.painel-topo a.btn:hover{text-decoration:none}
.painel-motivo{
  font-size:15.5px; color:var(--ink2); border-left:2px solid var(--viz-b);
  padding-left:13px; margin:14px 0 4px;
}
.painel-vazio{font-family:var(--ui); font-size:14px; color:var(--ink3); margin:16px 0 0}
.painel-grupo{margin-top:20px}
.painel-grupo h4{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink3); font-weight:600; margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--rule2);
}
.painel-lig{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:7px 0; border-bottom:1px solid var(--rule2);
}
.painel-lig:last-child{border-bottom:0}
.painel-nome{
  font-family:var(--serif); font-size:16px; font-weight:500; color:var(--accent-ink);
  text-align:left; padding:0;
}
.painel-nome:hover{text-decoration:underline; text-underline-offset:2px}
.painel-peso{
  font-family:var(--ui); font-size:11px; letter-spacing:.06em; color:var(--viz-a);
  border:1px solid var(--rule); border-radius:2px; padding:2px 7px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.painel-ex{font-family:var(--ui); font-size:12.5px; color:var(--ink3); flex:1 1 220px; min-width:0}

/* ================= árvore gráfica (Explorar) ================= */
.arv-box{position:relative; margin-top:18px}
.arv-topo{
  margin:0 0 -1px; padding:10px 12px; border:1px solid var(--rule); border-bottom:0;
  background:var(--panel); border-radius:3px 3px 0 0; gap:8px;
}
.chip.forte{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft)}
.chip.forte:hover{background:var(--accent); color:var(--paper)}
.arv-wrap{
  border:1px solid var(--rule); background:var(--panel);
  overflow:auto; padding:14px 10px; height:520px;
  overscroll-behavior:contain;
}
/* tela cheia: a árvore toma a janela */
.arv-box.cheia{
  position:fixed; inset:0; z-index:70; margin:0;
  background:var(--paper); display:flex; flex-direction:column;
}
.arv-box.cheia .arv-topo{
  margin:0; border:0; border-bottom:1px solid var(--rule); border-radius:0;
  padding:12px 18px; flex:none;
}
.arv-box.cheia .arv-wrap{border:0; flex:1 1 auto; height:auto; min-height:0}
.arv-box.cheia .zoom-ctr{top:auto; bottom:20px; right:20px}
body.sem-rolagem{overflow:hidden}
svg.arv{display:block; margin:0 auto; user-select:none}

svg.arv .lig{fill:none; stroke:var(--rule); stroke-width:1.5}
svg.arv .no{
  fill:var(--paper); stroke:var(--rule); stroke-width:1.2;
  transition:fill .12s ease, stroke .12s ease;
}
svg.arv .no.aberto{stroke:var(--accent)}
svg.arv .nogrp{cursor:pointer}
svg.arv .nogrp:hover .no{fill:var(--accent-soft); stroke:var(--accent)}
svg.arv .nogrp:focus{outline:none}
svg.arv .nogrp:focus-visible .no{stroke:var(--accent); stroke-width:2.4}

svg.arv text{font-family:var(--ui); dominant-baseline:middle}
svg.arv .no-nome{
  font-family:var(--serif); font-size:14px; font-weight:600; fill:var(--ink);
  text-anchor:middle; pointer-events:none;
}
svg.arv .no-sub{font-size:11px; fill:var(--ink3); text-anchor:middle; pointer-events:none; font-variant-numeric:tabular-nums}

svg.arv .no-bt{cursor:pointer}
svg.arv .no-bt-c{fill:var(--panel); stroke:var(--accent); stroke-width:1.4}
svg.arv .no-bt-c.foco{fill:var(--accent); stroke:var(--accent)}
svg.arv .no-bt:hover .no-bt-c{fill:var(--accent)}
svg.arv .no-bt-t{
  font-size:14px; font-weight:600; fill:var(--accent-ink); text-anchor:middle; pointer-events:none;
}
svg.arv .no-bt-c.foco + .no-bt-t{fill:var(--paper)}
svg.arv .no-bt:hover .no-bt-t{fill:var(--paper)}

svg.arv .no-foco{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.8}
svg.arv .foco-nome{
  font-family:var(--serif); font-size:17px; font-weight:600; fill:var(--ink); text-anchor:middle;
}
svg.arv .foco-nome.cj{cursor:pointer}
svg.arv .foco-nome.cj:hover{fill:var(--accent-ink); text-decoration:underline}
svg.arv .foco-sub{font-size:11.5px; fill:var(--ink2); text-anchor:middle; font-variant-numeric:tabular-nums}
svg.arv .foco-cas{
  font-size:10.5px; fill:var(--brass); text-anchor:middle; letter-spacing:.05em;
  text-transform:uppercase; font-variant-numeric:tabular-nums;
}
svg.arv .aneis circle{fill:none; stroke:var(--brass); stroke-width:1.5}
svg.arv .barra-cas{fill:none; stroke:var(--brass); stroke-width:1.2; opacity:.55}
/* chave de cada casamento, sobre o grupo de filhos */
svg.arv .grupo-cap{fill:var(--panel); stroke:var(--rule); stroke-width:1}
svg.arv .grupo-cap.vago{stroke-dasharray:3 3}
svg.arv .grupo-rot{
  font-size:11px; fill:var(--ink2); text-anchor:middle; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; pointer-events:none;
}

@media (max-width:640px){
  .arv-topo{padding:8px 10px}
  .arv-box.cheia .arv-topo{padding:10px 12px}
}
.arv-wrap{cursor:grab}
.arv-wrap:active{cursor:grabbing}
.zoom-ctr{
  position:absolute; top:12px; right:12px; z-index:4;
  display:flex; flex-direction:column; gap:5px;
}
.zoom-bt{
  width:32px; height:32px; border:1px solid var(--rule); background:var(--paper);
  color:var(--ink2); font-family:var(--ui); font-size:16px; line-height:1; border-radius:3px;
  box-shadow:var(--shadow);
}
.zoom-bt:hover{border-color:var(--accent); color:var(--accent-ink)}

/* dados reservados de pessoas provavelmente vivas */
.aviso.reservado{border-left-color:var(--brass); background:var(--brass-soft)}
.aviso.reservado b{color:var(--brass)}

/* pessoa acrescentada pela família, ainda sem ficha */
.chip.novo{border-style:dashed; cursor:default; background:var(--brass-soft); border-color:var(--brass)}
.chip.novo:hover{background:var(--brass-soft)}