/* The family tree and Contact admin. Colours come from the theme (the four peas of the logo); nothing here is a fixed brand colour. */

/* ------------------------------------------------------------ family tree */
.ft-help, .ft-welcome { max-width: 40rem; margin: 0; color: var(--ink-soft); }
.ft-welcome { font-weight: 700; color: var(--ink); font-size: var(--step-1); }
.ft-count { font-weight: 800; }
.ft { --bar: 3px; --join: 1.9rem; display: flex; flex-direction: column; align-items: center; padding: 0.4rem 0 1.4rem; }
.ft-gen { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--join); }
.ft-node { position: relative; display: flex; }
/* the line between the two parents, with a red pea in the middle of it */
.ft-node + .ft-node::before {
  content: ""; position: absolute; left: calc(var(--join) * -1); top: 4.2rem; width: var(--join); height: 0.8rem; transform: translateY(-50%);
  background:
    radial-gradient(circle at center, var(--pea-red) 0 0.3rem, transparent 0.31rem),
    linear-gradient(var(--line-strong), var(--line-strong)) center / 100% var(--bar) no-repeat;
}
/* the branch that goes down to the children, ending in a lime pea */
.ft-trunk { position: relative; width: var(--bar); height: 1.7rem; background: var(--line-strong); }
.ft-trunk::after {
  content: ""; position: absolute; left: 50%; bottom: -0.4rem; width: 0.8rem; height: 0.8rem; transform: translateX(-50%);
  border-radius: 50%; background: var(--pea-lime); box-shadow: 0 0 0 3px var(--bg);
}
.ft-kids { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.ft-kid { position: relative; padding: 1.7rem 0.7rem 0; display: flex; }
.ft-kid::before, .ft-kid::after { content: ""; position: absolute; top: 0; height: 1.7rem; width: 50%; border-top: var(--bar) solid var(--line-strong); }
.ft-kid::before { right: 50%; border-right: var(--bar) solid var(--line-strong); }
.ft-kid::after { left: 50%; }
.ft-kid:first-child::before { border-top-color: transparent; }
.ft-kid:last-child::after { border-top-color: transparent; }

.ft-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; width: 17rem; max-width: 100%;
  padding: 1.1rem 1rem 1rem; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--ring, var(--line-strong));
  border-radius: var(--radius); box-shadow: var(--shadow-1); font: inherit; color: var(--ink);
}
.ft-card h3 { margin: 0.5rem 0 0; font-size: var(--step-1); overflow-wrap: anywhere; }
.ft-role { margin: 0; color: var(--ink-soft); font-size: 0.85rem; font-weight: 700; }
.ft-info { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.85rem; overflow-wrap: anywhere; }
.ft-card .row-actions { margin-top: auto; padding-top: 0.7rem; justify-content: center; flex-wrap: wrap; }
.ft-card .btn .mi, .btn .mi { display: inline-flex; margin: 0 0.35rem; }
.ft-card .btn .mi svg, .btn .mi svg { width: 1em; height: 1em; }
.ft-card.slot {
  justify-content: center; min-height: 15rem; border: 2px dashed var(--line-strong); border-top-width: 2px; background: var(--surface-soft);
  box-shadow: none; cursor: pointer; color: var(--primary-deep);
}
.ft-card.slot:hover { border-color: var(--primary); background: var(--primary-soft); }
.ft-card.slot:focus-visible, .ft-open-photo:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.ft-card.child.here { box-shadow: 0 0 0 3px var(--sun), var(--shadow-1); }
.ft-open-photo { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.ft-open-photo:hover .spic { box-shadow: 0 0 0 4px var(--primary-soft); }
.ft-limit { max-width: 40rem; margin: 0 auto; }
.ft-share { max-width: 40rem; margin: 1.2rem auto 0; padding: 1rem 1.3rem 1.1rem; }
.ft-share h3 { margin: 0 0 0.3rem; }
.ft-steps { margin: 0.6rem 0 0.8rem; padding-left: 1.3rem; }
.ft-steps li { margin-bottom: 0.4rem; }
.ft-photo-row { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.ft-photo-row .check-line { margin: 0.6rem 0 0; font-weight: 600; font-size: 0.88rem; }
.btn.danger-text { color: var(--bad-ink); }
.btn.danger-text:hover { background: #fde8e6; border-color: var(--bad); color: var(--bad-ink); }

@media (max-width: 40rem) {
  /* on a phone the cards stack, so the branch drawing would only confuse: keep one short branch and a column of cards */
  .ft-node + .ft-node::before { display: none; }
  .ft-kids { flex-direction: column; align-items: center; }
  .ft-kid { padding-top: 1rem; }
  .ft-kid::before, .ft-kid::after { display: none; }
  .ft-trunk { height: 1.2rem; }
}

/* ------------------------------------------------------------ Contact admin */
.fb-grid { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.fb-grid > * + * { margin-top: 0; }
@media (max-width: 62rem) { .fb-grid { grid-template-columns: minmax(0, 1fr); } }
.fb-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.fb-form legend { padding: 0; margin-bottom: 0.4rem; font-weight: 800; font-size: 0.88rem; }
.fb-chars { text-align: right; margin: -0.6rem 0 1rem; font-size: 0.8rem; }
.fb-result { margin-top: 1rem; }
.fb-result .notice p { margin: 0 0 0.5rem; }
.fb-result .notice p:last-child { margin-bottom: 0; }
.fb-history, .fb-admin-list { list-style: none; margin: 0; padding: 0; }
.fb-history li, .fb-admin-list li { padding: 0.8rem 0; border-top: 1px solid var(--line); }
.fb-history li:first-child, .fb-admin-list li:first-child { border-top: 0; padding-top: 0; }
.fb-h-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.fb-history p, .fb-admin-list p { margin: 0.25rem 0; }
.fb-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-admin-list li.done { opacity: 0.62; }