/* KinshipRings v3: concentric annuli, nodes on the annulus midline, readable two-line labels. */
.rel-page {
  --rel-line: var(--line, #e1e4e8);
  --kin-full: #2f6cbc; --kin-full-soft: #eef3fb; --kin-full-line: #b9cde9;
  --kin-half: #237a78; --kin-half-soft: #edf5f4; --kin-half-line: #a9cfcb;
  --kin-cousins: #9c5638; --kin-cousins-soft: #faf4f1; --kin-cousins-line: #e2c6b8;
  color: var(--ink, #22262c); background: #fcfdfe; min-width: 0; border: 1px solid var(--rel-line); border-radius: var(--radius, 8px); overflow: hidden;
}
.rel-page *, .rel-picker * { box-sizing: border-box; letter-spacing: 0; }
.rel-page .is-full { --rel-accent: var(--kin-full); --rel-soft: var(--kin-full-soft); --rel-edge: var(--kin-full-line); }
.rel-page .is-half { --rel-accent: var(--kin-half); --rel-soft: var(--kin-half-soft); --rel-edge: var(--kin-half-line); }
.rel-page .is-cousins { --rel-accent: var(--kin-cousins); --rel-soft: var(--kin-cousins-soft); --rel-edge: var(--kin-cousins-line); }

/* Header and focus picker */
.rel-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--rel-line); border-radius: 0; background: rgba(248,250,252,.86); backdrop-filter: blur(20px); }
.rel-header h1 { flex: 1; font-size: 20px; line-height: 1.4; margin: 0; }
.rel-page .icon-button { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 10px; border-radius: var(--radius, 8px); }
.rel-page button:focus-visible, .rel-picker button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rel-page button { touch-action: manipulation; }
.rel-subheader { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--rel-line); }
.rel-focus-picker { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; width: min(420px,100%); min-height: 52px; border: 1px solid transparent; border-radius: var(--radius, 8px); padding: 4px 8px 4px 4px; margin-left: -4px; color: inherit; background: transparent; }
.rel-focus-picker:hover { border-color: var(--line-strong, #ccd1d8); background: #fff; }
.rel-focus-picker > span:not(.rel-photo) { flex: 1; min-width: 0; }
.rel-focus-picker strong, .rel-focus-picker small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-focus-picker strong { font-size: 16px; line-height: 1.5; font-weight: 600; }
.rel-focus-picker small { color: var(--muted, #565c66); font-size: 12px; line-height: 1.6; }
.rel-focus-picker > svg { flex: 0 0 18px; color: var(--icon, #7d848e); }
.rel-tree-link { margin-left: auto; flex-shrink: 0; }
.rel-photo { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; overflow: hidden; background: #e6eaee; display: grid; place-items: center; }
.rel-photo img { width: 100%; height: 100%; object-fit: cover; }
.rel-photo .pedigree-node-placeholder { border-radius: 50%; color: #697681; background: #e6eaee; }
.rel-photo svg { width: 24px; height: 24px; }

/* Filters are a segmented control; the colour dot doubles as the ring legend. */
.rel-filters { display: inline-flex; gap: 2px; margin: 14px 18px 4px; padding: 3px; border-radius: var(--radius, 8px); background: var(--segmented-track, #e9ecf0); max-width: calc(100% - 36px); }
.rel-filters button { min-height: 38px; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px; color: var(--muted, #565c66); border: 0; border-radius: 6px; font-size: 13px; font-weight: 500; background: transparent; white-space: nowrap; }
.rel-filters button span { font-size: 12px; color: var(--quiet, #6a707a); font-variant-numeric: tabular-nums; }
.rel-filters button.is-active { background: #fff; color: var(--ink, #22262c); box-shadow: 0 1px 4px #26324312; }
.rel-filters button.is-active span { color: var(--ink, #22262c); }
.rel-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--rel-accent); }

/* Workspace */
.rel-workspace { display: grid; grid-template-columns: minmax(0,1fr) 340px; min-width: 0; align-items: start; }
.rel-visual { padding: 10px 18px 18px; min-width: 0; }
.rel-map { position: relative; width: min(100%, max(420px, calc((100dvh - 380px) / 1.08))); max-width: 620px; aspect-ratio: 1 / 1.08; overflow: hidden; margin: auto; touch-action: none; user-select: none; cursor: grab; }
.rel-map.is-dragging { cursor: grabbing; }
.rel-plane { position: absolute; inset: 0; transform-origin: 50% 50%; }
.rel-band { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--rel-edge); background: var(--rel-soft); pointer-events: none; transition: opacity var(--motion-standard, 200ms); }
.rel-band.is-full { background: radial-gradient(circle, #fff 0 34%, var(--rel-soft) 62%); }
.rel-band.is-muted { opacity: .38; }
.rel-band-label { position: absolute; left: 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border: 1px solid var(--rel-edge); border-radius: var(--radius-full, 999px); background: #fff; color: var(--rel-accent); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.rel-band-label b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rel-connection { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rel-connection path { fill: none; stroke: var(--rel-accent); stroke-width: 1.75px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; }

/* Nodes: the button is the 44px hit target centred on the ring; the label hangs below it. */
.rel-member, .rel-subject { position: absolute; transform: translate(-50%,-50%); border: 0; color: var(--ink, #22262c); background: transparent; padding: 0; text-align: center; }
.rel-member { z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; }
.rel-member:active:not(:disabled), .rel-subject:active:not(:disabled) { transform: translate(-50%,-50%); }
.rel-member:active .rel-photo, .rel-subject:active .rel-photo { filter: brightness(.94); }
.rel-member .rel-photo { width: var(--rel-photo, 34px); height: var(--rel-photo, 34px); flex-basis: var(--rel-photo, 34px); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--rel-edge); }
.rel-member .rel-photo svg { width: 60%; height: 60%; }
.rel-member strong { position: absolute; left: 50%; top: calc(50% + var(--rel-photo, 34px) / 2 + 4px); transform: translateX(-50%); width: max-content; max-width: var(--rel-label, 76px); padding: 0 4px; border-radius: var(--radius-sm, 4px); background: #ffffffd9; font-size: 12px; line-height: 16px; font-weight: 500; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rel-member.label-above strong, .rel-more.label-above small { top: auto; bottom: calc(50% + var(--rel-photo, 34px) / 2 + 4px); }
.rel-member.is-selected { z-index: 4; }
.rel-member.is-selected .rel-photo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rel-accent); }
.rel-member.is-selected strong { color: #fff; background: var(--rel-accent); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .rel-member:hover { z-index: 5; }
  .rel-member:hover .rel-photo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rel-accent); }
  .rel-member:hover strong { color: var(--rel-accent); }
  .rel-member.is-selected:hover strong { color: #fff; }
}
.rel-more > span { display: grid; place-items: center; width: var(--rel-photo, 34px); height: var(--rel-photo, 34px); border: 1px dashed var(--rel-accent); border-radius: 50%; background: #fff; color: var(--rel-accent); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rel-more small { position: absolute; left: 50%; top: calc(50% + var(--rel-photo, 34px) / 2 + 4px); transform: translateX(-50%); white-space: nowrap; color: var(--rel-accent); font-size: 12px; line-height: 16px; padding: 0 4px; border-radius: var(--radius-sm, 4px); background: #ffffffd9; }
.rel-subject { z-index: 3; top: 50%; left: 50%; width: var(--rel-subject-w, 112px); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rel-subject .rel-photo { width: var(--rel-subject-photo, 56px); height: var(--rel-subject-photo, 56px); flex: 0 0 var(--rel-subject-photo, 56px); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--accent), 0 4px 14px #2b3a5226; }
.rel-subject .rel-photo svg { width: 30px; height: 30px; }
.rel-subject strong { padding: 0 5px; border-radius: var(--radius-sm, 4px); background: #ffffffe0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; max-width: 100%; font-size: 13px; line-height: 17px; font-weight: 600; }
.rel-subject small { position: absolute; top: calc(var(--rel-subject-photo, 56px) - 10px); left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: var(--radius-full, 999px); background: var(--accent); color: #fff; font-size: 12px; line-height: 18px; }

.rel-map-toolbar { display: flex; justify-content: center; align-items: center; gap: 8px; padding-top: 12px; }
.rel-map-toolbar output { min-width: 50px; text-align: center; color: var(--muted, #565c66); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Inspector */
.rel-inspector { min-width: 0; border-left: 1px solid var(--rel-line); background: rgba(246,248,251,.82); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.rel-inspector > header { min-height: 62px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rel-line); }
.rel-inspector h2 { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
.rel-inspector > header > h2 { flex: 1; }
.rel-inspector > header > span { color: var(--muted, #565c66); font-size: 12px; font-variant-numeric: tabular-nums; }
.rel-detail-head > div { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 2px; }
.rel-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-full, 999px); background: var(--rel-soft, #eef1f4); color: var(--rel-accent, #565c66); font-size: 12px; font-style: normal; font-weight: 500; white-space: nowrap; }
.rel-inspector .rel-row { display: flex; align-items: center; width: 100%; gap: 10px; min-height: 68px; padding: 10px 12px 10px 14px; border: 0; border-bottom: 1px solid var(--line, #e1e4e8); border-radius: 0; text-align: left; background: #fff; color: inherit; }
.rel-row > span:not(.rel-photo) { flex: 1; min-width: 0; }
.rel-row strong { display: block; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; font-weight: 600; }
.rel-row small { display: block; color: var(--muted, #565c66); font-size: 12px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-row > svg { width: 16px; flex: 0 0 16px; color: var(--icon, #7d848e); }
.rel-inspector .rel-row .rel-photo { width: 40px; height: 40px; flex-basis: 40px; }
@media (hover: hover) and (pointer: fine) { .rel-inspector .rel-row:hover { background: #f4f7fb; } }
.rel-evidence { padding: 0 16px 16px; }
.rel-ring-number { color: var(--muted, #565c66); overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
.rel-evidence dl { margin: 0; display: grid; gap: 14px; }
.rel-evidence dl > div { display: grid; gap: 4px; }
.rel-evidence dt { color: var(--muted, #565c66); font-size: 12px; }
.rel-evidence dd { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.rel-path-title { font-size: 12px; font-weight: 500; color: var(--muted, #565c66); margin: 16px 0 8px; }
.rel-evidence-path { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; padding: 10px; border: 1px solid var(--line, #e1e4e8); border-radius: var(--radius, 8px); background: #fff; font-size: 13px; line-height: 1.6; }
.rel-evidence-path svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--icon, #7d848e); }
.rel-evidence-path > span { min-width: 0; max-width: 100%; }
.rel-evidence-path small { display: block; font-size: 12px; color: var(--quiet, #6a707a); }
.rel-evidence-path strong { display: block; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.rel-other-paths { margin-top: 12px; font-size: 12px; color: var(--muted, #565c66); }
.rel-other-paths summary { padding: 10px 0; cursor: pointer; min-height: 44px; }
.rel-other-paths .rel-evidence-path { margin-bottom: 8px; }
.rel-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.rel-detail-actions button { padding: 10px 8px; min-height: 44px; font-size: 13px; gap: 6px; }
.rel-detail-actions svg { width: 17px; height: 17px; }
.rel-pagination { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 12px; color: var(--muted, #565c66); font-variant-numeric: tabular-nums; }
.rel-empty, .rel-load-state { display: grid; justify-items: center; align-content: center; gap: 10px; padding: 32px 22px; text-align: center; }
.rel-empty > svg { width: 30px; height: 30px; color: var(--accent); }
.rel-empty strong { font-size: 14px; font-weight: 600; }
.rel-empty span { color: var(--muted, #565c66); font-size: 12px; line-height: 1.6; max-width: 260px; }
.rel-empty .secondary-button { margin-top: 6px; }
.rel-empty .secondary-button svg { width: 17px; height: 17px; color: currentColor; }
.rel-load-state { min-height: 360px; }
.rel-load-state p { max-width: 100%; overflow-wrap: anywhere; }
.rel-spinner { width: 24px; height: 24px; border: 2px solid #d3dce6; border-top-color: var(--accent); border-radius: 50%; animation: rel-spin .8s linear infinite; }
.rel-page.is-fullscreen { position: fixed; inset: 0; z-index: 90; overflow: auto; border: 0; border-radius: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.rel-page.is-fullscreen .rel-workspace { max-width: 1440px; margin: auto; }
.rel-page.is-fullscreen .rel-map { width: min(100%, max(420px, calc((100dvh - 260px) / 1.08))); max-width: 760px; }

/* Picker dialog and the new-archive form share this stylesheet. */
.rel-picker { display: grid; gap: 12px; }
.rel-picker input { width: 100%; min-height: 44px; font-size: 16px; }
.rel-picker [data-rel-results] { max-height: 55dvh; overflow: auto; }
.rel-picker .rel-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; border: 0; border-bottom: 1px solid var(--line, #e1e4e8); border-radius: 0; padding: 10px 0; text-align: left; color: inherit; background: transparent; }
.rel-picker .rel-row > span:not(.rel-photo) { flex: 1; min-width: 0; }
.rel-picker .rel-row strong { display: block; font-size: 14px; font-weight: 600; }
.rel-picker .rel-row small { display: block; font-size: 12px; color: var(--muted, #565c66); }
#new-pigeon-form #new-ring { font-size: 16px; }
#new-pigeon-form label small { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 8px; }
@keyframes rel-spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .rel-workspace { grid-template-columns: minmax(0,1fr); }
  .rel-map { width: 100%; max-width: 520px; }
  .rel-inspector { border-left: 0; border-top: 1px solid var(--rel-line); }
  .rel-list { max-height: 420px; overflow-y: auto; }
  .rel-evidence dl > div { grid-template-columns: 84px minmax(0,1fr); }
  .rel-evidence dl { gap: 10px; }
  .rel-detail-actions { padding-top: 0; }
}
@media (max-width: 600px) {
  body.pedigree-fullscreen-active .topbar, body.pedigree-fullscreen-active .bottom-nav { display: none; }
  body.pedigree-fullscreen-active .app-shell { display: block; padding: 0; }
  body.pedigree-fullscreen-active #main-content { margin: 0; padding: 0; width: 100%; }
  body.pedigree-fullscreen-active .pedigree-explorer { min-height: 0; height: 100dvh; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); }
  body.pedigree-fullscreen-active .kinship-map-controls { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .pedigree-title small, .pedigree-title span { font-size: 12px; }
  .pedigree-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.kinship-view-active .topbar, body.kinship-view-active .bottom-nav { display: none; }
  body.kinship-view-active .app-shell { display: block; padding: 0; }
  body.kinship-view-active #main-content { margin: 0; padding: 0; width: 100%; }
  .rel-page { min-height: 100dvh; border: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
  .rel-header { padding: calc(6px + env(safe-area-inset-top)) 10px 6px; gap: 4px; }
  .rel-header h1 { font-size: 18px; }
  .rel-header .icon-button { border: 0; background: transparent; }
  .rel-subheader { padding: 8px 14px; gap: 6px; }
  .rel-subheader .rel-tree-link { min-width: 44px; width: 44px; height: 44px; padding: 10px; }
  .rel-tree-link span { display: none; }
  .rel-filters { display: flex; margin: 10px 12px 2px; max-width: none; }
  .rel-filters button { flex: 1; padding: 6px 2px; gap: 4px; font-size: 13px; }
  .rel-visual { padding: 6px 12px 8px; }
  .rel-map-toolbar { padding-top: 6px; }
  .rel-list { max-height: none; overflow: visible; }
}
@media (max-width: 374px) {
  .rel-filters .rel-dot { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rel-spinner { animation: none; } .rel-band { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .rel-header, .rel-inspector { background: #f5f7f9; backdrop-filter: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rel-photo { transition: box-shadow var(--motion-standard) var(--motion-ease), filter var(--motion-quick); }
  .rel-filters button, .rel-row { transition: background-color var(--motion-standard), border-color var(--motion-standard), color var(--motion-standard); }
  .rel-member strong { transition: color var(--motion-quick), background-color var(--motion-quick); }
}