/* Hallmark · pedigree tree: the in-app ancestor chart
 * Depends on the tokens in style.css; loaded alongside it, never on its own.
 */
/* ── Pedigree (in-app view) ──
 * Mirrors the 4-gen PDF: plain bordered boxes, no fills, lineage carried by a
 * coloured left edge, generations joined by drawn connector rails.
 *
 * Columns are evenly divided, so a cell's centre always lands exactly on the
 * midpoint of its two children's centres — the rails line up without any
 * per-cell measurement. Each cell draws the half-rail on its own side of the
 * sibling boundary; --ped-overhang is how far past its own box that reaches
 * (half the row gap, plus the 1px border the padding box excludes).
 */
.pedigree-wrap {
  --ped-gap: 16px;
  --ped-row-gap: 2px;
  --ped-overhang: calc(var(--ped-row-gap) / 2 + 1px);
  --ped-line: 1px solid var(--color-border-strong);
  overflow: auto;
  overscroll-behavior-x: contain;
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-3);
}
.ped-grid { display: flex; column-gap: var(--ped-gap); min-width: max-content; align-items: stretch; }
.ped-col { display: flex; flex-direction: column; row-gap: var(--ped-row-gap); }
.ped-col[data-gen="0"] { min-width: 175px; }
.ped-col[data-gen="1"] { min-width: 160px; }
.ped-col[data-gen="2"] { min-width: 145px; }
.ped-col[data-gen="3"] { min-width: 135px; }
.ped-col[data-gen="4"] { min-width: 120px; }
.ped-col[data-gen="5"] { min-width: 110px; }
.ped-col[data-gen="6"] { min-width: 95px; }
.ped-cell {
  position: relative;
  border: 1px solid var(--color-border);
  padding: 2px 6px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Connectors: parent stub out to the rail, rail down the sibling pair, child
 * stub in. The upper sibling owns the top half of the rail, the lower the
 * bottom half; they meet on the boundary between the two boxes. */
.ped-cell::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: calc(var(--ped-gap) / 2);
  border-top: var(--ped-line);
}
.ped-cell::before {
  content: '';
  position: absolute;
  right: 100%;
  width: calc(var(--ped-gap) / 2);
  border-left: var(--ped-line);
}
.ped-cell:nth-child(odd)::before {
  top: 50%;
  bottom: calc(-1 * var(--ped-overhang));
  border-top: var(--ped-line);
}
.ped-cell:nth-child(even)::before {
  top: calc(-1 * var(--ped-overhang));
  bottom: 50%;
  border-bottom: var(--ped-line);
}
.ped-col:first-child .ped-cell::before,
.ped-col:last-child .ped-cell::after { display: none; }

.ped-cell[data-gen="0"],
.ped-cell[data-gen="1"],
.ped-cell[data-gen="2"],
.ped-cell[data-gen="3"] { font-size: 0.78rem; }
.ped-cell[data-gen="4"],
.ped-cell[data-gen="5"] { font-size: 0.72rem; }
.ped-cell[data-gen="6"] { font-size: 0.65rem; padding: 1px 4px; }
.ped-subject { border-color: var(--color-ink-2); }
.ped-sire { border-left: 2px solid oklch(70% 0.09 235); }
.ped-dam { border-left: 2px solid oklch(70% 0.09 340); }
.ped-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; overflow: hidden; width: 100%; }
.ped-link:hover { text-decoration: underline; }
.ped-id { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; overflow: hidden; }
.ped-ring { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.ped-sex { color: var(--color-ink-3); flex-shrink: 0; line-height: 1.3; }
.ped-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-ink-2); font-size: 0.85em; line-height: 1.25; }
.ped-traits { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-ink-3); font-size: 0.78em; line-height: 1.25; }
.ped-empty { color: var(--color-ink-4); }