/* Only the copied review renderer changes. Baseline graph is untouched. */
body{background:#17465f}.workspace{--graph-height:850px;--toolbar-y:790px;height:1132px;background:radial-gradient(ellipse at 40% 55%,#317b97,#17435c)}.graph{height:850px}.node .name{max-width:150px;width:150px;white-space:normal;font-size:12px;line-height:1.25;text-shadow:0 1px 3px #14384c}.node small{font-size:11px}.node .face{box-shadow:0 0 0 3px #b6e6ed}.node.family .face{box-shadow:0 0 0 3px #163d68,0 0 0 5px #b8d9e8}.node.influence .face{box-shadow:0 0 0 3px #e2a0c6}.rank-lane{border:1px solid #b5dce52b;background:#153e5622;border-radius:14px}.rank-lane>span{left:12px;top:10px;font-size:10px;letter-spacing:.04em;max-width:90%;white-space:normal}.depth-hint{max-width:calc(100% - 354px)}.depth-hint #view-description{font-size:10px}.legend{flex-wrap:wrap}.inspector{background:#f5fafb;border-radius:18px}.node.background{opacity:.08!important}.flat-view .node.background{display:none}.flat-view .node .name{font-size:12px}.flat-view .node small{font-size:11px}.node.conceal-label .name,.node.conceal-label small{opacity:1;visibility:visible}.toolbar [data-action=share]{display:none}#composition-print-note{position:fixed;z-index:900;bottom:12px;left:12px;right:12px;padding:18px;background:#fff;color:#173946;border:2px solid #42bfd5;border-radius:12px}body[data-composition=d] .workspace{background:radial-gradient(ellipse at 45% 65%,#205f78,#102f46)}body[data-composition=d] .rank-lane{background:#9fe5eb0b;border-style:dashed}@media(max-width:700px){.workspace{--graph-height:900px;--toolbar-y:830px;height:1182px}.graph{height:900px}.depth-hint{max-width:calc(100% - 24px);left:12px;top:12px}.legend{font-size:9px;gap:5px 10px}.node .name,.flat-view .node .name{width:84px;max-width:84px;font-size:10px}.node small,.flat-view .node small{font-size:9px}.rank-lane>span{font-size:8px;left:5px}.inspector.sheet-open{height:750px;max-height:88vh}.toolbar{max-width:calc(100% - 20px);left:50%;gap:3px}.toolbar button{padding:7px;font-size:10px}.mini-calendar{top:910px}#selected-summary{bottom:auto;top:862px}.orbit-hint{display:none}}

.rank-lane>span{right:auto;width:auto;transform:none;text-align:left}.flat-view .node.family .name{max-width:130px}
@media(max-width:700px){.toolbar{top:810px;bottom:auto}.node.selected .name{font-size:11px}.node.selected{margin-top:-30px}}

@media(max-width:600px){.node.family .name,.flat-view .node.family .name{width:76px;max-width:76px;font-size:10px;white-space:normal}.node.family small{max-width:76px;white-space:normal}}

/* R13: timeline is a real bottom section, never an overlay clipped by the host. */
body[data-composition] .workspace{height:auto;min-height:0;padding-bottom:16px;--toolbar-y:835px}
body[data-composition] .graph{height:850px;margin-bottom:78px}
body[data-composition] .mini-calendar{position:relative;inset:auto;width:auto;height:auto;min-height:272px;margin:0 16px;padding:16px;box-sizing:border-box}
body[data-composition] .calendar-heading{flex-wrap:wrap;gap:12px}
body[data-composition] .calendar-heading>div:last-child{display:flex;flex-wrap:wrap;gap:6px}
body[data-composition] .calendar-context,body[data-composition] .calendar-empty{font-size:12px;line-height:1.5;color:#e8f6fa;margin:8px 0 12px}
body[data-composition] .calendar-heading button{min-height:36px}
body[data-composition] .calendar-scroll{overflow-x:auto}
body[data-composition] #selected-summary{display:none}
@media(max-width:700px){body[data-composition] .graph{height:900px;margin-bottom:88px}body[data-composition] .workspace{--toolbar-y:900px}body[data-composition] .toolbar{top:910px;bottom:auto}body[data-composition] .mini-calendar{margin:0 10px;padding:12px}body[data-composition] .calendar-heading button{min-height:44px;font-size:11px}body[data-composition] .calendar-heading>div:last-child{margin-left:0}body[data-composition] .calendar-body{min-width:650px}}
/* The renderer positions its graph absolutely; reserve its full footprint in flow. */
body[data-composition] .workspace{padding-top:1008px;--toolbar-y:900px}
body[data-composition] .graph{margin-bottom:0}
@media(max-width:700px){body[data-composition] .workspace{padding-top:1028px;--toolbar-y:950px}body[data-composition] .toolbar{top:950px}}

body[data-composition] .calendar-bar{height:24px}body[data-composition] .calendar-bar.highlight{height:24px}body[data-composition] .calendar-event-label{top:26px}@media(max-width:700px){body[data-composition] .calendar-body{min-width:900px}}
@media(max-width:700px){body[data-composition] .graph:not(.flat-view) .node.family .name{white-space:normal;width:76px;max-width:76px;font-size:10px}body[data-composition] .graph:not(.flat-view) .node.family small{white-space:normal;width:76px;max-width:76px}}

/* R16: calendar bottom meets the host footer without a spacer. */
body[data-composition] .workspace{padding-bottom:0}

/* R19: internal calendar inset, continuous outer frame. */
body[data-composition] .workspace{padding-bottom:16px}
.node[data-person="kim"] .name{font-family:Georgia,serif;font-weight:400;letter-spacing:.3px;font-size:16px}
@media(max-width:700px){body[data-composition] .workspace{padding-bottom:10px}.node[data-person="kim"] .name{font-size:13px}}

/* R20: preserve the Arc, give labels a clearer relation to portraits. */
.graph:not(.flat-view) .node.family .name{bottom:calc(100% + 28px)}
.graph:not(.flat-view) .node.family small{bottom:calc(100% + 12px)}
.node:not(.background){gap:10px}
.node[data-person="kim"].selected .name{background:#f5fdff;border-radius:14px 14px 0 0;width:176px;max-width:176px;margin-bottom:-10px;padding:10px 12px 4px;font-size:17px;line-height:1.25;color:#173e54;text-shadow:none}
.node[data-person="kim"].selected small{box-sizing:border-box;width:176px;max-width:176px;background:#f5fdff;border-radius:0 0 14px 14px;padding:0 12px 10px;color:#4e6d7c;opacity:1;font-size:11px;line-height:1.4;letter-spacing:.04em}
.person-top[data-person="kim"]{padding:16px 12px;border:1px solid #d3e4ed;border-radius:16px;background:#fff;gap:12px;align-items:center}
.person-top[data-person="kim"] h2{font-family:Georgia,serif;font-weight:400;letter-spacing:.1px;line-height:1.25}
.person-top[data-person="kim"] .face{flex-shrink:0}
@media(max-width:700px){.node[data-person="kim"].selected .name{width:124px;max-width:124px;font-size:14px;padding:8px 8px 3px}.node[data-person="kim"].selected small{width:124px;max-width:124px;font-size:10px;padding:0 8px 8px}.graph:not(.flat-view) .node.family .name{bottom:calc(100% + 26px)}.graph:not(.flat-view) .node.family small{bottom:calc(100% + 10px)}}
/* R20 final card: one quiet surface, framed portrait, precise hierarchy. */
.node[data-person="kim"].selected{isolation:isolate}
.node[data-person="kim"].selected::before{content:"";position:absolute;z-index:-1;top:-12px;bottom:-10px;left:50%;transform:translateX(-50%);width:200px;border:1px solid #fff;border-radius:24px;background:linear-gradient(155deg,#fff,#edf7fb);box-shadow:0 10px 28px #082d4828,inset 0 0 0 1px #d9e8ef99}
.node[data-person="kim"].selected .face{box-shadow:0 0 0 3px #96d5e1,0 4px 12px #123c5224;border-color:#fff}
.node[data-person="kim"].selected .name{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:17px;font-weight:600;letter-spacing:-.3px;background:transparent;padding:8px 12px 3px;color:#173748}
.node[data-person="kim"].selected small{background:transparent;color:#607987;letter-spacing:.08em;font-size:10px;padding-bottom:4px}
.node[data-person="kim"].selected:focus-visible{outline:3px solid #9ee9f1;outline-offset:15px;border-radius:18px}
.node[data-person="kim"].selected:hover::before{box-shadow:0 12px 30px #082d4838,inset 0 0 0 1px #b9dce9}
.person-top[data-person="kim"]{background:linear-gradient(150deg,#fff,#f1f8fb);border-color:#d4e4ec;box-shadow:0 5px 16px #173c5009,inset 0 1px 0 #fff;border-radius:20px;padding:18px 14px}
.person-top[data-person="kim"] h2{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-weight:600;letter-spacing:-.4px}
.person-top[data-person="kim"] .face{box-shadow:0 0 0 2px #dfedf3,0 3px 10px #173c5014}
@media(max-width:700px){.node[data-person="kim"].selected::before{width:140px;border-radius:20px;top:-10px;bottom:-8px}.node[data-person="kim"].selected .name{font-size:14px;letter-spacing:-.2px}.node[data-person="kim"].selected small{font-size:10px}}

/* R20 compact refinement: keep legibility, reduce empty card area. */
.node[data-person="kim"].selected{gap:6px}
.node[data-person="kim"].selected::before{width:168px;top:-8px;bottom:-7px;border-radius:19px;border-color:#dfedf3;box-shadow:0 6px 18px #082d4826,inset 0 0 0 1px #ffffffcc}
.node[data-person="kim"].selected .name{width:144px;max-width:144px;padding:5px 8px 2px;margin-bottom:-6px;letter-spacing:-.35px}
.node[data-person="kim"].selected small{width:144px;max-width:144px;padding:0 8px 2px;letter-spacing:.09em}
.node[data-person="kim"].selected .face{box-shadow:0 0 0 1px #effaff,0 0 0 3px #8fcbd7,0 3px 8px #173c5220}
@media(max-width:700px){.node[data-person="kim"].selected::before{width:124px;border-radius:16px;top:-7px;bottom:-6px}.node[data-person="kim"].selected .name,.node[data-person="kim"].selected small{width:108px;max-width:108px}.node[data-person="kim"].selected .name{font-size:14px;padding:4px 4px 2px}.node[data-person="kim"].selected small{padding:0 4px 2px}}

/* Final side trim: portrait and name retain their readable sizes. */
.node[data-person="kim"].selected::before{width:144px}
.node[data-person="kim"].selected .name,.node[data-person="kim"].selected small{width:132px;max-width:132px;padding-left:4px;padding-right:4px}
@media(max-width:700px){.node[data-person="kim"].selected::before{width:116px}.node[data-person="kim"].selected .name,.node[data-person="kim"].selected small{width:104px;max-width:104px;padding-left:2px;padding-right:2px}}

/* Reference miniature: balanced horizontal card, existing name/rank only. */
.node[data-person="kim"].selected{display:grid;grid-template-columns:44px 1fr;grid-template-rows:1fr 1fr;column-gap:10px;row-gap:3px;box-sizing:border-box;width:176px;height:76px;padding:10px;margin-top:0;border:1px solid #d6e2ea;border-radius:18px;background:linear-gradient(145deg,#f6f8fa,#e1e8ee);box-shadow:inset 0 1px 0 #fff,0 5px 14px #123c5220;align-items:center}
.node[data-person="kim"].selected::before{display:none}
.node[data-person="kim"].selected .face{grid-column:1;grid-row:1/3;width:44px!important;height:44px!important;justify-self:center;align-self:center;box-shadow:0 0 0 2px #269cc2,0 2px 6px #173c5225;border:3px solid #fff}
.node[data-person="kim"].selected .name{grid-column:2;grid-row:1;align-self:end;width:auto;max-width:none;padding:0;margin:0;text-align:left;font-size:14px;line-height:1.2;letter-spacing:-.25px;white-space:nowrap}
.node[data-person="kim"].selected small{grid-column:2;grid-row:2;align-self:start;width:auto;max-width:none;padding:0;margin:0;text-align:left;font-size:10px;line-height:1.2;letter-spacing:.02em}
@media(max-width:700px){.node[data-person="kim"].selected{width:156px;height:68px;padding:9px;grid-template-columns:38px 1fr;column-gap:8px;border-radius:16px}.node[data-person="kim"].selected .face{width:38px!important;height:38px!important}.node[data-person="kim"].selected .name{font-size:13px}.node[data-person="kim"].selected small{font-size:10px}}

.graph .node[data-person="kim"].selected{max-width:none;min-width:0}

/* R20.1: retain all portraits/edges; reveal crowded phone labels on focus. */
@media(max-width:600px){.graph:not(.flat-view) .node.conceal-label:is(:hover,:focus-visible){z-index:101!important}.graph:not(.flat-view) .node.conceal-label:is(:hover,:focus-visible)>.name,.graph:not(.flat-view) .node.conceal-label:is(:hover,:focus-visible)>small{background:#173e54;border-radius:4px;box-shadow:0 0 0 3px #173e54;opacity:1;color:#fff}}

@media(max-width:600px){body[data-composition] .orbit-hint{display:block;left:24px;right:24px;top:870px;bottom:auto;text-align:center;font-size:11px;line-height:1.4;white-space:normal}}

@media(max-width:600px){.graph:not(.flat-view) .node.family .name{bottom:calc(100% + 38px)}}

@media(max-width:600px){body[data-composition] .graph:not(.flat-view) .node.family .name,body[data-composition] .graph:not(.flat-view) .node.family small{width:64px;max-width:64px}}

/* R21 onboarding preview uses the same graph; timeline/profile stay on full pages. */
body[data-context="contribution"] .mini-calendar,body[data-context="contribution"] .inspector,body[data-context="contribution"] #selected-summary{display:none!important}
body[data-context="contribution"] .graph{right:0;width:100%}
body[data-context="contribution"] .workspace{padding-bottom:0}