/* "Hvordan er vi i slekt?" (B325): two pickers, the sentence, and the two lines down from the shared ancestor. */
.kin-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin: 24px 0 32px; }
.kin-pick { position: relative; flex: 1 1 280px; display: flex; flex-direction: column; gap: 6px; }
.kin-pick label { font-weight: 700; color: var(--heading); }
.kin-pick input[type='search'] { min-height: 50px; padding: 0 18px; border: 1px solid var(--chip); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 1rem; }
.suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin: 4px 0 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); }
.suggestions li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.suggestions li[aria-selected='true'], .suggestions li:hover { background: var(--brass-soft); }
.suggestions img, .suggestions .mono { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; font-size: 0.85rem; }
.suggestions small { display: block; color: var(--muted); }
.kin-result { padding: 32px; background: var(--card); border: 1px solid var(--rule); border-radius: 22px; }
.kin-sentence { margin: 6px 0 28px; font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; color: var(--heading); }
.kin-tree { display: flex; flex-direction: column; align-items: center; }
.kin-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.kin-chip { font-weight: 700; color: var(--brass); }
.kin-shared { margin: 8px 0 0; font-size: 0.875rem; color: var(--muted); }
.kin-legs { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; margin-top: 8px; }
.kin-leg { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: center; }
.kin-leg li { display: flex; flex-direction: column; align-items: center; }
.kin-leg li::before { content: ''; width: 2px; height: 26px; background: var(--chip); }
.kin-card { box-sizing: border-box; display: flex; gap: 12px; align-items: center; width: 300px; max-width: 100%; height: 84px; padding: 10px 16px 10px 10px; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; text-decoration: none; color: var(--ink); }
.kin-card .face { flex: none; }
.kin-card > span:last-child { min-width: 0; }
.kin-card strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.25; }
.kin-card .small { display: block; }
.kin-card.picked { border-color: var(--navy); background: var(--card); box-shadow: 0 0 0 1px var(--navy), 0 0 0 5px rgba(14, 104, 114, 0.18); }
.kin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; justify-content: center; }
.kin-entry { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
@media (max-width: 760px) { .kin-result { padding: 20px; } .kin-card { width: 100%; } .kin-legs { flex-direction: column; align-items: stretch; } }