@layer components {
  /* Pedigree chart (sukupuu), the genealogy-standard left-to-right layout:
     the person in the first column, ancestors fanning right to the
     great-grandparents (law depth 4), placed by Ahnentafel slot. Columns are
     equal fractions so the chart always fits its container — the eight
     great-grandparents stack vertically, where space is free. Each cell
     spans its share of the 8 leaf rows, centring every ancestor on their
     child. Bracket connectors live in the cell's left gutter: a vertical
     toward the child's centre row, an elbow into the child's box, and a
     stub to the ancestor's own box. */
  .ftree {
    --ftree-gap: 1.75rem;
    --ftree-line: 1.5px solid var(--rule-strong);
    display: grid;
    grid-template-columns: repeat(var(--ftree-cols, 4), 1fr);
    grid-auto-rows: 1fr;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ftree__cell {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 3px 0 3px var(--ftree-gap);
    list-style: none;
  }
  .ftree__cell--root { padding-left: 0; }

  /* vertical half of the bracket, toward the child's centre row (the shared
     edge of the parent pair); the elbow into the child's box on the carrier */
  .ftree__cell--upper::before, .ftree__cell--lower::before {
    content: "";
    position: absolute;
    left: 0;
    width: calc(var(--ftree-gap) / 2);
  }
  .ftree__cell--upper::before { top: 50%; bottom: 0; border-right: var(--ftree-line); }
  .ftree__cell--lower::before { top: 0; height: 50%; border-right: var(--ftree-line); }
  .ftree__cell--upper.ftree__cell--link::before { border-bottom: var(--ftree-line); }
  .ftree__cell--lower.ftree__cell--link::before { border-top: var(--ftree-line); }

  /* stub from the bracket to the ancestor's own box */
  .ftree__cell--upper::after, .ftree__cell--lower::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--ftree-gap) / 2);
    width: calc(var(--ftree-gap) / 2);
    border-top: var(--ftree-line);
  }

  .ftree__node {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: var(--space-1) var(--space-2);
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: var(--text-sm);
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .ftree__node small { font-size: var(--text-xs); color: var(--ink-3); }

  .ftree__node--self { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .ftree__node--path { border-color: var(--accent); }
  .ftree__node--source { border-color: var(--vote-yes); background: var(--vote-yes-bg); }
  .ftree__node--source small { color: var(--vote-yes); }

  /* Node marks: ● Sámi language (täppä, before the name), a compact
     effective-right mark (✓/✕, * when board-overridden), a §3.2 tag. */
  .ftree__sami { color: var(--vote-yes); font-size: 0.55em; vertical-align: middle; }
  .ftree__vote { white-space: nowrap; }
  .ftree__vote .icon { width: 12px; height: 12px; vertical-align: text-bottom; }
  .ftree__vote--yes { color: var(--vote-yes); }
  .ftree__vote--no { color: var(--vote-no); }
  .ftree__basis-b {
    font-size: var(--text-xs);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0 3px;
    white-space: nowrap;
  }

  /* Legend under the chart: each item shows the real mark it explains. */
  .ftree-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-3);
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    color: var(--ink-3);
  }
  .ftree-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
  .ftree-legend__swatch {
    width: 0.9em;
    height: 0.9em;
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
  }
  .ftree-legend__swatch--source { border-color: var(--vote-yes); background: var(--vote-yes-bg); }
  .ftree-legend__swatch--self { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
}