@layer components {
  /* Eligibility marks. Meaning, not decoration: green = belongs, stone = not
     eligible (a person, not an error), ochre = protected, seal = needs a human. */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .badge .icon { width: 0.95em; height: 0.95em; }

  .badge--yes { color: var(--vote-yes); background: var(--vote-yes-bg); border-color: rgba(53, 107, 79, 0.28); }
  .badge--no { color: var(--vote-no); background: var(--vote-no-bg); border-color: rgba(125, 117, 106, 0.28); }
  .badge--guard { color: var(--guard); background: var(--guard-bg); border-color: rgba(148, 99, 18, 0.28); }
  .badge--review { color: var(--review); background: var(--review-bg); border-color: rgba(163, 53, 43, 0.28); }

  /* The signature: lineage trail — which generation confers the right (law §3.1,
     depth 4: self · parent · grandparent · great-grandparent). */
  .lineage {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
  }
  .lineage::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 2.6rem;
    right: 2.6rem;
    height: 1.5px;
    background: var(--rule-strong);
  }
  .lineage__gen {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 5.2rem;
    text-align: center;
  }
  .lineage__dot {
    position: relative;
    z-index: 1;
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--ink-4);
    border-radius: 50%;
    background: var(--surface);
  }
  .lineage__label {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--ink-3);
  }
  .lineage__gen.is-source .lineage__dot { background: var(--vote-yes); border-color: var(--vote-yes); }
  .lineage__gen.is-source .lineage__label { color: var(--vote-yes); font-weight: 600; }
}