/* Relations (src/ui/people-view.mjs): the people met and the factions known,
   on the World tab. Each faction a card: its standing on a bar from Hunted to
   Sworn, its note, the people of it and its deeds; then the people of no
   faction and the memorials. A person: initials ringed by how they stand,
   name, title and factions, and two bars, friendship (both ways from the
   middle) and intimacy (one way, in rose); a tap opens what is known of them.
   Tokens from tokens.css. */
.relations-bar,.lore-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);margin:0 0 12px}
.relations-bar p,.lore-bar p{margin:0;color:var(--muted);font:var(--size-caption)/1.4 var(--head)}
.relations-editing{color:var(--accent)}
.relations-bar button,.lore-bar button{min-height:44px;padding:0 14px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface);color:var(--text-dim);font:500 var(--size-label) var(--head)}
.relations-bar button.on,.lore-bar button.on{border-color:var(--accent);background:var(--accent-950);color:var(--accent)}
.relation-card{margin:0 0 14px;padding:12px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface)}
.relation-card>header{display:flex;align-items:center;gap:var(--space-4);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--stone-850)}
.relation-card>header h2{display:flex;align-items:center;gap:var(--space-4);min-width:0;margin:0;color:var(--accent);font:600 var(--size-caption)/1.4 var(--head);letter-spacing:.16em;text-transform:uppercase;overflow-wrap:anywhere}
.relation-card>header h2 .material-symbols-outlined{font-size:18px}
.relation-card>header small{margin-left:auto;color:var(--muted);font:500 var(--size-caption) var(--head)}
.relation-person.memorial{opacity:.6}
.relation-group{margin:12px 0 2px;color:var(--accent);font:600 var(--size-tiny)/1.6 var(--head);letter-spacing:.14em;text-transform:uppercase}
.relation-group:first-of-type{margin-top:0}
.relation-standing{display:grid;gap:5px;margin:0 0 8px}
.relation-standing>span{font:500 var(--size-label) var(--head);color:var(--text-soft)}
.relation-standing-edit{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);margin:0 0 8px;color:var(--muted);font:var(--size-label) var(--head)}
.relation-standing-edit select{flex:1;max-width:60%;min-height:44px;border:1px solid var(--stone-750);border-radius:var(--ledger-radius,2px);background:var(--field);padding:0 8px;color:var(--text)}
.relation-none{margin:4px 0;color:var(--muted);font:var(--size-caption)/1.4 var(--head)}
.relation-person{border-top:1px solid var(--stone-850)}
.relation-card>header+.relation-person,.relation-group+.relation-person,.faction-note+.relation-person,.relation-standing+.relation-person,.faction-aka+.relation-person{border-top:0}
.relation-line{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:6px 10px;min-height:44px;padding:8px 0;cursor:pointer}
.relation-person>.relation-line::before{content:none;display:none}
.relation-line:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.relation-line{position:relative}
.relation-line::after{content:"";position:absolute;top:22px;right:4px;width:6px;height:6px;border:solid var(--accent-600);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.relation-person[open]>.relation-line::after{transform:rotate(-135deg);top:25px}
.relation-who{padding-right:18px}
@media(prefers-reduced-motion:reduce){.relation-line::after{transition:none}}
.relation-mono{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--stone-600);border-radius:var(--ledger-radius,2px);background:var(--surface-low);color:var(--text);font:600 var(--size-label) var(--head)}
.relation-mono.friend{border-color:var(--ok)}
.relation-mono.foe{border-color:var(--danger)}
.relation-who{display:grid;align-content:center;gap:1px;min-width:0;min-height:40px}
.relation-who b{color:var(--text);font:500 var(--size-small)/1.3 var(--head);overflow-wrap:anywhere}
.relation-who small{color:var(--text-dim);font:var(--size-caption)/1.35 var(--head);overflow-wrap:anywhere}
.relation-who small i{font-style:normal;color:var(--accent-300)}
.relation-who .fate-badge{justify-self:start;margin-top:2px}
.relation-bonds{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px var(--space-7)}
.relation-bond{display:grid;gap:3px;min-width:0}
.relation-bond small{display:flex;justify-content:space-between;gap:var(--space-3)}
.relation-bond small em{color:var(--muted);font:600 var(--size-micro)/1.4 var(--head);font-style:normal;letter-spacing:.12em;text-transform:uppercase}
.relation-bond small span,.relation-standing>span{font:500 var(--size-caption) var(--head);color:var(--text-soft);text-align:right}
.relation-bond .pos,.relation-standing .pos{color:var(--ok)}
.relation-bond .neg,.relation-standing .neg{color:var(--danger)}
.relation-bond .love{color:var(--nsfw-300)}
.relation-cooling{margin-left:3px;color:var(--danger)}
.relation-dial{position:relative;display:block;width:100%;height:5px;background:var(--stone-850)}
.relation-dial::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--stone-500)}
.relation-dial>i{position:absolute;top:0;bottom:0}
.relation-dial>i.pos{background:var(--ok)}
.relation-dial>i.neg{background:var(--danger)}
.relation-dial.wide{height:6px}
.relation-love{display:block;width:100%;height:5px;background:linear-gradient(90deg,var(--nsfw-600),var(--nsfw-400)) 0 0/var(--fill,0%) 100% no-repeat,var(--stone-850)}
.relation-more{padding:0 0 12px 50px;color:var(--text-soft);font:var(--size-caption)/1.5 var(--head)}
.relation-more>*+*{margin-top:8px}
.relation-known{margin:0;color:var(--text-dim)}
.relation-regard,.relation-ledger{margin:0;padding:0;list-style:none}
.relation-regard li{display:flex;justify-content:space-between;gap:var(--space-5);color:var(--muted)}
.relation-regard .tie{font-style:italic}
.relation-more h4{margin:10px 0 2px;color:var(--accent);font:600 var(--size-micro)/1.4 var(--head);letter-spacing:.14em;text-transform:uppercase}
.relation-ledger li{margin:3px 0;overflow-wrap:anywhere}
.relation-ledger li.chapter{color:var(--muted);font-style:italic}
.relation-remove{min-height:44px;padding:0 12px;border:1px solid var(--danger-700);border-radius:var(--ledger-radius,2px);background:none;color:var(--danger);font:500 var(--size-caption) var(--head)}
.faction-aka{display:block;margin:-4px 0 8px;color:var(--muted);font:var(--size-caption) var(--head)}
.faction-note{margin:0 0 6px;color:var(--text-dim);font:var(--size-caption)/1.45 var(--head);overflow-wrap:anywhere}
.faction-deeds{margin-top:6px;font:var(--size-caption)/1.45 var(--head)}
.faction-deeds summary{min-height:44px;display:flex;align-items:center;color:var(--text-dim)}
.faction-deeds ul{list-style:none;margin:0 0 4px;padding:0}
.faction-deeds li{margin:3px 0;color:var(--text-soft);line-height:1.4}
.fate-badge{font:var(--size-micro) var(--head);padding:1px 6px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
/* Edit mode, the journal box and the ledger's remove marks (shared with the Lore panel's Edit). */
.bond-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-5);font-size:var(--size-compact);margin-top:2px}
.add-row,.people-addrow{display:flex;gap:var(--space-3)}
.add-row input,.people-addrow input,.ovr input,.ovr select{flex:1;min-width:0;border:1px solid var(--stone-750);border-radius:var(--radius-md);background:var(--field);padding:6px 8px;color:var(--text);font-size:var(--size-small)}
.icon-x{display:inline-grid;place-items:center;min-width:44px;min-height:44px;margin:-14px -10px -14px -6px;border:0;background:none;padding:0;color:var(--muted);font-size:var(--size-small);line-height:1;cursor:pointer;vertical-align:middle}
.icon-x:hover{color:var(--danger)}
.ovr{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:var(--space-3)}
.ovr label{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);color:var(--muted);font-size:var(--size-small)}
.ovr label span{flex:0 0 auto}
.ovr label input,.ovr label select{flex:1;max-width:60%;min-height:44px}
.people-addrow{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:360px){.relation-bonds{grid-template-columns:minmax(0,1fr)}.relation-more{padding-left:0}}