/* ======================================================================
   family-photos.css — Warm-theme refresh for the photo gallery page.
   Loaded AFTER main.css so its rules win on equal specificity.
   Scoped to .family-photos-page to avoid leaking onto other pages.
   ====================================================================== */

.family-photos-page {
    --warm-cream:       #FDFAF6;
    --warm-cream-soft:  #F5EDE0;
    --warm-tan:         #D9B98C;
    --warm-terracotta:  #C77B5C;
    --warm-brown:       #5A3E2B;
    --warm-text:        #3A2E27;
    --warm-muted:       #7B6A5C;
    --warm-line:        rgba(90, 62, 43, 0.22);
}

/* ── Page background ──────────────────────────────────────────────────── */
body.family-photos-page {
    background-color: var(--warm-cream);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    color: var(--warm-text);
}

.family-photos-page .page {
    max-width: 1280px;
    padding: 12px 28px 0;
}

/* ── Masthead ─────────────────────────────────────────────────────────── */
/* The logout pill / screen-size radio stay absolutely positioned within the
   masthead (they go static at <=640px). */
.family-photos-page .masthead {
    position: relative;
    padding-top: 12px;
}

.family-photos-page .masthead__title-photos {
    clear: both;
    width: 100%;
    text-align: center;
    font-family: var(--font-script);
    font-style: normal;
    font-weight: 400;
    font-size: 68px;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--warm-brown);
    margin-top: 28px;
    margin-bottom: 6px;
}

.family-photos-page .masthead__sub-title-part1 {
    clear: both;
    width: 100%;
    text-align: center;
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 300;
    font-size: 12.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-muted);
    margin-top: 10px;
}

.family-photos-page .masthead__sub-title-part2 {
    clear: both;
    width: 100%;
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 0.02em;
    color: var(--warm-brown);
    margin-top: 8px;
    margin-bottom: 0;
}

.family-photos-page .masthead__sub-title-part2::after {
    content: '';
    display: block;
    width: 88px;
    height: 1px;
    background: var(--warm-tan);
    margin: 22px auto 0;
}

/* ── Disconnect button (top-right pill) ───────────────────────────────── */
.family-photos-page .masthead__disconnect-second {
    background: transparent;
    border: 1px solid var(--warm-line);
    border-radius: 999px;
    padding: 6px 16px;
    margin-top: 10px;
    width: auto;
    min-width: 110px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--warm-brown);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    position: absolute;
    top: 10px;
    right: 0;
}

.family-photos-page .masthead__disconnect-second:hover {
    background: var(--warm-terracotta);
    border-color: var(--warm-terracotta);
    color: #fff;
}

/* ── Main navigation ─────────────────────────────────────────────────── */
.family-photos-page .c-nav-main {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 12.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: var(--warm-text);
    margin: 26px 0 18px;
    padding: 16px 0;
    border-top: 1px solid var(--warm-line);
    border-bottom: 1px solid var(--warm-line);
    cursor: default;
}

.family-photos-page .c-nav-main__item {
    margin: 0 2px;
}

.family-photos-page .c-nav-main__link {
    font-size: 12.5px;
    padding: 6px 14px;
    color: var(--warm-text);
    transition: color 0.2s ease;
}

.family-photos-page .c-nav-main__link:hover {
    color: var(--warm-terracotta);
}

.family-photos-page .c-nav-main__link[aria-current="page"] {
    color: var(--warm-terracotta);
    font-weight: 500;
    cursor: default;
}

/* ── Title row: directory title (left) + button cluster (right) ──────── */
.family-photos-page #fPswitches {
    margin: 0;
    text-align: left;
}

.family-photos-page .photos__title-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.family-photos-page .photos__sub-row {
    display: flex;
    align-items: center;
    gap: 6px 18px;
    /* The commented-photos hint is a long sentence; if the viewport is too narrow
       to fit it alongside the right-aligned Sélectionner toggle, wrap the toggle
       onto the next line instead of letting the two overlap. */
    flex-wrap: wrap;
    margin-top: 10px;
}

.family-photos-page .photos__thumb-title {
    float: none;
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    color: var(--warm-brown);
    text-align: left;
    margin: 0;
}

.family-photos-page .photos__thumb-title:empty {
    display: none;
}

/* All title-row buttons: plain text (no pill border/background) */
.family-photos-page .photos__paste-photos,
.family-photos-page .photos__move-photos,
.family-photos-page .photos__delete-photos,
.family-photos-page .photos__favorite-photos,
.family-photos-page .photos__download-photos,
.family-photos-page .photos__previous-folder,
.family-photos-page .photos__next-folder,
.family-photos-page .photos__commented-button,
.family-photos-page .search__back-to-tree,
.family-photos-page .search__back-to-search-screen,
.family-photos-page .search__back-to-main-folder {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--warm-brown);
    cursor: pointer;
    transition: color 0.2s ease;
}

.family-photos-page .photos__paste-photos:hover,
.family-photos-page .photos__move-photos:hover,
.family-photos-page .photos__delete-photos:hover,
.family-photos-page .photos__favorite-photos:hover,
.family-photos-page .photos__download-photos:hover,
.family-photos-page .photos__previous-folder:hover,
.family-photos-page .photos__next-folder:hover,
.family-photos-page .photos__commented-button:hover,
.family-photos-page .search__back-to-tree:hover,
.family-photos-page .search__back-to-search-screen:hover,
.family-photos-page .search__back-to-main-folder:hover {
    color: var(--warm-terracotta);
}

/* Supprimer is destructive — brick red in the plain-text toolbar so it reads
   apart from the safe actions (brick red = manage-readings --warm-danger). */
.family-photos-page .photos__delete-photos {
    color: #A6402E;
}

.family-photos-page .photos__delete-photos:hover {
    color: #7E2E20;
}

/* "Déposer" is the primary action when moving photos — make it a filled
   terracotta pill so it stands out from the plain-text toolbar buttons. */
.family-photos-page .photos__paste-photos {
    background: var(--warm-terracotta);
    color: #fff;
    padding: 11px 30px;
    border-radius: 999px;
    font-size: 14.5px;
    box-shadow: 0 2px 6px rgba(90, 62, 43, 0.25);
    transition: background 0.2s ease;
}

.family-photos-page .photos__paste-photos:hover {
    background: var(--warm-brown);
    color: #fff;
}

/* ── Sub-row: "Photos commentées" link + Shift-Click hint ────────────── */
.family-photos-page .photos__commented-button {
    float: none;
    margin: 0;
    padding: 0;
    /* Keep the full sentence on one line and don't let flex squeeze it into the
       toggle; the row wraps the toggle below instead (see .photos__sub-row). */
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: left;
    /* Box centres already match the Sélectionner pill (align-items:center), but
       the italic lowercase text reads a touch high; nudge it down to optically
       centre the text with the button's text. */
    position: relative;
    top: 2px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-style: italic;
    font-weight: 400;
    color: var(--warm-muted);
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
}

/* Touch multi-select toggle — a pill (proper tap target); fills in when active. */
.family-photos-page .photos__select-toggle {
    display: inline-block;
    /* Push to the right edge of the sub-row, but reserve the X-slot (measured at
       44px: the gap between the "Répertoire suivant" right edge and the X) so the
       pill's right edge lines up with "Répertoire suivant" rather than the X. */
    margin: 0 44px 0 auto;
    padding: 6px 16px;
    background: transparent;
    border: 1px solid var(--warm-line);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--warm-brown);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.family-photos-page .photos__select-toggle:hover {
    border-color: var(--warm-terracotta);
    color: var(--warm-terracotta);
}

.family-photos-page .photos__select-toggle.is-active {
    background: var(--warm-terracotta);
    border-color: var(--warm-terracotta);
    color: #fff;
}

/* The hint paragraph is empty now (the button is self-explanatory); keep the
   element for the existing show/hide wiring but never let it take space. */
.family-photos-page .photos__select-message:empty {
    display: none !important;
}

.family-photos-page .photos__select-message {
    float: none;
    position: static;
    right: auto;
    margin: 0 0 0 auto;
    /* Reserve a slot equal to the title-row's X close button (×22px font
       + 2×8 padding + 8px cluster gap) so the message's right edge lines
       up with "Répertoire suivant" instead of running past it to the X. */
    padding: 0 50px 0 0;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-style: italic;
    color: var(--warm-muted);
}

/* ── Button cluster (actions + nav + exit X): right-aligned, wraps ───── */
.family-photos-page .photos__nav-cluster {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px 8px;
    margin-left: auto;
    max-width: 62%;
}

.family-photos-page .photos__nav-cluster > * {
    float: none;
    position: static;
    left: 0;
    margin: 0;
}

.family-photos-page .photos__nav-cluster .search__back-to-tree,
.family-photos-page .photos__nav-cluster .search__back-to-search-screen,
.family-photos-page .photos__nav-cluster .search__back-to-main-folder {
    margin-left: 8px;
}

/* The three X close buttons need a bigger hit area than the action pills. */
.family-photos-page .search__back-to-tree,
.family-photos-page .search__back-to-search-screen,
.family-photos-page .search__back-to-main-folder {
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    padding: 2px 8px;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Photo-view toggle (by-theme / by-directory) ─────────────────────── */
.family-photos-page #photoView {
    text-align: right;
    margin: 4px 0 6px;
}

.family-photos-page #photoView__button--theme,
.family-photos-page #photoView__button--directory {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--warm-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

.family-photos-page #photoView__button--theme:hover,
.family-photos-page #photoView__button--directory:hover {
    background: transparent;
    color: var(--warm-terracotta);
}

/* ── Search panel ─────────────────────────────────────────────────────── */
.family-photos-page .search {
    margin: 0 auto 18px;
}

/* Brown-pill style: ONLY for the actual button INPUTs.
   Wrapping divs (.search__search-button-ensemble, plain .search__search-button divs)
   must NOT get the pill background, otherwise they render as empty brown circles. */
.family-photos-page input.search__search-button,
.family-photos-page .search__search-button input,
.family-photos-page .search__search-button-ensemble input {
    font-family: var(--font-sans);
    font-size: 11.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: var(--warm-brown);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 7px 18px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.family-photos-page input.search__search-button:hover,
.family-photos-page .search__search-button input:hover,
.family-photos-page .search__search-button-ensemble input:hover {
    background: var(--warm-terracotta);
}

/* The wrap divs are now invisible layout containers. */
.family-photos-page .search__button-remove-keywords,
.family-photos-page .search__search-button-ensemble {
    background: transparent;
    border-radius: 0;
    padding: 0;
    float: none;
}

/* The × clear-keywords button: small, discrete, not a brown pill. */
.family-photos-page #search__remove-keywords {
    background: transparent;
    border: none;
    color: var(--warm-muted);
    font-size: 22px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.family-photos-page #search__remove-keywords:hover {
    color: var(--warm-terracotta);
}

.family-photos-page .search__fieldset {
    background: var(--warm-cream-soft);
    border: 1px solid var(--warm-line);
    border-radius: 10px;
    padding: 18px 22px;
    /* Override main.css:1686 `.search__fieldset { height: 758px }` which leaves
       a big empty area below the content. */
    height: auto;
}

.family-photos-page .search__main-params,
.family-photos-page .search__other-params,
.family-photos-page .search__pid-context,
.family-photos-page .search__check-box--scope {
    border: 1px solid var(--warm-line);
    border-radius: 8px;
    padding: 12px 16px;
    background: #fff;
    margin-top: 12px;
}

/* 2×2 grid of search-param panels — all four equal width and height.
   minmax(0,1fr) forces equal columns regardless of inner content's min-width
   (otherwise the PID input pushes the right column wider). */
.family-photos-page .search__params-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: 16px;
    margin: 12px 0 28px;
}

.family-photos-page .search__params-grid > * {
    min-height: 130px;
    width: auto;
}

.family-photos-page .search__params-grid > .search__main-params,
.family-photos-page .search__params-grid > .search__check-box--scope,
.family-photos-page .search__params-grid > .search__check-box,
.family-photos-page .search__params-grid > .search__pid-context {
    margin: 0;
}

/* The .search__check-box wrapper around .search__other-params is the grid item,
   but the visible border/bg is on the inner fieldset — stretch it to fill.
   Excluding --scope: that one IS the panel, not a wrapper. */
.family-photos-page .search__params-grid > .search__check-box:not(.search__check-box--scope) {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
}

.family-photos-page .search__params-grid > .search__check-box:not(.search__check-box--scope) > .search__other-params {
    flex: 1;
    margin: 0;
}


.family-photos-page .search__rb-label,
.family-photos-page .search__cb-label,
.family-photos-page .search__keyw-label {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--warm-text);
}

.family-photos-page .search__key-words,
.family-photos-page .search__pid {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--warm-text);
    background: #FEFBF6;
    border: 1px solid var(--warm-line);
    border-radius: 6px;
    padding: 8px 10px;
}

.family-photos-page .search__key-words:focus,
.family-photos-page .search__pid:focus {
    outline: none;
    border-color: var(--warm-terracotta);
    box-shadow: 0 0 0 3px rgba(199, 123, 92, 0.18);
}

/* ── Theme row: label | select | input | × (mirrors Mots clés row) ──── */
.family-photos-page .search__theme-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    /* Extra bottom margin so the theme row visibly breathes apart from the
       Mots clés row below it. */
    margin: 6px 0 24px;
    /* Clear the floated Rechercher + Soumettre buttons above, so the input
       can span the full row width like the Mots clés textarea. */
    clear: both;
}

.family-photos-page .search__theme-row .data-box__label--theme {
    /* Match .search__keyw-label exactly — no uppercase/letterspaced "data-box"
       styling, no float, no cream bg from main.css's .data-box__label rule.
       align-self: center fights legacy rules that otherwise pin it to row top. */
    flex: 0 0 70px;
    width: auto;
    float: none;
    text-align: left;
    background: transparent;
    margin: 0;
    padding: 0;
    align-self: center;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--warm-text);
    text-transform: none;
    letter-spacing: normal;
    position: static;
    top: auto;
}

.family-photos-page .search__theme-row .data-box__select--theme,
.family-photos-page .search__theme-row .data-box__input--theme,
.family-photos-page .search__theme-row .data-box__input--theme-1 {
    flex: 1 1 300px;
    min-width: 0;
    /* Override legacy main.css: top: calc(var(--fixedPos) + 30px),
       margin-bottom: -23px, position: relative — all push the input down. */
    position: static;
    top: auto;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--warm-text);
    background: #FEFBF6;
    border: 1px solid var(--warm-line);
    border-radius: 6px;
    padding: 8px 10px;
    height: auto;
}

/* Match the Mots clés textarea's right edge so the theme input lines up
   with the textarea above/below it. */
.family-photos-page .search__theme-row {
    padding-right: 170px;
}

.family-photos-page .search__theme-row .data-box__select--theme,
.family-photos-page .search__theme-row .data-box__input--theme,
.family-photos-page .search__theme-row .data-box__input--theme-1 {
    /* About half the Mots clés textarea width (925/2 ≈ 462) — applies to
       the dropdown shown in modify/delete modes as well as the text inputs
       in add/edit modes. */
    max-width: 462px;
}

.family-photos-page .search__theme-row .data-box__input--theme:focus,
.family-photos-page .search__theme-row .data-box__input--theme-1:focus {
    outline: none;
    border-color: var(--warm-terracotta);
    box-shadow: 0 0 0 3px rgba(199, 123, 92, 0.18);
}

.family-photos-page .search__theme-row .data-box__theme-init-btn {
    /* Override the legacy main.css rules: float:right, position:relative,
       top:34px, margin-top:-19px, margin-right:105px, width:5px. */
    position: static;
    float: none;
    top: auto;
    margin: 0;
    width: auto;
    padding: 2px 6px;
    align-self: center;
    color: var(--warm-muted);
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.family-photos-page .search__theme-row .data-box__theme-init-btn:hover {
    color: var(--warm-terracotta);
}


/* ── Keyword row: label | textarea | pick dropdown | + | x ───────────── */
.family-photos-page .search__keyw-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 12px;
}

.family-photos-page .search__keyw-row .search__keyw-label {
    flex: 0 0 70px;
    margin: 0;
    position: static;
    top: auto;
}

.family-photos-page .search__keyw-row .search__key-words {
    flex: 1 1 300px;
    min-width: 0;
    margin: 0;
    /* Warm paper instead of stark white, matching .search__pid and the other
       search controls. */
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--warm-text);
    background: #FEFBF6;
    border: 1px solid var(--warm-line);
    border-radius: 6px;
    padding: 8px 10px;
}

.family-photos-page .search__keyw-row .search__kwordPick {
    float: none;
    background: transparent;
    margin: 0;
}

.family-photos-page .search__keyw-row .search__kwordPick select {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--warm-text);
    background: #FEFBF6;
    border: 1px solid var(--warm-line);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 0;
    cursor: pointer;
}

.family-photos-page .search__keyw-row .search__kwordPick {
    margin: 0;
    width: auto;
}

/* ── Ensemble button row (right-aligned, right-edge under the textarea's right edge) ──── */
.family-photos-page .search__ensemble-row {
    margin: 0 0 14px;
    text-align: right;
    /* reserve space on the right matching the kwordPick dropdown (170px)
       + the × clear button (25px) + the two flex gaps (~20px), so the
       button's right edge lines up with where the textarea ends. */
    padding-right: 204px;
}

.family-photos-page .search__ensemble-row .search__search-button-ensemble {
    display: inline-block;
}

/* Smaller, lighter (outlined) pill for the ensemble button. */
.family-photos-page #search__ensemble {
    background: transparent;
    color: var(--warm-brown);
    border: 1px solid var(--warm-line);
    font-size: 10.5px;
    padding: 5px 14px;
    letter-spacing: 0.08em;
}

.family-photos-page #search__ensemble:hover {
    background: var(--warm-tan);
    border-color: var(--warm-tan);
    color: var(--warm-brown);
}

/* ── Year row: De ▼  À ▼ (also aligned with Mots clés col) ───────────── */
.family-photos-page .search__year-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 14px;
}

.family-photos-page .search__year-row .search__from-year,
.family-photos-page .search__year-row .search__to-year {
    display: flex;
    align-items: center;
    gap: 6px;
}

.family-photos-page .search__year-row label {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--warm-muted);
    margin: 0;
}

.family-photos-page .search__year-row select {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--warm-text);
    background: #FEFBF6;
    border: 1px solid var(--warm-line);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
}

/* ── Person filter: search photos by a tagged genealogy individual ──── */
.family-photos-page .search__person-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 14px;
}
.family-photos-page .search__person-select {
    flex: 1 1 280px;
    max-width: 360px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--warm-text);
    background: #FEFBF6;
    border: 1px solid var(--warm-line);
    border-radius: 6px;
    padding: 7px 10px;
    cursor: pointer;
}

/* ── "Search by names" / "Search by keywords" — clickable mode TABS ───── */
/* Each label sits to the LEFT of its input (same fixed width so the two inputs
   line up) AND is a tab: click it to switch modes. Active tab = terracotta;
   inactive = muted but clearly clickable (stays full-opacity even when its
   section is dimmed). */
.family-photos-page .search__group-label {
    flex: 0 0 150px;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--warm-muted);
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}
.family-photos-page .search__group-label:hover { color: var(--warm-brown); }
.family-photos-page .search__group-label.is-active { color: var(--warm-terracotta); }
.family-photos-page .search__names-group { margin: 4px 0 12px; }

/* Dim the inactive mode's INPUTS (not the label tabs, which stay clickable). */
.family-photos-page .search__person-select,
.family-photos-page .search__keyw-row .search__key-words,
.family-photos-page .search__keyw-row .search__kwordPick,
.family-photos-page .search__button-remove-keywords,
.family-photos-page .search__ensemble-row,
.family-photos-page .search__year-row,
.family-photos-page .search__params-grid { transition: opacity 0.2s ease; }
.family-photos-page .search__fieldset--names-mode .search__keyw-row .search__key-words,
.family-photos-page .search__fieldset--names-mode .search__keyw-row .search__kwordPick,
.family-photos-page .search__fieldset--names-mode .search__button-remove-keywords,
.family-photos-page .search__fieldset--names-mode .search__ensemble-row,
.family-photos-page .search__fieldset--names-mode .search__year-row,
.family-photos-page .search__fieldset--names-mode .search__params-grid,
.family-photos-page .search__fieldset--keywords-mode .search__person-select { opacity: 0.4; }
/* Inactive controls ignore the pointer, so a click anywhere in the dimmed group
   falls through to the group container where the delegated handler switches modes.
   (The label tabs keep pointer-events and stay clickable.) */
.family-photos-page .search__fieldset--names-mode .search__keyw-row :is(input, textarea, select, button),
.family-photos-page .search__fieldset--names-mode .search__ensemble-row :is(input, button),
.family-photos-page .search__fieldset--names-mode .search__year-row :is(input, select),
.family-photos-page .search__fieldset--names-mode .search__params-grid :is(input, select, label),
.family-photos-page .search__fieldset--keywords-mode .search__person-select { pointer-events: none; }

/* ── Theme action buttons: place underneath the search form ──────────── */
.family-photos-page .search > .data-box__action-buttons {
    margin: 12px 0 6px;
    text-align: center;
}

.family-photos-page .search > .data-box__action-buttons > div {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Theme data-box ───────────────────────────────────────────────────── */
.family-photos-page .data-box__label,
.family-photos-page .data-box__label--theme {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--warm-muted);
}

.family-photos-page .data-box__select,
.family-photos-page .data-box__input,
.family-photos-page .data-box__input--theme,
.family-photos-page .data-box__input--theme-1 {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--warm-text);
    background: #FEFBF6;
    border: 1px solid var(--warm-line);
    border-radius: 6px;
    padding: 6px 10px;
}

.family-photos-page .data-box__select-button--add-theme,
.family-photos-page .data-box__select-button--modify-theme,
.family-photos-page .data-box__select-button--delete-theme,
.family-photos-page .data-box__go-button-save,
.family-photos-page .search__go-button,
.family-photos-page .theme__go-button {
    background: transparent;
    border: 1px solid var(--warm-line);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 4px 3px 4px 3px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--warm-brown);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Force all 3 thème pills (Ajouter / Modifier / Supprimer un thème) to the
   EXACT same width. */
.family-photos-page .data-box__select-button--add-theme,
.family-photos-page .data-box__select-button--modify-theme,
.family-photos-page .data-box__select-button--delete-theme {
    width: 200px;
    text-align: center;
    box-sizing: border-box;
}

.family-photos-page .data-box__select-button--add-theme:hover,
.family-photos-page .data-box__select-button--modify-theme:hover,
.family-photos-page .data-box__go-button-save:hover,
.family-photos-page .search__go-button:hover,
.family-photos-page .theme__go-button:hover {
    background: var(--warm-terracotta);
    border-color: var(--warm-terracotta);
    color: #fff;
}

/* Soumettre / AJOUTER LE THÈME button at top-right: bolder, raised a touch,
   and more gap before Rechercher. Comes AFTER the shared theme-pill rule
   above so the margin override wins. */
.family-photos-page .data-box__go-button-save {
    font-weight: 700;
    margin-right: 18px;
    margin-top: -6px;
}

/* Supprimer un thème — destructive: brick-red outline, fills on hover
   (brick red = manage-readings --warm-danger). */
.family-photos-page .data-box__select-button--delete-theme {
    color: #A6402E;
    border-color: rgba(166, 64, 46, 0.45);
}

.family-photos-page .data-box__select-button--delete-theme:hover {
    background: #A6402E;
    border-color: #A6402E;
    color: #fff;
}

.family-photos-page .data-box__theme-init-btn {
    color: var(--warm-muted);
    cursor: pointer;
    padding: 0 6px;
    transition: color 0.2s ease;
}

.family-photos-page .data-box__theme-init-btn:hover {
    color: var(--warm-terracotta);
}

/* ── Folder & theme dropdowns ─────────────────────────────────────────── */
.family-photos-page .folders__drop-down,
.family-photos-page .themes__drop-down {
    margin: 6px auto 2px;
    text-align: left;
}

body.family-photos-page .folders__drop-down,
body.family-photos-page .themes__drop-down {
    padding-left: 14px;
}

body.family-photos-page [class*="folders__multi-level"],
body.family-photos-page [class*="themes__multi-level"] {
    padding-left: 2.4em;
}

body.family-photos-page .folders__sub-item,
body.family-photos-page .themes__sub-item {
    padding-left: 1.4em;
}

body.family-photos-page .folders__arrow,
body.family-photos-page .themes__arrow {
    margin: 8px 4px 0 0;
}

body.family-photos-page .folders__item > label,
body.family-photos-page .folders__sub-item > label,
body.family-photos-page .themes__item > label,
body.family-photos-page .themes__sub-item > label {
    width: auto;
    padding-bottom: 0.2em;
    padding-left: 0;
    display: inline;
}

body.family-photos-page .folders__drop-down .folders__photofolder,
body.family-photos-page .folders__drop-down .themes__photofolder,
body.family-photos-page .themes__drop-down .folders__photofolder,
body.family-photos-page .themes__drop-down .themes__photofolder {
    padding-left: 1.8em;
}

body.family-photos-page .folders__drop-down .folders__photofolder.L2,
body.family-photos-page .folders__drop-down .themes__photofolder.L2,
body.family-photos-page .themes__drop-down .folders__photofolder.L2,
body.family-photos-page .themes__drop-down .themes__photofolder.L2 {
    padding-left: 1.2em;
}

/* ── Member tiles (vue par dossier & vue par thème) ───────────────────────
   Member tiles (cover photo + name) in a responsive grid; clicking a tile
   expands that member's folder tree / theme list as a full-width panel below
   it. The checkbox/label/panel siblings + main.css's
   `#folders__menu{j}:checked ~ .folders__multi-level{j}` (and the themes
   equivalent) rules drive the expand, so display is left to main.css here. */
body.family-photos-page #themes__list,
body.family-photos-page #photos__folders,
body.family-photos-page #photos__search-folders {
    background: transparent;
}

/* Two columns sitting close together: a fixed thumbnail-width first column + a
   flexible second one (tiles left-pinned). The flexible track is what lets a
   promoted member's tree span the full page width. */
.family-photos-page .themes__grid,
.family-photos-page .folders__grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    align-items: start;
    padding: 8px 0 24px;
}

/* Promote the clicked member to the TOP-LEFT with its tree full-width beneath
   it, so the tree always fits no matter which column the member was in (with
   many members the right-most tree would otherwise run off the page).
   `order:-1` lifts the open member's tile + panel ahead of all the others; the
   tile takes its own full-width row (stays 180px, left-aligned) and the panel
   (already `grid-column:1/-1`) spans the full width below it. The remaining
   members flow in the two-column grid underneath. Single-open (JS) guarantees
   only one member is promoted at a time. */
.family-photos-page .folders__toggle:checked + .folders__tile,
.family-photos-page .themes__toggle:checked + .themes__tile {
    order: -1;
    grid-column: 1 / -1;
}
.family-photos-page .folders__toggle:checked + .folders__tile + .folders__panel,
.family-photos-page .themes__toggle:checked + .themes__tile + .themes__panel {
    order: -1;
}

/* Let long, deeply-indented folder names wrap within the column instead of
   being cropped at the edge. */
.family-photos-page [class*="folders__multi-level"] label,
.family-photos-page [class*="themes__multi-level"] label,
.family-photos-page .folders__photofolder,
.family-photos-page .themes__photofolder {
    white-space: normal;
    overflow-wrap: anywhere;
}

.family-photos-page .themes__tile,
.family-photos-page .folders__tile {
    display: flex;
    flex-direction: column;
    /* Fixed thumbnail size, pinned to the left of its column (see grid above). */
    box-sizing: border-box;
    width: 180px;
    justify-self: start;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--warm-line);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 20px -16px rgba(90, 62, 43, 0.40);
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                opacity 0.2s ease, filter 0.2s ease;
}

/* Attribution: while a member is expanded, fade every member except the one
   whose tree is open, so the full-width left-anchored tree clearly belongs to
   it. Each member is `input.toggle + label.tile + div.panel`, so the open
   member's tile is re-lit via the adjacent `:checked + .tile`. Nested tree
   checkboxes don't carry the `__toggle` class, so they don't trigger this. */
.family-photos-page .folders__grid:has(.folders__toggle:checked) .folders__tile,
.family-photos-page .themes__grid:has(.themes__toggle:checked) .themes__tile {
    opacity: 0.35;
    filter: grayscale(0.7);
}

/* Scoped under the same `:has()` so this out-ranks the dim rule above and the
   open member stays at full opacity. */
.family-photos-page .folders__grid:has(.folders__toggle:checked) .folders__toggle:checked + .folders__tile,
.family-photos-page .themes__grid:has(.themes__toggle:checked) .themes__toggle:checked + .themes__tile {
    opacity: 1;
    filter: none;
}

.family-photos-page .themes__tile:hover,
.family-photos-page .folders__tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -16px rgba(90, 62, 43, 0.50);
}

/* ── Keyboard a11y (phase 1): make the tree expand/collapse toggles reachable ──
   main.css hides ALL checkboxes (input[type=checkbox]{display:none}), which also
   makes the tree's expand toggles unfocusable. Re-enable focus for ONLY the tree
   toggles (scoped — login/search/theme checkboxes keep main.css's rule), kept
   visually hidden (0×0, opacity 0, in normal flow so no scroll-jump). A visible
   focus ring is drawn on the adjacent tile / folder label instead, so keyboard
   users can Tab to a member or folder and press Space to expand it.
   (Loading a folder's photos by keyboard is phase 2 — the li/camera onclick.) */
.family-photos-page .folders__toggle,
.family-photos-page .themes__toggle,
.family-photos-page .folders__item > input[type="checkbox"],
.family-photos-page .themes__item > input[type="checkbox"],
.family-photos-page .folders__sub-item > input[type="checkbox"],
.family-photos-page .themes__sub-item > input[type="checkbox"] {
    /* Focusable but visually hidden AND out of flow: position:absolute keeps the
       toggle from becoming a grid item (it's a direct child of the tile grid) —
       otherwise each member checkbox took a cell and collapsed the 2-column tile
       layout. No top/left, so it sits at its natural spot (no scroll-jump). */
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.family-photos-page .folders__toggle:focus-visible + .folders__tile,
.family-photos-page .themes__toggle:focus-visible + .themes__tile,
.family-photos-page .folders__item > input[type="checkbox"]:focus-visible ~ label,
.family-photos-page .themes__item > input[type="checkbox"]:focus-visible ~ label,
.family-photos-page .folders__sub-item > input[type="checkbox"]:focus-visible ~ label,
.family-photos-page .themes__sub-item > input[type="checkbox"]:focus-visible ~ label {
    outline: 3px solid var(--warm-terracotta);
    outline-offset: 2px;
    border-radius: 4px;
}

/* A member surfaced by a folder search — replaces the old red label text. */
.family-photos-page .folders__tile--match {
    border-color: var(--warm-terracotta);
    box-shadow: 0 0 0 2px var(--warm-terracotta),
        0 8px 20px -16px rgba(90, 62, 43, 0.40);
}

.family-photos-page .themes__tile-cover,
.family-photos-page .folders__tile-cover {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: var(--warm-cream-soft);
}

.family-photos-page .themes__tile-cover--empty,
.family-photos-page .folders__tile-cover--empty {
    background:
        repeating-linear-gradient(45deg,
            var(--warm-cream-soft) 0, var(--warm-cream-soft) 10px,
            #efe4d2 10px, #efe4d2 20px);
}

.family-photos-page .themes__tile-name,
.family-photos-page .folders__tile-name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--warm-brown);
    text-align: center;
    padding: 9px 8px 11px;
}

/* Expanded panel — spans the full grid width below the clicked tile. */
.family-photos-page .themes__panel,
.family-photos-page .folders__panel {
    grid-column: 1 / -1;
    padding: 2px 2px 10px;
}

.family-photos-page .themes__theme {
    display: inline-block;
    margin: 6px 8px 0 0;
    padding: 6px 16px;
    background: var(--warm-cream-soft);
    border: 1px solid var(--warm-line);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--warm-brown);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.family-photos-page .themes__theme:hover {
    background: var(--warm-terracotta);
    border-color: var(--warm-terracotta);
    color: #fff;
}

.family-photos-page .themes__empty {
    display: inline-block;
    margin: 6px 0 0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-style: italic;
    color: var(--warm-muted);
}

/* ── Resume / summary text ────────────────────────────────────────────── */
.family-photos-page .photos__resume-container {
    margin: 4px 0 16px;
    padding: 0;
    text-align: left;
}

.family-photos-page .photos__resume-text {
    text-align: left;
    margin: 0;
    padding: 0;
}

.family-photos-page .photos__resume-text > p {
    text-align: left;
    margin: 0;
    padding: 0;
}

.family-photos-page .photos__resume-text:empty {
    display: none;
}

.family-photos-page .photos > br {
    display: none;
}

.family-photos-page .photos__resume-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    /* Reads as the gallery's intro/lead paragraph — bumped up from 16px, which
       was much too small for the folder description. */
    font-size: 21px;
    line-height: 1.5;
    color: var(--warm-brown);
}

/* ── Thumbnail grid ───────────────────────────────────────────────────── */
.family-photos-page .photos__thumb-container {
    margin: 6px auto;
}

.family-photos-page .photos__imgs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
}

/* Each thumbnail is a matted card in the same language as the member tiles:
   white frame, warm hairline + soft shadow, lift on hover. This overrides the
   old grey frame from main.css (.photos__imgs > div). */
.family-photos-page .photos__imgs > div {
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--warm-line);
    border-radius: 10px;
    box-shadow: 0 8px 20px -16px rgba(90, 62, 43, 0.40);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.family-photos-page .photos__imgs > div:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 18px 30px -16px rgba(90, 62, 43, 0.55);
}

/* Calm things down for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .family-photos-page .photos__imgs img {
        transform: none;
        transition: opacity 0.3s ease;
    }
    .family-photos-page .photos__imgs > div:hover {
        transform: none;
    }
}

/* The photo sits flush inside its card; the card carries the shadow/lift, so
   the image just needs rounded corners. Status rings on commented/annotated
   thumbnails (main.css) still read through. Photos fade in once loaded
   (.is-loaded, set by animatePhotos).
   Thumbnails keep their natural preview sizes; the width/height attributes
   emitted by renderFamilyPhotos (from server-side dimensions) reserve each
   one's exact box before the lazy image loads, so the grid doesn't shift. */
.family-photos-page .photos__imgs img {
    display: block;
    margin: 0;
    /* Thumbnails render ~200px on the longest side (the width/height attrs from
       renderFamilyPhotos size them); this caps anything missing those attrs so a
       low_res image never balloons to its native 475px. */
    max-width: 200px;
    max-height: 200px;
    border-radius: 6px;
    box-shadow: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    cursor: pointer;
}

/* Keyboard a11y (phase 3): visible focus ring when a thumbnail is tabbed to. */
.family-photos-page .photos__imgs img:focus-visible {
    outline: 3px solid var(--warm-terracotta);
    outline-offset: 2px;
}

/* Each photo rises gently into place as it loads (lazy loading means this reads
   as a soft reveal-on-scroll down the grid). */
.family-photos-page .photos__imgs img.is-loaded {
    opacity: 1;
    transform: none;
}

/* Empty state — warm, centred message in place of a blank grid. */
.family-photos-page .photos__empty {
    width: 100%;
    margin: 0;
    padding: 44px 16px;
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--warm-muted);
}

/* Loading + error states — same warm, centred footprint as the empty state, so
   the photo area never sits blank while a folder/theme/search loads or fails. */
.family-photos-page .photos__loading,
.family-photos-page .photos__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 44px 16px;
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--warm-muted);
}

.family-photos-page .photos__spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(160, 120, 90, 0.25);
    border-top-color: var(--warm-terracotta);
    border-radius: 50%;
    animation: photosSpin 0.8s linear infinite;
}

@keyframes photosSpin {
    to { transform: rotate(360deg); }
}

/* Honour reduced-motion: drop the spin, keep the indicator visible. */
@media (prefers-reduced-motion: reduce) {
    .family-photos-page .photos__spinner {
        animation: none;
    }
}

.family-photos-page .photos__error p {
    margin: 0;
}

.family-photos-page .photos__retry {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 15px;
    padding: 8px 20px;
    color: var(--warm-cream);
    background: var(--warm-terracotta);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.family-photos-page .photos__retry:hover {
    background: var(--warm-tan);
}

.family-photos-page .photos__retry:focus-visible {
    outline: 2px solid var(--warm-tan);
    outline-offset: 2px;
}

/* Folder-tree bootstrap states — the spinner shown in #photos__folders while the
   tree is fetched on initial page load, and the error fallback. */
.family-photos-page .folders__loading,
.family-photos-page .folders__error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 17px;
    color: var(--warm-muted);
}

/* ── Modal viewer ─────────────────────────────────────────────────────── */
/* The modal fades in and the photo eases up from a slight scale on open
   (display:none→block restarts both animations). This replaces main.css's
   scale(0) "balloon" zoom with something calmer. Arrow-key prev/next swaps the
   image without re-toggling display, so it doesn't replay — only opening does. */
.family-photos-page .photos__modal {
    background: rgba(58, 46, 39, 0.92);
    animation: photoModalFade 0.25s ease;
}

.family-photos-page .photos__modal-content {
    border: 2px solid var(--warm-line);
    border-radius: 6px;
    /* showModalImage sets an explicit width/height that fits the viewport at
       the photo's aspect, so every resolution renders the same size (seamless
       blur-up). These caps are a safety net; object-fit absorbs the sub-pixel
       aspect difference between the preview and full resolutions. */
    max-height: 82vh;
    max-width: 92vw;
    object-fit: contain;
    cursor: zoom-in;
    animation: photoModalZoom 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
    /* Hidden until the first frame lands (showModalImage adds .is-ready); a fast
       low-res frame fades in blurred (.is-blur), then the full image sharpens. */
    opacity: 0;
    transition: opacity 0.3s ease, filter 0.4s ease, transform 0.2s ease;
}

.family-photos-page .photos__modal-content.is-blur {
    filter: blur(12px);
}

.family-photos-page .photos__modal-content.is-ready {
    opacity: 1;
}

/* Click-to-zoom: scale up toward the clicked point (transform-origin set in JS);
   move the pointer to pan. Click again to zoom out. */
.family-photos-page .photos__modal-content.is-zoomed {
    transform: scale(2.4);
    cursor: zoom-out;
}

@keyframes photoModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Scale only — opacity is driven by .is-ready (load state), not the zoom. */
@keyframes photoModalZoom {
    from { transform: scale(0.94); }
    to   { transform: scale(1); }
}

.family-photos-page .photos__edit-photo {
    width: 25px;
    height: 25px;
    margin-top: 5px;
    filter: brightness(0) invert(1);
    opacity: 0.92;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.family-photos-page .photos__edit-photo:hover {
    opacity: 1;
    transform: scale(1.15);
}

.family-photos-page .photos__modal-title,
.family-photos-page .photos__caption,
.family-photos-page .photos__caption-overflow,
.family-photos-page .photos__year,
.family-photos-page .photos__photo-id,
.family-photos-page .photos__geneol {
    font-family: var(--font-sans);
    color: #FDFAF6;
}

/* The expanded full-caption box (main.css) has a CREAM background, so the
   shared cream text color above rendered it cream-on-cream (invisible). Use
   dark warm text so the full caption actually reads. Also re-position it: the
   legacy rules pinned it with a fixed top:-300px / height:325px and a 1000px+
   max-width, so on wide screens it sat low and spanned the screen. Center it
   over the photo instead, sized to the photo's width (the inline max-width set
   by showModalImage), with auto height that scrolls only if very long. */
.family-photos-page .photos__caption-overflow {
    color: var(--warm-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    max-height: 70vh;
    overflow: auto;
    z-index: 2;
}

/* The "(...suite)" toggle was pure blue + underlined (main.css) — unreadable on
   the dark modal. Re-tint to the warm tan used by the other modal links. */
.family-photos-page .photos__caption-overflow-button {
    color: #ECB78F;
    font-style: italic;
    text-decoration: underline;
    cursor: pointer;
}

.family-photos-page .photos__caption-overflow-button:hover {
    color: #F4D2B6;
}

/* A touch of breathing room under the photo: more space above the caption,
   comfortable line spacing for wrapped lines, and a small horizontal inset so
   the text doesn't run to the photo's edges. (The inline max-width set by
   showModalImage keeps the block at the photo's width.) */
.family-photos-page .photos__caption {
    margin-top: 16px;
    margin-bottom: 4px;
    box-sizing: border-box;
    padding: 0 10px;
    line-height: 1.5;
}

/* The pid (.photos__photo-id p) inherits main.css's color:#000 — invisible on
   the dark modal; and the genealogy line was pure red (label) + pure blue
   (links) at 0.8em — harsh and low-contrast. Re-tint both to read on the dark
   backdrop and enlarge the genealogy line slightly. */
.family-photos-page .photos__photo-id p {
    color: rgba(253, 250, 246, 0.72);
}

.family-photos-page .photos__geneol {
    font-size: 0.95em;
}

.family-photos-page .photos__geneol p {
    color: rgba(253, 250, 246, 0.85);
}

.family-photos-page .photos__geneol a {
    color: #ECB78F;
}

.family-photos-page .photos__geneol a:hover {
    color: #F4D2B6;
}

/* ── Inline people tagging (lightbox) — owner-only chips + add select. The
   lightbox backdrop is always dark, so these use explicit light-on-dark colours
   (like the geneol links above), and !important on the select beats the generic
   dark-mode select fixup so it stays consistent in both themes. ── */
.family-photos-page .photos__people-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}
.family-photos-page .photos__people-label {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #c9b79f;
}
.family-photos-page .photos__people-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px 2px 10px;
    border-radius: 999px;
    background: rgba(253, 250, 246, 0.12);
    border: 1px solid rgba(253, 250, 246, 0.25);
    font-family: var(--font-sans);
    font-size: 12px;
    color: #f5ede0;
}
.family-photos-page .photos__people-chip-x {
    background: none;
    border: none;
    color: #f5ede0;
    font-size: 16px;
    line-height: 1;
    padding: 0 3px;
    cursor: pointer;
}
.family-photos-page .photos__people-chip-x:hover { color: var(--warm-terracotta); }
.family-photos-page .photos__people-add {
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: rgba(253, 250, 246, 0.10) !important;
    color: #f5ede0 !important;
    border: 1px solid rgba(253, 250, 246, 0.25) !important;
    cursor: pointer;
}
.family-photos-page .photos__people-add option { color: #18120e; }

.family-photos-page .photos__modal-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    color: var(--warm-cream);
}

.family-photos-page .photos__previous,
.family-photos-page .photos__next {
    background: transparent;
    color: var(--warm-cream);
    border: none;
    font-size: 28px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.family-photos-page .photos__previous:hover,
.family-photos-page .photos__next:hover {
    color: var(--warm-tan);
}

.family-photos-page .photos__modal .close {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--warm-cream);
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    transition: color 0.2s ease;
}

.family-photos-page .photos__modal .close:hover {
    color: var(--warm-terracotta);
}

/* The dialog itself is focused on open (to seat focus inside the modal without
   ringing any control); it manages focus, so it shows no outline of its own. */
.family-photos-page .photos__modal:focus {
    outline: none;
}

/* Visible keyboard focus ring for the lightbox controls (mouse clicks, which
   use :focus without :focus-visible, stay ring-free). */
.family-photos-page .photos__modal button:focus-visible,
.family-photos-page .photos__modal a:focus-visible {
    outline: 2px solid var(--warm-tan);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Slideshow play/pause — top-left pill in the lightbox. */
.family-photos-page .photos__slideshow {
    position: absolute;
    top: 14px;
    left: 20px;
    z-index: 3;
    width: 42px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(253, 250, 246, 0.5);
    border-radius: 999px;
    color: var(--warm-cream);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.family-photos-page .photos__slideshow:hover {
    background: var(--warm-terracotta);
    border-color: var(--warm-terracotta);
    color: #fff;
}

.family-photos-page .photos__slideshow.is-playing {
    color: var(--warm-tan);
    border-color: var(--warm-tan);
}

/* Auto-linked genealogy names inside a caption (tagged people, linkifyGeneology). */
.family-photos-page .photos__caption-geneol {
    color: var(--warm-terracotta);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.family-photos-page .photos__caption-geneol:hover {
    color: var(--warm-brown);
}

/* ── Video thumbnails + lightbox player ─────────────────────────────────── */
/* Wrapper around a video poster <img> in the grid: anchors the ▶ + duration. */
.family-photos-page .photos__thumb--video {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.family-photos-page .photos__play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(58, 46, 39, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.family-photos-page .photos__play-badge::after {   /* ▶ via a CSS triangle */
    content: "";
    margin-left: 3px;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
}
.family-photos-page .photos__duration-badge {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(58, 46, 39, 0.72);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1.4;
    pointer-events: none;
}
.family-photos-page .photos__modal-video {   /* lightbox <video> (#vid01) */
    background: #000;
}

/* Still-transcoding state (async queue). The poster dims and a badge replaces ▶. */
.family-photos-page .photos__thumb--video.is-processing img { opacity: 0.6; }
.family-photos-page .photos__processing-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 86%;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(58, 46, 39, 0.78);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
}
/* Lightbox note shown when a clicked clip is still transcoding. */
.family-photos-page .photos__video-note {
    margin: 12px auto;
    max-width: 80vw;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(58, 46, 39, 0.72);
    color: var(--warm-cream);
    font-family: var(--font-sans);
    font-size: 14px;
    text-align: center;
}

/* Photo counter "n / total" — subtle pill, bottom-centre of the lightbox. */
.family-photos-page .photos__counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(58, 46, 39, 0.55);
    color: var(--warm-cream);
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.08em;
    pointer-events: none;
}

.family-photos-page .photos__counter:empty {
    display: none;
}

/* ── Theme modal ──────────────────────────────────────────────────────── */
.family-photos-page .theme-modal {
    background: rgba(58, 46, 39, 0.55);
}

.family-photos-page .modal-theme-content {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--warm-line);
    box-shadow:
        0 30px 60px -20px rgba(90, 62, 43, 0.35),
        0 12px 24px -16px rgba(90, 62, 43, 0.20);
    padding: 24px 22px;
}

.family-photos-page .modal-theme-content p {
    font-family: var(--font-sans);
    font-size: 12.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--warm-muted);
    margin: 0 0 10px;
}

.family-photos-page .theme__desc {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--warm-text);
    background: #fff;
    border: 1px solid var(--warm-line);
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    max-width: 540px;
}

.family-photos-page .theme-close {
    color: var(--warm-muted);
    float: right;
    cursor: pointer;
    font-size: 22px;
    transition: color 0.2s ease;
}

.family-photos-page .theme-close:hover {
    color: var(--warm-terracotta);
}

/* ── Generic alert box ────────────────────────────────────────────────── */
.family-photos-page .data-box__generic-alert {
    background: #fff;
    border: 1px solid var(--warm-tan);
    border-left: 4px solid var(--warm-terracotta);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 14px auto;
    max-width: 640px;
    box-shadow: 0 12px 24px -16px rgba(90, 62, 43, 0.20);
}

.family-photos-page .data-box__generic-message-content {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--warm-text);
    margin: 0;
}

.family-photos-page .data-box__closebtn {
    color: var(--warm-muted);
    cursor: pointer;
    float: right;
    transition: color 0.2s ease;
}

.family-photos-page .data-box__closebtn:hover {
    color: var(--warm-terracotta);
}

/* ── Error (logged-out fallback) ──────────────────────────────────────── */
.family-photos-page .error {
    font-family: var(--font-sans);
    color: var(--warm-terracotta);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .family-photos-page .masthead__title-photos {
        font-size: 54px;
    }
    .family-photos-page .masthead__sub-title-part2 {
        font-size: 24px;
    }
    .family-photos-page .page {
        padding: 8px 18px 0;
    }
}

@media (max-width: 640px) {
    .family-photos-page .page {
        padding: 8px 14px 0;
    }
    .family-photos-page .masthead__title-photos {
        font-size: 42px;
        margin-top: 18px;
    }
    .family-photos-page .masthead__sub-title-part2 {
        font-size: 20px;
    }
    .family-photos-page .c-nav-main {
        font-size: 11.5px;
        letter-spacing: 0.12em;
        padding: 12px 0;
    }
    .family-photos-page .c-nav-main__item {
        display: inline-block;
        margin: 2px 0;
    }
    .family-photos-page .c-nav-main__link {
        padding: 4px 8px;
        font-size: 11.5px;
    }
    .family-photos-page .masthead__disconnect-second {
        position: static;
        display: inline-block;
        margin: 6px 4px;
    }
    .family-photos-page .photos__paste-photos,
    .family-photos-page .photos__move-photos,
    .family-photos-page .photos__delete-photos,
    .family-photos-page .photos__favorite-photos,
    .family-photos-page .photos__download-photos,
    .family-photos-page .photos__previous-folder,
    .family-photos-page .photos__next-folder {
        font-size: 10.5px;
        padding: 4px 10px;
    }
    /* Two columns don't fit side-by-side on a phone — stack to one column. */
    .family-photos-page .themes__grid,
    .family-photos-page .folders__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Hide the first theme text input ──────────────────────────────────────
   User wants the dropdown + the second input (#data-box__input--theme1)
   only. JS in main.js / familyPhotosThemes.js still writes to the hidden
   one (renderThemeMgmt, getSearchInputs, setBoxSwitches cases) so it
   stays in the DOM — !important defeats inline `style.display=block`
   that setBoxSwitches may set. */
.family-photos-page #data-box__input--theme {
    display: none !important;
}