/* Drzewo przodków: zagnieżdżone listy. Na wąskim ekranie lista z wcięciami, od 62rem układ poziomy z liniami. */
:root { --tree-line: rgba(102, 220, 214, .45); }
.ped, .ps { list-style: none; margin: 0; padding: 0; }
.ped { margin-top: 2rem; }
.card {
  display: grid; gap: .125rem; padding: .75rem 1rem; border-radius: 14px;
  background: var(--tile); border: 1px solid var(--line);
}
.card__role { color: var(--accent); font: 600 .75rem/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.card__name { font-size: 1.0625rem; line-height: 1.3; }
.card__dates { color: var(--text); font-size: .9375rem; }
.card__place { color: var(--muted); font-size: .875rem; }
.card--me { border-color: rgba(102, 220, 214, .5); background: rgba(102, 220, 214, .08); }
.card--living { border-style: dashed; }

/* wąski ekran: wcięte listy */
.n { margin-top: .625rem; }
.ps { margin-left: .75rem; padding-left: 1rem; border-left: 2px solid var(--tree-line); }

@media (min-width: 66rem) {
  .ped { overflow-x: auto; padding-bottom: .5rem; }
  .n { display: flex; align-items: center; position: relative; margin: 0; }
  .card { width: 12.5rem; flex: none; }
  .ps { display: flex; flex-direction: column; position: relative; margin-left: 1.5rem; padding-left: 0; border-left: 0; }
  .ps::before { content: ""; position: absolute; left: -1.5rem; top: 50%; width: 1.5rem; border-top: 2px solid var(--tree-line); }
  .ps > .n { padding: .375rem 0 .375rem 1.5rem; }
  .ps > .n::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.5rem; border-top: 2px solid var(--tree-line); }
  .ps > .n::after { content: ""; position: absolute; left: 0; top: 50%; bottom: 0; border-left: 2px solid var(--tree-line); }
  .ps > .n:last-child::after { top: 0; bottom: 50%; }
}