/* ---------- Ties view (js/rel/) ----------
   The stage (lines on one canvas, a button per person placed by transform) on the same --panel sheet as the timeline,
   the side panel beside it (a sheet over the lower part on phones). Shared here: layout, motion and the principles.
   A theme sets only the --rel-* tokens in its own skin file (defaults below come from the theme tokens, so a new
   theme gets the tab at once) and restyles the controls through the shared .seg and .btn classes. The canvas reads
   the colours through a probe (js/rel/index.js readLook). */
.relview {
  /* each kind of tie's colour (lines, chips, lifetimes): built on the relationship-line tokens */
  --rel-k-family: var(--accent);
  --rel-k-teachers: var(--tie-close); --rel-k-students: var(--tie-close);
  --rel-k-influences: color-mix(in oklab, var(--tie-close) 55%, var(--muted)); --rel-k-influenced: color-mix(in oklab, var(--tie-close) 55%, var(--muted));
  --rel-k-friends: color-mix(in oklab, var(--tie-close) 50%, var(--accent));
  --rel-k-patrons: var(--gold, color-mix(in oklab, var(--accent) 55%, var(--text)));
  --rel-k-rivals: var(--tie-conflict);
  --rel-k-era: var(--muted);
  --rel-chord: var(--muted); --rel-chord-a: .4;        /* the ties among the people round the person */
  --rel-ring: var(--line-strong); --rel-ring-a: .55;   /* the quiet circles of the web */
  --rel-bead: var(--tie-hot-close);                     /* the bead that runs along a lit tie */
  --rel-dim: .22;                                       /* what is left of a line outside the kind picked in the chips */
  --rel-pop: 1.28;                                      /* a hovered person's picture grows toward you (1: flat themes) */
  --rel-pop-glow: color-mix(in srgb, var(--accent) 80%, transparent);   /* and glows round its rim (canvas; transparent: none) */
  --rel-pic-ring: var(--line-strong);                   /* a picture's rim */
  --rel-ego-ring: var(--accent);                        /* the person in the middle */
  --rel-sheet: var(--sheet, var(--surface));            /* the floating controls, the side panel */
  --rel-tag: color-mix(in srgb, var(--rel-sheet) 86%, transparent);   /* behind a name on the stage */
  --rel-tag-ink: var(--text); --rel-tag-sub: var(--muted);              /* its words */
  --rel-ego-tag: var(--rel-tag); --rel-ego-ink: var(--text);            /* the person in the middle's name */
  --rel-conflict-tag: var(--rel-tag); --rel-conflict-ink: var(--rel-tag-ink);   /* a rival's name */
  --rel-name-font: var(--font-name, var(--font-ui)); --rel-name-case: none; --rel-name-track: 0;   /* names on the stage */
  --rel-gap: 12px;

  display: none; grid-column: 1 / -1; grid-row: 2; position: relative; min-width: 0; min-height: 0; overflow: hidden;
  contain: strict; grid-template-columns: minmax(0, 1fr) 360px;
}
body[data-view="rel"] :is(.side, .stage, .rmap, .tl-only:not(.map-too)) { display: none; }   /* search and the dating switch stay, as on the map */
body[data-view="rel"] .relview { display: grid; }
.rel-probe { position: absolute; visibility: hidden; pointer-events: none; }

/* ---- the stage ---- */
.rel-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; touch-action: none; cursor: var(--cur-grab, grab); -webkit-user-select: none; user-select: none; }
.rel-stage.dragging { cursor: var(--cur-grabbing, grabbing); }
.rel-disc, .rel-lines, .rel-nodes, .rel-sectors { position: absolute; inset: 0; pointer-events: none; }
.rel-disc { will-change: transform; }   /* the web leans as one layer (style.css "The card in motion"), nothing inside repaints */
.rel-lines { display: block; }
.rel-nodes, .rel-sectors { contain: strict; }   /* people coming and going lay out only here */
.rel-node {
  position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; color: var(--text);
  pointer-events: none; cursor: var(--cur-pointer, pointer); -webkit-tap-highlight-color: transparent;
}
/* each moving piece on its own layer: a glide only moves layers, Safari repaints nothing (CLAUDE.md → Performance) */
.rel-node { will-change: transform; }
.rel-node:focus-visible { outline: 0; }
.rel-node:focus-visible .rel-pic { outline: 3px solid var(--accent); outline-offset: 3px; }
/* the picture: drawn at 128px and scaled by the view (js PIC), its rim drawn on the canvas in whole pixels */
.rel-pic {
  position: absolute; left: -64px; top: -64px; width: 128px; height: 128px; border-radius: 50%; pointer-events: auto;
  transform-origin: 50% 50%;
  background: color-mix(in srgb, var(--c, var(--muted)) 26%, var(--surface-2));
}
/* a true circle whatever the picture's proportions: a plain block holds it at the circle's size (in a grid or flex box a
   tall portrait's own height stretched the frame into an oval; absolutely placed, Safari lost frames on every glide) */
.rel-pic img, .rel-rpic img { display: block; width: 100%; height: 100%; max-width: none; border-radius: 50%; object-fit: cover; object-position: 50% 22%; filter: var(--pic-filter, none); }
/* under the pointer a picture leans like the info card, with its light (style.css → "The card in motion", js/cardtilt.js) */
.rel-stage.rel-on-tie { cursor: var(--cur-pointer, pointer); }
/* the lit person's name rises, in the theme's hover (lift: edge and glow; ink and solid themes: their lists in style.css) */
.rel-node.lifted:not(.ego) .rel-lbl { box-shadow: 0 0 0 var(--hair, 1px) var(--hover-edge, var(--accent)), var(--glow, none); translate: 0 -2px; }
.rel-ini { position: absolute; inset: 0; display: grid; place-items: center; font: 600 40px / 1 var(--font-name, var(--font-ui)); color: color-mix(in srgb, var(--c, var(--muted)) 70%, var(--text)); }
.rel-lbl {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; width: max-content; max-width: 140px; padding: 1px 6px 2px;
  border-radius: var(--r-ui, 8px); background: var(--rel-tag); color: var(--rel-tag-ink); pointer-events: auto; text-align: center;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.rel-nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px / 1.25 var(--rel-name-font); text-transform: var(--rel-name-case); letter-spacing: var(--rel-name-track); }
.rel-role { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 10px / 1.3 var(--font-label, var(--font-ui)); text-transform: var(--label-case, none); letter-spacing: .04em; color: var(--rel-tag-sub); }
.rel-role:empty { display: none; }
/* the tree: a long name takes two lines under its picture rather than an ellipsis */
.rel-treeview .rel-node:not(.ego) .rel-nm { white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: center; max-width: 124px; }
.rel-node.ego .rel-lbl { max-width: 220px; padding: 2px 9px 3px; background: var(--rel-ego-tag); color: var(--rel-ego-ink); }
.rel-node.conflict .rel-lbl { background: var(--rel-conflict-tag); color: var(--rel-conflict-ink); }
.rel-node.conflict .rel-role { color: inherit; opacity: .8; }
/* names outward from the ring (js place): level at the sides, turned along the ring when it is crowded */
.rel-lbl { transform-origin: 0 0; }
.rel-node[data-side="r"] .rel-lbl, .rel-node[data-side="rr"] .rel-lbl { align-items: flex-start; text-align: left; }
.rel-node[data-side="l"] .rel-lbl, .rel-node[data-side="rl"] .rel-lbl { align-items: flex-end; text-align: right; }
.rel-node:is([data-side="rr"], [data-side="rl"]) .rel-lbl { padding-block: 0; background: transparent; color: var(--text); }
.rel-node:is([data-side="rr"], [data-side="rl"]) .rel-nm { font-size: 11.5px; text-shadow: 0 0 3px var(--panel, var(--bg)), 0 0 3px var(--panel, var(--bg)); }
.rel-node:is([data-side="rr"], [data-side="rl"]) .rel-role { display: none; }
.rel-node.ego .rel-nm { font: 650 15px / 1.25 var(--rel-name-font); }
/* hover: the theme's own kind (style.css → Ink hover, Solid hover lists); lift by default */
.rel-node:not(.ego):hover .rel-lbl { box-shadow: 0 0 0 var(--hair, 1px) var(--hover-edge, var(--accent)), var(--glow, none); }
/* one person lit: only they change (their picture pops, js liftTo; their name takes the hover; their lines light), nobody
   else fades. A kind picked in the chips is different: the other kinds step back (labels by colour, pictures a touch) */
.rel-node.lifted { z-index: 1; }
.rel-solo .rel-node.off .rel-lbl { color: color-mix(in srgb, var(--text) 62%, transparent); background: transparent; }
.rel-solo .rel-node.off .rel-role { color: color-mix(in srgb, var(--muted) 50%, transparent); }
.rel-solo .rel-node.off .rel-pic { opacity: .45; }
.rel-pic { transition: opacity .2s ease; }

/* each sector's name, at its middle beyond the ring */
.rel-sector {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 600 var(--t-meta, 11px) / 1 var(--font-label, var(--font-ui)); text-transform: var(--label-case, uppercase); letter-spacing: .08em; color: var(--muted);
}
.rel-sector svg { color: var(--k); flex: none; }
.rel-sector span { text-shadow: 0 0 4px var(--panel, var(--bg)), 0 0 4px var(--panel, var(--bg)); }
.rel-sector[data-kind], .rel-chip, .rel-group, .rel-life { --k: var(--rel-k-friends); }
:is(.rel-sector, .rel-chip, .rel-group, .rel-life)[data-kind="family"] { --k: var(--rel-k-family); }
:is(.rel-sector, .rel-chip, .rel-group, .rel-life)[data-kind="teachers"] { --k: var(--rel-k-teachers); }
:is(.rel-sector, .rel-chip, .rel-group, .rel-life)[data-kind="students"] { --k: var(--rel-k-students); }
:is(.rel-sector, .rel-chip, .rel-group, .rel-life)[data-kind="influences"] { --k: var(--rel-k-influences); }
:is(.rel-sector, .rel-chip, .rel-group, .rel-life)[data-kind="influenced"] { --k: var(--rel-k-influenced); }
:is(.rel-sector, .rel-chip, .rel-group, .rel-life)[data-kind="patrons"] { --k: var(--rel-k-patrons); }
:is(.rel-sector, .rel-chip, .rel-group, .rel-life)[data-kind="rivals"] { --k: var(--rel-k-rivals); }
:is(.rel-sector, .rel-chip, .rel-group, .rel-life)[data-kind="era"] { --k: var(--rel-k-era); }
.rel-solo .rel-sector { opacity: .4; }

/* the floating controls: the theme's sheet, one hairline, its corner (as the map's) */
:is(.rel-hist, .rel-top .seg, .rel-zoom, .rel-lives, .rel-tip) { background: var(--rel-sheet); box-shadow: inset 0 0 0 var(--hair, 1px) var(--line), var(--shadow-pop, none); }
.rel-top { position: absolute; left: var(--rel-gap); right: var(--rel-gap); top: var(--rel-gap); display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; }
.rel-top > * { pointer-events: auto; }
.rel-hist { position: absolute; left: 0; top: 0; display: flex; gap: 2px; padding: 3px; border-radius: var(--r-ui, 999px); }
.rel-hist .btn { width: 36px; padding: 0; justify-content: center; box-shadow: none; background: none; }
.rel-hist .btn:disabled { opacity: .35; pointer-events: none; }
.relview .seg button { height: 36px; padding-block: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.relview .seg button:disabled { opacity: .4; pointer-events: none; }
.relview .btn { height: 36px; }
@media (pointer: coarse) { .relview .seg button { height: 38px; } .relview .btn { min-height: 38px; } }
.rel-zoom { position: absolute; right: var(--rel-gap); top: calc(var(--rel-gap) + 50px); display: flex; flex-direction: column; gap: 2px; padding: 3px; border-radius: var(--r-ui, 999px); }
.rel-zoom .btn { width: 36px; padding: 0; justify-content: center; box-shadow: none; background: none; }
.rel-tip {
  position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 1px; max-width: 280px; padding: 6px 10px;
  border-radius: var(--r-ui, 10px); pointer-events: none; font: 12px / 1.35 var(--font-ui);
}
.rel-tip b { font: 600 13px / 1.3 var(--font-name, var(--font-ui)); }
.rel-tip span { color: var(--muted); }
.rel-tip[hidden] { display: none; }

/* ---- lifetimes: the lives side by side ---- */
.rel-lives { position: absolute; left: var(--rel-gap); right: var(--rel-gap); bottom: var(--rel-gap); border-radius: var(--r-ui, 14px); cursor: auto; touch-action: auto; }
.rel-lives-h {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 2px 4px 0 12px; color: var(--text);
  font: 600 var(--t-meta, 11px) / 1 var(--font-label, var(--font-ui)); text-transform: var(--label-case, uppercase); letter-spacing: .08em;
}
.rel-lives-tg { margin-left: auto; width: 36px; padding: 0; justify-content: center; box-shadow: none; background: none; }
.rel-lives-sub { color: var(--muted); font: 500 11px / 1 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); letter-spacing: 0; text-transform: none; }
.rel-lives-tg svg { transition: rotate .3s ease; }
.rel-lives.shut .rel-lives-tg svg { rotate: 180deg; }
.rel-lives.shut .rel-lives-body { display: none; }
.rel-lives-body { position: relative; margin: 0 12px 10px; padding-top: 16px; max-height: min(150px, 24dvh); overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rel-ticks { position: sticky; top: -16px; height: 0; z-index: 1; }
.rel-ticks span { position: absolute; top: -15px; translate: -50% 0; font: 10px / 1 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); color: var(--muted); white-space: nowrap; }
.rel-band { position: absolute; top: 0; height: calc(16px + var(--rows, 1) * 15px); border-inline: var(--hair, 1px) solid color-mix(in srgb, var(--rel-ego-ring) 55%, transparent); background: color-mix(in srgb, var(--rel-ego-ring) 7%, transparent); pointer-events: none; }
.rel-rows { position: relative; margin: 0; padding: 0; list-style: none; }
.rel-life { position: relative; height: 15px; cursor: var(--cur-pointer, pointer); color: var(--text); }
.rel-bar { position: absolute; top: 5px; height: 5px; border-radius: min(3px, var(--r-ui, 3px)); background: var(--k); opacity: .75; }
.rel-life[data-kind="ego"] { cursor: default; }
.rel-life[data-kind="ego"] .rel-bar { background: var(--rel-ego-ring); opacity: 1; height: 7px; top: 4px; }
.rel-life-nm { position: absolute; top: 0; padding-left: 4px; translate: 0 -1px; white-space: nowrap; font: 500 11px / 15px var(--font-name, var(--font-ui)); text-shadow: 0 0 3px var(--rel-sheet), 0 0 3px var(--rel-sheet); pointer-events: none; }
.rel-life-nm { margin-top: -8px; }
.rel-life[data-kind="ego"] .rel-life-nm { font-weight: 700; }
/* a narrow stage (js narrow): short names under the pictures, two lines at most */
.rel-narrow .rel-node:not(.ego) .rel-lbl { max-width: 96px; }
.rel-narrow .rel-node:not(.ego):not([data-side="rr"], [data-side="rl"]) .rel-nm { white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11px; }
.rel-narrow .rel-node:is([data-side="rr"], [data-side="rl"]) .rel-nm { font-size: 10.5px; }
.rel-life-nm.end { padding: 0 4px 0 0; text-align: right; }
.rel-sector[hidden] { display: none; }
.rel-life:not([data-kind="ego"]):hover { color: var(--hover-ink, var(--accent)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rel-life:is(:hover, .hot) .rel-bar { opacity: 1; box-shadow: 0 0 0 var(--hair, 1px) var(--rel-sheet), 0 0 0 calc(var(--hair, 1px) * 2) var(--k); }
.rel-life.hot .rel-life-nm { color: var(--hover-ink, var(--accent)); }

/* ---- the side panel ---- */
.rel-side { contain: layout style; position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--rel-sheet); box-shadow: inset var(--hair, 1px) 0 0 var(--line); }
.rel-grab { display: none; }
.rel-pending :is(.rel-kinds, .rel-who, .rel-line) { visibility: hidden; }
.rel-scroll { flex: 1; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; padding: 0 0 64px; scrollbar-width: thin; }   /* the foot keeps clear of the version bar */
.rel-hero { --hero-h: 220px; --hero-fade: linear-gradient(#000 45%, rgba(0,0,0,.35) 78%, transparent); padding: 18px 18px 6px; }
.rel-hero .portrait { position: relative; display: block; overflow: hidden; width: calc(100% + 36px); height: var(--hero-h); margin: -18px -18px 0; -webkit-mask-image: var(--hero-fade); mask-image: var(--hero-fade); container-type: size; }
.rel-hero .portrait + .rel-hero-txt { margin-top: -38px; position: relative; }
.rel-cat { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font: 600 var(--t-meta, 11px) / 1.2 var(--font-label, var(--font-ui)); text-transform: var(--label-case, uppercase); letter-spacing: .08em; color: var(--muted); }
.rel-cat-ic { display: inline-flex; color: var(--c); }
.rel-hero h2 { margin: 0; font: 650 22px / 1.15 var(--font-title, var(--font-name, var(--font-ui))); color: var(--text); text-wrap: balance; }
.rel-dates { margin: 4px 0 0; font: 13px / 1.3 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); color: var(--muted); }
.rel-note { margin: 10px 0 0; font: 13.5px / 1.5 var(--font-prose, var(--font-ui)); color: var(--text); }
.rel-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rel-acts .btn { padding: 0 12px; }
.rel-kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 6px; }
.rel-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 11px 0 9px; border: 0; border-radius: var(--r-ui, 999px);
  background: var(--surface-2); box-shadow: inset 0 0 0 var(--hair, 1px) var(--cap-ring, var(--line)); color: var(--text); font: 500 var(--t-ui, 13px) / 1 var(--font-ui);
  cursor: var(--cur-pointer, pointer); transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.rel-chip svg { color: var(--k); flex: none; }
.rel-chip .rel-n, .rel-n { font: 500 11px / 1 var(--font-date, var(--font-ui)); color: var(--muted); }
.rel-chip:hover { box-shadow: inset 0 0 0 var(--hair, 1px) var(--k); }
.rel-chip[aria-pressed="true"] { background: var(--solid, var(--accent)); color: var(--on-accent); box-shadow: none; }
.rel-chip[aria-pressed="true"] :is(svg, .rel-n) { color: inherit; }
.rel-who { padding: 4px 10px 0; }
.rel-group { padding-top: 10px; transition: opacity .2s ease; }
.rel-group.off { opacity: .4; }
.rel-group h3, .rel-line h3 {
  display: flex; align-items: center; gap: 7px; margin: 0 8px 4px; font: 600 var(--t-meta, 11px) / 1.2 var(--font-label, var(--font-ui));
  text-transform: var(--label-case, uppercase); letter-spacing: .08em; color: var(--muted);
}
.rel-group h3 svg { color: var(--k); }
.rel-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; align-items: start; width: 100%; padding: 7px 8px; border: 0;
  border-radius: var(--r-ui, 10px); background: none; text-align: left; color: var(--text); cursor: var(--cur-pointer, pointer);
  transition: background-color .2s ease, color .2s ease;
}
/* rows out of sight cost nothing until scrolled to (Safari laid them all out after each step) */
.rel-row { content-visibility: auto; contain-intrinsic-size: auto 72px; }
.rel-row:hover, .rel-row.hot { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rel-rpic { position: relative; grid-row: 1 / 5; width: 40px; height: 40px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--c, var(--muted)) 26%, var(--surface-2)); box-shadow: 0 0 0 var(--hair, 1px) var(--k); }
.rel-rnm { font: 600 13.5px / 1.25 var(--font-name, var(--font-ui)); }
.rel-rsay { font: 500 12px / 1.3 var(--font-ui); color: var(--k); filter: saturate(1.1); }
.rel-rmeet { font: 11.5px / 1.35 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); color: var(--muted); }
.rel-rnote { margin-top: 2px; font: 12px / 1.4 var(--font-prose, var(--font-ui)); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-empty { margin: 8px 8px 0; font: 13px / 1.45 var(--font-ui); color: var(--muted); }
.rel-line { padding: 14px 10px 0; }
.rel-line[hidden] { display: none; }
.rel-line ol { position: relative; margin: 0; padding: 0 0 0 8px; list-style: none; }
.rel-line ol::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: var(--hair, 1px); background: var(--rel-k-patrons); }
.rel-heir {
  position: relative; display: grid; grid-template-columns: 1fr; width: 100%; padding: 6px 8px 6px 22px; border: 0; border-radius: var(--r-ui, 10px); background: none;
  text-align: left; color: var(--text); cursor: var(--cur-pointer, pointer); min-height: 36px; transition: background-color .2s ease, color .2s ease;
}
.rel-heir::before { content: ""; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%; background: var(--rel-sheet); box-shadow: inset 0 0 0 var(--hair, 1px) var(--rel-k-patrons); }
.rel-heir.me::before { background: var(--rel-k-patrons); }
.rel-heir.me { cursor: default; }
.rel-heir:not(.me):hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rel-heir-nm { font: 600 13px / 1.25 var(--font-name, var(--font-ui)); }
.rel-heir.me .rel-heir-nm { font-weight: 750; }
.rel-heir-y { font: 11.5px / 1.3 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); color: var(--muted); }

/* the info card's way here (js/card.js `more`) */
.detail .d-rel { margin: 12px 0 2px; align-self: flex-start; }
.d-rel-n { font: 500 11px / 1 var(--font-date, var(--font-ui)); opacity: .75; }

/* ---- smaller screens ---- */
@media (max-width: 1100px) { .relview { grid-template-columns: minmax(0, 1fr) 310px; } .rel-hero { --hero-h: 180px; } }
/* short screens (phones on their side): no lifetimes on the stage (on the sheet below 901px: js placeLives), a narrower panel */
@media (max-height: 500px) and (min-width: 761px) and (max-width: 900px) { .rel-lives { display: none; } }
@media (max-height: 500px) { .relview .rel-side .rel-hero { --hero-h: 110px; } .relview .rel-side .rel-hero .portrait + .rel-hero-txt { margin-top: -30px; } }   /* over any theme's own height */
@media (max-height: 500px) and (min-width: 901px) {
  .relview { grid-template-columns: minmax(0, 1fr) 280px; }
  .rel-lives { display: none; }
  .rel-hero { --hero-h: 120px; }
  .rel-zoom { flex-direction: row; top: auto; bottom: var(--rel-gap); }
}
/* phones and tablets held upright: the stage fills the view, the panel is a sheet over its lower part with a handle
   (its top shows the person) */
@media (max-width: 900px) {
  .relview { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .rel-stage { grid-area: 1 / 1; }
  .rel-side {
    grid-area: 1 / 1; align-self: end; z-index: 2; height: min(78dvh, 100%); translate: 0 calc(100% - var(--rel-peek, 132px));
    border-radius: 16px 16px 0 0; box-shadow: inset 0 var(--hair, 1px) 0 var(--line), 0 -6px 24px -12px rgb(0 0 0 / .3); transition: translate .48s cubic-bezier(.32, .72, 0, 1);
  }
  .rel-side.open { translate: 0 0; }
  .rel-grab { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; min-height: 40px; padding: 8px 16px 2px; border: 0; background: none; color: var(--muted); font: 600 var(--t-meta, 11px) / 1.2 var(--font-label, var(--font-ui)); text-transform: var(--label-case, uppercase); letter-spacing: .06em; cursor: var(--cur-pointer, pointer); }
  .rel-grab::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); }
  .rel-hero { --hero-h: 0px; display: grid; grid-template-columns: 1fr; padding-top: 2px; }
  .rel-hero .portrait { display: none; }
  .rel-hero .portrait + .rel-hero-txt { margin-top: 0; }
  .rel-hero h2 { font-size: 18px; }
  .rel-side:not(.open) .rel-scroll { overflow: hidden; }
  .rel-hist { position: static; }
  .rel-top { justify-content: space-between; }
  .rel-lives { bottom: calc(var(--rel-peek, 132px) + var(--rel-gap)); }
}
/* phones: the lifetimes move into the sheet (js placeLives), the zoom buttons go (pinch), the switch keeps its icons */
@media (max-width: 760px) {
  .rel-lives { position: relative; left: auto; right: auto; bottom: auto; margin: 12px 10px 0; box-shadow: inset 0 0 0 var(--hair, 1px) var(--line); }
  .rel-lives-body { max-height: none; }
  .rel-zoom { display: none; }
  .rel-mode span { display: none; }
  .rel-mode button { padding-inline: 12px; }
  .rel-node.ego .rel-nm { font-size: 13px; }
}
@media (max-width: 900px) and (max-height: 500px) { .rel-side { --rel-peek: 96px; } }
@media (prefers-reduced-motion: reduce) { .rel-side, .rel-lives-tg svg { transition: none; } }