/* File: wwwroot/css/site.css
   IsaFamilyTree theme. Colours, radius and spacing are tokens; layout uses logical properties
   (inline-start / inline-end) so the same rules serve English (LTR) and Arabic (RTL). */
:root {
    --ft-surface: #FBF8F3;
    --ft-card: #FFFFFF;
    --ft-border: #E7DFD3;
    --ft-ink: #2B2622;
    --ft-ink-soft: #6B6259;
    --ft-primary: #1F5F57;
    --ft-primary-dark: #17483F;
    --ft-accent: #B5653A;
    --ft-radius: 12px;
    --ft-space: 4px;
    --bs-primary: #1F5F57;
    --bs-primary-rgb: 31, 95, 87;
    --bs-link-color: #1F5F57;
    --bs-link-hover-color: #17483F;
    --bs-body-bg: var(--ft-surface);
    --bs-body-color: var(--ft-ink);
}

html[lang="ar"] body { font-family: 'Noto Naskh Arabic', 'Segoe UI', Tahoma, 'Geeza Pro', 'Droid Arabic Naskh', 'Noto Sans Arabic', serif; line-height: 1.8; }
body { background: var(--ft-surface); color: var(--ft-ink); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.btn-primary { --bs-btn-bg: var(--ft-primary); --bs-btn-border-color: var(--ft-primary); --bs-btn-hover-bg: var(--ft-primary-dark); --bs-btn-hover-border-color: var(--ft-primary-dark); --bs-btn-active-bg: var(--ft-primary-dark); --bs-btn-active-border-color: var(--ft-primary-dark); }
.btn-outline-secondary { --bs-btn-color: var(--ft-ink-soft); --bs-btn-border-color: var(--ft-border); }
.btn-pill { border-radius: 999px; padding-block: calc(var(--ft-space) * 2.5); font-weight: 600; }
.btn-google { background: #fff; border: 1px solid var(--ft-border); color: var(--ft-ink); border-radius: 999px; padding-block: calc(var(--ft-space) * 2.5); font-weight: 600; }
.btn-google:hover { background: #F4EFE7; color: var(--ft-ink); }
.btn-google .fa-google { color: #DB4437; margin-inline-end: 8px; }
.btn-microsoft .ms-logo { margin-inline-end: 8px; vertical-align: -3px; }
:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: 2px; }
.skip-link { position: absolute; inset-inline-start: -9999px; top: 0; background: var(--ft-primary); color: #fff; padding: 8px 16px; z-index: 2000; }
.skip-link:focus { inset-inline-start: 0; }

/* Header */
.site-header { background: var(--ft-card); border-block-end: 1px solid var(--ft-border); position: sticky; top: 0; z-index: 1030; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.brand { color: var(--ft-primary); font-weight: 700; font-size: 1.2rem; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.main-nav { gap: 24px; align-items: center; }
.main-nav a { color: var(--ft-ink); text-decoration: none; font-weight: 500; }
.main-nav a:hover { color: var(--ft-primary); }
.nav-soon { color: var(--ft-ink-soft); opacity: .7; cursor: default; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.user-menu-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 200px; }
.user-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu .dropdown-item i { width: 1.25rem; margin-inline-end: 6px; color: var(--ft-ink-soft); text-align: center; }
.user-menu .dropdown-item { padding-block: .5rem; }
@media (max-width: 1399.98px) { .user-menu-name { max-width: 90px; } }
.user-chip { display: inline-flex; gap: 6px; align-items: center; color: var(--ft-ink-soft); font-size: .9rem; }
.lang-switch { margin: 0; }

.page-content { flex: 1; padding-block: calc(var(--ft-space) * 8); max-width: 1280px; }
.page-title { font-size: 1.6rem; font-weight: 700; margin-block-end: 20px; }
.site-footer { border-block-start: 1px solid var(--ft-border); padding-block: 16px; color: var(--ft-ink-soft); font-size: .85rem; text-align: center; }

/* Cards and home */
.widget-card { background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: var(--ft-radius); padding: 20px; }
.section-spacer { margin-block-start: 32px; }
.section-title { font-size: 1.15rem; font-weight: 700; margin-block-end: 12px; }
.hero { padding: 32px; border-radius: var(--ft-radius); background: linear-gradient(135deg, #1F5F57 0%, #2C7A6F 100%); color: #FBF8F3; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; opacity: .85; margin: 0 0 8px; }
.hero-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; margin: 0 0 8px; }
.hero-lead { max-width: 60ch; margin: 0; opacity: .92; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.feature-card { display: flex; flex-direction: column; gap: 8px; }
.feature-icon { width: 44px; height: 44px; border-radius: 12px; background: #F1E6D8; color: var(--ft-accent); display: grid; place-items: center; font-size: 1.2rem; }
.feature-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.feature-text { color: var(--ft-ink-soft); margin: 0; flex: 1; }
.badge-soon { align-self: flex-start; background: #F1E6D8; color: var(--ft-accent); border-radius: 999px; padding: 2px 12px; font-size: .78rem; font-weight: 600; }

/* Sign-in and error pages */
.account-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(circle at top, #F3EADC 0%, var(--ft-surface) 60%); }
.account-lang { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; }
.account-shell { width: 100%; max-width: 440px; }
.account-card { background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: 16px; padding: 32px; box-shadow: 0 8px 30px rgba(43, 38, 34, .06); }
.account-mark { width: 56px; height: 56px; border-radius: 16px; background: var(--ft-primary); color: #FBF8F3; display: grid; place-items: center; font-size: 1.5rem; margin: 0 auto 16px; }
.account-title { font-size: 1.5rem; font-weight: 700; text-align: center; margin: 0 0 4px; }
.account-subtitle { text-align: center; color: var(--ft-ink-soft); margin-block-end: 24px; }
.account-divider { display: flex; align-items: center; gap: 12px; color: var(--ft-ink-soft); margin-block: 20px; font-size: .85rem; }
.account-divider::before, .account-divider::after { content: ""; flex: 1; border-block-start: 1px solid var(--ft-border); }
.account-help { text-align: center; color: var(--ft-ink-soft); font-size: .85rem; margin: 14px 0 0; }
.pw-toggle { min-width: 44px; }
.pw-toggle:focus-visible, #login-submit:focus-visible { outline: 2px solid var(--ft-primary); outline-offset: 2px; }
.account-switch { text-align: center; margin: 20px 0 0; color: var(--ft-ink-soft); }
.error-code { font-size: 4rem; font-weight: 800; color: var(--ft-accent); line-height: 1; margin-block-end: 8px; }

/* Admin */
.admin-tabs { margin-block-end: 16px; }
.admin-tabs .nav-link { color: var(--ft-ink-soft); }
.admin-tabs .nav-link.active { color: var(--ft-primary); font-weight: 600; }
.admin-panels .table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ft-ink-soft); white-space: nowrap; }
.role-select { min-width: 150px; }

@media (max-width: 575.98px) {
    .account-card { padding: 24px 20px; }
    .page-content { padding-block: 20px; }
    .hero { padding: 24px 20px; }
}

/* People: list, cards and profile */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.person-card, .mini-person { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ft-ink); }
.person-card { background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: var(--ft-radius); padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.person-card:hover { border-color: var(--ft-primary); box-shadow: 0 4px 14px rgba(31, 95, 87, .1); color: var(--ft-ink); }
.mini-person { padding: 4px 0; }
.mini-person:hover .mini-name { color: var(--ft-primary); text-decoration: underline; }
.mini-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; background: #EFE9DF; color: var(--ft-ink-soft); }
.mini-icon.gender-M, .profile-avatar.gender-M { background: #E3EEF2; color: #2F6B82; }
.mini-icon.gender-F, .profile-avatar.gender-F { background: #F6E6DE; color: var(--ft-accent); }
.mini-text { display: flex; flex-direction: column; min-width: 0; }
.mini-name { font-weight: 600; overflow-wrap: anywhere; }
.mini-dates { font-size: .82rem; color: var(--ft-ink-soft); }

.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.profile-avatar { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; background: #EFE9DF; color: var(--ft-ink-soft); }
.profile-title { flex: 1 1 260px; min-width: 0; }
.profile-other-name { font-size: 1.15rem; color: var(--ft-ink-soft); }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.relation-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.relation-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.relation-meta { display: inline-flex; align-items: center; gap: 6px; }
.union-block { border: 1px solid var(--ft-border); border-radius: var(--ft-radius); padding: 12px 14px; margin-block-start: 12px; background: #FDFBF8; }
.detail-list dt { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ft-ink-soft); margin-block-start: 12px; }
.detail-list dt:first-child { margin-block-start: 0; }
.detail-list dd { margin: 2px 0 0; overflow-wrap: anywhere; }

/* ---- Phase 3: interactive tree ---- */
.tree-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; margin-bottom: 12px; }
.tree-search { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 420px; }
.tree-search-results { position: absolute; inset-inline: 0; top: calc(100% + 4px); background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(43, 38, 34, .16); z-index: 30; margin: 0; padding: 4px; max-height: 320px; overflow: auto; }
.tree-hit { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; background: none; border: 0; border-radius: 8px; padding: 8px 10px; color: var(--ft-ink); }
.tree-hit:hover, .tree-hit:focus-visible { background: #F4EFE7; }
.tree-hit small { margin-inline-start: auto; }
.tree-hit-none { padding: 8px 10px; color: var(--ft-ink-soft); }
.tree-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.tree-select { width: auto; max-width: 210px; }
.tree-buttons { display: flex; gap: 6px; margin-inline-start: auto; }

.tree-stage { position: relative; height: calc(100vh - 250px); height: calc(100dvh - 250px); min-height: 440px; border: 1px solid var(--ft-border); border-radius: var(--ft-radius); background: radial-gradient(circle at 1px 1px, #E2D9CB 1px, transparent 0) 0 0 / 24px 24px, #FDFBF7; overflow: hidden; }
.tree-stage:fullscreen { height: 100vh; height: 100dvh; border-radius: 0; }
.tree-stage-fixed { position: fixed; inset: 0; height: auto; z-index: 1500; border-radius: 0; }
.tree-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline-offset: -3px; }
.tree-viewport.is-panning { cursor: grabbing; }
.tree-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.tree-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.tree-cards { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.tree-edge { fill: none; stroke: #8B7F72; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tree-edge.dashed { stroke-dasharray: 6 5; }
.tree-edge.cross { stroke: #C4B6A3; stroke-width: 1.2; stroke-dasharray: 2 5; }
.tree-path-line { fill: none; stroke: var(--ft-accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .75; vector-effect: non-scaling-stroke; }

.tree-card { position: absolute; box-sizing: border-box; background: var(--ft-card); border: 1.5px solid var(--ft-border); border-radius: 14px; box-shadow: 0 2px 8px rgba(43, 38, 34, .08); cursor: pointer; display: flex; align-items: center; padding: 8px 10px; transition: opacity .15s, box-shadow .15s, border-color .15s; }
.tree-card:hover { box-shadow: 0 6px 18px rgba(43, 38, 34, .16); }
.tree-card.gender-M { border-inline-start: 5px solid #4F8FA8; }
.tree-card.gender-F { border-inline-start: 5px solid #D08B6B; }
.tree-card.gender-U { border-inline-start: 5px solid #B9AFA3; }
.tree-card.deceased { background: #F6F2EC; }
.tree-card.placeholder { border-style: dashed; background: #FFFDF8; }
.tree-card.is-selected { border-color: var(--ft-primary); box-shadow: 0 0 0 3px rgba(31, 95, 87, .25), 0 8px 22px rgba(43, 38, 34, .18); z-index: 3; }
.tree-card.rel-parent { box-shadow: 0 0 0 3px rgba(181, 101, 58, .35); }
.tree-card.rel-child { box-shadow: 0 0 0 3px rgba(31, 95, 87, .22); }
.tree-card.rel-spouse { box-shadow: 0 0 0 3px rgba(190, 70, 110, .30); }
.tree-card.on-path { box-shadow: 0 0 0 4px rgba(181, 101, 58, .55); z-index: 2; }
.has-selection .tree-card:not(.hl):not(.on-path) { opacity: .5; }
.tc-body { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
.tc-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #EFE9DF; color: var(--ft-ink-soft); font-size: 16px; }
.gender-M .tc-avatar { background: #E3EEF2; color: #2F6B82; }
.gender-F .tc-avatar { background: #F6E6DE; color: var(--ft-accent); }
.tc-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tc-name { font-weight: 600; font-size: .9rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tc-dates { font-size: .75rem; color: var(--ft-ink-soft); white-space: nowrap; }
.tc-cross { font-size: .65rem; opacity: .7; }
.tc-btn { position: absolute; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ft-border); background: #fff; color: var(--ft-ink-soft); font-size: 11px; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(43, 38, 34, .15); cursor: pointer; z-index: 4; }
.tc-btn { transform: scale(min(var(--ik, 1), 1.8)); }
/* Bigger invisible hit area at low zoom so branch buttons stay tappable (capped so neighbours never overlap) */
.tc-btn::after { content: ''; position: absolute; inset: min(0px, calc((24px - min(44px * var(--ik, 1), 64px)) / 2)); border-radius: 50%; }
.tc-btn:hover { background: var(--ft-primary); color: #fff; border-color: var(--ft-primary); }
.tc-up { top: -13px; left: calc(50% - 12px); }
.tc-down { bottom: -13px; left: calc(50% - 12px); }
.tc-fold { bottom: -9px; inset-inline-end: -9px; width: 18px; height: 18px; font-size: 9px; opacity: 0; transition: opacity .15s; }
.tree-card:hover .tc-fold, .tree-card:focus-within .tc-fold, .tree-card.is-selected .tc-fold { opacity: 1; }
.union-badge { position: absolute; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--ft-border); font-size: 10px; z-index: 1; }
.union-badge.u-current { color: #C0476E; }
.union-badge.u-ended { color: #8B7F72; }
.union-badge.u-widowed { color: #8B7F72; }

.tree-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ft-ink-soft); text-align: center; padding: 24px; }
.tree-empty .fa-sitemap { font-size: 3rem; opacity: .4; }
.tree-loading { position: absolute; inset-block-start: 12px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: 999px; padding: 4px 16px; font-size: .85rem; color: var(--ft-ink-soft); box-shadow: 0 2px 8px rgba(43, 38, 34, .12); z-index: 20; }
.tree-loading.d-none { display: none !important; }
.tree-toast { position: absolute; inset-block-start: 12px; inset-inline: 12px; margin-inline: auto; width: fit-content; max-width: calc(100% - 24px); background: var(--ft-ink); color: #fff; border-radius: 10px; padding: 8px 16px; font-size: .9rem; z-index: 25; }

.tree-panel { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; width: 330px; max-width: calc(100% - 24px); max-height: 70%; overflow: auto; background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: var(--ft-radius); box-shadow: 0 10px 30px rgba(43, 38, 34, .2); padding: 16px; z-index: 15; }
.tree-panel-close { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; }
.tree-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #EFE9DF; color: var(--ft-ink-soft); font-size: 22px; }
.tree-avatar.gender-M { background: #E3EEF2; color: #2F6B82; }
.tree-avatar.gender-F { background: #F6E6DE; color: var(--ft-accent); }
.tp-name { overflow-wrap: anywhere; }
.min-w-0 { min-width: 0; }
.tp-relatives { margin-top: 12px; }
.tp-group { margin-bottom: 8px; }
.tp-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ft-ink-soft); margin-bottom: 4px; }
.tp-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ft-border); background: #FBF8F3; color: var(--ft-ink); font-size: .8rem; }
html[dir="rtl"] .tp-chip { margin: 0 0 6px 6px; }
.tp-chip:hover { border-color: var(--ft-primary); color: var(--ft-primary); }
.tp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.tree-legend { position: absolute; inset-block-end: 12px; inset-inline-start: 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: 60%; background: rgba(255, 255, 255, .88); border: 1px solid var(--ft-border); border-radius: 10px; padding: 6px 12px; font-size: .75rem; color: var(--ft-ink-soft); z-index: 10; pointer-events: none; }
.tree-legend .lg-line { display: inline-block; width: 22px; height: 0; border-top: 2px solid #8B7F72; vertical-align: middle; margin-inline-end: 4px; }
.tree-legend .lg-line.dashed { border-top-style: dashed; }
.tree-legend .lg-heart { color: #C0476E; }
.tree-legend .lg-broken { color: #8B7F72; }

@media (max-width: 767.98px) {
    .tree-stage { height: calc(100vh - 340px); height: calc(100dvh - 340px); min-height: 380px; }
    .tree-legend { display: none; }
    .tree-panel { inset-inline: 8px; inset-block-end: 8px; width: auto; max-height: 55%; }
    .tree-buttons { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) { .tree-card { transition: none; } }

/* ===== Phase 4: profiles, directory, branches, global search ===== */
.profile-photo { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ft-card); box-shadow: 0 0 0 1px var(--ft-border); background: #EFE9DF; }
.profile-tabs { border-bottom-color: var(--ft-border); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
.profile-tabs .nav-link { color: var(--ft-ink-soft); }
.profile-tabs .nav-link.active { color: var(--ft-primary); font-weight: 600; border-color: var(--ft-border) var(--ft-border) var(--ft-surface); background: var(--ft-surface); }
.contact-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ft-border); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list i { width: 18px; text-align: center; color: var(--ft-ink-soft); }
.life-story { white-space: pre-line; line-height: 1.8; }

.branch-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 500; color: var(--branch-colour, var(--ft-primary)); background: color-mix(in srgb, var(--branch-colour, #1F5F57) 12%, #fff); border: 1px solid color-mix(in srgb, var(--branch-colour, #1F5F57) 35%, #fff); }
.branch-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--branch-colour, var(--ft-primary)); }
.branch-dot-lg { width: 44px; height: 44px; }
.branch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.branch-card { border-inline-start: 6px solid var(--branch-colour, var(--ft-primary)); padding: 14px 16px; }
.branch-card-main { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ft-ink); }
.branch-card-text { display: flex; flex-direction: column; }
.branch-name { font-weight: 600; }
.branch-members { font-size: .85rem; color: var(--ft-ink-soft); }
.branch-children { margin-top: 12px; display: grid; gap: 8px; }
.branch-children .branch-card { padding: 8px 12px; box-shadow: none; background: var(--ft-surface); }

.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.dir-card { background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: var(--ft-radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, box-shadow .15s; }
.dir-card:hover { border-color: var(--ft-primary); box-shadow: 0 4px 14px rgba(31, 95, 87, .1); }
.dir-card-main { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ft-ink); }
.dir-card-text { display: flex; flex-direction: column; min-width: 0; }
.dir-name { font-weight: 600; overflow-wrap: anywhere; }
.dir-other, .dir-dates { font-size: .85rem; color: var(--ft-ink-soft); }
.dir-card-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.dir-avatar { display: grid; place-items: center; background: #EFE9DF; color: var(--ft-ink-soft); font-size: 1.3rem; }
.dir-avatar.gender-M { background: #E3EEF2; color: #2F6B82; }
.dir-avatar.gender-F { background: #F6E6DE; color: var(--ft-accent); }
.dir-photo { background: #EFE9DF; border: 1px solid var(--ft-border); }
.dir-card-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: .85rem; color: var(--ft-ink-soft); min-height: 1px; }
.dir-meta-line i { width: 16px; text-align: center; }
.dir-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.dir-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ft-ink-soft); white-space: nowrap; }
.dir-row-name { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ft-ink); font-weight: 500; }
.dir-row-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; font-size: .9rem; }

.pf-photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #EFE9DF; color: var(--ft-ink-soft); font-size: 2.4rem; border: 1px solid var(--ft-border); }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; }

.tc-avatar img, .tree-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* header search */
.global-search { position: relative; flex: 1 1 220px; max-width: 340px; min-width: 150px; }
.gs-results { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 1050; background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: var(--ft-radius); box-shadow: 0 10px 28px rgba(0, 0, 0, .14); padding: 6px; max-height: 70vh; max-height: 70dvh; overflow-y: auto; margin: 0; }
.gs-item { display: flex; align-items: center; border-radius: 8px; }
.gs-item:hover, .gs-item.active { background: var(--ft-surface); }
.gs-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px; text-decoration: none; color: var(--ft-ink); }
.gs-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #EFE9DF; color: var(--ft-ink-soft); font-size: .85rem; }
.gs-avatar.gender-M { background: #E3EEF2; color: #2F6B82; }
.gs-avatar.gender-F { background: #F6E6DE; color: var(--ft-accent); }
.gs-text { display: flex; flex-direction: column; min-width: 0; }
.gs-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-dates { font-size: .78rem; color: var(--ft-ink-soft); }
.gs-locate { flex: none; padding: 8px 10px; color: var(--ft-ink-soft); text-decoration: none; }
.gs-locate:hover { color: var(--ft-primary); }
.gs-empty, .gs-all { padding: 8px 10px; font-size: .9rem; }
.gs-empty { color: var(--ft-ink-soft); }
.gs-mark { background: rgba(255, 214, 102, .55); color: inherit; padding: 0 1px; border-radius: 3px; }
.gs-main, .gs-locate { min-height: 44px; }
.gs-dates { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-all a { display: block; padding: 10px 2px; min-height: 44px; }
@media (max-width: 991.98px) {
    .header-inner { flex-wrap: wrap; }
    .global-search { order: 5; flex: 1 0 100%; max-width: none; margin-bottom: 8px; }
}

/* ---- Phase 5: administration ------------------------------------------------------------ */
.admin-subnav { gap: .25rem; flex-wrap: wrap; }
.admin-subnav .nav-link { border-radius: 999px; padding: .35rem .9rem; color: var(--bs-body-color); border: 1px solid var(--bs-border-color); }
.admin-subnav .nav-link.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem .5rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg); text-decoration: none; color: inherit; text-align: center; }
a.stat-card:hover { border-color: var(--bs-primary); }
.stat-num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .85rem; color: var(--bs-secondary-color); }
.req-card .req-old { color: var(--bs-secondary-color); }
.req-card .req-new { font-weight: 600; }
.req-status-PENDING { background: #b7791f; }
.req-status-APPROVED { background: #2f855a; }
.req-status-REJECTED { background: #9b2c2c; }
.req-status-FAILED { background: #6b46c1; }
.dup-person { min-width: 0; overflow-wrap: anywhere; }
.merge-card { min-height: 5rem; }
.hist-entry { padding: .6rem 0; border-bottom: 1px solid var(--bs-border-color); }
.hist-entry:last-child { border-bottom: 0; }
.hist-changes { list-style: none; margin: .3rem 0 0; padding-inline-start: 1rem; }
.hist-change { margin-bottom: .25rem; overflow-wrap: anywhere; }

/* ---- Phase 6: timeline, gallery, events, news, home widgets ---- */
.timeline { position: relative; padding-inline-start: 28px; border-inline-start: 2px solid var(--ft-border); margin-inline-start: 8px; }
.tl-year { font-weight: 700; font-size: 1.15rem; margin: 18px 0 8px; margin-inline-start: -28px; padding-inline-start: 28px; }
.tl-item { position: relative; display: flex; gap: 12px; padding: 8px 0; }
.tl-dot { position: absolute; inset-inline-start: -37px; top: 12px; width: 16px; height: 16px; border-radius: 50%; background: var(--ft-card); border: 2px solid currentColor; font-size: 8px; display: flex; align-items: center; justify-content: center; }
.tl-BIRTH { color: #2e7d32; } .tl-DEATH { color: #6c757d; } .tl-MARRIAGE { color: #c2185b; } .tl-EVENT { color: #1565c0; }
.tl-when { min-width: 110px; font-size: .85rem; color: #6c757d; }
.tl-body { flex: 1; color: inherit; }
.tl-body a { color: var(--bs-body-color); }
.photo-grid, .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.album-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.photo-tile { display: block; padding: 0; border: 0; background: #eee; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; cursor: pointer; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-large { max-width: 100%; max-height: 65vh; max-height: 65dvh; display: block; margin: 0 auto; border-radius: 8px; }
.album-card { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: var(--ft-radius); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.album-card:hover, .album-card:focus-visible { box-shadow: 0 6px 18px rgba(0,0,0,.16); transform: translateY(-2px); }
.album-cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e9ecef; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: #adb5bd; }
.album-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.album-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; line-height: 1.35; padding: 10px 12px 2px; min-height: calc(2 * 1.35em + 12px); word-break: break-word; }
.album-count { display: block; margin-top: auto; font-size: .85rem; color: #6c757d; padding: 2px 12px 10px; }
.cm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #eef2f7; border: 1px solid var(--ft-border); font-size: .9rem; }
.cm-chip-static { text-decoration: none; color: inherit; }
.cm-text { white-space: pre-wrap; }
.home-row { padding: 8px 0; border-bottom: 1px solid var(--ft-border); }
.home-row:last-child { border-bottom: 0; }
.news-pinned { border-inline-start: 4px solid #f9a825; }

/* ---- Mobile menu drawer (below the lg breakpoint; the desktop navigation is not touched) ------------------------------ */
/* The drawer is a fixed panel under <body> with three rows: a header and a search row that never scroll, and a body that scrolls on its own. */
.mnav { width: min(88vw, 360px); height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; display: flex; flex-direction: column; background: var(--ft-card); z-index: 1050; }
.mnav [hidden] { display: none !important; }
.mnav-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px;
    padding: calc(.5rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) .5rem calc(1rem + env(safe-area-inset-left, 0px)); border-block-end: 1px solid var(--ft-border); }
.mnav-title { color: var(--ft-primary); font-weight: 700; font-size: 1.15rem; display: inline-flex; align-items: center; gap: 8px; }
.mnav-close { width: 44px; height: 44px; margin: 0; padding: 0; background-size: 1rem; }
.mnav-searchbar { flex: none; padding: .5rem calc(1rem + env(safe-area-inset-right, 0px)) .5rem calc(1rem + env(safe-area-inset-left, 0px)); border-block-end: 1px solid var(--ft-border); }
.mnav-search { position: relative; display: flex; align-items: center; }
.mnav-search > .fa-magnifying-glass { position: absolute; inset-inline-start: 12px; color: var(--ft-ink-soft); pointer-events: none; }
.mnav-search .form-control { min-height: 44px; padding-inline: 2.2rem 2.6rem; font-size: 16px; /* 16px stops iOS from zooming the page when the field is focused */ }
.mnav-clear { position: absolute; inset-inline-end: 2px; width: 44px; height: 44px; border: 0; background: none; color: var(--ft-ink-soft); display: inline-flex; align-items: center; justify-content: center; }
.mnav-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
    padding: .25rem calc(.5rem + env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) calc(.5rem + env(safe-area-inset-left, 0px)); }
.mnav-list { list-style: none; margin: 0; padding: 0; }
.mnav-flat { padding-block: .25rem; border-block-end: 1px solid var(--ft-border); margin-block-end: .25rem; }
.mnav-link, .mnav-toggle { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 48px; padding: .5rem .75rem; border: 0; border-inline-start: 3px solid transparent; border-radius: 10px;
    background: none; color: var(--ft-ink); text-decoration: none; font: inherit; font-weight: 500; text-align: start; }
.mnav-link:hover, .mnav-toggle:hover, .mnav-link:active, .mnav-toggle:active { background: rgba(31, 95, 87, .08); color: var(--ft-ink); }
.mnav-active, .mnav-active:hover { background: rgba(31, 95, 87, .13); color: var(--ft-primary); font-weight: 700; border-inline-start-color: var(--ft-primary); }
.mnav-icon { flex: none; width: 1.4rem; text-align: center; color: var(--ft-ink-soft); }
.mnav-active .mnav-icon { color: var(--ft-primary); }
.mnav-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mnav-gh { margin: 0; font-size: 1rem; }
.mnav-toggle { font-weight: 600; }
.mnav-chevron { flex: none; font-size: .8rem; color: var(--ft-ink-soft); transition: transform .2s ease; }
.mnav-toggle[aria-expanded="true"] .mnav-chevron { transform: rotate(180deg); }
.mnav-group .mnav-list { padding-inline-start: .75rem; }
.mnav-gtitle { display: none; padding: .6rem .75rem .1rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--ft-ink-soft); }
/* While searching, every section is open and shows its matches under a small title instead of the toggle. */
.mnav-searching .mnav-gh { display: none; }
.mnav-searching .mnav-gtitle { display: block; }
.mnav-searching .collapse:not(.show) { display: block; }
.mnav-searching .mnav-flat { border-block-end: 0; }
.mnav-nomatch { padding: 1rem .75rem; color: var(--ft-ink-soft); }
.mnav-account { margin-block-start: .5rem; padding-block-start: .5rem; border-block-start: 1px solid var(--ft-border); }
.mnav-user { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; font-weight: 600; overflow-wrap: anywhere; }
.mnav-signout { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .mnav-chevron { transition: none; } }
@media print { .mnav, .offcanvas-backdrop { display: none !important; } }

/* The menu button sits outside a Bootstrap .navbar, so it draws its own icon. */
.nav-burger { width: 42px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--ft-primary, #1f6f5f); border-color: var(--ft-border); }

/* ---- Phase 7: relationship explorer ---- */
.kin-sentence { font-size: 1.35rem; font-weight: 600; margin-bottom: .25rem; }
.kin-path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.kin-step { background: #eef2f7; border: 1px solid var(--ft-border); border-radius: 999px; padding: 4px 14px; }
.kin-arrow { color: var(--ft-ink-soft); padding-inline-start: 18px; font-size: .8rem; }
.kin-diagram .min-w-0 { min-width: 0; }
.kin-v { display: flex; flex-direction: column; align-items: center; gap: 0; }
.kin-top { width: min(100%, 320px); }
.kin-arms { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; margin-top: .25rem; }
.kin-arms.kin-single { grid-template-columns: minmax(0, min(100%, 320px)); justify-content: center; margin-top: 0; }
.kin-col { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.kin-node { background: #eef2f7; border: 1px solid var(--ft-border); border-radius: 12px; padding: .4rem .7rem; }
.kin-node-a, .kin-node-b { border-color: var(--bs-primary); background: #e8f0fb; }
.kin-node-top { background: #fbf5e6; }
.kin-name { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.kin-more { padding: 0 .25rem; }
.kin-link { text-align: center; color: var(--ft-ink-soft); font-size: .85rem; padding: .15rem 0; }
@media (max-width: 420px) { .kin-arms:not(.kin-single) { gap: .3rem; } .kin-node { padding: .35rem .5rem; } }

/* ---- Phase 8: accessibility and phone polish ------------------------------------------------ */
:root { --ft-accent-text: #8F4A26; }
/* Text colours that meet 4.5:1 on the cream and white backgrounds. */
.text-muted, .form-text { color: var(--ft-ink-soft) !important; }
.badge-soon { color: var(--ft-accent-text); }
a:not(.btn):not(.nav-link):not(.dropdown-item) { text-underline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 767.98px) {
    /* 16px fields stop iOS zooming in on focus; larger tap targets for small buttons and chips. */
    .form-control, .form-select { font-size: 16px; }
    .btn-sm, .tp-chip, .tree-hit { min-height: 40px; }
    .page-title { font-size: 1.5rem; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .admin-subnav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .admin-subnav .nav-link { white-space: nowrap; }
}
@media print {
    .skip-link, .main-nav, .nav-burger, .admin-subnav { display: none !important; }
    #kin-page .widget-card:first-of-type, .kin-actions, .kin-more, .kin-detail { display: none !important; }
    .kin-node { break-inside: avoid; }
}

/* Photo editor (profile picture) */
.pe-stage { position: relative; width: min(100%, 360px); aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: #EFE9DF; touch-action: none; }
.pe-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.pe-stage canvas:active { cursor: grabbing; }
.pe-guide { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(251, 248, 243, .62); border: 2px solid #fff; pointer-events: none; }

/* ---- Admin data table (wwwroot/js/admintable.js) ---- */
.at-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.at-sortable:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.at-sortable .at-sort-icon { opacity: .55; font-size: .8em; }
.at-sortable[aria-sort="ascending"] .at-sort-icon,
.at-sortable[aria-sort="descending"] .at-sort-icon { opacity: 1; }
.at-toolbar .at-search { max-width: 16rem; }

/* ---- Home page ------------------------------------------------------------------------- */
.page-content.page-wide { max-width: 1440px; }
.dir-arrow { transition: transform .15s; }
[dir="rtl"] .dir-arrow { transform: scaleX(-1); }

/* Header: "More" menu and the admin link */
.nav-more-toggle { background: none; border: 0; padding: 0; color: var(--ft-ink); font-weight: 500; }
.nav-more-toggle:hover, .nav-more-toggle[aria-expanded="true"] { color: var(--ft-primary); }
.nav-more .dropdown-menu { border-color: var(--ft-border); border-radius: var(--ft-radius); padding: 6px; min-width: 12rem; }
.nav-more .dropdown-item { border-radius: 8px; padding: 8px 12px; }
.nav-more .dropdown-item:active { background: var(--ft-primary); }
.main-nav .nav-admin { color: var(--ft-primary); background: rgba(31, 95, 87, .08); border-radius: 999px; padding: 4px 12px; font-weight: 600; }
.global-search .form-control { background: var(--ft-surface); border-color: var(--ft-border); }
.global-search .form-control:focus { background: #fff; }
@media (min-width: 992px) { .global-search { flex-basis: 280px; max-width: 380px; } }

.home-flow { display: flex; flex-direction: column; gap: 28px; }
.home-hero { background: linear-gradient(135deg, #1F5F57 0%, #2A7268 100%); color: #FBF8F3; border-radius: 16px; padding: 22px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.home-hero-title { font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 700; margin: 0 0 4px; }
.home-hero-lead { margin: 0 0 14px; opacity: .92; max-width: 56ch; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.home-hero-actions .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.home-stats { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.home-stat { display: flex; flex-direction: column-reverse; text-align: start; }
.home-stat-num { font-size: 1.7rem; font-weight: 700; line-height: 1.1; margin: 0; min-height: 1.9rem; }
.home-stat-label { font-size: .78rem; font-weight: 500; opacity: .9; }
.home-stat-label i { opacity: .8; margin-inline-end: 4px; }
@media (max-width: 575.98px) {
    .home-hero { padding: 20px 18px; }
    .home-stats { width: 100%; gap: 10px 12px; }
    .home-stat { flex: 1 1 40%; }
}

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 992px) { .home-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.home-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.home-card { background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: var(--ft-radius); padding: 20px 22px; }
.home-card-head, .home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 14px; }
.home-card-title { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--ft-ink); }
.home-more { color: var(--ft-primary); font-weight: 600; text-decoration: none; font-size: .92rem; }
.home-more:hover { text-decoration: underline; }
.home-empty { color: var(--ft-ink-soft); margin: 0; display: flex; gap: 8px; align-items: center; }

/* Loading placeholders (fixed heights, so nothing jumps when the data arrives) */
.skeleton { display: block; background: linear-gradient(90deg, rgba(0, 0, 0, .06) 25%, rgba(0, 0, 0, .1) 37%, rgba(0, 0, 0, .06) 63%); background-size: 400% 100%; animation: ft-shimmer 1.4s ease infinite; border-radius: 8px; }
.skeleton-num { width: 2.5rem; height: 1.6rem; background: rgba(255, 255, 255, .25); }
.skeleton-line { height: 40px; margin-block-end: 10px; }
.skeleton-line:last-of-type { margin-block-end: 0; }
.skeleton-block { height: 280px; }
@keyframes ft-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* My Family */
.mf-tree { display: flex; flex-direction: column; align-items: center; }
.mf-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; position: relative; }
.mf-row + .mf-row { margin-block-start: 30px; }
.mf-row + .mf-row::before { content: ""; position: absolute; inset-inline-start: 50%; top: -30px; height: 30px; border-inline-start: 2px solid var(--ft-border); }
.mf-self .mf-person + .mf-person::before, .mf-parents .mf-person + .mf-person::before { content: ""; position: absolute; inset-inline-end: calc(100% + 1px); top: 28px; width: 16px; border-block-start: 2px solid var(--ft-border); }
.mf-person { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 124px; font: inherit; padding: 10px 6px; border: 1px solid var(--ft-border); border-radius: var(--ft-radius); background: var(--ft-surface); text-decoration: none; color: var(--ft-ink); text-align: center; transition: border-color .15s, background .15s; }
.mf-person:hover { border-color: var(--ft-primary); background: #fff; color: var(--ft-ink); }
.mf-person:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: 2px; }
.mf-self-card { border: 2px solid var(--ft-primary); padding: 9px 5px; background: rgba(31, 95, 87, .07); box-shadow: 0 1px 6px rgba(31, 95, 87, .15); }
.mf-self-card .mf-avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(31, 95, 87, .35); }
.mf-self-card .mf-rel { color: var(--ft-primary); font-weight: 700; }
.mf-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.mf-avatar-ph { display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; background: #E8EFEC; color: var(--ft-primary); }
.mf-avatar-ph.gender-F { background: #F4E6DF; color: var(--ft-accent); }
.mf-name { font-size: .88rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mf-rel { font-size: .76rem; color: var(--ft-ink-soft); }
.mf-sub { font-size: .9rem; font-weight: 600; color: var(--ft-ink-soft); margin: 22px 0 10px; text-align: center; }
.mf-sibs .mf-person { width: 104px; }
.mf-sibs .mf-avatar { width: 44px; height: 44px; }
.mf-more { cursor: pointer; justify-content: center; border-style: dashed; color: var(--ft-primary); min-height: 96px; }
.mf-more-num { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.mf-more .mf-rel { text-align: center; }
@media (max-width: 575.98px) {
    .mf-person { width: 108px; }
    .mf-sibs:not(.is-open) { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scroll-snap-type: x proximity; padding-block-end: 6px; }
    .mf-sibs:not(.is-open) .mf-person { flex: none; scroll-snap-align: start; }
}
.mf-explore { display: inline-block; margin-block-start: 18px; }
.mf-note { color: var(--ft-ink-soft); margin: 0 0 12px; }
.mf-claim { max-width: 460px; }
.mf-results { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.mf-result { width: 100%; display: flex; align-items: center; gap: 10px; text-align: start; background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: 10px; padding: 8px 10px; min-height: 48px; color: var(--ft-ink); }
.mf-result:hover { border-color: var(--ft-primary); }
.mf-result .mf-avatar { width: 36px; height: 36px; font-size: .95rem; }
.mf-result-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mf-choose { color: var(--ft-primary); font-weight: 600; font-size: .85rem; white-space: nowrap; }

/* What's happening */
.hp-list { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.hp-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 4px; border-block-end: 1px solid var(--ft-border); }
.hp-item:last-child { border-block-end: 0; }
.hp-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(31, 95, 87, .1); color: var(--ft-primary); }
.hp-body { display: flex; flex-direction: column; min-width: 0; }
.hp-title { font-weight: 600; overflow-wrap: anywhere; }
.hp-title a { color: inherit; text-decoration: none; }
.hp-title a:hover { color: var(--ft-primary); text-decoration: underline; }
.hp-meta { font-size: .85rem; color: var(--ft-ink-soft); overflow-wrap: anywhere; }
.hp-kind { font-weight: 600; }
.hp-foot, .hp-actions { margin-block-start: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Photos */
.home-photo-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-block-end: 4px; }
@media (min-width: 992px) { .home-photo-strip { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; } }
.hp-photo { display: block; aspect-ratio: 1; border-radius: var(--ft-radius); overflow: hidden; border: 1px solid var(--ft-border); background: #EFE9DF; scroll-snap-align: start; }
.hp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.hp-photo:hover img { transform: scale(1.04); }
.hp-photo:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: 2px; }

/* Explore */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.explore-card { display: flex; flex-direction: column; gap: 4px; background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: var(--ft-radius); padding: 18px; text-decoration: none; color: var(--ft-ink); transition: border-color .15s, transform .15s; min-height: 168px; }
.explore-card:hover { border-color: var(--ft-primary); transform: translateY(-2px); color: var(--ft-ink); }
.explore-card:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: 2px; }
.explore-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(31, 95, 87, .1); color: var(--ft-primary); font-size: 1.1rem; margin-block-end: 6px; }
.explore-title { font-weight: 700; font-size: 1.05rem; }
.explore-text { color: var(--ft-ink-soft); font-size: .9rem; flex: 1; }
.explore-go { color: var(--ft-primary); font-weight: 600; font-size: .9rem; }
.explore-card:hover .dir-arrow { transform: translateX(3px); }
[dir="rtl"] .explore-card:hover .dir-arrow { transform: scaleX(-1) translateX(3px); }
@media (prefers-reduced-motion: reduce) { .explore-card, .hp-photo img, .dir-arrow { transition: none; } .explore-card:hover { transform: none; } }

/* Mobile order: welcome, My Family, What's happening, Explore, then photos */
@media (max-width: 991.98px) { .home-explore { order: 1; } .home-photos { order: 2; } }

/* ---- Notifications -------------------------------------------------------------------- */
.notif { position: relative; }
.notif-btn { position: relative; min-width: 38px; min-height: 31px; }
.notif-badge { position: absolute; top: -7px; inset-inline-end: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #C0392B; color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--ft-card); box-sizing: content-box; }
.notif-menu { width: min(380px, 94vw); padding: 0; border-color: var(--ft-border); border-radius: var(--ft-radius); overflow: hidden; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-block-end: 1px solid var(--ft-border); }
.notif-list { max-height: min(60vh, 440px); max-height: min(60dvh, 440px); overflow-y: auto; }
.notif-foot { display: block; text-align: center; padding: 10px; border-block-start: 1px solid var(--ft-border); text-decoration: none; font-weight: 600; font-size: .9rem; background: var(--ft-surface); }
.notif-empty { padding: 24px 16px; text-align: center; color: var(--ft-ink-soft); }
.notif-item { position: relative; display: flex; align-items: stretch; border-block-end: 1px solid var(--ft-border); }
.notif-item:last-child { border-block-end: 0; }
.notif-item.unread { background: rgba(31, 95, 87, .06); }
.notif-item.high .notif-icon { background: rgba(192, 57, 43, .12); color: #C0392B; }
.notif-link { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; text-decoration: none; color: var(--ft-ink); }
.notif-link:hover { background: rgba(0, 0, 0, .03); color: var(--ft-ink); }
.notif-link:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: -3px; }
.notif-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(31, 95, 87, .1); color: var(--ft-primary); }
.notif-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.notif-title { font-size: .92rem; overflow-wrap: anywhere; }
.notif-item.unread .notif-title { font-weight: 700; }
.notif-msg { font-size: .85rem; color: var(--ft-ink-soft); overflow-wrap: anywhere; }
.notif-action { font-size: .82rem; color: var(--ft-primary); font-weight: 600; }
.notif-time { font-size: .78rem; color: var(--ft-ink-soft); }
.notif-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ft-primary); margin-block-start: 6px; }
.notif-tools { display: flex; align-items: center; padding-inline-end: 8px; }
.notif-tools .btn-link { color: var(--ft-ink-soft); }
.notif-page { max-width: 760px; }
.push-prompt { margin-bottom: 1rem; max-width: 760px; }
.push-prompt-card { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; background: var(--ft-card); border: 1px solid var(--ft-border); border-inline-start: 4px solid var(--ft-primary, #1F5F57); border-radius: var(--ft-radius); padding: .85rem 1rem; }
.push-prompt-icon { font-size: 1.4rem; color: var(--ft-primary, #1F5F57); }
.push-prompt-text { display: flex; flex-direction: column; flex: 1 1 14rem; min-width: 0; }
.push-prompt-text span { color: var(--ft-muted, #6c757d); font-size: .9rem; }
.push-prompt-actions { display: flex; align-items: center; gap: .25rem; }
.notif-group { margin-block-end: 22px; }
.notif-group-title { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ft-ink-soft); margin: 0 0 8px; }
.notif-page-ul { background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: var(--ft-radius); overflow: hidden; margin: 0; }

/* Mass update (family directory) */
.mu-bar { position: sticky; bottom: 0; z-index: 1030; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between;
    padding: .65rem 1rem; margin: 0 0 1rem; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .75rem; box-shadow: 0 -2px 10px rgba(0,0,0,.08); }
.mu-bar-text { display: flex; flex-direction: column; min-width: 0; }
.mu-bar-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.mu-pick { display: inline-flex; align-items: center; padding: .25rem; margin: 0; cursor: pointer; }
.dir-card.mu-selectable { position: relative; }
.dir-card.mu-selectable > .mu-pick { position: absolute; top: .4rem; inset-inline-end: .4rem; z-index: 2; background: rgba(255,255,255,.85); border-radius: .4rem; }
.mu-col { width: 2.5rem; }
.mu-stats { display: flex; flex-wrap: wrap; gap: .6rem; }
.mu-stat { min-width: 7rem; padding: .5rem .75rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .6rem; display: flex; flex-direction: column; }
.mu-stat-num { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.mu-stat-label { font-size: .8rem; color: var(--bs-secondary-color, #6c757d); }
.mu-stat.mu-ok .mu-stat-num { color: var(--bs-success, #198754); }
.mu-stat.mu-warn .mu-stat-num { color: var(--bs-warning-text-emphasis, #997404); }
.mu-stat.mu-bad .mu-stat-num { color: var(--bs-danger, #dc3545); }
.mu-details summary { cursor: pointer; font-weight: 600; }
@media (max-width: 575.98px) { .mu-bar { bottom: 3.6rem; } .mu-bar-actions .btn { flex: 1 1 auto; } }
/* Keep the mass-update tick box clear of the name: reserve room for it at the end of the card. */
.dir-card.mu-selectable .dir-card-main { padding-inline-end: 2.6rem; }
.dir-card.mu-selectable > .mu-pick { top: .55rem; }

/* Genealogy Intelligence: source text beside the people found in it */
/* Wide screens: the article text stays in view while the people are reviewed. */
@media (min-width: 992px) {
    .gi-panel-src { align-self: flex-start; position: sticky; top: 4.5rem; z-index: 1; }
    .gi-panel-src .gi-source { max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem); }
}
.gi-source { white-space: pre-wrap; max-height: 60vh; max-height: 60dvh; overflow: auto; line-height: 1.9; font-size: .95rem; }
.gi-person.gi-selected { border-inline-start: 3px solid var(--bs-primary); background: var(--bs-tertiary-bg); }
.gi-mark { background: #fff3a3; color: inherit; padding: 0 .1em; border-radius: .2em; }
[data-bs-theme="dark"] .gi-mark { background: #6b5d00; }

/* Photo Import */
.pi-drop { border: 2px dashed var(--ft-border); border-radius: var(--ft-radius); padding: 24px 12px; transition: background .15s, border-color .15s; }
.pi-drop.pi-over { background: var(--bs-tertiary-bg); border-color: var(--bs-primary); }
.pi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pi-card { position: relative; border: 1px solid var(--ft-border); border-radius: var(--ft-radius); overflow: hidden; background: var(--ft-card); display: flex; flex-direction: column; }
.pi-thumb { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; background: var(--bs-tertiary-bg); display: block; }
.pi-card .pi-name { font-size: .8rem; padding: 6px 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-card .pi-meta { font-size: .75rem; padding: 2px 8px 6px; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.pi-card .pi-actions { margin-top: auto; padding: 0 8px 8px; display: flex; gap: 4px; }
.pi-card .pi-actions .btn { min-height: 36px; }
.pi-sel { position: absolute; top: 6px; inset-inline-start: 6px; background: rgba(255,255,255,.85); border-radius: 6px; padding: 6px; line-height: 1; display: flex; }
.pi-sel .pi-check { width: 1.25rem; height: 1.25rem; margin: 0; cursor: pointer; }
.pi-card.pi-selected { outline: 3px solid var(--bs-primary); }
.pi-thumb { cursor: zoom-in; }
.pi-rev-img { max-width: 100%; max-height: 65vh; max-height: 65dvh; object-fit: contain; background: var(--bs-tertiary-bg); border-radius: var(--ft-radius); }
.pi-imgwrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.pi-face { position: absolute; padding: 0; border: 3px solid #ffc107; border-radius: 8px; background: rgba(255, 193, 7, .15); min-width: 36px; min-height: 36px; cursor: pointer; }
.pi-face:hover, .pi-face:focus-visible { background: rgba(255, 193, 7, .35); outline: 2px solid #fff; }
.pi-face > span { position: absolute; top: -12px; inset-inline-start: -4px; background: #ffc107; color: #000; border-radius: 10px; min-width: 22px; padding: 0 6px; font: 600 .8rem/1.3rem system-ui, sans-serif; }
.pi-sug-photo { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: var(--bs-tertiary-bg); }
@media (max-width: 576px) { #pi-rev-tools .btn, #pi-faces-list .btn { flex: 1 1 auto; min-height: 44px; } }
.pi-rev-mini { width: 100%; max-height: 120px; object-fit: cover; border-radius: 8px; background: var(--bs-tertiary-bg); }

/* Data quality tiles (Admin > Data review) */
.dq-tile { display: flex; flex-direction: column; gap: .15rem; width: 100%; height: 100%; padding: .6rem .75rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); color: inherit; text-align: start; text-decoration: none; }
.dq-tile:hover:not(:disabled) { border-color: var(--bs-primary); color: inherit; }
.dq-tile:disabled { opacity: .55; cursor: default; }
.dq-tile .dq-count { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.dq-tile .dq-label { font-size: .85rem; color: var(--bs-secondary-color); }
.dq-tile.dq-error:not(:disabled) .dq-count { color: var(--bs-danger); }
.dq-tile.dq-gap:not(:disabled) .dq-count { color: var(--bs-warning-text-emphasis, #997404); }

/* ---- Family calendar ---- */
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
.cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head { text-align: center; font-weight: 600; font-size: .85rem; color: var(--bs-secondary-color); padding: 4px 0; }
.cal-cell { min-height: 96px; border: 1px solid var(--ft-border); border-radius: 8px; padding: 4px; background: var(--bs-body-bg); overflow: hidden; cursor: pointer; }
.cal-cell.cal-empty { background: transparent; border-color: transparent; cursor: default; }
.cal-cell.cal-today { border-color: var(--bs-primary); box-shadow: inset 0 0 0 1px var(--bs-primary); }
.cal-cell.cal-selected { background: var(--bs-tertiary-bg); }
.cal-num { font-size: .8rem; color: var(--bs-secondary-color); }
.cal-chip { display: block; font-size: .75rem; line-height: 1.3; padding: 1px 6px; margin-top: 2px; border-radius: 4px; color: #fff; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip.cal-EVENT, .cal-dot.cal-EVENT { background: #2f6fb3; }
.cal-chip.cal-BIRTHDAY, .cal-dot.cal-BIRTHDAY { background: #2e8b57; }
.cal-chip.cal-ANNIVERSARY, .cal-dot.cal-ANNIVERSARY { background: #b5476b; }
.cal-chip.cal-DEATH, .cal-dot.cal-DEATH { background: #6c757d; }
.cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 4px; }
.cal-row { padding: 4px 0; border-bottom: 1px solid var(--ft-border); }
.cal-when { display: inline-block; min-width: 9em; color: var(--bs-secondary-color); font-size: .85rem; }
@media print { #cal-filters, #cal-prev, #cal-next, #cal-today { display: none !important; } }

/* ---- Family statistics ---- */
.stat-num { font-size: 1.8rem; font-weight: 600; line-height: 1.1; }
.stat-num-sm { font-size: 1.3rem; }
.stat-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.stat-label { flex: 0 0 9.5em; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-bar { flex: 1 1 auto; background: var(--bs-tertiary-bg); border-radius: 4px; height: 14px; overflow: hidden; }
.stat-fill { display: block; height: 100%; background: var(--bs-primary); border-radius: 4px; }
.stat-fill.stat-muted { background: var(--bs-secondary-color); opacity: .5; }
.stat-count { flex: 0 0 3.5em; text-align: end; font-variant-numeric: tabular-nums; font-size: .9rem; }

/* ---- Ancestry comparison ---- */
.cmp-level { padding: 10px 0; border-top: 1px solid var(--ft-border); }
.cmp-level:first-child { border-top: 0; }
.cmp-person { padding: 3px 8px; border-radius: 6px; margin-top: 3px; }
.cmp-person.cmp-shared { background: rgba(25, 135, 84, .12); }
@media print { #cmp-page .widget-card .row.g-3.align-items-end, #cmp-print { display: none !important; } }

/* Family history book (/Print/Book) */
.book-doc { max-width: 50rem; margin: 0 auto; font-size: 1rem; line-height: 1.55; }
.book-rule { width: 6rem; height: 3px; background: var(--bs-primary, #1f5c4d); margin: 1.25rem auto; border-radius: 2px; }
.book-cover { text-align: center; padding: 6rem 1rem 4rem; break-after: page; page-break-after: always; }
.book-cover h1 { font-size: 2.6rem; font-weight: 700; margin-bottom: .5rem; }
.book-cover h2 { font-size: 1.8rem; font-weight: 500; margin: 1rem 0 0; }
.book-subtitle { font-size: 1.25rem; color: #555; }
.book-note { max-width: 36rem; margin: 3rem auto; font-style: italic; text-align: center; break-after: page; page-break-after: always; }
.book-toc { break-after: page; page-break-after: always; padding: 2rem 0; }
.book-toc h2 { margin-bottom: 1rem; }
.book-toc ol { padding-inline-start: 1.25rem; }
.book-toc li { margin-bottom: .35rem; }
.book-chapter, .book-story { break-before: page; page-break-before: always; }
.book-chapter > h2 { font-size: 1.7rem; text-align: center; margin-bottom: 0; }
.book-chapter .book-rule { margin-bottom: 1.5rem; }
.book-people { column-count: 2; column-gap: 2rem; }
.book-person { break-inside: avoid; margin-bottom: .9rem; padding-bottom: .5rem; border-bottom: 1px solid #e6e2da; }
.book-person h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .15rem; }
.book-alt { font-weight: 400; color: #777; font-size: .9rem; }
.book-meta { font-size: .85rem; color: #666; margin: 0 0 .15rem; }
.book-story h3 { font-size: 1.4rem; }
@media (max-width: 40rem) { .book-people { column-count: 1; } }
@page { size: A4; margin: 18mm 16mm 20mm; @bottom-center { content: counter(page); font-size: 10pt; color: #666; } }
@page :first { @bottom-center { content: none; } }
@media print {
    .no-print, .navbar, footer { display: none !important; }
    .book-doc { max-width: none; }
    .book-cover { padding-top: 7cm; }
    .book-doc a { color: inherit; text-decoration: none; }
}

/* The chosen book style on screen (colours come from the printable tree's themes) */
.book-doc { background: var(--book-paper, transparent); color: var(--book-ink, inherit); }
.book-doc .book-meta, .book-doc .book-alt, .book-doc .book-subtitle { color: var(--book-muted, #666); }
.book-doc .book-rule { background: var(--book-accent, var(--bs-primary, #1f5c4d)); }
.book-doc .book-person { border-bottom-color: var(--book-line, #e6e2da); }
.book-doc .book-cover h2, .book-doc .book-chapter > h2 { color: var(--book-accent, inherit); }
.book-doc.book-framed { border: 4px double var(--book-accent, #1f5c4d); padding: 1.5rem; }
@media print { .book-doc.book-framed { border: 0; padding: 0; } }

/* Picking a profile photo from Photo import */
.pi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }
.pi-item { border: 1px solid var(--bs-border-color, #dee2e6); background: #fff; border-radius: .5rem; padding: .35rem; text-align: center; cursor: pointer; }
.pi-item:hover, .pi-item:focus-visible { border-color: var(--bs-primary, #1f5c4d); outline: 2px solid var(--bs-primary, #1f5c4d); }
.pi-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: .35rem; background: #f1f1f1; }
.pi-name, .pi-who { display: block; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-who { color: #666; }

/* Users tab counters (Administration -> Users) */
.ua-card { background: var(--ft-surface, #fff); }
.ua-card-link { cursor: pointer; }
.ua-card-link:hover, .ua-card-link:focus-visible { border-color: var(--ft-primary) !important; }
/* The Actions menu must not be clipped by the table's scroll box. Only name, status and actions show on a phone, so the table needs no sideways scroll. */
.ua-table-wrap { overflow: visible !important; }
.ua-table .dropdown-menu { min-width: 12rem; }

/* ---- Tree editor (edit mode) ---- */
.te-toggle .btn { min-height: 34px; }
.te-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--ft-border); }
.te-actions .btn { min-height: 38px; }
.te-on .tree-card { outline: 1px dashed rgba(13, 110, 253, .35); outline-offset: 2px; }
.te-on .tree-card.is-selected { outline: 2px solid var(--bs-primary, #0d6efd); }
.tree-card.tree-card-new { animation: te-pulse 1.1s ease-out 2; }
@keyframes te-pulse { 0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, .65); } 100% { box-shadow: 0 0 0 16px rgba(25, 135, 84, 0); } }
@media (prefers-reduced-motion: reduce) { .tree-card.tree-card-new { animation: none; box-shadow: 0 0 0 4px rgba(25, 135, 84, .55); } }

.te-drawer { position: absolute; inset-block: 0; inset-inline-end: 0; width: 400px; max-width: 100%; display: flex; flex-direction: column; background: var(--ft-card); border-inline-start: 1px solid var(--ft-border); box-shadow: -8px 0 30px rgba(43, 38, 34, .18); z-index: 30; }
[dir="rtl"] .te-drawer { box-shadow: 8px 0 30px rgba(43, 38, 34, .18); }
.te-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ft-border); }
.te-drawer-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.te-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.te-buttons .btn { min-height: 44px; }
.te-guard { position: sticky; top: 0; z-index: 2; }
.te-drawer-open .tree-panel { display: none; }
@media (max-width: 767.98px) {
    .te-drawer { inset-block: auto 0; inset-inline: 0; width: auto; max-height: 85dvh; border-inline-start: 0; border-top: 1px solid var(--ft-border); border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 30px rgba(43, 38, 34, .22); }
    .te-drawer .form-control, .te-drawer .form-select { font-size: 16px; min-height: 44px; }
}

/* Tree editor on phones: the stage is short and clips its children, so the form lives in a fixed bottom sheet instead,
   with the Save buttons always reachable above the on-screen keyboard. */
@media (max-width: 767.98px) {
    .te-drawer { position: fixed; inset-block: auto 0; inset-inline: 0; width: auto; height: auto; max-height: 88vh; max-height: 88dvh; z-index: 1060; }
    .te-drawer-body { padding-bottom: 0; -webkit-overflow-scrolling: touch; }
    .te-drawer .te-buttons { position: sticky; bottom: 0; background: var(--ft-card); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); margin-top: 8px; border-top: 1px solid var(--ft-border); z-index: 3; }
    .te-drawer .te-buttons .btn:not(.btn-link) { flex: 1 1 calc(50% - 8px); }
    .te-drawer-head { position: sticky; top: 0; background: var(--ft-card); z-index: 3; }
    .te-actions .btn { flex: 1 1 calc(50% - 6px); }
    .te-on .tree-panel { max-height: 45vh; max-height: 45dvh; overflow-y: auto; }
}

/* Tree on phones: view options (mode, levels, jump) fold away behind one button so the tree gets the room;
   small expand/collapse buttons get a 44px touch area without changing how they look. */
@media (max-width: 767.98px) {
    .tree-toolbar { padding: 8px 10px; gap: 8px; margin-bottom: 8px; }
    .tree-search { flex: 1 1 100%; max-width: none; min-width: 0; }
    .tree-controls { display: none; width: 100%; }
    .tree-toolbar.opts-open .tree-controls { display: flex; }
    .tree-select { flex: 1 1 calc(50% - 8px); max-width: none; }
    .tree-buttons { width: 100%; justify-content: space-between; }
    .tree-buttons .btn { flex: 1 1 0; min-height: 44px; }
    .tree-stage { height: calc(100vh - 220px); height: calc(100dvh - 220px); min-height: 380px; }
}
@media (pointer: coarse) {
    .tc-up::after, .tc-down::after, .tc-fold::after { content: ''; position: absolute; inset: -12px; }
    .tc-fold { opacity: .9; }
}

/* Long forms on phones: Save / Cancel stay in reach at the bottom of the screen. */
@media (max-width: 767.98px) {
    .form-actions-sticky { position: sticky; bottom: 0; z-index: 5; background: var(--ft-surface); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ft-border); margin-top: 16px; }
    .form-actions-sticky .btn { flex: 1 1 auto; min-height: 44px; }
}

/* Photo viewer: stage with previous / next, swipe and pinch zoom (touch-action none: the stage handles its own gestures). */
.photo-stage { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 8px; background: #111; }
.photo-stage .photo-large { transform-origin: 0 0; will-change: transform; max-height: 70vh; max-height: 70dvh; margin: 0 auto; border-radius: 0; -webkit-user-drag: none; }
.photo-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; display: grid; place-items: center; z-index: 2; }
.photo-nav:disabled { opacity: .25; }
.photo-nav-prev { inset-inline-start: 8px; }
.photo-nav-next { inset-inline-end: 8px; }
.photo-count { position: absolute; inset-block-end: 8px; inset-inline-start: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .55); color: #fff; border-radius: 999px; padding: 2px 12px; font-size: .8rem; z-index: 2; }
[dir="rtl"] .photo-count { transform: translateX(50%); }
@media (max-width: 767.98px) { .photo-stage .photo-large { max-height: 60vh; max-height: 60dvh; } }

/* ---- Gallery 2.0 home ---- */
.g2-stats { margin: 0 0 .5rem; }
.g2-tabs { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-bottom: .75rem; border-bottom: 1px solid var(--ft-border); scrollbar-width: none; }
.g2-tabs::-webkit-scrollbar { display: none; }
.g2-tab { flex: 0 0 auto; border: 0; background: transparent; padding: .55rem .9rem; min-height: 44px; border-bottom: 3px solid transparent; font-weight: 600; color: var(--bs-secondary-color, #6c757d); white-space: nowrap; }
.g2-tab.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }
.g2-toolbar { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-bottom: .5rem; }
.g2-toolbar .form-select { width: auto; max-width: 11rem; }
.g2-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; align-items: center; margin-bottom: .75rem; padding: 10px; border: 1px solid var(--ft-border); border-radius: 10px; background: var(--ft-card); }
.g2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.g2-tile { position: relative; display: block; padding: 0; border: 0; background: #e9ecef; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; cursor: pointer; }
.g2-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.g2-tile:hover img { transform: scale(1.03); }
.g2-tile:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 2px; }
.g2-badge { position: absolute; top: 6px; inset-inline-end: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; color: #fff; background: rgba(0,0,0,.5); }
.g2-badge-fav { background: #dc3545; }
.g2-badge-priv { inset-inline-end: auto; inset-inline-start: 6px; }
.g2-foot { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: space-between; gap: 6px; padding: 14px 8px 5px; font-size: .72rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.g2-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.g2-person { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--ft-border); border-radius: 12px; background: var(--ft-card); text-align: center; }
.g2-person:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.g2-person-pic { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #e9ecef; display: grid; place-items: center; font-size: 1.6rem; color: #adb5bd; }
.g2-person-pic img { width: 100%; height: 100%; object-fit: cover; }
.g2-person-name { font-weight: 600; font-size: .9rem; line-height: 1.25; }
.g2-person-count { font-size: .8rem; color: #6c757d; }
.g2-decade { margin-bottom: 1rem; }
.g2-decade-h { font-size: 1.1rem; margin: 0 0 .4rem; }
.g2-year-row { display: flex; flex-wrap: wrap; gap: 6px; }
.g2v-stage { position: relative; background: #111; border-radius: 8px; overflow: hidden; touch-action: pan-y; min-height: 200px; }
.g2v-stage img { display: block; max-width: 100%; max-height: 70vh; max-height: 70dvh; margin: 0 auto; object-fit: contain; }
.g2-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: .9rem; margin: 0; }
.g2-dl dt { color: #6c757d; font-weight: 500; }
.g2-dl dd { margin: 0; }
.g2-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.g2-form-actions { display: flex; gap: 8px; position: sticky; bottom: 0; padding: 8px 0; background: var(--bs-body-bg); }
@media (max-width: 575.98px) {
    .g2-toolbar { grid-template-columns: 1fr auto; }
    .g2-toolbar #g2-filters-btn { grid-column: 1 / -1; }
    .g2-toolbar .form-select { max-width: none; }
    .g2-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }
    .g2-tile { border-radius: 4px; }
    .g2-foot { font-size: .65rem; padding: 10px 4px 3px; }
}
.g2-picked { outline: 3px solid var(--bs-primary); outline-offset: -3px; }
.g2-picked::before { content: "\2713"; position: absolute; top: 6px; inset-inline-start: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; background: var(--bs-primary); color: #fff; display: grid; place-items: center; font-size: .85rem; }
.g2-selecting .g2-tile { cursor: copy; }
.g2-bulk { position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--bs-body-bg); border-top: 1px solid var(--ft-border); box-shadow: 0 -4px 16px rgba(0,0,0,.12); }
.g2-bulk .form-select, .g2-bulk .form-control { width: auto; max-width: 11rem; }
.g2-bulk-date { display: inline-flex; gap: 6px; }
.g2-bulk-count { font-weight: 600; margin-inline-end: auto; }
#g2-photos { padding-bottom: 5rem; }
.g2-dropping { outline: 3px dashed var(--bs-primary); outline-offset: 4px; }

/* ---- Gallery 2.0 tagging ---- */
.g2v-stage { text-align: center; }
.g2v-frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; vertical-align: top; }
.g2v-frame img { display: block; max-width: 100%; max-height: 70vh; max-height: 70dvh; }
.g2v-boxes { position: absolute; inset: 0; pointer-events: none; }
.g2v-boxes.g2-tagging { pointer-events: auto; touch-action: none; cursor: crosshair; }
.g2-box { position: absolute; box-sizing: border-box; border: 2px solid rgba(255,255,255,.9); border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.45); pointer-events: none; }
.g2-tagging .g2-box { pointer-events: auto; cursor: move; touch-action: none; }
.g2-box.g2-box-unknown { border-style: dashed; border-color: #ffc107; }
.g2-box.g2-box-suggest { border-style: dashed; border-color: #0dcaf0; background: rgba(13,202,240,.12); }
.g2-box.g2-box-new { border-color: #198754; background: rgba(25,135,84,.15); }
.g2-box-label { position: absolute; inset-inline-start: 0; top: 100%; margin-top: 3px; max-width: 220px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.7); color: #fff; font-size: .72rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .15s; pointer-events: none; }
.g2v-frame:hover .g2-box-label, .g2-tagging .g2-box-label, .g2-box.g2-show .g2-box-label { opacity: 1; }
.g2-handle { position: absolute; inset-inline-end: -14px; bottom: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--bs-primary); border: 2px solid #fff; cursor: nwse-resize; touch-action: none; display: none; }
.g2-tagging .g2-box .g2-handle { display: block; }
.g2-tagpanel { margin-top: 8px; padding: 10px; border: 1px solid var(--ft-border); border-radius: 10px; background: var(--ft-card); }
.g2-tagpanel .list-group-item { text-align: start; line-height: 1.3; }
.g2-tagtools { margin-top: 10px; padding: 10px; border: 1px dashed var(--ft-border); border-radius: 10px; }
@media (max-width: 767.98px) { .g2-tagpanel { position: sticky; bottom: 0; z-index: 3; max-height: 55dvh; overflow: auto; box-shadow: 0 -6px 20px rgba(0,0,0,.2); } }

/* Gallery 2.0 Phase E: unidentified faces */
.g2-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; align-items: start; }
.g2-face { position: relative; padding: 0; border: 1px solid var(--ft-border); border-radius: 10px; overflow: hidden; background: var(--ft-card); }
.g2-face:hover, .g2-face:focus-visible { box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.g2-face-pic { display: block; width: 100%; background-repeat: no-repeat; background-color: #e9ecef; }
.g2-face-sug { position: absolute; inset-block-end: 4px; inset-inline-end: 4px; padding: 1px 7px; border-radius: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: .72rem; }

/* Gallery 2.0 Phase F: saved searches and places */
.g2-savebox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: .75rem; padding: 10px; border: 1px dashed var(--ft-border); border-radius: 10px; }
.g2-savebox .form-control { max-width: 260px; }
.g2-smart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.g2-smart { position: relative; border: 1px solid var(--ft-border); border-radius: 12px; background: var(--ft-card); }
.g2-smart-open { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 36px 10px 12px; border: 0; background: none; text-align: start; }
[dir="rtl"] .g2-smart-open { padding: 10px 12px 10px 36px; }
.g2-smart-del { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; }
.g2-places { display: flex; flex-wrap: wrap; gap: 8px; }
.g2-place { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ft-border); border-radius: 999px; background: var(--ft-card); }
.g2-place:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); }

/* Gallery 2.0 Phase G: administration */
.g7-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.g7-stat { padding: 10px 12px; border: 1px solid var(--ft-border); border-radius: 10px; background: var(--ft-card); }
.g7-num { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.g7-dup { padding: 10px 0; border-bottom: 1px solid var(--ft-border); }
.g7-dup-pics { display: flex; flex-wrap: wrap; gap: 10px; }
.g7-dup-item { margin: 0; max-width: 110px; }
.g7-removed { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.g7-rm { margin: 0; padding: 8px; border: 1px solid var(--ft-border); border-radius: 10px; background: var(--ft-card); }
.g7-rm img { inline-size: 100%; block-size: 140px; object-fit: cover; border-radius: 8px; display: block; background: #eef2f7; margin-block-end: 6px; }
.g7-rm-actions { display: flex; gap: 6px; margin-block-start: 8px; }
.g7-rm-actions .btn { white-space: nowrap; }
.g7-rm-actions .btn:first-child { flex: 1 1 auto; }
.g7-rm-del { flex: 0 0 auto; padding-inline: 10px; }
.g7-rm-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g7-dup-item img { object-fit: cover; border-radius: 8px; display: block; }

/* ---- Face detection & tagging workspace ---- */
.tw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.tw-viewer { min-width: 0; }
.tw-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.tw-spacer { flex: 1; }
.tw-tool { min-width: 44px; min-height: 44px; }
.tw-frame { position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; touch-action: none; background: #111; border-radius: 12px; min-height: 240px; user-select: none; -webkit-user-select: none; }
.tw-frame.tw-drawing { cursor: crosshair; outline: 2px dashed var(--bs-primary); }
.tw-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; transform-origin: center center; }
.tw-stage.tw-zoomed { cursor: grab; }
.tw-stage img { display: block; max-width: 100%; max-height: 68dvh; width: auto; height: auto; -webkit-touch-callout: none; }
.tw-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff !important; }
.tw-box { position: absolute; padding: 0; background: transparent; border: 2px dashed #ffc107; border-radius: 4px; cursor: pointer; }
.tw-box::after { content: ""; position: absolute; inset: -8px; }
.tw-box.tw-active { border: 3px solid #0d6efd; box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 0 14px rgba(13,110,253,.8); z-index: 2; }
.tw-box.tw-tagged { border: 2px solid #198754; }
.tw-box.tw-skipped { border: 1px dotted #adb5bd; opacity: .35; pointer-events: none; }
.tw-box.tw-skipped::after { display: none; }
.tw-box.tw-suggested { border: 2px solid #0dcaf0; }
.tw-box.tw-draft { border: 2px dashed #fff; pointer-events: none; }
.tw-label { position: absolute; left: 0; top: 100%; margin-top: 2px; max-width: 220%; padding: 1px 6px; font-size: 12px; line-height: 1.4; color: #fff; background: rgba(25,135,84,.92); border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tw-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; }
.tw-nav .btn { min-height: 44px; min-width: 44px; }
.tw-count { flex: 1; text-align: center; font-weight: 600; font-size: .95rem; }
.tw-flipped { transform: scaleX(-1); }
.tw-panel { padding: 12px; border: 1px solid var(--ft-border); border-radius: 12px; background: var(--ft-card); position: sticky; top: 12px; max-height: calc(100dvh - 24px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.tw-panel .list-group-item { text-align: start; line-height: 1.3; min-height: 44px; }
.tw-act { min-height: 44px; }
.tw-search { font-size: 16px; min-height: 44px; }
.tw-searchrow { display: flex; gap: 6px; align-items: stretch; }
.tw-searchrow .form-control { flex: 1 1 auto; min-width: 0; }
.tw-searchrow .btn { white-space: nowrap; min-height: 44px; }
.tw-sheet-handle { display: block; width: 56px; height: 18px; padding: 0; border: 0; background: transparent; margin: 0 auto 4px; position: relative; }
.tw-sheet-handle::after { content: ""; position: absolute; left: 8px; right: 8px; top: 7px; height: 4px; border-radius: 2px; background: var(--ft-border); }
/* selected face above the controls */
.tw-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.tw-crop { flex: 0 0 96px; width: 96px; max-height: 112px; border-radius: 10px; background-color: #111; background-repeat: no-repeat; border: 1px solid var(--ft-border); }
.tw-head-text { min-width: 0; }
.tw-where { margin-bottom: 4px; color: var(--bs-secondary-color); }
.tw-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; list-style: none; padding: 0; margin: 8px 0 0; }
.tw-legend li { display: inline-flex; align-items: center; gap: 5px; }
.tw-key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 2px solid; }
.tw-key-open { border: 2px dashed #ffc107; }
.tw-key-tagged { border-color: #198754; }
.tw-key-uncertain { border: 2px solid #fd7e14; }
.tw-key-unknown { border: 2px solid #6c757d; }
.tw-key-skipped { border: 1px dotted #adb5bd; }
.tw-box.tw-uncertain { border: 2px solid #fd7e14; }
.tw-box.tw-uncertain .tw-label { background: rgba(253,126,20,.95); }
.tw-box.tw-unknownp { border: 2px solid #6c757d; }
.tw-box.tw-unknownp .tw-label { background: rgba(108,117,125,.95); }
.tw-box.tw-active.tw-tagged, .tw-box.tw-active.tw-uncertain, .tw-box.tw-active.tw-unknownp { border: 3px solid #0d6efd; }
.tw-flip { display: inline-block; }
[dir="rtl"] .tw-flip { transform: scaleX(-1); }
/* people rows (suggestions, search results, possible duplicates) */
.tw-cand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; }
.tw-cand-main { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; border: 0; background: transparent; text-align: start; padding: 4px; min-height: 44px; color: inherit; }
.list-group-item.tw-cand-main { width: 100%; flex: 0 0 auto; height: auto; line-height: 1.35; }
.tw-cand-t { line-height: 1.35; }
.tw-cand-main:hover, .tw-cand-main:focus-visible { background: var(--bs-tertiary-bg); }
.tw-cand-t { min-width: 0; }
.tw-cand-t > span { overflow-wrap: anywhere; }
.tw-av { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bs-tertiary-bg); }
.tw-av-i { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--bs-secondary-color); border: 1px solid var(--ft-border); }
.tw-ctx { color: var(--bs-info-text-emphasis); }
.tw-prev { min-width: 44px; min-height: 44px; }
.tw-cand-prev { flex: 1 0 100%; display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 8px; background: var(--bs-tertiary-bg); }
.tw-prevph { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.tw-dups { margin-top: 10px; padding: 8px; border: 1px solid var(--bs-warning-border-subtle); border-radius: 10px; background: var(--bs-warning-bg-subtle); }
.tw-create-actions { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; bottom: 0; padding: 8px 0 2px; background: var(--ft-card); }
.tw-create-actions .btn { min-height: 44px; }
.tw-create .form-control, .tw-create .form-select { font-size: 16px; min-height: 44px; }
.tw-cropedit { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tw-cropedit canvas { width: 160px; height: 160px; border-radius: 12px; touch-action: none; cursor: grab; background: #111; }
.tw-secondary { border-top: 1px solid var(--ft-border); margin-top: 10px; padding-top: 10px; }
.tw-secondary .btn { min-height: 44px; }
/* full photo dialog */
.tw-fullwrap { max-height: 78dvh; overflow: auto; background: #111; border-radius: 8px; }
.tw-fullstage { position: relative; width: 100%; line-height: 0; margin: 0 auto; }
.tw-fullstage img { width: 100%; height: auto; display: block; }
.tw-fullbox { position: absolute; border: 3px solid #0d6efd; box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 0 0 9999px rgba(0,0,0,.35); border-radius: 4px; pointer-events: none; }
@media (max-width: 991.98px) {
    .tw-grid { grid-template-columns: 1fr; }
    #tw-page { padding-bottom: 54dvh; }
    .tw-stage img { max-height: 36dvh; }
    .tw-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1030; max-height: 52dvh; border-radius: 16px 16px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
    .tw-panel.tw-compact { max-height: 128px; overflow: hidden; }
    .tw-panel.tw-compact .tw-body { display: none; }
    .tw-crop { flex-basis: 72px; width: 72px; }
}
@media (prefers-reduced-motion: no-preference) { .tw-box { transition: border-color .15s, box-shadow .15s; } }

/* Photo location pin map (inside the Gallery viewer) */
.pl-pinmap { height: 220px; min-height: 200px; border: 1px solid var(--ft-border, #dee2e6); border-radius: 8px; direction: ltr; background: #e9eeea; z-index: 0; }
.pl-pinwrap.pl-full { position: fixed; inset: 0; z-index: 2000; background: var(--ft-card, #fff); padding: 12px; display: flex; flex-direction: column; margin: 0 !important; }
.pl-pinwrap.pl-full .pl-pinmap { flex: 1 1 auto; height: auto; min-height: 0; }
body.pl-noscroll { overflow: hidden; }

/* ---- Album uploader (album-uploader.js) ---------------------------------------------------------------------------------------- */
.au-drop { border: 2px dashed var(--bs-border-color, #ced4da); border-radius: 1rem; padding: 1.75rem 1rem; text-align: center; background: var(--bs-tertiary-bg, #f8f9fa); cursor: pointer; transition: border-color .15s, background-color .15s; }
.au-drop:focus-visible { outline: 3px solid var(--bs-primary, #0d6efd); outline-offset: 2px; }
.au-drop.au-over { border-color: var(--bs-primary, #0d6efd); background: rgba(13, 110, 253, .08); }
.au-drop.au-compact { padding: .75rem 1rem; }
.au-drop.au-compact .au-drop-icon, .au-drop.au-compact .au-drop-or, .au-drop.au-compact .au-hint { display: none; }
.au-drop-icon { font-size: 2.25rem; color: var(--bs-primary, #0d6efd); }
.au-drop-title { font-weight: 600; font-size: 1.1rem; margin-top: .25rem; }
.au-drop-or { color: var(--bs-secondary-color, #6c757d); margin: .25rem 0 .5rem; }
.au-drop-btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.au-hint { margin-top: .5rem; font-size: .8rem; color: var(--bs-secondary-color, #6c757d); }
.au-drop.au-busy { opacity: .7; pointer-events: none; }
.au-link { display: flex; gap: .5rem; margin-top: .6rem; }
.au-link .au-url { flex: 1 1 auto; min-width: 0; }
.au-link .au-linkbtn { white-space: nowrap; }
.au-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: .75rem 0 .25rem; }
.au-adv { margin: .5rem 0; font-size: .9rem; }
.au-adv summary { cursor: pointer; padding: .25rem 0; }
.au-grid { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.au-item { background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .75rem; padding: .35rem; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.au-item[draggable="true"] { cursor: grab; }
.au-item.au-iscover { border-color: var(--bs-warning, #ffc107); box-shadow: 0 0 0 2px rgba(255, 193, 7, .45); }
.au-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: .5rem; overflow: hidden; background: var(--bs-tertiary-bg, #eee); }
.au-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-cover-tag { position: absolute; top: .3rem; inset-inline-start: .3rem; background: rgba(0, 0, 0, .7); color: #fff; font-size: .72rem; padding: .1rem .4rem; border-radius: 1rem; }
.au-st { position: absolute; bottom: .3rem; inset-inline-start: .3rem; background: rgba(0, 0, 0, .7); color: #fff; font-size: .72rem; padding: .1rem .45rem; border-radius: 1rem; }
.au-done .au-st { background: rgba(25, 135, 84, .9); }
.au-failed .au-st { background: rgba(220, 53, 69, .92); }
.au-ibar { position: absolute; inset-inline: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .5); }
.au-ibar > span { display: block; height: 100%; background: var(--bs-primary, #0d6efd); width: 0; transition: width .15s; }
.au-meta { display: flex; justify-content: space-between; gap: .35rem; font-size: .75rem; color: var(--bs-secondary-color, #6c757d); }
.au-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.au-size { white-space: nowrap; }
.au-acts { display: flex; flex-wrap: wrap; gap: .25rem; }
.au-acts .btn { min-width: 2.5rem; min-height: 2.5rem; padding: .25rem .4rem; }
.au-cv.active { color: #b58900; }
.au-prog { margin: .75rem 0; }
.au-pbar { height: .7rem; }
.au-modal .modal-body { max-height: calc(100dvh - 11rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.au-modal .modal-footer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
.au-new { outline: 3px solid var(--bs-success, #198754); outline-offset: -3px; animation: au-pulse 2.4s ease-out 1; }
@keyframes au-pulse { 0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, .6); } 100% { box-shadow: 0 0 0 14px rgba(25, 135, 84, 0); } }
.au-create-actions { position: sticky; bottom: 0; background: var(--bs-body-bg, #fff); padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bs-border-color, #dee2e6); margin-top: 1rem; z-index: 5; }
@media (max-width: 575.98px) { .au-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .4rem; } .au-drop { padding: 1.25rem .75rem; } }
@media (prefers-reduced-motion: reduce) { .au-new { animation: none; } .au-ibar > span, .au-drop { transition: none; } }

.photo-grid .photo-tile[draggable="true"] { cursor: grab; }
.photo-tile.ph-dragging { opacity: .45; }
.photo-tile.ph-dropto { outline: 3px solid var(--bs-primary, #0d6efd); outline-offset: -3px; }

.ph-reordering .photo-tile { cursor: grab; box-shadow: 0 0 0 2px rgba(13,110,253,.25); }

/* ---- Top bar: active links and the "More" mega menu (mega-menu.js) --------------------------------------------------------- */
.main-nav a, .nav-more-toggle { padding-block: 4px; border-block-end: 2px solid transparent; white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1279.98px) { .main-nav { gap: 14px; } .main-nav .nav-admin { padding-inline: 10px; } .header-inner .global-search { flex-basis: 200px; min-width: 130px; } }
.main-nav a.active, .nav-more-toggle.active { color: var(--ft-primary); border-block-end-color: var(--ft-primary); }
.main-nav a:focus-visible, .nav-more-toggle:focus-visible, .mm-link:focus-visible, .mm-pin:focus-visible, .mm-chip:focus-visible, .mm-clear:focus-visible { outline: 2px solid var(--ft-primary); outline-offset: 2px; border-radius: 6px; }
.mm-caret { font-size: .65rem; transition: transform .15s; }
.nav-more-toggle[aria-expanded="true"] .mm-caret { transform: rotate(180deg); }
.main-nav .nav-admin.active { box-shadow: inset 0 0 0 1px var(--ft-primary); }
.mm-panel { position: absolute; inset-inline: 0; margin-inline: auto; inline-size: min(940px, calc(100% - 24px)); top: calc(100% + 6px); background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: 14px;
    box-shadow: 0 14px 34px rgba(43, 38, 34, .16), 0 2px 6px rgba(43, 38, 34, .06); max-height: calc(100vh - var(--hdr-h, 64px) - 20px); max-height: calc(100dvh - var(--hdr-h, 64px) - 20px); overflow-y: auto; overscroll-behavior: contain; z-index: 1; }
.mm-panel:not([hidden]) { animation: mm-in .12s ease-out; }
@keyframes mm-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mm-inner { padding: 12px 16px 12px; }
.mm-search { position: relative; }
.mm-search > i.fa-magnifying-glass { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); color: var(--ft-ink-soft); font-size: .8rem; pointer-events: none; }
.mm-search .form-control { padding-inline-start: 34px; padding-inline-end: 34px; border-color: var(--ft-border); border-radius: 10px; background: var(--ft-surface); block-size: 38px; font-size: .95rem; }
.mm-search .form-control:focus { background: #fff; border-color: var(--ft-primary); box-shadow: 0 0 0 3px rgba(31, 95, 87, .15); }
.mm-qclear { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--ft-ink-soft); padding: 2px 4px; }
.mm-extra { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.mm-extra section:not([hidden]) { margin-top: 8px; }
.mm-h { font-size: .74rem; font-weight: 700; letter-spacing: .03em; color: var(--ft-ink-soft); margin: 0 0 3px; padding-inline: 10px; display: flex; align-items: center; gap: 6px; text-transform: uppercase; white-space: nowrap; }
html[lang="ar"] .mm-h { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.mm-h i { color: var(--ft-primary); width: 1.1em; text-align: center; }
.mm-clear { margin-inline-start: auto; border: 0; background: none; color: var(--ft-primary); font-size: .72rem; padding: 0 4px; text-transform: none; }
.mm-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--ft-border); border-radius: 999px; color: var(--ft-ink); text-decoration: none; font-size: .88rem; background: var(--ft-surface); }
.mm-chip:hover { border-color: var(--ft-primary); color: var(--ft-primary); }
.mm-chip i { color: var(--ft-primary); font-size: .8rem; }
.mm-grid { columns: 4 200px; column-gap: 20px; margin-top: 10px; }
.mm-col { break-inside: avoid; page-break-inside: avoid; margin: 0 0 10px; padding-block-start: 2px; }
.mm-col[hidden], .mm-item[hidden] { display: none; }
.mm-col.mm-has-active > .mm-h { color: var(--ft-primary); }
.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-item { display: flex; align-items: center; border-radius: 8px; break-inside: avoid; }
.mm-item:hover { background: rgba(31, 95, 87, .06); }
.mm-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 5px 10px; min-block-size: 34px; color: var(--ft-ink); text-decoration: none; border-radius: 8px; font-size: .92rem; line-height: 1.3; }
.mm-link i { width: 1.25em; text-align: center; color: var(--ft-ink-soft); flex: none; }
.mm-link span { overflow-wrap: anywhere; }
.mm-link:hover { color: var(--ft-primary); }
.mm-link.mm-active { background: rgba(31, 95, 87, .12); color: var(--ft-primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--ft-primary); }
[dir="rtl"] .mm-link.mm-active, html[lang="ar"] .mm-link.mm-active { box-shadow: inset -3px 0 0 var(--ft-primary); }
.mm-link.mm-active i { color: var(--ft-primary); }
.mm-pin { border: 0; background: none; color: var(--ft-ink-soft); padding: 4px 8px; opacity: 0; transition: opacity .12s; border-radius: 6px; font-size: .8rem; }
.mm-item:hover .mm-pin, .mm-item:focus-within .mm-pin, .mm-item.mm-pinned .mm-pin { opacity: 1; }
.mm-item.mm-pinned .mm-pin { color: var(--ft-accent-text, #8F4A26); }
.mm-empty { margin: 14px 10px 4px; padding: 14px; text-align: center; color: var(--ft-ink-soft); border: 1px dashed var(--ft-border); border-radius: 10px; }
@media (max-width: 991.98px) { .mm-panel { display: none !important; } }
@media (max-width: 1099.98px) { .mm-grid { columns: 3 200px; } }
@media (max-width: 759.98px) { .mm-grid { columns: 2 200px; } }
@media (prefers-reduced-motion: reduce) { .mm-panel:not([hidden]) { animation: none; } .mm-caret, .mm-pin { transition: none; } }
@media (hover: none) { .mm-pin { opacity: 1; } }
@media print { .mm-panel { display: none !important; } }

/* Album: multi-select ("Edit photos") */
.album-bulk { position: sticky; top: 0; z-index: 5; }
.album-bulk-target { width: auto; min-width: 11rem; max-width: 100%; }
.album-bulk-sep { width: 1px; height: 22px; background: var(--bs-border-color); }
.photo-grid.ph-selecting .photo-tile { cursor: pointer; position: relative; }
.photo-grid.ph-selecting .photo-tile.ph-picked { outline: 3px solid var(--bs-primary); outline-offset: -3px; }
.photo-grid.ph-selecting .photo-tile::after { content: ""; position: absolute; top: 6px; inset-inline-start: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.85); border: 2px solid #6c757d; }
.photo-grid.ph-selecting .photo-tile.ph-picked::after { content: "\2713"; background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; font-size: 14px; line-height: 20px; text-align: center; font-weight: 700; }

/* Quick Add a relative (People/Details) */
.rel-dialog { max-width: 520px; }
.rel-dialog.modal-lg { max-width: 800px; }
.rel-modes { flex-wrap: wrap; }
.rel-context { font-weight: 600; }
.rel-is-quick .rel-extra { display: none; }
.rel-suggest { border-inline-start: 3px solid var(--bs-info); padding: .25rem .6rem; background: var(--bs-light); border-radius: .25rem; }
.rel-suggest div[dir] { font-style: italic; }
input.rel-suggested { border-style: dashed; font-style: italic; }
.rel-brow { display: grid; grid-template-columns: 1fr 1fr 6.5rem auto; gap: .5rem; margin-bottom: .5rem; }
.rel-batch-head { grid-template-columns: 1fr 1fr 6.5rem 2.5rem; gap: .5rem; margin-bottom: .25rem; }
.rel-footer { flex-wrap: wrap; gap: .5rem; }
.rel-flash { animation: rel-flash 3s ease-out; border-radius: .5rem; }
@keyframes rel-flash { 0%, 40% { background: rgba(25, 135, 84, .25); } 100% { background: transparent; } }
.rel-toast { position: fixed; z-index: 2000; inset-inline: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); margin-inline: auto; max-width: 28rem; background: #1f2d27; color: #fff; padding: .7rem 1rem; border-radius: .5rem; box-shadow: 0 6px 24px rgba(0,0,0,.25); text-align: center; transition: opacity .4s; }
.rel-toast-out { opacity: 0; }
@media (max-width: 575.98px) {
  /* Bottom sheet on phones */
  #relativeModal .modal-dialog { margin: 0; max-width: none; min-height: 0; position: fixed; inset-inline: 0; bottom: 0; width: 100%; align-items: flex-end; }
  #relativeModal .modal-content { max-height: 92dvh; border-radius: 1rem 1rem 0 0; }
  #relativeModal.fade .modal-dialog { transform: translateY(100%); }
  #relativeModal.show .modal-dialog { transform: none; }
  #relativeModal .form-control, #relativeModal .form-select { font-size: 16px; min-height: 46px; }
  #relativeModal .modal-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #relativeModal .modal-footer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
  #relativeModal .rel-footer .btn { flex: 1 1 calc(50% - .5rem); min-height: 46px; }
  .rel-brow { grid-template-columns: 1fr 1fr; }
  .rel-brow .rb-g { grid-column: 1; }
  .rel-brow .rb-del { grid-column: 2; }
}

/* Edit profile: drop a photo on the photo section */
#pf-photo-section.pf-dragover { outline: 3px dashed var(--bs-primary, #1f5c4d); outline-offset: -3px; background: rgba(31, 92, 77, .06); }

/* Family tab: relatives show their profile photo */
.mini-icon.mini-photo { overflow: hidden; padding: 0; }
.mini-icon.mini-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Genealogy Intelligence workspace */
.gi-ws-nav { gap: .25rem; flex-wrap: wrap; }
.gi-ws-nav .nav-link { border-radius: 999px; padding: .35rem .9rem; color: var(--bs-body-color); border: 1px solid var(--bs-border-color); font-size: .95rem; }
.gi-ws-nav .nav-link.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
.gi-ws-nav .nav-link .badge { margin-inline-start: .25rem; }
.gi-tile:hover { background: var(--bs-tertiary-bg); }
.gi-na-count { min-width: 2.5rem; text-align: center; }
.gi-pr { background: var(--bs-body-bg); font-weight: 500; }
.gi-pr-high { color: var(--bs-danger-text-emphasis); border-color: var(--bs-danger-border-subtle) !important; background: var(--bs-danger-bg-subtle); }
.gi-pr-medium { color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle) !important; background: var(--bs-warning-bg-subtle); }
.gi-pr-low { color: var(--bs-secondary-color); }
.gi-q-row { cursor: pointer; border-inline-start: 3px solid transparent; }
.gi-q-row:hover { background: var(--bs-tertiary-bg); }
.gi-q-row.gi-active { border-inline-start-color: var(--bs-primary); background: var(--bs-tertiary-bg); }
.gi-chip { border-radius: 999px; }
.gi-filters { display: block; }
.gi-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1049; }
.gi-drawer { background: var(--bs-body-bg); display: flex; flex-direction: column; }
.gi-drawer.gi-overlay { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(1180px, 94vw); z-index: 1050; box-shadow: 0 0 30px rgba(0, 0, 0, .3); height: 100vh; height: 100dvh; }
.gi-drawer-head { padding: .5rem .75rem; border-bottom: 1px solid var(--bs-border-color); padding-top: max(.5rem, env(safe-area-inset-top)); }
.gi-drawer-body { overflow: auto; flex: 1 1 auto; padding: .75rem; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.gi-drawer-foot { display: flex; gap: .5rem; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
.gi-drawer-foot .btn { flex: 1 1 0; }
.gi-drawer .gi-panel-src { top: 0; }
.gi-drawer .gi-source { max-height: calc(100vh - 13rem); max-height: calc(100dvh - 13rem); }
.gi-drawer.gi-inline { position: sticky; top: 4.5rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); }
.gi-drawer.gi-inline .gi-drawer-foot { display: none; }
.gi-inline .gi-panel { flex: 0 0 100%; max-width: 100%; }
.gi-inline .gi-panel.d-none { display: none !important; }
.gi-inline .btn-group.d-lg-none { display: flex !important; }
body.gi-lock { overflow: hidden; }
@media (max-width: 767.98px) {
    .gi-drawer.gi-overlay { width: 100vw; }
    .gi-filters { display: none; }
    .gi-filters.gi-sheet-open { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 1060; background: var(--bs-body-bg); padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 1rem 1rem 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .3); max-height: 75vh; max-height: 75dvh; overflow: auto; }
    .gi-filters .form-select { width: 100% !important; margin-bottom: .5rem; }
}

/* ---- Sign-in: remember me / trust this device, 2FA code, devices list ---- */
.remember-check { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: start; padding-inline-start: 0; min-height: 44px; }
.remember-check .form-check-input { float: none; margin: .2rem 0 0; width: 1.35rem; height: 1.35rem; border-width: 2px; border-color: var(--ft-ink-soft); cursor: pointer; }
.remember-check .form-check-input:checked { background-color: var(--ft-accent); border-color: var(--ft-accent); }
.remember-check .form-check-input:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: 2px; box-shadow: none; }
.remember-check .form-check-label { cursor: pointer; font-weight: 600; padding-block: .1rem; }
.remember-check .form-text { grid-column: 2; margin-top: .15rem; }
.mfa-code { letter-spacing: .35em; font-variant-numeric: tabular-nums; }
#login-form .form-control, #mfa-form .form-control { min-height: 48px; font-size: 16px; } /* 16px stops iOS Safari zooming into the field */
.btn-google { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#login-submit, #mfa-submit { min-height: 48px; }
#login-submit[aria-busy="true"], #mfa-submit[aria-busy="true"] { opacity: .85; cursor: progress; }
.dev-list { margin: 0; padding: 0; }
.dev-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ft-border); }
.dev-item:last-child { border-bottom: 0; }
.dev-main { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .dev-item { flex-direction: column; align-items: stretch; }
    .dev-item .btn { width: 100%; }
    .account-card { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

.g7-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 0 12px; position: sticky; top: 0; background: var(--ft-card); z-index: 2; }
.g7-rm { position: relative; }
.g7-rm-pick { position: absolute; top: 6px; inset-inline-start: 6px; background: rgba(255,255,255,.92); border-radius: 6px; padding: 4px; line-height: 0; cursor: pointer; z-index: 1; }
.g7-rm-pick .form-check-input { width: 1.25rem; height: 1.25rem; margin: 0; cursor: pointer; }
.g7-rm.is-picked img { outline: 3px solid var(--ft-accent); outline-offset: -3px; }

/* =====================================================================================================================
   Family tree on phones (<= 767.98px): a full-height workspace. Desktop rules above are untouched.
   JS (tree-mobile.js) sets --tws-top (header bottom), --tws-vh (visible height), --tws-sheet-h and --tws-inset (bottom sheet).
   ===================================================================================================================== */
.tws-hbtn, .tws-title, .tws-search-head, .tws-handle, .tws-edit-badge, .tws-moretoggle, .tws-lbl, .tws-prev { display: none; }

@media (max-width: 767.98px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
    body.tree-ws { overflow: hidden; overscroll-behavior: none; }
    body.tree-ws .site-footer, body.tree-ws .global-search { display: none !important; }
    body.tree-ws .page-content { padding: 0 !important; max-width: none; }

    /* One compact header row: back, title, search, bell, language (icon), menu. */
    body.tree-ws .header-inner { flex-wrap: nowrap; min-height: 52px; gap: 6px; padding-block: 4px; }
    body.tree-ws .brand { flex: 1 1 auto; min-width: 0; gap: 6px; font-size: 1.05rem; }
    body.tree-ws .brand > span:not(.tws-title) { display: none; }
    body.tree-ws .tws-title { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.tree-ws .header-actions { gap: 6px; flex: none; }
    body.tree-ws .tws-hbtn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 40px; padding: 0; flex: none; }
    body.tree-ws .lang-switch .btn { font-size: 0; width: 42px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
    body.tree-ws .lang-switch .btn i { font-size: 1.05rem; margin: 0; }
    body.tree-ws .notif-btn, body.tree-ws .nav-burger { width: 42px; height: 40px; }

    /* The workspace fills what is left under the header. */
    body.tree-ws #tree-app { position: relative; height: calc(100vh - var(--tws-top, 52px)); height: calc(var(--tws-vh, 100dvh) - var(--tws-top, 52px)); overflow: hidden; }
    body.tree-ws .tree-stage { position: absolute; inset: 0; height: auto; min-height: 0; border: 0; border-radius: 0; }
    body.tree-ws .tree-viewport { inset-block-end: var(--tws-inset, 0px); }
    body.tree-ws .te-drawer-open .tree-viewport { inset-block-end: 0; }
    body.tree-ws .tree-legend { display: none; }
    body.tree-ws .tree-loading { inset-block-start: 56px; }
    body.tree-ws .tree-toast { inset-block-start: 56px; }

    /* The toolbar dissolves: its pieces float over the canvas. */
    body.tree-ws .tree-toolbar { position: static; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; display: block; }

    /* Search: the existing field and results list, shown as a full-screen sheet from the header button. */
    body.tree-ws .tree-search { display: none; }
    body.tree-ws.tws-search-open .tree-search { display: flex; flex-direction: column; position: fixed; inset: 0; height: var(--tws-vh, 100dvh); z-index: 1600; background: var(--ft-surface, #faf7f2); padding: calc(10px + env(safe-area-inset-top)) 14px 10px; max-width: none; min-width: 0; }
    body.tree-ws .tws-search-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }
    body.tree-ws .tree-search .form-control { font-size: 16px; min-height: 48px; }
    body.tree-ws .tree-search .input-group-text { min-height: 48px; }
    body.tree-ws .tree-search-results { position: static; display: block; flex: 1 1 auto; margin-top: 10px; max-height: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 0; box-shadow: none; background: transparent; padding-bottom: env(safe-area-inset-bottom); }
    body.tree-ws .tree-search-results.d-none { display: none; }
    body.tree-ws .tree-hit { min-height: 56px; padding: 10px 8px; border-bottom: 1px solid var(--ft-border); border-radius: 0; font-size: 1rem; }
    body.tree-ws .tree-hit-name { display: block; min-width: 0; overflow-wrap: anywhere; }

    /* View / Edit: a small segmented control at the top, icons only. */
    body.tree-ws .te-toggle { position: absolute; z-index: 20; inset-block-start: 8px; inset-inline-start: 10px; box-shadow: 0 2px 8px rgba(43, 38, 34, .18); border-radius: 10px; background: var(--ft-card); }
    body.tree-ws .te-toggle .btn { min-width: 44px; min-height: 40px; font-size: 0; display: inline-flex; align-items: center; justify-content: center; }
    body.tree-ws .te-toggle .btn i { font-size: 1rem; margin: 0; }
    body.tree-ws .tws-edit-badge { position: absolute; z-index: 19; inset-block-start: 10px; inset-inline-start: 50%; transform: translateX(-50%); display: none; background: var(--bs-primary, #0d6efd); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); pointer-events: none; }
    [dir="rtl"] body.tree-ws .tws-edit-badge { transform: translateX(50%); }
    body.tree-ws .te-on .tws-edit-badge { display: inline-flex; gap: 6px; align-items: center; }

    /* Floating controls: zoom in / out / fit always visible, the rest behind "more". They ride above the bottom sheet. */
    body.tree-ws .tree-buttons { position: absolute; z-index: 20; inset-inline-end: 10px; inset-block-end: calc(var(--tws-inset, 0px) + 12px + env(safe-area-inset-bottom)); margin: 0; width: auto; flex-direction: column; align-items: flex-end; gap: 6px; }
    body.tree-ws .tree-buttons .btn { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: var(--ft-card); box-shadow: 0 2px 8px rgba(43, 38, 34, .22); display: inline-flex; align-items: center; justify-content: center; }
    body.tree-ws .tree-buttons .tws-moretoggle { display: inline-flex; }
    body.tree-ws .tree-buttons .tws-secondary { display: none; }
    body.tree-ws .tree-buttons.tws-more-open .tws-secondary { display: inline-flex; width: auto; min-width: 44px; border-radius: 22px; padding: 0 16px 0 14px; gap: 8px; }
    body.tree-ws .tree-buttons.tws-more-open .tws-lbl { display: inline; font-size: .85rem; white-space: nowrap; }
    [dir="rtl"] body.tree-ws .tree-buttons.tws-more-open .tws-secondary { padding: 0 14px 0 16px; }
    body.tree-ws .tree-buttons .tws-secondary { order: -1; }
    body.tree-ws .tree-buttons .tws-moretoggle { order: 9; }

    /* View options (mode, levels, jump) open as a card above the controls. */
    body.tree-ws .tree-controls { display: none; }
    body.tree-ws .tree-toolbar.opts-open .tree-controls { display: flex; position: absolute; z-index: 21; inset-inline: 10px; inset-block-end: calc(var(--tws-inset, 0px) + 12px + env(safe-area-inset-bottom)); background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: 14px; padding: 12px; box-shadow: 0 8px 28px rgba(43, 38, 34, .25); }
    body.tree-ws .tree-select { font-size: 16px; min-height: 44px; flex: 1 1 calc(50% - 8px); max-width: none; }

    /* Person cards: bigger name, touch-sized expand buttons. */
    body.tree-ws .tc-name { font-size: 1rem; }
    body.tree-ws .tc-dates { font-size: .8rem; }
    body.tree-ws .tc-btn { width: 30px; height: 30px; font-size: 13px; }
    body.tree-ws .tc-up { top: -16px; left: calc(50% - 15px); }
    body.tree-ws .tc-down { bottom: -16px; left: calc(50% - 15px); }
    body.tree-ws .tree-card.is-selected { box-shadow: 0 0 0 4px rgba(31, 95, 87, .4), 0 8px 22px rgba(43, 38, 34, .22); }

    /* Person details: a bottom sheet with three heights (peek / half / full). It scrolls on its own and never moves the tree. */
    body.tree-ws .tree-panel { position: absolute; inset-inline: 0; inset-block: auto 0; width: auto; max-width: none; max-height: none; height: var(--tws-sheet-h, 46dvh); z-index: 30; border-radius: 20px 20px 0 0; border: 0; border-top: 1px solid var(--ft-border); box-shadow: 0 -8px 28px rgba(43, 38, 34, .2); padding: 0 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; transition: height .22s ease; }
    body.tree-ws .tree-panel.tws-dragging { transition: none; }
    body.tree-ws .tree-panel.d-none { display: none; }
    body.tree-ws .tws-handle { display: flex; position: sticky; top: 0; z-index: 2; justify-content: center; align-items: center; height: 28px; margin-inline: -16px; background: var(--ft-card); border-radius: 20px 20px 0 0; touch-action: none; cursor: grab; }
    body.tree-ws .tws-grip { width: 44px; height: 5px; border-radius: 3px; background: #CFC6B8; }
    body.tree-ws .tws-handle:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: -3px; }
    body.tree-ws .tree-panel-close { inset-block-start: 6px; inset-inline-end: 8px; z-index: 3; width: 36px; height: 36px; }
    body.tree-ws .tree-panel[data-sheet="peek"] #tp-relatives, body.tree-ws .tree-panel[data-sheet="peek"] .tp-actions, body.tree-ws .tree-panel[data-sheet="peek"] #te-actions, body.tree-ws .tree-panel[data-sheet="peek"] #tp-other { display: none; }
    body.tree-ws .tree-panel .tp-actions { position: static; }
    body.tree-ws .tree-panel .tp-actions .btn { min-height: 44px; }
    body.tree-ws .tws-prev { display: inline-flex; align-items: center; gap: 6px; }
    body.tree-ws .tws-prev.d-none { display: none; }
    body.tree-ws .tp-chip { min-height: 40px; }
    body.tree-ws .te-on .tree-panel { max-height: none; }

    /* Editing drawer stays above the sheet. */
    body.tree-ws .te-drawer { z-index: 1060; }
}
@media (prefers-reduced-motion: reduce) { body.tree-ws .tree-panel { transition: none; } }
@media (max-width: 767.98px) and (max-height: 430px), (max-height: 430px) and (orientation: landscape) and (pointer: coarse) {
    /* Landscape phones: the sheet becomes a side panel so the tree keeps its height. */
    body.tree-ws .tree-panel { inset-inline: auto 0; inset-block: 0; width: min(360px, 45vw); height: auto; border-radius: 0; border-top: 0; }
    body.tree-ws .tws-handle { display: none; }
    body.tree-ws .tree-viewport { inset-block-end: 0; inset-inline-end: min(360px, 45vw); }
    body.tree-ws .tree-panel[data-sheet] #tp-relatives, body.tree-ws .tree-panel[data-sheet] #tp-other { display: block; }
    body.tree-ws .tree-panel[data-sheet] .tp-actions { display: flex; }
    body.tree-ws .tree-panel[data-sheet] #te-actions:not(.d-none) { display: flex; }
}

/* ===== Phone homepage + shell (<= 767.98px) =====================================================
   Phones get a purpose-built layout: compact header, bottom navigation, a short welcome, My Family first, then
   Quick Access, photos, activity and events. Desktop and tablet (>= 768px) are untouched. */
.bnav { display: none; }
@media (max-width: 767.98px) {
    /* --- header: [logo][search][bell][language][menu] --- */
    .site-header { padding-top: env(safe-area-inset-top); }
    .header-inner { flex-wrap: nowrap; min-height: 52px; gap: 6px; padding-block: 4px; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
    .brand { flex: 1 1 auto; min-width: 0; gap: 6px; font-size: 1.05rem; overflow: hidden; }
    .brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .header-actions { gap: 6px; flex: none; }
    .header-actions .btn, .hs-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
    .lang-switch .btn { font-size: .8rem; }
    /* the always-on search row becomes a full-screen sheet opened from the header button */
    body:not(.tree-ws) .global-search { display: none; }
    body.hs-open { overflow: hidden; }
    body.hs-open .global-search { display: block; position: fixed; inset: 0; z-index: 1100; max-width: none; margin: 0; background: var(--ft-card); padding: calc(env(safe-area-inset-top) + 10px) 12px 12px; overflow-y: auto; }
    .hs-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 10px; min-height: 44px; }
    .hs-head .btn-close { padding: 14px; }
    body.hs-open .gs-results { position: static; margin-block-start: 10px; box-shadow: none; max-height: none; }
    body.hs-open .global-search .form-control, body.hs-open .global-search .input-group-text { min-height: 48px; font-size: 1rem; }

    /* --- bottom navigation --- */
    body.has-bnav { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .bnav { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 1025; background: var(--ft-card); border-block-start: 1px solid var(--ft-border); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-shadow: 0 -2px 10px rgba(0, 0, 0, .06); }
    .bnav-item { flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; color: var(--ft-ink-soft); text-decoration: none; font: inherit; font-size: .72rem; font-weight: 600; padding: 6px 2px; }
    .bnav-item i { font-size: 1.15rem; }
    .bnav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bnav-item:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: -3px; }
    .bnav-active { color: var(--ft-primary); box-shadow: inset 0 3px 0 var(--ft-primary); }
    body.has-bnav .site-footer { padding-bottom: 8px; }

    /* --- home: section order via flex order, columns flattened --- */
    .home-flow { gap: 16px; }
    .home-grid, .home-col { display: contents; }
    .home-hero { order: 0; }
    .home-myfamily { order: 1; }
    .home-explore { order: 2; }
    .home-photos { order: 3; }
    .home-activity { order: 4; }
    .home-happening { order: 5; }
    #push-prompt { order: -1; }
    .home-card { padding: 14px; }
    .home-card-head, .home-section-head { margin-block-end: 10px; }
    .home-card-title { font-size: 1.05rem; }

    /* --- compact welcome --- */
    .home-hero { padding: 14px; gap: 10px; border-radius: 14px; }
    .home-hero-title { font-size: 1.25rem; margin: 0; }
    .home-hero-lead { display: none; }
    .home-hero-text { width: 100%; }
    .home-hero-actions { gap: 8px; margin-block-start: 10px; flex-wrap: nowrap; }
    .home-hero-actions .btn { flex: 1 1 0; justify-content: center; padding-inline: 8px !important; font-size: .9rem; white-space: nowrap; }
    .home-stats { display: flex; flex-wrap: nowrap; gap: 0; width: 100%; margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px solid rgba(255, 255, 255, .25); }
    .home-stats [data-stat-wrap="branches"] { display: none; }
    .home-stat { flex: 1 1 0; align-items: center; text-align: center; }
    .home-stat + .home-stat { border-inline-start: 1px solid rgba(255, 255, 255, .25); }
    .home-stat-num { font-size: 1.15rem; min-height: 0; }
    .home-stat-label { font-size: .7rem; text-align: center; }
    .home-stat-label i { display: none; }

    /* --- My Family: compact by default --- */
    .mf-row { gap: 8px 8px; flex-wrap: nowrap; justify-content: center; }
    .mf-row + .mf-row { margin-block-start: 22px; }
    .mf-row + .mf-row::before { top: -22px; height: 22px; }
    .mf-person { width: auto; flex: 1 1 0; min-width: 0; max-width: 112px; padding: 8px 4px; min-height: 44px; }
    .mf-tree, .home-card, .home-photos { min-width: 0; max-width: 100%; }
    .mf-children { width: 100%; max-width: 100%; justify-content: flex-start; overflow-x: auto; padding-block-end: 4px; scroll-snap-type: x proximity; }
    .mf-children .mf-person { flex: none; width: 88px; scroll-snap-align: start; }
    .mf-avatar { width: 46px; height: 46px; }
    .mf-name { font-size: .85rem; -webkit-line-clamp: 3; }
    .mf-rel { font-size: .7rem; }
    .mf-person.is-picked { border-color: var(--ft-primary); background: #fff; box-shadow: 0 0 0 2px rgba(31, 95, 87, .25); }
    .mf-siblings.is-collapsed .mf-sibs { display: none; }
    .mf-sub-toggle { margin: 14px 0 0; text-align: start; }
    .mf-siblings.is-collapsed .mf-sub-toggle { margin-block-end: 0; }
    .mf-sib-toggle { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 1px solid var(--ft-border); border-radius: 12px; padding: 0 12px; font: inherit; font-weight: 600; color: var(--ft-ink); }
    .mf-sib-toggle i { transition: transform .2s; }
    .mf-sib-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
    .mf-siblings:not(.is-collapsed) .mf-sibs { margin-block-start: 10px; }
    .mf-sibs:not(.is-open) .mf-person { flex: none; width: 92px; }
    .mf-explore { margin-block-start: 12px; }

    /* person preview bottom sheet */
    .mf-preview { position: fixed; inset-inline: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 1040; background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .18); padding: 14px 16px 16px; margin-inline: 8px; }
    .mf-preview[hidden] { display: none; }
    .mf-pv-top { display: flex; align-items: center; gap: 12px; }
    .mf-pv-avatar { width: 56px; height: 56px; font-size: 1.3rem; flex: none; }
    .mf-pv-text { flex: 1 1 auto; min-width: 0; }
    .mf-pv-name { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
    .mf-pv-rel { color: var(--ft-ink-soft); font-size: .85rem; }
    .mf-pv-top .btn-close { padding: 14px; flex: none; }
    .mf-pv-actions { display: flex; gap: 8px; margin-block-start: 12px; }
    .mf-pv-actions .btn { flex: 1 1 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }

    /* --- Quick Access: two compact tiles per row --- */
    .home-explore .home-section-head { margin-block-end: 8px; }
    .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .explore-card { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; min-height: 56px; border-radius: 12px; }
    .explore-card:hover { transform: none; }
    .explore-icon { width: 36px; height: 36px; margin: 0; flex: none; font-size: 1rem; }
    .explore-title { font-size: .92rem; line-height: 1.2; }
    .explore-text, .explore-go { display: none; }

    /* --- photos: horizontal strip --- */
    .home-photo-strip { grid-auto-columns: 132px; gap: 8px; }
    
    .home-photos .home-more { min-height: 44px; display: inline-flex; align-items: center; }

    /* --- activity / events --- */
    .hp-list { margin: 0; }
    .home-happening.is-empty { padding-block: 10px; }
    .home-happening.is-empty .home-card-head { margin-block-end: 4px; }
    .home-happening .hp-actions .btn, .home-happening .hp-actions a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 359.98px) {
    .brand > span { display: none; }
    .bnav-item { font-size: .66rem; }
    .home-hero-actions { flex-wrap: wrap; }
}
@media (min-width: 768px) { .hs-head { display: none; } }
@media (prefers-reduced-motion: reduce) { .mf-sib-toggle i { transition: none; } }

/* ===== Directory: phone layer (<= 767.98px) ====================================================
   Search first, advanced filters in a bottom sheet, a compact one-row-per-person list with a "..." menu.
   Wider screens keep the existing cards/table layout: the wrappers below are transparent there. */
.dir-adv, .dir-adv-body { display: contents; }
.dir-qclear, .dir-backdrop, .dir-popsheet { display: none; }
.dir-mbar, .dir-chips { display: none; }
@media (max-width: 767.98px) {
    .dir-head { flex-wrap: nowrap !important; margin-bottom: 8px !important; }
    .dir-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
    .dir-title .page-title { font-size: 1.35rem; }
    .dir-count-m { color: var(--ft-ink-soft); font-size: .85rem; }
    .dir-head-actions { flex-wrap: nowrap !important; flex: none; }
    .dir-head-actions .btn { min-width: 44px; min-height: 44px; padding: 0 12px !important; display: inline-flex; align-items: center; justify-content: center; }
    .dir-btn-text { display: none; }
    #dir-count { display: none; }

    .dir-filters-card { padding: 10px; margin-bottom: 8px !important; }
    #dir-filters > .row > .col-12 > label[for="dir-q"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    #dir-q { min-height: 48px; font-size: 1rem; }
    #dir-filters .input-group-text { min-height: 48px; }
    .dir-qclear:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; }
    .dir-filters-card.is-loading #dir-q ~ * , .dir-filters-card.is-loading .input-group-text i { animation: dir-pulse 1s ease-in-out infinite; }
    @keyframes dir-pulse { 50% { opacity: .35; } }

    /* toolbar + chips */
    .dir-mbar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
    .dir-mbtn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 0 14px; }
    .dir-badge { min-width: 20px; height: 20px; border-radius: 10px; background: var(--ft-primary); color: #fff; font-size: .75rem; display: inline-grid; place-items: center; padding: 0 5px; }
    .dir-badge[hidden], .dir-chips[hidden], .dir-menu[hidden], .dir-end[hidden], .dir-qclear[hidden], .dir-backdrop[hidden], .dir-popsheet[hidden] { display: none !important; }
    .dir-sortwrap { position: relative; }
    .dir-menu { position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 1040; min-width: 200px; background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); padding: 6px; margin: 0; }
    .dir-menu-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; background: none; text-align: start; font: inherit; border-radius: 8px; color: var(--ft-ink); }
    .dir-menu-item:hover, .dir-menu-item:focus-visible { background: var(--ft-surface); }
    .dir-menu-item.on { color: var(--ft-primary); font-weight: 600; }
    .dir-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px 2px; scrollbar-width: none; }
    .dir-chip { flex: none; display: inline-flex; align-items: center; background: #E8EFEC; color: var(--ft-primary); border-radius: 999px; padding-inline: 12px 4px; min-height: 36px; white-space: nowrap; font-size: .88rem; font-weight: 500; }
    .dir-chip-x { position: relative; min-width: 32px; min-height: 32px; border: 0; background: none; color: inherit; display: grid; place-items: center; }
    .dir-chip-x::after { content: ""; position: absolute; inset: -6px; }
    .dir-chip-all { flex: none; border: 0; background: none; color: var(--ft-primary); font-weight: 600; min-height: 44px; padding: 0 8px; white-space: nowrap; }

    /* filter bottom sheet: the same controls as the desktop bar, drafted until Apply */
    .dir-adv { display: none; }
    body.dir-sheet-open .dir-adv { display: flex; flex-direction: column; position: fixed; inset-inline: 0; bottom: 0; z-index: 1062; max-height: 88vh; max-height: 88dvh; background: var(--ft-card); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
    .dir-adv-body { display: flex !important; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0; --bs-gutter-x: .75rem; padding: 12px 14px; align-content: flex-start; }
    .dir-adv-body .form-select, .dir-adv-body .form-control { min-height: 44px; font-size: 1rem; }
    .dir-adv-body #dir-reset, .dir-adv-body .btn-group, .dir-sort-col { display: none !important; }
    .dir-adv-body .form-check { min-height: 44px; display: flex; align-items: center; gap: 8px; }
    .dir-adv-body .form-check-input { width: 1.4rem; height: 1.4rem; margin: 0; float: none; }
    .dir-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 8px 18px; border-bottom: 1px solid var(--ft-border); flex: none; min-height: 52px; }
    .dir-sheet-head .btn-close { padding: 14px; }
    .dir-sheet-foot { display: flex; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ft-border); flex: none; background: var(--ft-card); }
    .dir-sheet-foot .btn { min-height: 46px; }
    .dir-backdrop { display: block; position: fixed; inset: 0; z-index: 1060; background: rgba(0, 0, 0, .4); }
    body.dir-lock { overflow: hidden; }

    /* person bottom sheets */
    .dir-popsheet { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 1062; background: var(--ft-card); border-radius: 16px 16px 0 0; max-height: 85vh; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
    .dir-pop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
    .dir-pop-names { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
    .dir-pop-names strong { overflow-wrap: anywhere; }
    .dir-pop-names span { color: var(--ft-ink-soft); font-size: .88rem; overflow-wrap: anywhere; }
    .dir-pop-head .btn-close { padding: 14px; flex: none; }
    .dir-pop-list { margin: 0; }
    .dir-pop-list a, .dir-pop-list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 4px; background: none; border: 0; border-top: 1px solid var(--ft-border); text-align: start; color: var(--ft-ink); text-decoration: none; font: inherit; }
    .dir-pop-list i { width: 22px; text-align: center; color: var(--ft-primary); }
    .dir-pop-list a:focus-visible, .dir-pop-list button:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: -3px; }
    .dir-pop-note { color: var(--ft-primary); font-size: .88rem; min-height: 1.2em; padding: 4px; }
    .dir-pv-body { margin-top: 6px; }
    .dir-pv-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--ft-border); font-size: .92rem; }
    .dir-pv-label { color: var(--ft-ink-soft); }
    .dir-pv-val a { display: block; padding: 6px 0; color: var(--ft-primary); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
    .dir-pv-actions { display: flex; gap: 8px; margin-top: 12px; }
    .dir-pv-actions .btn { flex: 1 1 0; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

    /* the list */
    .dm-list { background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: 14px; overflow: hidden; }
    .dm-card { display: flex; align-items: center; position: relative; border-bottom: 1px solid var(--ft-border); min-height: 64px; }
    .dm-card:last-child { border-bottom: 0; }
    .dm-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 0; padding-inline-start: 12px; min-height: 64px; text-decoration: none; color: var(--ft-ink); }
    .dm-main:active { background: var(--ft-surface); }
    .dm-main:focus-visible, .dm-more:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: -3px; }
    .dm-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; font-size: 1.05rem; display: grid; place-items: center; }
    .dm-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
    /* each line sits at the start of the row even when its own text runs the other way (Arabic under an English name) */
    .dm-text > span { align-self: flex-start; max-width: 100%; }
    .dm-name { font-weight: 600; font-size: .98rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
    .dm-other { font-size: .85rem; color: var(--ft-ink-soft); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dm-meta { font-size: .8rem; color: var(--ft-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dm-more { flex: none; width: 48px; min-height: 64px; align-self: stretch; border: 0; background: none; color: var(--ft-ink-soft); display: grid; place-items: center; font-size: 1.1rem; }
    .dm-card.mu-selectable > .mu-pick { position: static; order: -1; margin-inline-start: 6px; background: none; }
    .dm-skel { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--ft-border); }
    .dm-skel-av { width: 48px; height: 48px; border-radius: 50%; flex: none; }
    .dm-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
    .dm-empty { text-align: center; padding: 32px 16px; background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: 14px; color: var(--ft-ink-soft); }
    .dm-empty i { font-size: 2rem; margin-bottom: 8px; }
    .dm-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
    .dm-empty-actions .btn { min-height: 44px; }
    #dir-foot { margin: 14px 0 !important; }
    #dir-more { min-height: 44px; }
    .dir-end { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { .dir-filters-card.is-loading * { animation: none !important; } }

/* ===== Person profile: shared pieces, then the phone layout (<= 767.98px) ==========================
   Contextual Add menus, compact empty states, evidence summary, a bottom sheet for the secondary actions, and a
   compact identity header with sticky, scrollable tabs. Desktop keeps its layout. */
.pc-sticky { margin-top: 1rem; }
.profile-tabs { flex: 1 1 auto; min-width: 0; }
.pc-tabwrap { position: relative; display: flex; align-items: stretch; }
.pc-mini[hidden], .pc-sheet[hidden], .pc-backdrop[hidden] { display: none !important; }
.pc-empty-hero { text-align: center; padding: 10px 8px; }
.pc-empty-hero > i { display: block; font-size: 1.8rem; color: var(--ft-primary); opacity: .8; margin-bottom: 6px; }
.pc-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pc-empty-actions .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.pc-empty-line { font-size: .92rem; }
.pc-addline { font-size: .9rem; color: var(--ft-ink-soft); margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-addline a { font-weight: 600; }
.pc-bio { margin-bottom: .25rem; overflow-wrap: anywhere; }
.pc-note summary { cursor: pointer; color: var(--ft-ink-soft); font-size: .85rem; min-height: 32px; display: flex; align-items: center; }
.pc-note { margin-bottom: 10px; }
.pc-evsum { display: flex; gap: 8px; margin-bottom: 10px; }
.pc-evsum span { flex: 1 1 0; background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: 10px; padding: 6px 8px; font-size: .78rem; color: var(--ft-ink-soft); text-align: center; }
.pc-evsum b { display: block; font-size: 1.15rem; color: var(--ft-ink); }
.pc-fsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.pc-fsum button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 56px; background: var(--ft-card); border: 1px solid var(--ft-border); border-radius: 12px; color: var(--ft-ink); font: inherit; padding: 6px 4px; }
.pc-fsum button b { font-size: 1.15rem; line-height: 1.1; }
.pc-fsum button span { font-size: .72rem; color: var(--ft-ink-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-fsum button:focus-visible, .pc-all:focus-visible, .pc-item:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: -3px; }
.pc-toolbar .btn { min-height: 40px; display: inline-flex; align-items: center; }
.widget-card:has(> #story-person-list:empty), .widget-card:has(> #house-person-list:empty) { display: none; }
.pc-add { min-height: 36px; }

/* sheet (bottom sheet on phones, a small dialog on larger screens) */
.pc-backdrop { position: fixed; inset: 0; z-index: 1070; background: rgba(0, 0, 0, .4); }
.pc-sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 1072; background: var(--ft-card); border-radius: 16px 16px 0 0; max-height: 85vh; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
@media (min-width: 768px) { .pc-sheet { inset-inline: auto; inset-block-end: auto; top: 18vh; left: 50%; transform: translateX(-50%); width: min(400px, 92vw); border-radius: 14px; } }
.pc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.pc-sheet-head .btn-close { padding: 14px; }
.pc-group { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ft-ink-soft); margin: 12px 0 2px; }
.pc-list { list-style: none; margin: 0; padding: 0; }
.pc-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 4px; background: none; border: 0; border-top: 1px solid var(--ft-border); text-align: start; color: var(--ft-ink); text-decoration: none; font: inherit; }
.pc-item i { width: 22px; text-align: center; color: var(--ft-primary); }
.pc-item.text-danger, .pc-item.text-danger i { color: var(--bs-danger, #dc3545); }
.pc-item.on { font-weight: 600; color: var(--ft-primary); justify-content: space-between; }
.pc-danger { margin-top: 10px; }
.pc-note-line { min-height: 1.2em; color: var(--ft-primary); font-size: .88rem; padding: 4px; }
body.pc-lock { overflow: hidden; }

@media (max-width: 767.98px) {
    #person-page .widget-card { padding: 14px; }
    #person-page .section-title { font-size: 1.05rem; margin-block-end: 8px; }
    /* identity header */
    .profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; }
    .profile-photo, .profile-avatar { width: 64px; height: 64px; border-width: 2px; }
    .profile-avatar { font-size: 1.4rem; }
    .profile-title { min-width: 0; }
    .profile-title .page-title { font-size: 1.25rem; line-height: 1.25; overflow-wrap: anywhere; }
    .profile-other-name { font-size: 1rem; overflow-wrap: anywhere; }
    .profile-title .badge { font-size: .72rem; }
    .profile-title p { margin-bottom: .25rem !important; }
    .pc-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
    .pc-actions .btn { min-height: 44px; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
    .pc-actions .pc-more { flex: 0 0 48px; padding: 0; }
    /* sticky strip: mini identity (once scrolled) + tabs */
    .pc-sticky { position: sticky; top: var(--pc-top, 52px); z-index: 1020; background: var(--ft-surface); margin-top: 12px; }
    .pc-mini { display: flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--ft-border); }
    .pc-mini-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: #EFE9DF; font-size: .9rem; }
    .pc-mini-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
    .pc-more { min-height: 44px; min-width: 44px; }
    .profile-tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0; }
    .profile-tabs::-webkit-scrollbar { display: none; }
    .profile-tabs .nav-link { min-height: 44px; padding: 0 14px; display: flex; align-items: center; white-space: nowrap; }
    .pc-all { flex: none; width: 44px; border: 0; border-bottom: 1px solid var(--ft-border); background: var(--ft-surface); color: var(--ft-primary); }
    .pc-tabwrap::before, .pc-tabwrap::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 26px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .15s; }
    .pc-tabwrap::before { inset-inline-start: 0; background: linear-gradient(to right, var(--ft-surface), rgba(255, 255, 255, 0)); }
    .pc-tabwrap::after { inset-inline-end: 44px; background: linear-gradient(to left, var(--ft-surface), rgba(255, 255, 255, 0)); }
    [dir="rtl"] .pc-tabwrap::before { background: linear-gradient(to left, var(--ft-surface), rgba(255, 255, 255, 0)); }
    [dir="rtl"] .pc-tabwrap::after { background: linear-gradient(to right, var(--ft-surface), rgba(255, 255, 255, 0)); }
    .pc-tabwrap.can-start::before, .pc-tabwrap.can-end::after { opacity: 1; }
    .tab-content { padding-top: 12px !important; }
    /* overview */
    .detail-list { display: grid; grid-template-columns: minmax(84px, 34%) minmax(0, 1fr); gap: 8px 12px; align-items: baseline; }
    .detail-list dt { margin: 0; font-size: .8125rem; }
    .detail-list dd { margin: 0; }
    /* family */
    .relation-list > li { border-top: 1px solid var(--ft-border); padding: 2px 0; }
    .relation-list > li:first-child { border-top: 0; }
    .mini-person { min-height: 48px; }
    .mini-icon { width: 40px; height: 40px; flex: none; }
    .mini-photo img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
    .union-block { padding: 10px; }
    .union-block .ms-3.ps-3 { margin-inline-start: .35rem !important; padding-inline-start: .65rem !important; }
    .pc-help { display: none; }
    /* photos, places, documents, history */
    #person-photos .photo-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
    #person-photos .photo-tile { border-radius: 10px; }
    .doc-compact .doc-card { padding: 12px; }
    #pp-list .list-group-item { padding-block: 10px; }
    #hist-list .hist-entry { padding: 10px 0; border-top: 1px solid var(--ft-border); }
}
@media (prefers-reduced-motion: reduce) { .pc-tabwrap::before, .pc-tabwrap::after { transition: none; } }

/* Mobile UX audit: profile history summaries */
.hist-more > summary { cursor: pointer; font-size: .875rem; color: var(--bs-secondary-color); padding: .25rem 0; min-height: 32px; }

/* ===== Mobile UX audit, Phase 1: narrow-screen reliability ===== */
@media (max-width: 767.98px) {
  /* Directory bulk-select: 44x44 hit area around a normal-looking tick box */
  .mu-pick { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  .mu-pick .mu-check { width: 1.3rem; height: 1.3rem; margin: 0; }

  /* Selects and long option text never push the page wider than the screen */
  .form-select, .widget-card select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
  .page-content, .admin-page, .widget-card, .row > * { min-width: 0; }

  /* Admin: tab strip scrolls inside itself; section switcher wraps */
  .admin-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs .nav-link { white-space: nowrap; }
  #ua-views { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 2px; }
  #ua-views > * { flex: 0 0 auto; }

  /* Users: one card-like row per account instead of a wide table */
  .ua-table, .ua-table tbody { display: block; width: 100%; }
  .ua-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ua-table tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 4px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--bs-border-color); }
  .ua-table td { display: block; border: 0; padding: 2px 0; min-width: 0; background: transparent; box-shadow: none; }
  .ua-table td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; text-align: center; }
  .ua-table td:nth-child(2) { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; }
  .ua-table td:nth-child(7) { grid-column: 2; grid-row: 2; }
  .ua-table td:nth-child(8) { grid-column: 3; grid-row: 1 / span 2; }
  .ua-table td[colspan] { grid-column: 1 / -1; }
  .ua-table [dir="ltr"] { overflow-wrap: anywhere; }

  /* Photo Import: filter buttons wrap, search fills the row */
  #pi-filters { flex-wrap: wrap; max-width: 100%; gap: 4px; }
  #pi-filters .btn { flex: 1 1 auto; border-radius: var(--bs-border-radius) !important; }
  #pi-search { width: 100% !important; max-width: none !important; }
  #pi-stats > * { min-width: 0; }
}
@media (pointer: coarse) {
  .mu-pick { min-width: 44px; min-height: 44px; justify-content: center; }
}

/* ===== Mobile UX audit, Phase 2: Statistics topics ===== */
.stat-emptyline { margin: 0 0 .5rem; font-size: .9rem; }
.stat-topics { display: none; }
@media (max-width: 767.98px) {
  .stat-topics { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; padding-bottom: 2px; position: sticky; top: var(--pc-top, 56px); z-index: 5; background: var(--ft-bg, #faf7f2); }
  .stat-topics::-webkit-scrollbar { display: none; }
  .stat-topic-btn { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 1px solid var(--ft-border); border-radius: 999px; background: var(--ft-card, #fff); color: var(--ft-ink, inherit); font-size: .9rem; white-space: nowrap; }
  .stat-topic-btn.active { background: var(--ft-primary, #1f5f57); border-color: var(--ft-primary, #1f5f57); color: #fff; }
  .stat-topic { display: none; }
  .stat-topic.is-active { display: block; }
}

/* ===== Mobile UX audit, Phase 2: audit trail summary rows ===== */
@media (max-width: 767.98px) {
  .ua-audit, .ua-audit tbody { display: block; width: 100%; }
  .ua-audit thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ua-audit tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--bs-border-color); }
  .ua-audit td { display: block; border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; background: transparent; box-shadow: none; }
  .ua-audit td:nth-child(1) { grid-column: 1 / -1; font-size: .85rem; color: var(--bs-secondary-color); display: flex; gap: 12px; justify-content: space-between; align-items: center; min-height: 32px; }
  .ua-audit td:nth-child(2) { font-weight: 600; }
  .ua-audit td:nth-child(3), .ua-audit td:nth-child(4) { font-size: .9rem; }
  .ua-audit td:nth-child(5), .ua-audit td:nth-child(6) { display: none; grid-column: 1 / -1; padding-top: 4px; }
  .ua-audit tr.ua-au-open td:nth-child(5), .ua-audit tr.ua-au-open td:nth-child(6) { display: block; }
  .ua-au-toggle { min-height: 32px; }
}

/* ===== Mobile UX audit, Phase 2: album management menu ===== */
.d-contents { display: contents; }
@media (max-width: 767.98px) {
  .album-manage { display: none; flex-basis: 100%; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
  .album-manage.is-open { display: flex; }
}

/* ===== Mobile UX audit, Phase 2: optional person fields ===== */
.pf-more > summary { cursor: pointer; padding: .5rem 0; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--ft-primary, #1f5f57); }
@media (min-width: 768px) { .pf-more > summary { min-height: 0; padding: .25rem 0; } }

/* ===== Mobile UX audit, Phase 2: family link management ===== */
@media (max-width: 767.98px) {
  #tab-family:not(.pc-manage) .js-remove-link,
  #tab-family:not(.pc-manage) .js-edit-union,
  #tab-family:not(.pc-manage) .js-remove-union { display: none; }
  #pc-manage-toggle[aria-pressed="true"] { background: var(--ft-primary, #1f5f57); border-color: var(--ft-primary, #1f5f57); color: #fff; }
}

/* ===== Mobile UX audit, Phase 2: Who is this? group headings ===== */
.pid-album-h { font-weight: 600; font-size: .95rem; padding-top: .75rem; position: sticky; top: var(--pc-top, 56px); background: var(--ft-bg, #faf7f2); z-index: 2; }

/* ===== Mobile UX audit, Phase 2: foldable maintenance sections ===== */
.fold-h { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-bottom: 0; }
.fold-h::after { content: ''; width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; flex: none; }
.fold-sec:not(.is-folded) > .fold-h { margin-bottom: .5rem; }
.fold-sec:not(.is-folded) > .fold-h::after { transform: rotate(225deg); }
.fold-sec.is-folded > :not(.fold-h) { display: none; }
@media (prefers-reduced-motion: reduce) { .fold-h::after { transition: none; } }

/* ===== Mobile UX audit, Phase 2: Data review rows ===== */
@media (max-width: 767.98px) {
  #issue-table, #issue-table tbody { display: block; width: 100%; }
  #issue-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #issue-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--bs-border-color); }
  #issue-table td { display: block; border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; background: transparent; box-shadow: none; }
  #issue-table td:nth-child(1) { grid-column: 1 / -1; font-weight: 600; }
  #issue-table td:nth-child(2) { grid-column: 1; font-size: .9rem; }
  #issue-table td:nth-child(3) { grid-column: 1; font-size: .85rem; color: var(--bs-secondary-color); }
  #issue-table td:nth-child(4) { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  #issue-table tr.ir-same td:nth-child(1) { display: none; }
}

/* ===== Mobile UX audit, Phase 3: photo viewer shows first, edits on request ===== */
#photoModal .ph-edit-only { display: none !important; }
#photoModal.ph-editing .ph-edit-only { display: revert !important; }
#photoModal.ph-editing .row.ph-edit-only { display: flex !important; }
#photoModal .pe-off { display: none; }
#photoModal.ph-editing .pe-on { display: none; }
#photoModal.ph-editing .pe-off { display: inline; }

/* ===== Mobile UX audit, Phase 3: matching groups show a summary, evidence on demand ===== */
.gi-ev > summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; font-size: .9rem; color: var(--bs-secondary-color); }

/* ===== Mobile UX audit, Phase 3: fuller identity on the tree when zoomed in or selected ===== */
.tc-sub { display: none; font-size: .68rem; color: var(--ft-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tree-world[data-zoom="near"] .tc-sub, .tree-card.is-selected .tc-sub { display: block; }
.tree-world[data-zoom="near"] .tc-name, .tree-card.is-selected .tc-name { -webkit-line-clamp: 1; }

/* ===== Mobile UX audit, Phase 3: review queue rows ===== */
@media (max-width: 767.98px) {
  .gi-q-reasons:not(.is-open) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .gi-q-reasons { cursor: pointer; }
}

/* ===== Mobile UX audit, Phase 4: consistency, touch targets, motion ===== */
@media (pointer: coarse) {
  .btn-sm { min-height: 40px; }
  .btn-sm:not(.btn-pill) { min-width: 40px; }
  .nav-tabs .nav-link, .nav-pills .nav-link { min-height: 44px; display: inline-flex; align-items: center; }
  summary { min-height: 40px; }
}
/* Shared visible focus for the controls this audit added */
.pc-item:focus-visible, .stat-topic-btn:focus-visible, .fold-h:focus-visible, .gi-q-reasons:focus-visible, .pf-more > summary:focus-visible, .hist-more > summary:focus-visible, .gi-ev > summary:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .pc-sheet, .pc-backdrop, .pc-mini, .stat-topic-btn, .tc-btn { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto !important; }
}

/* Text links use the brand teal (about 7:1 on the cream background) instead of Bootstrap's default blue (4.2:1, below AA). */
:root { --bs-link-color: #1F5F57; --bs-link-color-rgb: 31, 95, 87; --bs-link-hover-color: #174842; --bs-link-hover-color-rgb: 23, 72, 66; }

/* Directory: why a result matched when it is not in the name */
.dm-match { align-self: flex-start; max-width: 100%; font-size: .78rem; color: var(--ft-accent-text, #8F4A26); }

/* ===== Photo Import: Upload / Review switch on phones ===== */
.pi-switch { display: flex; gap: 6px; margin: 0 0 12px; }
.pi-switch-btn { flex: 1 1 0; min-height: 44px; border: 1px solid var(--ft-border); border-radius: 999px; background: var(--ft-card, #fff); color: var(--ft-ink, inherit); font-weight: 600; }
.pi-switch-btn.active { background: var(--ft-primary, #1f5f57); border-color: var(--ft-primary, #1f5f57); color: #fff; }
.pi-switch-btn:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: 2px; }
@media (max-width: 767.98px) {
  [data-pi-view].pi-view-off { display: none; }
}

/* Article review: filter people by review status */
.gi-pfilter { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 8px; padding-bottom: 2px; scrollbar-width: none; }
.gi-pfilter::-webkit-scrollbar { display: none; }
.gi-pfilter .btn { flex: 0 0 auto; border-radius: 999px; }
.gi-pfilter .btn.active { background: var(--ft-primary, #1f5f57); border-color: var(--ft-primary, #1f5f57); color: #fff; }

/* One-person-at-a-time article review */
.gi-focusbar .form-check{padding-inline-start:0}
@media (max-width:767.98px){.gi-focusbar .btn{min-height:44px}.gi-focusbar{position:sticky;top:0;z-index:2;background:var(--bs-body-bg);padding:.4rem 0}}

/* Sources compaction: long source lists fold into a details row */
details.ev-more>summary{cursor:pointer;color:var(--bs-link-color);list-style-position:inside}
@media (max-width:767.98px){details.ev-more>summary{min-height:44px;display:flex;align-items:center}}

/* Page navigation (Back / Forward / Refresh / Home) in the menu, and the installed-app Back button */
.mnav-tools { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; padding: .5rem calc(1rem + env(safe-area-inset-right, 0px)) 0 calc(1rem + env(safe-area-inset-left, 0px)); }
.mnav-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 52px; border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-body-bg); color: var(--bs-body-color); font-size: .75rem; padding: .25rem; }
.mnav-tool:disabled { opacity: .45; }
.mnav-tool:focus-visible { outline: 3px solid var(--bs-link-color); outline-offset: 2px; }
.appnav-hback { flex: none; width: 42px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; margin-inline-end: .5rem; }
html.appnav-refreshing body { opacity: .6; transition: opacity .15s; }

/* Photo viewer (profile Photos tab and portrait) */
button.photo-tile { width: 100%; }
button.photo-tile:focus-visible, .profile-photo-btn:focus-visible { outline: 3px solid var(--bs-link-color); outline-offset: 2px; }
.profile-photo-btn { flex: 0 0 auto; padding: 0; border: 0; background: none; border-radius: 50%; cursor: zoom-in; line-height: 0; }
html.pv-open, html.pv-open body { overflow: hidden; overscroll-behavior: none; }
.pv { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: #000; color: #fff; height: 100vh; height: 100dvh; }
.pv[hidden] { display: none; }
.pv-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 56px;
    padding: calc(.25rem + env(safe-area-inset-top, 0px)) calc(.5rem + env(safe-area-inset-right, 0px)) .25rem calc(.75rem + env(safe-area-inset-left, 0px)); }
.pv-count { font-size: .95rem; }
.pv-btn { width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 1.1rem; padding: 0; }
.pv-btn:hover { background: rgba(255,255,255,.28); }
.pv-btn:focus-visible, .pv a:focus-visible, .pv .btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pv-btn:disabled { opacity: .35; }
.pv-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; }
.pv-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform-origin: center; will-change: transform; -webkit-touch-callout: none; transition: opacity .15s; }
.pv-img.pv-pre { opacity: .85; }
.pv-stage.pv-zoomed { cursor: grab; }
.pv-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.pv-prev { inset-inline-start: calc(.5rem + env(safe-area-inset-left, 0px)); }
.pv-next { inset-inline-end: calc(.5rem + env(safe-area-inset-right, 0px)); }
.pv-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; background: rgba(0,0,0,.45); pointer-events: none; }
.pv-state[hidden] { display: none; }
.pv-error { pointer-events: auto; background: rgba(0,0,0,.8); }
.pv-info { flex: none; max-height: 38vh; overflow-y: auto; padding: .5rem calc(.75rem + env(safe-area-inset-right, 0px)) calc(.75rem + env(safe-area-inset-bottom, 0px)) calc(.75rem + env(safe-area-inset-left, 0px)); background: rgba(0,0,0,.6); }
.pv-caption { margin: 0 0 .5rem; font-size: .95rem; }
.pv-caption[hidden] { display: none; }
.pv-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pv-actions .btn { min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; }
.pv-extra { margin-top: .5rem; }
.pv-h { font-size: .8rem; opacity: .8; margin-bottom: .25rem; }
.pv-chip { display: inline-block; margin: 0 .25rem .35rem 0; padding: .5rem .75rem; min-height: 44px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; text-decoration: none; }
[dir="rtl"] .pv-chip { margin: 0 0 .35rem .25rem; }
@media (max-height: 480px) { .pv-info { max-height: 30vh; } .pv-bar { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { .pv-img { transition: none; } }
.pv [hidden] { display: none !important; }

/* ===== Immersive Family Explorer 2.0 (Pages/Tree/Explore, wwwroot/js/explorer.js) =====
   Focus-based: one focused person, the immediate family around them and extended relatives on request.
   Three card variants share one slot size (176 x 84): .ix-v-focus (scaled up), .ix-v-rel, .ix-v-cmp (scaled down). */
body.ix-ws { overflow: hidden; overscroll-behavior: none; }
.ix { --ix-bg: #F3F1EC; --ix-card: #FFFFFF; --ix-ink: #26231F; --ix-soft: #6A645C; --ix-line: #B4ABA0; --ix-accent: #B5653A; --ix-primary: #1F5F57; --ix-glass: rgba(250, 248, 244, .94); --ix-male: #4A82AD; --ix-female: #B5577F; --ix-unk: #948B80; --ix-hair: rgba(38, 35, 31, .12);
    position: fixed; inset: 0; z-index: 1040; height: 100vh; height: 100dvh; overflow: hidden; background: var(--ix-bg); color: var(--ix-ink); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
[data-bs-theme="dark"] .ix { --ix-bg: #1a1816; --ix-card: #2a2723; --ix-ink: #f1ede6; --ix-soft: #b8b0a5; --ix-line: #7d756b; --ix-glass: rgba(36, 33, 30, .94); --ix-male: #74add7; --ix-female: #e292b6; --ix-unk: #a69d92; --ix-hair: rgba(255, 255, 255, .14); }
.ix [hidden] { display: none !important; }
.ix button { font: inherit; color: inherit; }
.ix-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.ix-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* top bar: Back, name of the focused person, Reset, Search, More */
.ix-bar { position: absolute; inset-inline: 0; top: 0; z-index: 30; display: flex; align-items: center; gap: 6px; padding: calc(6px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) 6px calc(8px + env(safe-area-inset-left, 0px)); background: var(--ix-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-block-end: 1px solid var(--ix-hair); }
.ix-title { flex: 1 1 auto; min-width: 0; text-align: center; font-weight: 700; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-btn { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--ix-hair); background: var(--ix-card); color: var(--ix-ink); cursor: pointer; padding: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.ix-btn:hover:not(:disabled) { border-color: var(--ix-primary); color: var(--ix-primary); }
.ix-btn:disabled { opacity: .4; cursor: default; }
.ix button:focus-visible, .ix a:focus-visible, .ix [tabindex]:focus-visible { outline: 3px solid var(--ix-accent); outline-offset: 2px; }
.ix[data-rtl="true"] .ix-chev { transform: scaleX(-1); }

/* canvas: a quiet background, no grid */
.ix-viewport { position: absolute; inset: 0; touch-action: none; cursor: grab; overflow: hidden; outline: none; }
.ix-viewport.ix-dragging { cursor: grabbing; }
.ix-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(60, 50, 40, .05)); }
[data-bs-theme="dark"] .ix-bg { background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%); }
.ix-cam { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.ix-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.ix-edge { fill: none; stroke: var(--ix-line); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.ix-edge.dashed, g.dashed line { stroke-dasharray: 5 6; }
g.ix-edge line { stroke: var(--ix-accent); stroke-width: 2.2; fill: none; }
g.ix-edge.dashed line { stroke: var(--ix-line); }
.ix-heart { fill: var(--ix-accent); font-size: 16px; paint-order: stroke; stroke: var(--ix-bg); stroke-width: 4px; }
g.ix-edge.dashed .ix-heart { fill: var(--ix-soft); }
.ix-junction { fill: var(--ix-line); }
.ix-junction.dim { opacity: .18; }
.ix-edge.on { stroke: var(--ix-primary); stroke-width: 4; opacity: 1; stroke-dasharray: none; }
g.ix-edge.on line { stroke: var(--ix-primary); stroke-width: 4; stroke-dasharray: none; }
.ix-edge.dim { opacity: .14; }

/* cards */
.ix-cards { position: absolute; left: 0; top: 0; }
.ix-card { position: absolute; left: 0; top: 0; width: 176px; height: 84px; transition: transform .5s cubic-bezier(.3, .0, .2, 1), opacity .3s ease; will-change: transform, opacity; }
.ix-card.ix-in, .ix-card.ix-out { opacity: 0; }
.ix-card.ix-out { pointer-events: none; }
.ix-card.ix-dim { opacity: .28; }
.ix-main { width: 100%; height: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--ix-unk); border-radius: 16px; background: var(--ix-card); color: var(--ix-ink); text-align: start; cursor: pointer; box-shadow: 0 1px 2px rgba(40, 30, 20, .1), 0 6px 16px rgba(40, 30, 20, .1); transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
.ix-g-M .ix-main { border-color: color-mix(in srgb, var(--ix-male) 80%, var(--ix-card)); }
.ix-g-F .ix-main { border-color: color-mix(in srgb, var(--ix-female) 80%, var(--ix-card)); }
.ix-main:hover { box-shadow: 0 2px 4px rgba(40, 30, 20, .14), 0 12px 26px rgba(40, 30, 20, .18); }
.ix-face { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: rgba(0, 0, 0, .07); display: inline-flex; align-items: center; justify-content: center; color: var(--ix-soft); }
.ix-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ix-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.ix-rl { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ix-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-rl:empty { display: none; }
.ix-nm { font-weight: 700; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; word-break: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ix-yr { font-size: 11.5px; color: var(--ix-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-yr:empty { display: none; }
.ix-dead .ix-face { filter: grayscale(.55); }
.ix-dead .ix-main { background: color-mix(in srgb, var(--ix-card) 93%, #888); }
.ix-ph .ix-main { border-style: dashed; opacity: .85; }
/* focused: larger, warm ring */
.ix-v-focus .ix-main { border-color: var(--ix-accent); gap: 9px; padding: 8px 9px; box-shadow: 0 0 0 5px rgba(181, 101, 58, .22), 0 14px 34px rgba(40, 30, 20, .26); }
.ix-v-focus .ix-face { width: 46px; height: 46px; }
.ix-v-focus .ix-nm { font-size: 14px; line-height: 1.2; -webkit-line-clamp: 3; }
/* compact: extended relatives */
.ix-v-cmp .ix-main { padding: 6px 9px; gap: 8px; box-shadow: 0 1px 2px rgba(40, 30, 20, .1), 0 3px 8px rgba(40, 30, 20, .08); }
.ix-v-cmp .ix-face { width: 34px; height: 34px; font-size: .85rem; }
.ix-v-cmp .ix-nm { font-size: 13.5px; }
.ix-v-cmp .ix-yr, .ix-v-cmp .ix-rl { display: none; }
.ix-sel .ix-main { box-shadow: 0 0 0 4px rgba(31, 95, 87, .4), 0 10px 24px rgba(40, 30, 20, .22); border-color: var(--ix-primary); }
.ix-v-focus.ix-sel .ix-main { box-shadow: 0 0 0 5px rgba(181, 101, 58, .3), 0 0 0 9px rgba(31, 95, 87, .28), 0 14px 34px rgba(40, 30, 20, .26); border-color: var(--ix-accent); }
.ix-hl .ix-main, .ix-path .ix-main { border-color: var(--ix-primary); box-shadow: 0 0 0 4px rgba(31, 95, 87, .32), 0 10px 22px rgba(40, 30, 20, .2); }
.ix-main:focus-visible { outline: 3px solid var(--ix-primary); outline-offset: 3px; }
/* the small "+3" under a card: show that person's own relatives */
.ix-exp { position: absolute; inset-inline-start: 50%; bottom: -13px; transform: translateX(-50%); min-width: 34px; height: 24px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 2px solid var(--ix-bg); background: var(--ix-primary); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1; }
[dir="rtl"] .ix-exp, .ix[data-rtl="true"] .ix-exp { transform: translateX(50%); }
.ix-exp::after { content: ""; position: absolute; inset: -10px -8px; }
.ix-exp.open { background: var(--ix-card); color: var(--ix-primary); border-color: var(--ix-primary); }
.ix-exp-sample { display: inline-block; min-width: 30px; text-align: center; padding: 1px 7px; border-radius: 10px; background: var(--ix-primary); color: #fff; font-size: 11px; font-weight: 700; }

/* navigator: Ancestors / Family / Descendants (shown only where the data goes further) */
.ix-nav { position: absolute; inset-inline: 0; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 22; display: flex; gap: 8px; padding: 2px 10px; overflow-x: auto; scrollbar-width: none; pointer-events: none; touch-action: pan-x; }
.ix-nav::-webkit-scrollbar { display: none; }
.ix-nav > :first-child { margin-inline-start: auto; }
.ix-nav > :last-child { margin-inline-end: auto; }
.ix-nbtn { pointer-events: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px; border-radius: 20px; border: 1px solid var(--ix-hair); background: var(--ix-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ix-ink); cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.ix-nbtn:hover { border-color: var(--ix-primary); color: var(--ix-primary); }
.ix-nbtn i { color: var(--ix-primary); }
.ix-nlab { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; font-size: 13px; font-weight: 600; text-align: start; }
.ix-nlab small { font-size: 11px; font-weight: 500; color: var(--ix-soft); }
.ix-chips { position: absolute; inset-inline: 0; top: calc(108px + env(safe-area-inset-top, 0px)); z-index: 21; display: flex; justify-content: center; pointer-events: none; }
.ix-chip { pointer-events: auto; min-height: 36px; padding: 4px 14px; border-radius: 18px; border: 1px solid var(--ix-accent); background: var(--ix-card); color: var(--ix-accent); font-weight: 600; font-size: 13px; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }

.ix-loading { position: absolute; left: 50%; top: calc(112px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 50; background: var(--ix-glass); padding: 8px 16px; border-radius: 20px; font-size: .9rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
.ix-error { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 50; background: var(--ix-card); padding: 18px 22px; border-radius: 14px; text-align: center; max-width: min(90vw, 360px); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.ix-toast { position: absolute; left: 50%; bottom: calc(190px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 55; max-width: 90vw; background: rgba(30, 26, 22, .92); color: #fff; padding: 9px 16px; border-radius: 20px; font-size: .9rem; text-align: center; pointer-events: none; }

/* guided story */
.ix-jbar { position: absolute; inset-inline: 0; bottom: 0; z-index: 28; background: var(--ix-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--ix-hair); padding: 0 calc(14px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px)); box-shadow: 0 -6px 20px rgba(0, 0, 0, .12); touch-action: auto; max-height: 58dvh; display: flex; flex-direction: column; border-radius: 18px 18px 0 0; }
.ix-jprog { height: 4px; margin: 0 -14px 10px; background: var(--ix-hair); border-radius: 18px 18px 0 0; overflow: hidden; flex: none; }
.ix-jprog span { display: block; height: 100%; width: 0; background: var(--ix-accent); transition: width .35s ease; }
.ix-jstory { display: flex; gap: 12px; align-items: flex-start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-user-select: text; user-select: text; padding-bottom: 4px; }
.ix-jfaces { flex: none; display: flex; flex-wrap: wrap; gap: 8px; max-width: 152px; justify-content: center; }
.ix-jface { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; }
.ix-jportrait { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ix-unk); background: rgba(0, 0, 0, .07); display: flex; align-items: center; justify-content: center; color: var(--ix-soft); }
.ix-jportrait.ix-g-M { border-color: var(--ix-male); } .ix-jportrait.ix-g-F { border-color: var(--ix-female); }
.ix-jportrait img { width: 100%; height: 100%; object-fit: cover; }
.ix-jfname { font-size: 11.5px; line-height: 1.2; text-align: center; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-jmore { align-self: center; font-weight: 700; color: var(--ix-soft); }
.ix-jbody { min-width: 0; flex: 1 1 auto; }
.ix-jtitle { font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.ix-jtext { font-size: .95rem; line-height: 1.45; margin-top: 2px; }
.ix-jbio { font-size: .88rem; color: var(--ix-soft); margin-top: 6px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ix-jbio:empty { display: none; }
.ix-jbio.empty { font-style: italic; }
.ix-jphotos { display: flex; gap: 6px; margin-top: 8px; }
.ix-jphotos:empty { display: none; }
.ix-jph { width: 58px; height: 58px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, .07); cursor: pointer; }
.ix-jph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ix-jlife { margin-top: 8px; min-height: 36px; }
.ix-jctl { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 8px; }
.ix-jcount { margin-inline-end: auto; font-size: .85rem; color: var(--ix-soft); }
.ix-jctl .ix-btn:last-child { margin-inline-start: auto; }

/* the small person card */
.ix-panel { position: absolute; z-index: 25; background: var(--ix-card); color: var(--ix-ink); display: flex; flex-direction: column; box-shadow: 0 -4px 24px rgba(0, 0, 0, .2); touch-action: auto; -webkit-user-select: text; user-select: text; }
.ix-journeying .ix-panel { z-index: 32; }
.ix-grab { flex: none; height: 28px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.ix-grab span { width: 46px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .25); }
.ix-panel-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); touch-action: pan-y; }
.ix-panel-close { position: absolute; inset-inline-end: 8px; top: -4px; width: 36px; height: 36px; z-index: 2; }
.ix-phead { display: flex; gap: 12px; align-items: center; padding-inline-end: 40px; }
.ix-pface { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: rgba(0, 0, 0, .07); display: flex; align-items: center; justify-content: center; color: var(--ix-soft); font-size: 1.5rem; border: 2px solid var(--ix-hair); }
.ix-pface img { width: 100%; height: 100%; object-fit: cover; }
.ix-pinfo { min-width: 0; }
.ix-pinfo h2 { font-size: 1.1rem; margin: 0; line-height: 1.25; overflow-wrap: anywhere; }
.ix-prel { font-size: .85rem; color: var(--ix-accent); font-weight: 700; margin-top: 1px; }
.ix-prel:empty { display: none; }
.ix-pyears { font-size: .85rem; color: var(--ix-soft); }
.ix-actions { display: flex; gap: 8px; margin: 12px 0 4px; align-items: center; }
.ix-actions .btn { min-height: 42px; }
.ix-actions .ix-life-btn { flex: 1 1 auto; }
.ix-actions .ix-kebab { flex: none; width: 46px; }
.ix-pmenu { display: flex; flex-direction: column; padding: 4px; margin: 6px 0; border: 1px solid var(--ix-hair); border-radius: 12px; background: var(--ix-card); }
#ix-life { margin-top: 8px; }
.ix-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.ix-tab { flex: none; border: 1px solid var(--ix-hair); background: transparent; border-radius: 18px; padding: 6px 14px; font-size: .85rem; cursor: pointer; min-height: 36px; }
.ix-tab[aria-selected="true"] { background: var(--ix-primary); color: #fff; border-color: var(--ix-primary); }
.ix-tabbody { padding-top: 8px; font-size: .92rem; }
.ix-tabnote { color: var(--ix-soft); padding: 8px 0; }
.ix-sec h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ix-soft); margin: 10px 0 2px; }
.ix-sec p { margin: 0 0 6px; white-space: pre-wrap; }
.ix-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ix-photo { padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: rgba(0, 0, 0, .07); cursor: pointer; }
.ix-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ix-tl, .ix-list-plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ix-tl-y { display: inline-block; min-width: 3.2em; font-weight: 700; color: var(--ix-primary); }
.ix-pl-l { font-weight: 700; color: var(--ix-soft); }

.ix-sheet { position: absolute; z-index: 40; inset: 0; background: var(--ix-card); padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 12px; overflow-y: auto; touch-action: pan-y; -webkit-user-select: text; user-select: text; }
.ix-sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ix-sheet-head .form-control { flex: 1; min-height: 44px; font-size: 16px; }
.ix-sheet-note { color: var(--ix-primary); font-weight: 600; margin: 4px 2px 8px; }
.ix-results { list-style: none; padding: 0; margin: 0; }
.ix-res { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: start; padding: 10px 12px; min-height: 48px; border: 0; border-block-end: 1px solid var(--ix-hair); background: transparent; cursor: pointer; }
.ix-res:hover { background: rgba(31, 95, 87, .08); }
.ix-res-nm { font-weight: 600; }
.ix-res-yr, .ix-res-none { font-size: .82rem; color: var(--ix-soft); }
.ix-res-none { padding: 12px; list-style: none; }
.ix-list { position: absolute; z-index: 40; inset: 0; background: var(--ix-card); padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 20px; overflow-y: auto; touch-action: pan-y; -webkit-user-select: text; user-select: text; }
.ix-list h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ix-primary); margin: 14px 0 4px; }
.ix-list ul { list-style: none; padding: 0; margin: 0; }
.ix-menu { position: absolute; z-index: 45; background: var(--ix-card); display: flex; flex-direction: column; padding: 6px; box-shadow: 0 8px 30px rgba(0, 0, 0, .3); touch-action: auto; overflow-y: auto; }
.ix-mi { display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-height: 46px; border: 0; background: transparent; border-radius: 10px; text-align: start; text-decoration: none; color: var(--ix-ink); cursor: pointer; width: 100%; }
.ix-mi i { width: 20px; text-align: center; color: var(--ix-primary); }
.ix-mi:hover:not(:disabled) { background: rgba(31, 95, 87, .1); }
.ix-mi:disabled { opacity: .45; cursor: default; }
.ix-sep { height: 1px; margin: 4px 8px; background: var(--ix-hair); }
.ix-legend { position: absolute; z-index: 35; top: calc(108px + env(safe-area-inset-top, 0px)); inset-inline-start: 12px; background: var(--ix-card); padding: 10px 14px; border-radius: 12px; font-size: .85rem; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); max-width: 230px; }
.ix-lg { display: inline-block; width: 26px; height: 0; border-top: 3px solid var(--ix-line); vertical-align: middle; }
.ix-lg.dashed { border-top-style: dashed; }
.ix-lg-h { color: var(--ix-accent); }
.ix-intro { position: absolute; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ix-intro-card { background: var(--ix-card); border-radius: 18px; padding: 22px; max-width: 400px; width: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.ix-intro-card h2 { font-size: 1.2rem; margin: 0 0 10px; }
.ix-intro-card ul { padding-inline-start: 1.2rem; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }

/* phone: bottom sheet for the person, story card pinned to the bottom */
@media (max-width: 767.98px) {
    .ix-panel { inset-inline: 0; bottom: 0; border-radius: 20px 20px 0 0; transition: height .22s ease; }
    .ix-panel[data-state="peek"] { height: calc(164px + env(safe-area-inset-bottom, 0px)); }
    .ix-panel[data-state="half"] { height: 52vh; height: 52dvh; }
    .ix-panel[data-state="full"] { height: 90vh; height: 90dvh; }
    .ix-panel.ix-dragging { transition: none; }
    .ix-menu { inset-inline: 0; bottom: 0; border-radius: 18px 18px 0 0; max-height: 80dvh; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    .ix-title { font-size: .98rem; }
    .ix-nbtn { min-height: 38px; padding: 3px 12px; }
    .ix-jfaces { max-width: 136px; }
    .ix-jportrait { width: 52px; height: 52px; }
    .ix-jface { width: 56px; }
    .ix-jfname { max-width: 56px; }
}
/* computer: compact floating card, bottom corner, grows only when "Explore their life" is opened */
@media (min-width: 768px) {
    .ix-grab { display: none; }
    .ix-panel { inset-inline-start: 16px; bottom: 16px; width: 352px; max-height: min(74dvh, 680px); border-radius: 18px; height: auto !important; box-shadow: 0 10px 34px rgba(0, 0, 0, .24); }
    .ix-panel-scroll { padding-top: 16px; }
    .ix-panel-close { top: 8px; }
    .ix-journeying .ix-panel { bottom: 214px; max-height: calc(100dvh - 330px); }
    .ix-menu { top: 62px; inset-inline-end: 12px; width: 300px; border-radius: 14px; max-height: 80vh; }
    .ix-sheet { inset: 66px auto auto 50%; transform: translateX(-50%); width: min(520px, 92vw); max-height: 70vh; border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .3); }
    .ix-list { inset: 66px 0 0 0; }
    .ix-toast { bottom: 90px; }
    .ix-jbar { inset-inline: 0; margin-inline: auto; width: min(780px, calc(100% - 32px)); bottom: 16px; border-radius: 18px; }
    .ix-jprog { border-radius: 18px 18px 0 0; }
}
/* a phone held sideways: slimmer chrome, the person card moves to the far side so the family stays in view */
@media (max-height: 480px) and (min-width: 768px) {
    .ix-bar { padding-top: calc(3px + env(safe-area-inset-top, 0px)); padding-bottom: 3px; }
    .ix-btn { width: 38px; height: 38px; }
    .ix-nav { top: calc(46px + env(safe-area-inset-top, 0px)); }
    .ix-nbtn { min-height: 32px; padding: 2px 11px; }
    .ix-nlab small { display: none; }
    .ix-chips { top: calc(84px + env(safe-area-inset-top, 0px)); }
    .ix-panel, .ix-journeying .ix-panel { inset-inline-start: auto; inset-inline-end: calc(8px + env(safe-area-inset-right, 0px)); bottom: 8px; width: 300px; max-height: calc(100dvh - 96px); }
    .ix-pface { width: 48px; height: 48px; }
    .ix-jbar { max-height: 72dvh; width: min(560px, calc(100% - 330px)); inset-inline-start: calc(8px + env(safe-area-inset-left, 0px)); margin-inline: 0; bottom: 8px; }
    .ix-jfaces { max-width: 120px; }
    .ix-menu { top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .ix-card, .ix-panel, .ix-jprog span, .ix-main { transition: none !important; }
}

/* =====================================================================================================================
   Isa Family Journey 3.0 (Pages/Tree/_Journey.cshtml, wwwroot/js/journey.js). Class prefix .jr-
   A person-centred scene: one large portrait, the family grouped around it. No canvas, no connector lines.
   ===================================================================================================================== */
.jr { --jr-bg: #F4EFE6; --jr-paper: #FBF8F2; --jr-ink: #2A2520; --jr-soft: #6B6256; --jr-teal: #1F5F57; --jr-teal-d: #12423D; --jr-gold: #B88A44; --jr-gold-l: #E2C282; --jr-hair: rgba(42, 37, 32, .13); --jr-shadow: 0 18px 40px rgba(70, 48, 14, .22); --jr-dx: 28px;
    position: fixed; inset: 0; z-index: 1040; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--jr-bg); color: var(--jr-ink); -webkit-tap-highlight-color: transparent;
    font-family: 'Iowan Old Style', 'Palatino Linotype', 'Noto Naskh Arabic', Georgia, serif; }
[data-bs-theme="dark"] .jr { --jr-bg: #1B1916; --jr-paper: #26231F; --jr-ink: #F1EBE0; --jr-soft: #B9AF9F; --jr-teal: #67C3B6; --jr-hair: rgba(255, 255, 255, .14); --jr-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.jr[data-rtl="true"] { --jr-dx: -28px; }
.jr [hidden] { display: none !important; }
.jr button { font: inherit; color: inherit; }
.jr-lock .jr-main { overflow: hidden; }
.jr :focus-visible { outline: 3px solid var(--jr-teal); outline-offset: 2px; }
.jr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jr-gate { margin: auto; text-align: center; padding: 24px; }
.jr[data-rtl="true"] .jr-chev { transform: scaleX(-1); }
.jr :is(.jr-bar, .jr-sh, .jr-rl, .jr-yr, .jr-btn, .jr-chip, .jr-more, .jr-meta, .jr-kin, .jr-arrive, .jr-menu, .jr-search, .jr-eyebrow, .jr-lnav, .jr-soft, .jr-empty, .jr-jcount, .jr-loading, .jr-error, .jr-toast, .jr-years, .jr-places, .jr-links, .jr-facts, .jr-albums, .jr-crumb, .jr-mi) { font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic', sans-serif; }

/* top bar: back, the trail of people visited, search, menu */
.jr-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 12px) 8px calc(env(safe-area-inset-left, 0px) + 12px); min-height: 56px; }
.jr-ib { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--jr-teal); cursor: pointer; font-size: 17px; }
.jr-ib:hover { background: rgba(31, 95, 87, .1); }
.jr-ib-on-dark { color: #F6F0E4; }
.jr-ib-on-dark:hover { background: rgba(255, 255, 255, .12); }
.jr-trail { flex: 1; min-width: 0; }
.jr-trail ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px); mask-image: linear-gradient(to right, transparent 0, #000 14px); }
.jr[data-rtl="true"] .jr-trail ol { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 14px); mask-image: linear-gradient(to left, transparent 0, #000 14px); }
.jr-trail ol::-webkit-scrollbar { display: none; }
.jr-trail li { flex: none; display: inline-flex; align-items: center; }
.jr-trail li + li::before { content: '›'; color: var(--jr-gold); margin-inline: 2px; font-size: 18px; }
.jr[data-rtl="true"] .jr-trail li + li::before { content: '‹'; }
.jr-crumb { border: 0; background: transparent; padding: 10px 6px; min-height: 40px; font-size: 14px; color: var(--jr-soft); cursor: pointer; border-radius: 8px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
.jr-crumb:hover { color: var(--jr-teal); }
.jr-crumb.is-cur { color: var(--jr-ink); font-weight: 600; cursor: default; }

/* the scene */
.jr-main { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 calc(env(safe-area-inset-right, 0px) + 18px) calc(env(safe-area-inset-bottom, 0px) + 36px) calc(env(safe-area-inset-left, 0px) + 18px); outline: none; }
.jr-scene { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; padding-top: 4px; }
.jr-hero { order: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.jr-moments { order: 2; } .jr-parents { order: 3; } .jr-spouses { order: 4; } .jr-kids { order: 5; } .jr-sibs { order: 6; } .jr-half { order: 7; } .jr-ways { order: 8; }
.jr-frame { --h: 200px; width: calc(var(--h) * .8); height: var(--h); padding: 6px; border-radius: 999px 999px 18px 18px; background: var(--jr-paper); box-shadow: 0 0 0 1px var(--jr-gold), var(--jr-shadow); flex: none; }
.jr-ph { display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(160deg, #EADFCA, #D6C6A4); border-radius: 50%; position: relative; flex: none; }
.jr-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-sil { width: 62%; height: 62%; fill: rgba(107, 90, 67, .55); }
.jr-big { width: 100%; height: 100%; border-radius: 999px 999px 14px 14px; }
.jr-big .jr-sil { width: 56%; height: 56%; margin-top: 14%; }
.jr-arrive { margin: 14px 0 0; font-size: 13px; color: var(--jr-soft); display: inline-flex; align-items: center; gap: 6px; }
.jr-arrive i { color: var(--jr-gold); font-size: 12px; }
.jr-name { margin: 10px 0 2px; font-size: clamp(26px, 4.4vw, 38px); line-height: 1.18; font-weight: 700; letter-spacing: -.005em; max-width: 16em; overflow-wrap: anywhere; text-wrap: balance; outline: none; }
.jr-meta { margin: 0; font-size: 15px; color: var(--jr-soft); }
.jr-kin { margin: 4px 0 0; font-size: 15px; color: var(--jr-teal); font-weight: 600; min-height: 1.3em; max-width: 30em; }
.jr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0 6px; }
.jr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 24px; border: 1px solid transparent; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; }
.jr-primary { background: var(--jr-teal); color: #fff !important; }
.jr-primary:hover { background: var(--jr-teal-d); }
.jr-ghost { background: transparent; border-color: var(--jr-teal); color: var(--jr-teal) !important; }
.jr-ghost:hover { background: rgba(31, 95, 87, .08); }
.jr-lite { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* moments: a short strip of photos, from the person's own photo records */
.jr-moments { min-width: 0; }
.jr-moments .jr-sh { justify-content: center; } .jr-moments .jr-sh::before { display: none; }
.jr-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.jr-strip > :first-child { margin-inline-start: auto; } .jr-strip > :last-child { margin-inline-end: auto; }
.jr-mo { flex: none; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #E7DCC6; cursor: pointer; box-shadow: 0 2px 8px rgba(70, 48, 14, .2); }
.jr-mo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-mo:hover { transform: translateY(-2px); }
.jr-mo-more { display: inline-flex; align-items: center; justify-content: center; font: 600 15px system-ui, sans-serif; color: var(--jr-teal); background: var(--jr-paper); border: 1px dashed var(--jr-gold); }

/* relationship groups */
.jr-sec { min-width: 0; }
.jr-sh { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jr-teal); }
.jr-sh::before { content: ''; flex: 0 0 18px; height: 1px; background: var(--jr-gold); }
.jr[data-rtl="true"] .jr-sh, .jr:lang(ar) .jr-sh { letter-spacing: 0; text-transform: none; font-size: 14px; }
.jr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 10px; }
.jr-li { display: flex; justify-content: center; min-width: 0; }
.jr-tile { width: 100%; max-width: 124px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 10px; border: 0; border-radius: 14px; background: transparent; text-align: center; cursor: pointer; transition: background-color .15s, transform .15s; }
.jr-tile:hover { background: rgba(184, 138, 68, .12); transform: translateY(-2px); }
.jr-tile:active { transform: scale(.97); }
.jr-unk { cursor: default; opacity: .7; } .jr-unk:hover { background: transparent; transform: none; }
.jr-tile .jr-ph { width: 72px; height: 72px; box-shadow: 0 0 0 2px var(--jr-paper), 0 0 0 3px var(--jr-gold), 0 6px 14px rgba(70, 48, 14, .2); margin-bottom: 6px; }
.jr-nm { font-size: 15px; line-height: 1.22; font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jr-rl { font-size: 12px; color: var(--jr-teal); font-weight: 600; }
.jr-yr { font-size: 12px; color: var(--jr-soft); }
.jr-x { display: none; } .jr-open .jr-x { display: flex; }
.jr-more { margin-top: 10px; border: 0; background: transparent; color: var(--jr-teal); font-size: 14px; font-weight: 600; padding: 10px 6px; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.jr-empty { margin: 0; font-size: 14px; color: var(--jr-soft); }
.jr-none { opacity: .85; }
.jr-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.jr-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--jr-hair); background: var(--jr-paper); color: var(--jr-ink) !important; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.jr-chip i { color: var(--jr-gold); }
.jr-chip:hover { border-color: var(--jr-gold); }

/* transitions between people (subtle: depth and fade; none when motion is reduced) */
@keyframes jr-up { from { opacity: 0; transform: translateY(-16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes jr-down { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes jr-side { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: none; } }
@keyframes jr-pop { from { transform: scale(.88); } to { transform: none; } }
.jr-go-up { animation: jr-up .4s cubic-bezier(.2, .7, .2, 1); } .jr-go-down { animation: jr-down .4s cubic-bezier(.2, .7, .2, 1); } .jr-go-side { animation: jr-side .35s ease-out; }
.jr-go-up .jr-frame, .jr-go-down .jr-frame, .jr-go-side .jr-frame { animation: jr-pop .5s cubic-bezier(.2, .8, .2, 1); }

/* desktop and tablet landscape: a balanced composition around the portrait */
@media (min-width: 992px) {
    .jr-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px) minmax(0, 1fr); column-gap: 36px; row-gap: 22px; align-items: start; }
    .jr-kids { order: 1; } .jr-moments { order: 2; } .jr-ways { order: 3; }
    .jr-parents { grid-column: 1 / -1; grid-row: 1; justify-self: center; max-width: 640px; width: 100%; }
    .jr-parents .jr-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
    .jr-parents .jr-sh { justify-content: center; } .jr-parents .jr-sh::before { display: none; }
    .jr-hero { grid-column: 2; grid-row: 2 / span 2; }
    .jr-sibs { grid-column: 1; grid-row: 2; align-self: center; justify-self: end; max-width: 420px; width: 100%; }
    .jr-half { grid-column: 1; grid-row: 3; justify-self: end; max-width: 420px; width: 100%; }
    .jr-spouses { grid-column: 3; grid-row: 2; align-self: center; justify-self: start; max-width: 420px; width: 100%; }
    .jr-kids, .jr-ways, .jr-moments { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 860px; }
    .jr-kids .jr-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
    .jr-kids .jr-li, .jr-parents .jr-li { width: 118px; }
    .jr-kids .jr-sh, .jr-ways .jr-sh { justify-content: center; } .jr-kids .jr-sh::before, .jr-ways .jr-sh::before { display: none; }
    .jr-ways .jr-chips { justify-content: center; }
    .jr-frame { --h: clamp(190px, 27vh, 250px); }
    .jr-sibs .jr-tile .jr-ph, .jr-half .jr-tile .jr-ph, .jr-spouses .jr-tile .jr-ph { width: 62px; height: 62px; margin-bottom: 4px; }
    .jr-sibs .jr-grid, .jr-half .jr-grid { gap: 8px 6px; } .jr-sibs .jr-nm, .jr-half .jr-nm, .jr-spouses .jr-nm { font-size: 14px; }
}
@media (min-width: 992px) and (max-height: 820px) { .jr-frame { --h: clamp(170px, 27vh, 230px); } .jr-name { font-size: clamp(24px, 3.2vw, 32px); } }
@media (min-width: 600px) and (max-width: 991.98px) { .jr-scene { max-width: 720px; } .jr-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } .jr-frame { --h: 236px; } }
/* iPhone and other phones */
@media (max-width: 599.98px) { .jr-frame { --h: 188px; } .jr-name { font-size: 27px; } .jr-main { padding-inline: calc(env(safe-area-inset-left, 0px) + 14px) calc(env(safe-area-inset-right, 0px) + 14px); } .jr-actions .jr-btn { flex: 1 1 140px; } }
@media (max-width: 380px) { .jr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 4px; } .jr-tile .jr-ph { width: 64px; height: 64px; } .jr-nm { font-size: 14px; } }
@media (max-height: 480px) and (orientation: landscape) {
    .jr-bar { min-height: 46px; padding-block: 4px; } .jr-ib { width: 40px; height: 40px; }
    .jr-frame { --h: 130px; } .jr-name { font-size: 22px; margin-top: 6px; } .jr-scene { gap: 16px; }
    .jr-hero { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: center; justify-items: start; text-align: start; } .jr-hero > * { grid-column: 2; } .jr-hero > .jr-frame { grid-column: 1; grid-row: 1 / span 6; } .jr-actions { justify-content: flex-start; margin-block: 8px 0; } .jr-arrive { margin-top: 0; }
}

/* menu and search */
.jr-menu { position: fixed; z-index: 1075; top: calc(env(safe-area-inset-top, 0px) + 54px); inset-inline-end: calc(env(safe-area-inset-right, 0px) + 10px); width: min(300px, calc(100vw - 20px)); max-height: calc(100dvh - 90px); overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--jr-paper); border: 1px solid var(--jr-hair); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.jr-mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--jr-ink) !important; font-size: 15px; text-align: start; cursor: pointer; text-decoration: none; }
.jr-mi i { width: 20px; text-align: center; color: var(--jr-teal); }
.jr-mi:hover:not([disabled]) { background: rgba(31, 95, 87, .1); } .jr-mi[disabled] { opacity: .45; cursor: default; }
.jr-msep { height: 1px; margin: 6px 4px; background: var(--jr-hair); }
.jr-search { position: fixed; z-index: 1080; inset: 0; background: rgba(30, 24, 14, .45); padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 12px; display: flex; flex-direction: column; align-items: center; }
.jr-search > * { width: min(560px, 100%); }
.jr-search-head { display: flex; gap: 6px; align-items: center; background: var(--jr-paper); border-radius: 16px 16px 0 0; padding: 8px 8px 8px 12px; }
.jr-search-note { margin: 0; padding: 4px 16px 10px; background: var(--jr-paper); font-size: 14px; color: var(--jr-soft); }
.jr-results { list-style: none; margin: 0; padding: 0 8px 8px; background: var(--jr-paper); border-radius: 0 0 16px 16px; max-height: min(60dvh, 480px); overflow-y: auto; }
.jr-search-head:last-child, .jr-search-note + .jr-results { border-radius: 0 0 16px 16px; }
.jr-res { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 12px; min-height: 48px; border: 0; border-radius: 10px; background: transparent; text-align: start; cursor: pointer; }
.jr-res:hover, .jr-res:focus-visible { background: rgba(31, 95, 87, .1); }
.jr-res-nm { font-size: 16px; font-weight: 600; font-family: inherit; } .jr-res-yr { font-size: 13px; color: var(--jr-soft); font-family: system-ui, sans-serif; }
.jr-res-none { padding: 14px; color: var(--jr-soft); font-family: system-ui, sans-serif; }

/* Explore their life */
.jr-life { position: fixed; inset: 0; z-index: 1070; display: flex; align-items: center; justify-content: center; background: rgba(30, 24, 14, .5); }
.jr-life-card { display: flex; flex-direction: column; width: min(940px, 94vw); height: min(92dvh, 900px); background: var(--jr-paper); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); animation: jr-side .3s ease-out; }
.jr-life-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px 22px; border-bottom: 1px solid var(--jr-hair); }
.jr-life-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.jr-small { width: 56px; height: 56px; box-shadow: 0 0 0 2px var(--jr-paper), 0 0 0 3px var(--jr-gold); }
.jr-life-who { min-width: 0; } .jr-life-who h2 { margin: 0; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; font-family: inherit; }
.jr-eyebrow { margin: 0 0 2px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--jr-teal); font-weight: 700; }
.jr[data-rtl="true"] .jr-eyebrow { letter-spacing: 0; text-transform: none; font-size: 13px; }
.jr-life-scroll { flex: 1; overflow-y: auto; padding: 0 22px calc(env(safe-area-inset-bottom, 0px) + 28px); overscroll-behavior: contain; }
.jr-life-nav { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; background: var(--jr-paper); scrollbar-width: none; }
.jr-lnav { flex: none; min-height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid var(--jr-hair); background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; }
.jr-lnav:hover { border-color: var(--jr-gold); }
.jr-chap { margin: 8px 0 26px; }
.jr-ch-h { margin: 0 0 12px; font-size: 24px; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--jr-hair); font-family: inherit; }
.jr-bio { font-size: 18px; line-height: 1.75; max-width: 64ch; margin: 0 0 14px; }
.jr-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; margin: 16px 0 0; }
.jr-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--jr-teal); margin: 0 0 2px; } .jr-facts dd { margin: 0; font-size: 16px; }
.jr[data-rtl="true"] .jr-facts dt { letter-spacing: 0; text-transform: none; font-size: 13px; }
.jr-gallery { columns: 3 170px; column-gap: 12px; }
.jr-fig { margin: 0 0 12px; break-inside: avoid; }
.jr-fig button { display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #E7DCC6; cursor: pointer; box-shadow: 0 3px 10px rgba(70, 48, 14, .18); }
.jr-fig img { width: 100%; height: auto; display: block; }
.jr-fig figcaption { font-size: 13px; color: var(--jr-soft); padding: 6px 2px 0; font-family: system-ui, sans-serif; }
.jr-albums { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 0; font-size: 14px; } .jr-albums a, .jr-links a { color: var(--jr-teal); font-weight: 600; text-decoration: none; } .jr-albums i, .jr-links i { margin-inline-end: 6px; color: var(--jr-gold); }
.jr-years { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--jr-gold); }
.jr-years li { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 8px 0 8px 14px; font-size: 16px; }
.jr[data-rtl="true"] .jr-years li { padding: 8px 14px 8px 0; }
.jr-y { font-family: Georgia, serif; font-weight: 700; color: var(--jr-teal); font-size: 17px; }
.jr-places, .jr-links { list-style: none; margin: 0; padding: 0; } .jr-places li, .jr-links li { padding: 7px 0; font-size: 16px; }
.jr-pl-l { color: var(--jr-soft); margin-inline-end: 8px; font-size: 14px; }
.jr-soft { color: var(--jr-soft); font-size: 14px; }
.jr-life-none { margin-top: 26px; font-size: 16px; }
.jr-life-links { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--jr-hair); padding-top: 18px; margin-top: 8px; }
@media (max-width: 767.98px) {
    .jr-life-card { width: 100vw; height: 100dvh; border-radius: 0; }
    .jr-life-top { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); padding-inline: 16px 8px; }
    .jr-life-scroll { padding-inline: calc(env(safe-area-inset-left, 0px) + 16px) calc(env(safe-area-inset-right, 0px) + 16px); }
    .jr-bio { font-size: 17px; } .jr-ch-h { font-size: 22px; }
}

/* Generations Journey: one chapter at a time on a deep emerald stage */
.jr-journey { position: fixed; inset: 0; z-index: 1060; display: flex; flex-direction: column; color: #F6F0E4; background: radial-gradient(120% 90% at 20% 0%, #1D5E56 0%, #12423D 55%, #0D302C 100%); }
.jr-journey :focus-visible { outline-color: var(--jr-gold-l); }
.jr-jtop { flex: none; display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 12px) 4px calc(env(safe-area-inset-left, 0px) + 12px); }
.jr-jhead { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: system-ui, sans-serif; min-width: 0; }
.jr-jtitle { font-weight: 700; font-size: 15px; color: var(--jr-gold-l); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jr-jcount { font-size: 13px; color: #D9D0BF; white-space: nowrap; }
.jr-jprog { flex: none; display: flex; gap: 4px; padding: 6px calc(env(safe-area-inset-right, 0px) + 18px) 6px calc(env(safe-area-inset-left, 0px) + 18px); }
.jr-jprog span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); } .jr-jprog .done { background: var(--jr-gold-l); } .jr-jprog .cur { background: #fff; }
.jr-chapter { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 14px calc(env(safe-area-inset-right, 0px) + 22px) 14px calc(env(safe-area-inset-left, 0px) + 22px); max-width: 1100px; width: 100%; margin: 0 auto; }
.jr-cvis { flex: none; display: flex; align-items: center; justify-content: center; }
.jr-frame-j { --h: 210px; background: #F4EBDA; }
.jr-ctext { width: 100%; max-width: 640px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.jr-journey .jr-eyebrow { color: var(--jr-gold-l); }
.jr-ctitle { margin: 4px 0 2px; font-size: clamp(26px, 4vw, 40px); line-height: 1.18; font-weight: 700; overflow-wrap: anywhere; text-wrap: balance; outline: none; font-family: inherit; }
.jr-journey .jr-meta { color: #D9D0BF; font-size: 16px; }
.jr-cap { margin: 8px 0 0; font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.55; color: #EEE6D6; max-width: 34em; }
.jr-journey .jr-kin { color: var(--jr-gold-l); min-height: 0; }
.jr-cbio { margin: 10px 0 0; font-size: 17px; line-height: 1.7; max-width: 36em; color: #F6F0E4; } .jr-cbio.empty { font-family: system-ui, sans-serif; font-size: 14px; color: #CFC6B4; }
.jr-cphotos { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.jr-jph { width: 76px; height: 76px; padding: 0; border: 2px solid rgba(255, 255, 255, .25); border-radius: 10px; overflow: hidden; background: #123; cursor: pointer; } .jr-jph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-cacts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.jr-journey .jr-ghost { color: #F6F0E4 !important; border-color: rgba(246, 240, 228, .55); } .jr-journey .jr-ghost:hover { background: rgba(255, 255, 255, .1); }
.jr-gold { background: var(--jr-gold-l); color: #12302C !important; } .jr-gold:hover { background: #F0D597; }
.jr-journey .jr-btn:disabled { opacity: .4; cursor: default; }
.jr-faces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; }
.jr-faces .jr-tile { color: #F6F0E4; } .jr-faces .jr-rl, .jr-faces .jr-yr { color: #D9D0BF; } .jr-faces .jr-tile:hover { background: rgba(255, 255, 255, .1); } .jr-faces .jr-li { width: 112px; }
.jr-jnav { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px calc(env(safe-area-inset-right, 0px) + 18px) calc(env(safe-area-inset-bottom, 0px) + 14px) calc(env(safe-area-inset-left, 0px) + 18px); max-width: 1100px; width: 100%; margin: 0 auto; }
@keyframes jr-cn { from { opacity: 0; transform: translateX(var(--jr-dx)); } to { opacity: 1; transform: none; } }
@keyframes jr-cp { from { opacity: 0; transform: translateX(calc(var(--jr-dx) * -1)); } to { opacity: 1; transform: none; } }
.jr-ch-next { animation: jr-cn .38s cubic-bezier(.2, .7, .2, 1); } .jr-ch-prev { animation: jr-cp .38s cubic-bezier(.2, .7, .2, 1); }
@media (min-width: 900px) and (min-height: 560px) {
    .jr-chapter { flex-direction: row; justify-content: center; align-items: center; gap: 64px; }
    .jr-cvis { flex: 0 0 340px; } .jr-frame-j { --h: clamp(260px, 44vh, 400px); } .jr-ctext { text-align: start; align-items: flex-start; } .jr-cacts, .jr-cphotos { justify-content: flex-start; }
}
@media (max-height: 480px) and (orientation: landscape) { .jr-chapter { flex-direction: row; align-items: center; gap: 24px; } .jr-frame-j { --h: 150px; } .jr-ctext { text-align: start; align-items: flex-start; } .jr-ctitle { font-size: 22px; } .jr-cap { font-size: 14px; } }

/* status */
.jr-loading { position: fixed; z-index: 1090; top: calc(env(safe-area-inset-top, 0px) + 64px); left: 50%; transform: translateX(-50%); background: var(--jr-paper); border: 1px solid var(--jr-hair); border-radius: 18px; padding: 6px 16px; font-size: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.jr-error { position: fixed; z-index: 1090; left: 50%; top: 40%; transform: translate(-50%, -50%); background: var(--jr-paper); border: 1px solid var(--jr-hair); border-radius: 16px; padding: 18px 22px; text-align: center; max-width: min(360px, 90vw); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.jr-toast { position: fixed; z-index: 1090; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); background: #2A2520; color: #fff; border-radius: 20px; padding: 10px 18px; font-size: 14px; max-width: 90vw; text-align: center; }
@media (prefers-reduced-motion: reduce) { .jr *, .jr *::before, .jr *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---- People Finder (peoplefinder.js) : mobile first, then wider screens ------------------------------------------------------- */
.pfn { --pfn-sticky: 0px; max-width: 1500px; margin: 0 auto; padding-bottom: 1.5rem; }
.pfn-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.pfn-title { flex: 1 1 auto; margin: 0; font-size: 1.15rem; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.pfn-ibtn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bs-border-color, #dee2e6); background: var(--bs-body-bg, #fff); color: inherit; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.pfn-ibtn:hover { background: var(--bs-tertiary-bg, #f8f9fa); color: inherit; }
.pfn-ibtn:focus-visible, .pfn-tab:focus-visible, .pfn-tile:focus-visible, .pfn-row:focus-visible, .pfv-btn:focus-visible, .pfn-btn:focus-visible { outline: 3px solid var(--bs-primary, #1f5f57); outline-offset: 2px; }
[dir="rtl"] .pfn-flip { transform: scaleX(-1); }
.pfn-menu { position: relative; }
.pfn-pop { position: absolute; inset-inline-end: 0; top: calc(100% + .35rem); z-index: 40; min-width: 14rem; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); padding: .35rem; }
.pfn-pop a, .pfn-pop button { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .5rem .75rem; border: 0; background: none; color: inherit; border-radius: .6rem; text-decoration: none; text-align: start; font: inherit; }
.pfn-pop a:hover, .pfn-pop button:hover { background: var(--bs-tertiary-bg, #f1f3f5); }

.pfn-person { display: flex; align-items: center; gap: .9rem; padding: .35rem 0 .75rem; }
.pfn-avatar { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #EFE9DF; border: 2px solid var(--bs-body-bg, #fff); box-shadow: 0 0 0 1px var(--bs-border-color, #dee2e6), 0 4px 14px rgba(0, 0, 0, .12); display: grid; place-items: center; color: #8a8174; font-size: 1.8rem; }
.pfn-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfn-who { flex: 1 1 auto; min-width: 0; }
.pfn-name { margin: 0; font-size: 1.3rem; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pfn-sub { margin: .15rem 0 0; font-size: .88rem; color: var(--bs-secondary-color, #6c757d); overflow-wrap: anywhere; }
.pfn-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .45rem 1.1rem; border-radius: 999px; border: 1px solid var(--bs-primary, #1f5f57); background: transparent; color: var(--bs-primary, #1f5f57); font-weight: 600; cursor: pointer; text-decoration: none; }
.pfn-btn:hover { background: rgba(31, 95, 87, .08); color: var(--bs-primary, #1f5f57); }
.pfn-btn.pfn-solid { background: var(--bs-primary, #1f5f57); color: #fff; }
.pfn-btn.pfn-solid:hover { filter: brightness(1.08); color: #fff; }
.pfn-btn[disabled] { opacity: .55; pointer-events: none; }

.pfn-tabs { position: sticky; top: var(--pfn-sticky); z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; padding: .35rem; margin: 0 -.25rem .75rem; background: color-mix(in srgb, var(--bs-body-bg, #fff) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
.pfn-tab { min-height: 52px; padding: .3rem .2rem; border: 0; background: none; border-radius: .8rem; color: var(--bs-secondary-color, #6c757d); font: inherit; font-size: .78rem; line-height: 1.15; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; }
.pfn-tab b { font-size: 1.05rem; color: var(--bs-body-color, #212529); font-variant-numeric: tabular-nums; }
.pfn-tab[aria-selected="true"] { background: rgba(31, 95, 87, .12); color: var(--bs-primary, #1f5f57); font-weight: 700; }
.pfn-tab[aria-selected="true"] b { color: var(--bs-primary, #1f5f57); }

.pfn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; margin-bottom: .6rem; }
.pfn-bar select { min-height: 44px; border-radius: 999px; padding-inline: 1rem; }
.pfn-note { font-size: .85rem; color: var(--bs-secondary-color, #6c757d); margin: 0 0 .75rem; }

.pfn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 576px) { .pfn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; } }
@media (min-width: 992px) { .pfn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; } }
@media (min-width: 1280px) { .pfn-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .pfn-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pfn-card { min-width: 0; }
.pfn-tile { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: .85rem; overflow: hidden; background: var(--bs-tertiary-bg, #eee); cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.pfn-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.pfn-tile:hover img { transform: scale(1.03); }
.pfn-chip { position: absolute; inset-block-start: .4rem; inset-inline-start: .4rem; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: rgba(255, 255, 255, .92); color: #1b1b1b; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.pfn-chip.pfn-ok { background: #1f5f57; color: #fff; }
.pfn-chip.pfn-wait { background: #8F4A26; color: #fff; }
.pfn-fbadge { position: absolute; inset-block-end: .4rem; inset-inline-end: .4rem; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; background: rgba(0, 0, 0, .65); color: #fff; }
.pfn-cap { margin: .3rem .15rem 0; font-size: .78rem; line-height: 1.3; color: var(--bs-secondary-color, #6c757d); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pfn-skel { aspect-ratio: 1 / 1; border-radius: .85rem; background: linear-gradient(100deg, var(--bs-tertiary-bg, #eee) 30%, var(--bs-secondary-bg, #e4e4e4) 50%, var(--bs-tertiary-bg, #eee) 70%); background-size: 200% 100%; animation: pfn-shimmer 1.2s linear infinite; }
@keyframes pfn-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.pfn-state { text-align: center; padding: 2rem 1rem; color: var(--bs-secondary-color, #6c757d); }
.pfn-state i { font-size: 2rem; opacity: .6; display: block; margin-bottom: .6rem; }
.pfn-state .pfn-btn { margin-top: .75rem; }
.pfn-more { text-align: center; margin: 1rem 0; }

.pfn-albums { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 768px) { .pfn-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pfn-albums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pfn-row { display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 64px; padding: .5rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 1rem; background: var(--bs-body-bg, #fff); color: inherit; text-decoration: none; text-align: start; font: inherit; cursor: pointer; }
.pfn-row:hover { background: var(--bs-tertiary-bg, #f8f9fa); color: inherit; }
.pfn-row .pfn-rimg { flex: 0 0 auto; width: 64px; height: 64px; border-radius: .75rem; overflow: hidden; background: var(--bs-tertiary-bg, #eee); display: grid; place-items: center; color: #8a8174; }
.pfn-row .pfn-rimg img { width: 100%; height: 100%; object-fit: cover; }
.pfn-row .pfn-rtxt { flex: 1 1 auto; min-width: 0; }
.pfn-row strong { display: block; overflow-wrap: anywhere; }
.pfn-row small { color: var(--bs-secondary-color, #6c757d); }

/* bottom sheet (person picker and "who is this?") */
.pfn-back { position: fixed; inset: 0; z-index: 1110; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s ease; }
.pfn-back.pfn-in { opacity: 1; }
.pfn-sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 1120; margin-inline: auto; width: 100%; max-width: 640px; max-height: var(--pfn-vh, 88dvh); display: flex; flex-direction: column; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .3); transform: translateY(105%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); padding-bottom: env(safe-area-inset-bottom); }
.pfn-sheet.pfn-in { transform: none; }
.pfn-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--bs-border-color, #ccc); margin: .55rem auto .15rem; flex: 0 0 auto; }
.pfn-sh-head { padding: .25rem 1rem .5rem; display: flex; align-items: center; gap: .5rem; }
.pfn-sh-head h2 { flex: 1 1 auto; margin: 0; font-size: 1.1rem; font-weight: 700; }
.pfn-sh-body { padding: 0 1rem 1rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pfn-sh-foot { display: flex; gap: .6rem; padding: .75rem 1rem; border-top: 1px solid var(--bs-border-color, #dee2e6); }
.pfn-sh-foot .pfn-btn { flex: 1 1 0; }
.pfn-input { width: 100%; min-height: 48px; border-radius: .9rem; border: 1px solid var(--bs-border-color, #ced4da); padding: .5rem 1rem; font-size: 1rem; background: var(--bs-body-bg, #fff); color: inherit; }
.pfn-input:focus { outline: 3px solid rgba(31, 95, 87, .35); border-color: var(--bs-primary, #1f5f57); }
.pfn-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.pfn-pick { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 56px; padding: .5rem .75rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .9rem; background: var(--bs-body-bg, #fff); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.pfn-pick:hover { background: var(--bs-tertiary-bg, #f8f9fa); }
.pfn-pick[aria-pressed="true"] { border-color: var(--bs-primary, #1f5f57); background: rgba(31, 95, 87, .1); box-shadow: inset 0 0 0 1px var(--bs-primary, #1f5f57); }
.pfn-pick span { min-width: 0; }
.pfn-pick strong { display: block; overflow-wrap: anywhere; }
.pfn-pick small { color: var(--bs-secondary-color, #6c757d); }
.pfn-h { font-size: .8rem; font-weight: 700; color: var(--bs-secondary-color, #6c757d); margin: .9rem 0 0; text-transform: none; }
.pfn-toast { position: fixed; inset-inline: 0; bottom: calc(5rem + env(safe-area-inset-bottom)); z-index: 1130; margin: 0 auto; width: max-content; max-width: calc(100% - 2rem); padding: .7rem 1.1rem; border-radius: 999px; background: #1b1b1b; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); display: flex; align-items: center; gap: .8rem; }
.pfn-toast.pfn-err { background: #8b1e1e; }
.pfn-toast button { background: none; border: 0; color: #9fe0d4; font-weight: 700; min-height: 32px; padding: 0 .4rem; }

/* full-screen viewer */
.pfv { position: fixed; inset: 0; z-index: 1100; background: #0b0b0b; color: #fff; display: flex; flex-direction: column; overscroll-behavior: contain; touch-action: none; }
.pfv[hidden] { display: none; }
.pfv-bar { position: absolute; inset-inline: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: .5rem; padding: calc(.5rem + env(safe-area-inset-top)) calc(.75rem + env(safe-area-inset-right)) .5rem calc(.75rem + env(safe-area-inset-left)); background: linear-gradient(#000a, #0000); pointer-events: none; }
.pfv-bar > * { pointer-events: auto; }
.pfv-count { flex: 1 1 auto; font-size: .9rem; opacity: .9; text-align: center; }
.pfv-btn { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; backdrop-filter: blur(6px); }
.pfv-btn:hover { background: rgba(255, 255, 255, .28); }
.pfv-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.pfv-stage { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; display: grid; place-items: center; cursor: grab; }
.pfv-stage.pfv-drag { cursor: grabbing; }
.pfv-frame { position: relative; transform-origin: 50% 50%; will-change: transform; --pfv-k: 1; }
.pfv-frame img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.pfv-state { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem; pointer-events: none; }
.pfv-state > * { pointer-events: auto; }
.pfv-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; }
.pfv-prev { inset-inline-start: calc(.5rem + env(safe-area-inset-left)); }
.pfv-next { inset-inline-end: calc(.5rem + env(safe-area-inset-right)); }
.pfv-box { position: absolute; padding: 0; margin: 0; background: transparent; border: calc(2px / var(--pfv-k)) solid #fff; border-radius: calc(4px / var(--pfv-k)); box-shadow: 0 0 0 calc(1px / var(--pfv-k)) rgba(0, 0, 0, .5); color: #fff; cursor: pointer; }
.pfv-box::before { content: ''; position: absolute; inset: calc(-12px / var(--pfv-k)); }
.pfv-box.pfv-known { border-color: #7ee0cf; }
.pfv-box.pfv-open { border-style: dashed; border-color: #ffd36b; animation: pfv-pulse 1.8s ease-in-out infinite; }
.pfv-box.pfv-wait { border-color: #f4a56a; border-style: dotted; }
.pfv-box.pfv-sel { border-color: #fff; box-shadow: 0 0 0 calc(3px / var(--pfv-k)) rgba(255, 211, 107, .85); animation: none; }
.pfv-lab { position: absolute; inset-inline-start: 0; top: 100%; margin-top: calc(3px / var(--pfv-k)); transform: scale(calc(1 / var(--pfv-k))); transform-origin: top left; white-space: nowrap; font-size: .8rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(0, 0, 0, .75); color: #fff; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
[dir="rtl"] .pfv-lab { transform-origin: top right; }
@keyframes pfv-pulse { 50% { opacity: .55; } }
.pfv-info { position: absolute; inset-inline: 0; bottom: 0; z-index: 3; padding: .75rem calc(1rem + env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left)); background: linear-gradient(#0000, #000d 30%); max-height: 62%; overflow-y: auto; touch-action: pan-y; }
.pfv-title { margin: 0 0 .25rem; font-weight: 700; overflow-wrap: anywhere; }
.pfv-why { margin: 0 0 .5rem; font-size: .88rem; opacity: .92; }
.pfv-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.pfv-acts .pfn-btn { border-color: rgba(255, 255, 255, .6); color: #fff; }
.pfv-acts .pfn-btn.pfn-solid { background: #fff; color: #0b0b0b; border-color: #fff; }
.pfv-faces { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; }
.pfv-faces button { min-height: 44px; padding: .3rem .85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: .85rem; cursor: pointer; }
.pfv-hint { font-size: .8rem; opacity: .75; margin: .35rem 0 0; }
.pfv-det { margin-top: .5rem; font-size: .85rem; }
.pfv-det a { color: #9fe0d4; }
.pfv-aside { display: none; }
@media (min-width: 992px) {
  .pfv-main { flex-direction: row; }
  .pfv-info { position: relative; inset: auto; flex: 0 0 360px; max-height: none; background: #151515; border-inline-start: 1px solid #2a2a2a; padding-top: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pfn-sheet, .pfn-back, .pfn-tile img { transition: none; }
  .pfn-skel, .pfv-box.pfv-open { animation: none; }
}

.pfv-det { display: none; }
.pfv-expand .pfv-det { display: block; }
@media (min-width: 992px) { .pfv-det { display: block; } }
@media (max-width: 420px) { .pfv-bar { gap: .3rem; } .pfv-btn { width: 44px; height: 44px; } }

/* ================= Engagement & Wedding memories (.cm-*) ================= */
.cm-card { margin-top: 1rem; }
.cm { display: grid; gap: .85rem; }
.cm-couple { border: 1px solid var(--ft-border, #e7dfd3); border-radius: 14px; padding: .85rem .9rem .35rem; background: var(--bs-body-bg, #fff); min-width: 0; }
.cm-head { margin-block-end: .6rem; }
.cm-who { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.cm-amp { color: var(--ft-accent, #b5653a); font-weight: 600; margin-inline: .1rem; }
.cm-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin-block-start: .15rem; font-size: .9rem; color: var(--bs-secondary-color, #6c757d); }
.cm-partner { display: inline-flex; align-items: center; min-height: 44px; color: var(--bs-primary, #1f5f57); text-decoration: none; overflow-wrap: anywhere; }
.cm-partner:hover { text-decoration: underline; }
.cm-badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: rgba(31, 95, 87, .1); color: var(--bs-primary, #1f5f57); font-size: .75rem; font-weight: 600; }
.cm-badge.cm-muted { background: var(--bs-tertiary-bg, #eee); color: var(--bs-secondary-color, #6c757d); }
.cm-events { list-style: none; margin: 0; padding: 0; }
.cm-event { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: .8rem; padding-block-end: .9rem; }
.cm-event:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 19px; top: 42px; bottom: 2px; width: 2px; background: var(--ft-border, #e7dfd3); }
.cm-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; flex: none; }
.cm-engagement .cm-ico { background: #fbf0d6; color: #7a4b00; }
.cm-wedding .cm-ico { background: #f9e1e8; color: #9b2247; }
.cm-evbody { min-width: 0; }
.cm-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cm-engagement .cm-label { color: #7a4b00; }
.cm-wedding .cm-label { color: #9b2247; }
.cm-date { font-size: 1.15rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cm-place { font-size: .9rem; color: var(--bs-secondary-color, #6c757d); overflow-wrap: anywhere; }
.cm-warn { margin-block-start: .3rem; font-size: .82rem; color: #7a4b00; background: #fff6df; border-radius: 8px; padding: .3rem .55rem; }
.cm-album { display: flex; align-items: center; gap: .75rem; margin-block-start: .5rem; padding: .45rem; min-height: 64px; border: 1px solid var(--ft-border, #e7dfd3); border-radius: 12px; color: inherit; text-decoration: none; background: var(--ft-card, #fff); }
.cm-album:hover { border-color: var(--bs-primary, #1f5f57); color: inherit; }
.cm-cover { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: var(--bs-tertiary-bg, #eee); display: block; }
.cm-cover.cm-round { border-radius: 50%; }
.cm-nocover { display: grid; place-items: center; color: var(--bs-secondary-color, #6c757d); }
.cm-album-t { min-width: 0; flex: 1 1 auto; display: block; }
.cm-album-t strong { display: block; font-size: 1rem; }
.cm-album-t small { display: block; color: var(--bs-secondary-color, #6c757d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-view { display: inline-flex; align-items: center; gap: .35rem; margin-block-start: .1rem; color: var(--bs-primary, #1f5f57); font-weight: 600; font-size: .92rem; }
.cm-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .45rem 0 0; padding: 0; }
.cm-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; max-width: 100%; padding: .2rem .8rem .2rem .25rem; border: 1px solid var(--ft-border, #e7dfd3); border-radius: 999px; color: inherit; text-decoration: none; background: var(--ft-card, #fff); font-size: .88rem; }
[dir="rtl"] .cm-chip { padding: .2rem .25rem .2rem .8rem; }
.cm-chip:hover { border-color: var(--bs-primary, #1f5f57); color: inherit; }
.cm-chips li { max-width: 100%; min-width: 0; }
.cm-chip { min-width: 0; }
.cm-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11rem; min-width: 0; flex: 0 1 auto; }
.cm-chip small { color: var(--bs-secondary-color, #6c757d); }
.cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; min-width: 44px; padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--bs-primary, #1f5f57); background: transparent; color: var(--bs-primary, #1f5f57); font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; }
.cm-btn:hover { background: rgba(31, 95, 87, .08); }
.cm-btn.cm-solid { background: var(--bs-primary, #1f5f57); color: #fff; }
.cm-btn.cm-solid:hover { filter: brightness(1.08); }
.cm-btn.cm-bad { background: #a12a2a; border-color: #a12a2a; }
.cm-btn[disabled] { opacity: .55; pointer-events: none; }
.cm-manage { margin-block-start: .5rem; }
.cm-add { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; min-height: 52px; margin-block-start: .25rem; border: 2px dashed var(--ft-border, #d9cfbf); border-radius: 12px; background: transparent; color: var(--bs-secondary-color, #6c757d); font-weight: 600; cursor: pointer; }
.cm-add:hover { border-color: var(--bs-primary, #1f5f57); color: var(--bs-primary, #1f5f57); }
.cm :focus-visible, .cm-sheet :focus-visible, .cm-tl-link:focus-visible, .cm-albev :focus-visible { outline: 3px solid rgba(31, 95, 87, .55); outline-offset: 2px; }
.cm-state { text-align: center; padding: 1.25rem .5rem; color: var(--bs-secondary-color, #6c757d); }
.cm-state i { font-size: 1.6rem; margin-block-end: .4rem; display: block; }
.cm-skel { height: 140px; border-radius: 12px; background: linear-gradient(100deg, var(--bs-tertiary-bg, #eee) 30%, var(--bs-secondary-bg, #e4e4e4) 50%, var(--bs-tertiary-bg, #eee) 70%); background-size: 200% 100%; animation: cm-shimmer 1.2s linear infinite; }
@keyframes cm-shimmer { to { background-position: -200% 0; } }
[dir="rtl"] .cm-flip { transform: scaleX(-1); }

/* album page banner + timeline link */
.cm-albev { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.cm-albev-i { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--ft-border, #e7dfd3); border-radius: 12px; background: var(--ft-card, #fff); }
.cm-albev-i strong { display: block; font-size: 1.02rem; overflow-wrap: anywhere; }
.cm-date-s { color: var(--bs-secondary-color, #6c757d); font-size: .92rem; }
.cm-chips-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .35rem; }
.cm-albev .cm-chip { padding: .2rem .8rem; }
.cm-tl-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--bs-primary, #1f5f57); font-weight: 600; text-decoration: none; }
.cm-tl-link:hover { text-decoration: underline; }
.tl-ENGAGEMENT { color: #b7791f; }

/* editing bottom sheet */
.cm-back { position: fixed; inset: 0; z-index: 1110; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s ease; }
.cm-back.cm-in { opacity: 1; }
.cm-sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 1120; margin-inline: auto; width: 100%; max-width: 640px; max-height: var(--cm-vh, 94dvh); height: auto; display: flex; flex-direction: column; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .3); transform: translateY(105%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); padding-bottom: env(safe-area-inset-bottom); }
.cm-sheet.cm-in { transform: none; }
.cm-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--bs-border-color, #ccc); margin: .55rem auto .15rem; flex: 0 0 auto; }
.cm-sh-head { display: flex; align-items: center; gap: .4rem; padding: .15rem .6rem .4rem 1rem; }
[dir="rtl"] .cm-sh-head { padding: .15rem 1rem .4rem .6rem; }
.cm-sh-head h2 { flex: 1 1 auto; margin: 0; font-size: 1.1rem; font-weight: 700; }
.cm-ibtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; flex: none; }
.cm-ibtn:hover { background: var(--bs-tertiary-bg, #f1f1f1); }
.cm-ibtn[disabled] { opacity: .35; pointer-events: none; }
.cm-ibtn.cm-danger { color: #a12a2a; }
.cm-sh-body { padding: 0 1rem 1rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.cm-sh-foot { display: flex; gap: .6rem; padding: .7rem 1rem; border-top: 1px solid var(--bs-border-color, #dee2e6); flex: 0 0 auto; }
.cm-sh-foot .cm-btn { flex: 1 1 0; }
.cm-sh-foot:empty { display: none; }
.cm-foot-msg { flex: 1 0 100%; margin: 0; font-size: .9rem; font-weight: 600; color: #a12a2a; }
.cm-sh-foot:has(.cm-foot-msg) { flex-wrap: wrap; }
.cm-field { width: 100%; min-height: 48px; border-radius: .9rem; border: 1px solid var(--bs-border-color, #ced4da); padding: .5rem .9rem; font-size: 16px; background: var(--bs-body-bg, #fff); color: inherit; }
.cm-field:focus { outline: 3px solid rgba(31, 95, 87, .35); border-color: var(--bs-primary, #1f5f57); }
.cm-fs { border: 0; padding: 0; margin: 0 0 .6rem; min-width: 0; }
.cm-fs legend { font-size: .95rem; font-weight: 700; margin-bottom: .35rem; }
.cm-fs label, .cm-lbl { display: block; font-size: .82rem; font-weight: 600; color: var(--bs-secondary-color, #6c757d); }
.cm-date-row { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: .5rem; margin-bottom: .5rem; }
.cm-cal, .cm-pl, .cm-lbl { margin-bottom: .5rem; }
.cm-h { font-size: 1rem; font-weight: 700; margin: 1rem 0 .4rem; display: flex; align-items: center; gap: .5rem; }
.cm-count { background: rgba(31, 95, 87, .12); color: var(--bs-primary, #1f5f57); border-radius: 999px; font-size: .78rem; padding: .05rem .55rem; }
.cm-empty { color: var(--bs-secondary-color, #6c757d); margin: .3rem 0 .6rem; }
.cm-sel-list, .cm-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cm-sel { position: relative; display: flex; gap: .7rem; align-items: flex-start; padding: .5rem; border: 1px solid var(--ft-border, #e7dfd3); border-radius: 12px; }
.cm-sel .cm-ibtn.cm-danger { position: absolute; top: 2px; inset-inline-end: 2px; }
.cm-sel-t strong { padding-inline-end: 40px; }
.cm-sel-t { min-width: 0; flex: 1 1 auto; }
.cm-sel-t strong { display: block; overflow-wrap: anywhere; }
.cm-sel-t small { color: var(--bs-secondary-color, #6c757d); }
.cm-sel-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .3rem; margin-block-start: .25rem; }
.cm-pill { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .85rem; border-radius: 999px; border: 1px solid var(--bs-border-color, #ced4da); background: transparent; color: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.cm-pill.cm-on { background: #fbf0d6; border-color: #e0b84a; color: #7a4b00; }
.cm-add-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .8rem; }
.cm-add-row .cm-btn { flex: 1 1 11rem; }
.cm-q { margin-block-end: .6rem; position: sticky; top: 0; z-index: 2; }
.cm-pick { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 84px; padding: .45rem .6rem; border: 1px solid var(--ft-border, #e7dfd3); border-radius: 12px; background: var(--ft-card, #fff); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.cm-pick.cm-on { border-color: var(--bs-primary, #1f5f57); background: rgba(31, 95, 87, .08); box-shadow: inset 0 0 0 1px var(--bs-primary, #1f5f57); }
.cm-pick-t { min-width: 0; flex: 1 1 auto; }
.cm-pick-t strong { display: block; overflow-wrap: anywhere; }
.cm-pick-t small { color: var(--bs-secondary-color, #6c757d); }
.cm-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bs-border-color, #ced4da); display: grid; place-items: center; color: transparent; flex: none; }
.cm-pick.cm-on .cm-check { background: var(--bs-primary, #1f5f57); border-color: var(--bs-primary, #1f5f57); color: #fff; }
.cm-more { width: 100%; margin-block-start: .6rem; }
.cm-note { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; padding: .55rem .75rem; margin-block-end: .6rem; border-radius: 10px; background: var(--bs-tertiary-bg, #f3f3f3); font-size: .9rem; }
.cm-link { background: none; border: 0; padding: 0 .3rem; min-height: 44px; color: var(--bs-primary, #1f5f57); font-weight: 700; text-decoration: underline; cursor: pointer; }
.cm-alert { padding: .6rem .8rem; margin-block-end: .6rem; border-radius: 10px; background: #fdecec; color: #8b1e1e; font-size: .92rem; }
.cm-hint { font-size: .85rem; color: var(--bs-secondary-color, #6c757d); }
.cm-spin { width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: cm-rot .7s linear infinite; display: inline-block; }
@keyframes cm-rot { to { transform: rotate(360deg); } }
.cm-toast { position: fixed; inset-inline: 0; bottom: calc(5rem + env(safe-area-inset-bottom)); z-index: 1130; margin: 0 auto; width: max-content; max-width: calc(100% - 2rem); padding: .7rem 1.1rem; border-radius: 999px; background: #1b1b1b; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.cm-toast.cm-on { opacity: 1; transform: none; }
.cm-toast.cm-err { background: #8b1e1e; }
@media (min-width: 768px) {
    .cm { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
    .cm-sheet { bottom: auto !important; top: 50%; max-height: 86dvh; border-radius: 1.25rem; transform: translateY(-40%); opacity: 0; transition: transform .2s, opacity .2s; padding-bottom: 0; }
    .cm-sheet.cm-in { transform: translateY(-50%); opacity: 1; }
    .cm-grab { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cm-sheet, .cm-back, .cm-toast { transition: none; } .cm-skel, .cm-spin { animation: none; } }

/* ---- Find by face (.fmx-*) ------------------------------------------------------------------------------------------------ */
.fmx { max-width: 960px; margin: 0 auto; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.fmx-top { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; position: sticky; top: 0; background: var(--ft-surface, #fff); z-index: 5; }
.fmx-ibtn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid var(--ft-border, #e7dfd3); color: inherit; text-decoration: none; }
.fmx-who { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.fmx-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--ft-soft, #f3ece2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fmx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fmx-ttl { min-width: 0; }
.fmx-ttl h1 { font-size: 1.05rem; margin: 0; }
.fmx-ttl p { margin: 0; font-size: .85rem; color: var(--ft-muted, #6b6258); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmx-body { display: flex; flex-direction: column; gap: 1rem; }
.fmx-card { border: 1px solid var(--ft-border, #e7dfd3); border-radius: 16px; padding: 1rem; background: var(--ft-surface, #fff); }
.fmx-card h2, .fmx-results h2 { font-size: 1rem; margin: 0 0 .5rem; }
.fmx-results h2 small { font-weight: 400; color: var(--ft-muted, #6b6258); margin-inline-start: .35rem; }
.fmx-card p { margin: 0 0 .6rem; }
.fmx-muted { color: var(--ft-muted, #6b6258); font-size: .88rem; }
.fmx-check { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem 0; min-height: 44px; }
.fmx-check input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.fmx-lbl { display: block; font-size: .85rem; margin: .5rem 0 .25rem; }
.fmx-input { width: 100%; min-height: 44px; border: 1px solid var(--ft-border, #d9cfc0); border-radius: 12px; padding: .5rem .75rem; font-size: 16px; background: transparent; color: inherit; }
.fmx-btn { min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--ft-border, #d9cfc0); background: transparent; color: inherit; font-weight: 500; cursor: pointer; }
.fmx-btn:disabled { opacity: .55; cursor: default; }
.fmx-primary { background: var(--ft-accent, #7a4b2a); border-color: var(--ft-accent, #7a4b2a); color: #fff; }
.fmx-danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.fmx-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.fmx-row .fmx-btn { flex: 1 1 140px; }
.fmx-warn { border: 1px solid #e3b4b0; background: rgba(179, 38, 30, .06); border-radius: 12px; padding: .75rem; }
.fmx-state { text-align: center; padding: 2rem 1rem; }
.fmx-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 576px) { .fmx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .fmx-grid { grid-template-columns: repeat(3, 1fr); } }
.fmx-match { border: 1px solid var(--ft-border, #e7dfd3); border-radius: 16px; overflow: hidden; background: var(--ft-surface, #fff); padding-bottom: .75rem; }
.fmx-photo { position: relative; background: #111; }
.fmx-photo img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.fmx-box { position: absolute; border: 2px solid #ffd54f; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none; }
.fmx-band { position: absolute; top: 8px; inset-inline-start: 8px; background: rgba(0, 0, 0, .65); color: #fff; font-size: .75rem; padding: .2rem .55rem; border-radius: 999px; }
.fmx-band.fmx-strong { background: #1b6e3c; }
.fmx-meta { padding: .25rem .75rem 0; min-height: 44px; display: flex; align-items: center; }
.fmx-link { color: inherit; font-size: .9rem; display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmx-match .fmx-row { padding: 0 .75rem; }
.fmx-more { text-align: center; margin-top: 1rem; }
.fmx-empty { padding: 1.5rem 0; text-align: center; color: var(--ft-muted, #6b6258); }
.fmx-toast { position: fixed; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); background: #222; color: #fff; padding: .75rem 1rem; border-radius: 12px; display: flex; gap: .75rem; align-items: center; justify-content: space-between; z-index: 1080; max-width: 560px; margin-inline: auto; }
.fmx-toast.fmx-err { background: #8c1d18; }
.fmx-toast button { background: transparent; border: 0; color: #ffd54f; font-weight: 600; min-height: 44px; padding: 0 .5rem; }
[dir="rtl"] .fmx-flip { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .fmx * { transition: none !important; animation: none !important; } }

/* Select several */
.fmx-tools { display: flex; justify-content: flex-end; margin: .25rem 0 .5rem; }
.fmx-match { position: relative; }
.fmx-selecting .fmx-match { cursor: pointer; }
.fmx-selecting .fmx-photo { pointer-events: none; }
.fmx-selecting .fmx-meta a { position: relative; z-index: 2; }
.fmx-picked { outline: 3px solid var(--bs-primary, #0d6efd); outline-offset: -3px; }
.fmx-pickwrap { position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 3; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.85); border-radius: 12px; margin: 0; }
.fmx-pick { width: 1.5rem; height: 1.5rem; }
.fmx-bar { position: sticky; inset-block-end: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: var(--ft-surface, #fff); border-top: 1px solid var(--ft-border, #e7dfd3); box-shadow: 0 -4px 12px rgba(0,0,0,.08); }
.fmx-bar-n { flex: 1 1 100%; font-weight: 600; }
.fmx-bar .fmx-btn { flex: 1 1 120px; min-height: 44px; }

/* Profile photo dialog, per-photo results, people rows in the viewer */
.pa-dlg { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.6); padding: 0; }
.pa-dlg[hidden] { display: none; }
.pa-card { width: 100%; max-width: 520px; max-height: 100dvh; overflow-y: auto; background: var(--ft-card, #fff); color: var(--bs-body-color); border-radius: 16px 16px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
@media (min-width: 576px) { .pa-dlg { align-items: center; padding: 16px; } .pa-card { border-radius: 16px; } }
.pa-body { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.pa-stagewrap { flex: 1 1 240px; display: flex; justify-content: center; }
.pa-canvas { width: min(100%, 280px); aspect-ratio: 1 / 1; border-radius: 12px; background: #111; touch-action: none; cursor: grab; }
.pa-side { flex: 0 0 110px; }
.pa-prev, .pa-cur { border-radius: 50%; object-fit: cover; border: 1px solid var(--ft-border, #dee2e6); }
.pa-dlg .btn { min-height: 44px; }
.pa-x { min-width: 44px; min-height: 44px; }
.pa-skips { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.pa-skips li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pa-skip-th { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.pa-skip-t { flex: 1 1 200px; min-width: 0; }
.pa-clear { min-height: 44px; }
html.pa-open { overflow: hidden; }
.pv-person { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.pv-pbtn { min-height: 40px; display: inline-flex; align-items: center; }
.pv-saved { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: rgba(25,135,84,.35); }
.tw-people { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tw-person-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tw-person-row .tw-person-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex: 1 1 140px; min-width: 0; text-decoration: none; color: inherit; }
.tw-person-row .btn { min-height: 44px; }
.pa-return { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }

/* ---- Photo editor (photo-edit.js) ---- */
body.pe-open { overflow: hidden; }
.pe-root { position: fixed; inset: 0; z-index: 2200; display: flex; flex-direction: column; background: #111; color: #fff; font-size: 15px; touch-action: manipulation; }
.pe-top { display: flex; align-items: center; gap: 6px; padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top)); background: #1b1b1b; }
.pe-title { flex: 1 1 auto; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-top-actions { display: flex; gap: 6px; align-items: center; }
.pe-btn { min-width: 44px; min-height: 44px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff; border-radius: 10px; padding: 0 12px; font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.pe-btn:disabled { opacity: .4; cursor: default; }
.pe-btn:focus-visible, .pe-chip:focus-visible, .pe-tab:focus-visible, .pe-link:focus-visible, .pe-mini:focus-visible, .pe-stage:focus-visible { outline: 3px solid #ffb27a; outline-offset: 2px; }
.pe-primary { background: var(--ft-primary, #1F5F57); border-color: var(--ft-primary, #1F5F57); font-weight: 600; }
.pe-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; background: #0b0b0b; outline: none; }
.pe-vp { position: relative; transform-origin: 50% 50%; will-change: transform; }
.pe-canvas { display: block; width: 100%; height: 100%; background: repeating-conic-gradient(#222 0 25%, #1a1a1a 0 50%) 0 0 / 16px 16px; user-select: none; -webkit-user-select: none; }
.pe-crop { position: absolute; pointer-events: none; }
.pe-crop[hidden] { display: none; }
.pe-box { position: absolute; inset: 0; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); pointer-events: auto; cursor: move; touch-action: none;
  background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 33.333% 33.333%; }
.pe-h { position: absolute; width: calc(30px / var(--pe-z, 1)); height: calc(30px / var(--pe-z, 1)); margin: calc(-15px / var(--pe-z, 1)); pointer-events: auto; touch-action: none; }
.pe-h::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(12px / var(--pe-z, 1)); height: calc(12px / var(--pe-z, 1)); transform: translate(-50%, -50%); background: #fff; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.pe-h-nw { left: 0; top: 0; cursor: nwse-resize; } .pe-h-n { left: 50%; top: 0; cursor: ns-resize; } .pe-h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.pe-h-e { left: 100%; top: 50%; cursor: ew-resize; } .pe-h-se { left: 100%; top: 100%; cursor: nwse-resize; } .pe-h-s { left: 50%; top: 100%; cursor: ns-resize; }
.pe-h-sw { left: 0; top: 100%; cursor: nesw-resize; } .pe-h-w { left: 0; top: 50%; cursor: ew-resize; }
.pe-zoom { position: absolute; inset-inline-end: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.pe-zoom .pe-btn { background: rgba(0,0,0,.55); }
.pe-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; z-index: 3; background: #0b0b0b; }
.pe-loading[hidden] { display: none; }
.pe-bad { color: #ffb4a8; }
.pe-panel { background: #1b1b1b; padding: 8px 12px 4px; max-height: 38vh; overflow-y: auto; }
.pe-status { min-height: 20px; font-size: 13px; color: #cfe9e4; }
.pe-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.pe-chip { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: inherit; cursor: pointer; }
.pe-chip.on { background: #fff; color: #111; font-weight: 600; }
.pe-custom { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.pe-custom input { width: 72px; min-height: 44px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: #111; color: #fff; padding: 0 8px; text-align: center; }
.pe-row { display: grid; grid-template-columns: 96px 1fr 38px 44px; align-items: center; gap: 8px; min-height: 44px; }
.pe-row input[type=range] { width: 100%; min-height: 32px; accent-color: #6fd0c2; }
.pe-row output { text-align: end; font-variant-numeric: tabular-nums; font-size: 13px; }
.pe-mini { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: #cfe9e4; border-radius: 8px; cursor: pointer; }
.pe-foot { display: flex; justify-content: flex-end; padding: 2px 0 4px; }
.pe-link { min-height: 44px; border: 0; background: transparent; color: #cfe9e4; text-decoration: underline; font: inherit; cursor: pointer; }
.pe-tabs { display: flex; background: #151515; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgba(255,255,255,.12); }
.pe-tab { flex: 1 1 0; min-height: 56px; border: 0; background: transparent; color: #bdbdbd; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; font-size: 12px; cursor: pointer; }
.pe-tab.active { color: #fff; box-shadow: inset 0 3px 0 #6fd0c2; }
.pe-sheet { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.6); }
.pe-sheet[hidden] { display: none; }
.pe-sheet .pe-card { width: 100%; max-width: 520px; background: #222; color: #fff; border-radius: 16px 16px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); max-height: 100%; overflow-y: auto; }
@media (min-width: 576px) { .pe-sheet { align-items: center; padding: 16px; } .pe-sheet .pe-card { border-radius: 16px; } }
.pe-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; min-height: 44px; cursor: pointer; }
.pe-opt input { margin-top: 4px; width: 20px; height: 20px; flex: 0 0 auto; }
.pe-opt small { color: #bdbdbd; }
.pe-dis { opacity: .55; }
.pe-prof { border-top: 1px solid rgba(255,255,255,.15); margin-top: 8px; padding-top: 8px; }
.pe-sheet-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; }
@media (max-height: 520px) and (orientation: landscape) { .pe-panel { max-height: 30vh; } .pe-tab { min-height: 44px; flex-direction: row; justify-content: center; gap: 6px; } }
@media (prefers-reduced-motion: no-preference) { .pe-vp { transition: none; } }

/* ---- Move / resize face boxes (boxedit.js) ---- */
.tw-boxbar { display: grid; gap: 6px; padding: 8px; margin-bottom: 6px; border: 1px solid var(--ft-border); border-radius: 12px; background: var(--ft-card, #fff); }
.tw-boxbar-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tw-boxbar .btn { min-height: 44px; min-width: 44px; }
.tw-boxbar-main { justify-content: flex-end; }
.tw-boxbar-main .btn-primary { flex: 1 1 140px; }
.tw-boxbar-msg { color: var(--ft-ink-soft); }
.tw-boxediting { outline: 2px solid var(--bs-primary); }
.tw-box.tw-dirty { border-style: dashed; border-color: #fd7e14; box-shadow: 0 0 0 2px rgba(253,126,20,.35); }
.tw-box.tw-active.tw-dirty { border: 3px dashed #fd7e14; }
.tw-boxediting .tw-box.tw-active { cursor: move; touch-action: none; }
.tw-h { position: absolute; width: calc(34px / var(--tw-z, 1)); height: calc(34px / var(--tw-z, 1)); margin: calc(-17px / var(--tw-z, 1)); touch-action: none; z-index: 3; }
.tw-h::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(14px / var(--tw-z, 1)); height: calc(14px / var(--tw-z, 1)); transform: translate(-50%, -50%); background: #fff; border: calc(2px / var(--tw-z, 1)) solid #0d6efd; border-radius: 4px; box-shadow: 0 0 2px rgba(0,0,0,.6); }
.tw-h-nw { left: 0; top: 0; cursor: nwse-resize; } .tw-h-n { left: 50%; top: 0; cursor: ns-resize; } .tw-h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.tw-h-e { left: 100%; top: 50%; cursor: ew-resize; } .tw-h-se { left: 100%; top: 100%; cursor: nwse-resize; } .tw-h-s { left: 50%; top: 100%; cursor: ns-resize; }
.tw-h-sw { left: 0; top: 100%; cursor: nesw-resize; } .tw-h-w { left: 0; top: 50%; cursor: ew-resize; }
.tw-box.tw-active .tw-label { top: auto; bottom: calc(100% + 10px); }
.tw-viewer.tw-fs { position: fixed; inset: 0; z-index: 1060; background: var(--bs-body-bg); padding: 8px; padding-top: calc(8px + env(safe-area-inset-top)); overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.tw-viewer.tw-fs .tw-stage img { max-height: calc(100dvh - 230px); }
.tw-viewer.tw-fs .tw-legend, .tw-viewer.tw-fs .tw-nav, .tw-viewer.tw-fs #tw-help, .tw-viewer.tw-fs .tw-where { display: none; }
body.tw-fs-open { overflow: hidden; }
@media (max-width: 991.98px) { #tw-page.tw-boxmode #tw-panel { display: none; } }
.tw-boxbar { position: sticky; bottom: 0; z-index: 5; margin-top: 6px; margin-bottom: 0; box-shadow: 0 -2px 8px rgba(0,0,0,.12); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }