/* Family tree extras: a person's page (relationship, life timeline, merges), possible duplicates,
   family places and "on this day". Uses the Family History colours (--fh-*) inside .fh, and the
   app's own colours anywhere else (e.g. bottom sheets). */

.fh-person-name { font-family: var(--fh-serif, inherit); }
.fh-person h2.fh-person-name { font-size: 26px; font-weight: 700; margin: 4px 0 2px; color: var(--fh-ink, var(--fg)); }
.fh-relation { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--fh-accent, var(--fg)); }
.fh-relation.none { font-weight: 500; color: var(--fh-muted, var(--muted)); }
.sheet .fh-relation + .hint { margin-top: 0; }

/* their life, in date order */
.fh-timeline { background: var(--fh-card, var(--chip)); position: relative; }
.fh-timeline .item.fh-tl { justify-content: flex-start; align-items: flex-start; gap: 14px; position: relative; }
.fh-tl-year { flex: none; width: 46px; font-variant-numeric: tabular-nums; color: var(--fh-accent, var(--fg)); font-family: var(--fh-serif, inherit); }
.list.fh-timeline .item .fh-tl-txt { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; color: var(--fh-ink, var(--fg)); }
.fh-tl-title { font-weight: 600; }
.fh-tl-txt small { font-size: 12.5px; color: var(--fh-muted, var(--muted)); }
.fh-tl.tap { cursor: pointer; padding-right: 30px; }
.fh-tl.tap::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--fh-muted, var(--muted)); }
.fh-tl.tap:active { background: color-mix(in srgb, var(--fh-ink, var(--fg)) 6%, transparent); }
.fh-tl.born .fh-tl-title, .fh-tl.died .fh-tl-title { font-weight: 800; }

/* "is this the same person?", "also recorded" */
.fh-dup-notice, .fh-merged { display: flex; align-items: center; gap: 12px; }
.fh-dup-notice .tab, .fh-merged .tab { flex: none; }
.fh-merged .date-txt span + span { margin-top: 2px; }

/* possible duplicates */
.fh-dup-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fh-dup-side { padding: 2px 0; }
.fh-dup-side + .fh-dup-side { border-left: 1px solid var(--fh-line, var(--line)); padding-left: 12px; }
.fh-dup-side b { font-family: var(--fh-serif, inherit); }
.fh-dup-side span { line-height: 1.35; }
.fh-dup-why { margin: 10px 0 0; }
.fh-dup-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 12px; }
.fh-dup-actions .tab:first-child { background: var(--fh-accent, var(--chip-on)); color: var(--fh-on-accent, var(--chip-on-fg)); }
.fh-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* family places */
.fh-places-tabs { justify-content: flex-start; flex-wrap: wrap; margin: 4px 0 6px; }
.fh-place .date-txt b { font-family: var(--fh-serif, inherit); }
.fh-place .pchips { margin-top: 10px; }

/* on this day */
.fh-days .fh-day { width: 100%; align-items: center; text-align: left; margin-bottom: 6px; }
.fh-days .fh-day b { font-weight: 600; }
.fh-days .fh-day span { flex: none; }
.fh-tools { max-height: none; }

/* which tree: "My family tree ▾" at the top of the tree */
.tree-title.fh-tree-switch { border: 0; background: none; color: inherit; padding: 4px 6px; border-radius: 12px; font: inherit; }
.tree-title.fh-tree-switch:active { background: color-mix(in srgb, var(--fh-ink, var(--fg)) 8%, transparent); }
.tree-title.fh-tree-switch b { font-family: var(--fh-serif, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-title.fh-tree-switch > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-caret { font-size: 13px; opacity: .7; }
.fh-trees { max-height: none; }
.fh-tree-row.on { outline: 2px solid var(--fh-accent, var(--fg)); outline-offset: -2px; }
.fh-trees + .btn { margin: 4px 0 6px; }
.fh-story-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fh-story-actions .btn + .btn { margin-top: 0; }

/* inside the Family History app */
.fh .date-card, .fh .list, .fh .pchip, .fh .person-row, .fh .person-notes, .fh .doc-card { background: var(--fh-card, var(--chip)); color: var(--fh-ink, var(--fg)); }
.fh .section-label, .fh .hint, .fh .muted, .fh .pchip span, .fh .person-row span, .fh .date-txt span, .fh .doc-txt span { color: var(--fh-muted, var(--muted)); }
.fh .list .item { border-top-color: var(--fh-line, var(--line)); }
.fh h2, .fh .date-txt b { font-family: var(--fh-serif, inherit); }
.fh .tab { background: var(--fh-card, var(--chip)); color: var(--fh-ink, var(--fg)); }
.fh .tab[aria-pressed="true"] { background: var(--fh-accent, var(--chip-on)); color: var(--fh-on-accent, var(--chip-on-fg)); }

@media (max-width: 380px) {
  .fh-dup-pair { grid-template-columns: 1fr; }
  .fh-dup-side + .fh-dup-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--fh-line, var(--line)); padding-top: 8px; }
}