/* The Desk tools for family history: GEDCOM, a family tree file opened,
   and COUSIN, a relationship named and drawn.

   GEDCOM's people are names that take you to them, with their years in
   figures that line up; a person's page is facts in a grid and their
   family in plain lists. COUSIN draws the two lines down from a shared
   ancestor in the page's own colours, and its chart is a table of
   buttons. Everything comes from theme.css's tokens. */

/* ------------------------------------------------------------ GEDCOM */

.kn-people { max-height: 520px; overflow: auto; margin-top: 10px; }
.kn-people thead th { position: sticky; top: 0; background: var(--paper-raised); z-index: 1; }

.kn-who {
  font: inherit; font-weight: 600; color: var(--accent-strong);
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-color: var(--accent-border); text-underline-offset: 3px;
}
.kn-who:hover { text-decoration-color: currentColor; }
.kn-yrs { font: var(--text-2xs) var(--font-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kn-place { display: block; font-size: var(--text-2xs); color: var(--ink-soft); }

.kn-name { font-size: var(--text-xl); margin: 0 0 12px; }
.kn-id { font: 400 var(--text-2xs) var(--font-mono); color: var(--ink-soft); }
.kn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; margin: 0 0 6px; }
.kn-facts dt { font: 600 var(--text-2xs) var(--font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.kn-facts dd { margin: 2px 0 0; font-size: var(--text-sm); }

.kn-fam h4 { font: 600 var(--text-sm) var(--font-sans); margin: 18px 0 4px; }
.kn-fam ul { list-style: none; margin: 0; padding: 0; }
.kn-fam li { padding: 6px 0; border-top: 1px solid var(--rule); font-size: var(--text-sm); }
.kn-fam li:first-child { border-top: 0; }
.kn-union { margin: 0 0 10px; }
.kn-union > p { margin: 6px 0 2px; font-size: var(--text-sm); }
.kn-union > ul { margin-left: 18px; }

.kn-kind { font: 600 var(--text-sm) var(--font-sans); margin: 18px 0 6px; }
.kn-kind:first-child { margin-top: 4px; }
.kn-probs { margin: 0; padding-left: 18px; font-size: var(--text-sm); }
.kn-probs li { margin: 4px 0; }
.kn-more { margin-top: 16px; }
.kn-more summary { cursor: pointer; font: 600 var(--text-sm) var(--font-sans); min-height: 44px; display: flex; align-items: center; }
.kn-names { font-size: var(--text-sm); line-height: 1.9; margin: 8px 0 0; }

/* ------------------------------------------------------------ COUSIN */

.kn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.kn-person { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.kn-person legend { font: 600 var(--text-sm) var(--font-sans); padding: 0; margin: 0 0 4px; }

.kn-answer { font-size: var(--text-md); margin: 0; }
.kn-answer + .kn-answer { margin-top: 6px; }
.kn-rel { color: var(--accent-strong); }
.kn-line-text { font-size: var(--text-sm); margin: 12px 0 0; max-width: 76ch; }
.kn-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.kn-figure { margin: 18px 0 0; }
.kn-diagram { background: var(--paper-inset); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 12px; overflow-x: auto; }
.kn-diagram svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.kn-box { fill: var(--paper-raised); stroke: var(--rule-strong); stroke-width: var(--icon-stroke); }
.kn-box.is-top { fill: var(--paper-inset); }
.kn-box.is-who { fill: var(--accent-soft); stroke: var(--accent-strong); }
.kn-line { fill: none; stroke: var(--rule-strong); stroke-width: var(--icon-stroke); }
.kn-t1 { font: 600 var(--text-xs) var(--font-sans); fill: var(--ink); }
.kn-t2 { font: var(--text-2xs) var(--font-sans); fill: var(--ink-soft); }

.kn-chart { min-width: 820px; table-layout: fixed; }
.kn-chart td { padding: 3px; }
.kn-chart thead th, .kn-chart tbody th { font-size: var(--text-2xs); }
.kn-chart thead th { white-space: normal; text-transform: none; letter-spacing: 0; vertical-align: bottom; overflow-wrap: anywhere; }
.kn-cell {
  width: 100%; min-height: 44px; padding: 6px 5px;
  font: var(--text-2xs)/1.3 var(--font-sans); color: var(--ink); text-align: center;
  background: var(--paper-inset); border: 1px solid var(--rule); border-radius: var(--radius-sm); cursor: pointer;
}
.kn-cell:hover { border-color: var(--accent); }
.kn-cell.is-on { border-color: var(--accent-strong); background: var(--accent-soft); font-weight: 600; }
.kn-cell:disabled { color: var(--ink-faint); cursor: default; }
.kn-cell:disabled:hover { border-color: var(--rule); }

@media (max-width: 620px) {
  .kn-pair { grid-template-columns: 1fr; }
}
/* A name in a list is a thing to press, so it gets a finger's height. */
@media (pointer: coarse) {
  .kn-who { min-height: 44px; display: inline-flex; align-items: center; }
}