/* RT-FAM-015 — Genetic Ancestors Calculator.
 * Light surfaces throughout: --rt-ink / --rt-ink-soft on --rt-surface, bars in
 * --rt-accent. No navy result box, so no --rt-result-* tokens
 * (docs/contrast-conventions.md). */

.ga-form { display: flex; flex-direction: column; gap: var(--rt-s-4); min-width: 0; }
.ga-controls { display: flex; flex-direction: column; gap: 8px; }
.ga-label { font-size: 15px; font-weight: 600; color: var(--rt-ink); }
.ga-label output { font-family: var(--rt-font-mono); color: var(--rt-accent); }
#ga-gen { width: 100%; accent-color: var(--rt-accent); }
.ga-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ga-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--rt-ink); cursor: pointer; }

.ga-out { min-width: 0; display: flex; flex-direction: column; gap: var(--rt-s-3); }
/* CLS floor for the default (10 generations: hero + 10-row table). */
.ga-out.ga-reserve { min-height: 620px; }
.ga-hero { border: 1px solid var(--rt-hairline); border-radius: var(--rt-r-card); background: var(--rt-surface); padding: var(--rt-s-3) var(--rt-s-4); }
.ga-hero-num { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.15; color: var(--rt-ink); font-variant-numeric: tabular-nums; }
.ga-hero-text { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--rt-ink); }

.ga-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rt-hairline); border-radius: var(--rt-r-card); background: var(--rt-surface); }
.ga-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ga-table th, .ga-table td { padding: 7px 8px; border-bottom: 1px solid var(--rt-hairline); text-align: right; white-space: nowrap; color: var(--rt-ink); }
.ga-table thead th { font-family: var(--rt-font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--rt-ink-muted); font-weight: 600; }
.ga-num { font-variant-numeric: tabular-nums; }
.ga-range, .ga-soft { color: var(--rt-ink-soft); }
.ga-current td { background: var(--rt-accent-soft); }
.ga-barcol { text-align: left; min-width: 120px; }
.ga-bar { display: inline-block; vertical-align: middle; width: 64px; height: 9px; border-radius: 999px; background: var(--rt-surface-2); overflow: hidden; margin-right: 8px; }
.ga-bar-fill { display: block; height: 100%; background: var(--rt-accent); border-radius: 999px; }
.ga-bar-label { font-variant-numeric: tabular-nums; }
.ga-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--rt-ink-soft); }
.ga-ack { font-size: 11.5px; color: var(--rt-ink-soft); line-height: 1.6; margin: 0; }

@media (max-width: 480px) {
    .ga-hero-num { font-size: 28px; }
}