/* Family record visualisations: shared frame. Colours and type come from the host
   page's own custom properties (static/css/main.css), so the views follow the site's
   light and dark themes and load no font of their own. */
.ftv, .ftv-mini {
  --bg: var(--color-bg, #F8F6F2); --panel: var(--color-bg-secondary, #F0EDE6); --card: var(--color-bg-tertiary, #fff);
  --ink: var(--color-text, #1D1D1F); --soft: var(--fr-soft-panel, #5C5C61); --rule: var(--color-border, rgba(0,0,0,.14)); --rule2: #BDB6A6;
  --gold: var(--color-accent, #C9A84C); --gold-text: var(--fr-gold-text, #8A6D1F); --link: var(--color-link, #0066CC);
  --ok-fg: #2E6B4A; --ok-bg: #E6F0E9; --mb-fg: #8A6100; --mb-bg: #FAF0D9; --lv-fg: #4A5568; --lv-bg: #EAECEF; --nf-fg: #8A4B4B; --nf-bg: #F1E7E7; --ft-fg: #6B4E8A; --ft-bg: #F0EAF7;
  --serif: var(--font-serif, 'Playfair Display', Georgia, serif); --sans: var(--font-sans, 'Inter', -apple-system, sans-serif);
  --ease: cubic-bezier(.22,.8,.24,1);
}
/* self-contained panels keep the palette they were drawn in, whatever the page theme */
.ftv-fan, .ftv-migration {
  --bg: #FAFAFA; --panel: #F0EDE6; --card: #fff; --ink: #1D1D1F; --soft: #5C5C61; --rule: rgba(0,0,0,.14); --gold-text: #8A6D1F; --link: #0066CC;
}
.ftv-flythrough, .ftv-mini.night {
  --bg: #0B0A08; --panel: #15130F; --card: #1A1814; --ink: #F5F2EA; --soft: #B5AFA2; --rule: rgba(255,255,255,.16); --rule2: rgba(255,255,255,.28); --gold-text: #E4C173; --link: #7DB8FF;
}
.ftv { position: relative; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink); -webkit-font-smoothing: antialiased; }
.ftv *, .ftv-mini * { box-sizing: border-box; }
.ftv button, .ftv-mini button, .ftv select, .ftv input { font: inherit; color: inherit; }
.ftv button, .ftv-mini button { cursor: pointer; }
.ftv :focus-visible, .ftv-mini :focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.ftv .eyebrow { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; margin: 0; }
.ftv a { color: var(--link); }

/* stages: a fixed frame the view draws into. Height is reserved before the script
   arrives, so nothing below it moves when the view mounts. */
.ftv-sec { position: relative; }
.ftv-stage { overflow: hidden; background: var(--bg); isolation: isolate; }
.ftv-flythrough { height: min(calc(100svh - var(--nav-height, 64px)), 860px); min-height: 540px; background: #0B0A08; }
.ftv-fan { height: min(88svh, 900px); min-height: 560px; border-block: 1px solid var(--rule); }
.ftv-migration { height: calc(100svh - var(--nav-height, 64px) - var(--fr-nav-h, 52px)); min-height: 600px; border-block: 1px solid var(--rule); }
.ftv-flow { background: var(--bg); }
.ftv-navigator { --ftv-top: calc(var(--fr-top, 64px) + var(--fr-nav-h, 52px)); }
.ftv-navigator .ftv-main { padding-top: 34px !important; padding-bottom: 40px !important; }
.ftv-timeline .top { padding-top: 34px !important; }
.ftv:not(.ftv-on) > .ftv-wait { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; color: var(--soft); font-size: 14px; }
.ftv-flow:not(.ftv-on) { min-height: 320px; }
.ftv-on > .ftv-wait { display: none; }
.ftv[data-ftv-failed] > .ftv-wait::after { content: " This view could not load; the record below is complete without it."; }
.ftv:focus { outline: none; } .ftv:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.ftv-note { margin: 0; padding: 12px 24px 14px; font-size: 12.5px; line-height: 1.5; color: var(--fr-soft, #5C5C61); max-width: 1100px; margin-inline: auto; }
.ftv-note b { color: var(--fr-ink, #1D1D1F); }
.ftv-more { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 24px 22px; max-width: 1100px; margin: 0 auto; font-size: 14px; }
.ftv-preview { position: fixed; left: 12px; bottom: 12px; z-index: 1400; font: 600 11px/1 var(--font-sans, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #1D1D1F; background: #FAF0D9; border: 1px solid #E2CE9A; padding: 6px 10px; border-radius: 999px; pointer-events: none; }

/* the shared Both / Earl / Kristin switch, wherever a view shows one */
.ftv-tog { display: inline-flex; border: 1px solid var(--rule2); border-radius: 999px; padding: 2px; background: var(--card); flex: none; }
.ftv-tog button { border: 0; background: none; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--soft); min-height: 38px; }
.ftv-tog button[aria-pressed=true] { background: var(--gold); color: #1D1D1F; }
/* the fan's own copy sits under its heading; .head ignores the pointer, the switch must not */
.ftv-fan .head .ftv-tog { pointer-events: auto; margin-top: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
@media (max-width: 720px) { .ftv-fan .head .ftv-tog { margin-top: 4px; } .ftv-fan .head .ftv-tog button { min-height: 40px; padding: 5px 14px; } }

.ftv-chip { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ftv-chip.confirmed { color: var(--ok-fg); background: var(--ok-bg); } .ftv-chip.probable { color: var(--mb-fg); background: var(--mb-bg); }
.ftv-chip.living { color: var(--lv-fg); background: var(--lv-bg); } .ftv-chip.notfound { color: var(--nf-fg); background: var(--nf-bg); }
.ftv-chip.family, .ftv-chip.dna { color: var(--ft-fg); background: var(--ft-bg); }

/* mini card: side panel on desktop, bottom sheet on phones */
.ftv-mini { position: fixed; z-index: 2200; right: 16px; top: calc(var(--nav-height, 64px) + var(--fr-nav-h, 52px) + 14px); width: 340px; max-height: calc(100dvh - var(--nav-height, 64px) - var(--fr-nav-h, 52px) - 30px); overflow: auto;
  font-family: var(--sans); font-size: 15px; line-height: 1.5; color: #1D1D1F; --ink: #1D1D1F; --soft: #5C5C61; --card: #fff; --panel: #F0EDE6; --bg: #FAFAFA; --rule: rgba(0,0,0,.14); --link: #0066CC;
  background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: 4px; padding: 18px 20px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.18);
  transform: translateX(24px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .28s var(--ease), opacity .2s, visibility 0s .28s; }
.ftv-mini.on { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .28s var(--ease), opacity .2s; }
.ftv-mini h3 { font-family: var(--serif); font-size: 23px; line-height: 1.18; margin: 8px 0 4px; font-weight: 600; color: var(--ink); }
.ftv-mini .yrs { font-variant-numeric: tabular-nums; color: var(--soft); font-size: 14px; }
.ftv-mini .rel { margin: 10px 0 0; font-size: 14px; }
.ftv-mini .warn { margin: 12px 0 0; font-size: 12px; color: #8A6100; background: #FAF0D9; padding: 6px 10px; border-radius: 4px; }
.ftv-mini dl { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.ftv-mini dt { color: var(--soft); } .ftv-mini dd { margin: 0; }
.ftv-mini dd button { border: 0; background: none; padding: 0; color: var(--link); text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.ftv-mini .open { display: block; margin-top: 16px; padding: 11px 14px; background: var(--ink); color: #FAFAFA; text-decoration: none; border-radius: 999px; text-align: center; font-weight: 600; font-size: 14px; }
.ftv-mini .x { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border: 0; background: none; font-size: 20px; color: var(--soft); border-radius: 50%; }
.ftv-fold { border-top: 1px solid var(--fr-rule, rgba(0,0,0,.14)); }
.ftv-fold > summary { cursor: pointer; padding: 18px 24px; font: 600 15px var(--font-sans, sans-serif); max-width: 1240px; margin: 0 auto; }
@media (max-width: 720px) {
  .ftv-mini { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 62dvh; border-radius: 14px 14px 0 0; transform: translateY(30px); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .ftv-flythrough { min-height: 560px; }
  .ftv-flythrough .ctl .ftv-tog { flex-basis: 100%; justify-content: center; border: 0; background: none; }
  .ftv-note, .ftv-more { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ftv *, .ftv-mini { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* the host's contents rail is a fixed 250px column at >=1200px; stages sit beside it */
@media (min-width: 1200px) {
  .fr:has(#fr-contents[open]) .ftv-sec:not(.ftv-sec--flythrough) { margin-left: var(--fr-rail-w, 250px); }
}
.ftv-flythrough .mark { top: 46px !important; }
.ftv-fan .ctl { bottom: 76px !important; }
@media (max-width: 720px) {
  .ftv-flythrough .mark { top: 34px !important; }
  .ftv-navigator tbody th { white-space: normal !important; max-width: 118px; font-size: 13px !important; line-height: 1.2; padding-right: 8px !important; }
  .ftv-navigator table { min-width: 640px !important; }
}