/*
 * base.css — the small site-wide Foliale baseline (DECISIONS.md "Asset strategy",
 * tier 2). Loaded on EVERY page, AFTER Bootstrap, BEFORE any per-feature CSS. Kept
 * deliberately small: shared look/typography only — feature styling never goes here.
 */

/* --- Fira Sans (self-hosted, woff2, weights 300–900 normal + italic) ------------
 * font-display: swap — text renders immediately in the fallback, then swaps to Fira
 * Sans when loaded. Each weight/style is a separate file, fetched on demand when the
 * page actually uses it. */
/* fira-sans-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-300.woff2') format('woff2');
}
/* fira-sans-300italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 300;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-300italic.woff2') format('woff2');
}
/* fira-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-regular.woff2') format('woff2');
}
/* fira-sans-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-italic.woff2') format('woff2');
}
/* fira-sans-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-500.woff2') format('woff2');
}
/* fira-sans-500italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 500;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-500italic.woff2') format('woff2');
}
/* fira-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-600.woff2') format('woff2');
}
/* fira-sans-600italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 600;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-600italic.woff2') format('woff2');
}
/* fira-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-700.woff2') format('woff2');
}
/* fira-sans-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 700;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-700italic.woff2') format('woff2');
}
/* fira-sans-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-800.woff2') format('woff2');
}
/* fira-sans-800italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 800;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-800italic.woff2') format('woff2');
}
/* fira-sans-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-900.woff2') format('woff2');
}
/* fira-sans-900italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 900;
  src: url('/assets/fonts/fira-sans/fira-sans-v18-latin-900italic.woff2') format('woff2');
}

/* --- Foliale design tokens ------------------------------------------------------
 * The single place for system defaults. A future theme layer overrides these (it can
 * simply re-declare them at :root or on a scope); nothing else hardcodes these values. */
:root {
    --foliale-font-family: 'Fira Sans', system-ui, sans-serif;
    --foliale-font-size-base: 1rem;   /* placeholder, tunable */
    --foliale-bg: #fff;               /* placeholder */
    --foliale-text-color: #212529;    /* placeholder */
    --foliale-border: #818181;        /* shell border colour (header/footer/both rails) */
    --foliale-bar-h: 48px;            /* the shell bars' height (header = footer; border included) */
    /* MUTED text — Bootstrap's secondary text colour (.text-secondary's grey). First user: every PLACEHOLDER (below),
       so example text in an empty field never reads as a value typed in. */
    --foliale-muted: var(--bs-secondary, #6c757d);

    /* Colour tokens (incremental — extended per brick, not a full sweep). Each defaults to the
       Bootstrap variable it replaced, so today's rendering is unchanged; a future tweak is one edit
       here. */
    /* home-icon colours track Bootstrap success/secondary (NOT rerouted below, so no cycle). */
    --foliale-home-set: var(--bs-success, #198754);           /* home-icon GREEN (is-home) */
    --foliale-home-unset: var(--bs-secondary-color, #6c757d); /* home-icon GREY (not-home) */
    /* needs-research flag AMBER (places: tree node + place view) — Bootstrap's warning yellow, NOT
       --bs-warning-text-emphasis (that is a dark brown meant for text on a pale-warning background). */
    --foliale-research: var(--bs-warning, #ffc107);
    /* "this one" HIGHLIGHT — a soft row tint (the person's own line in a census household, P1a): a pale
       amber, Bootstrap's warning-subtle background (adapts to dark mode). */
    --foliale-highlight: var(--bs-warning-bg-subtle, #fff3cd);
    /* SEX TINTS — pale pink / pale blue, ONE pair app-wide: the People rail's row backgrounds and the
       family chart's colour-by-sex box fills (chart.css aliases these). Unknown sex = no tint. */
    --foliale-female-tint: #F5E7EA;
    --foliale-male-tint: #E2EAF2;
    /* PORTRAIT FRAME — the 7:9 portrait (PortraitSpec: 350x450 stored, 86x110 thumbnail). ONE place for
       the frame's aspect and its display heights; the width follows from the aspect. Used by .portrait-frame
       (below) and the chart's box image (chart.js reads the same 7:9 from PortraitSpec via the data). */
    --foliale-portrait-aspect: 7 / 9;
    --foliale-portrait-header-h: 154px;   /* the person page header (120 x 154) */
    --foliale-portrait-thumb-h: 110px;    /* thumbnails: the portrait page's photo pool (86 x 110) */
    --foliale-portrait-small-h: 72px;     /* the family view's boxes: grandparents + children (56 x 72) */
    --foliale-portrait-bg: var(--bs-secondary-bg, #e9ecef);   /* behind an OLD square shown contained */
    /* --foliale-danger is the AUTHORITATIVE danger value (Bootstrap's danger red today). It is a
       CONCRETE value, NOT var(--bs-danger, …) — because --bs-danger is rerouted to it just below, and
       a self-reference would be an invalid custom-property cycle. */
    --foliale-danger: #dc3545;                                /* delete / detach / danger red */
    --foliale-heart: #dc3545;                                 /* marriage-heart accent — its OWN token
                                                                 (same red today, independent of danger
                                                                 so they can diverge later) */

    /* Route Bootstrap's danger through our token so EVERY danger affordance (btn-danger,
       btn-outline-danger, text-danger, detach/delete, alerts, form validation) honours one edit
       point. Same value today -> no visual change. */
    --bs-danger: var(--foliale-danger);
}

/* App-wide tooltip skin — the ONE delegated tooltip instance (tooltip.js) sets
   customClass:"custom-tooltip" on every tooltip. Sensible defaults now ("not ugly"); styling is
   DEFERRED — a later pass can back these with --foliale-tooltip-* tokens. */
.custom-tooltip {
    --bs-tooltip-bg: #212529;         /* dark neutral (matches --foliale-text-color) */
    --bs-tooltip-color: #fff;
    --bs-tooltip-opacity: 0.95;
    --bs-tooltip-font-size: 0.8125rem;
    --bs-tooltip-border-radius: 0.375rem;
    --bs-tooltip-padding-x: 0.6rem;
    --bs-tooltip-padding-y: 0.35rem;
}

body {
    /* Fira Sans is the SITE-WIDE default font — every page/view inherits it. Change
       --foliale-font-family (above) to change the whole app. */
    font-family: var(--foliale-font-family);
    font-size: var(--foliale-font-size-base);
    /* A hair more line-height than Bootstrap's default, for record-dense pages. */
    line-height: 1.6;
}

/* PLACEHOLDERS render GREY (--foliale-muted), never the body colour: example text ("1954", "4a", "e.g. …") lives
   ONLY in placeholder attributes, never in a value, and must not look typed in. (Bootstrap's own rule uses
   --bs-secondary-color, 75% of the body colour — too close to real text. A floating label's transparent
   placeholder, more specific, still wins.) */
::placeholder,
.form-control::placeholder {
    color: var(--foliale-muted);
    opacity: 1;
}

.navbar-brand {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/*
 * Application shell — full-height flex ROW inside a viewport-locked frame:
 * [ left nav rail | centre column | right list rail ]. The two rails run the full
 * viewport height; the centre column is itself a flex COLUMN (header / content / footer)
 * so header + footer span only the centre's width. Height/flex/scroll behaviour is done
 * with BOOTSTRAP UTILITIES in layout.php (app-shell: d-flex vh-100 overflow-hidden;
 * per region flex-grow-1 / flex-shrink-0 / overflow-y-auto; mt-auto pins the Records
 * group to the bottom of the nav rail). This file carries ONLY what Bootstrap has no
 * utility for: the fixed rail widths, the right rail's border, and min-width:0 so the
 * centre can shrink. STRUCTURE only — no theming/icons/colours (nav-chrome pass later).
 */

/* Left nav: fixed width (Bootstrap has no 12rem utility). Full-height flex-column +
   overflow are utilities in the markup; mt-auto on the Records group pins it bottom.
   Its right border matches the shell borders (--foliale-border). */
.app-sidebar {
    width: 12rem;
    padding: 1rem 0 1rem 1rem;
    border-right: 1px solid var(--foliale-border);
}

/* Header + footer use Bootstrap's border-bottom / border-top utilities, which colour via
   --bs-border-color (and set the property !important). Re-point that variable on these
   shell elements to the Foliale border colour so all four borders match, without an
   !important override. */
.app-centre > .app-header.border-bottom,
.app-centre > .app-footer.border-top {
    --bs-border-color: var(--foliale-border);
}

/* THE TWO SHELL BARS share one height — the header MIRRORS the footer. Both carry .app-bar, held at
   --foliale-bar-h (48px — the signed-in footer's own height: py-2 around its btn-sm Sign out, plus the border;
   border-box, so the border is inside it). Fixed, not a floor: the header (whose content is shorter) no longer
   sits 8px under the footer. */
.app-bar {
    min-height: var(--foliale-bar-h);
    height: var(--foliale-bar-h);
}

/* HEADER three zones: left (logo + "Foliale") | centre (tree name) | right (reserved). A compact
   line-height keeps the header's 1rem content UNDER the shared .app-bar min-height, so the bar's
   min-height floors the header to exactly the footer's height (the body's 1.6 line-height would
   otherwise make the header ~3px taller than the footer's smaller text). */
.app-header {
    line-height: 1.2;
}
/* The logo FILLS the bar's height inside the same vertical padding the footer uses (py-2: 0.5rem above and
   below) and the bar's 1px border. The right zone balances the centre (as footer-right). */
.app-header-logo {
    height: calc(var(--foliale-bar-h) - 1rem - 1px);
    width: auto;
}
.app-header-name {
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--bs-body-color, #212529);
}
.app-header-right {
    min-width: 3.5rem;   /* ~= the logo + word cluster, so the centre tree name stays balanced */
}
.app-header-tree {
    color: var(--bs-secondary-color, #6c757d);
}

/* Footer THREE ZONES: left icons | centre per-page context (#app-footer-centre) | right (reserved).
   The centre grows and centres the compact page <h1>; left/right hold their intrinsic width. The
   right zone is given the SAME min-width as the left icon cluster so the centre title stays visually
   centred under the footer, not shoved by the icons. Compact now — the painting pass refines. */
.app-footer-right {
    min-width: 3.5rem;   /* ~= the two left icons + gap, so the centre title is balanced */
}
.app-footer-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--bs-body-color, #212529);   /* readable, not the footer's muted grey */
}

/* Footer left-cluster icon CONTROLS — the Home/Settings links AND the home-picker chevron button all
   read the same: muted, no button chrome, darken on hover/focus. (The chevron is a <button> so it can
   carry a delegated tooltip; data-bs-toggle="modal" would collide, so it opens via data-modal-open.) */
.app-footer-icon {
    color: var(--foliale-home-unset);   /* the muted-grey icon colour (shared token) */
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
}
.app-footer-icon:hover,
.app-footer-icon:focus {
    color: var(--foliale-text-color);
}

/* The LAUNCHER (`/`): a centred column of equal-width large buttons (~22rem; never wider than the centre). */
.launcher-actions {
    width: 22rem;
    max-width: 100%;
}

/* The footer BACK button (btn btn-outline-secondary btn-sm): a compact line-height and vertical padding, set
   through Bootstrap's own button variables, keep it inside the shared .app-bar height (a stock btn-sm would
   make the footer taller than the header it mirrors). */
.app-footer-back {
    --bs-btn-line-height: 1.2;
    --bs-btn-padding-y: 0.125rem;
}

/* The home-picker CARET pairs visually with the Home (house) icon = "home + change-home". The row's
   uniform gap-3 (1rem) is overridden ONLY on the caret: a negative left margin TIGHTENS it to the
   house (a pair), a positive right margin PUSHES it from Settings (separating the pair from settings).
   The Home/Settings icons' own alignment is untouched. */
.app-footer-chevron {
    margin-left: -0.65rem;   /* gap to Home ~0.35rem (tight pair) */
    margin-right: 0.4rem;    /* gap to Settings ~1.4rem (separated) */
}

/* Home-picker PICK button — the whole row is one full-width, left-aligned submit button with NO
   button chrome; hover/focus highlights it as a clickable "set as home" pick. */
.home-picker-pick {
    background: none;
    border: 0;
    color: inherit;
    border-radius: 0.375rem;
    padding-inline: 0.4rem;
}
.home-picker-pick:hover,
.home-picker-pick:focus {
    background: var(--bs-secondary-bg, #e9ecef);
}

/* Centre column: min-width:0 lets it shrink instead of overflowing the row between the
   two fixed rails (Bootstrap 5.3 has no min-width-0 utility). It is a flex COLUMN
   (header / content / footer) via utilities in the markup; the content region fills +
   scrolls. */
.app-centre {
    min-width: 0;
}

.app-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-nav-item {
    padding: 0.15rem 0;
}

/* The rail's JUMP INDEX (P1a, rail-index.js): the current page's own index at the top of the rail — no rule
   beneath it (P1b fix-up). Its two groups — the on-page links, then the CHART pages ("Family chart") — are
   set apart by a LIGHTER rule above the chart group. A not-yet-built entry is muted and inert (its tooltip
   says when). */
.app-rail-index {
    padding-bottom: 0.75rem;
}
.app-rail-index-charts {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}
.app-rail-index-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.app-rail-index-list .app-nav-item {
    padding-left: 0.5rem;
}
.app-rail-index-current {
    font-weight: 600;
}
.app-rail-index-disabled {
    color: var(--bs-secondary-color);
    cursor: not-allowed;
}

/* An inert control that keeps its tooltip (a disabled .btn swallows pointer events, so the tooltip would
   never show): looks disabled, stays hoverable / focusable. */
.disabled-look {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Right list region: fixed width + its defining left border. The region is a permanent
   column; flex-shrink-0 + width hold it at 23rem (empty or full), overflow-y-auto scrolls
   its own content — both via utilities in the markup. The border matches the shell borders
   (--foliale-border). */
.app-rightpanel {
    width: 23rem;   /* ~50px wider than the original 20rem */
    /* Horizontal padding is SMALL and SYMMETRIC (0.5rem each side). It used to be 1.5rem left /
       1rem right — an asymmetric ~24px indent that pushed the list rows in from the border and
       wasted rail width (box-sizing is border-box, so the padding eats into the 23rem). Vertical
       padding is unchanged. NOTE: the list rows' own indent is NOT the <ol> marker padding — the
       lists carry .list-unstyled, which already zeroes that. */
    padding: 1rem 0.5rem;
    border-left: 1px solid var(--foliale-border);
}

/* The PORTRAIT FRAME — every portrait / avatar renders in a 7:9 frame (tokens above). A 7:9 image (a new
   portrait, an avatar) FILLS it (.portrait-fit-cover); anything else — an OLD square portrait, never
   migrated — is shown WHOLE inside the same frame (.portrait-fit-contain, on the frame background): never
   stretched. The size modifier sets the height; the width follows from the aspect. */
.portrait-frame {
    display: block;
    aspect-ratio: var(--foliale-portrait-aspect);
    height: var(--foliale-portrait-thumb-h);
    overflow: hidden;
    background: var(--foliale-portrait-bg);
}

.portrait-frame--header {
    height: var(--foliale-portrait-header-h);
}

.portrait-frame--thumb {
    height: var(--foliale-portrait-thumb-h);
}

.portrait-frame--small {
    height: var(--foliale-portrait-small-h);
}

/* The FAMILY VIEW (/family/{id}, FV1): small boxes (grandparents, children) and the couple's panels. The text column
   may shrink (long names wrap, never push the page wide); the bio scrolls when long; the marriage heart uses its
   own token. The LAYOUT keys on the CENTRE's own width (a container query — the Census list's reflow), not the
   viewport: the centre sits between the rails, so a wide window can still give the page a narrow column. Wide:
   the parents row and the couple side by side, the children three across. At 700px or under everything stacks to
   one column; under 420px a couple panel puts its portrait above the text. */
.family-view {
    container-type: inline-size;
    container-name: familyview;
}
.fv-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.fv-pair--tight {
    gap: 0.5rem;
}
.fv-pair-cell,
.fv-children-cell {
    min-width: 0;
}
.fv-panel-body {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.fv-children {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
@container familyview (max-width: 700px) {
    .fv-pair,
    .fv-children {
        grid-template-columns: minmax(0, 1fr);
    }
}
@container familyview (max-width: 420px) {
    .fv-panel-body {
        flex-direction: column;
    }
}
.fv-text {
    min-width: 0;
    overflow-wrap: anywhere;
}
.fv-bio {
    max-height: 12rem;
    overflow-y: auto;
    white-space: normal;
}
.fv-heart {
    color: var(--foliale-heart);
}
.fv-unknown {
    background: var(--bs-tertiary-bg);
}

.portrait-frame > img {
    display: block;
    width: 100%;
    height: 100%;
}

.portrait-fit-cover {
    object-fit: cover;
}

.portrait-fit-contain {
    object-fit: contain;
}

/* The RIGHT-RAIL HEADER (_rail-head.php) — the same block atop People, Places and Sources: the title
   left, the small "+ Add …" button beside it at the right; pinned above the search (only the rail's
   results region scrolls). */
.rail-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* === Sources (Sources arc S2): the list (sources.php) + the source page (source.php) ===========
   Colours are Bootstrap variables only (no raw hex). */

/* Source TYPE chip (Original / Derivative / Authored) — a quiet neutral pill, list + page header. */
.source-type-chip {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
    border: 1px solid var(--bs-border-color);
    font-weight: 500;
}

/* The list's code + name links read as table text, underlined on hover. */
.sources-table a {
    color: inherit;
    text-decoration: none;
}
.sources-table a:hover,
.sources-table a:focus-visible {
    text-decoration: underline;
}
.sources-code {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.source-notes {
    white-space: normal;
    color: var(--bs-secondary-color);
}

/* A citation row: thumbnail slot + text, the whole row one link. */
.source-citation + .source-citation {
    border-top: 1px solid var(--bs-border-color);
}
.source-citation-link {
    padding: 0.5rem 0;
    color: inherit;
    text-decoration: none;
}
.source-citation-link:hover .source-citation-locator,
.source-citation-link:focus-visible .source-citation-locator {
    text-decoration: underline;
}

/* The 64x48 PAGE-THUMBNAIL slot (_page-thumb.php — source rows, citation Page images; kept even when
   empty, so rows line up). The image is the fit-inside page thumbnail, shown WHOLE (contain — never
   cropped: a census page stays a page); a PDF without a rendered page shows a centred file icon. */
.page-thumb {
    width: 64px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius-sm);
    overflow: hidden;
}
.page-thumb-img {
    width: 64px;
    height: 48px;
    object-fit: contain;
}
.page-thumb-doc {
    font-size: 1.75rem;
    color: var(--bs-secondary-color);
}

/* The EDIT-PHOTO modal's photo (_photo-edit.php): shown large but WHOLE — fit inside ~70% of the viewport
   height, never cropped or upscaled past its width. */
.photo-edit-img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    margin: 0 auto;
    object-fit: contain;
}
.photo-edit-doc {
    font-size: 2.5rem;
    color: var(--bs-secondary-color);
}

/* === Citation page (S3): page images, cited facts, the media viewer ============================= */

.citation-source a {
    text-decoration: none;
}
.citation-page-row,
.citation-fact {
    padding: 0.4rem 0;
}
.citation-page-row + .citation-page-row,
.citation-fact + .citation-fact {
    border-top: 1px solid var(--bs-border-color);
}
.citation-page-open {
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-tertiary-bg);
}
.citation-page-open:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
.citation-page-label {
    min-width: 0;   /* lets the filename truncate inside the flex row */
}

/* Field marker ("date only" / "place only") + the three classification chips — quiet outlined pills. */
.citation-field-marker,
.evidence-chip {
    background-color: transparent;
    color: var(--bs-emphasis-color);
    border: 1px solid var(--bs-border-color);
    font-weight: 500;
}
.evidence-chip--confidence {
    background-color: var(--bs-secondary-bg);
}

/* 0032 — a source KIND (GRO births index …): an outlined pill beside the name (Sources list + source page). The
   citation page's fields table: label column narrow and muted, values wrap. */
.source-kind-chip {
    background-color: transparent;
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
    font-weight: 500;
}
.citation-fields {
    max-width: 40rem;
}
.citation-field-label {
    width: 12rem;
    white-space: nowrap;
}
.citation-field-value {
    overflow-wrap: anywhere;
}

/* The viewer: an image fills the modal width at its own aspect (the scrollable body handles a tall
   page); a PDF gets the browser's own viewer, as tall as the capped body allows. */
.media-viewer-body {
    text-align: center;
}
.media-viewer-img {
    max-width: 100%;
    height: auto;
}
/* Zoomed (any level but Fit; media-viewer.js sets the width): the image leaves the width cap and the
   body scrolls BOTH ways. A block with auto margins centres while it fits and starts at the left edge
   once it is wider, so the whole page stays reachable by scrolling. */
.media-viewer-body {
    overflow: auto;
}
.media-viewer-img.is-zoomed {
    display: block;
    max-width: none;
    margin: 0 auto;
}
.media-viewer-pdf {
    width: 100%;
    height: 75vh;
    border: 0;
}

/* === Event page Sources box (S4) ================================================================ */
.event-source {
    padding: 0.35rem 0;
}
.event-source + .event-source {
    border-top: 1px solid var(--bs-border-color);
}
.event-source-cite {
    text-decoration: none;
}
.citation-pick-options,
.source-pick-options {
    max-height: 16rem;
    overflow-y: auto;
}
/* "Last used" — a plain Bootstrap text-bg-secondary badge (its own background + contrasting text, so it
   stays readable on the btn-light option row); the class is only a hook. */
.citation-last-used {
    font-weight: 500;
}

/* "unattached" — evidence that no fact cites (orphan policy); the research amber, outlined. */
.source-unattached {
    background-color: transparent;
    color: var(--bs-emphasis-color);
    border: 1px solid var(--foliale-research);
    font-weight: 500;
}

/* L2 — the SIGN-IN pages (/login, /setup): outside the frame, one centred card (layout-plain.php). */
.auth-page {
    background-color: var(--bs-tertiary-bg);
}
.auth-card {
    width: 100%;
    max-width: 24rem;
}
/* L2 — footer RIGHT: the signed-in account's name (truncated when long) + Sign out. */
.app-footer-user {
    max-width: 12rem;
}

/* The person header's "Living" badge (person.living = 1) — the home icon's green token. */
.person-living-badge {
    background-color: var(--foliale-home-set);
    color: var(--bs-white);
    font-size: 0.6em;
    vertical-align: middle;
}

/* The media viewer's heading: the title over its size caption ("2500 × 1173 · 620 KB"). min-width 0 lets both
   truncate inside the flex header beside the zoom toolbar (Bootstrap has no min-width utility). */
.media-viewer-heading {
    min-width: 0;
    flex: 1 1 auto;
}