/* Portal only: keep PIX visible and contain the six-column history. */
.family-app{width:100%;min-width:0}
.family-app>header{gap:16px;flex-wrap:wrap}
.family-app>header>div{min-width:0;overflow-wrap:anywhere}
.family-app .family-header-actions{display:flex;flex-wrap:wrap;gap:8px}
.family-app header .pix-copy{display:inline-flex!important}
.family-app .family-history{min-width:0;max-width:100%}
.family-app .family-history table{width:100%;min-width:0!important;table-layout:fixed}
.family-app .family-history th,.family-app .family-history td{min-width:0!important;max-width:none!important;white-space:normal!important;overflow-wrap:anywhere;vertical-align:top}
@media(min-width:821px){
 .family-app .family-history th:nth-child(1),.family-app .family-history td:nth-child(1){width:16%!important}
 .family-app .family-history th:nth-child(2),.family-app .family-history td:nth-child(2){width:16%!important}
 .family-app .family-history th:nth-child(3),.family-app .family-history td:nth-child(3){width:15%!important}
 .family-app .family-history th:nth-child(4),.family-app .family-history td:nth-child(4){width:27%!important}
 .family-app .family-history th:nth-child(5),.family-app .family-history td:nth-child(5){width:14%!important}
 .family-app .family-history th:nth-child(6),.family-app .family-history td:nth-child(6){width:12%!important}
}
@media(max-width:820px){
 .family-app .family-history table,.family-app .family-history tbody{display:block}
 .family-app .family-history thead{display:none}
 .family-app .family-history tr{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
 .family-app .family-history td{display:block;width:100%!important;grid-column:auto!important;grid-row:auto!important;text-align:left!important;margin:0 0 12px;padding:0!important;border:0!important}
 .family-app .family-history td::before{content:attr(data-label)!important;display:block;font-size:.72rem;font-weight:800;color:var(--muted);margin-bottom:4px}
 .family-app .family-history td.empty::before{display:none}
 .family-app .family-history .family-period{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .family-app .family-history .family-period>a{white-space:normal;margin-top:0;min-width:0}
 .family-app .family-metrics{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
}
@media(max-width:460px){
 .family-app .family-header-actions{width:100%;justify-content:flex-end}
}