
/* 1.0.0-beta.5.13.4 — Relationships 2.0: compact character rail + horizontal relationship shelves. */
#relationships{--rel510-shelf-gap:10px}
#relationships .rel510-roster{display:none;position:relative;z-index:2;margin-top:9px;padding:7px;border:1px solid rgba(215,182,111,.16);border-radius:14px;background:rgba(8,9,14,.48);overflow:hidden}
#relationships[data-rel-view="person"] .rel510-roster{display:block}
#relationships .rel510-roster::after{content:'';position:absolute;right:0;top:0;bottom:0;width:34px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(8,9,14,.92))}
#relationships .rel510-roster-track{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding:1px 24px 1px 1px;touch-action:pan-x}
#relationships .rel510-roster-track::-webkit-scrollbar{display:none}
#relationships .rel510-roster-track.rel510-wheel-active,#relationships[data-rel-view="person"] .rel553-pairs.rel510-wheel-active{scroll-snap-type:none!important;scroll-behavior:auto!important}
#relationships .rel510-person-chip{flex:0 0 auto;display:grid;grid-template-columns:31px minmax(0,auto) auto;align-items:center;gap:7px;min-height:38px;max-width:210px;padding:4px 9px 4px 4px;border:1px solid rgba(215,182,111,.16);border-radius:999px;background:linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.009));color:#a99d8d;font:11px Georgia,serif;cursor:pointer;scroll-snap-align:start;transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease}
#relationships .rel510-person-chip:hover{border-color:rgba(215,182,111,.34);color:#e5d4b6;transform:translateY(-1px)}
#relationships .rel510-person-chip.active{border-color:color-mix(in srgb,var(--rel510-chip,#d7b66f) 58%,#d7b66f);background:linear-gradient(145deg,color-mix(in srgb,var(--rel510-chip,#d7b66f) 16%,rgba(143,48,73,.13)),rgba(215,182,111,.035));color:#f0dfc0;box-shadow:0 0 20px color-mix(in srgb,var(--rel510-chip,#d7b66f) 10%,transparent)}
#relationships .rel510-person-chip .rel510-chip-token{width:30px;height:30px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--rel510-chip,#d7b66f) 58%,#d7b66f);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rel510-chip,#d7b66f) 17%,transparent),rgba(8,9,13,.95));color:#ead8b7;font:600 10px Georgia,serif}
#relationships .rel510-person-chip .rel510-chip-name{min-width:0;max-width:126px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#relationships .rel510-person-chip .rel510-chip-count{min-width:18px;padding:2px 5px;border-radius:999px;background:rgba(215,182,111,.08);color:#bfa66f;font:9px Georgia,serif;text-align:center}

/* Person mode is a compact shelf archive instead of a long wall. */
#relationships[data-rel-view="person"] .relationship-list{min-width:0}
#relationships[data-rel-view="person"] .rel553-group{position:relative;margin-bottom:11px;padding:8px 8px 5px!important;border:1px solid rgba(215,182,111,.1);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.018),rgba(8,9,14,.24));overflow:hidden}
#relationships[data-rel-view="person"] .rel553-group-head{min-height:30px;margin:0 2px 5px}
#relationships[data-rel-view="person"] .rel553-group-head::after{order:2}
#relationships .rel510-shelf-tools{order:3;display:flex;align-items:center;gap:4px;margin-left:auto;text-transform:none;letter-spacing:0}
#relationships .rel510-shelf-tools button{width:29px;height:29px;min-height:29px;padding:0;display:grid;place-items:center;border:1px solid rgba(215,182,111,.2);border-radius:9px;background:rgba(8,9,14,.72);color:#d3b46f;font:16px/1 Georgia,serif;cursor:pointer}
#relationships .rel510-shelf-tools button:hover:not(:disabled){border-color:rgba(215,182,111,.42);background:rgba(143,48,73,.16);color:#f0d79f}
#relationships .rel510-shelf-tools button:disabled{opacity:.28;cursor:default}
#relationships .rel510-shelf-counter{min-width:44px;color:#8f8375;font:9px Georgia,serif;text-align:center;font-variant-numeric:tabular-nums}
#relationships[data-rel-view="person"] .rel553-pairs{display:flex!important;grid-template-columns:none!important;gap:var(--rel510-shelf-gap);overflow-x:auto;overflow-y:hidden;padding:2px 4px 7px;scrollbar-width:none;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scroll-behavior:smooth;touch-action:pan-x}
#relationships[data-rel-view="person"] .rel553-pairs::-webkit-scrollbar{display:none}
#relationships[data-rel-view="person"] .rel553-pair{flex:0 0 clamp(330px,38vw,455px);max-width:455px;scroll-snap-align:start;align-self:flex-start}
#relationships[data-rel-view="person"] .rel553-load-more{margin:9px 0 2px}

/* Registry remains dense and bounded: more people do not create one endless single column. */
@media(min-width:1380px){#relationships[data-rel-view="registry"] .rel553-pairs{grid-template-columns:repeat(3,minmax(0,1fr))}}
#relationships[data-rel-view="registry"] .rel553-group{margin-bottom:10px}
#relationships[data-rel-view="registry"] .rel553-pair>summary{padding-block:9px}

/* Scheme is kept inside the current viewport instead of growing with the whole archive. */
#relationships[data-rel-view="map"] #network{height:min(68vh,690px);min-height:500px;max-height:690px;overflow:auto;overscroll-behavior:contain}
#relationships[data-rel-view="map"] #relationshipList{max-height:min(68vh,690px);overscroll-behavior:contain}
#relationships[data-rel-view="map"] .relation-toolbar{position:sticky;top:74px;z-index:8;background:linear-gradient(180deg,rgba(17,16,22,.98),rgba(17,16,22,.92));border-radius:13px}

@media(max-width:900px){
  #relationships[data-rel-view="person"] .rel553-pair{flex-basis:min(78vw,410px)}
  #relationships[data-rel-view="map"] .relation-toolbar{position:relative;top:auto}
  #relationships[data-rel-view="map"] #network{height:min(58dvh,560px);min-height:430px;max-height:560px}
  #relationships[data-rel-view="map"] #relationshipList{max-height:none}
}
body.mobile-layout #relationships .rel510-roster{margin-top:7px;padding:6px}
body.mobile-layout #relationships .rel510-person-chip{min-height:42px;grid-template-columns:32px minmax(0,auto) auto;padding-right:8px;font-size:12px}
body.mobile-layout #relationships .rel510-person-chip .rel510-chip-token{width:32px;height:32px}
body.mobile-layout #relationships[data-rel-view="person"] .rel553-group{margin-bottom:9px;padding:7px 5px 4px!important;border-radius:14px}
body.mobile-layout #relationships[data-rel-view="person"] .rel553-pair{flex-basis:min(86vw,365px);max-width:min(86vw,365px)}
body.mobile-layout #relationships .rel510-shelf-tools button{width:34px;height:34px;min-height:34px}
body.mobile-layout #relationships .rel510-shelf-counter{min-width:38px}
@media(prefers-reduced-motion:reduce){#relationships[data-rel-view="person"] .rel553-pairs{scroll-behavior:auto}.rel510-person-chip{transition:none!important}}
