/*
 * person.css — the person page (P1a) + the person forms (add spouse / add parents). Baseline-loaded
 * (Assets::VIEW_CSS) so it applies whether a page renders whole or swaps in as a fragment. Colours are
 * --foliale-* / --bs-* variables only.
 */

/* === The person page: the SPINE ===================================================================
   One label column down the left of the main panel, running through every block; every block and
   every row inside it is a labelled row off it (DESIGN-INTENT Day 26). On a narrow screen the label
   sits above its row. */
.person-page {
    max-width: 960px;
}

.spine-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    column-gap: 1rem;
    padding: 0.35rem 0;
}

.spine-label {
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.spine-body {
    min-width: 0;
}

/* A block's heading row: the block name in the spine, a rule across the page. */
.person-block {
    scroll-margin-top: 1rem;   /* a jump-index click lands the heading clear of the top edge */
    margin-bottom: 1rem;
}
.spine-head {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--bs-border-color);
}
.spine-head .spine-label {
    color: var(--bs-emphasis-color);
}
/* A heading row that carries a control (Facts: "Add event", right-aligned): the <h2> is the label cell,
   sized by the row like the plain headings; the control drops the heading's uppercase / tracking. */
.spine-head .spine-head-title {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    align-self: center;
}
.spine-head .spine-head-actions {
    text-transform: none;
    letter-spacing: normal;
}
/* A per-family block heading ("Family 2", "Parents 1"): the "View family" icon sits right beside the name in the
   spine, at the heading's size — not pushed to the far right of the row. */
.person-block-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.person-block-heading .family-view-link {
    font-size: 1rem;
    line-height: 1;
}

.fact-row + .fact-row,
.census-fact + .fact-row,
.fact-row + .census-fact,
.census-fact + .census-fact,
.fact-group + .fact-row,
.fact-row + .fact-group,
.fact-group + .census-fact,
.census-fact + .fact-group,
.fact-group + .fact-group,
.fact-group[open] > .fact-group-rows {
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* A collapsed RUN of one many-per-person type (_person-facts: PageFactGroup) — a <details> like the census
   row: the summary is the row (label | "4 places, 1848–1902" | caret); opening it shows the members as
   ordinary fact rows beneath (already in the page, no request). */
.fact-group-summary {
    cursor: pointer;
    list-style: none;
}
.fact-group-summary::-webkit-details-marker {
    display: none;
}
.fact-group-caret {
    transition: transform 0.15s ease;
    color: var(--bs-secondary-color);
}
.fact-group[open] .fact-group-caret {
    transform: rotate(180deg);
}

/* The home icon in the header's metadata line (not pinned to the portrait): inline, after the I-code. */
.person-header-meta .home-icon {
    position: static;
    display: inline-flex;
    align-items: center;
}

/* Evidence lines beneath a fact: indented under the row, compact. */
.evidence-lines {
    margin-top: 0.25rem;
}
.evidence-line + .evidence-line {
    margin-top: 0.25rem;
}
.evidence-cite,
.place-chain-link,
.person-brief-name,
.person-source-cite {
    text-decoration: none;
}
.evidence-cite:hover,
.place-chain-link:hover,
.person-brief-name:hover,
.person-source-cite:hover {
    text-decoration: underline;
}

/* Superscripts: small, tight, never break the line they annotate. */
.cite-sups {
    white-space: nowrap;
    margin-left: 0.1rem;
}
.cite-sup {
    text-decoration: none;
    font-size: 0.75em;
}
.cite-sup + .cite-sup {
    margin-left: 0.15rem;
}

/* A census row is a <details>: the summary IS the collapsed row (no marker; a caret that turns). */
.census-summary {
    cursor: pointer;
    list-style: none;
}
.census-summary::-webkit-details-marker {
    display: none;
}
.census-caret {
    transition: transform 0.15s ease;
    color: var(--bs-secondary-color);
}
.census-fact[open] .census-caret {
    transform: rotate(180deg);
}
.census-household {
    margin-left: 9rem;   /* under the row body, past the spine */
}
.census-household-table {
    white-space: nowrap;   /* the table scrolls sideways (.table-responsive), lines never wrap */
}
/* The page's own person in the household: a soft tint (--foliale-highlight), weight unchanged. Set via
   Bootstrap's own table-cell variable so the tint survives .table's cell background. */
.census-own-row {
    --bs-table-bg: var(--foliale-highlight);
}

/* Photos (P1b): the 64×48 fit-inside thumbnail (the evidence thumbnails' size), its title on one line
   beneath, the attach label, then the small actions. */
.person-photo {
    width: 7.5rem;
}
.person-photo-title {
    max-width: 100%;
}

/* The PHOTO GALLERY (/person/{id}/gallery): one uniform 120×90 slot per photo, the image fitted whole inside it
   (the 128×96 page sidecar — never cropped, never upscaled past it), the title + pencil and the label beneath. */
.person-gallery-item {
    width: 8.5rem;
}
.person-gallery-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 90px;
}
.person-gallery-img {
    width: 120px;
    height: 90px;
    object-fit: contain;
}
.person-gallery-doc {
    font-size: 2rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .spine-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .census-household {
        margin-left: 0;
    }
}

/*
 * Add-spouse mode toggle — pure CSS (:has()), NO JS. 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 the active form's submit. Each
 * .add-spouse instance is scoped independently.
 */
.add-spouse .mode-panel { display: none; }
.add-spouse:has(.add-spouse-mode[value="add"]:checked) .mode-add { display: block; }
.add-spouse:has(.add-spouse-mode[value="create"]:checked) .mode-create { display: block; }

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

/*
 * Add-parents slot mode toggles — pure CSS (:has()), NO JS. Each slot's two mode radios
 * drive which panel (find existing / create new) shows. Scoped per slot so the two slots
 * toggle independently.
 */
.parent-slot .slot-panel { display: none; }
.parent-slot--1:has(.p1-mode[value="find"]:checked) .slot-find { display: block; }
.parent-slot--1:has(.p1-mode[value="create"]:checked) .slot-create { display: block; }
.parent-slot--2:has(.p2-mode[value="find"]:checked) .slot-find { display: block; }
.parent-slot--2:has(.p2-mode[value="create"]:checked) .slot-create { display: block; }

.parent-slot .parent-results { max-height: 14rem; overflow-y: auto; }

/*
 * RELATIONSHIP (R2) — the header row (a muted, chrome-less button opening the modal) and the modal's path
 * and picker. Tokens only (--foliale-* / --bs-*).
 */
.person-relationship { min-height: 1.25rem; }
.person-relationship-open:hover,
.person-relationship-open:focus { color: var(--foliale-text-color) !important; }

/* The path as a small tree: the shared ancestor on top, the line(s) of descent beneath, ↓ between names. */
.relationship-tree-top { font-weight: 600; }
.relationship-arrow { color: var(--foliale-home-unset); line-height: 1.3; }
.relationship-line-person { padding-bottom: 0.1rem; }
/* The spouse line's partnered icon (people.css .status-icon, baseline-loaded) — default text colour, spacing only. */
.relationship-married-symbol { padding-inline: 0.35rem; }
.relationship-ancestor-badge {
    background: var(--foliale-highlight);
    color: var(--foliale-text-color);
    font-weight: 500;
}

/* The picker's rows: the whole row is one button, no chrome (the home picker's look). */
.relationship-pick {
    background: none;
    border: 0;
    color: inherit;
    border-radius: 0.375rem;
    padding-inline: 0.4rem;
}
.relationship-pick:hover,
.relationship-pick:focus { background: var(--bs-secondary-bg); }

/* --- MP2: the person page's MAP block (_person-map.php; drawn by person-map.js with the shared Leaflet) ------- */
.person-map {
    --foliale-map-pin: var(--bs-primary);
    --foliale-map-pin-ink: var(--bs-white);
    --foliale-map-pin-edge: var(--bs-body-bg);
    --foliale-map-undated: var(--bs-secondary);
    --foliale-map-trail: var(--bs-primary);
}
/* the canvas keeps Leaflet's own stacking (panes 400+, controls 1000) INSIDE it, under the app's menus / modals */
.person-map-canvas {
    position: relative;
    z-index: 0;
    isolation: isolate;
    height: 22rem;
    max-height: 60vh;
}
/* a numbered pin (Leaflet divIcon): a filled disc — SOLID = the place's own point */
.person-map .person-map-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--foliale-map-pin);
    color: var(--foliale-map-pin-ink);
    border: 2px solid var(--foliale-map-pin-edge);
    box-shadow: var(--bs-box-shadow-sm);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
}
/* APPROXIMATE (the nearest located ancestor's point): hollow, dashed */
.person-map .person-map-pin--approx {
    background: var(--foliale-map-pin-edge);
    color: var(--foliale-map-pin);
    border: 2px dashed var(--foliale-map-pin);
}
/* UNDATED: a small unnumbered dot, off the trail */
.person-map .person-map-pin--undated { background: var(--foliale-map-undated); }
.person-map .person-map-pin--undated.person-map-pin--approx { background: var(--foliale-map-pin-edge); border-color: var(--foliale-map-undated); }
/* the TRAIL joining the dated pins in order */
.person-map .person-map-trail {
    fill: none;
    stroke: var(--foliale-map-trail);
    stroke-width: 3px;
    stroke-opacity: 0.6;
}
/* the list beneath: the same number discs, clickable (opens the pin's popup) */
.person-map-list .person-map-item { padding-block: 0.1rem; }
.person-map .person-map-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 1.35rem;
    height: 1.35rem;
    padding-inline: 0.2rem;
    border-radius: 0.7rem;
    background: var(--foliale-map-pin);
    color: var(--foliale-map-pin-ink);
    border: 2px solid transparent;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
}
.person-map .person-map-num--approx { background: transparent; color: var(--foliale-map-pin); border: 2px dashed var(--foliale-map-pin); }
.person-map .person-map-num--undated { min-width: 0.75rem; height: 0.75rem; margin-inline: 0.3rem; background: var(--foliale-map-undated); }
.person-map-popup { min-width: 12rem; }