/*
 * family.css — the FAMILY FLOWS' forms (add child / add partner mode toggles) and the shared HOME-PERSON
 * icon. Baseline-loaded (Assets::VIEW_CSS). The family CARD's styles went with the card (P2c).
 */

/*
 * Add-child mode toggle — pure CSS (:has()), NO JS (mirrors the add-spouse toggle). The
 * two mode radios drive which panel (ADD existing / CREATE inline) is shown; the inactive
 * one is display:none and, as a separate <form>, its required fields never block submit.
 */
.add-child .mode-panel { display: none; }
.add-child:has(.add-child-mode[value="add"]:checked) .mode-add { display: block; }
.add-child:has(.add-child-mode[value="create"]:checked) .mode-create { display: block; }

.add-child .child-results { max-height: 16rem; overflow-y: auto; }

/*
 * Add-partner (into an empty family slot) mode toggle — pure CSS (:has()), NO JS. Two mode
 * radios pick find/create; each mode is its own <form> so the hidden one never blocks submit.
 */
.family-add-partner .mode-panel { display: none; }
.family-add-partner:has(.add-partner-mode[value="find"]:checked) .mode-find { display: block; }
.family-add-partner:has(.add-partner-mode[value="create"]:checked) .mode-create { display: block; }
.family-add-partner .parent-results { max-height: 14rem; overflow-y: auto; }

/* --- HOME-PERSON icon (baseline-loaded). By default absolutely pinned BOTTOM-RIGHT inside a
   position-relative host; the person header's metadata line sets it inline (person.css). GREY = not
   home, clickable (a mini <form>); GREEN = is home, inert (a <span>). --- */
.home-icon {
    position: absolute;
    bottom: 0.2rem;
    right: 0.3rem;
    margin: 0;            /* the grey state is a <form> — kill any residual form margin so the
                            absolute bottom/right offsets are exact */
    padding: 0;
    line-height: 1;       /* no line-box padding to skew the corner offset */
    z-index: 2;
}
/* GREY (not home): a bare icon button, muted; darkens on hover/focus to read as clickable. */
.home-icon-btn {
    padding: 0;
    border: 0;
    background: none;
    line-height: 1;
    color: var(--foliale-home-unset);
}
.home-icon-btn:hover,
.home-icon-btn:focus {
    color: var(--foliale-text-color);
}
/* GREEN (is home): inert, success-coloured, default cursor (nothing to click). */
.home-icon--set {
    color: var(--foliale-home-set);
    cursor: default;
}
/* One-shot confirmation PULSE — added only on the freshly-set green (the set-home swap), never on an
   ordinary page load. Pure CSS, runs once. */
.home-icon--just-set {
    display: inline-block;   /* transform needs a block/inline-block box */
    animation: home-icon-pulse 0.5s ease-out 1;
}
@keyframes home-icon-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}