/* Every tree portrait has the same 4:5 window, including compact cards. */
.portrait-viewport{position:relative;display:block;width:144px;height:180px;overflow:hidden;background:var(--surface-soft,#edf0ec);border-radius:4px;isolation:isolate}
.portrait-viewport>img{position:absolute;display:block;max-width:none!important;max-height:none!important;object-fit:fill;border-radius:0;pointer-events:none;user-select:none}
.portrait-viewport>img[hidden]{display:none}
.person-node .node-photo{display:block;flex:none;align-self:center;width:144px;margin:12px auto 0;padding:0;border:0;background:none;color:inherit;text-decoration:none;text-align:center}
button.node-photo{cursor:pointer}
.node-photo:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:4px}
.person-node .node-body{display:block;width:100%;box-sizing:border-box}
.person-node.has-portrait .node-name{text-align:center}
.person-node.has-portrait .node-body{padding-top:12px}
.person-node.no-portrait .node-body{padding-top:19px;padding-bottom:20px}
.person-node.no-portrait .node-name{margin-bottom:9px}
.person-node.no-portrait:not(.lineage-node) .node-body{padding-top:12px;padding-bottom:13px}
.tree-row .person-node,.tree-list-generation .person-node{align-self:center}
.person-node:not(.lineage-node) .node-photo{margin-top:10px}
#portrait-frame-dialog{width:min(760px,calc(100vw - 24px));max-width:760px;max-height:calc(100dvh - 24px);overflow:hidden}
#portrait-frame-form{display:flex;flex-direction:column;max-height:calc(100dvh - 26px)}
#portrait-frame-dialog .dialog-heading,#portrait-frame-dialog .dialog-footer{flex-shrink:0}
#portrait-frame-dialog .dialog-heading{padding:18px 24px}
#portrait-frame-dialog .dialog-body{min-height:0;max-height:none;overflow:auto;flex:1;padding:18px 24px}
#portrait-frame-dialog .dialog-footer{padding:14px 24px}
#portrait-frame-name{font-size:14px;margin:6px 0 0}
#portrait-frame-help{margin-bottom:18px}
.portrait-framing-layout{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:28px;align-items:start}
#portrait-frame-stage{width:100%;height:auto;aspect-ratio:4/5;max-width:320px;margin:auto;touch-action:none;cursor:grab;border:1px solid var(--control-border,var(--line));box-sizing:content-box}
#portrait-frame-stage.is-dragging{cursor:grabbing}
#portrait-frame-stage:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.portrait-frame-guide{position:absolute;inset:0;pointer-events:none;border-radius:4px;background:linear-gradient(to right,transparent 33.1%,#ffffff55 33.1%,#ffffff55 33.5%,transparent 33.5%,transparent 66.4%,#ffffff55 66.4%,#ffffff55 66.8%,transparent 66.8%),linear-gradient(to bottom,transparent 33.1%,#ffffff55 33.1%,#ffffff55 33.5%,transparent 33.5%,transparent 66.4%,#ffffff55 66.4%,#ffffff55 66.8%,transparent 66.8%)}
.portrait-card-preview{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:12px 0;margin-bottom:18px;text-align:center}
.portrait-card-preview .eyebrow{font-size:10px;display:block;margin-bottom:8px}
.portrait-card-preview .portrait-viewport{margin:auto}
.portrait-framing-controls label{font-size:12px;margin:13px 0 3px}
.portrait-framing-controls output{float:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.portrait-framing-controls input[type=range]{display:block;width:100%;height:28px;min-height:28px;padding:0;margin:0;border:0;accent-color:var(--accent);background:transparent;cursor:pointer}
#portrait-frame-reset{font-size:12px;margin-top:15px}
.portrait-frame-note{margin-top:18px}
@media(max-width:560px){.portrait-framing-layout{grid-template-columns:minmax(0,1fr);gap:20px}#portrait-frame-stage{max-width:250px}.portrait-framing-controls{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}.portrait-card-preview{grid-column:1;grid-row:1/9;margin:0}.portrait-framing-controls label,.portrait-framing-controls input,.portrait-framing-controls button{grid-column:2}.portrait-framing-controls label{margin:0}.portrait-framing-controls{align-items:center}.portrait-framing-controls output{float:none;display:block}}
@media(max-width:400px){.portrait-framing-controls{grid-template-columns:1fr}.portrait-card-preview{grid-column:1;grid-row:auto;width:180px;justify-self:center;margin-bottom:12px}.portrait-framing-controls label,.portrait-framing-controls input,.portrait-framing-controls button{grid-column:1}.portrait-framing-controls label{margin-top:8px}.portrait-framing-controls output{display:inline;float:right}}

/* Side-profile portraits use the exact same 4:5 crop as tree cards. */
.panel-portrait-button,.panel-portrait-photo{display:block;flex:0 0 64px;width:64px;margin:0;padding:0;border:0;border-radius:4px;background:none}
.panel-portrait-button .portrait-viewport,.panel-portrait-photo .portrait-viewport{width:64px;height:80px}
.panel-portrait-button{cursor:pointer}
.panel-portrait-button:hover{box-shadow:0 0 0 2px var(--accent)}
.panel-portrait-button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.panel-photo-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}
#panel-person-content .panel-photo{margin:0 0 24px}
#panel-person-content .panel-photo img{display:block;max-width:100%;max-height:420px;width:auto;height:auto;border-radius:4px}
.panel-photo figcaption{font-size:12px;color:var(--muted);margin-top:8px;white-space:pre-line}
.panel-photo-actions{margin-top:8px}
.panel-photo-actions .text-link{font-size:12px}