/* Import from FamilySearch (js/familysearch.js): the import sheet and the "On FamilySearch" part
   of a person's page. Uses the app's colours in sheets, and the Family History ones (--fh-*) where
   they're set. */

.fs-sheet .field select, .fs-sheet .field input { font-size: 16px; }
.fs-check { display: flex; align-items: center; gap: 10px; margin: 2px 2px 16px; font-size: 15px; cursor: pointer; }
.fs-check input, .fs-match input { width: 22px; height: 22px; flex: none; accent-color: var(--chip-on); }
.fs-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--chip); font-size: 14px; }

/* reading */
.fs-status { margin: 6px 0 10px; font-weight: 700; }
.fs-bar { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; margin: 0 0 10px; }
.fs-fill { height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width .3s; }
.fs-wait:empty { display: none; }

/* what will change */
.fs-summary { margin: 4px 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.fs-matches { display: grid; gap: 6px; margin: 0 0 6px; }
.fs-match { display: flex; align-items: flex-start; gap: 12px; padding: 11px 13px; border-radius: 12px; background: var(--chip); cursor: pointer; }
.fs-match input { margin-top: 2px; }
.fs-match-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-match-txt span { font-size: 14px; }
.fs-match-txt small, .fs-link small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.fs-names { margin: 0 2px 16px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.fs-sheet .btn:disabled { opacity: .55; }

/* a person's page */
.fs-person-links { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-person-links a.tab { text-decoration: none; display: inline-flex; align-items: center; }
.fs-records:empty { display: none; }
.fs-records { margin-top: 6px; }
.fs-links { display: grid; gap: 4px; margin-bottom: 8px; }
.fs-link { display: flex; flex-direction: column; gap: 2px; padding: 10px 13px; border-radius: 12px; background: var(--fh-card, var(--chip)); color: var(--fh-ink, var(--fg)); text-decoration: none; }
.fs-link b { font-weight: 700; }
.fs-link:active { opacity: .8; }