/*
 * people.css — styling for the People index list panel. BASELINE-loaded (see
 * Assets::VIEW_CSS) so it also styles the list when swapped in as an htmx fragment.
 * Structural only — NO theming/icons/tooltips beyond the layout (deferred).
 *
 * The panel is a flex COLUMN filling the right rail: the search box is pinned at the
 * top (flex-shrink:0) and only the results region scrolls (flex-grow:1 overflow-y:auto).
 * Paging is htmx infinite scroll (a revealed-trigger sentinel) — no Next/Prev pager.
 */

/* List-specific tokens that DEFAULT to the site-wide ones, so the People list's font can be
   tuned later WITHOUT disturbing the global default. (The list already inherits Fira Sans from
   body; these just make it independently overridable.)

   --people-name-color is the NAME colour token: one declaration, so a future config/theme
   function (or the admin-override CSS slot, which loads last and wins) retargets every list
   name by re-declaring it here or at :root. Nothing hardcodes the literal — .people-name reads
   the var. Deliberately NOT link-blue: the row is clickable, but a name is data, not a link. */
.people-panel {
    --foliale-people-font-family: var(--foliale-font-family);
    --foliale-people-font-size: var(--foliale-font-size-base);
    --people-name-color: #2b2b2b;

    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;          /* let the results child shrink and scroll */
    font-family: var(--foliale-people-font-family);
    font-size: var(--foliale-people-font-size);
}

.people-search {
    flex-shrink: 0;         /* the search box stays pinned at the top */
    margin-bottom: 0.75rem;
}

/* Use our OWN clear button, not the browser's focus-only native one. */
.people-search input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

/* Show the clear button only when the input has a value (a filter is in place),
   regardless of focus. An empty input matches :placeholder-shown (it has a
   placeholder), so the following-sibling clear button is hidden then. */
.people-search .form-control:placeholder-shown ~ .people-clear {
    display: none;
}

.people-results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;       /* only the list scrolls, beneath the fixed search */
}

.people-list {
    margin: 0;
}

/* Surname GROUP HEADER (people-rows.php) — the surname shown once, bold UPPERCASE, then the
   given-name rows beneath it. Never tinted. Its line height and vertical padding are the person
   row's (.people-row, below) — every rail row is the same compact height, no space above or below
   a header. */
.people-group {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.05rem 0.25rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SEX TINT on a person row — the app-wide tokens (base.css :root), the same pink / blue as the
   family chart's colour-by-sex boxes. Unknown sex carries no modifier, so no tint. No gap and no
   rounding: adjacent tinted rows form continuous bands. */
.people-row--female {
    background: var(--foliale-female-tint);
}

.people-row--male {
    background: var(--foliale-male-tint);
}

/* The DEFAULT PERSON's green house, after the name — never cut (like the dates / id). */
.people-home {
    flex: 0 0 auto;
    color: var(--foliale-home-set);
}

.people-row {
    display: flex;
    align-items: center;   /* status icon vertically centred against the name */
    gap: 0.35rem;
    /* Tight rows, SYMMETRIC horizontal pad (was 0.5rem left / 0 right — an unbalanced indent on
       top of the rail's own). The rail now pads 0.5rem each side, so a row sits 0.25rem inside
       that: ~12px from the border on BOTH edges, and the row uses the full rail width. */
    padding: 0.05rem 0.25rem;
    line-height: 1.3;
}

/* The row's link is the flex TRACK: name (flexible, truncates) | dates | id (both fixed).
   min-width:0 is what actually lets the name shrink below its content width — without it a
   flex item refuses to shrink and the row overflows the rail instead of ellipsing. */
.people-row a {
    text-decoration: none;
    color: inherit;        /* the row is clickable, but must NOT read as blue link text */
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* THE TRUNCATING COLUMN. Everything to its right is protected (flex:0 0 auto), so a long
   name ellipses while the dates + I-number stay fully visible — they are what you scan for.
   people.js attaches the Bootstrap tooltip ONLY when this span is actually truncated. */
.people-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--people-name-color);
}

/* Never cut: the identifying facts. */
.people-dates,
.people-id {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Status icon (placeholder styling — final look is the painting pass): two overlapping
   circles = partnered, one circle = single. Circles absolutely positioned in a small
   fixed-width box. */
.status-icon {
    position: relative;
    display: inline-block;
    width: 0.85em;   /* box scaled to the smaller 0.50em circles */
    height: 1em;
    flex: 0 0 auto;
    vertical-align: middle;
}

.status-icon .bi {
    position: absolute;
    top: 50%;                          /* centre each circle vertically in the box */
    transform: translateY(-50%);
    font-size: 0.50em;                 /* smaller circles (Roger's original value) */
    line-height: 1;
}

.status-icon--single .bi {
    left: 0.3em;                       /* ~centred single circle in the box */
}

.status-icon--partnered .bi:nth-child(1) {
    left: 0;
}

.status-icon--partnered .bi:nth-child(2) {
    left: 0.65em;   /* offset (in circle-em) keeps a proportional overlap at 0.50em */
}

/* Infinite-scroll sentinel: a small, centred row at the list's end. Its "Loading…"
   label is shown ONLY while the next batch is being fetched — htmx adds .htmx-request
   to the sentinel during the request — so it never sits as a misleading permanent
   label when idle (which read as a "stall"). */
.people-more {
    list-style: none;
    padding: 0.5rem 0;
    text-align: center;
}

.people-more-label {
    display: none;
}

.people-more.htmx-request .people-more-label {
    display: inline;
}