:root {
    --bg: #f7f8fa;
    --card: #ffffff;
    --text: #172033;
    --muted: #6b7280;
    --border: #dfe3e8;
    --accent: #315b7d;
    --accent-soft: #eaf1f6;
    --danger: #a33b3b;
    --shadow: 0 8px 28px rgba(24, 34, 50, .07);
}

/* Persistent support notifications */
.notification-center{position:relative;display:flex;align-items:center}.notification-bell{position:relative;min-width:46px;padding-left:12px;padding-right:12px;font-size:17px}.notification-badge{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border:2px solid #fff;border-radius:999px;background:#dc2626;color:#fff;font-size:10px;font-weight:900;line-height:16px;text-align:center}.notification-panel{position:absolute;z-index:1500;top:calc(100% + 12px);right:0;width:min(390px,calc(100vw - 28px));max-height:480px;overflow:hidden;border:1px solid #dbe2ea;border-radius:16px;background:#fff;box-shadow:0 18px 48px rgba(15,23,42,.2)}.notification-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #e8edf3}.notification-panel-heading button{border:0;background:transparent;color:#315f8d;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.notification-list{max-height:390px;overflow-y:auto}.notification-item{display:flex;width:100%;flex-direction:column;gap:4px;padding:13px 16px;border:0;border-bottom:1px solid #edf1f5;background:#f8fbff;color:#14213d;text-align:left;cursor:pointer}.notification-item:hover,.notification-item:focus-visible{background:#eaf3fc;outline:none}.notification-item strong{font-size:13px}.notification-item span{color:#475569;font-size:12px;line-height:1.4}.notification-item small{color:#718096;font-size:10px}.notification-empty{margin:0;padding:24px 16px;color:#64748b;text-align:center}.notification-panel[hidden],.notification-badge[hidden],.notification-empty[hidden],.notification-panel-heading button[hidden]{display:none!important}

@media(max-width:700px){.notification-panel{position:fixed;top:72px;right:14px;left:14px;width:auto}.notification-bell{min-width:42px}}

* { box-sizing: border-box; }

html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); }

body { margin: 0; }

a { color: var(--accent); text-decoration: none; }

a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; }

button, a.button { min-height: 42px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.hidden { display: none !important; }

.muted { color: var(--muted); }

.eyebrow { color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.topbar { min-height: 64px; display: flex; gap: 16px; align-items: center; padding: 10px 22px; background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }

.brand { color: var(--text); font-weight: 850; font-size: 1.15rem; text-decoration: none; }

.search-wrap { position: relative; flex: 1; max-width: 660px; margin-inline: auto; }

.search-wrap input { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; background: var(--bg); color: var(--text); }

.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; z-index: 100; }

.search-result { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; padding: 11px 13px; text-align: left; cursor: pointer; color: var(--text); }

.search-result:last-child { border-bottom: 0; }

.search-result:hover, .search-result:focus { background: var(--accent-soft); outline: none; }

.search-result small { display: block; color: var(--muted); margin-top: 2px; }

.top-actions, .actions, .toolbar-controls, .panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent); border-radius: 9px; padding: 8px 13px; background: var(--accent); color: white; cursor: pointer; font-weight: 700; text-decoration: none; }

.button:hover { filter: brightness(.96); text-decoration: none; }

.button.secondary { background: var(--card); color: var(--text); border-color: var(--border); }

.button:disabled { opacity: .45; cursor: not-allowed; }
.button.disabled-button { opacity:.45; cursor:not-allowed; pointer-events:none; }

.page { width: min(1500px, 100%); margin: 0 auto; padding: 20px; }

.page.narrow { width: min(1100px, 100%); }

.form-page { width: min(850px, 100%); }

.page-heading, .tree-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 15px; }

h1 { margin: 3px 0 0; font-size: clamp(1.35rem, 2vw, 1.85rem); }

h2 { margin: 8px 0 2px; font-size: 1.25rem; }

.toolbar-controls label { font-size: .78rem; font-weight: 700; color: var(--muted); }

.toolbar-controls select { display: block; margin-top: 3px; min-height: 39px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; background: var(--card); color: var(--text); }

.tree-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; align-items: start; }

.tree-surface { min-height: 650px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow: auto; box-shadow: var(--shadow); position: relative; }

.tree-status { padding: 12px 14px; font-size: .86rem; color: var(--muted); border-bottom: 1px solid var(--border); }

.tree-canvas { min-width: 800px; padding: 30px 24px 54px; }

.details-panel { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 16px; box-shadow: var(--shadow); position: sticky; top: 80px; }

.detail-avatar, .person-avatar { display: grid; place-items: center; overflow: hidden; background: var(--accent-soft); color: var(--accent); font-weight: 850; }

.detail-avatar { width: 76px; height: 76px; border-radius: 50%; margin-top: 12px; }

.detail-avatar img, .person-avatar img { width: 100%; height: 100%; object-fit: cover; }

.relationship-badge { margin: 12px 0; padding: 8px 10px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: .82rem; font-weight: 700; }

.facts { margin: 13px 0; }

.facts > div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid #edf0f2; font-size: .86rem; }

.facts dt { color: var(--muted); font-weight: 700; }

.facts dd { margin: 0; overflow-wrap: anywhere; }

.relative-group { margin: 12px 0; }

.relative-group h3 { margin: 0 0 5px; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.relative-link { display: block; border: 0; background: transparent; color: var(--accent); padding: 3px 0; cursor: pointer; text-align: left; }


.tree-level { position: relative; margin: 0 auto 42px; text-align: center; }

.level-label { margin-bottom: 13px; color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }

.person-row { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; position: relative; }

.person-card { width: 154px; min-height: 104px; border: 1px solid var(--border); border-radius: 13px; background: var(--card); padding: 11px; text-align: left; cursor: pointer; box-shadow: 0 3px 12px rgba(20, 30, 45, .05); color: var(--text); position: relative; }

.person-card:hover { border-color: #aeb8c3; transform: translateY(-1px); }

.person-card:focus-visible { outline: 3px solid rgba(49,91,125,.25); outline-offset: 2px; }

.person-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(49,91,125,.13); }

.person-card.focused::after { content: "FOCUS"; position: absolute; top: 8px; right: 8px; border-radius: 999px; padding: 2px 6px; background: var(--accent-soft); color: var(--accent); font-size: .58rem; font-weight: 900; letter-spacing: .06em; }

.person-avatar { width: 50px; height: 50px; border-radius: 50%; margin-bottom: 8px; font-size: .78rem; }

.person-name { font-size: .9rem; font-weight: 800; line-height: 1.2; padding-right: 26px; }

.person-life, .person-place { margin-top: 4px; font-size: .73rem; color: var(--muted); line-height: 1.25; }

.vertical-line { width: 2px; height: 25px; background: var(--border); margin: -28px auto 10px; }

.focus-union { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.focus-union .spouse-separator { align-self: center; color: var(--muted); font-weight: 800; }

.list-view { width: min(900px, 100%); margin: 0 auto; }

.list-person { width: 100%; display: grid; grid-template-columns: minmax(180px,2fr) 1fr 1.5fr; gap: 10px; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; color: var(--text); }

.list-person:hover { background: var(--accent-soft); }

.list-person strong { font-size: .9rem; }

.list-person span { color: var(--muted); font-size: .82rem; }

.empty-tree { padding: 60px 20px; text-align: center; color: var(--muted); }
.empty-tree-guidance{display:flex;min-height:360px;flex-direction:column;align-items:center;justify-content:center;gap:12px}.empty-tree-guidance h2{margin:0;color:var(--text);font-size:1.45rem}.empty-tree-guidance p{max-width:540px;margin:0 0 6px;line-height:1.6}.empty-tree-guidance .button{color:#fff}


.form-card, .table-card { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 18px; box-shadow: var(--shadow); margin-top: 16px; }

.form-card > label, .form-grid label { display: block; font-size: .82rem; font-weight: 750; color: var(--text); margin-bottom: 13px; }

.form-card input:not([type=checkbox]), .form-card select, .form-card textarea { width: 100%; min-height: 42px; margin-top: 5px; border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; background: var(--card); color: var(--text); }

.form-card textarea { resize: vertical; }

.form-grid { display: grid; gap: 12px; }

.form-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }

.form-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }

.checkbox { display: flex !important; align-items: center; gap: 8px; }

.alert { border: 1px solid #e2aaaa; border-radius: 9px; background: #fff3f3; color: var(--danger); padding: 10px; margin-bottom: 12px; }

.form-card small { display: block; color: var(--danger); margin-top: 4px; }

.table-card { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th, td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: .86rem; }

th { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }


@media (max-width: 950px) {
    .tree-layout { grid-template-columns: 1fr; }

    .details-panel { position: static; }

    .tree-surface { min-height: 520px; }

}

@media (max-width: 700px) {
    .topbar { flex-wrap: wrap; padding: 10px 12px; }

    .brand { width: 100%; }

    .search-wrap { order: 3; width: 100%; max-width: none; }

    .top-actions { margin-left: auto; }

    .page { padding: 13px; }

    .page-heading, .tree-toolbar { align-items: flex-start; flex-direction: column; }

    .form-grid.two, .form-grid.three { grid-template-columns: 1fr; }

    .tree-canvas { min-width: 680px; padding-inline: 14px; }

    .person-card { width: 137px; }

}



/* =========================
   Branch-based family view
   ========================= */
.branch-tree {
    min-width: 980px;
    width: max-content;
    min-height: 560px;
    margin: 0 auto;
    padding: 6px 34px 45px;
    text-align: center;
}

.branch-section-label {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.origin-branches {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 76px;
    margin: 0 auto;
}

.origin-branch {
    min-width: 340px;
    position: relative;
    padding: 0 18px;
}

.origin-branch::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 0;
    height: 20px;
    border-left: 2px solid var(--border);
}

.origin-parent {
    display: flex;
    justify-content: center;
}

.branch-caption {
    margin-top: 7px;
    color: var(--muted);
    font-size: .66rem;
}

.family-union {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.couple-node {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    position: relative;
}

.couple-node.compact .person-card {
    width: 142px;
}

.partner-link {
    width: 38px;
    min-width: 38px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.partner-link > span {
    display: block;
    width: 100%;
    height: 0;
    border-top: 2px solid #aeb7c1;
}

.partner-link::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 2px solid #aeb7c1;
    border-radius: 50%;
    background: var(--card);
    transform: translate(-50%, -50%);
}

.branch-stem {
    width: 0;
    height: 28px;
    margin: 0 auto;
    border-left: 2px solid #aeb7c1;
}

.branch-stem.long {
    height: 42px;
}

.sibling-generation,
.descendant-families {
    position: relative;
}

.branch-children-row,
.child-family-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 34px;
    position: relative;
    padding-top: 24px;
}

.branch-children-row::before,
.child-family-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 0;
    border-top: 2px solid #aeb7c1;
}

.sibling-branch,
.child-family-branch {
    min-width: 180px;
    position: relative;
    padding-top: 20px;
}

.sibling-branch::before,
.child-family-branch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 20px;
    border-left: 2px solid #aeb7c1;
}

.active-family-branch {
    padding: 19px 15px 15px;
    margin-top: 1px;
    border: 1px solid #c5d5e2;
    border-radius: 17px;
    background: #f7fbfe;
}

.active-family-branch::before {
    top: -1px;
}

.focus-family-tag {
    display: inline-block;
    margin-top: 8px;
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.child-family-branch {
    min-width: 260px;
    padding-inline: 13px;
}

.grandchild-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    position: relative;
    padding-top: 19px;
}

.grandchild-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 0;
    border-top: 2px solid #aeb7c1;
}

.grandchild-row > .person-card {
    position: relative;
}

.grandchild-row > .person-card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -20px;
    width: 0;
    height: 19px;
    border-left: 2px solid #aeb7c1;
}

@media (max-width: 700px) {
    .branch-tree {
        min-width: 880px;
        padding-inline: 18px;
    }

    .origin-branches {
        gap: 34px;
    }

    .origin-branch {
        min-width: 300px;
        padding-inline: 8px;
    }

    .branch-children-row,
    .child-family-row {
        gap: 22px;
    }

}


/* Relationship labels displayed directly in tree cards */
.person-relation {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-top: 6px;
    border: 1px solid #d9e2e9;
    border-radius: 999px;
    padding: 2px 7px;
    background: #f5f8fa;
    color: #516270;
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .02em;
}

.person-card.focused .person-relation {
    border-color: #c1d4e2;
    background: var(--accent-soft);
    color: var(--accent);
}


/* Text family importer */
.import-page { width: min(980px, 100%); }

.import-help {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    padding: 16px;
}

.import-help h2 { margin-top: 0; }

.import-format-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.import-format-grid > div {
    min-width: 0;
    border-radius: 10px;
    background: var(--bg);
    padding: 12px;
}

.import-format-grid strong { display: block; margin-bottom: 7px; }

.import-format-grid code {
    display: block;
    overflow-wrap: anywhere;
    white-space: normal;
    color: var(--accent);
    font-size: .78rem;
}

.import-success {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    border: 1px solid #a9cfb8;
    border-radius: 12px;
    background: #f1fbf4;
    padding: 14px;
}

.import-success .button { width: max-content; }

.import-warnings { color: #755b18; font-size: .82rem; }

.import-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 16px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
}

.import-or::before, .import-or::after { content: ""; height: 1px; flex: 1; background: var(--border); }

.field-help { display: block; margin-top: 5px; color: var(--muted) !important; font-size: .76rem; }

@media (max-width: 700px) {
    .import-format-grid { grid-template-columns: 1fr; }

}



/* Exact-layout family tree printing */
.print-tree-heading { display: none; }


@media print {
    @page {
        size: landscape;
        margin: 7mm;
    }


    html, body {
        background: #fff !important;
        color: #111 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }


    /* Only the tree itself and its print heading are printed. */
    .topbar,
    .tree-toolbar,
    .details-panel,
    .tree-status,
    .search-results {
        display: none !important;
    }


    .page,
    .tree-page,
    .tree-layout,
    .tree-surface {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }


    .print-tree-heading {
        display: block !important;
        margin: 0 0 4mm !important;
        text-align: center;
        break-after: avoid;
    }


    .print-tree-title {
        font-size: 15pt;
        font-weight: 800;
        line-height: 1.1;
    }


    .print-focus-name {
        margin-top: 1.5mm;
        color: #555;
        font-size: 8.5pt;
    }


    /* IMPORTANT: keep the exact browser layout. JS sets --print-scale immediately
       before printing so the complete rendered tree fits on a single landscape page. */
    .tree-canvas {
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
        zoom: var(--print-scale, 1);
    }


    .branch-tree {
        width: max-content !important;
        min-width: 980px !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 6px 34px 20px !important;
    }


    /* Keep all relationships/branches in their original layout rather than
       letting the print engine move an entire branch onto another page. */
    .branch-tree,
    .origin-branches,
    .family-union,
    .sibling-generation,
    .descendant-families,
    .branch-children-row,
    .child-family-row,
    .origin-branch,
    .child-family-branch,
    .sibling-branch,
    .couple-node,
    .grandchild-row,
    .person-card {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }


    /* Force connector lines and outlines to print. They are borders rather than
       background fills, so Chrome/Edge print them even when Background graphics is off. */
    .partner-link > span,
    .branch-stem,
    .origin-branch::after,
    .branch-children-row::before,
    .child-family-row::before,
    .sibling-branch::before,
    .child-family-branch::before,
    .grandchild-row::before,
    .grandchild-row > .person-card::before {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        border-color: #7d8994 !important;
    }


    .person-card,
    .active-family-branch,
    .person-relation,
    .focus-family-tag,
    .relationship-badge {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }


    .person-card {
        box-shadow: none !important;
    }


    .generation,
    .generation-row,
    .list-view {
        overflow: visible !important;
        break-inside: avoid !important;
    }

}


/* Person photo upload */
.photo-upload-block {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}

.field-title { font-weight: 800; margin-bottom: 9px; }

.photo-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 2px solid var(--border);
    background: var(--accent-soft);
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
}

.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-upload-controls { min-width: 0; }

.family-package-help,
.plain-text-import {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
}

.family-package-help pre {
    overflow-x: auto;
    padding: 14px;
    border-radius: 10px;
    background: #f5f7f9;
    border: 1px solid var(--border);
    font-size: .82rem;
    line-height: 1.55;
}

.compact-form { margin-top: 14px; }


@media (max-width: 650px) {
    .photo-upload-block { grid-template-columns: 1fr; }

}


@media print {
    .person-avatar img,
    .detail-avatar img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

}



/* Photo controls in Add/Edit Person */
.photo-edit-panel {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    flex-wrap: wrap;
}

.photo-preview-wrap {
    width: 110px;
    height: 110px;
    flex: 0 0 110px;
}

.photo-edit-preview,
.photo-edit-placeholder {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px solid var(--border);
}

.photo-edit-preview {
    object-fit: cover;
    display: block;
}

.photo-edit-placeholder {
    display: grid;
    place-items: center;
    background: var(--panel);
    color: var(--muted);
    font-weight: 700;
    text-align: center;
    padding: 8px;
}

.photo-edit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.photo-edit-actions .form-help {
    flex-basis: 100%;
    margin: 0;
}

.btn-danger-outline {
    border: 1px solid #b91c1c;
    color: #991b1b;
    background: transparent;
}

.btn-danger-outline:hover {
    background: #fff1f2;
}

.remove-photo-checkbox {
    display: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 640px) {
    .photo-edit-panel {
        align-items: flex-start;
    }

}



/* ===== Multi-user public/auth UI ===== */
.public-nav {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px clamp(18px, 5vw, 72px);
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--border);
}

.public-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.landing-body { background: #f7f9f7; }

.hero {
    width: min(1260px, 100%);
    margin: 0 auto;
    padding: clamp(44px, 8vw, 92px) 24px 54px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
    align-items: center;
    gap: 46px;
}

.hero-copy h1 {
    margin: 10px 0 18px;
    max-width: 720px;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.hero-copy > p {
    max-width: 680px;
    color: var(--muted);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.7;
}

.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 25px; }

.hero-primary { padding-inline: 19px; }

.hero-points { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; color: #51605a; font-size: .9rem; }

.hero-art {
    border-radius: 32px;
    background: linear-gradient(145deg, #eff5f1, #f9fbfa);
    border: 1px solid #dce8e0;
    padding: 16px;
    box-shadow: 0 28px 70px rgba(57,76,65,.12);
}

.hero-art svg { display: block; width: 100%; height: auto; }

.feature-strip {
    width: min(1160px, 100%);
    margin: 0 auto;
    padding: 14px 24px 72px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}

.feature-strip article {
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
}

.feature-strip h2 { margin: 12px 0 8px; }

.feature-strip p { margin: 0; color: var(--muted); line-height: 1.6; }

.feature-icon { font-size: 1.7rem; }

.landing-cta {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto 70px;
    border-radius: 24px;
    background: #1f3342;
    color: white;
    padding: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
}

.landing-cta h2 { font-size: 2rem; margin: 6px 0; }

.landing-cta p { color: #d7e0e5; max-width: 720px; }

.landing-cta .eyebrow { color: #c6d4dd; }

.public-footer { text-align: center; padding: 28px; color: var(--muted); border-top: 1px solid var(--border); background: white; }


.auth-body { min-height: 100vh; background: linear-gradient(145deg,#f6f9f7,#edf3ef); }

.auth-shell {
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: 50px 22px;
    display: grid;
    grid-template-columns: 1fr 470px;
    align-items: center;
    gap: 58px;
}

.auth-intro h1 { font-size: clamp(2rem,4vw,3.6rem); line-height: 1.02; margin: 10px 0 16px; }

.auth-intro p { color: var(--muted); font-size: 1.05rem; line-height: 1.65; }

.auth-card {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: white;
    box-shadow: 0 24px 60px rgba(25,40,31,.11);
    padding: 28px;
}

.auth-card > h1, .auth-card > h2 { margin-top: 6px; }

.auth-card form > label, .auth-card .form-grid label {
    display: block;
    margin: 13px 0;
    font-size: .84rem;
    font-weight: 750;
}

.auth-card input, .auth-card select {
    width: 100%;
    min-height: 44px;
    margin-top: 5px;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 9px 10px;
    background: white;
}

.auth-card small { color: var(--danger); display: block; margin-top: 4px; }

.auth-submit { width: 100%; margin-top: 10px; }

.auth-switch { text-align: center; color: var(--muted); font-size: .9rem; margin: 18px 0 0; }

.auth-single { width: min(520px,100%); margin: 0 auto; padding: 64px 18px; }

.signin-card { text-align: left; }

.auth-logo-mark { font-size: 2.5rem; margin-bottom: 8px; }

.success { border: 1px solid #a9d6bb; background: #f0fbf4; color: #23613a; border-radius: 9px; padding: 10px; margin: 12px 0; }

.dev-code { border: 1px dashed #b28a33; background: #fffaf0; color: #6c5216; border-radius: 9px; padding: 12px; margin: 12px 0; }

.dev-code small { display: block; color: #7b6940; margin-top: 4px; }

.verification-input { font-size: 1.4rem; letter-spacing: .32em; font-weight: 800; text-align: center; }

.resend-form { margin-top: 12px; text-align: center; }

.text-button { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-weight: 700; }

.mini-tree { margin-top: 30px; display: grid; justify-items: center; }

.mini-person { border: 1px solid #cad9d0; background: white; border-radius: 12px; padding: 10px 18px; font-weight: 750; box-shadow: 0 5px 16px rgba(20,40,28,.06); }

.mini-person.active { border-color: var(--accent); }

.mini-line { height: 28px; border-left: 2px solid #9eb4a7; }

.mini-row { display:flex; gap: 18px; position: relative; }

.mini-row::before { content:""; position:absolute; left:25%; right:25%; top:-10px; border-top:2px solid #9eb4a7; }

.admin-nav { margin-left: auto; }

.admin-stat { display:flex; flex-direction:column; min-width:100px; text-align:right; }

.admin-stat strong { font-size:1.7rem; }

.admin-stat span { color:var(--muted); font-size:.78rem; }

.admin-grid { display:grid; gap:18px; }

.account-actions { margin-left: auto; }

.top-actions form, .account-actions form { margin:0; }


/* Align title and tree controls */
.tree-toolbar { align-items: flex-end; }

.toolbar-controls { justify-content: flex-end; align-items: flex-end; }

.toolbar-controls > .button { height: 42px; }

.toolbar-controls label { display:flex; flex-direction:column; justify-content:flex-end; }


.remove-photo-visible { display:flex !important; }

.form-help { flex-basis:100%; margin:0; color:var(--muted); font-size:.78rem; }


@media (max-width: 900px) {
    .hero, .auth-shell { grid-template-columns: 1fr; }

    .hero-art { max-width: 680px; }

    .feature-strip { grid-template-columns: 1fr; }

}

@media (max-width: 700px) {
    .landing-cta { align-items:flex-start; flex-direction:column; }

    .public-nav { padding-inline:14px; }

    .auth-shell { padding-top:30px; }

}



/* ===== Admin full navigation ===== */

.admin-heading {
    align-items: flex-start;
}


.admin-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}


.admin-stat-card {
    min-width: 116px;
    padding: 15px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


.admin-stat-card strong {
    font-size: 1.65rem;
    line-height: 1;
}


.admin-stat-card span {
    margin-top: 5px;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
}


.admin-section {
    margin-top: 28px;
}


.section-heading-row {
    margin-bottom: 12px;
}


.section-heading-row h2 {
    margin: 3px 0 0;
}


.admin-tree-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
}


.admin-tree-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
}


.admin-tree-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}


.admin-owner-label {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}


.admin-owner {
    margin-top: 2px;
    font-weight: 800;
}


.role-badge {
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .05em;
}


.admin-tree-card h3 {
    margin: 18px 0 6px;
    font-size: 1.22rem;
}


.admin-tree-primary-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}


.admin-tree-primary-actions .button {
    min-height: 40px;
}


.admin-table-wrap {
    overflow-x: auto;
}


.empty-card {
    padding: 24px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    color: var(--muted);
    background: var(--card);
}


@media (max-width: 720px) {
    .admin-summary {
        width: 100%;
    }


    .admin-stat-card {
        flex: 1;
        align-items: flex-start;
    }


    .admin-tree-grid {
        grid-template-columns: 1fr;
    }

}



/* ==========================================================
   Inspired by classic picture-based family tree diagrams.
   ========================================================== */

.photo-family-tree {
    width: max-content;
    min-width: 900px;
    margin: 0 auto;
    padding: 22px 36px 48px;
    text-align: center;
}





.photo-couple-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}


.photo-person-card {
    --photo-accent: #496b91;

    width: 154px;
    min-height: 190px;

    border: 1px solid #dce1e6;
    border-bottom: 5px solid var(--photo-accent);
    border-radius: 30px 30px 7px 7px;

    background: #fff;

    padding: 13px 12px 12px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
    color: var(--text);

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(22, 34, 49, .06);
}


.photo-person-card.focus {
    --photo-accent: #476d9e;
}


.photo-person-card.spouse {
    --photo-accent: #9a6ab4;
}


.photo-person-card.parent {
    --photo-accent: #5a7ba5;
}


.photo-person-card.child,
.photo-person-card.sibling {
    --photo-accent: #4ea78f;
}


.photo-person-card.inlaw {
    --photo-accent: #b48752;
}


.photo-person-card.grandchild {
    --photo-accent: #73a7c7;
}


.photo-person-card.focused {
    outline: 3px solid rgba(55, 93, 133, .22);
    outline-offset: 4px;
}


.photo-person-card.selected {
    box-shadow:
        0 0 0 2px var(--photo-accent),
        0 9px 22px rgba(22, 34, 49, .11);
}

















.photo-partner-connector {
    width: 58px;
    min-width: 58px;
    height: 38px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}


.photo-partner-connector::before {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    border-top: 2px solid #5c6670;
}


.photo-partner-connector span {
    width: 10px;
    height: 10px;

    border: 2px solid #5c6670;
    border-radius: 50%;

    background: #fff;

    position: relative;
    z-index: 1;
}


.photo-partner-connector.small {
    width: 38px;
    min-width: 38px;
}


.photo-vertical-stem {
    width: 2px;
    height: 42px;

    margin: 0 auto;

    background: #5c6670;
}


.photo-vertical-stem.small {
    height: 30px;
}


.photo-child-section {
    position: relative;
}


.photo-children-row {
    min-width: max-content;

    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: 46px;

    padding-top: 32px;
}


.photo-children-row::before {
    content: "";

    position: absolute;

    top: 0;
    left: 7%;
    right: 7%;

    border-top: 2px solid #5c6670;
}


.photo-child-branch {
    min-width: 180px;

    position: relative;

    padding-top: 28px;
}


.photo-child-branch::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    height: 28px;

    border-left: 2px solid #5c6670;
}


.photo-child-family {
    display: flex;
    align-items: center;
    justify-content: center;
}


.photo-grandchildren-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: 18px;

    position: relative;

    padding-top: 28px;
}


.photo-grandchildren-row::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    border-top: 2px solid #5c6670;
}


.photo-grandchildren-row > .photo-person-card {
    position: relative;
}


.photo-grandchildren-row > .photo-person-card::before {
    content: "";

    position: absolute;

    top: -29px;
    left: 50%;

    height: 28px;

    border-left: 2px solid #5c6670;
}


.photo-parent-fallback {
    margin-top: 16px;
}





@media (max-width: 850px) {
    .photo-family-tree {
        min-width: 820px;
        padding-inline: 18px;
    }


    .photo-person-card {
        width: 142px;
    }


    .photo-children-row {
        gap: 28px;
    }

}


/* Print the photo-card theme with the same visible geometry. */
@media print {
    .photo-family-tree {
        width: max-content !important;
        min-width: 0 !important;

        margin: 0 auto !important;
        padding: 8px 12px 22px !important;

        break-inside: avoid !important;
        page-break-inside: avoid !important;

        transform-origin: top left;
    }


    .photo-person-card {
        box-shadow: none !important;

        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;

        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }


    .photo-partner-connector::before,
    .photo-children-row::before,
    .photo-child-branch::before,
    .photo-grandchildren-row::before,
    .photo-grandchildren-row > .photo-person-card::before {
        border-color: #343b42 !important;
    }


    .photo-vertical-stem {
        background: #343b42 !important;
    }


    

}



/* =========================================================
   Heritage Poster theme
   Warm, illustrated-pedigree-inspired family-tree treatment.
   ========================================================= */

.heritage-poster {
    --heritage-paper: #f5f1e7;
    --heritage-ink: #5d3f2b;
    --heritage-line: #4fa9a7;
    --heritage-muted: #6f817d;

    width: max-content;
    min-width: 940px;

    margin: 0 auto;

    padding: 28px 54px 52px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 8px;

    text-align: center;

    color: var(--heritage-ink);
}


.heritage-title {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 2rem;
    font-weight: 800;

    letter-spacing: .035em;

    color: #a84f28;

    text-transform: uppercase;
}


.heritage-subtitle {
    margin-top: 2px;
    margin-bottom: 26px;

    color: #b66b49;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: .9rem;
    font-weight: 700;

    letter-spacing: .18em;
    text-transform: uppercase;
}


.heritage-generation {
    position: relative;
}


.heritage-root-generation {
    display: flex;
    justify-content: center;
}


.heritage-couple {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}


.heritage-person {
    width: 142px;

    padding: 0 8px 10px;

    border: 0;

    background: transparent;

    color: inherit;

    cursor: pointer;

    text-align: center;
}


.heritage-person:focus-visible {
    outline: 2px solid var(--heritage-line);
    outline-offset: 4px;
    border-radius: 10px;
}


.heritage-person.selected
.heritage-portrait {
    box-shadow:
        0 0 0 3px rgba(79,169,167,.28);
}


.heritage-person.focused
.heritage-portrait {
    border-color: #c56b3b;
}


.heritage-portrait {
    width: 88px;
    height: 110px;

    margin: 0 auto 8px;

    overflow: hidden;

    border: 3px solid var(--heritage-line);
    border-radius: 44px 44px 18px 18px;

    background:
        linear-gradient(
            #fff,
            #eee8db
        );

    display: grid;
    place-items: center;
}


.heritage-portrait img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;
}


.heritage-placeholder {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            180deg,
            #e8efe9,
            #d5dfd8
        );

    color: #496a63;

    font-size: 1rem;
    font-weight: 900;
}


.heritage-name {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: .82rem;
    line-height: 1.12;
    font-weight: 800;

    overflow-wrap: anywhere;
}


.heritage-relation {
    display: inline-block;

    margin-top: 4px;

    padding-bottom: 2px;

    border-bottom:
        3px solid var(--heritage-line);

    color: var(--heritage-line);

    font-size: .61rem;
    font-weight: 900;

    letter-spacing: .055em;

    text-transform: uppercase;
}


.heritage-years {
    margin-top: 4px;

    color: var(--heritage-muted);

    font-size: .62rem;
}


.heritage-couple-link {
    width: 44px;
    height: 2px;

    margin:
        0 -7px 57px;

    background:
        var(--heritage-line);
}


.heritage-couple-link.small {
    width: 30px;
}


.heritage-stem-wrap {
    height: 43px;

    display: flex;
    justify-content: center;
}


.heritage-stem {
    height: 43px;

    border-left:
        2px solid var(--heritage-line);
}


.heritage-generation-rail {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    gap: 18px;

    padding-top: 31px;
}


.heritage-generation-rail::before {
    content: "";

    position: absolute;

    top: 0;
    left: 4%;
    right: 4%;

    border-top:
        2px solid var(--heritage-line);
}


.heritage-family-branch {
    min-width: 152px;

    position: relative;

    padding-top: 24px;
}


.heritage-family-branch::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    height: 24px;

    border-left:
        2px solid var(--heritage-line);
}


.heritage-hint {
    max-width: 650px;

    margin: 26px auto 0;

    padding: 10px 14px;

    border-radius: 8px;

    background:
        rgba(255,255,255,.58);

    color: #786b5e;

    font-size: .73rem;
}


/* Keep the heritage layout intact during print/PDF. */
@media print {
    .heritage-poster {
        min-width: 0 !important;

        width: max-content !important;

        margin: 0 auto !important;

        padding: 16px 24px 28px !important;

        border: 0 !important;

        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;

        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }


    .heritage-person,
    .heritage-generation,
    .heritage-family-branch {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }


    .heritage-couple-link {
        background: var(--heritage-line) !important;
    }


    .heritage-stem,
    .heritage-generation-rail::before,
    .heritage-family-branch::before {
        border-color:
            var(--heritage-line) !important;
    }

}


@media (max-width: 850px) {
    .heritage-poster {
        min-width: 850px;
        padding-inline: 28px;
    }


    .heritage-person {
        width: 126px;
    }


    .heritage-portrait {
        width: 78px;
        height: 100px;
    }

}



/* Selected-person remove action */
.inline-form {
    display: inline-flex;
    margin: 0;
}


.button.danger-outline {
    border: 1px solid #c84a4a;
    background: #ffffff;
    color: #a52f2f;
}


.button.danger-outline:hover {
    background: #fff5f5;
    border-color: #b63636;
    color: #8d2222;
}


.button.danger-outline:focus-visible {
    outline: 2px solid rgba(184, 54, 54, .28);
    outline-offset: 2px;
}


/* Heritage theme now matches the normal white tree surface */
.heritage-poster {
    --heritage-paper: #ffffff;
    background: #ffffff !important;
    border-color: var(--border) !important;
}



/* People list row actions */
.people-actions-cell {
    width: 150px;
    white-space: nowrap;
}


.people-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}


.people-edit-link,
.people-remove-link {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    text-decoration: none;
}


.people-edit-link {
    color: var(--accent);
}


.people-edit-link:hover {
    text-decoration: underline;
}


.people-remove-form {
    display: inline;
    margin: 0;
}


.people-remove-link {
    color: #a52f2f;
}


.people-remove-link:hover {
    color: #8d2222;
    text-decoration: underline;
}


.people-remove-link:focus-visible,
.people-edit-link:focus-visible {
    outline: 2px solid rgba(55, 93, 133, .25);
    outline-offset: 3px;
    border-radius: 3px;
}











.real-tree-stage {
    --branch: #89613e;
    --branch-light: #a88058;
    --leaf: #6ea651;
    --leaf-dark: #4c8738;

    width: max-content;
    min-width: 980px;
    min-height: 690px;

    position: relative;

    display: flex;
    flex-direction: column-reverse;
    align-items: center;

    padding:
        30px
        40px
        58px;

    overflow: visible;
}


.real-tree-root {
    position: relative;
    z-index: 4;

    margin-top: 22px;
}


.real-tree-level {
    width: 100%;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    gap: 90px;

    position: relative;
    z-index: 4;

    margin-bottom: 74px;
}


.real-tree-family-branch {
    min-width: 330px;

    position: relative;

    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}


/* Main branch from the root toward each child family. */
.real-tree-family-branch::after {
    content: "";

    position: absolute;

    width: 210px;
    height: 150px;

    left: 50%;
    bottom: -89px;

    border-bottom:
        18px solid var(--branch);

    border-radius:
        0 0 50% 50%;

    transform-origin: bottom center;
    transform:
        translateX(-50%)
        rotate(-8deg);

    z-index: -1;
}


.real-tree-family-branch:nth-child(even)::after {
    transform:
        translateX(-50%)
        rotate(8deg);
}


.real-tree-grandchildren {
    width: max-content;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    gap: 32px;

    position: relative;

    margin-bottom: 66px;
}


.real-tree-grandchild-branch {
    min-width: 170px;

    position: relative;

    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}


.real-tree-grandchild-branch::after {
    content: "";

    width: 110px;
    height: 90px;

    position: absolute;

    left: 50%;
    bottom: -54px;

    border-bottom:
        9px solid var(--branch-light);

    border-radius:
        0 0 50% 50%;

    transform:
        translateX(-50%)
        rotate(-9deg);

    z-index: -1;
}


.real-tree-grandchild-branch:nth-child(even)::after {
    transform:
        translateX(-50%)
        rotate(9deg);
}


.real-tree-next-generation {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 48px;
}


/* Root trunk */
.real-tree-trunk {
    position: absolute;

    width: 145px;
    height: 240px;

    left: 50%;
    bottom: 37px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            #795134 0%,
            #a97648 25%,
            #8c5b38 52%,
            #ad7b4c 72%,
            #74482d 100%
        );

    clip-path:
        polygon(
            34% 0,
            65% 0,
            72% 44%,
            88% 100%,
            12% 100%,
            29% 44%
        );

    border-radius:
        30px 30px 16px 16px;

    z-index: 1;
}


/* Soft tree canopy/foliage behind cards */
.real-tree-stage::before,
.real-tree-stage::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 250px;

    top: 60px;

    border-radius: 50%;

    opacity: .17;

    background:
        radial-gradient(
            ellipse at center,
            var(--leaf) 0 30%,
            transparent 31%
        ),
        radial-gradient(
            ellipse at 22% 60%,
            var(--leaf-dark) 0 18%,
            transparent 19%
        ),
        radial-gradient(
            ellipse at 75% 40%,
            var(--leaf) 0 22%,
            transparent 23%
        );

    pointer-events: none;
}


.real-tree-stage::before {
    left: 20px;
}


.real-tree-stage::after {
    right: 20px;
    transform: scaleX(-1);
}


.real-tree-ground {
    position: absolute;

    width: 390px;
    height: 26px;

    left: 50%;
    bottom: 26px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(86,133,60,.35),
            rgba(86,133,60,0)
        );

    z-index: 0;
}


.real-tree-couple {
    min-width: 300px;
    min-height: 168px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding:
        16px
        20px;

    border:
        2px solid
        #a8d6af;

    border-radius:
        65px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 6px 18px
        rgba(38,60,43,.08);

    position: relative;

    z-index: 5;
}


.real-tree-couple.compact {
    min-width: 230px;
    min-height: 150px;
    padding: 13px 15px;
    border-radius: 58px;
}


.real-tree-person {
    width: 120px;

    display: flex;
    flex-direction: column;
    align-items: center;

    border: 0;
    padding: 0;

    background: transparent;

    color: var(--text);

    cursor: pointer;
}


.real-tree-person:hover
.real-tree-avatar {
    transform:
        translateY(-2px)
        scale(1.03);
}


.real-tree-person.focused
.real-tree-avatar {
    box-shadow:
        0 0 0 4px
        rgba(59,108,151,.18);
}


.real-tree-person.selected
.real-tree-avatar {
    border-color:
        #315f8b;
}


.real-tree-avatar {
    width: 76px;
    height: 76px;

    border-radius: 50%;

    overflow: hidden;

    display: grid;
    place-items: center;

    margin-bottom: 7px;

    background:
        #edf3f6;

    border:
        4px solid
        #94caaa;

    color:
        #37536b;

    font-size:
        .95rem;

    font-weight:
        900;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.real-tree-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.real-tree-name {
    max-width: 118px;

    color:
        #152238;

    font-size:
        .78rem;

    line-height:
        1.15;

    font-weight:
        900;

    overflow-wrap:
        anywhere;
}


.real-tree-relation {
    margin-top: 4px;

    color:
        #4e6070;

    font-size:
        .67rem;

    font-weight:
        750;
}


.real-tree-meta {
    max-width: 118px;

    margin-top: 4px;

    color:
        #74808b;

    font-size:
        .59rem;

    line-height:
        1.2;
}


.real-tree-heart {
    flex:
        0 0
        24px;

    color:
        #de667a;

    font-size:
        1.25rem;

    line-height:
        1;
}


.real-tree-empty {
    max-width:
        560px;

    margin:
        70px auto
        180px;

    padding:
        14px 18px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        #fff;

    color:
        var(--muted);

    position:
        relative;

    z-index:
        5;
}


@media (max-width: 900px) {
    


    .real-tree-stage {
        min-width: 860px;
    }


    .real-tree-level {
        gap: 50px;
    }


    .real-tree-couple {
        min-width: 260px;
    }

}



@media print {
    


    .real-tree-stage,
    .real-tree-family-branch,
    .real-tree-grandchild-branch,
    .real-tree-couple {
        break-inside:
            avoid !important;

        page-break-inside:
            avoid !important;
    }


    .real-tree-family-branch::after,
    .real-tree-grandchild-branch::after {
        border-color:
            #89613e !important;
    }


    .real-tree-trunk,
    .real-tree-ground,
    .real-tree-stage::before,
    .real-tree-stage::after {
        -webkit-print-color-adjust:
            exact !important;

        print-color-adjust:
            exact !important;
    }

}





.real-tree-stage {
    isolation: isolate;
}


.real-tree-svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;

    z-index: 2;
}


.real-tree-svg-branch {
    fill: none;

    stroke: #8a603c;

    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: .98;
}


.real-tree-svg-leaf {
    fill: #6fa94d;

    stroke: #568d3d;
    stroke-width: 1;

    opacity: .96;
}


/* Remove the earlier isolated semicircle pieces. */
.real-tree-family-branch::after,
.real-tree-grandchild-branch::after {
    content: none !important;
    display: none !important;
}


/* Let cards sit on top of the branch SVG. */
.real-tree-root,
.real-tree-level,
.real-tree-family-branch,
.real-tree-grandchild-branch,
.real-tree-couple,
.real-tree-empty {
    z-index: 5;
}


/* Trunk should visually connect with the SVG branches. */
.real-tree-trunk {
    z-index: 3;
    bottom: 34px;

    width: 132px;
    height: 300px;

    clip-path:
        polygon(
            37% 0,
            63% 0,
            70% 46%,
            89% 100%,
            11% 100%,
            30% 46%
        );
}


.real-tree-ground {
    z-index: 1;
}


/* Reduce the fake canopy because the real branch/leaf SVG is now visible. */
.real-tree-stage::before,
.real-tree-stage::after {
    opacity: .07;
}


/* More vertical room makes connected tree branches readable. */
.real-tree-level {
    margin-bottom: 105px;
}


.real-tree-grandchildren {
    margin-bottom: 92px;
}


.real-tree-next-generation {
    margin-bottom: 65px;
}


@media print {
    .real-tree-svg {
        display: block !important;
        overflow: visible !important;

        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }


    .real-tree-svg-branch {
        stroke: #70492f !important;
    }


    .real-tree-svg-leaf {
        fill: #649b48 !important;
        stroke: #4f7f39 !important;
    }

}





/* Neutralize old couple-card look for redesigned couple nodes. */
.real-tree-couple.shared-circle,
.real-tree-couple.root-door-couple {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}


.shared-couple-circle {
    width: 188px;
    height: 188px;

    border-radius: 50%;

    border:
        4px solid
        #a8cdb6;

    background:
        #ffffff;

    box-shadow:
        0 5px 14px
        rgba(41, 68, 49, .08);

    display: grid;

    grid-template-columns:
        1fr 20px 1fr;

    align-items: center;

    padding:
        18px
        14px;

    position: relative;
}


.shared-couple-person {
    min-width: 0;

    border: 0;
    background: transparent;

    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    color:
        var(--text);

    cursor: pointer;
}


.shared-couple-avatar {
    width: 62px;
    height: 62px;

    border-radius: 50%;

    overflow: hidden;

    display: grid;
    place-items: center;

    border:
        3px solid
        #8fc3a0;

    background:
        #eef4f0;

    color:
        #3f596e;

    font-size:
        .8rem;

    font-weight:
        900;
}


.shared-couple-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.shared-couple-name {
    width: 72px;

    margin-top: 6px;

    font-size:
        .68rem;

    line-height:
        1.12;

    font-weight:
        900;

    overflow-wrap:
        anywhere;
}


.shared-couple-relation {
    margin-top: 3px;

    color:
        #667580;

    font-size:
        .57rem;

    font-weight:
        700;
}


.shared-couple-heart {
    color:
        #dc687a;

    font-size:
        1rem;

    line-height:
        1;

    align-self:
        center;
}


.shared-couple-person.focused
.shared-couple-avatar {
    border-color:
        #3f668f;

    box-shadow:
        0 0 0 3px
        rgba(63,102,143,.14);
}


.shared-couple-person.selected
.shared-couple-avatar {
    box-shadow:
        0 0 0 3px
        rgba(63,102,143,.22);
}


/* Slightly smaller version when rendered higher in the tree. */
.real-tree-couple.compact
.shared-couple-circle {
    width: 166px;
    height: 166px;

    padding:
        14px
        11px;
}


.real-tree-couple.compact
.shared-couple-avatar {
    width: 54px;
    height: 54px;
}


.real-tree-couple.compact
.shared-couple-name {
    width: 64px;
    font-size: .62rem;
}


/* Root split-door design */
.root-door-shell {
    width: 255px;
    min-height: 220px;

    position: relative;

    display: grid;

    grid-template-columns:
        1fr 14px 1fr;

    align-items: stretch;

    border:
        5px solid
        #bad4c0;

    border-radius:
        72px 72px 18px 18px;

    overflow: hidden;

    background:
        #ffffff;

    box-shadow:
        0 8px 20px
        rgba(44,68,50,.10);
}


.root-door-person {
    border: 0;
    background: transparent;

    padding:
        14px 8px 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    color:
        var(--text);

    cursor: pointer;
}


.root-door-person.left {
    border-right:
        1px solid
        rgba(127,146,132,.18);
}


.root-door-person.right {
    border-left:
        1px solid
        rgba(127,146,132,.18);
}


.root-door-avatar {
    width: 84px;
    height: 98px;

    margin-top: 2px;

    border-radius:
        42px 42px 20px 20px;

    overflow: hidden;

    display: grid;
    place-items: center;

    border:
        3px solid
        #9cc6a8;

    background:
        #eef3ef;

    color:
        #455f72;

    font-size:
        .9rem;

    font-weight:
        900;
}


.root-door-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.root-door-footer {
    width: calc(100% + 16px);

    min-height: 62px;

    margin:
        12px -8px 0;

    padding:
        8px 7px;

    background:
        #f4efe5;

    border-top:
        1px solid
        #d9d0bf;
}


.root-door-name {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        .68rem;

    line-height:
        1.1;

    font-weight:
        800;

    color:
        #654b34;

    overflow-wrap:
        anywhere;
}


.root-door-relation {
    margin-top: 4px;

    color:
        #8a745d;

    font-size:
        .55rem;

    font-weight:
        700;
}


.root-door-divider {
    position: relative;

    background:
        linear-gradient(
            180deg,
            #e7e1d5,
            #c9c1b3
        );

    border-left:
        1px solid
        #aaa397;

    border-right:
        1px solid
        #aaa397;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;
}


.root-door-divider span {
    width: 8px;
    height: 17px;

    border-radius:
        3px;

    border:
        1px solid
        #918b82;

    background:
        #f5f2eb;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.6);
}


.root-door-person.focused
.root-door-avatar {
    border-color:
        #3d628e;

    box-shadow:
        0 0 0 4px
        rgba(61,98,142,.16);
}


.root-door-person.selected
.root-door-avatar {
    box-shadow:
        0 0 0 4px
        rgba(61,98,142,.23);
}


/* Keep root node above trunk and branches. */
.real-tree-root-couple {
    position: relative;
    z-index: 8;
}


/* Slightly refine trunk so it appears to meet the root-door node. */
.real-tree-trunk {
    top: auto;
    bottom: 30px;

    height: 320px;

    width: 118px;
}


@media (max-width: 900px) {
    .shared-couple-circle {
        width: 176px;
        height: 176px;
    }


    .root-door-shell {
        width: 240px;
    }

}


@media print {
    .shared-couple-circle,
    .root-door-shell,
    .root-door-footer,
    .root-door-divider {
        -webkit-print-color-adjust:
            exact !important;

        print-color-adjust:
            exact !important;
    }

}





.real-tree-couple.single-circle {
    min-width: 0;
    min-height: 0;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
}



































/* Smaller version for upper generations. */















/* Keep the branch visually attached to the circular node. */
.real-tree-family-branch > .single-circle,
.real-tree-grandchild-branch > .single-circle {
    position: relative;
    z-index: 6;
}


@media print {
    

}





/* Regular couple: one circle, spouse on top, person on bottom,
   with a horizontal white separator through the center. */
.real-tree-couple.shared-circle.stacked {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}


.stacked-couple-circle {
    width: 188px;
    height: 188px;

    border-radius: 50%;
    overflow: hidden;

    border: 4px solid #a8cdb6;
    background: #dfe9df;

    box-shadow:
        0 5px 14px
        rgba(41, 68, 49, .08);

    position: relative;

    display: grid;
    grid-template-rows: 1fr 4px 1fr;
}


.stacked-couple-divider {
    width: 100%;
    height: 4px;

    background: #ffffff;

    position: relative;
    z-index: 5;

    box-shadow:
        0 0 0 1px
        rgba(255,255,255,.9);
}


.stacked-couple-person {
    border: 0;
    background: transparent;

    min-width: 0;
    width: 100%;
    height: 100%;

    padding: 5px 14px;

    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--text);
    cursor: pointer;

    position: relative;
}


.stacked-couple-person.top {
    flex-direction: row-reverse;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(239, 224, 230, .72),
            rgba(255,255,255,.45)
        );
}


.stacked-couple-person.bottom {
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(223, 234, 226, .78),
            rgba(255,255,255,.42)
        );
}


.stacked-couple-avatar {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    border-radius: 50%;
    overflow: hidden;

    display: grid;
    place-items: center;

    border: 3px solid #8fc3a0;
    background: #eef4f0;

    color: #3f596e;

    font-size: .74rem;
    font-weight: 900;
}


.stacked-couple-person.top
.stacked-couple-avatar {
    border-color: #d6a8b9;
}


.stacked-couple-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.stacked-couple-details {
    min-width: 0;
    max-width: 82px;

    text-align: center;
}


.stacked-couple-name {
    font-size: .63rem;
    line-height: 1.08;
    font-weight: 900;

    overflow-wrap: anywhere;
}


.stacked-couple-relation {
    margin-top: 3px;

    color: #64727c;

    font-size: .52rem;
    line-height: 1.05;

    font-weight: 700;
}


.stacked-couple-person.focused
.stacked-couple-avatar {
    border-color: #3f668f;

    box-shadow:
        0 0 0 3px
        rgba(63,102,143,.14);
}


.stacked-couple-person.selected
.stacked-couple-avatar {
    box-shadow:
        0 0 0 3px
        rgba(63,102,143,.22);
}


.real-tree-couple.compact
.stacked-couple-circle {
    width: 164px;
    height: 164px;
}


.real-tree-couple.compact
.stacked-couple-avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
}


.real-tree-couple.compact
.stacked-couple-name {
    font-size: .58rem;
}


.real-tree-couple.compact
.stacked-couple-relation {
    font-size: .48rem;
}


/* Single person: photo above, dark divider line, all text below. */












/* Group all lower information visually beneath the black line. */









/* Because the circle uses CSS grid, place the three text nodes
   sequentially in the lower region. */









/* Wrap-like positioning for lower text without changing JS markup */



























@media print {
    

}



/* ==========================================================
   Sticky Notes Tree theme
   Vertical family flow with sticky-note cards and drawn arrows.
   ========================================================== */

.sticky-tree {
    width: 100%;
    min-width: 980px;
    box-sizing: border-box;

    margin: 0 auto;

    padding:
        20px
        34px
        50px;

    background: #ffffff;
}


.sticky-tree-title {
    margin-bottom: 22px;

    color: #1b2a3a;

    font-size: 1.28rem;
    font-weight: 900;

    text-align: center;
}


.sticky-tree-stage {
    width: 100%;
    min-width: 920px;
    max-width: none;
    margin: 0 auto;
    box-sizing: border-box;

    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 82px;

    padding:
        18px
        34px
        38px;
}


.sticky-tree-svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;

    z-index: 1;
}


.sticky-generation {
    width: 100%;

    position: relative;

    z-index: 3;
}


.sticky-generation-label {
    margin-bottom: 14px;

    color: var(--muted);

    font-size: .66rem;
    font-weight: 900;

    letter-spacing: .1em;

    text-align: left;
    text-transform: uppercase;
}


.sticky-generation-row {
    display: flex;

    width: 100%;

    justify-content: center;
    align-items: flex-start;

    gap: 54px;

    flex-wrap: nowrap;
}


.sticky-family-unit {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 22px;

    min-width: 170px;

    position: relative;
}


.sticky-person-note {
    width: 154px;
    min-height: 154px;

    position: relative;

    border: 0;
    border-radius: 2px;

    padding:
        16px
        12px
        12px;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #1c2634;

    cursor: pointer;

    box-shadow:
        0 7px 16px
        rgba(25, 35, 45, .12);

    transform:
        rotate(-1.2deg);

    transition:
        transform .14s ease,
        box-shadow .14s ease;
}


.sticky-family-unit
.sticky-person-note:nth-child(even) {
    transform:
        rotate(1.25deg);
}


.sticky-person-note:hover {
    transform:
        translateY(-3px)
        rotate(0);

    box-shadow:
        0 10px 20px
        rgba(25, 35, 45, .16);
}


.sticky-person-note.focused {
    outline:
        3px solid
        rgba(52, 92, 130, .24);

    outline-offset:
        4px;
}


.sticky-person-note.selected {
    box-shadow:
        0 0 0 2px
        #365f87,
        0 10px 20px
        rgba(25, 35, 45, .16);
}


.sticky-yellow {
    background:
        linear-gradient(
            145deg,
            #ffe77e,
            #f6d95f
        );
}


.sticky-pink {
    background:
        linear-gradient(
            145deg,
            #f4a3cc,
            #e889ba
        );
}


.sticky-green {
    background:
        linear-gradient(
            145deg,
            #b9dc75,
            #a2ca57
        );
}


.sticky-blue {
    background:
        linear-gradient(
            145deg,
            #8cc8e8,
            #70b5dd
        );
}


.sticky-orange {
    background:
        linear-gradient(
            145deg,
            #f4b06e,
            #e99a4c
        );
}


.sticky-pin {
    width: 10px;
    height: 10px;

    position: absolute;

    top: 7px;
    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(87, 71, 45, .36);

    box-shadow:
        inset 0 1px 1px
        rgba(255,255,255,.5);
}


.sticky-avatar {
    width: 58px;
    height: 58px;

    margin-top: 4px;
    margin-bottom: 7px;

    border-radius: 50%;

    overflow: hidden;

    display: grid;
    place-items: center;

    background:
        rgba(255,255,255,.62);

    border:
        3px solid
        rgba(255,255,255,.82);

    color: #3c4d60;

    font-size: .78rem;
    font-weight: 900;
}


.sticky-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.sticky-name {
    max-width: 126px;

    font-size: .71rem;
    line-height: 1.1;

    font-weight: 900;

    text-align: center;

    overflow-wrap: anywhere;
}


.sticky-relation {
    margin-top: 4px;

    color:
        rgba(32, 42, 53, .77);

    font-size: .58rem;
    font-weight: 800;

    text-align: center;
}


.sticky-meta {
    margin-top: 5px;

    color:
        rgba(32, 42, 53, .68);

    font-size: .51rem;
    line-height: 1.15;

    text-align: center;
}


.sticky-connection,
.sticky-couple-line {
    fill: none;

    stroke:
        #535a61;

    stroke-width: 2.4;

    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: .8;
}


.sticky-connection {
    stroke-dasharray:
        1 0;
}


.sticky-arrow-head {
    fill:
        #535a61;

    opacity:
        .85;
}


.sticky-couple-line {
    stroke-width:
        2;

    opacity:
        .62;
}


@media (max-width: 900px) {
    .sticky-tree {
        min-width: 880px;
        padding-inline: 18px;
    }


    .sticky-tree-stage {
        min-width: 830px;
    }


    .sticky-generation-row {
        gap: 34px;
    }


    .sticky-person-note {
        width: 142px;
        min-height: 146px;
    }

}


@media print {
    .sticky-tree {
        min-width: 0 !important;

        width: max-content !important;

        background: #fff !important;

        margin: 0 auto !important;

        padding:
            8px
            14px
            20px !important;

        break-inside:
            avoid !important;

        page-break-inside:
            avoid !important;

        -webkit-print-color-adjust:
            exact !important;

        print-color-adjust:
            exact !important;
    }


    .sticky-person-note,
    .sticky-avatar {
        -webkit-print-color-adjust:
            exact !important;

        print-color-adjust:
            exact !important;
    }


    .sticky-connection,
    .sticky-couple-line {
        stroke:
            #383d43 !important;
    }


    .sticky-arrow-head {
        fill:
            #383d43 !important;
    }

}



/* ==========================================================
   Color Box Tree theme
   Rectangular family boxes with pair-based colors and
   straight vertical family connectors.
   ========================================================== */

.colorbox-tree {
    width: max-content;
    min-width: 980px;

    margin: 0 auto;

    padding:
        20px
        34px
        48px;

    background:
        #ffffff;
}


.colorbox-tree-title {
    margin-bottom:
        24px;

    color:
        #18273b;

    font-size:
        1.3rem;

    font-weight:
        900;

    text-align:
        center;
}


.colorbox-tree-stage {
    width: max-content;
    min-width: 920px;

    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 78px;

    padding:
        16px
        30px
        38px;
}


.colorbox-tree-svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;

    z-index: 1;
}


.colorbox-level {
    width: 100%;

    position: relative;

    z-index: 3;
}


.colorbox-level-row {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 54px;

    flex-wrap: nowrap;
}


.colorbox-family-unit {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 28px;

    min-width: 150px;

    position: relative;
}


.colorbox-person {
    min-width: 158px;
    width: 158px;
    min-height: 84px;

    border:
        1px solid
        rgba(29, 47, 66, .12);

    border-radius:
        3px;

    padding:
        11px
        13px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color:
        #18273b;

    cursor:
        pointer;

    box-shadow:
        0 4px 10px
        rgba(28, 41, 55, .08);

    transition:
        transform .12s ease,
        box-shadow .12s ease;
}


.colorbox-person:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 7px 14px
        rgba(28, 41, 55, .12);
}


.colorbox-person.focused {
    outline:
        3px solid
        rgba(45, 88, 128, .20);

    outline-offset:
        4px;
}


.colorbox-person.selected {
    box-shadow:
        0 0 0 2px
        #355f87,
        0 7px 14px
        rgba(28, 41, 55, .12);
}


.colorbox-person-top {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    width: 100%;
}


.colorbox-avatar {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    border-radius:
        50%;

    overflow:
        hidden;

    border:
        2px solid
        rgba(255,255,255,.82);

    background:
        rgba(255,255,255,.52);
}


.colorbox-avatar img {
    width: 100%;
    height: 100%;

    object-fit:
        cover;

    display:
        block;
}


.colorbox-name {
    max-width:
        118px;

    font-size:
        .73rem;

    line-height:
        1.08;

    font-weight:
        900;

    text-align:
        center;

    overflow-wrap:
        anywhere;

    text-transform:
        uppercase;
}


.colorbox-relation {
    margin-top:
        4px;

    color:
        rgba(30,44,59,.70);

    font-size:
        .58rem;

    font-weight:
        750;

    text-align:
        center;
}


.colorbox-meta {
    margin-top:
        4px;

    color:
        rgba(30,44,59,.58);

    font-size:
        .49rem;

    line-height:
        1.1;

    text-align:
        center;
}


/* Couple members within one family unit share the same box color. */
.colorbox-gold {
    background:
        #ffc324;
}


.colorbox-blue {
    background:
        #83bee8;
}


.colorbox-green {
    background:
        #9dcc79;
}


.colorbox-pink {
    background:
        #ef9fc1;
}


.colorbox-purple {
    background:
        #b7a0df;
}


.colorbox-orange {
    background:
        #eead68;
}


.colorbox-teal {
    background:
        #81cfca;
}


/* Straight family lines similar to a classic genealogy diagram. */
.colorbox-family-line {
    fill: none;

    stroke:
        #d84b83;

    stroke-width:
        2.1;

    stroke-linecap:
        square;

    stroke-linejoin:
        miter;
}


.colorbox-partner-line {
    fill: none;

    stroke:
        #d84b83;

    stroke-width:
        2;

    stroke-linecap:
        square;
}


@media (max-width: 900px) {
    .colorbox-tree {
        min-width:
            880px;

        padding-inline:
            18px;
    }


    .colorbox-tree-stage {
        min-width:
            830px;
    }


    .colorbox-level-row {
        gap:
            36px;
    }


    .colorbox-family-unit {
        gap:
            20px;
    }


    .colorbox-person {
        width:
            146px;

        min-width:
            146px;
    }

}


@media print {
    .colorbox-tree {
        width:
            max-content !important;

        min-width:
            0 !important;

        margin:
            0 auto !important;

        padding:
            8px
            14px
            22px !important;

        background:
            #fff !important;

        break-inside:
            avoid !important;

        page-break-inside:
            avoid !important;

        -webkit-print-color-adjust:
            exact !important;

        print-color-adjust:
            exact !important;
    }


    .colorbox-person {
        -webkit-print-color-adjust:
            exact !important;

        print-color-adjust:
            exact !important;

        break-inside:
            avoid !important;

        page-break-inside:
            avoid !important;
    }


    .colorbox-family-line,
    .colorbox-partner-line {
        stroke:
            #cf3d79 !important;
    }

}



/* People page bulk-delete action */
.top-actions #removeAllPeopleForm {
    display: inline-flex;
    margin: 0;
}


#removeAllPeopleForm .danger-outline {
    white-space: nowrap;
}


@media (max-width: 760px) {
    #removeAllPeopleForm {
        width: 100%;
    }


    #removeAllPeopleForm .button {
        width: 100%;
        justify-content: center;
    }

}



/* Family Branches recursive descendant rendering */
.recursive-descendants {
    width: 100%;
}


.recursive-family-row {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 46px;
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
    padding-top: 24px;
}


.recursive-family-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    border-top: 2px solid #aeb8c3;
}


.recursive-family-branch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 190px;
    padding-top: 24px;
}


.recursive-family-branch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 24px;
    border-left: 2px solid #aeb8c3;
}


.recursive-family-depth-2,
.recursive-family-depth-3,
.recursive-family-depth-4,
.recursive-family-depth-5 {
    gap: 28px;
}


.recursive-family-depth-2 .recursive-family-branch,
.recursive-family-depth-3 .recursive-family-branch,
.recursive-family-depth-4 .recursive-family-branch,
.recursive-family-depth-5 .recursive-family-branch {
    min-width: 165px;
}


@media print {
    .recursive-family-row,
    .recursive-family-branch {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }


    .recursive-family-row::before,
    .recursive-family-branch::before {
        border-color: #808b98 !important;
    }

}



/* ==========================================================
   Recursive depth support: Family Branches
   ========================================================== */

.recursive-family-row,
.photo-recursive-row {
    overflow: visible;
}


.recursive-family-depth-3,
.recursive-family-depth-4,
.recursive-family-depth-5,
.photo-recursive-depth-3,
.photo-recursive-depth-4,
.photo-recursive-depth-5 {
    gap: 22px;
}


.photo-recursive-section {
    width: 100%;
}


.photo-recursive-row {
    margin: 0 auto;
}


.photo-recursive-branch {
    min-width: 170px;
}


.photo-recursive-branch
.photo-recursive-row {
    padding-top: 28px;
}


.photo-recursive-branch
.photo-recursive-row::before {
    left: 4%;
    right: 4%;
}


@media print {
    .photo-recursive-row,
    .photo-recursive-branch,
    .recursive-family-row,
    .recursive-family-branch {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

}



/* Forgot-password OTP flow */
.forgot-password-row {
    margin: -2px 0 12px;
    text-align: right;
}


.forgot-password-row a,
.auth-secondary-form .link-button {
    color: var(--accent);
    font-size: .84rem;
    font-weight: 700;
}


.forgot-password-row a {
    text-decoration: none;
}


.forgot-password-row a:hover {
    text-decoration: underline;
}


.auth-secondary-form {
    margin-top: 12px;
    text-align: center;
}


.link-button {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}


.link-button:hover {
    text-decoration: underline;
}


.dev-code-box {
    margin: 14px 0;
    padding: 12px 14px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #f7f9fb;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    font-size: .82rem;
}


.dev-code-box span {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: .15em;
}



/* Person life timeline */
.timeline-profile { display:flex; align-items:center; gap:14px; padding:16px 18px; margin:12px 0 24px; border:1px solid var(--border); border-radius:14px; background:var(--card); }

.timeline-profile-avatar { width:58px; height:58px; border-radius:50%; overflow:hidden; display:grid; place-items:center; flex:0 0 58px; background:#eef3f6; font-weight:900; }

.timeline-profile-avatar img { width:100%; height:100%; object-fit:cover; }

.timeline-empty { text-align:center; padding:44px 22px; border:1px dashed var(--border); border-radius:14px; color:var(--muted); background:var(--card); }
.timeline-empty-actions { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; }

.life-timeline { position:relative; padding:8px 0 20px; }

.life-timeline::before { content:""; position:absolute; left:174px; top:0; bottom:0; width:2px; background:#cbd5df; }

.life-event { display:grid; grid-template-columns:145px 30px minmax(0,1fr); gap:14px; position:relative; margin-bottom:26px; }

.life-event-date { text-align:right; padding-top:15px; color:#536272; font-size:.78rem; }

.life-event-date strong, .life-event-date span { display:block; }

.life-event-dot { width:14px; height:14px; margin:18px auto 0; border-radius:50%; background:#4d7599; border:3px solid #fff; box-shadow:0 0 0 2px #4d7599; z-index:2; }

.life-event-card { border:1px solid var(--border); border-radius:14px; padding:16px 18px; background:var(--card); box-shadow:0 3px 10px rgba(30,45,60,.05); }

.life-event-card h2 { margin:6px 0 7px; font-size:1.05rem; }

.life-event-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }

.life-event-type { font-size:.67rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; color:#4d7599; }

.life-event-actions { display:flex; align-items:center; gap:10px; font-size:.78rem; }

.life-event-actions form { margin:0; display:inline; }

.life-event-place { font-size:.78rem; font-weight:700; color:#657481; margin-bottom:8px; }

.life-event-card p { white-space:pre-wrap; line-height:1.5; }

.life-event-notes { margin-top:12px; padding-top:10px; border-top:1px dashed var(--border); color:var(--muted); font-size:.78rem; white-space:pre-wrap; }

.related-person-link { display:inline-block; margin-top:8px; font-size:.8rem; font-weight:700; }

@media (max-width:720px) { .life-timeline::before { left:12px; }
 .life-event { grid-template-columns:24px minmax(0,1fr); gap:10px; }
 .life-event-date { grid-column:2; text-align:left; padding:0; margin-bottom:-4px; }
 .life-event-dot { grid-column:1; grid-row:1 / span 2; margin-top:5px; }
 .life-event-card { grid-column:2; }
 }


.people-actions-cell { width: 210px; }



/* ==========================================================
   Person Life Events management page
   ========================================================== */

.life-events-page {
    padding-bottom: 48px;
}


.life-events-heading-actions {
    align-items: center;
}


.life-events-list-card,
.life-events-empty {
    margin-top: 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}


.life-events-empty {
    padding: 34px;
    text-align: center;
}


.life-events-empty h2 {
    margin-top: 0;
}


.life-events-list-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);

    display: flex;
    justify-content: space-between;
    align-items: center;
}


.life-events-list-header > div {
    display: flex;
    align-items: baseline;
    gap: 9px;
}


.life-events-table-wrap {
    overflow-x: auto;
}


.life-events-table {
    width: 100%;
    min-width: 900px;
}


.life-events-table th {
    white-space: nowrap;
}


.life-events-table td {
    vertical-align: top;
}


.event-date-cell {
    min-width: 125px;
}


.event-date-cell strong,
.event-date-cell span {
    display: block;
}


.event-date-cell span {
    margin-top: 2px;
    color: var(--muted);
    font-size: .75rem;
}


.event-title-cell {
    min-width: 210px;
    max-width: 340px;
}


.event-title-cell strong,
.event-title-cell span {
    display: block;
}


.event-title-cell span {
    margin-top: 4px;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.event-type-pill {
    display: inline-flex;
    padding: 5px 8px;

    border-radius: 999px;

    background: var(--accent-soft);
    color: var(--accent);

    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}


.event-actions-cell {
    width: 110px;
}


.event-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}


.event-row-actions form {
    margin: 0;
}


/* Timeline view is presentation-only. */
.timeline-print-heading {
    display: none;
}


.timeline-related-person {
    margin-top: 12px;
    font-size: .82rem;
}


/* ==========================================================
   Dedicated Timeline printing
   ========================================================== */

@media print {

    @page {
        margin: 14mm;
    }


    .timeline-screen-navigation,
    .timeline-actions,
    .timeline-screen-description {
        display: none !important;
    }


    body {
        background: #ffffff !important;
    }


    .timeline-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    .timeline-page-heading {
        display: none !important;
    }


    .timeline-print-heading {
        display: block !important;
        margin-bottom: 18px;
        text-align: center;
    }


    .timeline-print-title {
        font-size: 22pt;
        font-weight: 800;
    }


    .timeline-print-subtitle {
        margin-top: 3px;
        color: #555;
        font-size: 10pt;
        letter-spacing: .08em;
        text-transform: uppercase;
    }


    .timeline-profile {
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }


    .life-timeline {
        margin-top: 18px !important;
    }


    .life-event {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }


    .life-event-card {
        box-shadow: none !important;
        border: 1px solid #cfd5dc !important;
    }


    .life-event-dot,
    .life-timeline::before {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

}


@media (max-width: 760px) {
    .life-events-heading-actions {
        width: 100%;
    }


    .life-events-heading-actions .button {
        flex: 1;
        justify-content: center;
    }

}



/* ==========================================================
   Bulk Life Events
   ========================================================== */

.bulk-events-page {
    max-width: 1180px;
}


.bulk-events-help {
    margin: 14px 0 20px;
    padding: 12px 14px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #f7f9fb;
    color: var(--muted);

    font-size: .82rem;
}


.bulk-validation-summary {
    margin-bottom: 16px;
}


.bulk-validation-summary ul {
    margin: 8px 0 0;
    padding-left: 20px;
}


.bulk-event-rows {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.bulk-event-row {
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--card);

    box-shadow:
        0 3px 10px
        rgba(25, 35, 45, .04);
}


.bulk-event-row-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 16px;
    padding-bottom: 12px;

    border-bottom: 1px solid var(--border);
}


.bulk-event-number {
    font-weight: 900;
    font-size: .92rem;
}


.bulk-event-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


.button.small {
    min-height: 32px;
    padding: 6px 10px;
    font-size: .76rem;
}


.form-grid.three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}


.bulk-event-row label {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin-bottom: 14px;

    font-size: .78rem;
    font-weight: 750;
}


.bulk-event-row input,
.bulk-event-row select,
.bulk-event-row textarea {
    width: 100%;
}


.bulk-event-row textarea {
    resize: vertical;
}


.bulk-events-bottom-actions {
    margin-top: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    position: sticky;
    bottom: 0;

    padding: 14px 0;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.80),
            rgba(255,255,255,1) 35%
        );

    z-index: 10;
}


.bulk-events-save-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}


@media (max-width: 850px) {
    .form-grid.three {
        grid-template-columns: 1fr;
    }


    .bulk-events-bottom-actions {
        align-items: stretch;
        flex-direction: column;
    }


    .bulk-events-save-actions {
        width: 100%;
    }


    .bulk-events-save-actions .button {
        flex: 1;
        justify-content: center;
    }


    .bulk-event-row-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}



/* ==========================================================
   Timeline theme selector
   ========================================================== */
.timeline-theme-picker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    font-size: .75rem;
    font-weight: 800;
}

.timeline-theme-picker select {
    min-width: 135px;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}


/* 1. Classic — existing clean vertical timeline */
.timeline-theme-classic .life-event-card {
    border-radius: 12px;
}


/* 2. Heritage — restrained genealogy/document appearance */
.timeline-theme-heritage {
    font-family: Georgia, "Times New Roman", serif;
}

.timeline-theme-heritage .timeline-profile,
.timeline-theme-heritage .life-event-card {
    background: #fffdf7;
    border: 1px solid #d8c9a8;
    box-shadow: none;
}

.timeline-theme-heritage .life-event-card {
    border-radius: 4px;
}

.timeline-theme-heritage .life-event-type {
    letter-spacing: .08em;
    text-transform: uppercase;
}

.timeline-theme-heritage .life-event-dot {
    border-radius: 2px;
}


/* 3. Modern Cards — stronger cards, roomy and highly scannable */
.timeline-theme-cards .life-timeline::before {
    left: 164px;
}

.timeline-theme-cards .life-event {
    grid-template-columns: 135px 28px minmax(0,1fr);
    margin-bottom: 24px;
}

.timeline-theme-cards .life-event-card {
    padding: 20px 22px;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(20, 35, 50, .08);
}

.timeline-theme-cards .life-event-card h2 {
    font-size: 1.08rem;
}


/* 4. Life Journal — date-led diary/notebook presentation */
.timeline-theme-journal .life-timeline::before {
    display: none;
}

.timeline-theme-journal .life-event {
    display: grid;
    grid-template-columns: 105px minmax(0,1fr);
    gap: 20px;
    margin-bottom: 10px;
}

.timeline-theme-journal .life-event-date {
    padding-top: 17px;
    text-align: right;
}

.timeline-theme-journal .life-event-dot {
    display: none;
}

.timeline-theme-journal .life-event-card {
    position: relative;
    padding: 18px 20px 20px 28px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}

.timeline-theme-journal .life-event-card::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}


/* 5. Milestones — centered alternating presentation */
.timeline-theme-milestones .life-timeline {
    position: relative;
}

.timeline-theme-milestones .life-timeline::before {
    left: 50%;
    transform: translateX(-50%);
}

.timeline-theme-milestones .life-event {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 38px 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.timeline-theme-milestones .life-event-date {
    grid-column: 1;
    text-align: right;
    padding-top: 14px;
}

.timeline-theme-milestones .life-event-dot {
    grid-column: 2;
    justify-self: center;
}

.timeline-theme-milestones .life-event-card {
    grid-column: 3;
    border-radius: 14px;
}

.timeline-theme-milestones .life-event:nth-child(even) .life-event-date {
    grid-column: 3;
    text-align: left;
}

.timeline-theme-milestones .life-event:nth-child(even) .life-event-dot {
    grid-column: 2;
    grid-row: 1;
}

.timeline-theme-milestones .life-event:nth-child(even) .life-event-card {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
}


@media (max-width: 760px) {
    .timeline-theme-milestones .life-timeline::before {
        left: 14px;
        transform: none;
    }

    .timeline-theme-milestones .life-event,
    .timeline-theme-cards .life-event,
    .timeline-theme-journal .life-event {
        display: grid;
        grid-template-columns: 28px minmax(0,1fr);
        gap: 10px;
    }

    .timeline-theme-milestones .life-event-date,
    .timeline-theme-milestones .life-event:nth-child(even) .life-event-date,
    .timeline-theme-cards .life-event-date,
    .timeline-theme-journal .life-event-date {
        grid-column: 2;
        text-align: left;
        padding: 0 0 3px;
    }

    .timeline-theme-milestones .life-event-dot,
    .timeline-theme-milestones .life-event:nth-child(even) .life-event-dot {
        grid-column: 1;
        grid-row: 1 / span 2;
        justify-self: center;
    }

    .timeline-theme-milestones .life-event-card,
    .timeline-theme-milestones .life-event:nth-child(even) .life-event-card,
    .timeline-theme-cards .life-event-card,
    .timeline-theme-journal .life-event-card {
        grid-column: 2;
        grid-row: auto;
        text-align: left;
    }

    .timeline-theme-journal .life-event-card::before {
        display: none;
    }

}


@media print {
    .timeline-theme-picker {
        display: none !important;
    }

    /* Preserve the selected timeline layout when printing. */
    .timeline-theme-milestones .life-event {
        break-inside: avoid !important;
    }

}


/* Timeline text import */
.timeline-import-preview { margin-top: 24px; }

.timeline-import-table-wrap { overflow-x: auto; }

.timeline-import-table { min-width: 950px; width: 100%; }

.timeline-import-table td { vertical-align: top; }

.duplicate-import-row { opacity: .62; }

.success-inline { color: #25734b; font-weight: 800; font-size: .72rem; }

.timeline-import-confirm { margin-top: 16px; }



/* ==========================================================
   Timeline themes v2
   Strongly differentiated screen + print designs
   ========================================================== */

.timeline-page {
    --tl-accent: #3f6f9f;
    --tl-accent-soft: #e8f0f8;
    --tl-card: #ffffff;
    --tl-line: #aebdcb;
    --tl-ink: #172235;
}


.timeline-page .life-event-card,
.timeline-page .timeline-profile,
.timeline-page .life-event-date,
.timeline-page .life-event-dot,
.timeline-page .life-timeline::before {
    transition:
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        color .16s ease;
}


/* ----------------------------------------------------------
   1. CLASSIC
   Clean blue professional timeline
   ---------------------------------------------------------- */

.timeline-theme-classic {
    --tl-accent: #376d9f;
    --tl-accent-soft: #e8f2fa;
    --tl-line: #9db8ce;
}


.timeline-theme-classic .life-timeline::before {
    background: var(--tl-line);
}


.timeline-theme-classic .life-event-dot {
    background: #376d9f;
    border: 4px solid #e8f2fa;
    box-shadow: 0 0 0 2px #376d9f;
}


.timeline-theme-classic .life-event-card {
    border: 1px solid #dce5ec;
    border-left: 5px solid #376d9f;
    border-radius: 12px;
    background: #ffffff;
}


.timeline-theme-classic .life-event-type {
    background: #e8f2fa;
    color: #2e648f;
}


/* ----------------------------------------------------------
   2. HERITAGE
   Warm archival / family-history design
   ---------------------------------------------------------- */

.timeline-theme-heritage {
    --tl-accent: #a56a32;
    --tl-accent-soft: #f4e7d4;
    --tl-line: #c4a47b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}


.timeline-theme-heritage .timeline-profile {
    position: relative;
    overflow: hidden;

    border: 2px double #b7986d;
    border-radius: 4px;

    background:
        linear-gradient(
            135deg,
            #fffdf7,
            #f7eddc
        );

    box-shadow:
        0 5px 16px
        rgba(95, 68, 37, .08);
}


.timeline-theme-heritage .timeline-profile::after {
    content: "FAMILY HISTORY";

    position: absolute;
    right: 18px;
    bottom: 8px;

    color: rgba(139, 96, 49, .18);

    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .16em;
}


.timeline-theme-heritage .life-timeline::before {
    width: 3px;

    background:
        repeating-linear-gradient(
            to bottom,
            #b48c5e 0 7px,
            transparent 7px 11px
        );
}


.timeline-theme-heritage .life-event-dot {
    width: 17px;
    height: 17px;

    border: 3px double #8c663d;
    border-radius: 50%;

    background: #f8ead2;
}


.timeline-theme-heritage .life-event-card {
    border: 1px solid #d7c09c;
    border-radius: 3px;

    background:
        linear-gradient(
            145deg,
            #fffdf7,
            #f9eedc
        );

    box-shadow:
        0 4px 12px
        rgba(85, 58, 29, .07);
}


.timeline-theme-heritage .life-event-card h2 {
    color: #69441f;
}


.timeline-theme-heritage .life-event-type {
    border: 1px solid #c6a579;

    background: #f2dfc2;
    color: #744d25;

    letter-spacing: .08em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   3. MODERN CARDS
   Bright colorful cards, alternating accent palette
   ---------------------------------------------------------- */

.timeline-theme-cards {
    --tl-accent: #6b5bd2;
    --tl-accent-soft: #efeaff;
}


.timeline-theme-cards .life-timeline::before {
    width: 5px;

    background:
        linear-gradient(
            to bottom,
            #6b5bd2,
            #3ba7d8,
            #3daf88,
            #f0a33c,
            #db668e
        );

    border-radius: 999px;
}


.timeline-theme-cards .life-event {
    grid-template-columns:
        130px
        34px
        minmax(0, 1fr);

    margin-bottom: 26px;
}


.timeline-theme-cards .life-event-date {
    padding: 9px 10px;

    border-radius: 10px;

    background: #f3f0ff;
    color: #5848b7;

    text-align: center;
}


.timeline-theme-cards .life-event-dot {
    width: 18px;
    height: 18px;

    border: 4px solid #ffffff;

    background: #6b5bd2;

    box-shadow:
        0 0 0 3px #c9c0ff;
}


.timeline-theme-cards .life-event-card {
    padding: 20px 22px;

    border: 0;
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f2efff,
            #ffffff 55%
        );

    box-shadow:
        0 10px 28px
        rgba(56, 50, 95, .12);
}


.timeline-theme-cards .life-event:nth-child(5n+2)
.life-event-card {
    background:
        linear-gradient(
            135deg,
            #e8f7ff,
            #ffffff 55%
        );

    border-left: 6px solid #3ba7d8;
}


.timeline-theme-cards .life-event:nth-child(5n+3)
.life-event-card {
    background:
        linear-gradient(
            135deg,
            #e9f8f2,
            #ffffff 55%
        );

    border-left: 6px solid #3daf88;
}


.timeline-theme-cards .life-event:nth-child(5n+4)
.life-event-card {
    background:
        linear-gradient(
            135deg,
            #fff4df,
            #ffffff 55%
        );

    border-left: 6px solid #efa23a;
}


.timeline-theme-cards .life-event:nth-child(5n)
.life-event-card {
    background:
        linear-gradient(
            135deg,
            #ffeaf1,
            #ffffff 55%
        );

    border-left: 6px solid #d95f88;
}


.timeline-theme-cards .life-event:nth-child(5n+1)
.life-event-card {
    border-left: 6px solid #6b5bd2;
}


.timeline-theme-cards .life-event-type {
    background: #6b5bd2;
    color: #ffffff;
}


/* ----------------------------------------------------------
   4. LIFE JOURNAL
   Notebook / scrapbook with colorful tabs
   ---------------------------------------------------------- */

.timeline-theme-journal {
    --tl-accent: #2a8d7c;

    background:
        repeating-linear-gradient(
            to bottom,
            #ffffff 0,
            #ffffff 31px,
            #e7edf2 32px
        );

    border-radius: 14px;
}


.timeline-theme-journal .timeline-profile {
    border: 1px solid #d7e2df;

    background:
        linear-gradient(
            135deg,
            #edf9f5,
            #ffffff
        );

    box-shadow:
        0 6px 18px
        rgba(31, 104, 90, .08);
}


.timeline-theme-journal .life-timeline::before {
    display: none;
}


.timeline-theme-journal .life-event {
    position: relative;

    display: grid;
    grid-template-columns:
        116px
        minmax(0, 1fr);

    gap: 22px;

    margin-bottom: 20px;
}


.timeline-theme-journal .life-event-date {
    align-self: start;

    padding: 10px 12px;

    border-radius:
        16px 4px 4px 16px;

    background: #2a8d7c;
    color: #ffffff;

    text-align: center;

    box-shadow:
        0 4px 10px
        rgba(42, 141, 124, .16);
}


.timeline-theme-journal .life-event:nth-child(4n+2)
.life-event-date {
    background: #6d5cc3;
}


.timeline-theme-journal .life-event:nth-child(4n+3)
.life-event-date {
    background: #d2714c;
}


.timeline-theme-journal .life-event:nth-child(4n)
.life-event-date {
    background: #c58b2a;
}


.timeline-theme-journal .life-event-dot {
    display: none;
}


.timeline-theme-journal .life-event-card {
    position: relative;

    padding:
        18px
        20px
        20px
        30px;

    border: 1px solid #dfe6e8;
    border-radius: 8px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 4px 12px
        rgba(41, 53, 63, .06);
}


.timeline-theme-journal .life-event-card::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 11px;

    width: 3px;

    background: #e67575;
}


.timeline-theme-journal .life-event-card::after {
    content: "";

    position: absolute;
    top: 14px;
    right: 14px;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #f5c653;

    box-shadow:
        0 1px 2px
        rgba(0,0,0,.18);
}


.timeline-theme-journal .life-event-type {
    background: #e6f4ef;
    color: #287566;
}


/* ----------------------------------------------------------
   5. MILESTONES
   Alternating central bubbles with strong color bands
   ---------------------------------------------------------- */

.timeline-theme-milestones {
    --tl-accent: #d65375;
}


.timeline-theme-milestones .life-timeline {
    position: relative;
}


.timeline-theme-milestones .life-timeline::before {
    left: 50%;
    width: 4px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            #de5676,
            #f0a23b,
            #42a987,
            #4d94d6,
            #7f62cc
        );

    border-radius: 999px;
}


.timeline-theme-milestones .life-event {
    position: relative;

    display: grid;
    grid-template-columns:
        1fr
        54px
        1fr;

    gap: 18px;

    margin-bottom: 30px;
}


.timeline-theme-milestones .life-event-date {
    grid-column: 1;

    align-self: center;

    padding: 8px 12px;

    color: #a73f5c;

    font-weight: 800;
    text-align: right;
}


.timeline-theme-milestones .life-event-dot {
    grid-column: 2;

    justify-self: center;
    align-self: center;

    width: 30px;
    height: 30px;

    border: 6px solid #ffffff;
    border-radius: 50%;

    background: #db5575;

    box-shadow:
        0 0 0 4px #f2bdca;
}


.timeline-theme-milestones .life-event-card {
    grid-column: 3;

    position: relative;

    padding: 18px 20px;

    border: 0;
    border-radius:
        6px
        18px
        18px
        18px;

    background:
        linear-gradient(
            135deg,
            #ffe9ef,
            #ffffff
        );

    box-shadow:
        0 8px 22px
        rgba(83, 47, 57, .10);
}


.timeline-theme-milestones
.life-event:nth-child(even)
.life-event-date {
    grid-column: 3;
    grid-row: 1;

    color: #327b91;

    text-align: left;
}


.timeline-theme-milestones
.life-event:nth-child(even)
.life-event-dot {
    grid-column: 2;
    grid-row: 1;
}


.timeline-theme-milestones
.life-event:nth-child(even)
.life-event-card {
    grid-column: 1;
    grid-row: 1;

    border-radius:
        18px
        6px
        18px
        18px;

    background:
        linear-gradient(
            135deg,
            #e5f7fb,
            #ffffff
        );

    text-align: right;
}


.timeline-theme-milestones
.life-event:nth-child(3n)
.life-event-card {
    background:
        linear-gradient(
            135deg,
            #ecf8ed,
            #ffffff
        );
}


.timeline-theme-milestones
.life-event-type {
    background: #d65375;
    color: #ffffff;
}


.timeline-theme-milestones
.life-event:nth-child(even)
.life-event-type {
    background: #3b91ab;
}


/* ----------------------------------------------------------
   Responsive adaptations
   ---------------------------------------------------------- */

@media (max-width: 760px) {
    .timeline-theme-cards .life-event,
    .timeline-theme-journal .life-event,
    .timeline-theme-milestones .life-event {
        display: grid;

        grid-template-columns:
            32px
            minmax(0,1fr);

        gap: 10px;
    }


    .timeline-theme-cards .life-event-date,
    .timeline-theme-journal .life-event-date,
    .timeline-theme-milestones .life-event-date,
    .timeline-theme-milestones
    .life-event:nth-child(even)
    .life-event-date {
        grid-column: 2;
        grid-row: auto;

        width: fit-content;

        text-align: left;
    }


    .timeline-theme-cards .life-event-dot,
    .timeline-theme-milestones .life-event-dot,
    .timeline-theme-milestones
    .life-event:nth-child(even)
    .life-event-dot {
        grid-column: 1;
        grid-row: 1 / span 2;

        justify-self: center;
    }


    .timeline-theme-journal .life-event-dot {
        display: none;
    }


    .timeline-theme-cards .life-event-card,
    .timeline-theme-journal .life-event-card,
    .timeline-theme-milestones .life-event-card,
    .timeline-theme-milestones
    .life-event:nth-child(even)
    .life-event-card {
        grid-column: 2;
        grid-row: auto;

        text-align: left;
    }


    .timeline-theme-milestones
    .life-timeline::before {
        left: 15px;
        transform: none;
    }

}


/* ==========================================================
   Selected-theme printing
   The class already applied to .timeline-page is explicitly
   refreshed by beforeprint / Print Timeline.
   ========================================================== */

@media print {

    .timeline-page {
        -webkit-print-color-adjust:
            exact !important;

        print-color-adjust:
            exact !important;
    }


    .timeline-page .life-event,
    .timeline-page .life-event-card,
    .timeline-page .timeline-profile {
        break-inside:
            avoid !important;

        page-break-inside:
            avoid !important;
    }


    /* Classic print */
    .timeline-page.timeline-theme-classic
    .life-event-card {
        border-left:
            5px solid #376d9f !important;

        background:
            #ffffff !important;
    }


    .timeline-page.timeline-theme-classic
    .life-event-dot {
        background:
            #376d9f !important;
    }


    /* Heritage print */
    .timeline-page.timeline-theme-heritage
    .timeline-profile,
    .timeline-page.timeline-theme-heritage
    .life-event-card {
        background:
            #fff8ea !important;

        border-color:
            #b99668 !important;
    }


    .timeline-page.timeline-theme-heritage
    .life-event-type {
        background:
            #f2dfc2 !important;

        color:
            #744d25 !important;
    }


    /* Modern Cards print */
    .timeline-page.timeline-theme-cards
    .life-event-card {
        box-shadow:
            none !important;
    }


    .timeline-page.timeline-theme-cards
    .life-event:nth-child(5n+1)
    .life-event-card {
        background:
            #f2efff !important;
    }


    .timeline-page.timeline-theme-cards
    .life-event:nth-child(5n+2)
    .life-event-card {
        background:
            #e8f7ff !important;
    }


    .timeline-page.timeline-theme-cards
    .life-event:nth-child(5n+3)
    .life-event-card {
        background:
            #e9f8f2 !important;
    }


    .timeline-page.timeline-theme-cards
    .life-event:nth-child(5n+4)
    .life-event-card {
        background:
            #fff4df !important;
    }


    .timeline-page.timeline-theme-cards
    .life-event:nth-child(5n)
    .life-event-card {
        background:
            #ffeaf1 !important;
    }


    /* Journal print */
    .timeline-page.timeline-theme-journal {
        background:
            #ffffff !important;
    }


    .timeline-page.timeline-theme-journal
    .life-event-date {
        background:
            #2a8d7c !important;

        color:
            #ffffff !important;
    }


    .timeline-page.timeline-theme-journal
    .life-event:nth-child(4n+2)
    .life-event-date {
        background:
            #6d5cc3 !important;
    }


    .timeline-page.timeline-theme-journal
    .life-event:nth-child(4n+3)
    .life-event-date {
        background:
            #d2714c !important;
    }


    .timeline-page.timeline-theme-journal
    .life-event:nth-child(4n)
    .life-event-date {
        background:
            #c58b2a !important;
    }


    /* Milestones print — preserve alternating geometry */
    .timeline-page.timeline-theme-milestones
    .life-event {
        display:
            grid !important;

        grid-template-columns:
            1fr
            54px
            1fr !important;

        gap:
            18px !important;
    }


    .timeline-page.timeline-theme-milestones
    .life-timeline::before {
        left:
            50% !important;

        transform:
            translateX(-50%) !important;
    }


    .timeline-page.timeline-theme-milestones
    .life-event-date {
        grid-column:
            1 !important;

        text-align:
            right !important;
    }


    .timeline-page.timeline-theme-milestones
    .life-event-dot {
        grid-column:
            2 !important;

        background:
            #db5575 !important;
    }


    .timeline-page.timeline-theme-milestones
    .life-event-card {
        grid-column:
            3 !important;

        background:
            #ffe9ef !important;

        text-align:
            left !important;
    }


    .timeline-page.timeline-theme-milestones
    .life-event:nth-child(even)
    .life-event-date {
        grid-column:
            3 !important;

        grid-row:
            1 !important;

        text-align:
            left !important;
    }


    .timeline-page.timeline-theme-milestones
    .life-event:nth-child(even)
    .life-event-dot {
        grid-column:
            2 !important;

        grid-row:
            1 !important;

        background:
            #3b91ab !important;
    }


    .timeline-page.timeline-theme-milestones
    .life-event:nth-child(even)
    .life-event-card {
        grid-column:
            1 !important;

        grid-row:
            1 !important;

        background:
            #e5f7fb !important;

        text-align:
            right !important;
    }

}


/* Admin management console */
.admin-console{max-width:1280px}
.admin-console-nav{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 24px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.admin-console-nav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:inherit;font-weight:800}
.admin-console-nav a:hover{background:#eef3f7}
.admin-kpi-grid,.admin-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.admin-quick-card,.admin-panel{border:1px solid var(--border);border-radius:14px;background:var(--card);padding:18px}
.admin-quick-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px}
.admin-quick-card strong{font-size:1rem}
.admin-quick-card span{color:var(--muted);font-size:.82rem}
.admin-management-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.admin-panel{margin-bottom:18px}
.admin-search{display:flex;gap:8px;margin-bottom:16px}
.admin-search input{flex:1}
.form-stack{display:flex;flex-direction:column;gap:12px}
.form-stack label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.form-stack .check-row{flex-direction:row;align-items:center}
.inline-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.inline-actions form{display:flex;gap:6px}
.audit-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,2fr) auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:.82rem}
.admin-mini-list{display:flex;flex-direction:column;gap:7px}
@media(max-width:850px){.admin-kpi-grid,.admin-quick-grid,.admin-management-grid{grid-template-columns:1fr}
.audit-row{grid-template-columns:1fr}
.admin-table-wrap{overflow:auto}
}


.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 9px 14px;

    background: #fff3cd;
    border-bottom: 1px solid #e4c56a;
    color: #5d4810;

    font-size: .86rem;
    font-weight: 700;
}


.impersonation-banner form {
    margin: 0;
}


.impersonation-banner button {
    border: 1px solid #8d6b13;
    border-radius: 7px;

    background: #fff8dc;

    padding: 5px 9px;
    cursor: pointer;
}


.support-message {
    margin: 12px 0;
    padding: 14px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--card);
}


.support-message.admin-message {
    border-left: 5px solid var(--accent);
    background: #f4f8fc;
}



/* ==========================================================
   6. COLOR SPINE — compact infographic-style life timeline
   ========================================================== */
.life-event-year { display:none; }

.timeline-theme-spine{--spine-line:#55bea9;--spine-navy:#31537d;--spine-red:#d9534f;--spine-orange:#dd873b;--spine-purple:#8b5aa6;--spine-blue:#3f77ad;--spine-aqua:#56beca;}

.timeline-theme-spine .timeline-profile{border:0;border-radius:18px;background:linear-gradient(135deg,#f5fbf9,#fff);box-shadow:0 7px 20px rgba(35,83,75,.08)}

.timeline-theme-spine .life-timeline{position:relative;margin-top:30px;padding:14px 0 28px}

.timeline-theme-spine .life-timeline::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:18px;transform:translateX(-50%);border-radius:999px;background:linear-gradient(to bottom,#4ab8a4,#62c8b7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}

.timeline-theme-spine .life-event{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);gap:10px;min-height:100px;margin:0}

.timeline-theme-spine .life-event-date{grid-column:1;align-self:center;padding:0 8px 0 0;color:#2a2c30;text-align:right}

.timeline-theme-spine .life-event-date>strong,.timeline-theme-spine .life-event-date>span:not(.life-event-year){display:none}

.timeline-theme-spine .life-event-year{display:block;font-family:Georgia,"Times New Roman",serif;font-size:1.7rem;font-weight:900;line-height:1;color:#2b2d31}

.timeline-theme-spine .life-event-dot{grid-column:2;position:relative;z-index:3;align-self:center;justify-self:center;width:16px;height:16px;margin:0;border:0;border-radius:4px;background:var(--spine-navy);box-shadow:0 0 0 2px rgba(255,255,255,.9)}

.timeline-theme-spine .life-event-dot::after{content:"";position:absolute;top:50%;left:14px;width:24px;height:5px;transform:translateY(-50%);border-radius:999px;background:inherit}

.timeline-theme-spine .life-event-card{grid-column:3;align-self:center;min-width:0;padding:4px 0 4px 14px;border:0;border-radius:0;background:transparent;box-shadow:none}

.timeline-theme-spine .life-event-card h2{margin:2px 0 3px;font-family:Georgia,"Times New Roman",serif;font-size:1rem;font-weight:800;line-height:1.18;color:#2c2f34}

.timeline-theme-spine .life-event-type{display:inline-block;padding:3px 7px;border-radius:999px;background:#edf5f3;color:#456d67;font-size:.58rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

.timeline-theme-spine .life-event-place,.timeline-theme-spine .life-event-card p,.timeline-theme-spine .timeline-related-person,.timeline-theme-spine .life-event-notes{margin-top:3px;color:#5a6068;font-size:.68rem;line-height:1.35}

.timeline-theme-spine .life-event:nth-child(even) .life-event-date{grid-column:3;padding:0 0 0 8px;text-align:left}

.timeline-theme-spine .life-event:nth-child(even) .life-event-dot{grid-column:2;grid-row:1}

.timeline-theme-spine .life-event:nth-child(even) .life-event-dot::after{right:14px;left:auto}

.timeline-theme-spine .life-event:nth-child(even) .life-event-card{grid-column:1;grid-row:1;padding:4px 14px 4px 0;text-align:right}

.timeline-theme-spine .life-event:nth-child(even) .life-event-card .life-event-top{justify-content:flex-end}

.timeline-theme-spine .life-event:nth-child(6n+1) .life-event-dot{background:var(--spine-navy)}

.timeline-theme-spine .life-event:nth-child(6n+2) .life-event-dot{background:var(--spine-orange)}

.timeline-theme-spine .life-event:nth-child(6n+3) .life-event-dot{background:var(--spine-red)}

.timeline-theme-spine .life-event:nth-child(6n+4) .life-event-dot{background:var(--spine-purple)}

.timeline-theme-spine .life-event:nth-child(6n+5) .life-event-dot{background:var(--spine-blue)}

.timeline-theme-spine .life-event:nth-child(6n) .life-event-dot{background:var(--spine-aqua)}

@media(max-width:720px){.timeline-theme-spine .life-timeline::before{left:24px;width:14px;transform:none}
.timeline-theme-spine .life-event,.timeline-theme-spine .life-event:nth-child(even){display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;min-height:105px}
.timeline-theme-spine .life-event-date,.timeline-theme-spine .life-event:nth-child(even) .life-event-date{grid-column:2;grid-row:1;align-self:start;padding:0;margin-top:2px;text-align:left}
.timeline-theme-spine .life-event-year{font-size:1.35rem}
.timeline-theme-spine .life-event-dot,.timeline-theme-spine .life-event:nth-child(even) .life-event-dot{grid-column:1;grid-row:1/span 2;align-self:start;margin-top:7px}
.timeline-theme-spine .life-event-dot::after,.timeline-theme-spine .life-event:nth-child(even) .life-event-dot::after{right:auto;left:14px;width:14px}
.timeline-theme-spine .life-event-card,.timeline-theme-spine .life-event:nth-child(even) .life-event-card{grid-column:2;grid-row:2;padding:0 0 12px;text-align:left}
.timeline-theme-spine .life-event:nth-child(even) .life-event-card .life-event-top{justify-content:flex-start}
}

@media print{.timeline-page.timeline-theme-spine{max-width:none!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
.timeline-page.timeline-theme-spine .life-timeline::before{left:50%!important;width:18px!important;transform:translateX(-50%)!important;background:#55bea9!important}
.timeline-page.timeline-theme-spine .life-event{display:grid!important;grid-template-columns:1fr 76px 1fr!important;gap:10px!important;min-height:88px!important;break-inside:avoid!important;page-break-inside:avoid!important}
.timeline-page.timeline-theme-spine .life-event-date{grid-column:1!important;text-align:right!important}
.timeline-page.timeline-theme-spine .life-event-dot{grid-column:2!important}
.timeline-page.timeline-theme-spine .life-event-card{grid-column:3!important;background:transparent!important;text-align:left!important;box-shadow:none!important}
.timeline-page.timeline-theme-spine .life-event:nth-child(even) .life-event-date{grid-column:3!important;grid-row:1!important;text-align:left!important}
.timeline-page.timeline-theme-spine .life-event:nth-child(even) .life-event-dot{grid-column:2!important;grid-row:1!important}
.timeline-page.timeline-theme-spine .life-event:nth-child(even) .life-event-card{grid-column:1!important;grid-row:1!important;text-align:right!important}
.timeline-page.timeline-theme-spine .life-event:nth-child(6n+1) .life-event-dot{background:#31537d!important}
.timeline-page.timeline-theme-spine .life-event:nth-child(6n+2) .life-event-dot{background:#dd873b!important}
.timeline-page.timeline-theme-spine .life-event:nth-child(6n+3) .life-event-dot{background:#d9534f!important}
.timeline-page.timeline-theme-spine .life-event:nth-child(6n+4) .life-event-dot{background:#8b5aa6!important}
.timeline-page.timeline-theme-spine .life-event:nth-child(6n+5) .life-event-dot{background:#3f77ad!important}
.timeline-page.timeline-theme-spine .life-event:nth-child(6n) .life-event-dot{background:#56beca!important}
}


/* Support center */
.landing-support{max-width:1180px;margin:34px auto;padding:28px;display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:start;border:1px solid var(--border);border-radius:20px;background:var(--card)}

.landing-support-copy h2{margin:.35rem 0 .6rem}
.landing-support-copy p{color:var(--muted);line-height:1.65}
.landing-support-form{margin:0}

.support-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.support-public-page{padding-top:48px}
.support-success-card{padding:34px;border:1px solid var(--border);border-radius:18px;background:var(--card);text-align:center}
.tracking-code{display:inline-block;margin:16px 0 22px;padding:13px 18px;border:1px dashed var(--accent);border-radius:12px;background:#f4f8fc;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.25rem;font-weight:900;letter-spacing:.06em}
.ticket-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.ticket-heading h1,.ticket-heading h2{margin-top:.3rem}
.ticket-status{display:inline-flex;padding:7px 10px;border-radius:999px;background:#eef3f7;font-size:.78rem;font-weight:900}
.support-ticket-meta{display:flex;flex-wrap:wrap;gap:12px 22px;margin:12px 0 20px;color:var(--muted)}
.resolution-card{margin:18px 0;padding:18px;border-left:5px solid #3a8f63;border-radius:12px;background:#f0faf4}
.resolution-card h2,.resolution-card h3{margin-top:0}
.resolution-card p{white-space:pre-wrap}
.support-ticket-row{grid-template-columns:180px minmax(180px,1fr) auto}
.resolve-form{border-left:5px solid #3a8f63}
.form-card textarea{resize:vertical}

@media(max-width:800px){.landing-support{grid-template-columns:1fr;margin:20px 14px}
.support-contact-grid{grid-template-columns:1fr}
.ticket-heading{flex-direction:column}
.support-ticket-row{grid-template-columns:1fr}
}


/* --------------------------------------------------------------------------
   Shared authenticated navigation
   The same top menu fragment is rendered on tree, form, support and admin pages.
   -------------------------------------------------------------------------- */
.global-topbar {
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}


.global-topbar .brand {
    flex: 0 0 auto;
    white-space: nowrap;
}


.global-topbar .global-search-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 420px;
    min-width: 220px;
    max-width: 720px;
    margin-left: auto;
}

.global-topbar .global-nav-search {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.global-topbar .global-nav-search input {
    width: 100%;
}


.global-topbar .global-nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}


.global-topbar .global-nav-logout {
    display: inline-flex;
    margin: 0;
}


.global-topbar .global-nav-actions .button,
.global-topbar .global-nav-logout .button {
    white-space: nowrap;
}

.nav-tree-switcher select{min-height:42px;max-width:180px;border:1px solid var(--border);border-radius:9px;padding:7px 30px 7px 10px;background:var(--card);color:var(--text);font-weight:750}

/* Multi-tree workspace */
.my-trees-page{width:min(1240px,100%)}.my-trees-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}.my-trees-heading h1{margin:.25rem 0}.tree-plan-summary{display:flex;min-width:210px;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:var(--shadow)}.tree-plan-summary span{color:var(--muted);font-size:.88rem}.create-tree-card{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(420px,1.3fr);gap:28px;margin-bottom:24px;padding:24px;border:1px solid #cbdbea;border-radius:18px;background:linear-gradient(135deg,#f3f8fc,#fff);box-shadow:var(--shadow)}.create-tree-copy{display:flex;align-items:flex-start;gap:14px}.create-tree-copy h2{margin:2px 0 6px}.create-tree-copy p{margin:0;color:var(--muted);line-height:1.5}.create-tree-icon{display:grid;width:46px;height:46px;place-items:center;flex:0 0 46px;border-radius:13px;background:var(--accent);color:#fff;font-size:1.5rem;font-weight:900}.create-tree-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.create-tree-form>label{font-size:.8rem;font-weight:800}.create-tree-form input[type=text],.create-tree-form input:not([type]),.create-tree-form textarea{width:100%;margin-top:5px;border:1px solid var(--border);border-radius:9px;padding:9px 10px;background:#fff}.create-tree-form fieldset{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:9px 18px;margin:0;padding:12px;border:1px solid var(--border);border-radius:10px}.create-tree-form legend{padding:0 5px;font-size:.8rem;font-weight:850}.create-tree-form fieldset label{font-size:.82rem}.create-tree-form>.button{justify-self:start}.tree-limit-card{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;padding:20px;border:1px solid #f0c7c7;border-radius:15px;background:#fff7f7}.tree-limit-card p{margin:4px 0 0;color:var(--muted)}.my-tree-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.my-tree-card{overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}.my-tree-card.archived{opacity:.78}.my-tree-card-cover{position:relative;display:grid;height:104px;place-items:center;background:linear-gradient(135deg,#d9ecf8,#edf5fb)}.my-tree-card-cover>span:first-child{display:grid;width:58px;height:58px;place-items:center;border:3px solid rgba(255,255,255,.8);border-radius:50%;background:var(--accent);color:#fff;font-size:1.5rem;font-weight:900}.tree-status-pill{position:absolute;top:12px;right:12px;padding:5px 9px;border-radius:999px;background:#fff;color:#315b7d;font-size:.72rem;font-weight:900}.my-tree-card.archived .tree-status-pill{color:#6b7280}.my-tree-card-body{padding:18px}.my-tree-card-body h2{margin:0 0 5px}.my-tree-card-body>p{min-height:2.7em;margin:0;color:var(--muted);line-height:1.45}.my-tree-metrics{display:flex;justify-content:space-between;gap:16px;margin:17px 0;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);color:var(--muted);font-size:.8rem}.my-tree-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.my-tree-actions form{margin:0}.my-tree-actions .button{min-height:38px;padding:8px 12px;font-size:.8rem}

@media(max-width:800px){.my-trees-heading{flex-direction:column}.tree-plan-summary{width:100%}.create-tree-card{grid-template-columns:1fr}.create-tree-form{grid-template-columns:1fr}.my-tree-grid{grid-template-columns:1fr}.my-tree-metrics{flex-direction:column;gap:5px}.nav-tree-switcher select{max-width:145px}}


@media (max-width: 1180px) {
    .global-topbar {
        flex-wrap: wrap;
    }


    .global-topbar .global-search-group {
        order: 3;
        flex-basis: 100%;
        max-width: none;
        margin-left: 0;
    }


    .global-topbar .global-nav-actions {
        margin-left: auto;
        overflow-x: auto;
        max-width: calc(100vw - 180px);
        padding-bottom: 2px;
    }

}


@media (max-width: 720px) {
    .global-topbar .global-nav-actions {
        order: 2;
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
    }


    .global-topbar .global-search-group {
        order: 3;
    }

}



/* ==========================================================
   Consistent active navigation + person timeline workspace
   ========================================================== */
.global-nav-actions .button {
    background: var(--card);
    color: var(--text);
    border-color: var(--border);
}


.global-nav-actions .button.nav-active,
.global-nav-actions .button[aria-current="page"] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}


/* All timeline/life-event internal pages use one fixed content width. */
.page.internal-page {
    width: min(1180px, 100%);
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}


/* Timeline themes are presentation skins only; none may resize the page. */
.timeline-page.internal-page,
.timeline-page.internal-page.timeline-theme-classic,
.timeline-page.internal-page.timeline-theme-heritage,
.timeline-page.internal-page.timeline-theme-cards,
.timeline-page.internal-page.timeline-theme-journal,
.timeline-page.internal-page.timeline-theme-milestones,
.timeline-page.internal-page.timeline-theme-spine {
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
}


.internal-page-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}


.internal-page-nav .button {
    background: var(--card);
    color: var(--text);
    border-color: var(--border);
}


.internal-page-nav .button.internal-nav-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}


.internal-page-controls,
.timeline-view-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin: -2px 0 16px;
}


@media (max-width: 900px) {
    .internal-page .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }


    .internal-page-nav {
        justify-content: flex-start;
        width: 100%;
    }

}



/* ==========================================================
   Navigation and action alignment cleanup
   ========================================================== */

/* Keep person life-event navigation on one horizontal line. */
.internal-page .page-heading {
    align-items: flex-start;
}


.internal-page .page-heading > :first-child {
    flex: 1 1 320px;
    min-width: 0;
}


.internal-page .page-heading > .internal-page-nav,
.internal-page .page-heading > div:has(> .internal-page-nav) {
    flex: 0 0 auto;
    min-width: 0;
}


.internal-page-nav {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 8px;
}


.internal-page-nav .button {
    flex: 0 0 auto;
    padding-left: 13px;
    padding-right: 13px;
}


/* People page: page-specific creation/destructive actions live together. */
.people-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
}


.people-page-actions .inline-form {
    margin: 0;
}


/* Selected-person panel: fixed two-column action grid instead of uneven wrapping. */
.person-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 14px;
}


.person-detail-actions > .button,
.person-detail-actions > .inline-form,
.person-detail-actions > .inline-form .button {
    width: 100%;
    min-width: 0;
    margin: 0;
}


.person-detail-actions > .button,
.person-detail-actions > .inline-form .button {
    justify-content: center;
}


.person-detail-actions > .inline-form {
    grid-column: 1 / -1;
}


/* Bulk-event footer controls stay balanced and aligned. */
.bulk-events-bottom-actions {
    align-items: center;
}


.bulk-events-bottom-actions > .button,
.bulk-events-save-actions .button {
    min-width: 138px;
    justify-content: center;
}


@media (max-width: 1000px) {
    /* Preserve one-line internal navigation by allowing horizontal scrolling,
       rather than wrapping the fourth item onto another row. */
    .internal-page .page-heading {
        flex-direction: column;
        align-items: stretch;
    }


    .internal-page .page-heading > .internal-page-nav,
    .internal-page .page-heading > div:has(> .internal-page-nav) {
        width: 100%;
    }


    .internal-page-nav {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }

}


@media (max-width: 560px) {
    .people-page-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }


    .person-detail-actions {
        grid-template-columns: 1fr;
    }


    .person-detail-actions > .inline-form {
        grid-column: auto;
    }

}



/* Admin dashboard: compact the remaining quick actions after removing redundant links. */
.admin-quick-grid.admin-quick-grid-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .admin-quick-grid.admin-quick-grid-compact {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   Friendly family import workspace
   ========================================================== */
.import-page.import-workspace {
    width: min(1080px, 100%);
    max-width: 1080px;
}

.import-hero {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.import-hero-copy { min-width: 0; }

.import-hero-actions {
    flex: 0 0 auto;
    padding-top: 10px;
}

@media (max-width: 760px) {
    .import-hero { flex-direction: column; }
    .import-hero-actions { padding-top: 0; }
}

.import-hero h1 { margin-bottom: 6px; }

.import-method-card {
    margin: 20px 0 16px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
}

.import-method-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.import-method-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.import-method-tab:hover { background: var(--bg); }

.import-method-tab.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.import-method-tab strong,
.import-method-tab small { display: block; }

.import-method-tab small { margin-top: 3px; color: var(--muted); font-weight: 500; }

.import-method-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: .8rem;
    font-weight: 900;
}

.import-method-tab.is-active .import-method-icon {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.import-panel {
    padding: 0;
    border: 0;
    background: transparent;
}

.import-stepper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 18px 0 12px;
}

.import-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .82rem;
}

.import-step:not(:last-child)::after {
    content: "";
    height: 1px;
    flex: 1;
    margin: 0 12px;
    background: var(--border);
}

.import-step > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--card);
    font-weight: 850;
}

.import-step.is-current { color: var(--text); }

.import-step.is-current > span,
.import-step.is-complete > span {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.import-main-form,
.zip-import-card {
    margin-top: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
}

.import-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.import-section-heading h2 { margin: 0 0 4px; }

.import-inline-tools,
.import-primary-actions,
.import-help-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.button.compact { min-height: 36px; padding: 8px 12px; }

.import-textarea {
    width: 100%;
    min-height: 310px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .84rem;
    line-height: 1.55;
    tab-size: 4;
}

.import-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.import-file-row > div { flex: 1; min-width: 220px; }

.import-file-button { position: relative; overflow: hidden; cursor: pointer; }

.import-file-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.import-file-name { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.import-help-toggle-row { margin-top: 14px; }

.import-format-guide {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.import-format-guide h3 { margin: 0 0 4px; }

.import-guide-note { margin: 12px 0 0; }

.import-preview {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg);
}

.import-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.import-preview-heading h3 { margin: 2px 0 0; }

.import-preview-status {
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef1f4;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
}

.import-preview-status.is-ready { background: #e7f6ec; color: #27633a; }

.import-preview-status.has-errors { background: #fff0ee; color: #9c2d26; }

.import-preview-counts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.import-preview-counts > div {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
}

.import-preview-counts strong,
.import-preview-counts span { display: block; }

.import-preview-counts strong { font-size: 1.35rem; }

.import-preview-counts span { margin-top: 2px; color: var(--muted); font-size: .76rem; }

.import-preview-issues { margin-top: 14px; }

.import-preview-issue {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: .84rem;
}

.import-preview-issue:last-child { border-bottom: 0; }

.import-preview-more { padding-top: 8px; color: var(--muted); font-size: .8rem; }

.import-primary-actions {
    justify-content: flex-end;
    margin-top: 18px;
}

.import-primary-actions .button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.import-result-card { margin-bottom: 16px; }

.zip-upload-form { padding: 0; border: 0; box-shadow: none; }

.zip-drop-zone {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 190px;
    padding: 26px;
    border: 2px dashed var(--border);
    border-radius: 14px;
    background: var(--bg);
    text-align: center;
    cursor: pointer;
}

.zip-drop-zone:hover { border-color: var(--accent); background: var(--accent-soft); }

.zip-drop-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 900;
}

.zip-drop-zone input { margin-top: 8px; width: min(360px, 100%); }

.zip-file-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 9px 0 16px;
    color: var(--muted);
    font-size: .78rem;
}

.zip-help-details {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.zip-help-details summary {
    padding: 13px 15px;
    cursor: pointer;
    font-weight: 800;
}

.zip-help-content { padding: 0 15px 15px; }

.zip-help-content pre {
    overflow-x: auto;
    margin: 0;
    padding: 14px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    font-size: .82rem;
    line-height: 1.55;
}

@media (max-width: 760px) {
    .import-method-tabs { grid-template-columns: 1fr; }

    .import-section-heading,
    .import-file-row { align-items: stretch; flex-direction: column; }

    .import-preview-counts { grid-template-columns: repeat(2, 1fr); }

    .import-primary-actions { justify-content: stretch; }

    .import-primary-actions .button { flex: 1; }

}

@media (max-width: 520px) {
    .import-step strong { display: none; }

    .import-preview-counts { grid-template-columns: 1fr 1fr; }

    .import-preview-issue { grid-template-columns: 1fr; gap: 3px; }

}


/* =========================
   Digital Family Book Creator
   ========================= */
.family-book-setup-page { width: min(1180px, 100%); }

.family-book-heading { align-items: flex-start; }

.family-book-heading p { max-width: 780px; margin: 8px 0 0; line-height: 1.55; }

.family-book-builder { display: grid; gap: 16px; }

.family-book-builder-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.book-step-number {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    font-weight: 850;
}

.book-builder-content h2 { margin: 0 0 4px; }

.book-builder-content > .muted { margin: 0 0 18px; }

.book-builder-content input[type="text"],
.book-builder-content select {
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 11px;
    background: var(--card);
    color: var(--text);
}

.book-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.book-option-card {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fbfcfd;
    cursor: pointer;
}

.book-option-card:hover { border-color: #b7c3cf; background: var(--accent-soft); }

.book-option-card input { margin-top: 3px; accent-color: var(--accent); }

.book-option-card span { display: grid; gap: 3px; }

.book-option-card small { color: var(--muted); line-height: 1.4; }

.book-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.book-theme-choice {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "radio swatch" "name name" "help help";
    gap: 8px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
}

.book-theme-choice input { grid-area: radio; align-self: center; accent-color: var(--accent); }

.book-theme-choice .book-theme-swatch { grid-area: swatch; }

.book-theme-choice strong { grid-area: name; }

.book-theme-choice small { grid-area: help; color: var(--muted); line-height: 1.35; }

.book-theme-swatch { height: 52px; border-radius: 8px; border: 1px solid var(--border); }

.classic-swatch { background: linear-gradient(135deg, #f8f5ef 0 48%, #315b7d 48% 53%, #fff 53%); }

.modern-swatch { background: linear-gradient(135deg, #132238 0 37%, #f8f9fb 37% 100%); }

.heritage-swatch { background: linear-gradient(135deg, #efe2c2 0 50%, #795f3a 50% 54%, #fffaf0 54%); }

.book-format-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 740px; margin-top: 18px; }

.book-sort-field { display: block; font-size: .82rem; font-weight: 750; }

.family-book-builder-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.family-book-builder-summary > div { display: grid; gap: 3px; }

.family-book-generate-button { min-width: 220px; }


.family-book-preview-body { background: #e9edf1; }

.family-book-preview-toolbar {
    width: min(1180px, calc(100% - 28px));
    margin: 16px auto;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.family-book-preview-toolbar > div:first-child { display: grid; gap: 2px; }

.family-book-preview-toolbar span { color: var(--muted); font-size: .86rem; }

.family-book-preview-actions { display: flex; gap: 8px; }

.family-book-document {
    --book-accent: #315b7d;
    --book-accent-soft: #eaf1f6;
    --book-paper: #fff;
    --book-ink: #172033;
    width: min(900px, calc(100% - 28px));
    margin: 0 auto 50px;
    color: var(--book-ink);
}

.family-book-theme-modern .family-book-document {
    --book-accent: #172b45;
    --book-accent-soft: #eef2f6;
    --book-paper: #ffffff;
    --book-ink: #111827;
}

/* Keep the Modern book visually distinct from the warm archival Heritage theme. */
.family-book-theme-modern .book-page {
    border-top: 8px solid var(--book-accent);
}

.family-book-theme-modern .book-cover-rule {
    border-color: #cbd5e1;
}

.family-book-theme-modern .book-cover-kicker,
.family-book-theme-modern .book-section-label {
    letter-spacing: .18em;
}

.family-book-theme-heritage .family-book-document {
    --book-accent: #765a34;
    --book-accent-soft: #f2e9d8;
    --book-paper: #fffdf7;
    --book-ink: #33291e;
}

.book-page {
    min-height: 1080px;
    margin: 18px 0;
    padding: 64px 68px;
    background: var(--book-paper);
    border-radius: 4px;
    box-shadow: 0 12px 38px rgba(24,34,50,.13);
    position: relative;
    overflow: hidden;
}

.book-cover { display: flex; flex-direction: column; justify-content: center; text-align: center; }

.book-cover-rule { position: absolute; inset: 34px; border: 1px solid color-mix(in srgb, var(--book-accent) 55%, transparent); pointer-events: none; }

.book-cover-content { position: relative; z-index: 1; max-width: 650px; margin: auto; }

.book-cover-kicker,
.book-section-label { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 900; color: var(--book-accent); }

.book-cover h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.04; margin: 22px 0 14px; }

.family-book-theme-modern .book-cover h1,
.family-book-theme-modern .book-page h2 { font-family: Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.035em; }

.family-book-theme-heritage .book-cover h1,
.family-book-theme-heritage .book-page h2,
.family-book-theme-heritage .book-page h3 { font-family: Georgia, "Times New Roman", serif; }

.book-cover-subtitle { font-size: 1.2rem; color: #5d6571; line-height: 1.5; }

.book-cover-photo { width: 190px; height: 190px; margin: 34px auto 20px; border-radius: 50%; overflow: hidden; border: 6px solid var(--book-accent-soft); }

.book-cover-photo img { width: 100%; height: 100%; object-fit: cover; }

.book-cover-family-name { margin-top: 28px; font-weight: 800; color: var(--book-accent); }

.book-cover-footer { position: absolute; bottom: 56px; left: 68px; right: 68px; color: #747b84; font-size: .8rem; }

.book-title-page { display: flex; flex-direction: column; justify-content: center; text-align: center; }

.book-title-page h2,
.book-contents-page h2,
.book-family-overview h2,
.book-generation-overview h2,
.book-person-chapter h2,
.book-ending-page h2 { font-family: Georgia, "Times New Roman", serif; font-size: 2.35rem; margin: 12px 0; color: var(--book-ink); }

.book-title-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 40px auto 20px; width: min(560px, 100%); }

.book-title-stats > div { padding: 18px; border-top: 2px solid var(--book-accent); border-bottom: 1px solid #d8dde2; display: grid; gap: 5px; }

.book-title-stats strong { font-size: 1.8rem; }

.book-title-stats span { color: #6e7580; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }

.book-tree-description { max-width: 620px; margin: 24px auto 0; line-height: 1.7; color: #555e69; }

.book-contents-list { list-style: none; padding: 0; margin: 38px 0 0; }

.book-contents-list li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid #dfe3e8; }

.book-contents-list li span:first-child { font-weight: 750; }

.book-contents-list li span:last-child { color: #7a818b; }

.book-lead { font-family: Georgia, "Times New Roman", serif; font-size: 1.22rem; line-height: 1.75; max-width: 700px; }

.book-overview-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 30px 0; }

.book-overview-facts > div { border: 1px solid #dfe3e8; padding: 16px; border-radius: 10px; display: grid; gap: 5px; }

.book-overview-facts span { color: #757d87; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; }

.book-overview-facts strong { font-size: 1.15rem; }

.book-place-list h3 { margin: 28px 0 10px; }

.book-place-pills { display: flex; flex-wrap: wrap; gap: 7px; }

.book-place-pills span { padding: 7px 10px; border-radius: 999px; background: var(--book-accent-soft); color: var(--book-accent); font-size: .82rem; font-weight: 700; }

.book-generation-block { margin-top: 30px; }

.book-generation-block h3 { padding-bottom: 8px; border-bottom: 2px solid var(--book-accent); }

.book-generation-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }

.book-generation-person { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid #e0e4e8; border-radius: 10px; break-inside: avoid; }

.book-generation-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }

.book-generation-avatar img { width: 100%; height: 100%; object-fit: cover; }

.book-generation-person > div:last-child { display: grid; gap: 2px; }

.book-generation-person span,
.book-generation-person small { color: #727a85; font-size: .78rem; }

.book-person-header { display: flex; gap: 24px; align-items: center; border-bottom: 2px solid var(--book-accent); padding-bottom: 20px; }

.book-person-photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--book-accent-soft); flex: 0 0 auto; }

.book-person-photo img { width: 100%; height: 100%; object-fit: cover; }

.book-photo-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--book-accent); font-size: 1.5rem; font-weight: 900; }

.book-person-heading-copy h2 { margin-bottom: 6px; }

.book-person-years { margin: 0; color: #717985; }

.book-person-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 28px; margin: 26px 0 32px; }

.book-person-facts > div { display: grid; gap: 3px; padding: 11px 0; border-bottom: 1px solid #e2e6ea; }

.book-person-facts span:first-child { color: #757d87; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; font-weight: 800; }

.book-person-facts strong { font-size: .9rem; line-height: 1.45; }

.book-person-story { margin: 30px 0; }

.book-person-story h3,
.book-person-timeline h3 { font-size: 1.15rem; margin: 0 0 12px; }

.book-person-story p { line-height: 1.75; color: #3f4650; }

.book-person-notes { padding: 13px 15px; background: var(--book-accent-soft); border-left: 3px solid var(--book-accent); }

.book-preserve-lines { white-space: pre-line; }

.book-person-timeline { margin-top: 34px; }

.book-timeline-row { display: grid; grid-template-columns: 110px 22px 1fr; gap: 10px; min-height: 78px; break-inside: avoid; }

.book-timeline-date { text-align: right; display: grid; align-content: start; gap: 2px; padding-top: 4px; font-size: .76rem; }

.book-timeline-date span { color: #7b838d; }

.book-timeline-marker { position: relative; }

.book-timeline-marker::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: #d5dce2; }

.book-timeline-marker::after { content: ""; position: absolute; left: 4px; top: 7px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--book-accent); background: var(--book-paper); }

.book-timeline-content { padding-bottom: 20px; display: grid; gap: 3px; }

.book-event-type { color: var(--book-accent); font-size: .65rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }

.book-timeline-content small { color: #737b85; }

.book-timeline-content p { margin: 6px 0 0; color: #505863; line-height: 1.5; }

.book-ending-page { display: flex; flex-direction: column; justify-content: center; text-align: center; }

.book-ending-mark { text-transform: uppercase; letter-spacing: .18em; color: var(--book-accent); font-size: .75rem; font-weight: 900; }

.book-ending-page p { max-width: 620px; margin: 8px auto; line-height: 1.7; color: #5e6671; }


@media (max-width: 760px) {
    .family-book-builder-card { grid-template-columns: 1fr; }

    .book-option-grid, .book-theme-grid, .book-format-fields { grid-template-columns: 1fr; }

    .family-book-builder-summary, .family-book-preview-toolbar { align-items: stretch; flex-direction: column; }

    .family-book-generate-button { width: 100%; }

    .book-page { min-height: auto; padding: 34px 24px; }

    .book-generation-grid, .book-person-facts, .book-overview-facts { grid-template-columns: 1fr; }

    .book-person-header { align-items: flex-start; }

    .book-person-photo { width: 90px; height: 90px; }

    .book-timeline-row { grid-template-columns: 84px 18px 1fr; }

    .book-timeline-marker::before { left: 7px; }

    .book-timeline-marker::after { left: 2px; }

}


@media print {
    @page { size: Letter; margin: 0.55in; }

    html, body, .family-book-preview-body { background: #fff !important; }

    .book-screen-only { display: none !important; }

    .family-book-document { width: 100%; margin: 0; }

    .book-page {
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        break-after: page;
        page-break-after: always;
    }

    .book-person-chapter { break-before: page; page-break-before: always; }

    .book-page:last-child { break-after: auto; page-break-after: auto; }

    .book-cover { min-height: 9.2in; }

    .book-title-page, .book-ending-page { min-height: 9.2in; }

    .book-cover-rule { inset: .15in; }

    .book-generation-person, .book-timeline-row, .book-person-story, .book-person-facts > div { break-inside: avoid; page-break-inside: avoid; }

    .book-cover-photo, .book-person-photo, .book-generation-avatar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

    .book-cover-footer { bottom: .2in; left: .3in; right: .3in; }

}


/* Family Book: exact Sticky Notes Tree view */
.book-sticky-tree-page h2 { margin-bottom: 6px; }

.book-sticky-tree-intro {
    margin: 0 0 20px;
    color: #68717c;
    line-height: 1.5;
}

.book-sticky-tree-status {
    padding: 18px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    color: #68717c;
    text-align: center;
}

.book-sticky-tree-viewport {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 8px;
}

.book-sticky-tree-canvas {
    position: relative;
    margin: 0 auto;
}

.book-sticky-tree-page .sticky-tree {
    margin: 0;
}

.book-sticky-tree-page .sticky-person-note {
    cursor: default;
}

.book-sticky-tree-page .sticky-person-note:hover {
    transform: rotate(-1.2deg);
    box-shadow: 0 7px 16px rgba(25, 35, 45, .12);
}

.book-sticky-tree-page .sticky-family-unit .sticky-person-note:nth-child(even):hover {
    transform: rotate(1.25deg);
}


@media print {
    .book-sticky-tree-page {
        overflow: visible !important;
    }

    .book-sticky-tree-page .book-sticky-tree-viewport {
        overflow: visible !important;
    }

    .book-sticky-tree-page .sticky-tree {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

}


/* Relationship drag-and-drop editor */
.relationship-edit-toggle.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}


.relationship-edit-toggle:disabled {
    opacity: .55;
    cursor: not-allowed;
}


.relationship-edit-mode .sticky-person-note.relationship-draggable {
    cursor: grab;
    outline: 2px dashed transparent;
    outline-offset: 4px;
}


.relationship-edit-mode .sticky-person-note.relationship-draggable:active {
    cursor: grabbing;
}


.sticky-person-note.relationship-dragging {
    opacity: .45;
    transform: rotate(-2deg) scale(.98);
}


.sticky-person-note.relationship-drop-target {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(50, 91, 130, .12), 0 14px 28px rgba(15, 23, 42, .18);
    transform: translateY(-3px) rotate(0deg) scale(1.02);
}


.relationship-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px;
}


.relationship-modal.hidden {
    display: none;
}


.relationship-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(2px);
}


.relationship-modal-card {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    padding: 22px;
}


.relationship-modal-header,
.relationship-modal-actions,
.relationship-move-summary {
    display: flex;
    align-items: center;
    gap: 12px;
}


.relationship-modal-header {
    justify-content: space-between;
    margin-bottom: 18px;
}


.relationship-modal-header h2 {
    margin: 3px 0 0;
}


.relationship-modal-close {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}


.relationship-move-summary {
    justify-content: space-between;
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface, #f7f9fc);
}


.relationship-person-summary {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.relationship-person-summary strong {
    overflow-wrap: anywhere;
}


.relationship-move-arrow {
    flex: 0 0 auto;
    font-size: 1.35rem;
    color: var(--muted);
}


.field-label {
    display: block;
    margin: 0 0 7px;
    font-weight: 700;
}


.relationship-choice-select {
    width: 100%;
    min-height: 44px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    color: var(--text);
    padding: 8px 10px;
}


.relationship-check-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 0;
    cursor: pointer;
}


.relationship-check-row.hidden {
    display: none;
}


.relationship-check-row input {
    margin-top: 3px;
}


.relationship-derived-note {
    margin-top: 8px;
    padding: 11px 12px;
    border-radius: 10px;
    background: #f7f9fc;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.45;
}


.relationship-edit-error {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #efb0b0;
    border-radius: 9px;
    background: #fff3f3;
    color: #a21d1d;
}


.relationship-edit-error.hidden {
    display: none;
}


.relationship-modal-actions {
    justify-content: flex-end;
    margin-top: 18px;
}


body.modal-open {
    overflow: hidden;
}


@media (max-width: 680px) {
    .relationship-move-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .relationship-move-arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    .relationship-modal-actions {
        flex-wrap: wrap;
    }

}


.relationship-edit-mode .sticky-family-unit.relationship-family-drop-zone {
    border-radius: 14px;
    transition: background .15s ease, box-shadow .15s ease;
}


.relationship-edit-mode .sticky-family-unit.relationship-family-drop-target {
    background: rgba(50, 91, 130, .07);
    box-shadow: 0 0 0 3px rgba(50, 91, 130, .18);
}


/* ===== Home page recent feature showcase ===== */
.recent-features {
    width: min(1180px, calc(100% - 48px));
    margin: 6px auto 76px;
}

.recent-features-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.recent-features-heading > div:first-child { max-width: 790px; }

.recent-features-heading h2 {
    margin: 7px 0 10px;
    font-size: clamp(1.9rem, 3.3vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.03em;
}

.recent-features-heading p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 1.02rem; }

.feature-carousel-controls { display:flex; gap:9px; flex:0 0 auto; }

.feature-carousel-arrow {
    width: 45px; height: 45px; border:1px solid var(--border); border-radius: 50%;
    background:#fff; color:#172033; font-size:1.2rem; font-weight:800; cursor:pointer;
    display:grid; place-items:center; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.feature-carousel-arrow:hover { transform:translateY(-2px); border-color:#9fb6aa; box-shadow:0 8px 22px rgba(34,58,46,.10); }

.feature-carousel { overflow:hidden; border-radius:28px; box-shadow:0 28px 70px rgba(42,62,51,.11); outline:none; }

.feature-carousel:focus-visible { box-shadow:0 0 0 3px rgba(49,91,125,.2),0 28px 70px rgba(42,62,51,.11); }

.feature-carousel-track { display:flex; transition:transform .65s cubic-bezier(.22,.7,.25,1); will-change:transform; }

.feature-slide {
    min-width:100%; min-height:470px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
    align-items:center; gap:42px; padding:clamp(34px,5vw,62px); position:relative; overflow:hidden;
    border:1px solid rgba(107,127,115,.18); border-radius:28px;
}

.feature-slide::before { content:""; position:absolute; width:440px; height:440px; border-radius:50%; right:-120px; top:-180px; background:rgba(255,255,255,.34); }

.feature-slide-copy { position:relative; z-index:2; }

.feature-slide-copy h3 { margin:13px 0 14px; font-size:clamp(2rem,3.7vw,3.25rem); line-height:1.02; letter-spacing:-.04em; max-width:680px; }

.feature-slide-copy > p { color:#47566a; line-height:1.72; font-size:1.02rem; max-width:650px; margin:0; }

.feature-badge { display:inline-flex; align-items:center; min-height:30px; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.72); border:1px solid rgba(42,68,54,.12); font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }

.feature-highlights { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 25px; }

.feature-highlights span { background:rgba(255,255,255,.62); border:1px solid rgba(42,68,54,.12); border-radius:999px; padding:7px 10px; font-size:.78rem; font-weight:750; color:#34455a; }

.feature-link { display:inline-flex; align-items:center; gap:8px; color:#183a5a; font-weight:850; text-decoration:none; }

.feature-link:hover { text-decoration:underline; text-underline-offset:4px; }

.feature-visual { position:relative; z-index:2; min-height:330px; display:grid; place-items:center; }

.feature-slide-book { background:linear-gradient(135deg,#f8f3e8 0%,#edf4ee 100%); }

.feature-slide-drag { background:linear-gradient(135deg,#eef5fb 0%,#f5f0fb 100%); }

.feature-slide-sticky { background:linear-gradient(135deg,#fff6d9 0%,#edf6f2 100%); }

.feature-slide-import { background:linear-gradient(135deg,#edf4fb 0%,#f6f8fa 100%); }

.feature-slide-timeline { background:linear-gradient(135deg,#f3edf9 0%,#eff6f5 100%); }

.feature-slide-photos { background:linear-gradient(135deg,#f7eee9 0%,#eef4f9 100%); }

.feature-slide-support { background:linear-gradient(135deg,#edf7f0 0%,#eef3f9 100%); }


.book-mockup { width:min(440px,100%); height:285px; display:grid; grid-template-columns:1fr 1fr; transform:rotate(-2deg); filter:drop-shadow(0 24px 28px rgba(55,54,44,.18)); }

.book-mockup .book-page { background:#fffdf8; border:1px solid #d8d1c2; padding:25px 21px; position:relative; overflow:hidden; }

/* v174 — Family Book theme isolation.
   The landing-page book mockup previously used the global .book-page selector,
   which overrode the generated Family Book paper color and made Modern look warm. */
.family-book-preview-body.family-book-theme-classic .family-book-document .book-page {
    background: #ffffff;
    border-color: #d8e1ea;
}
.family-book-preview-body.family-book-theme-modern .family-book-document .book-page {
    background: #ffffff;
    border-color: #d7dee8;
}
.family-book-preview-body.family-book-theme-heritage .family-book-document .book-page {
    background: #fffdf7;
    border-color: #dfd2bc;
}


.book-page-left { border-radius:10px 0 0 10px; box-shadow:inset -12px 0 20px rgba(73,62,42,.04); }

.book-page-right { border-radius:0 10px 10px 0; box-shadow:inset 12px 0 20px rgba(73,62,42,.04); }

.book-kicker { display:block; font-size:.55rem; letter-spacing:.14em; color:#7b6546; margin-bottom:10px; }

.book-page-left > strong { font-family:Georgia,serif; font-size:1.4rem; color:#26362d; }

.book-tree-mini { margin-top:31px; display:grid; grid-template-columns:repeat(3,1fr); gap:13px; align-items:end; position:relative; }

.book-tree-mini::before { content:""; position:absolute; left:16%; right:16%; top:40px; border-top:2px solid #b5c0b8; }

.book-tree-mini i { width:39px; height:47px; border-radius:4px; background:#f2de9c; border:1px solid #d4bd6b; box-shadow:2px 3px 0 rgba(63,67,57,.08); position:relative; z-index:2; }

.book-tree-mini i:nth-child(2){height:58px;background:#dfeadb}
.book-tree-mini i:nth-child(4){background:#d9e6f2}
.book-tree-mini i:nth-child(5){background:#eddcdc}

.book-chapter { color:#a28a65; font-size:2.2rem; font-family:Georgia,serif; }

.book-profile-row { display:flex; gap:11px; align-items:center; margin:19px 0; }

.book-profile-row b { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e7eee9;color:#375c48; }

.book-profile-row span { display:flex;flex-direction:column;gap:3px}
.book-profile-row small{color:#89928d;font-size:.6rem}

.book-lines { display:grid; gap:9px; }
.book-lines i{height:4px;background:#e5e6e1;border-radius:4px}
.book-lines i:nth-child(2){width:88%}
.book-lines i:nth-child(3){width:94%}
.book-lines i:nth-child(4){width:70%}


.drag-demo { width:min(450px,100%); display:flex; align-items:center; justify-content:center; gap:18px; }

.sticky-card { width:145px; min-height:154px; padding:18px; border-radius:4px; box-shadow:0 15px 25px rgba(38,47,65,.16); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; transform:rotate(-3deg); }

.sticky-card > span { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.58);font-weight:850;margin-bottom:13px; }

.sticky-card b{font-size:.95rem}
.sticky-card small{margin-top:8px;color:#526273}
.sticky-one{background:#dfe9ff}
.sticky-two{background:#fff0b8;transform:rotate(2deg)}

.drag-route { display:grid; place-items:center; color:#66758b; gap:7px; font-size:.69rem; font-weight:800; white-space:nowrap; }
.drag-route i{font-size:2.1rem;font-style:normal;color:#476d97}

.sticky-drop { border:2px dashed #7894b2; border-radius:16px; padding:15px; display:grid; place-items:center; background:rgba(255,255,255,.35); }
.sticky-drop em{font-size:.65rem;color:#61758d;margin-top:8px;font-style:normal;font-weight:800}


.sticky-tree-preview { width:min(460px,100%); display:grid; justify-items:center; }

.sticky-generation { display:flex; gap:16px; position:relative; z-index:2; }
.mini-note{width:104px;height:82px;padding:13px;border-radius:3px;display:grid;place-items:center;text-align:center;font-size:.72rem;font-weight:850;box-shadow:0 10px 17px rgba(63,67,57,.12)}

.mini-note.yellow{background:#ffe99b}
.mini-note.rose{background:#f7d9d9}
.mini-note.blue{background:#dceaff}
.mini-note.mint{background:#d9eee3}
.mini-note.lilac{background:#e8dffa}

.sticky-generation.top .mini-note:first-child{transform:rotate(-2deg)}
.sticky-generation.top .mini-note:last-child{transform:rotate(2deg)}
.sticky-generation.bottom .mini-note:nth-child(2){transform:rotate(2deg)}

.tree-connector{height:35px;width:130px;border-left:2px solid #9aa9a0;border-right:2px solid #9aa9a0;border-top:2px solid #9aa9a0;margin-top:14px}
.tree-connector.short{width:230px;height:34px;margin-bottom:0}


.import-preview-card { width:min(470px,100%); background:white;border:1px solid #d7e0e8;border-radius:15px;padding:17px;box-shadow:0 20px 38px rgba(41,62,83,.13)}

.import-tabs{display:flex;gap:8px;margin-bottom:13px}
.import-tabs>*{padding:8px 11px;border-radius:7px;background:#f1f4f7;font-size:.72rem}
.import-tabs b{background:#315b7d;color:#fff}
.import-code{font: .68rem/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;background:#f6f8fa;border-radius:9px;padding:15px;color:#405066;overflow:hidden;white-space:nowrap}
.import-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}
.import-stats span{background:#f7f9fb;border-radius:8px;padding:8px;text-align:center;font-size:.58rem;color:#6b7785}
.import-stats strong{display:block;color:#172033;font-size:1rem}
.import-stats .ok strong{color:#2f7e50}


.timeline-preview { width:350px; height:310px; position:relative; }
.timeline-spine{position:absolute;left:50%;top:16px;bottom:16px;width:5px;border-radius:8px;background:linear-gradient(#5ab6a2,#466fa6,#c27693)}
.timeline-event{position:absolute;width:50%;display:flex;align-items:center;gap:10px}
.timeline-event i{width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid #4d7da8;box-shadow:0 0 0 2px #fff}
.timeline-event span{display:flex;flex-direction:column}
.timeline-event b{font-family:Georgia,serif;font-size:1.45rem}
.timeline-event small{color:#677486;margin-top:3px}
.timeline-event.e1{top:20px;left:50%;padding-left:17px}
.timeline-event.e2{top:92px;right:50%;flex-direction:row-reverse;padding-right:17px;text-align:right}
.timeline-event.e3{top:168px;left:50%;padding-left:17px}
.timeline-event.e4{top:242px;right:50%;flex-direction:row-reverse;padding-right:17px;text-align:right}


.photo-stack { width:350px;height:300px;position:relative; }
.photo-card{position:absolute;width:205px;height:235px;border:10px solid white;border-bottom-width:36px;box-shadow:0 18px 31px rgba(47,47,54,.17);display:flex;align-items:flex-end;justify-content:center;font-family:Georgia,serif;font-weight:700;color:#526069;background:linear-gradient(145deg,#c9d9d0,#f1ddd0)}
.photo-card::before{content:"";position:absolute;inset:28px 34px 60px;border-radius:50% 50% 42% 42%;background:rgba(255,255,255,.45)}
.photo-card span{position:absolute;bottom:-27px}
.photo-card.p1{left:3px;top:37px;transform:rotate(-11deg)}
.photo-card.p2{left:73px;top:10px;transform:rotate(3deg);background:linear-gradient(145deg,#d9d0e6,#d9e8ed)}
.photo-card.p3{right:3px;top:47px;transform:rotate(12deg);background:linear-gradient(145deg,#ead9bd,#d9e5cf)}


.support-preview { width:min(340px,100%);background:white;border:1px solid #d5e0d8;border-radius:18px;padding:29px;text-align:center;box-shadow:0 22px 40px rgba(51,70,58,.13)}
.support-ticket-icon{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:#e6f4ea;color:#2c7a49;font-size:1.5rem;font-weight:900;margin:0 auto 13px}
.support-preview>strong{display:block;font-size:1.18rem}
.support-preview>small{display:block;color:#829087;margin:18px 0 5px;text-transform:uppercase;letter-spacing:.09em;font-size:.62rem}
.support-preview code{display:inline-block;background:#f3f6f4;border-radius:7px;padding:8px 12px;color:#2c4051;font-weight:800}
.support-status{margin-top:18px;padding-top:16px;border-top:1px solid #e4eae6;font-size:.75rem;color:#66756c}
.support-status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#dca73d;margin-right:6px}


.feature-carousel-footer { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:17px; }

.feature-carousel-dots { display:flex;gap:7px;flex-wrap:wrap; }

.feature-carousel-dot { width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#cbd4cf;cursor:pointer;transition:width .25s ease,background .25s ease; }

.feature-carousel-dot.is-active { width:28px;background:#315b7d; }

.feature-carousel-counter { color:#8b9790;font-size:.77rem;letter-spacing:.09em; }
.feature-carousel-counter b{color:#315b7d;font-size:.92rem}


@media (max-width: 900px) {
    .feature-slide { grid-template-columns:1fr; min-height:auto; gap:28px; }

    .feature-visual { min-height:280px; }

}

@media (max-width: 650px) {
    .recent-features { width:min(100% - 28px,1180px); margin-bottom:48px; }

    .recent-features-heading { align-items:flex-start; }

    .feature-carousel-controls { display:none; }

    .feature-slide { padding:30px 22px; border-radius:20px; }

    .feature-carousel { border-radius:20px; }

    .feature-slide-copy h3 { font-size:2rem; }

    .feature-visual { min-height:235px; }

    .book-mockup { height:235px; }
.book-mockup .book-page{padding:18px 14px}
.book-tree-mini{margin-top:18px}

    .drag-demo { transform:scale(.82); width:120%; margin-left:-10%; }

    .sticky-tree-preview { transform:scale(.82); }

    .timeline-preview { transform:scale(.82); }

    .photo-stack { transform:scale(.82); }

    .feature-highlights { margin-block:17px 20px; }

}

@media (prefers-reduced-motion: reduce) {
    .feature-carousel-track, .feature-carousel-arrow, .feature-carousel-dot { transition:none !important; }

}



/* === Premium platform ==================================================== */
.premium-admin-card{background:linear-gradient(135deg,#111827,#312e81)!important;color:#fff!important;border-color:transparent!important}
.premium-admin-card span{color:#c7d2fe!important}

.admin-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}

.admin-stat-link{text-decoration:none;color:inherit;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.admin-stat-link:hover,.admin-stat-link:focus-visible{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 24px rgba(15,23,42,.10);outline:none}
.admin-stat-link:active{transform:translateY(0)}

.premium-control-page,.premium-hub-page,.premium-tool-page{max-width:1180px}
.premium-admin-heading{align-items:flex-end}
.premium-control-badge,.plan-chip,.premium-category,.status-pill{display:inline-flex;align-items:center;border-radius:999px;font-weight:800}
.premium-control-badge{padding:9px 14px;background:#eef2ff;color:#4338ca}
.premium-admin-panel{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:24px;margin:18px 0;box-shadow:0 10px 34px rgba(15,23,42,.05)}
.premium-admin-panel h2{margin:0 0 6px}
.premium-feature-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.premium-toggle-card{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;border:1px solid #e5e7eb;border-radius:16px;padding:16px;background:#fbfdff}
.premium-toggle-icon,.premium-user-icon{width:46px;height:46px;border-radius:14px;background:#eef2ff;display:grid;place-items:center;font-size:22px;color:#312e81}
.premium-toggle-copy h3,.premium-user-card h2{margin:3px 0 6px}
.premium-toggle-copy p,.premium-user-card p{margin:0;color:#64748b;line-height:1.5}
.premium-category{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6366f1}
.premium-switch{border:0;background:#e5e7eb;border-radius:999px;padding:4px 8px 4px 4px;display:flex;gap:7px;align-items:center;cursor:pointer;color:#64748b}
.premium-switch span{width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #94a3b8}
.premium-switch b{font-size:11px}
.premium-switch.is-on{background:#dcfce7;color:#166534}
.inline-setting{display:flex;align-items:center;gap:12px}
.status-pill{padding:6px 10px;background:#f1f5f9;color:#64748b;font-size:12px}
.status-pill.ok{background:#dcfce7;color:#166534}
.theme-admin-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.theme-admin-column{border:1px solid #e5e7eb;border-radius:16px;padding:16px}
.theme-admin-list{display:grid;gap:10px}
.theme-admin-row{display:grid;grid-template-columns:1fr auto;gap:8px;border-top:1px solid #f1f5f9;padding-top:10px}
.theme-admin-row>div{grid-row:span 2}
.theme-admin-row small{display:block;color:#64748b;margin-top:2px}
.mini-toggle{border:0;border-radius:999px;padding:5px 9px;background:#fee2e2;color:#991b1b;font-weight:800;font-size:11px}
.mini-toggle.is-on{background:#dcfce7;color:#166534}
.button.small{padding:6px 9px;font-size:12px}

.premium-hub-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0f172a,#312e81 62%,#7c3aed);color:white;border-radius:26px;padding:42px;display:grid;grid-template-columns:1.45fr .8fr;gap:30px;margin-bottom:22px}
.premium-hub-hero h1{font-size:clamp(32px,5vw,56px);line-height:1.02;margin:8px 0 14px}
.premium-hub-hero p{color:#ddd6fe;max-width:720px;font-size:17px}
.plan-chip{padding:7px 11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);text-transform:uppercase;font-size:11px}
.premium-orbit{min-height:230px;position:relative;display:grid;place-items:center}
.premium-orbit b{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#312e81;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.premium-orbit span{position:absolute;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);padding:8px 12px;border-radius:999px;font-size:12px}
.premium-orbit span:nth-child(2){top:12px;left:20px}
.premium-orbit span:nth-child(3){top:35px;right:3px}
.premium-orbit span:nth-child(4){bottom:18px;left:8px}
.premium-orbit span:nth-child(5){bottom:8px;right:30px}
.premium-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.premium-user-card{border:1px solid #e2e8f0;border-radius:20px;padding:20px;background:#fff;display:grid;grid-template-columns:54px 1fr;gap:16px;box-shadow:0 10px 30px rgba(15,23,42,.04)}
.premium-card-actions{grid-column:2;display:flex;align-items:center;gap:10px}
.premium-user-card.locked{background:#f8fafc}
.premium-user-card.globally-disabled{opacity:.6}
.premium-locked-label{font-size:12px;font-weight:800;color:#64748b}
.premium-nav-button,.premium-button{background:linear-gradient(135deg,#dc2626,#ef4444)!important;border-color:#b91c1c!important;color:white!important}
.global-nav-actions .premium-nav-button{margin-right:40px;box-shadow:0 8px 20px rgba(220,38,38,.22)}
@media (max-width:1180px){.global-nav-actions .premium-nav-button{margin-right:18px}
}

.premium-back-button{display:inline-flex;margin:8px 0 10px}.premium-tool-page>.eyebrow{margin-top:10px}
.premium-tool-page h1{font-size:38px;margin:6px 0}
.premium-tool-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:20px;margin:18px 0}
.health-score-card{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;background:linear-gradient(135deg,#eef2ff,#f8fafc);border:1px solid #c7d2fe;border-radius:22px;padding:26px}
.health-ring{width:126px;height:126px;border-radius:50%;border:12px solid #6366f1;display:grid;place-items:center;align-content:center;background:#fff}
.health-ring strong{font-size:30px;color:#312e81}
.health-ring span{font-size:11px;color:#64748b}
.health-stat-row{display:flex;gap:12px;flex-wrap:wrap}
.health-stat-row span{padding:9px 12px;border-radius:12px;background:white;border:1px solid #e2e8f0}
.health-issue{display:flex;gap:12px;align-items:flex-start;border-top:1px solid #f1f5f9;padding:12px 0}
.health-issue span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff7ed;color:#c2410c;font-weight:900}
.health-issue p{margin:2px 0}
.story-select{display:flex;gap:12px;align-items:flex-end}
.story-select label{flex:1}
.story-draft textarea{width:100%;font:inherit;line-height:1.7}
.journey-board{position:relative;padding:20px 0 30px 38px}
.journey-line{position:absolute;left:50px;top:24px;bottom:30px;width:3px;background:linear-gradient(#6366f1,#c4b5fd)}
.journey-stop{display:grid;grid-template-columns:26px 95px 1fr;gap:12px;align-items:center;margin:0 0 16px}
.journey-dot{width:15px;height:15px;background:#6366f1;border:4px solid #eef2ff;border-radius:50%;position:relative;z-index:1}
.journey-date{font-weight:800;color:#475569}
.journey-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:13px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.journey-card span{color:#64748b}
.journey-card b{margin-left:auto;color:#4f46e5}
.relationship-finder-form{display:grid;grid-template-columns:1fr auto 1fr auto;gap:12px;align-items:end}
.relationship-path-step{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;border-top:1px solid #f1f5f9;padding:11px 0}
.relationship-path-step span{width:30px;height:30px;border-radius:50%;background:#eef2ff;color:#4338ca;display:grid;place-items:center;font-weight:800}
.relationship-path-step p{margin:0}
.archive-form .form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.archive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.archive-item{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:18px}
.archive-item.sealed{background:linear-gradient(135deg,#faf5ff,#f8fafc);border-color:#ddd6fe}
.archive-type{font-size:11px;font-weight:900;letter-spacing:.08em;color:#6d28d9}
.archive-meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.archive-meta span{font-size:11px;background:#f1f5f9;border-radius:999px;padding:5px 8px}
.sealed-message{color:#6d28d9}
.chronology-list article{display:grid;grid-template-columns:120px 1fr;gap:18px;border-left:3px solid #c4b5fd;padding:0 0 22px 18px}
.chronology-list time{font-weight:900;color:#4338ca}
.chronology-list span,.chronology-list small{display:block}
.chronology-list span{margin-top:3px}
.chronology-list small{color:#64748b;margin-top:5px}

.premium-landing-showcase{position:relative;overflow:hidden;max-width:1180px;margin:58px auto;padding:50px;border-radius:30px;background:linear-gradient(135deg,#0f172a,#1e1b4b 55%,#5b21b6);color:#fff;display:grid;grid-template-columns:1.2fr .8fr;gap:38px;box-shadow:0 30px 80px rgba(49,46,129,.25)}
.premium-landing-glow{position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.35),transparent 65%);right:-100px;top:-160px}
.premium-landing-copy,.premium-landing-visual{position:relative;z-index:1}
.premium-kicker{display:inline-flex;padding:7px 11px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);border-radius:999px;font-weight:900;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#ddd6fe}
.premium-landing-copy h2{font-size:clamp(34px,4vw,52px);line-height:1.04;margin:14px 0}
.premium-landing-copy p{font-size:17px;line-height:1.65;color:#cbd5e1}
.premium-landing-pills{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.premium-landing-pills span{border-radius:999px;background:rgba(255,255,255,.1);padding:7px 10px;font-size:12px}
.premium-landing-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.premium-landing-actions>span{font-size:12px;color:#a5b4fc}
.premium-landing-visual{min-height:330px}
.premium-book-mock{position:absolute;left:55px;top:15px;width:230px;height:290px;border-radius:8px 18px 18px 8px;background:linear-gradient(145deg,#f5efe4,#d8c5a2);color:#4b382a;box-shadow:-14px 20px 45px rgba(0,0,0,.38);padding:36px 24px;display:flex;flex-direction:column;justify-content:center;text-align:center;transform:rotate(-5deg);border-left:8px solid #a67c52}
.premium-book-mock span{font-size:10px;letter-spacing:.14em}
.premium-book-mock strong{font-family:Georgia,serif;font-size:28px;line-height:1.05;margin:14px 0}
.premium-book-mock small{font-size:11px}
.premium-float-card{position:absolute;background:white;color:#0f172a;border-radius:15px;padding:12px 16px;box-shadow:0 14px 35px rgba(0,0,0,.25);display:grid}
.premium-float-card b{font-size:20px}
.premium-float-card span{font-size:10px;color:#64748b}
.premium-float-card.health{right:5px;top:28px}
.premium-float-card.memory{right:18px;top:130px}
.premium-float-card.map{right:52px;bottom:20px}

body.admin-theme-graphite{--admin-accent:#334155;background:#f1f5f9}
body.admin-theme-graphite .admin-panel,body.admin-theme-graphite .admin-quick-card{border-color:#cbd5e1}
body.admin-theme-forest{--admin-accent:#166534;background:#f0fdf4}
body.admin-theme-forest .button:not(.secondary):not(.danger-outline){background:#166534}
body.admin-theme-royal{--admin-accent:#4338ca;background:#f5f3ff}
body.admin-theme-royal .button:not(.secondary):not(.danger-outline){background:#4338ca}

@media(max-width:900px){.premium-feature-admin-grid,.premium-hub-grid,.archive-grid,.theme-admin-columns,.premium-landing-showcase{grid-template-columns:1fr}
.premium-hub-hero{grid-template-columns:1fr}
.premium-orbit{display:none}
.premium-landing-visual{min-height:300px}
.relationship-finder-form{grid-template-columns:1fr}
.archive-form .form-grid.three{grid-template-columns:1fr}
.premium-feature-admin-grid{grid-template-columns:1fr}
}
@media(max-width:600px){.premium-landing-showcase{padding:28px 20px;margin:34px 14px}
.premium-hub-hero{padding:28px 20px}
.premium-user-card{grid-template-columns:42px 1fr}
.premium-card-actions{grid-column:1/-1}
.journey-stop{grid-template-columns:24px 1fr}
.journey-date{grid-column:2}
.journey-card{grid-column:2}
.health-score-card{grid-template-columns:1fr}
.premium-book-mock{left:12px}
}

.family-premium-timeline{position:relative;margin-top:26px}
.family-premium-timeline::before{content:"";position:absolute;left:132px;top:0;bottom:0;width:3px;background:linear-gradient(#4f46e5,#c4b5fd)}
.family-premium-timeline article{display:grid;grid-template-columns:112px 38px 1fr;gap:0;align-items:start;margin-bottom:18px}
.family-premium-timeline time{text-align:right;padding:14px 14px 0 0;font-weight:900;color:#4338ca}
.family-timeline-marker{width:15px;height:15px;border-radius:50%;background:#4f46e5;border:4px solid #eef2ff;margin:14px auto;z-index:1}
.family-timeline-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px}
.family-timeline-card h2{font-size:18px;margin:4px 0}
.family-timeline-card strong,.family-timeline-card small{display:block}
.family-timeline-card small{color:#64748b;margin-top:8px}
@media(max-width:650px){.family-premium-timeline::before{left:8px}
.family-premium-timeline article{grid-template-columns:24px 1fr}
.family-premium-timeline time{grid-column:2;text-align:left;padding:0 0 5px}
.family-timeline-marker{grid-column:1;grid-row:1/3}
.family-timeline-card{grid-column:2}
}

/* Premium large-format family tree printing */
@page tree-letter { size: Letter landscape; margin: .4in; }

@page tree-a4 { size: A4 landscape; margin: 10mm; }

@page tree-ledger { size: 17in 11in; margin: .45in; }

@page tree-poster18 { size: 24in 18in; margin: .55in; }

@page tree-poster24 { size: 36in 24in; margin: .65in; }

@media print {
  body.printing-tree[data-tree-print-size="letter"] .tree-page { page: tree-letter; }

  body.printing-tree[data-tree-print-size="a4"] .tree-page { page: tree-a4; }

  body.printing-tree[data-tree-print-size="ledger"] .tree-page { page: tree-ledger; }

  body.printing-tree[data-tree-print-size="poster18"] .tree-page { page: tree-poster18; }

  body.printing-tree[data-tree-print-size="poster24"] .tree-page { page: tree-poster24; }

}


.premium-upgrade-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff7ed;border:1px solid #fed7aa;border-radius:16px;padding:16px 18px;margin-bottom:16px}
.premium-upgrade-banner strong,.premium-upgrade-banner span{display:block}
.premium-upgrade-banner span{font-size:13px;color:#9a3412;margin-top:3px}


.archive-photo-preview,.archive-video{width:100%;max-height:320px;object-fit:cover;border-radius:12px;margin:8px 0 12px;background:#0f172a}
.archive-audio{width:100%;margin:8px 0 12px}


/* Shared Family Tree internal toolbar */
.tree-internal-tools {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.tree-internal-tools .button.internal-nav-active,
.tree-internal-tools .button[aria-current="page"] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.family-book-heading .tree-internal-tools {
    justify-content: flex-end;
    align-items: flex-end;
}

.family-book-preview-toolbar-stacked {
    display: grid;
    gap: 10px;
}

.family-book-preview-toolbar-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
}

.family-book-preview-toolbar-stacked .family-book-preview-actions {
    justify-content: flex-end;
}

@media (max-width: 980px) {
    .tree-internal-tools {
        overflow-x: auto;
        max-width: 100%;
        justify-content: flex-start;
        padding-bottom: 3px;
    }

    .family-book-preview-toolbar-main {
        align-items: stretch;
        flex-direction: column;
    }

}


/* === My Family Trees: single-tree alignment + Premium core benefit ===== */
.my-tree-grid.single-tree-grid{grid-template-columns:minmax(0,760px);justify-content:center}
.my-tree-grid.single-tree-grid .my-tree-card{width:100%}
.my-tree-grid.single-tree-grid .my-tree-card-cover{height:116px}
.my-tree-grid.single-tree-grid .my-tree-card-body{padding:22px 24px}
.my-tree-grid.single-tree-grid .my-tree-card-body>p{min-height:auto}
.premium-core-benefit{border-color:#c7d2fe;background:linear-gradient(135deg,#f8faff,#fff)}
.premium-core-benefit.locked{background:linear-gradient(135deg,#f8fafc,#fff)}
@media(max-width:800px){.my-tree-grid.single-tree-grid{grid-template-columns:1fr}}

/* Premium downgrade: preserve all trees, allow one Free entitlement. */
.downgrade-choice-card{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(420px,1.2fr);gap:28px;margin:0 0 24px;padding:24px;border:1px solid #e7c46c;border-radius:18px;background:linear-gradient(135deg,#fffaf0,#fff);box-shadow:var(--shadow)}
.downgrade-choice-card h2{margin:5px 0 8px}.downgrade-choice-card p{margin:0;color:var(--muted);line-height:1.55}.free-tree-choice-form{display:grid;gap:10px}.free-tree-choice-option{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;cursor:pointer}.free-tree-choice-option:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px rgba(49,91,125,.10)}.free-tree-choice-option>span:nth-of-type(1){display:flex;min-width:0;flex:1;flex-direction:column;gap:3px}.free-tree-choice-option small{overflow:hidden;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}.recommended-pill{padding:4px 8px;border-radius:999px;background:#eef4fa;color:#315b7d;font-size:.7rem;font-weight:850;white-space:nowrap}.my-tree-card.premium-locked-tree{background:#fbfcfe}.my-tree-card.premium-locked-tree .my-tree-card-cover{filter:saturate(.65)}.my-tree-card.premium-locked-tree .tree-status-pill{color:#7c3aed}.locked-tree-message{display:flex;align-items:flex-start;gap:8px;flex-direction:column;padding:13px;border:1px dashed #cfd8e3;border-radius:11px;background:#f8fafc;color:var(--muted);font-size:.82rem}.locked-tree-message strong{color:var(--text)}
@media(max-width:800px){.downgrade-choice-card{grid-template-columns:1fr}.free-tree-choice-option{align-items:flex-start}.recommended-pill{display:none}}

/* Premium plan comparison */
.public-plan-nav{max-width:1220px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}.plan-comparison-page{max-width:1180px}.plan-comparison-hero{text-align:center;padding:48px 20px 26px}.plan-comparison-hero h1{font-size:clamp(34px,5vw,54px);margin:8px 0 12px}.plan-comparison-hero p{max-width:780px;margin:0 auto;color:var(--muted);font-size:17px;line-height:1.6}.plan-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 26px}.plan-summary-grid article{border:1px solid var(--border);border-radius:18px;background:#fff;padding:24px;box-shadow:0 10px 28px rgba(15,23,42,.06)}.plan-summary-grid article.featured{border-color:#93c5fd}.plan-summary-grid article.family{border-color:#c4b5fd;background:linear-gradient(145deg,#fff,#faf5ff)}.plan-summary-grid span{font-size:11px;font-weight:900;letter-spacing:.12em;color:#64748b}.plan-summary-grid h2{margin:8px 0}.plan-summary-grid strong{display:block;margin-bottom:8px}.plan-summary-grid p{color:var(--muted);line-height:1.5}.plan-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.06)}.plan-table{width:100%;border-collapse:collapse;min-width:760px}.plan-table th,.plan-table td{padding:15px 18px;border-bottom:1px solid var(--border);text-align:center}.plan-table th:first-child,.plan-table td:first-child{text-align:left;width:52%}.plan-table thead th{background:#f8fafc;font-size:13px}.plan-table td:not(:first-child){font-weight:800}.plan-table td small{display:block;color:var(--muted);font-weight:400;line-height:1.4;margin-top:4px}.plan-table tr.family-exclusive{background:#fcfaff}.plan-policy-note{margin:24px 0 54px;padding:22px;border:1px solid #ddd6fe;background:#faf5ff;border-radius:16px}.plan-policy-note h2{margin:0 0 8px;font-size:18px}.plan-policy-note p{margin:0;color:var(--muted);line-height:1.6}@media(max-width:800px){.plan-summary-grid{grid-template-columns:1fr}.public-plan-nav{padding:14px}.plan-comparison-hero{padding-top:28px}}
.premium-plan-link-card{margin:24px 0 48px;padding:22px 24px;border:1px solid #c7d2fe;border-radius:16px;background:linear-gradient(135deg,#f8faff,#fff);display:flex;align-items:center;justify-content:space-between;gap:20px}.premium-plan-link-card h2{margin:5px 0 7px}.premium-plan-link-card p{margin:0;color:var(--muted)}@media(max-width:700px){.premium-plan-link-card{align-items:flex-start;flex-direction:column}}

/* === Family Premium collaboration workspace ============================ */
.family-premium-page{max-width:1180px}
.family-premium-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:8px 0 24px}
.family-premium-heading h1{margin:5px 0 8px}.family-premium-heading p{margin:0;color:var(--muted);line-height:1.55}
.family-premium-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 40px}
.family-premium-action{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--border);border-radius:18px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 10px 28px rgba(15,23,42,.05);transition:.16s ease}
.family-premium-action:hover{transform:translateY(-2px);border-color:#a5b4fc;box-shadow:0 14px 34px rgba(15,23,42,.08)}
.family-premium-action>span{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:12px;background:#eef2ff;font-size:20px}
.family-premium-action h2{margin:0 0 6px;font-size:19px}.family-premium-action p{margin:0;color:var(--muted);line-height:1.5}
.family-premium-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 20px}
.family-premium-stats article{padding:18px;border:1px solid var(--border);border-radius:16px;background:#fff}.family-premium-stats strong,.family-premium-stats span{display:block}.family-premium-stats strong{font-size:22px}.family-premium-stats span{margin-top:4px;color:var(--muted);font-size:13px}
.family-panel{margin:0 0 18px;padding:22px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.04)}.family-panel h2{margin:0 0 16px;font-size:20px}.family-panel>p{color:var(--muted);line-height:1.6}
.family-role-guide{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 18px}.family-role-guide article{padding:16px;border:1px solid var(--border);border-radius:14px;background:#f8fafc}.family-role-guide h3{margin:0 0 6px}.family-role-guide p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.family-inline-form{display:grid;grid-template-columns:minmax(220px,1fr) 220px auto;gap:12px;align-items:end}.family-inline-form label,.contribution-form label{display:grid;gap:6px;font-weight:750}.family-inline-form input,.family-inline-form select,.contribution-form input,.contribution-form select,.contribution-form textarea,.review-form input{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#fff}
.family-member-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)}.family-member-row:first-of-type{border-top:0}.family-member-row>div{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.family-member-row span{color:var(--muted);font-size:13px}.family-member-row form{display:flex;gap:8px;align-items:center}.family-member-row select{border:1px solid var(--border);border-radius:9px;padding:8px 10px;background:#fff}.family-empty{padding:18px;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;color:var(--muted)}
.family-quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}.role-permission-table{display:grid;gap:0}.role-permission-table>div{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--border)}.role-permission-table>div:first-child{border-top:0}.role-permission-table span{color:var(--muted)}
.contribution-form{display:grid;gap:12px;max-width:760px}.contribution-card{padding:18px 0;border-top:1px solid var(--border)}.contribution-card:first-of-type{border-top:0}.contribution-card header{display:flex;justify-content:space-between;gap:14px}.contribution-card h3{margin:4px 0 8px}.contribution-card p{line-height:1.55}.contribution-card small{color:var(--muted)}.status-chip{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;background:#eef2ff;color:#4338ca!important;font-size:11px!important;font-weight:900}.status-chip.pending{background:#fff7ed;color:#c2410c!important}.review-form{display:flex;gap:8px;align-items:center;margin-top:12px}.review-form input{flex:1}
.activity-row{display:grid;grid-template-columns:16px 1fr;gap:12px;padding:13px 0;border-top:1px solid var(--border)}.activity-row:first-of-type{border-top:0}.activity-dot{width:10px;height:10px;border-radius:50%;background:#6366f1;margin-top:5px}.activity-row>div:last-child{display:flex;flex-direction:column;gap:4px}.activity-row span{color:var(--muted);font-size:13px}
.family-invitations-panel,.shared-tree-section{margin:0 0 24px;padding:22px;border:1px solid #c7d2fe;border-radius:18px;background:linear-gradient(135deg,#fafaff,#fff)}.family-invitations-panel h2,.shared-tree-section h2{margin:4px 0 7px}.family-invitations-panel p,.shared-tree-section p{margin:0;color:var(--muted)}.family-invitation-row{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:12px;background:#fff}.family-invitation-row>div{display:flex;flex:1;flex-direction:column;gap:3px}.family-invitation-row span{color:var(--muted);font-size:13px}.shared-tree-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}.shared-tree-card{padding:18px;border:1px solid var(--border);border-radius:14px;background:#fff}.shared-tree-card h3{margin:10px 0 4px}.shared-tree-card p{min-height:42px}.shared-tree-card .my-tree-actions{margin-top:14px}

/* Home-page plan split */
.landing-plan-split{max-width:1180px;margin:70px auto 24px;padding:0 24px}.landing-plan-heading{text-align:center;max-width:820px;margin:0 auto 24px}.landing-plan-heading h2{font-size:clamp(28px,4vw,42px);margin:7px 0 10px}.landing-plan-heading p{color:var(--muted);line-height:1.6}.landing-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.landing-plan-grid article{padding:24px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.05)}.landing-plan-grid article.premium-plan-card{border-color:#93c5fd}.landing-plan-grid article.family-plan-card{border-color:#c4b5fd;background:linear-gradient(145deg,#fff,#faf5ff)}.landing-plan-grid .plan-label{font-size:11px;font-weight:900;letter-spacing:.12em;color:#64748b}.landing-plan-grid h3{margin:8px 0 4px;font-size:23px}.landing-plan-grid strong{display:block;margin-bottom:13px}.landing-plan-grid ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.7}.landing-plan-action{text-align:center;margin-top:20px}
@media(max-width:850px){.family-premium-grid,.shared-tree-grid,.landing-plan-grid{grid-template-columns:1fr}.family-premium-stats{grid-template-columns:1fr}.family-role-guide{grid-template-columns:repeat(2,1fr)}.family-inline-form{grid-template-columns:1fr}.family-premium-heading{flex-direction:column}.role-permission-table>div{grid-template-columns:1fr}.review-form{align-items:stretch;flex-direction:column}}
@media(max-width:560px){.family-role-guide{grid-template-columns:1fr}.family-member-row,.family-invitation-row{align-items:stretch;flex-direction:column}.family-member-row form{width:100%;flex-wrap:wrap}.family-member-row select{flex:1}}
.family-premium-entry{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 18px;padding:20px 22px;border:1px solid #c4b5fd;border-radius:16px;background:linear-gradient(135deg,#faf5ff,#fff)}.family-premium-entry h2{margin:4px 0 6px}.family-premium-entry p{margin:0;color:var(--muted);line-height:1.5}@media(max-width:720px){.family-premium-entry{align-items:flex-start;flex-direction:column}}


/* Signed-in account indicator in the global header */
.nav-current-user { display:flex; align-items:center; gap:8px; padding:5px 9px; border:1px solid #d9e0e8; border-radius:10px; background:#fff; min-width:0; }
.nav-current-user-avatar { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#e8eef5; color:#244a70; font-weight:800; flex:0 0 auto; }
.nav-current-user-copy { display:flex; flex-direction:column; line-height:1.05; max-width:125px; }
.nav-current-user-copy strong, .nav-current-user-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-current-user-copy strong { font-size:.78rem; color:#172033; }
.nav-current-user-copy small { margin-top:3px; font-size:.66rem; color:#64748b; }
.relationship-edit-mode .sticky-person-note.relationship-draggable { touch-action:none; user-select:none; -webkit-user-select:none; }
.sticky-person-note.relationship-pointer-dragging { opacity:.55; cursor:grabbing !important; position:relative; z-index:50; }

/* My Family Trees: make default/display names readable and call attention to a new empty tree. */
.tree-display-name{text-transform:capitalize}
.empty-tree-attention{display:flex;flex-direction:column;gap:4px;margin:14px 0 2px;padding:12px 14px;border:1px solid #f1cf84;border-radius:11px;background:#fff9e8}
.empty-tree-attention strong{color:var(--text);font-size:.86rem}
.empty-tree-attention span{color:var(--muted);font-size:.8rem;line-height:1.45}

/* Public landing refresh */
.landing-body{background:linear-gradient(180deg,#fbfcfe 0,#f7f9fc 42%,#fff 100%)}
.public-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(203,213,225,.72)}
.hero{padding-top:72px;padding-bottom:58px}
.hero-copy h1{font-size:clamp(3rem,6vw,5.4rem);line-height:.96;letter-spacing:-.055em;max-width:760px}
.hero-copy>p{font-size:1.12rem;line-height:1.75;max-width:700px}
.hero-primary{box-shadow:0 12px 28px rgba(49,91,125,.22)}
.landing-trust-strip{width:min(100% - 48px,1180px);margin:-10px auto 72px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:22px;background:rgba(255,255,255,.92);box-shadow:0 18px 55px rgba(15,23,42,.06);overflow:hidden}
.landing-trust-strip>div{padding:22px 26px;display:flex;flex-direction:column;gap:5px}.landing-trust-strip>div+div{border-left:1px solid var(--border)}.landing-trust-strip strong{font-size:14px}.landing-trust-strip span{font-size:13px;color:var(--muted);line-height:1.45}
.landing-how,.landing-capabilities{width:min(100% - 48px,1180px);margin:0 auto 76px}.landing-section-heading{max-width:780px;margin-bottom:28px}.landing-section-heading h2{font-size:clamp(2.15rem,4vw,3.25rem);line-height:1.04;letter-spacing:-.035em;margin:8px 0 12px}.landing-section-heading p{color:var(--muted);font-size:1.04rem;line-height:1.7;margin:0}
.landing-step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.landing-step-grid article{padding:26px;border:1px solid var(--border);border-radius:22px;background:#fff;display:flex;gap:18px;box-shadow:0 12px 34px rgba(15,23,42,.045)}.landing-step-grid article>span{font-size:12px;font-weight:900;letter-spacing:.12em;color:#315b7d;background:#edf4fa;border-radius:999px;width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto}.landing-step-grid h3{margin:2px 0 7px;font-size:18px}.landing-step-grid p{margin:0;color:var(--muted);line-height:1.6;font-size:14px}
.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.capability-card{position:relative;overflow:hidden;min-height:210px;padding:26px;border:1px solid var(--border);border-radius:24px;background:#fff;box-shadow:0 14px 38px rgba(15,23,42,.05);transition:transform .2s ease,box-shadow .2s ease}.capability-card:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(15,23,42,.09)}.capability-wide{grid-column:span 2;background:linear-gradient(135deg,#f7fbff,#f8fafc)}.capability-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#edf4fa;color:#315b7d;font-weight:900;font-size:18px}.capability-card h3{font-size:20px;margin:18px 0 8px}.capability-card p{margin:0;color:var(--muted);line-height:1.65}.capability-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.capability-tags span{font-size:11px;font-weight:800;padding:6px 9px;border-radius:999px;background:#fff;border:1px solid #dbe4ec}.family-collab-card{background:linear-gradient(135deg,#f8f5ff,#f1f7ff)}
.landing-collab-banner{width:min(100% - 48px,1180px);margin:0 auto 76px;padding:42px;border-radius:30px;background:linear-gradient(135deg,#172033,#253b5a 58%,#315b7d);color:#fff;display:grid;grid-template-columns:1.25fr .75fr;gap:42px;align-items:center;box-shadow:0 28px 70px rgba(23,32,51,.18)}.landing-collab-banner .eyebrow{color:#bcd6ea}.landing-collab-banner h2{font-size:clamp(2.2rem,4vw,3.5rem);line-height:1.02;letter-spacing:-.04em;margin:8px 0 14px}.landing-collab-banner p{color:#d9e4ee;line-height:1.7;max-width:720px;margin-bottom:22px}.collab-role-stack{display:grid;gap:10px}.collab-role-stack div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:15px 18px;display:flex;justify-content:space-between;gap:16px}.collab-role-stack b{font-size:14px}.collab-role-stack span{font-size:12px;color:#cbd8e4;text-align:right}
.public-footer{max-width:1180px;margin:20px auto 0;padding:30px 24px 42px;border-top:1px solid var(--border);display:flex;align-items:center;gap:18px;color:var(--muted)}.public-footer strong{color:var(--text)}.public-footer nav{margin-left:auto;display:flex;gap:18px}.public-footer a{color:#315b7d;text-decoration:none;font-weight:700;font-size:13px}
@media(max-width:900px){.landing-step-grid,.capability-grid{grid-template-columns:1fr 1fr}.capability-wide{grid-column:span 2}.landing-collab-banner{grid-template-columns:1fr}.landing-trust-strip{grid-template-columns:1fr}.landing-trust-strip>div+div{border-left:0;border-top:1px solid var(--border)}}
@media(max-width:650px){.hero{padding-top:44px}.hero-copy h1{font-size:clamp(2.7rem,13vw,4rem)}.landing-how,.landing-capabilities,.landing-trust-strip,.landing-collab-banner{width:min(100% - 28px,1180px)}.landing-step-grid,.capability-grid{grid-template-columns:1fr}.capability-wide{grid-column:auto}.landing-collab-banner{padding:28px 22px;border-radius:22px}.public-footer{margin:0 14px;align-items:flex-start;flex-direction:column}.public-footer nav{margin-left:0}.collab-role-stack div{flex-direction:column}.collab-role-stack span{text-align:left}}

/* ===== Modern My Family Trees workspace ===== */
.my-trees-page{max-width:1240px;padding-top:20px}.workspace-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr) 250px;align-items:center;gap:26px;min-height:210px;margin:0 0 26px;padding:34px 34px 30px;overflow:hidden;border:1px solid #dce8f1;border-radius:24px;background:linear-gradient(120deg,#f4fbff 0%,#f8fcff 46%,#f2fbf6 100%);box-shadow:0 18px 45px rgba(30,64,95,.07)}.workspace-hero:after{content:"";position:absolute;inset:auto -8% -60px -8%;height:115px;background:radial-gradient(ellipse at center,rgba(125,211,160,.18),rgba(186,230,253,.08) 55%,transparent 72%);pointer-events:none}.workspace-hero-copy{position:relative;z-index:2}.workspace-hero-copy h1{margin:5px 0 10px;font-size:clamp(34px,4vw,52px);letter-spacing:-.035em;line-height:1.02}.workspace-hero-copy p{max-width:610px;margin:0;color:#536579;font-size:16px;line-height:1.65}.workspace-tree-art{position:relative;z-index:2;display:grid;place-items:center;text-align:center;color:#4f8a6a}.workspace-tree-art>span{display:grid;width:112px;height:112px;place-items:center;border-radius:50%;background:radial-gradient(circle,#e3f5e8 0,#effaf3 62%,transparent 63%);font-family:Georgia,serif;font-size:94px;line-height:1;transform:rotate(180deg);opacity:.78}.workspace-tree-art small{max-width:220px;margin-top:-8px;color:#567566;font-family:Georgia,serif;font-size:15px;font-style:italic;line-height:1.45}.modern-plan-card{position:relative;z-index:3;display:grid;grid-template-columns:44px 1fr;align-items:start;gap:12px;min-width:0;padding:18px;border:1px solid rgba(190,211,226,.9);border-radius:17px;background:rgba(255,255,255,.9);box-shadow:0 12px 28px rgba(30,64,95,.09);backdrop-filter:blur(8px)}.modern-plan-card>div:last-child{display:flex;flex-direction:column;gap:4px}.plan-card-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:#e8f4ff;color:#2474b8;font-size:22px;font-weight:900}.plan-upgrade-link{margin-top:7px;color:#1473d2;font-size:12px;font-weight:850;text-decoration:none}.plan-upgrade-link:hover{text-decoration:underline}.modern-limit-card{padding:16px 18px;border-color:#f1c7cb;border-radius:17px;background:linear-gradient(90deg,#fff9f9,#fffafa);box-shadow:0 8px 22px rgba(120,40,50,.035)}.limit-card-message{display:flex;align-items:center;gap:13px}.limit-info-icon{display:grid;width:34px;height:34px;place-items:center;flex:0 0 34px;border-radius:50%;background:#e8f2ff;color:#2776cc;font-family:Georgia,serif;font-size:20px;font-weight:900}.premium-soft-button{border:1px solid #ffd2d7!important;background:#fff0f2!important;color:#c92b38!important;box-shadow:none!important;white-space:nowrap}.my-tree-grid.single-tree-grid{display:block}.my-tree-grid.single-tree-grid .my-tree-card{display:grid;grid-template-columns:285px minmax(0,1fr);max-width:none;min-height:310px;border-radius:22px;box-shadow:0 18px 42px rgba(30,64,95,.08)}.my-tree-grid.single-tree-grid .my-tree-card-cover{height:100%;min-height:310px;background:linear-gradient(145deg,#eef9f5,#e7f5fb 58%,#f8fbfd);border-right:1px solid #e3edf3}.my-tree-grid.single-tree-grid .my-tree-card-cover:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 22%,rgba(119,190,145,.17),transparent 24%),radial-gradient(circle at 80% 70%,rgba(99,179,237,.12),transparent 27%)}.my-tree-grid.single-tree-grid .my-tree-card-cover>span:first-child{position:relative;z-index:2;width:76px;height:76px;border-width:4px;box-shadow:0 8px 18px rgba(49,91,125,.18);font-size:1.8rem}.my-tree-grid.single-tree-grid .tree-status-pill{z-index:3;background:#eafaf2;color:#168052}.my-tree-grid.single-tree-grid .my-tree-card-body{display:flex;flex-direction:column;justify-content:center;padding:28px 32px}.my-tree-grid.single-tree-grid .my-tree-card-body h2{font-size:25px;letter-spacing:-.02em}.empty-tree-attention{display:flex;flex-direction:column;gap:3px;margin:14px 0 2px;padding:14px 16px;border:1px solid #f0cf72;border-radius:13px;background:linear-gradient(90deg,#fff9df,#fffdf4);color:#586678}.empty-tree-attention strong{color:#172033}.my-tree-grid.single-tree-grid .my-tree-metrics{justify-content:flex-start;gap:0;margin:18px 0}.my-tree-grid.single-tree-grid .my-tree-metrics>span{min-width:190px;padding-right:24px}.my-tree-grid.single-tree-grid .my-tree-metrics>span+span{padding-left:24px;border-left:1px solid var(--border)}.my-tree-grid.single-tree-grid .my-tree-actions{gap:10px}.my-tree-grid.single-tree-grid .my-tree-actions .button{min-height:42px;padding:9px 16px;border-radius:10px}.workspace-help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 36px}.workspace-help-grid article{display:flex;align-items:center;gap:13px;padding:16px 18px;border:1px solid #dfe8ef;border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(30,64,95,.045)}.workspace-help-grid strong{display:block;margin-bottom:3px}.workspace-help-grid p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}.help-icon{display:grid;width:43px;height:43px;place-items:center;flex:0 0 43px;border-radius:12px;font-size:21px;font-weight:900}.help-icon.import{background:#eaf9f0;color:#238657}.help-icon.people{background:#f2edff;color:#7357d9}.help-icon.share{background:#fff0f3;color:#d44862}
@media(max-width:1000px){.workspace-hero{grid-template-columns:1fr 220px}.workspace-tree-art{display:none}.my-tree-grid.single-tree-grid .my-tree-card{grid-template-columns:220px minmax(0,1fr)}.workspace-help-grid{grid-template-columns:1fr}}
@media(max-width:720px){.my-trees-page{padding-top:12px}.workspace-hero{grid-template-columns:1fr;padding:24px}.modern-plan-card{width:100%}.modern-limit-card{align-items:flex-start;flex-direction:column}.my-tree-grid.single-tree-grid .my-tree-card{display:block}.my-tree-grid.single-tree-grid .my-tree-card-cover{min-height:145px;height:145px;border-right:0;border-bottom:1px solid #e3edf3}.my-tree-grid.single-tree-grid .my-tree-card-body{padding:22px}.my-tree-grid.single-tree-grid .my-tree-metrics{flex-direction:column;gap:8px}.my-tree-grid.single-tree-grid .my-tree-metrics>span,.my-tree-grid.single-tree-grid .my-tree-metrics>span+span{min-width:0;padding:0;border:0}}


/* ===== V14 unified FamilyTree visual system ===== */
:root{
 --bg:#f7fbff;--card:#fff;--text:#0c2344;--muted:#66758b;--border:#dce7f1;
 --accent:#147fe8;--accent-soft:#eef7ff;--success:#0a9b68;--danger:#d93848;
 --shadow:0 12px 34px rgba(30,72,112,.08);--shadow-lg:0 22px 58px rgba(30,72,112,.12);
 --radius:18px;--radius-sm:12px;
}
html{background:var(--bg)}
body{background:linear-gradient(180deg,#fbfdff 0,#f7fbff 46%,#f8fcfa 100%);color:var(--text);min-height:100vh}
a{color:#126fc8}
.brand{display:inline-flex!important;align-items:center;gap:9px;color:#092448!important;font-weight:900!important;font-size:1.16rem!important;letter-spacing:-.025em;text-decoration:none!important;white-space:nowrap}
.brand-logo{width:34px;height:34px;display:block;flex:0 0 34px}
.global-topbar,.topbar{min-height:70px;padding:10px 24px;background:rgba(255,255,255,.94);border-bottom:1px solid #dce7f1;box-shadow:0 4px 18px rgba(31,73,111,.045);backdrop-filter:blur(16px)}
.global-search-group{display:flex;align-items:center;gap:10px;flex:1;min-width:220px}.global-search-group .search-wrap{max-width:650px;margin:0 auto}
.search-wrap input,.global-nav-search input{min-height:44px;border-color:#d7e3ed!important;border-radius:14px!important;background:#f8fbfe!important;padding:10px 15px!important;box-shadow:inset 0 1px 1px rgba(15,35,65,.02)}
.search-wrap input:focus,.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:3px solid rgba(20,127,232,.12);border-color:#75b7f2!important}
.global-nav-actions{gap:8px}.nav-current-user{border-radius:14px!important;border:1px solid #dce7f1!important;background:#fff!important;padding:5px 9px!important}.nav-current-user-avatar{background:#eaf4ff!important;color:#176dbb!important}.premium-nav-button{background:linear-gradient(135deg,#ef3d45,#d92835)!important;border-color:#d92835!important;color:#fff!important;box-shadow:0 8px 18px rgba(217,40,53,.18)}
.button{min-height:42px;border-radius:11px;border-color:#147fe8;background:#147fe8;font-weight:800;box-shadow:0 4px 10px rgba(20,127,232,.08);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}.button:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(20,127,232,.14)}.button.secondary{background:#fff;color:#102844;border-color:#d8e4ee;box-shadow:none}.button.danger,.danger-outline{border-color:#ef6672!important;color:#c92e3d!important;background:#fff!important}
.page{width:min(1440px,100%);padding:28px 28px 46px}.page.narrow{width:min(1180px,100%)}
.page-heading,.tree-toolbar{margin-bottom:20px}.page-heading h1,.tree-toolbar h1{letter-spacing:-.035em;color:#092448}.page-heading p,.page-heading .muted{color:#687990}
.card,.panel,.form-card,.table-card,.admin-panel,.premium-card,.support-card{border-color:#dce7f1!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--shadow)!important}
.form-card,.table-card{padding:22px;margin-top:18px}.form-card input:not([type=checkbox]),.form-card select,.form-card textarea{border-color:#d8e4ee;border-radius:11px;background:#fbfdff;min-height:44px}
table{border-collapse:separate;border-spacing:0;width:100%}th{background:#f6faff!important;color:#4c617a!important;font-size:.75rem;text-transform:uppercase;letter-spacing:.045em}th,td{border-color:#e7eef5!important;padding:12px 14px!important}tbody tr:hover td{background:#fbfdff}
.alert{border-radius:13px!important}.eyebrow{color:#61748b;letter-spacing:.11em}.muted{color:#6c7c90}
.tree-shell,.tree-stage,.tree-side-panel{border-color:#dce7f1!important;border-radius:18px!important;box-shadow:var(--shadow)}
.tree-stage{background:linear-gradient(180deg,#fff 0,#fbfdff 100%)}
.person-card,.sticky-card{filter:drop-shadow(0 8px 12px rgba(31,73,111,.08))}
.internal-tree-menu,.tree-internal-tools{padding:7px;border:1px solid #e0eaf2;border-radius:14px;background:#f8fbfe}
.notification-panel{border-radius:18px;box-shadow:var(--shadow-lg)}

/* Authentication + public utility screens */
.auth-page,.public-form-page{background:radial-gradient(circle at 18% 15%,rgba(187,232,211,.35),transparent 28%),radial-gradient(circle at 85% 10%,rgba(186,225,255,.38),transparent 30%),linear-gradient(180deg,#fbfdff,#f6fbf8)}
.auth-card{border:1px solid #dce7f1!important;border-radius:24px!important;box-shadow:var(--shadow-lg)!important}
.public-nav,.public-plan-nav{min-height:72px;padding:10px clamp(20px,5vw,72px)!important;background:rgba(255,255,255,.94)!important;border-bottom:1px solid #dce7f1!important;box-shadow:0 4px 18px rgba(31,73,111,.04)}

/* Landing page aligned with the approved green/blue family theme */
.landing-body{background:#fff}.landing-body .public-nav{position:sticky;top:0;z-index:60}.landing-body .hero{width:100%;max-width:none;min-height:560px;margin:0;padding:70px max(7vw,28px);border-radius:0;background:radial-gradient(circle at 72% 44%,rgba(153,220,172,.26),transparent 26%),radial-gradient(circle at 20% 70%,rgba(178,224,255,.26),transparent 30%),linear-gradient(120deg,#f4fbff 0,#f7fcff 48%,#f1fbf4 100%);border-bottom:1px solid #dcebe3}.landing-body .hero-copy h1{color:#092448;max-width:660px}.landing-body .hero-copy p{color:#49647d}.landing-body .hero-primary{background:linear-gradient(135deg,#1389f2,#086fd2);border-color:#086fd2}.landing-body .hero-art svg{filter:drop-shadow(0 24px 40px rgba(47,108,74,.08))}.landing-trust-strip,.landing-step-grid article,.capability-card{border-color:#dce7f1!important;box-shadow:var(--shadow)!important}

/* Admin screens use the same product shell, while retaining admin status colors */
.admin-page,.admin-shell{color:var(--text)}.admin-quick-card,.admin-stat,.admin-card{border-radius:17px!important;border-color:#dce7f1!important;box-shadow:var(--shadow)!important}.admin-nav,.admin-internal-nav{border-radius:14px;background:#f7fbff;border:1px solid #dce7f1;padding:7px}

/* Premium and collaboration surfaces */
.premium-hub-hero,.premium-landing-showcase{border-radius:26px!important}.premium-feature-card,.family-premium-card,.collaboration-card{border-radius:18px!important;box-shadow:var(--shadow)!important}.premium-upgrade-banner{border-radius:17px!important}

/* Consistent empty states */
.empty-tree,.empty-state{border:1px dashed #cbddea;border-radius:18px;background:linear-gradient(180deg,#fbfdff,#f7fbff);padding:48px 24px!important}.empty-tree-guidance:before{content:"";width:54px;height:54px;background:url('/images/familytree-logo.svg') center/contain no-repeat;opacity:.9;margin-bottom:2px}

@media(max-width:1050px){.global-topbar,.topbar{flex-wrap:wrap}.global-search-group{order:3;width:100%;flex-basis:100%}.global-search-group .search-wrap{max-width:none}.global-nav-actions{margin-left:auto}.page{padding:22px 18px 38px}}
@media(max-width:720px){.brand span{display:none}.brand-logo{width:38px;height:38px}.global-topbar,.topbar{padding:9px 12px}.global-nav-actions{gap:5px}.global-nav-actions .button{padding:7px 9px}.nav-current-user-copy{display:none}.page{padding:18px 12px 34px}.landing-body .hero{padding:46px 20px}}

/* V16: plan purchase CTAs + identity placement */
.global-search-group{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.global-search-group .nav-current-user{flex:0 0 auto}
.plan-summary-grid article{display:flex;flex-direction:column}
.plan-summary-grid article p{flex:1}
.plan-buy-button{margin-top:16px;width:100%;justify-content:center;text-align:center;background:linear-gradient(135deg,#3478e5,#2563d9);border-color:#2563d9;color:#fff}
.plan-buy-button:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(37,99,217,.18)}
.family-buy-button{background:linear-gradient(135deg,#7357d9,#6246c7);border-color:#6246c7}
@media(max-width:900px){.global-search-group .nav-current-user-copy{display:none}}

/* ===== V18 approved illustrated My Family Trees workspace ===== */
.my-trees-page{width:100%;max-width:none;padding:0 0 36px;background:linear-gradient(180deg,#f7fbff 0,#fff 78%)}
.my-trees-page>.success,.my-trees-page>.error,.my-trees-page>.downgrade-choice-card,.my-trees-page>.create-tree-card,.my-trees-page>.tree-limit-card,.my-trees-page>.family-invitations-panel,.my-trees-page>.shared-tree-section,.my-trees-page>.my-tree-grid,.my-trees-page>.workspace-upgrade-strip,.my-trees-page>.workspace-help-grid{width:min(1360px,calc(100% - 48px));margin-left:auto;margin-right:auto}
.workspace-hero{width:100%;max-width:none;margin:0 0 0;padding:28px max(6vw,36px) 26px;min-height:205px;display:grid;grid-template-columns:minmax(330px,1fr) minmax(390px,1.2fr) 255px;align-items:center;gap:24px;border:0;border-radius:0;background:linear-gradient(180deg,rgba(235,248,255,.95),rgba(241,252,247,.95));box-shadow:none;position:relative;overflow:hidden}
.workspace-hero:after{content:"";position:absolute;inset:auto 0 0;height:55px;background:radial-gradient(ellipse at 12% 100%,#d9f3ea 0 35%,transparent 36%),radial-gradient(ellipse at 82% 100%,#d8f2ea 0 32%,transparent 33%);opacity:.75;pointer-events:none}
.workspace-hero-copy{z-index:1}.workspace-hero-copy h1{font-size:clamp(2.5rem,4vw,4rem);line-height:1;margin:7px 0 12px;letter-spacing:-.045em}.workspace-hero-copy p{max-width:520px;font-size:1.05rem;line-height:1.45;color:#526d87}
.workspace-tree-art{height:160px;display:grid;grid-template-columns:1fr 185px;align-items:center;gap:8px;position:relative;z-index:1}.workspace-tree-picture{height:170px;background:url('/images/workspace-family-tree-hero.svg') center/cover no-repeat;mix-blend-mode:multiply;opacity:.92;border-radius:28px}.workspace-tree-art blockquote{margin:0;color:#315a82;font-family:Georgia,serif;font-size:1.28rem;font-style:italic;line-height:1.5;text-align:center}.workspace-tree-art blockquote:after{content:"";display:block;width:42px;height:3px;background:#2aaa51;border-radius:99px;margin:10px auto 0}
.modern-plan-card{position:relative;z-index:2;display:flex;align-items:flex-start;gap:14px;padding:20px;border:1px solid #d9e7f0;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 14px 34px rgba(37,83,119,.12)}.modern-plan-card .plan-card-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:#eaf4ff;color:#2279df;font-size:25px}.modern-plan-card strong{font-size:1rem}.modern-plan-card span{display:block;margin-top:4px}.plan-upgrade-link{display:block;margin-top:15px;font-weight:800;color:#1674df}
.modern-limit-card{margin-top:0!important;border-radius:0 0 15px 15px!important;border-color:#f3c7cc!important;background:linear-gradient(90deg,#fff,#fff7f7)!important;box-shadow:none!important;padding:14px 22px!important}.limit-info-icon{background:#4a8cf0!important}.premium-soft-button{background:#fff0f2!important;color:#d92942!important;border-color:#ffd7dc!important}
.my-tree-grid.single-tree-grid{margin-top:20px}.my-tree-grid.single-tree-grid .my-tree-card{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:310px;border:1px solid #dce7f1;border-radius:18px;background:#fff;box-shadow:0 15px 34px rgba(35,75,110,.08);overflow:hidden}.my-tree-card-cover{position:relative!important;min-height:310px!important;height:auto!important;padding:0!important;background:#edf8ff!important;border-right:1px solid #e1ebf2!important;overflow:hidden}.tree-card-art{position:absolute;inset:0;background:url('/images/workspace-tree-card-art.svg') center/cover no-repeat;opacity:.94}.tree-card-initial{position:absolute!important;left:50%;top:46%;transform:translate(-50%,-50%);display:grid!important;place-items:center;width:90px!important;height:90px!important;border-radius:50%!important;background:#285b9a!important;border:5px solid rgba(255,255,255,.75);color:#fff!important;font-size:2rem!important;z-index:2;box-shadow:0 10px 24px rgba(30,65,110,.22)}.my-tree-card-cover em{position:absolute;left:20px;right:20px;bottom:34px;text-align:center;color:#345676;font-family:Georgia,serif;font-size:1rem;line-height:1.45;z-index:2}.tree-status-pill{z-index:4}
.my-tree-card-body{padding:22px 24px!important}.tree-card-title-row{display:flex;align-items:center;gap:10px}.tree-card-title-row h2{margin:0;font-size:1.35rem}.tree-edit-glyph{font-size:1.2rem;color:#285d9c}.my-tree-card-body>p{margin:4px 0 14px;color:#6d7d8e}.empty-tree-attention{display:flex;flex-direction:column;gap:2px;margin:8px 0 14px;padding:14px 16px 14px 70px!important;min-height:62px;position:relative}.empty-tree-attention:before{content:"♧";position:absolute;left:14px;top:11px;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff6d8;color:#18a35b;font-size:23px}.my-tree-metrics{display:grid!important;grid-template-columns:repeat(3,1fr);margin:8px 0 14px!important;border-top:1px solid #e4edf4;border-bottom:1px solid #e4edf4}.my-tree-metrics>span,.my-tree-grid.single-tree-grid .my-tree-metrics>span{min-width:0!important;padding:10px 14px!important;border-left:1px solid #e4edf4!important;display:grid;grid-template-columns:30px 1fr;align-items:center;column-gap:8px}.my-tree-metrics>span:first-child{border-left:0!important}.my-tree-metrics .metric-icon{grid-row:1/3;font-size:20px;color:#285d9c}.my-tree-metrics small{font-size:.72rem;color:#75869a}.my-tree-metrics strong{font-size:.9rem;color:#34516e}.my-tree-actions .button:first-child{background:linear-gradient(135deg,#346aa6,#234e83);border-color:#234e83;min-width:145px}.my-tree-actions .button{min-height:44px!important}
.workspace-upgrade-strip{margin-top:16px!important;padding:14px 20px;border:1px dashed #8f80ff;border-radius:16px;background:linear-gradient(90deg,#fbfbff,#f6f4ff);display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:16px}.workspace-upgrade-strip p{margin:3px 0 0;color:#66768a}.upgrade-plus{display:grid;place-items:center;width:48px;height:48px;border:1px dashed #7357ff;border-radius:50%;font-size:26px;color:#7357ff}.workspace-upgrade-strip .button{background:linear-gradient(135deg,#6f42ff,#3e7eea);border:0;min-width:210px}
.workspace-help-grid{margin-top:10px!important;margin-bottom:0!important}.workspace-help-grid article{min-height:86px}.workspace-values{margin:18px 0 -36px;padding:18px max(7vw,36px);display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(90deg,#effcf7,#f5fffb);border-top:1px solid #d7efe5}.workspace-values div{display:flex;align-items:center;justify-content:center;gap:12px;color:#0a9b68;font-size:1.6rem;border-left:1px solid #cfe8df}.workspace-values div:first-child{border-left:0}.workspace-values strong{color:#24537b;font-size:.9rem;line-height:1.35}
@media(max-width:1050px){.workspace-hero{grid-template-columns:1fr 1fr}.modern-plan-card{grid-column:1/-1;width:100%}.my-tree-grid.single-tree-grid .my-tree-card{grid-template-columns:240px 1fr}.workspace-values{grid-template-columns:repeat(2,1fr);gap:14px}.workspace-values div{border:0}.workspace-upgrade-strip{grid-template-columns:52px 1fr}.workspace-upgrade-strip .button{grid-column:1/-1;width:100%}}
@media(max-width:760px){.workspace-hero{grid-template-columns:1fr;padding:26px 18px}.workspace-tree-art{display:none}.my-trees-page>.success,.my-trees-page>.error,.my-trees-page>.downgrade-choice-card,.my-trees-page>.create-tree-card,.my-trees-page>.tree-limit-card,.my-trees-page>.family-invitations-panel,.my-trees-page>.shared-tree-section,.my-trees-page>.my-tree-grid,.my-trees-page>.workspace-upgrade-strip,.my-trees-page>.workspace-help-grid{width:calc(100% - 24px)}.my-tree-grid.single-tree-grid .my-tree-card{display:block}.my-tree-card-cover{min-height:220px!important}.my-tree-metrics{grid-template-columns:1fr!important}.my-tree-metrics>span{border-left:0!important;border-top:1px solid #e4edf4!important}.my-tree-metrics>span:first-child{border-top:0!important}.workspace-values{grid-template-columns:1fr}.workspace-upgrade-strip{grid-template-columns:1fr;text-align:center}.upgrade-plus{margin:auto}}

/* V19 approved workspace visual corrections */
:root{--ft-navy:#15385f;--ft-navy-2:#234f80;--ft-green:#2f9f68;--ft-red:#d92d3a}
.brand-logo{width:38px!important;height:38px!important}.brand{gap:7px!important;font-size:1.22rem!important}
.global-topbar{min-height:68px;padding:8px 18px!important;background:#fff!important;border-bottom:1px solid #dce7ef!important;box-shadow:0 2px 10px rgba(22,56,91,.035)!important}
.global-search-group{gap:10px}.global-nav-actions{gap:8px!important}.global-nav-actions .button,.notification-bell{min-height:42px!important;border-radius:11px!important;padding:9px 14px!important;font-weight:800!important}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;margin-right:6px;font-size:1.05rem;line-height:1}.bell-glyph{font-size:1.15rem;line-height:1;color:#15385f}
.premium-nav-button{background:#d92d3a!important;border-color:#d92d3a!important;color:#fff!important;box-shadow:0 6px 14px rgba(217,45,58,.16)!important}
.global-nav-actions [data-nav-key="my-tree"]{background:var(--ft-navy-2)!important;border-color:var(--ft-navy-2)!important;color:#fff!important}
.global-nav-actions [data-nav-key="support"],.global-nav-logout .button{background:#fff!important;color:#17375c!important;border-color:#d6e2ec!important}
.workspace-hero{min-height:210px!important;grid-template-columns:minmax(380px,1.05fr) minmax(440px,1.2fr) 245px!important;background:linear-gradient(180deg,#effaff 0%,#f6fdf9 100%)!important;padding-top:22px!important;padding-bottom:22px!important}
.workspace-tree-art{height:174px!important;display:block!important;position:relative!important;border-radius:22px;overflow:hidden}.workspace-tree-picture{position:absolute;inset:0;height:auto!important;background:url('/images/workspace-family-tree-hero.svg') center/cover no-repeat!important;mix-blend-mode:normal!important;opacity:1!important;border-radius:22px!important}.workspace-tree-art blockquote{position:absolute;right:22px;top:38px;width:190px;z-index:2;margin:0!important;color:#315a82!important;font-size:1.25rem!important;line-height:1.45!important;text-shadow:0 1px 0 #fff}.workspace-tree-art blockquote:after{background:#2f9f68!important}
.modern-plan-card{border-radius:16px!important;box-shadow:0 12px 28px rgba(32,73,108,.09)!important}.plan-card-icon{color:#2f9f68!important;background:#eaf8f1!important}
.my-tree-grid.single-tree-grid .my-tree-card{grid-template-columns:300px minmax(0,1fr)!important}.my-tree-card-cover{background:#eff9ff!important}.tree-card-art{background:url('/images/workspace-tree-card-art.svg') center/cover no-repeat!important;opacity:1!important}.tree-card-initial{background:#28588f!important;border:6px solid rgba(255,255,255,.88)!important;box-shadow:0 0 0 7px rgba(45,94,151,.2),0 10px 24px rgba(30,65,110,.2)!important}.my-tree-card-cover em{bottom:30px!important;color:#31557a!important;font-size:1rem!important;line-height:1.3!important;background:rgba(247,252,255,.72);padding:5px 8px;border-radius:9px}
.my-tree-actions .button:first-child{background:var(--ft-navy)!important;border-color:var(--ft-navy)!important;color:#fff!important;box-shadow:0 5px 12px rgba(21,56,95,.14)}.my-tree-actions .button.secondary{background:#fff!important;color:#15385f!important;border-color:#d3e0ea!important}.my-tree-actions .button{font-weight:800!important}
.my-tree-actions .button[href*="/import"]:before{content:"↥";margin-right:7px;font-size:1rem}.my-tree-actions .button[href*="/people"]:before{content:"♙";margin-right:7px;font-size:1rem}.my-tree-actions .button:first-child:before{content:"♧";margin-right:7px;font-size:1rem}.my-tree-actions form button:before{content:"♙";margin-right:7px}
.workspace-upgrade-strip .button{background:linear-gradient(135deg,#6847e8,#347de3)!important}.premium-soft-button{color:#c92838!important;background:#fff6f7!important;border-color:#f2c8cd!important}
@media(max-width:1050px){.workspace-hero{grid-template-columns:1fr 1fr!important}.modern-plan-card{grid-column:1/-1}.workspace-tree-art{display:block!important}}
@media(max-width:760px){.workspace-tree-art{display:none!important}}

/* V20: compact multi-tree horizontal cards */
.my-tree-grid:not(.single-tree-grid){display:grid!important;grid-template-columns:1fr!important;gap:14px!important;margin-top:20px}
.my-tree-grid:not(.single-tree-grid) .my-tree-card{display:grid!important;grid-template-columns:270px minmax(0,1fr)!important;min-height:158px!important;max-width:none!important;border:1px solid #dce7f1!important;border-radius:18px!important;background:#fff!important;box-shadow:0 10px 28px rgba(35,75,110,.065)!important;overflow:hidden!important}
.my-tree-grid:not(.single-tree-grid) .my-tree-card-cover{height:100%!important;min-height:158px!important;border-right:1px solid #e1ebf2!important;border-bottom:0!important}
.my-tree-grid:not(.single-tree-grid) .tree-card-art{background-position:center!important;background-size:cover!important}
.my-tree-grid:not(.single-tree-grid) .tree-card-initial{width:64px!important;height:64px!important;top:47%!important;border-width:4px!important;font-size:1.35rem!important;box-shadow:0 0 0 5px rgba(45,94,151,.14),0 7px 16px rgba(30,65,110,.16)!important}
.my-tree-grid:not(.single-tree-grid) .my-tree-card-cover em{left:14px!important;right:14px!important;bottom:13px!important;padding:3px 6px!important;font-size:.82rem!important;line-height:1.2!important}
.my-tree-grid:not(.single-tree-grid) .tree-status-pill{top:11px!important;right:11px!important;font-size:.72rem!important;padding:5px 9px!important}
.my-tree-grid:not(.single-tree-grid) .my-tree-card-body{padding:16px 20px!important;justify-content:center!important;min-width:0}
.my-tree-grid:not(.single-tree-grid) .tree-card-title-row{margin-bottom:1px!important}
.my-tree-grid:not(.single-tree-grid) .my-tree-card-body h2{margin:0!important;font-size:20px!important;line-height:1.2!important}
.my-tree-grid:not(.single-tree-grid) .my-tree-card-body>p{margin:3px 0 8px!important;font-size:13px!important}
.my-tree-grid:not(.single-tree-grid) .empty-tree-attention{margin:7px 0!important;padding:8px 11px!important;font-size:12px!important}
.my-tree-grid:not(.single-tree-grid) .my-tree-metrics{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:6px 0 9px!important;border-top:1px solid #e5edf4!important;border-bottom:1px solid #e5edf4!important}
.my-tree-grid:not(.single-tree-grid) .my-tree-metrics>span{min-width:0!important;padding:8px 14px!important;font-size:12px!important}
.my-tree-grid:not(.single-tree-grid) .my-tree-metrics>span:first-child{padding-left:0!important}
.my-tree-grid:not(.single-tree-grid) .my-tree-metrics>span+span{border-left:1px solid #e5edf4!important}
.my-tree-grid:not(.single-tree-grid) .my-tree-actions{gap:7px!important;flex-wrap:wrap!important}
.my-tree-grid:not(.single-tree-grid) .my-tree-actions .button{min-height:34px!important;padding:6px 12px!important;border-radius:9px!important;font-size:12px!important}
@media(max-width:900px){.my-tree-grid:not(.single-tree-grid) .my-tree-card{grid-template-columns:205px minmax(0,1fr)!important}.my-tree-grid:not(.single-tree-grid) .my-tree-card-cover{min-height:175px!important}.my-tree-grid:not(.single-tree-grid) .my-tree-metrics{grid-template-columns:1fr!important}.my-tree-grid:not(.single-tree-grid) .my-tree-metrics>span{padding:6px 0!important;border-left:0!important}.my-tree-grid:not(.single-tree-grid) .my-tree-metrics>span+span{border-left:0!important;border-top:1px solid #edf2f6!important}}
@media(max-width:650px){.my-tree-grid:not(.single-tree-grid) .my-tree-card{display:block!important}.my-tree-grid:not(.single-tree-grid) .my-tree-card-cover{min-height:185px!important;border-right:0!important;border-bottom:1px solid #e1ebf2!important}}

/* V21: requested notification, create-tree banner and inline tree rename */
.notification-bell{width:44px!important;min-width:44px!important;height:42px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.notification-bell:hover{background:#f6f9fc!important;transform:none!important}
.bell-glyph{display:grid!important;width:24px;height:24px;place-items:center;color:#0f2c52!important}
.bell-glyph svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.notification-badge{top:-3px!important;right:-2px!important;min-width:18px!important;height:18px!important;padding:0 4px!important;border-width:2px!important;font-size:10px!important;line-height:14px!important;background:#df2e3c!important}
.create-tree-card{grid-template-columns:minmax(300px,.8fr) minmax(650px,1.65fr)!important;gap:24px!important;align-items:center!important;padding:20px 22px!important}
.create-tree-form{grid-template-columns:minmax(220px,.85fr) minmax(300px,1.1fr) 180px!important;align-items:end!important;column-gap:12px!important;row-gap:8px!important}
.create-tree-form fieldset{grid-column:1/3!important;min-height:48px!important;padding:9px 10px!important;align-items:center!important}
.create-tree-form>.create-tree-submit{grid-column:3!important;grid-row:1/3!important;align-self:center!important;justify-self:stretch!important;min-height:64px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;padding:10px 18px!important;font-size:15px!important;line-height:1.25!important;text-align:center!important;background:#4c7cec!important;border-color:#4c7cec!important}
.create-tree-button-icon{font-size:20px;line-height:1}
.tree-name-display{display:flex;align-items:center;gap:7px;min-width:0}.tree-name-display[hidden],.tree-rename-form[hidden]{display:none!important}
.tree-rename-trigger{display:inline-grid;width:30px;height:30px;place-items:center;flex:0 0 30px;padding:0;border:0;border-radius:8px;background:transparent;color:#24558d;font-size:17px;font-weight:900;cursor:pointer}.tree-rename-trigger:hover,.tree-rename-trigger:focus-visible{background:#edf5ff;outline:2px solid rgba(36,85,141,.14)}
.tree-rename-form{display:flex;align-items:center;gap:7px;width:min(100%,620px);margin-bottom:3px}.tree-rename-input{flex:1;min-width:160px;min-height:38px;padding:7px 10px;border:1px solid #8fb5dd;border-radius:9px;background:#fff;color:#0c2344;font:inherit;font-weight:800;outline:none}.tree-rename-input:focus{border-color:#397dd0;box-shadow:0 0 0 3px rgba(57,125,208,.12)}.tree-rename-save,.tree-rename-cancel{min-height:38px;padding:7px 12px;border-radius:9px;font:inherit;font-size:12px;font-weight:850;cursor:pointer}.tree-rename-save{border:1px solid #234f80;background:#234f80;color:#fff}.tree-rename-cancel{border:1px solid #d3e0ea;background:#fff;color:#15385f}
@media(max-width:1050px){.create-tree-card{grid-template-columns:1fr!important}.create-tree-form{grid-template-columns:1fr 1fr!important}.create-tree-form fieldset{grid-column:1/-1!important}.create-tree-form>.create-tree-submit{grid-column:1/-1!important;grid-row:auto!important;justify-self:end!important;width:190px}}
@media(max-width:700px){.create-tree-form{grid-template-columns:1fr!important}.create-tree-form fieldset,.create-tree-form>.create-tree-submit{grid-column:1!important}.create-tree-form>.create-tree-submit{justify-self:stretch!important;width:100%}.tree-rename-form{flex-wrap:wrap}.tree-rename-input{flex-basis:100%}}

/* ==========================================================
   V22: persistent selected-menu highlighting
   The active page wins over the normal V19 button skin.
   ========================================================== */
.global-nav-actions .button.nav-active,
.global-nav-actions .button[aria-current="page"] {
    background: var(--ft-navy-2, #234f80) !important;
    border-color: var(--ft-navy-2, #234f80) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(35,79,128,.18) !important;
}

/* Premium keeps its product-red identity when selected. */
.global-nav-actions .premium-nav-button.nav-active,
.global-nav-actions .premium-nav-button[aria-current="page"] {
    background: var(--ft-red, #d92d3a) !important;
    border-color: var(--ft-red, #d92d3a) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(217,45,58,.18) !important;
}

/* My Family Trees is no longer permanently highlighted just because it exists. */
.global-nav-actions [data-nav-key="my-tree"]:not(.nav-active):not([aria-current="page"]) {
    background: #fff !important;
    color: #17375c !important;
    border-color: #d6e2ec !important;
    box-shadow: none !important;
}

/* Support/Admin and other normal selected navigation use the same dark-blue state. */
.global-nav-actions [data-nav-key="support"].nav-active,
.global-nav-actions [data-nav-key="admin-support"].nav-active,
.global-nav-actions [data-nav-key="admin"].nav-active,
.global-nav-actions [data-nav-key="my-tree"].nav-active {
    background: var(--ft-navy-2, #234f80) !important;
    border-color: var(--ft-navy-2, #234f80) !important;
    color: #fff !important;
}

/* Shared rule for selected internal page/tool buttons. */
.internal-page-nav .button.internal-nav-active,
.tree-internal-tools .button.internal-nav-active,
.person-life-nav .button.internal-nav-active,
[data-internal-nav] .button.internal-nav-active,
.internal-page-nav .button[aria-current="page"],
.tree-internal-tools .button[aria-current="page"] {
    background: var(--ft-navy-2, #234f80) !important;
    border-color: var(--ft-navy-2, #234f80) !important;
    color: #fff !important;
    box-shadow: 0 5px 12px rgba(35,79,128,.14) !important;
}

/* V23: consistent spacing for authenticated top navigation actions.
   Bell + current-user identity remain grouped with search; all action buttons use one gap. */
.global-topbar .global-nav-actions,
.global-nav-actions {
    gap: 12px !important;
}
.global-nav-actions .premium-nav-button {
    margin-right: 0 !important;
}
.global-nav-actions .button,
.global-topbar .global-nav-actions .button,
.global-topbar .global-nav-logout .button {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
@media (max-width:1180px) {
    .global-nav-actions .premium-nav-button {
        margin-right: 0 !important;
    }
}
@media (max-width:720px) {
    .global-topbar .global-nav-actions,
    .global-nav-actions {
        gap: 7px !important;
    }
}


/* V30 — My Family Trees quick-actions panel (fixed rendering) */
.workspace-quick-actions {
    width: min(1360px, calc(100% - 48px));
    margin: 34px auto 18px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: minmax(360px, .95fr) minmax(0, 2fr);
    align-items: center;
    gap: 24px;
    border: 1px solid #cfe8dc;
    border-radius: 18px;
    background: linear-gradient(110deg, #effbf5 0%, #f8fcfa 50%, #f1faf6 100%);
    box-shadow: 0 10px 28px rgba(35, 105, 75, .06);
}
.workspace-quick-actions-intro {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.quick-actions-bolt {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    flex: 0 0 52px;
    border-radius: 14px;
    background: #dcf7e7;
    color: #20a35a;
    font-size: 30px;
    font-weight: 950;
    box-shadow: inset 0 0 0 1px rgba(32, 163, 90, .04);
}
.workspace-quick-actions-intro .eyebrow {
    margin: 0 0 5px;
    color: #64798d;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.workspace-quick-actions-intro h2 {
    margin: 0 0 4px;
    color: #10284a;
    font-size: 1.13rem;
    line-height: 1.25;
}
.workspace-quick-actions-intro p {
    margin: 0;
    color: #708296;
    font-size: .82rem;
    line-height: 1.45;
}
.workspace-quick-actions .workspace-help-grid {
    width: 100%;
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.workspace-quick-actions .workspace-help-grid article {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 86px;
    margin: 0;
    padding: 14px 34px 14px 14px;
    border: 1px solid #dbe7ee;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 6px 16px rgba(30, 64, 95, .04);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.workspace-quick-actions .workspace-help-grid article:hover {
    transform: translateY(-1px);
    border-color: #c9dce8;
    box-shadow: 0 8px 20px rgba(30, 64, 95, .075);
}
.workspace-quick-actions .workspace-help-grid article > div {
    min-width: 0;
}
.workspace-quick-actions .workspace-help-grid strong {
    display: block;
    margin: 0 0 3px;
    color: #10284a;
    font-size: .86rem;
}
.workspace-quick-actions .workspace-help-grid p {
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.4;
}
.workspace-quick-actions .help-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
}
.quick-action-arrow {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #8ba0b4;
    font-size: 23px;
    line-height: 1;
}
@media (max-width: 1120px) {
    .workspace-quick-actions {
        grid-template-columns: 1fr;
    }
    .workspace-quick-actions .workspace-help-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 800px) {
    .workspace-quick-actions {
        width: calc(100% - 24px);
        margin-top: 26px;
        padding: 16px;
    }
    .workspace-quick-actions-intro {
        align-items: flex-start;
    }
    .workspace-quick-actions .workspace-help-grid {
        grid-template-columns: 1fr;
    }
}

/* v31 account menu: signed-in identity opens basic account details and password change. */
.nav-user-menu{position:relative;flex:0 0 auto}.nav-current-user{border:1px solid #d7e2f0;background:#fff;cursor:pointer;font:inherit;text-align:left}.nav-current-user:hover{background:#f7faff}.user-menu-chevron{font-size:14px;color:#5d6d87;margin-left:4px}.nav-user-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:330px;padding:16px;background:#fff;border:1px solid #d8e3ef;border-radius:16px;box-shadow:0 18px 45px rgba(18,45,82,.16);z-index:1200}.user-dropdown-heading{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid #e6edf5}.user-dropdown-heading>div{display:flex;flex-direction:column}.user-dropdown-heading small{color:#6b7a91}.user-basic-details{margin:12px 0}.user-basic-details>div{display:grid;grid-template-columns:62px 1fr;gap:8px;padding:6px 0}.user-basic-details dt{font-size:12px;color:#748198}.user-basic-details dd{margin:0;font-weight:700;overflow-wrap:anywhere}.user-change-password-toggle{width:100%;justify-content:center}.nav-password-form{margin-top:12px;padding-top:12px;border-top:1px solid #e6edf5}.nav-password-form label{display:block;font-size:12px;font-weight:700;margin:0 0 9px}.nav-password-form input{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:9px 10px;border:1px solid #ccd9e8;border-radius:9px}.nav-password-form .button{width:100%;justify-content:center;margin-top:3px}


/* v33: prominent floating feedback for account/password actions. */
.app-toast-stack{position:fixed;top:82px;right:24px;width:min(430px,calc(100vw - 32px));z-index:3000;display:grid;gap:10px;pointer-events:none}
.app-toast{pointer-events:auto;display:grid;grid-template-columns:42px 1fr 32px;align-items:start;gap:12px;padding:14px 12px 14px 14px;background:#fff;border:1px solid #d8e3ef;border-radius:14px;box-shadow:0 18px 48px rgba(18,45,82,.22);animation:appToastIn .2s ease-out}
.app-toast-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:900}
.app-toast-copy{display:flex;flex-direction:column;gap:3px;padding-top:1px}.app-toast-copy strong{font-size:14px;color:#12264a}.app-toast-copy span{font-size:13px;line-height:1.4;color:#53647d}
.app-toast-error{border-left:5px solid #dc3545}.app-toast-error .app-toast-icon{background:#fff0f1;color:#c52233}.app-toast-success{border-left:5px solid #2e9d63}.app-toast-success .app-toast-icon{background:#edf9f2;color:#238251}
.app-toast-close{border:0;background:transparent;color:#718096;font-size:24px;line-height:1;cursor:pointer;border-radius:7px;padding:2px 5px}.app-toast-close:hover{background:#f1f5f9;color:#172b4d}
.app-toast.is-hiding{opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease}
@keyframes appToastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.app-toast-stack{top:72px;right:16px;left:16px;width:auto}}

/* V37 — My Family Trees cleanup/alignment refinements. */
/* Center account/password toast feedback at the top of the viewport. */
.app-toast-stack{
    top:82px!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:min(430px,calc(100vw - 32px))!important;
}
@media(max-width:700px){
    .app-toast-stack{top:72px!important;left:50%!important;right:auto!important;width:calc(100vw - 32px)!important}
}

/* Keep the create-tree first row aligned: name and description share the same label/input baseline. */
.create-tree-form>label{
    display:grid!important;
    grid-template-rows:auto 1fr!important;
    align-self:stretch!important;
    margin:0!important;
}
.create-tree-form>label>input,
.create-tree-form>label>textarea{
    box-sizing:border-box!important;
    margin-top:5px!important;
}
.create-tree-form>label>input{
    height:42px!important;
}
.create-tree-form>label>textarea{
    height:42px!important;
    min-height:42px!important;
    resize:none!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
}
.trees-to-values-gap{height:34px}
@media(max-width:800px){.trees-to-values-gap{height:26px}}

.tree-explorer-table .tree-action-cell{min-width:430px}.tree-action-panel{display:flex;flex-direction:column;gap:10px;padding:3px 0}.tree-primary-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tree-management-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--border,#dbe4ee)}.tree-owner-form{display:flex;align-items:center;gap:7px;margin:0}.tree-owner-form select{height:36px;min-width:118px;padding:0 30px 0 10px;border:1px solid var(--border,#dbe4ee);border-radius:9px;background:#fff;color:inherit}.tree-danger-actions{display:flex;align-items:center;gap:7px;margin-left:auto}.tree-danger-actions form{margin:0}.tree-action-panel .button.small{white-space:nowrap}@media (max-width:900px){.tree-explorer-table .tree-action-cell{min-width:360px}.tree-management-row{align-items:flex-start}.tree-danger-actions{margin-left:0}}


/* V39 — requested create-tree alignment, clean tree card, global admin/user toast, sign-out cleanup. */
.create-tree-form>label>span:first-child{display:block;min-height:18px;line-height:18px;white-space:nowrap}
.create-tree-form>label{grid-template-rows:18px 42px!important;align-self:end!important}
.create-tree-form>label>input,.create-tree-form>label>textarea{margin-top:5px!important;height:42px!important;min-height:42px!important}
/* Remove decorative background art from the family-tree cover while retaining the card structure. */
.my-tree-card-cover{background:#f4faf8!important}
.tree-card-art{display:none!important;background:none!important}
.my-tree-card-cover:before,.my-tree-card-cover:after{background-image:none!important}
/* Toast feedback is rendered by the global top navigation, including Admin/Super Admin pages. */
.global-topbar>.app-toast-stack{position:fixed!important;top:82px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(430px,calc(100vw - 32px))!important;z-index:5000!important}
.global-nav-logout .button{gap:0!important}
@media(max-width:700px){.create-tree-form>label>span:first-child{white-space:normal}.global-topbar>.app-toast-stack{top:72px!important;width:calc(100vw - 32px)!important}}

/* Premium Control Center compact management layout */
.premium-control-page{max-width:1180px}
.premium-compact-panel{padding:20px 22px}
.premium-compact-heading{align-items:center;margin-bottom:14px}
.premium-compact-heading p{margin:3px 0 0}
.compact-count,.scope-chip{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border:1px solid #dbe5ef;border-radius:999px;background:#f8fafc;color:#526579;font-size:11px;font-weight:800;white-space:nowrap}
.premium-compact-table{overflow:hidden;border:1px solid #dfe7ef;border-radius:14px;background:#fff}
.premium-compact-table-head,.premium-compact-row{display:grid;grid-template-columns:minmax(300px,1.8fr) minmax(120px,.7fr) 100px 88px;gap:14px;align-items:center}
.premium-compact-table-head{padding:9px 14px;background:#f7f9fc;border-bottom:1px solid #e3e9ef;color:#617187;font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.premium-compact-row{min-height:62px;padding:9px 14px;border-bottom:1px solid #edf1f5}
.premium-compact-row:last-child{border-bottom:0}
.compact-feature-main{display:flex;align-items:center;gap:11px;min-width:0}
.compact-feature-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:#eef4ff;color:#315eaa;font-size:16px}
.compact-feature-main strong,.compact-theme-name strong{display:block;color:#102449;font-size:13px;line-height:1.25}
.compact-feature-main small,.compact-theme-name small{display:block;margin-top:2px;overflow:hidden;color:#6a7b90;font-size:11px;line-height:1.3;text-overflow:ellipsis}
.compact-category{justify-self:start;padding:4px 8px;border-radius:999px;background:#f2f4f7;color:#59687a;font-size:10px;font-weight:800}
.compact-status{display:inline-flex;justify-content:center;width:max-content;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900}
.compact-status.is-enabled,.compact-status-button.is-enabled{background:#e5f8eb;color:#17753c}
.compact-status.is-disabled,.compact-status-button.is-disabled{background:#f2f4f7;color:#778397}
.compact-control-form{text-align:right}.compact-action{min-width:72px;padding:6px 9px;border:1px solid #d7e1eb;border-radius:8px;background:#fff;color:#17345f;font-size:11px;font-weight:850;cursor:pointer}.compact-action:hover{background:#f7faff}.compact-action.disable-action{color:#a43b45}.compact-action.enable-action{color:#187044}
.compact-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.compact-theme-group{overflow:hidden;border:1px solid #dfe7ef;border-radius:14px;background:#fff}
.compact-theme-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;background:#fafbfd;border-bottom:1px solid #e7ecf1}.compact-theme-group-head h3{margin:0;color:#102449;font-size:15px}.compact-theme-group-head small{display:block;margin-top:2px;color:#78879a;font-size:10px}
.compact-theme-head,.compact-theme-row{display:grid;grid-template-columns:minmax(0,1fr) 78px 88px;gap:10px;align-items:center}.compact-theme-head{padding:7px 12px;background:#f7f9fc;border-bottom:1px solid #e7ecf1;color:#718096;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.compact-theme-row{min-height:55px;padding:8px 12px;border-bottom:1px solid #edf1f5}.compact-theme-row:last-child{border-bottom:0}.compact-theme-name{min-width:0}.compact-theme-status,.compact-theme-default{margin:0;text-align:right}.compact-status-button,.compact-default-button{width:100%;padding:5px 6px;border:1px solid transparent;border-radius:8px;font-size:10px;font-weight:850;cursor:pointer}.compact-status-button{border-radius:999px}.compact-default-button{border-color:#dbe4ee;background:#fff;color:#24446f}.compact-default-button:hover:not(:disabled){background:#f4f8fc}.compact-default-button.is-default{border-color:#d9e2eb;background:#f1f4f7;color:#8a96a5;cursor:default}
@media(max-width:850px){.premium-compact-table-head{display:none}.premium-compact-row{grid-template-columns:1fr auto;gap:9px}.compact-category{grid-column:1}.compact-status{grid-column:2;grid-row:1}.compact-control-form{grid-column:2;grid-row:2}.compact-theme-grid{grid-template-columns:1fr}}
@media(max-width:560px){.premium-compact-panel{padding:16px}.premium-compact-row{padding:10px}.compact-theme-head{display:none}.compact-theme-row{grid-template-columns:1fr 74px 82px}.compact-feature-main small,.compact-theme-name small{white-space:normal}.scope-chip{display:none}}

/* V41 — Premium Control Center dashboard redesign */
.premium-control-v41{max-width:1440px!important}.premium-control-v41 .premium-admin-heading{margin-bottom:14px}.premium-section-nav{position:sticky;top:64px;z-index:40;display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:9px;border:1px solid #dfe7f0;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 8px 28px rgba(30,55,90,.05);backdrop-filter:blur(8px)}.premium-section-nav a{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:9px;color:#18345d;font-size:13px;font-weight:850;text-decoration:none}.premium-section-nav a:hover{background:#f2f6fb}.premium-section-nav a.active{background:#3f7fea;color:#fff;box-shadow:0 6px 14px rgba(63,127,234,.2)}.premium-section-nav .premium-view-site{margin-left:auto;border:1px solid #dbe5ef;background:#fff;color:#17345f}.theme-control-dashboard{scroll-margin-top:125px}.theme-dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.theme-dashboard-card{min-width:0;overflow:visible;border:1px solid #dce5ef;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(31,54,84,.05)}.theme-dashboard-card>header{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:12px 12px 0 0;border-bottom:1px solid #e4ebf2}.theme-dashboard-card>header h3{margin:0;color:#102449;font-size:15px}.theme-dashboard-card>header small{display:block;margin-top:2px;color:#687a91;font-size:11px}.theme-admin-card>header{background:linear-gradient(110deg,#f5f9ff,#edf5ff)}.theme-tree-card>header{background:linear-gradient(110deg,#f1fcf5,#effbf3)}.theme-book-card>header{background:linear-gradient(110deg,#faf5ff,#f5f0ff)}.theme-timeline-card>header{background:linear-gradient(110deg,#fff9f1,#fff4e7)}.theme-scope-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;font-size:22px;font-weight:900}.theme-admin-card .theme-scope-icon{background:#dfeeff;color:#2869df}.theme-tree-card .theme-scope-icon{background:#ddf7e6;color:#159347}.theme-book-card .theme-scope-icon{background:#efe1ff;color:#7a19e6}.theme-timeline-card .theme-scope-icon{background:#ffead3;color:#e86c00}.theme-dashboard-head,.theme-dashboard-row{display:grid;grid-template-columns:minmax(105px,1fr) 72px 58px 24px;gap:6px;align-items:center}.theme-dashboard-head{padding:8px 12px;background:#f8fafc;border-bottom:1px solid #e6edf4;color:#63758d;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.theme-dashboard-row{position:relative;min-height:43px;padding:6px 12px;border-bottom:1px solid #edf1f5}.theme-dashboard-row:last-child{border-bottom:0}.theme-dashboard-name{display:flex;align-items:center;gap:8px;min-width:0}.theme-dashboard-name strong{overflow:hidden;color:#102449;font-size:11px;white-space:nowrap;text-overflow:ellipsis}.theme-dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:#2f6df5}.theme-dot.dot-1{background:#26374f}.theme-dot.dot-2{background:#149347}.theme-dot.dot-3{background:#7d10ed}.theme-dot.dot-4{background:#f43879}.theme-dot.dot-5{background:#f1b800}.theme-state-pill{justify-self:start;display:inline-flex;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:900}.theme-state-pill.enabled{background:#dff7e7;color:#13733a}.theme-state-pill.disabled{background:#f0f2f5;color:#7c8797}.theme-radio-form{display:flex;justify-content:center;margin:0}.theme-radio{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;background:transparent;cursor:pointer}.theme-radio>span{width:11px;height:11px;border:1.5px solid #91a4bd;border-radius:50%;background:#fff}.theme-radio.selected>span{border:4px solid #3778f5}.theme-radio:hover>span{box-shadow:0 0 0 3px #e9f1ff}.theme-kebab{position:relative;margin:0}.theme-kebab summary{display:grid;place-items:center;width:24px;height:26px;border-radius:7px;color:#24446f;font-size:19px;font-weight:900;cursor:pointer;list-style:none}.theme-kebab summary::-webkit-details-marker{display:none}.theme-kebab summary:hover,.theme-kebab[open] summary{background:#eef4fb}.theme-menu{position:absolute;right:0;top:29px;z-index:60;min-width:132px;padding:5px;border:1px solid #dbe4ee;border-radius:9px;background:#fff;box-shadow:0 12px 28px rgba(23,45,75,.18)}.theme-menu form{margin:0}.theme-menu button{width:100%;padding:8px 9px;border:0;border-radius:6px;background:transparent;color:#17345f;font-size:11px;font-weight:800;text-align:left;cursor:pointer}.theme-menu button:hover{background:#f3f7fb}.premium-control-v41 #features,.premium-control-v41 #home-page,.premium-control-v41 #marketing{scroll-margin-top:125px}.premium-home-compact .section-title-row,.premium-marketing-compact .section-title-row{align-items:flex-start}.premium-home-compact .inline-setting{margin-top:10px}.premium-marketing-compact textarea{min-height:76px}.premium-control-v41 .premium-admin-panel{margin-bottom:16px}
@media(max-width:1250px){.theme-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.premium-section-nav{top:58px;overflow-x:auto}.premium-section-nav a{white-space:nowrap}.premium-section-nav .premium-view-site{margin-left:0}.theme-dashboard-grid{grid-template-columns:1fr}.theme-dashboard-head,.theme-dashboard-row{grid-template-columns:minmax(100px,1fr) 70px 56px 24px}.premium-control-v41{padding-left:12px;padding-right:12px}}

/* v42: compact lower Premium Control Center dashboard */
.premium-lower-dashboard{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px;align-items:start;margin-top:16px}.premium-lower-dashboard .premium-admin-panel{margin:0!important;border:1px solid #dce5ef;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(31,54,84,.05)}.premium-lower-right{display:grid;gap:14px}.dashboard-mini-heading{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid #e7edf4}.dashboard-mini-heading h2{margin:0;color:#102449;font-size:15px}.dashboard-mini-heading p{margin:2px 0 0;font-size:10px}.dashboard-heading-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;font-size:18px;font-weight:900}.feature-heading-icon{background:#e7f0ff;color:#316ff1}.home-heading-icon{background:#ffe9ed;color:#f04e67}.marketing-heading-icon{background:#ffe9ed;color:#f04e67}.compact-count{color:#71839a;font-size:10px;font-weight:800}.dashboard-feature-head,.dashboard-feature-row{display:grid;grid-template-columns:minmax(120px,.95fr) minmax(150px,1.35fr) 76px 74px;gap:8px;align-items:center}.dashboard-feature-head{padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e6edf4;color:#63758d;font-size:9px;font-weight:900}.dashboard-feature-row{min-height:42px;padding:6px 14px;border-bottom:1px solid #edf1f5}.dashboard-feature-row:last-child{border-bottom:0}.dashboard-feature-row strong{color:#102449;font-size:10px}.dashboard-feature-row .feature-desc{overflow:hidden;color:#667991;font-size:9px;white-space:nowrap;text-overflow:ellipsis}.feature-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.feature-switch-form{margin:0}.dashboard-switch{position:relative;display:inline-block;width:30px;height:18px;padding:0;border:0;border-radius:999px;background:#cfd8e5;vertical-align:middle;cursor:pointer}.dashboard-switch>span{position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:.15s}.dashboard-switch.on{background:#397af3}.dashboard-switch.on>span{left:15px}.dashboard-switch.display-only{cursor:default}.feature-more{color:#24446f;font-size:17px;font-weight:900}.home-section-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:7px 12px}.home-section-item{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:8px 10px;border:1px solid #e6edf4;background:#fff}.home-section-item:nth-child(1){border-radius:9px 0 0 0}.home-section-item:nth-child(2){border-radius:0 9px 9px 0}.home-section-item:nth-child(3){border-radius:0 0 0 9px;border-top:0}.home-section-item strong{display:block;color:#102449;font-size:10px}.home-section-item small{display:block;margin-top:2px;color:#687a91;font-size:9px}.home-master-control{margin:0;padding:0 14px 10px}.text-action{padding:0;border:0;background:transparent;color:#2169ed;font-size:10px;font-weight:850;cursor:pointer}.premium-dashboard-marketing{position:relative}.marketing-editor{position:relative}.marketing-editor>summary{list-style:none;cursor:pointer;font-size:10px!important;padding:7px 10px!important}.marketing-editor>summary::-webkit-details-marker{display:none}.marketing-popover{position:absolute;right:0;top:40px;z-index:80;width:min(620px,80vw);padding:14px;border:1px solid #dbe4ee;border-radius:12px;background:#fff;box-shadow:0 18px 42px rgba(23,45,75,.2)}.marketing-popover .form-stack{margin:0}.marketing-summary-grid{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin:9px 12px 12px;padding:10px 12px;border:1px solid #e6edf4;border-radius:9px;background:#f9fbfd}.marketing-summary-grid small{display:block;color:#3971d9;font-size:8px;font-weight:900}.marketing-summary-grid strong{display:block;margin-top:2px;overflow:hidden;color:#102449;font-size:10px;white-space:nowrap;text-overflow:ellipsis}
@media(max-width:1050px){.premium-lower-dashboard{grid-template-columns:1fr}.dashboard-feature-head,.dashboard-feature-row{grid-template-columns:minmax(120px,.9fr) minmax(160px,1.4fr) 76px 74px}}
@media(max-width:700px){.dashboard-feature-head{display:none}.dashboard-feature-row{grid-template-columns:1fr auto;gap:4px 10px}.dashboard-feature-row .feature-desc{grid-column:1/2}.dashboard-feature-row>.theme-state-pill{grid-column:2;grid-row:1}.feature-row-actions{grid-column:2;grid-row:2}.home-section-grid{grid-template-columns:1fr}.home-section-item,.home-section-item:nth-child(n){border:1px solid #e6edf4;border-radius:8px;margin-bottom:6px}.marketing-summary-grid{grid-template-columns:1fr}.marketing-popover{right:-8px;width:min(560px,90vw)}}
/* v43 premium-control refinements */
.feature-kebab{justify-self:end}.feature-kebab summary{width:30px}.dashboard-feature-head,.dashboard-feature-row{grid-template-columns:minmax(120px,.95fr) minmax(150px,1.35fr) 76px 38px}.home-section-switch-form{margin:0;display:flex;align-items:center}.premium-dashboard-marketing .dashboard-mini-heading{border-bottom:0}.marketing-popover{padding:18px}.marketing-form-clean{display:grid;gap:14px;margin:0}.marketing-field{display:grid;gap:6px}.marketing-field label{color:#263b5d;font-size:11px;font-weight:750}.marketing-field input,.marketing-field textarea{width:100%;box-sizing:border-box;border:1px solid #d6e0eb;border-radius:8px;background:#fff;color:#172c4e;font:inherit;font-size:12px;font-weight:500;line-height:1.45;padding:9px 10px;outline:none}.marketing-field textarea{min-height:88px;resize:vertical}.marketing-field input:focus,.marketing-field textarea:focus{border-color:#78a7f8;box-shadow:0 0 0 3px rgba(63,127,234,.11)}.marketing-form-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px}.marketing-form-actions{display:flex;justify-content:flex-end;padding-top:2px}.marketing-form-actions .button{min-width:180px}.premium-dashboard-marketing .marketing-editor>summary{white-space:nowrap}
@media(max-width:700px){.dashboard-feature-row{grid-template-columns:1fr auto}.feature-kebab{grid-column:2;grid-row:2}.marketing-form-grid{grid-template-columns:1fr}.marketing-form-actions .button{width:100%}}

/* v44: compact horizontal home-page Premium controls */
.home-section-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:9px 12px 12px}
.home-section-item,.home-section-item:nth-child(n){min-width:0;min-height:54px;border:1px solid #e6edf4!important;border-radius:9px!important}
.home-section-switch-form{flex:0 0 auto}
.home-section-switch-form .dashboard-switch{display:inline-block!important;flex:0 0 34px!important;width:34px!important;min-width:34px!important;max-width:34px!important;height:20px!important;min-height:20px!important;max-height:20px!important;padding:0!important;margin:0!important;border:0!important;border-radius:999px!important;line-height:0!important}
.home-section-switch-form .dashboard-switch>span{top:3px!important;left:3px!important;width:14px!important;height:14px!important}
.home-section-switch-form .dashboard-switch.on>span{left:17px!important}
.home-sections-all-form{margin:0}.home-sections-all-form .text-action{white-space:nowrap}
@media(max-width:900px){.home-section-grid{grid-template-columns:1fr}.home-section-item,.home-section-item:nth-child(n){margin:0}}

/* v48 — compact My Family Trees dashboard based on approved mockup */
.my-trees-v48{max-width:none!important;padding:0!important;background:#fff}.my-trees-v48 .workspace-hero{width:100%!important;max-width:none!important;min-height:220px!important;margin:0!important;padding:34px max(5vw,72px)!important;grid-template-columns:minmax(420px,1.15fr) minmax(360px,.9fr) 205px!important;border-radius:0!important;box-shadow:none!important;border:0!important;border-bottom:1px solid #e4edf4!important}.my-trees-v48 .workspace-hero-copy h1{font-size:3.1rem!important}.my-trees-v48 .workspace-tree-art{min-height:170px!important}.my-trees-v48 .modern-plan-card{align-self:center!important;min-height:150px!important;padding:22px!important;border-radius:16px!important}.my-trees-v48 .modern-plan-card strong{font-size:1.5rem!important}.my-trees-v48 .plan-summary-link{display:block;margin-top:14px;color:#1769ee;font-weight:800;text-decoration:none}.my-trees-v48>.downgrade-choice-card,.my-trees-v48>.tree-limit-card,.my-trees-v48>.family-invitations-panel,.my-trees-v48>.shared-tree-section,.my-trees-v48>.my-tree-grid,.my-trees-v48>.workspace-upgrade-strip,.my-trees-v48>.v48-tree-toolbar{width:min(1380px,calc(100% - 80px))!important;margin-left:auto!important;margin-right:auto!important}.v48-tree-toolbar{display:flex;align-items:center;gap:14px;margin-top:18px;margin-bottom:14px;position:relative;z-index:20}.v48-create-details{position:relative}.v48-create-details>summary{list-style:none}.v48-create-details>summary::-webkit-details-marker{display:none}.v48-create-trigger{display:inline-flex!important;align-items:center;gap:10px;padding:12px 20px!important;border-radius:10px!important;background:#2874f0!important;font-size:15px!important}.v48-create-trigger span{font-size:21px}.v48-create-panel{position:absolute!important;top:54px;left:0;z-index:80;width:min(1120px,82vw)!important;margin:0!important;box-shadow:0 18px 50px rgba(24,52,85,.2)!important}.v48-toolbar-spacer{flex:1}.v48-view-controls{display:flex;align-items:center;gap:0}.v48-view-button{width:42px;height:42px;border:1px solid #d8e3ee;background:#fff;color:#55708d;font-size:19px;cursor:pointer}.v48-view-button:first-child{border-radius:9px 0 0 9px}.v48-view-button:nth-child(2){border-left:0;border-radius:0 9px 9px 0}.v48-view-button.active{background:#f1f6ff;color:#1769ee}.v48-sort-label{display:flex;align-items:center;height:42px;margin-left:10px;padding:0 14px;border:1px solid #d8e3ee;border-radius:9px;color:#314e6e;font-size:13px;background:#fff}.my-trees-v48 .tree-limit-card{margin-top:14px!important}.my-trees-v48 .my-tree-grid{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;margin-top:0!important}.my-trees-v48 .my-tree-card,.my-trees-v48 .my-tree-grid.single-tree-grid .my-tree-card{display:grid!important;grid-template-columns:245px minmax(0,1fr)!important;min-height:174px!important;border:1px solid #dce7f1!important;border-radius:14px!important;box-shadow:0 7px 22px rgba(35,75,110,.045)!important;overflow:visible!important}.my-trees-v48 .my-tree-card-cover{min-height:174px!important;height:100%!important;border-radius:14px 0 0 14px!important;background:linear-gradient(135deg,#f0faf6,#f7fbff)!important;overflow:hidden!important}.my-trees-v48 .tree-card-art{display:none!important}.my-trees-v48 .tree-card-initial{width:66px!important;height:66px!important;top:50%!important;font-size:1.4rem!important}.my-trees-v48 .tree-status-pill{top:14px!important;right:14px!important}.my-trees-v48 .my-tree-card-body{display:grid!important;grid-template-columns:minmax(0,1fr) 270px!important;grid-template-rows:auto auto 1fr!important;column-gap:26px!important;padding:20px 24px!important}.my-trees-v48 .tree-card-title-row{grid-column:1;grid-row:1}.my-trees-v48 .my-tree-card-body>p{grid-column:1;grid-row:2;margin:3px 0 7px!important}.my-trees-v48 .my-tree-metrics{grid-column:1;grid-row:3;align-self:end;margin:4px 0 0!important;border:0!important}.my-trees-v48 .my-tree-metrics>span{padding:7px 18px!important;border-left:1px solid #e4edf4!important}.my-trees-v48 .my-tree-metrics>span:first-child{padding-left:0!important;border-left:0!important}.my-trees-v48 .my-tree-actions{grid-column:2;grid-row:1/4;align-self:center;display:grid!important;grid-template-columns:1fr 1fr auto!important;gap:8px!important;padding-left:24px;border-left:1px solid #e4edf4}.my-trees-v48 .my-tree-actions>.button:first-child{grid-column:1/3;min-width:0!important;width:100%;background:linear-gradient(135deg,#346aa6,#234e83)!important}.my-trees-v48 .my-tree-actions>.button{min-height:40px!important;padding:8px 11px!important}.my-trees-v48 .my-tree-actions>form{display:none!important}.v48-tree-more{position:relative;grid-column:3;grid-row:1/3;align-self:start}.v48-tree-more>summary{display:grid;place-items:center;width:42px;height:42px;border:1px solid #d8e3ee;border-radius:9px;background:#fff;color:#173a68;font-size:22px;cursor:pointer;list-style:none}.v48-tree-more>summary::-webkit-details-marker{display:none}.v48-tree-menu{position:absolute;right:0;top:47px;z-index:90;min-width:150px;padding:6px;border:1px solid #dbe4ee;border-radius:10px;background:#fff;box-shadow:0 14px 30px rgba(23,45,75,.18)}.my-trees-v48 .v48-tree-menu form{display:block!important}.v48-tree-menu button{width:100%;padding:9px;border:0;border-radius:7px;background:transparent;text-align:left;font-weight:750;color:#17345f;cursor:pointer}.v48-tree-menu button:hover{background:#f3f7fb}.v48-tree-menu button.danger{color:#c93442}.my-trees-v48 .workspace-upgrade-strip{margin-top:20px!important;border-radius:14px!important}.my-trees-v48 .trees-to-values-gap{height:28px!important}.my-trees-v48 .workspace-values{width:100%!important;max-width:none!important;margin:0!important;border-radius:0!important;padding-left:max(5vw,72px)!important;padding-right:max(5vw,72px)!important}.my-trees-v48 .locked-tree-message{grid-column:1}.my-trees-v48 .my-tree-card.archived .my-tree-actions,.my-trees-v48 .premium-locked-tree .my-tree-actions{grid-column:2;grid-row:1/4}
@media(max-width:1050px){.my-trees-v48 .workspace-hero{grid-template-columns:1fr 1fr!important;padding-left:28px!important;padding-right:28px!important}.my-trees-v48 .modern-plan-card{grid-column:1/-1!important;width:100%!important;min-height:auto!important}.my-trees-v48 .my-tree-card,.my-trees-v48 .my-tree-grid.single-tree-grid .my-tree-card{grid-template-columns:190px minmax(0,1fr)!important}.my-trees-v48 .my-tree-card-body{grid-template-columns:1fr!important}.my-trees-v48 .my-tree-actions{grid-column:1;grid-row:auto;display:flex!important;border-left:0;padding-left:0;margin-top:10px}.my-trees-v48 .my-tree-actions>.button:first-child{width:auto}.v48-tree-more{grid-column:auto;grid-row:auto}.my-trees-v48>.downgrade-choice-card,.my-trees-v48>.tree-limit-card,.my-trees-v48>.family-invitations-panel,.my-trees-v48>.shared-tree-section,.my-trees-v48>.my-tree-grid,.my-trees-v48>.workspace-upgrade-strip,.my-trees-v48>.v48-tree-toolbar{width:calc(100% - 40px)!important}}
@media(max-width:700px){.my-trees-v48 .workspace-hero{grid-template-columns:1fr!important}.my-trees-v48 .workspace-tree-art{display:none!important}.v48-sort-label{display:none}.my-trees-v48 .my-tree-card,.my-trees-v48 .my-tree-grid.single-tree-grid .my-tree-card{display:block!important}.my-trees-v48 .my-tree-card-cover{min-height:145px!important;border-radius:14px 14px 0 0!important}.my-trees-v48 .my-tree-card-body{display:block!important}.my-trees-v48 .my-tree-metrics{grid-template-columns:1fr!important}.my-trees-v48 .my-tree-metrics>span{border-left:0!important;border-top:1px solid #e4edf4!important}.my-trees-v48 .my-tree-metrics>span:first-child{border-top:0!important}.v48-create-panel{width:calc(100vw - 40px)!important}.my-trees-v48 .workspace-values{padding-left:20px!important;padding-right:20px!important}}

/* v49 archived-tree action and empty-menu fixes */
.my-trees-v48 .archived-tree-actions>form{display:block!important;margin:0!important}
.my-trees-v48 .archived-tree-actions{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important}
.my-trees-v48 .archived-tree-actions>form .button{display:inline-flex!important;min-height:40px!important;padding:8px 14px!important}
.my-trees-v48 .archived-tree-actions>form:first-child .button{background:var(--ft-navy)!important;border-color:var(--ft-navy)!important;color:#fff!important}
.my-trees-v48 .archived-tree-actions>form:last-child .button{background:#fff!important;color:#c93442!important;border-color:#efb8bf!important}

/* v50 Tree Explorer - compact management table */
.tree-explorer-page{max-width:1280px}.tree-explorer-search{display:flex;gap:10px;margin:20px 0 16px}.tree-explorer-search input{flex:1;height:44px;border-radius:10px;border:1px solid var(--border,#dbe4ee);padding:0 14px}.tree-explorer-table-card{padding:12px 20px 0;border-radius:16px;overflow:visible}.tree-explorer-modern-table{width:100%;border-collapse:collapse}.tree-explorer-modern-table thead th{background:#f5f8fc;color:#526581;text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:800;padding:12px 14px;text-align:left}.tree-explorer-modern-table td{padding:12px 14px;border-bottom:1px solid #e6edf5;vertical-align:middle}.tree-name-cell{display:flex;align-items:center;gap:12px;min-width:190px}.tree-name-cell strong{display:block;font-size:14px;color:#10264b}.tree-name-cell small{display:block;margin-top:3px;color:#71819a;font-size:12px;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e7efff;color:#3974ea;font-weight:800;font-size:16px;flex:0 0 auto}.tree-explorer-row:nth-child(4n+2) .tree-avatar{background:#eee9ff;color:#6548d9}.tree-explorer-row:nth-child(4n+3) .tree-avatar{background:#fff0e8;color:#a55b28}.tree-explorer-row:nth-child(4n+4) .tree-avatar{background:#e2f7f2;color:#168c73}.tree-people-count{display:inline-flex;gap:6px;align-items:center;color:#2768e9}.tree-people-count strong{color:#18335b}.tree-date{display:block;line-height:1.35;white-space:nowrap;color:#243b62}.tree-date .date-time{display:block;color:#667995;font-size:12px;margin-top:2px}.tree-status-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:700;white-space:nowrap}.tree-status-pill.active{background:#e7f8ed;color:#16814a}.tree-status-pill.archived{background:#fff5da;color:#986700}.status-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.tree-modern-actions{display:flex;align-items:center;gap:9px;white-space:nowrap}.tree-open-button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:1px solid #d5e1ef;border-radius:9px;color:#1767db;text-decoration:none;font-weight:700;background:#fff}.tree-open-button:hover{background:#f7faff}.tree-kebab{position:relative}.tree-kebab summary{list-style:none;width:38px;height:38px;display:grid;place-items:center;border:1px solid #d5e1ef;border-radius:9px;background:#fff;color:#174b93;font-size:21px;cursor:pointer}.tree-kebab summary::-webkit-details-marker{display:none}.tree-action-menu{position:absolute;right:0;top:44px;z-index:50;width:205px;padding:8px;background:#fff;border:1px solid #dce5ef;border-radius:11px;box-shadow:0 14px 32px rgba(30,54,88,.16)}.tree-action-menu a,.tree-action-menu button{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;background:transparent;border-radius:7px;color:#18335b;text-decoration:none;font:inherit;font-size:13px;text-align:left;cursor:pointer}.tree-action-menu a:hover,.tree-action-menu button:hover{background:#f5f8fc}.tree-action-menu form{margin:0}.tree-menu-divider{height:1px;background:#e5ebf2;margin:5px 2px}.tree-action-menu .tree-restore-action{color:#16814a}.tree-action-menu .tree-remove-action{color:#d82929}.tree-empty-state{text-align:center!important;color:#73839b;padding:38px!important}.tree-table-footer{min-height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;color:#71819a;font-size:12px}.tree-table-footer label{justify-self:end;display:flex;align-items:center;gap:8px}.tree-table-footer select{height:34px;border:1px solid #d5e1ef;border-radius:8px;background:#fff;padding:0 28px 0 10px}.tree-pagination{display:flex;gap:6px}.tree-page-button{min-width:32px;height:32px;border:1px solid #d5e1ef;border-radius:7px;background:#fff;color:#416087;cursor:pointer}.tree-page-button.active{background:#3f7df0;color:#fff;border-color:#3f7df0}.tree-page-button:disabled{opacity:.45;cursor:default}.tree-transfer-dialog{border:0;border-radius:16px;padding:0;box-shadow:0 24px 70px rgba(22,42,75,.25);width:min(520px,calc(100vw - 32px))}.tree-transfer-dialog::backdrop{background:rgba(20,35,60,.28)}.tree-transfer-dialog-card{position:relative;padding:24px;margin:0}.tree-transfer-dialog h2{margin:0 0 6px}.tree-dialog-close{position:absolute;right:16px;top:14px;border:0;background:transparent;font-size:25px;color:#61738d;cursor:pointer}.tree-transfer-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 14px}.tree-transfer-dialog label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#243b62}.tree-transfer-dialog input,.tree-transfer-dialog select{height:40px;border:1px solid #d7e1ec;border-radius:8px;padding:0 11px;background:#fff}.tree-transfer-dialog input[readonly]{background:#f5f7fa;color:#667995}.tree-transfer-warning{margin-top:14px;padding:11px 12px;border:1px solid #f0d691;background:#fff9e8;border-radius:8px;color:#8b6714;font-size:12px}.tree-dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}@media(max-width:1000px){.tree-explorer-table-card{overflow-x:auto}.tree-explorer-modern-table{min-width:980px}.tree-table-footer{min-width:940px}}

/* v50.1 modal/menu fixes */
.marketing-popover{position:relative}
.marketing-popover-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:1px solid #d7e0ed;border-radius:9px;background:#fff;color:#526782;font-size:22px;line-height:1;cursor:pointer;z-index:2}
.marketing-popover-close:hover{background:#f4f7fb;color:#102a52}
.marketing-form-actions{display:flex;justify-content:flex-end;gap:10px}
.v48-tree-menu a{display:block;padding:10px 12px;text-decoration:none;color:inherit;border-radius:8px}
.v48-tree-menu a:hover{background:#f4f7fb}

/* v50.2: Keep Premium Marketing editor as an overlay so opening it never
   participates in dashboard grid sizing or moves neighbouring panels. */
.premium-dashboard-marketing{position:relative;min-width:0}
.premium-dashboard-marketing .dashboard-mini-heading{position:relative}
.premium-dashboard-marketing .marketing-editor{position:static;justify-self:end;min-width:0}
.premium-dashboard-marketing .marketing-editor>summary{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.premium-dashboard-marketing .marketing-popover{position:absolute!important;top:58px;right:14px;left:auto;z-index:100;width:min(620px,calc(100% - 28px));max-width:calc(100% - 28px);box-sizing:border-box;margin:0}
@media(max-width:700px){.premium-dashboard-marketing .marketing-popover{top:58px;right:8px;width:calc(100% - 16px);max-width:calc(100% - 16px)}}

/* v50 My Family Trees action/footer refinement */
@media (min-width:1051px){
  .my-trees-v48 .my-tree-actions{grid-template-columns:minmax(130px,1.45fr) minmax(82px,.75fr) 42px!important;align-items:start!important;}
  .my-trees-v48 .my-tree-actions>.button:first-child{grid-column:1!important;grid-row:1!important;width:100%!important;}
  .my-trees-v48 .my-tree-actions>.button.secondary{grid-column:2!important;grid-row:1!important;width:100%!important;}
  .my-trees-v48 .v48-tree-more{grid-column:3!important;grid-row:1!important;align-self:start!important;}
}
.my-trees-v48 .trees-to-values-gap{height:48px!important;}
.my-trees-v48 .workspace-values{width:min(1380px,calc(100% - 80px))!important;max-width:1380px!important;margin:0 auto 24px!important;border:1px solid #d7efe5!important;border-radius:12px!important;padding:14px 28px!important;}
@media(max-width:1050px){.my-trees-v48 .workspace-values{width:calc(100% - 40px)!important;}}
@media(max-width:700px){.my-trees-v48 .workspace-values{width:calc(100% - 24px)!important;padding:14px 20px!important;}.my-trees-v48 .trees-to-values-gap{height:32px!important;}}

/* v51 — My Family Trees menu visibility + footer spacing refinements */
.my-trees-v48 .my-tree-card,
.my-trees-v48 .my-tree-card-body,
.my-trees-v48 .my-tree-actions,
.my-trees-v48 .v48-tree-more { overflow: visible !important; }
.my-trees-v48 .my-tree-card { position: relative; z-index: 1; }
.my-trees-v48 .my-tree-card:has(.v48-tree-more[open]) { z-index: 120; }
.my-trees-v48 .v48-tree-more[open] { z-index: 130; }
.my-trees-v48 .v48-tree-menu {
    z-index: 140 !important;
    min-width: 190px !important;
    padding: 7px !important;
    max-height: none !important;
    overflow: visible !important;
}
.my-trees-v48 .v48-tree-menu a,
.my-trees-v48 .v48-tree-menu button { white-space: nowrap; }
.my-trees-v48 .trees-to-values-gap { height: 72px !important; }
.my-trees-v48 .workspace-values {
    width: min(1460px, calc(100% - 48px)) !important;
    max-width: 1460px !important;
    margin: 0 auto 24px !important;
}
@media(max-width:1050px){
    .my-trees-v48 .workspace-values{width:calc(100% - 32px)!important;}
    .my-trees-v48 .trees-to-values-gap{height:56px!important;}
}
@media(max-width:700px){
    .my-trees-v48 .workspace-values{width:calc(100% - 20px)!important;}
    .my-trees-v48 .trees-to-values-gap{height:40px!important;}
}

/* v53 — modal/dropdown stacking consistency on Family Trees.
   The create-tree panel must always render above tree cards/action menus. */
.my-trees-v48 .v48-tree-toolbar:has(.v48-create-details[open]) {
    z-index: 1000 !important;
}
.my-trees-v48 .v48-create-details[open] {
    z-index: 1010 !important;
}
.my-trees-v48 .v48-create-details[open] .v48-create-panel {
    z-index: 1020 !important;
}
/* While Create Tree is open, no tree action menu should compete with it. */
.my-trees-v48:has(.v48-create-details[open]) .my-tree-card {
    z-index: 1 !important;
}

/* v54 — full-width bottom footer + 25% more compact authenticated header */
.global-topbar{
    min-height:51px!important;
    padding:5px 14px!important;
    gap:12px!important;
}
.global-topbar .brand-logo{
    width:29px!important;
    height:29px!important;
    flex-basis:29px!important;
}
.global-topbar .brand{font-size:1.05rem!important;}
.global-topbar .global-nav-actions .button,
.global-topbar .global-nav-logout .button{
    min-height:32px!important;
    padding:6px 11px!important;
    border-radius:9px!important;
}
.global-topbar .notification-bell{
    width:34px!important;
    min-width:34px!important;
    height:32px!important;
    min-height:32px!important;
    padding:0!important;
}
.global-topbar .nav-current-user{padding:3px 7px!important;border-radius:9px!important;}
.global-topbar .nav-current-user-avatar{width:24px!important;height:24px!important;}
.global-topbar .global-nav-search input{min-height:34px!important;height:34px!important;}
.global-topbar .nav-tree-switcher select{min-height:32px!important;height:32px!important;}

/* Make the Family Trees page fill the viewport so its values strip sits at the
   true bottom on short pages, while naturally following content on long pages. */
body:has(.my-trees-v48){min-height:100vh;display:flex;flex-direction:column;}
body:has(.my-trees-v48)>.my-trees-v48{flex:1;display:flex;flex-direction:column;min-height:0;}
.my-trees-v48 .workspace-values{
    width:100%!important;
    max-width:none!important;
    margin-top:auto!important;
    margin-right:0!important;
    margin-bottom:0!important;
    margin-left:0!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
    padding-left:max(5vw,72px)!important;
    padding-right:max(5vw,72px)!important;
}
.my-trees-v48 .trees-to-values-gap{height:84px!important;min-height:84px!important;}
@media(max-width:1050px){
    .my-trees-v48 .workspace-values{width:100%!important;padding-left:28px!important;padding-right:28px!important;}
    .my-trees-v48 .trees-to-values-gap{height:64px!important;min-height:64px!important;}
}
@media(max-width:700px){
    .global-topbar{min-height:48px!important;padding:4px 10px!important;}
    .my-trees-v48 .workspace-values{width:100%!important;padding-left:20px!important;padding-right:20px!important;}
    .my-trees-v48 .trees-to-values-gap{height:48px!important;min-height:48px!important;}
}
\n\n/* v55 — Family Trees hero/limit refinement.\n   Remove obsolete view/sort controls in markup, pull the limit notice directly\n   beneath the green workspace hero, and make that hero roughly 30% shorter. */\n.my-trees-v48 .workspace-hero{\n    min-height:154px!important;\n    padding-top:20px!important;\n    padding-bottom:20px!important;\n}\n.my-trees-v48 .workspace-hero-copy h1{\n    margin-top:2px!important;\n    margin-bottom:6px!important;\n    font-size:2.65rem!important;\n}\n.my-trees-v48 .workspace-hero-copy p{\n    font-size:14px!important;\n    line-height:1.45!important;\n}\n.my-trees-v48 .workspace-tree-art{min-height:118px!important;}\n.my-trees-v48 .workspace-tree-picture{transform:scale(.78);transform-origin:center;}\n.my-trees-v48 .workspace-tree-art blockquote{margin-top:-8px!important;font-size:14px!important;}\n.my-trees-v48 .modern-plan-card{\n    min-height:108px!important;\n    padding:14px!important;\n}\n.my-trees-v48 .modern-plan-card strong{font-size:1.22rem!important;}\n.my-trees-v48 .modern-plan-card .plan-card-icon{width:36px!important;height:36px!important;}\n.my-trees-v48 .plan-summary-link{margin-top:6px!important;}\n/* Limit notice sits immediately below the hero instead of inheriting toolbar spacing. */\n.my-trees-v48>.tree-limit-card{\n    margin-top:0!important;\n    margin-bottom:16px!important;\n    border-radius:0 0 14px 14px!important;\n}\n/* When the create toolbar exists, keep it compact now that view/sort controls are gone. */\n.my-trees-v48 .v48-tree-toolbar{margin-top:14px!important;margin-bottom:14px!important;}\n@media(max-width:1050px){\n    .my-trees-v48 .workspace-hero{min-height:auto!important;padding-top:18px!important;padding-bottom:18px!important;}\n}\n@media(max-width:700px){\n    .my-trees-v48 .workspace-hero-copy h1{font-size:2.15rem!important;}\n}\n\n\n/* v56 — remove hero-to-limit dead space and add empty-tree guidance. */
.my-trees-v48{
    padding-top:0!important;
}
.my-trees-v48>.workspace-hero{
    margin-bottom:0!important;
}
.my-trees-v48>.tree-limit-card{
    margin-top:0!important;
    transform:none!important;
}
/* The page-level .page rule adds top padding; the hero is full-bleed and the next
   direct child must not inherit a toolbar-sized spacer. */
.my-trees-v48>.workspace-hero + .tree-limit-card{
    margin-top:0!important;
}
.my-trees-v48 .empty-tree-guidance{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:14px;
    padding:14px 16px;
    border:1px solid #cfe2f5;
    border-radius:12px;
    background:#f7fbff;
}
.my-trees-v48 .empty-tree-guidance-icon{
    flex:0 0 30px;
    width:30px;
    height:30px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e6f0ff;
    color:#356bc4;
    font-weight:800;
}
.my-trees-v48 .empty-tree-guidance-copy{
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
    gap:2px;
}
.my-trees-v48 .empty-tree-guidance-copy span{color:#5d7087;font-size:13px;}
.my-trees-v48 .empty-tree-guidance-actions{display:flex;gap:8px;flex-wrap:wrap;}
@media(max-width:700px){
    .my-trees-v48 .empty-tree-guidance{align-items:flex-start;flex-wrap:wrap;}
    .my-trees-v48 .empty-tree-guidance-actions{width:100%;padding-left:42px;}
}


/* v57 — compact empty-tree notice and neutral Open Tree action. */
.my-trees-v48 .empty-tree-guidance{
    grid-column:1!important;
    display:flex!important;
    width:min(540px,100%)!important;
    min-height:0!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    margin:10px 0 0!important;
    padding:10px 12px!important;
    border:1px solid #cfe2f5!important;
    border-radius:10px!important;
    background:#f7fbff!important;
}
.my-trees-v48 .empty-tree-guidance-icon{flex:0 0 26px!important;width:26px!important;height:26px!important;}
.my-trees-v48 .empty-tree-guidance-copy{gap:1px!important;}
.my-trees-v48 .empty-tree-guidance-copy strong{font-size:13px!important;}
.my-trees-v48 .empty-tree-guidance-copy span{font-size:12px!important;}
/* Match Open Tree to the neutral Import treatment instead of the filled primary style. */
.my-trees-v48 .my-tree-actions>.button:first-child{
    background:#fff!important;
    color:#173a68!important;
    border:1px solid #d8e3ee!important;
    box-shadow:none!important;
}
.my-trees-v48 .my-tree-actions>.button:first-child:hover{background:#f7f9fc!important;}

/* v58 — empty-tree notice in the upper card gap; restore stable action row. */
.my-trees-v48 .my-tree-card-body{position:relative!important;}
.my-trees-v48 .empty-tree-guidance{
    position:absolute!important;
    top:20px!important;
    right:300px!important;
    z-index:2!important;
    display:block!important;
    width:min(430px,calc(100% - 650px))!important;
    margin:0!important;
    padding:9px 12px!important;
    min-height:0!important;
    border:1px solid #cfe2f5!important;
    border-radius:9px!important;
    background:#f7fbff!important;
}
.my-trees-v48 .empty-tree-guidance:before{content:none!important;display:none!important;}
.my-trees-v48 .empty-tree-guidance-icon{display:none!important;}
.my-trees-v48 .empty-tree-guidance-copy{display:flex!important;flex-direction:column!important;gap:1px!important;}
.my-trees-v48 .empty-tree-guidance-copy strong{font-size:13px!important;line-height:1.25!important;}
.my-trees-v48 .empty-tree-guidance-copy span{font-size:12px!important;line-height:1.3!important;}

/* Open Tree, Import and kebab stay as three independent controls on one row. */
.my-trees-v48 .my-tree-actions{grid-template-columns:auto auto 42px!important;align-items:center!important;justify-content:end!important;}
.my-trees-v48 .my-tree-actions>.button:first-child{
    grid-column:1!important;
    grid-row:1!important;
    width:auto!important;
    min-width:116px!important;
    background:#fff!important;
    color:#173a68!important;
    border:1px solid #d8e3ee!important;
    box-shadow:none!important;
}
.my-trees-v48 .my-tree-actions>.button:nth-child(2){grid-column:2!important;grid-row:1!important;width:auto!important;}
.my-trees-v48 .v48-tree-more{grid-column:3!important;grid-row:1!important;align-self:center!important;}

@media(max-width:1050px){
    .my-trees-v48 .empty-tree-guidance{
        position:static!important;
        width:min(540px,100%)!important;
        margin:10px 0 0!important;
    }
    .my-trees-v48 .my-tree-actions{display:flex!important;justify-content:flex-start!important;}
}

/* v59 — polished Family Trees page based on approved dashboard mockup. */
.my-trees-v48{background:#fff;}
.my-trees-v48 .workspace-hero{
    width:calc(100% - 72px)!important;
    margin:28px 36px 22px!important;
    padding:28px 46px!important;
    min-height:230px!important;
    border-radius:22px!important;
    background:linear-gradient(110deg,#f1fcf7 0%,#f7fcff 48%,#effbf6 100%)!important;
    border:1px solid #e3f2eb!important;
    box-shadow:0 12px 34px rgba(29,72,104,.05)!important;
}
.my-trees-v48 .workspace-hero-copy h1{font-size:3rem!important;line-height:1.05!important;margin:8px 0 8px!important;}
.my-trees-v48 .workspace-hero-copy p{font-size:16px!important;line-height:1.55!important;max-width:560px!important;}
.my-trees-v48 .workspace-tree-art{min-height:165px!important;}
.my-trees-v48 .workspace-tree-picture{transform:scale(.95)!important;}
.my-trees-v48 .workspace-tree-art blockquote{font-size:18px!important;line-height:1.45!important;}
.my-trees-v48 .modern-plan-card{min-height:170px!important;padding:22px!important;border-radius:18px!important;background:#fff!important;box-shadow:0 10px 28px rgba(29,72,104,.08)!important;}
.my-trees-v48 .modern-plan-card strong{font-size:1.55rem!important;}
.my-trees-v48 .modern-plan-card .plan-card-icon{width:48px!important;height:48px!important;border-radius:13px!important;}

.my-trees-v48>.tree-limit-card{
    width:calc(100% - 136px)!important;
    margin:0 68px 24px!important;
    padding:14px 18px!important;
    border-radius:14px!important;
    background:#fff9f9!important;
    border:1px solid #f4c9cc!important;
    box-shadow:none!important;
}
.my-trees-v48 .limit-card-message{gap:14px!important;}
.my-trees-v48 .limit-info-icon{width:34px!important;height:34px!important;flex:0 0 34px!important;background:#e9364b!important;color:#fff!important;}
.my-trees-v48 .modern-limit-card p{margin-top:2px!important;}

.my-trees-v48 .my-tree-grid,
.my-trees-v48 .workspace-upgrade-strip{width:calc(100% - 136px)!important;margin-left:68px!important;margin-right:68px!important;}
.my-trees-v48 .my-tree-card{
    border:1px solid #dce8f0!important;
    border-radius:18px!important;
    box-shadow:0 10px 28px rgba(29,72,104,.06)!important;
    overflow:visible!important;
    min-height:220px!important;
}
.my-trees-v48 .my-tree-card-cover{border-radius:18px 0 0 18px!important;background:linear-gradient(145deg,#f0fbf7,#f6fbff)!important;}
.my-trees-v48 .my-tree-card-body{padding:30px 32px!important;}
.my-trees-v48 .tree-display-name{font-size:1.55rem!important;}
.my-trees-v48 .my-tree-metrics{margin-top:22px!important;max-width:650px!important;}
.my-trees-v48 .empty-tree-guidance{
    top:24px!important;right:300px!important;width:min(500px,calc(100% - 650px))!important;
    padding:12px 15px!important;border-radius:12px!important;background:#f6faff!important;border-color:#c9ddf4!important;
}
.my-trees-v48 .empty-tree-guidance-copy strong{font-size:14px!important;}
.my-trees-v48 .empty-tree-guidance-copy span{font-size:13px!important;}
.my-trees-v48 .my-tree-actions{gap:10px!important;right:28px!important;}
.my-trees-v48 .my-tree-actions>.button{min-height:42px!important;padding:9px 16px!important;border-radius:10px!important;font-weight:700!important;}
.my-trees-v48 .my-tree-actions>.button:first-child{min-width:128px!important;}
.my-trees-v48 .v48-tree-more>summary{width:42px!important;height:42px!important;border-radius:10px!important;}
.my-trees-v48 .v48-tree-menu{border-radius:12px!important;box-shadow:0 14px 30px rgba(22,53,84,.14)!important;}

.my-trees-v48 .workspace-upgrade-strip{
    margin-top:22px!important;padding:16px 20px!important;border-radius:14px!important;background:#fbfaff!important;
    border:1px dashed #7f6cff!important;
}
.my-trees-v48 .workspace-upgrade-strip .button{border-radius:10px!important;padding:10px 18px!important;}
.my-trees-v48 .trees-to-values-gap{height:38px!important;min-height:38px!important;}
.my-trees-v48 .workspace-values{
    min-height:78px!important;padding-top:15px!important;padding-bottom:15px!important;
    background:linear-gradient(90deg,#effbf6,#f6fffb)!important;border-top:1px solid #d9eee5!important;
}

@media(max-width:1050px){
 .my-trees-v48 .workspace-hero{width:calc(100% - 32px)!important;margin:16px!important;padding:24px!important;}
 .my-trees-v48>.tree-limit-card,.my-trees-v48 .my-tree-grid,.my-trees-v48 .workspace-upgrade-strip{width:calc(100% - 32px)!important;margin-left:16px!important;margin-right:16px!important;}
 .my-trees-v48 .empty-tree-guidance{position:static!important;width:100%!important;margin-top:14px!important;}
}
@media(max-width:700px){
 .my-trees-v48 .workspace-hero{grid-template-columns:1fr!important;margin:10px!important;width:calc(100% - 20px)!important;padding:20px!important;}
 .my-trees-v48 .workspace-hero-copy h1{font-size:2.3rem!important;}
 .my-trees-v48>.tree-limit-card,.my-trees-v48 .my-tree-grid,.my-trees-v48 .workspace-upgrade-strip{width:calc(100% - 20px)!important;margin-left:10px!important;margin-right:10px!important;}
}

/* v60 — compact centered Family Trees content region.
   Keep the approved v59 visual design, but constrain the alert/tree/upgrade
   stack to the earlier compact dashboard width on large screens. */
@media (min-width:1051px){
    .my-trees-v48>.tree-limit-card,
    .my-trees-v48>.family-invitations-panel,
    .my-trees-v48>.shared-tree-section,
    .my-trees-v48>.my-tree-grid,
    .my-trees-v48>.workspace-upgrade-strip,
    .my-trees-v48>.v48-tree-toolbar{
        width:min(1180px,calc(100% - 136px))!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
}

/* v61 — Family Trees empty-state alignment refinement.
   Keep the approved compact v59/v60 design while giving the empty-state
   message and action controls their own stable right-hand column. */
@media (min-width:1051px){
  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance){
    grid-template-columns:minmax(0,1fr) 430px!important;
    grid-template-rows:auto auto 1fr!important;
    column-gap:30px!important;
    align-items:start!important;
  }
  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) .empty-tree-guidance{
    position:static!important;
    grid-column:2!important;
    grid-row:1 / span 2!important;
    align-self:start!important;
    justify-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:12px 15px!important;
    box-sizing:border-box!important;
  }
  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) .my-tree-actions{
    position:static!important;
    grid-column:2!important;
    grid-row:3!important;
    align-self:end!important;
    justify-self:end!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    width:auto!important;
    margin:14px 0 0!important;
    padding:0!important;
    border-left:0!important;
  }
  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) .my-tree-actions>.button{
    width:auto!important;
    min-width:0!important;
    min-height:42px!important;
    padding:9px 16px!important;
    background:#fff!important;
    color:#173a68!important;
    border:1px solid #d8e3ee!important;
    box-shadow:none!important;
  }
  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) .v48-tree-more{
    grid-column:auto!important;
    grid-row:auto!important;
    align-self:center!important;
  }
}

/* v64: complete large-family layout for Family Branches "All" mode */
.complete-family-stage { position: relative; min-width: max-content; padding: 18px 24px 30px; }
.complete-family-svg { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.complete-family-generation { position: relative; z-index: 1; margin: 0 0 54px; }
.complete-family-generation:last-child { margin-bottom: 0; }
.complete-family-row { display: flex; justify-content: center; align-items: flex-start; gap: 34px; min-width: max-content; }
.complete-family-unit { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.complete-family-tree { overflow-x: auto; padding-bottom: 12px; }
.complete-family-tree .branch-section-label { text-align: center; margin-bottom: 12px; }

/* v66: aligned relationship routing for large Sticky Notes family trees */
.sticky-tree-stage { gap: 96px; }
.sticky-family-bus-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Family Infographic theme */
.infographic-tree{min-width:1100px;background:#fff;padding:22px 28px 48px;color:#14294b;box-sizing:border-box}
.infographic-tree-header{text-align:center;margin:0 0 28px}.infographic-tree-header h2{margin:0;font-size:1.65rem;color:#102b55}.infographic-tree-subtitle{margin-top:5px;color:#587098;font-size:.9rem}
.infographic-tree-stage{position:relative;display:flex;flex-direction:column;gap:66px;min-width:1040px;padding:10px 12px 28px}.infographic-tree-svg{z-index:1;pointer-events:none;overflow:visible}
.infographic-generation{position:relative;z-index:2;display:grid;grid-template-columns:145px minmax(max-content,1fr);align-items:center;gap:18px}.infographic-generation-label{align-self:center;border:1px solid #cfe0f7;background:#eef5ff;border-radius:9px;padding:10px 11px;color:#173c72;line-height:1.2}.infographic-generation-label strong,.infographic-generation-label span{display:block}.infographic-generation-label strong{font-size:.74rem}.infographic-generation-label span{font-size:.72rem;margin-top:3px}
.infographic-generation-row{display:flex;align-items:center;justify-content:center;gap:28px;min-width:max-content}.infographic-family-unit{display:flex;align-items:center;gap:8px;position:relative}
.infographic-person{width:142px;min-height:112px;display:grid;grid-template-columns:48px 1fr;align-items:start;gap:9px;text-align:left;border:1.5px solid #8dbcf3;border-radius:10px;background:#fff;padding:10px;box-shadow:0 5px 14px rgba(24,57,98,.08);color:#14294b;cursor:pointer;position:relative;z-index:3}.infographic-person:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(24,57,98,.13)}.infographic-person.focused{outline:3px solid rgba(65,132,235,.18);border-color:#347fe8}.infographic-person.selected{box-shadow:0 0 0 3px rgba(52,127,232,.13),0 8px 20px rgba(24,57,98,.12)}
.infographic-avatar{width:46px;height:46px;border-radius:9px;background:#eaf3ff;color:#286fd3;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.72rem;overflow:hidden}.infographic-avatar img{width:100%;height:100%;object-fit:cover}.infographic-person-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.infographic-name{font-size:.76rem;line-height:1.15;color:#102b55}.infographic-meta{font-size:.63rem;color:#60789a;line-height:1.2}.infographic-relation{width:max-content;max-width:100%;font-size:.58rem;color:#355b8e;background:#f1f6fc;border-radius:999px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.infographic-accent-1{border-color:#efb3d4}.infographic-accent-1 .infographic-avatar{background:#fff0f7;color:#b44583}.infographic-accent-2{border-color:#b7d98b}.infographic-accent-2 .infographic-avatar{background:#f1fae8;color:#558f24}.infographic-accent-3{border-color:#ecd67b}.infographic-accent-3 .infographic-avatar{background:#fff9dc;color:#9a7811}.infographic-accent-4{border-color:#a9d8ca}.infographic-accent-4 .infographic-avatar{background:#eaf9f4;color:#287c66}
.infographic-tree .complete-family-line,.infographic-tree .complete-partner-line{stroke:#233c5c;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
@media(max-width:900px){.infographic-tree{min-width:980px}.infographic-tree-stage{min-width:930px}.infographic-generation{grid-template-columns:120px minmax(max-content,1fr)}.infographic-person{width:132px}}
@media print{
  /* Keep the infographic's screen geometry intact. JS freezes the exact pixel
     width before print and the shared tree canvas scales the finished diagram.
     Reflowing these rows in print preview makes SVG relationship coordinates stale. */
  .infographic-tree{padding:10px;min-width:1100px}
  .infographic-tree-stage{min-width:1040px}
  .infographic-generation-row,.complete-family-row{min-width:max-content!important}
  .complete-family-stage,.sticky-tree-stage{min-width:max-content!important}
  .infographic-person{box-shadow:none}
  .infographic-tree .complete-family-line,.infographic-tree .complete-partner-line{stroke:#111}
}


/* v68 — shared full-screen viewer for every Family Tree theme */
.tree-fullscreen-controls{
    position:sticky;top:12px;right:12px;z-index:120;
    display:flex;justify-content:flex-end;pointer-events:none;
    height:0;overflow:visible;padding-right:12px;
}
.tree-fullscreen-controls button{pointer-events:auto}
.tree-fullscreen-zoom-controls{display:flex;align-items:center;gap:6px;padding:6px;border:1px solid #d8e3ee;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(23,45,75,.16)}
.tree-fullscreen-zoom-controls[hidden]{display:none!important}
.tree-viewer-button{display:grid;place-items:center;min-width:42px;height:42px;padding:0 11px;border:1px solid #d8e3ee;border-radius:9px;background:#fff;color:#173a68;font:800 19px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;box-shadow:0 3px 10px rgba(23,45,75,.08)}
.tree-viewer-button:hover{background:#f4f8fc;border-color:#b8cbe0}
.tree-viewer-button:focus-visible{outline:3px solid rgba(40,116,240,.25);outline-offset:2px}
.tree-fit-button,.tree-zoom-value{font-size:13px;min-width:54px}
.tree-exit-button{font-size:27px;font-weight:500}
.tree-maximize-button{position:absolute;right:0;top:0;font-size:22px;background:#fff}
.tree-surface.tree-viewer-active{background:#f8fafc;border:0;border-radius:0;box-shadow:none;overflow:auto}
.tree-surface:fullscreen{width:100%;height:100%;max-width:none;max-height:none;padding:0;background:#f8fafc}
.tree-surface:fullscreen .tree-status{display:none}
.tree-surface:fullscreen .tree-canvas{margin:0 auto;transform-origin:top center}
body.tree-viewer-fallback-open{overflow:hidden}
body.tree-viewer-fallback-open .tree-surface.tree-viewer-active{position:fixed;inset:0;z-index:99999;width:100vw;height:100vh;max-width:none;max-height:none;border-radius:0;margin:0}
body.tree-viewer-fallback-open .tree-surface.tree-viewer-active .tree-status{display:none}
@media(max-width:700px){.tree-fullscreen-zoom-controls{gap:3px;padding:4px}.tree-viewer-button{min-width:40px;height:40px;padding:0 8px}.tree-fit-button{min-width:46px}}
@media print{.tree-fullscreen-controls{display:none!important}}

/* v71 — print relationship alignment: preserve tree geometry while print scaling. */
@media print{
  body.printing-tree .complete-family-svg,
  body.printing-tree .sticky-tree-svg{overflow:visible!important}
}


/* v72: Family Book uses the same Family Infographic visual language as the default tree. */
.book-infographic-tree-page .infographic-tree{min-width:1040px;padding:18px 20px 32px;background:#fff;}
.book-infographic-tree-page .sticky-person-note.infographic-person{transform:none!important;width:142px;min-height:112px;border-radius:10px;padding:10px;display:grid;grid-template-columns:48px 1fr;gap:9px;box-shadow:0 5px 14px rgba(24,57,98,.08);}
.book-infographic-tree-page .sticky-pin{display:none;}
.book-infographic-tree-page .infographic-generation{display:grid;grid-template-columns:145px minmax(max-content,1fr);gap:18px;align-items:center;}
.book-infographic-tree-page .infographic-generation-row{justify-content:center;gap:28px;}
.book-infographic-tree-page .infographic-family-unit{gap:8px;}
@media print{.book-infographic-tree-page .infographic-tree{transform-origin:top left;box-shadow:none}.book-infographic-tree-page .sticky-person-note.infographic-person{break-inside:avoid;box-shadow:none}}

/* Admin user management: keep all editable field values regular-weight. */
.admin-management-grid input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.admin-management-grid select,
.admin-management-grid textarea {
  font-weight: 400 !important;
}
.admin-management-grid input::placeholder,
.admin-management-grid textarea::placeholder {
  font-weight: 400 !important;
}

/* v74 — application-wide form values use regular weight. Labels/buttons retain hierarchy. */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select,
textarea {
  font-weight: 400 !important;
}
input::placeholder,
textarea::placeholder {
  font-weight: 400 !important;
}
select option { font-weight: 400; }

/* v74 — compact Family Trees workspace hero/header panel. */
.my-trees-v48 > .workspace-hero {
  min-height: 150px !important;
  padding: 18px max(5vw,72px) !important;
  grid-template-columns: minmax(390px,1.15fr) minmax(330px,.9fr) 190px !important;
  gap: 18px !important;
}
.my-trees-v48 .workspace-hero-copy h1 {
  font-size: 2.55rem !important;
  margin: 5px 0 7px !important;
}
.my-trees-v48 .workspace-hero-copy p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.my-trees-v48 .workspace-tree-art {
  min-height: 105px !important;
}
.my-trees-v48 .workspace-tree-picture {
  transform: scale(.70) !important;
  transform-origin: center !important;
}
.my-trees-v48 .workspace-tree-art blockquote {
  margin-top: -12px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}
.my-trees-v48 .modern-plan-card {
  min-height: 104px !important;
  padding: 13px 14px !important;
}
.my-trees-v48 .modern-plan-card strong { font-size: 1.18rem !important; }
.my-trees-v48 .modern-plan-card .plan-card-icon { width: 34px !important; height: 34px !important; }
.my-trees-v48 .plan-summary-link { margin-top: 5px !important; }
@media(max-width:1050px){
  .my-trees-v48 > .workspace-hero{min-height:auto!important;padding:16px 28px!important;}
}
@media(max-width:760px){
  .my-trees-v48 > .workspace-hero{padding:18px!important;}
  .my-trees-v48 .workspace-hero-copy h1{font-size:2.1rem!important;}
}


/* v76 — tighter Family Trees workspace hero. */
.my-trees-v48 > .workspace-hero{
  min-height:112px!important;
  padding:12px max(5vw,72px)!important;
  grid-template-columns:minmax(390px,1.2fr) minmax(280px,.8fr) 175px!important;
  gap:14px!important;
}
.my-trees-v48 .workspace-hero-copy h1{font-size:2.25rem!important;margin:2px 0 4px!important;}
.my-trees-v48 .workspace-hero-copy p{font-size:13px!important;line-height:1.32!important;max-width:540px!important;}
.my-trees-v48 .workspace-tree-art{min-height:78px!important;}
.my-trees-v48 .workspace-tree-picture{transform:scale(.53)!important;}
.my-trees-v48 .workspace-tree-art blockquote{margin-top:-20px!important;font-size:12px!important;line-height:1.25!important;}
.my-trees-v48 .modern-plan-card{min-height:82px!important;padding:10px 12px!important;grid-template-columns:32px 1fr!important;gap:9px!important;}
.my-trees-v48 .modern-plan-card .plan-card-icon{width:30px!important;height:30px!important;font-size:17px!important;}
.my-trees-v48 .modern-plan-card strong{font-size:1.05rem!important;}
.my-trees-v48 .modern-plan-card span,.my-trees-v48 .plan-summary-link{font-size:11px!important;}
@media(max-width:1050px){.my-trees-v48 > .workspace-hero{min-height:auto!important;padding:12px 24px!important;}}
@media(max-width:760px){.my-trees-v48 > .workspace-hero{padding:14px 18px!important;}.my-trees-v48 .workspace-hero-copy h1{font-size:1.95rem!important;}}

/* v76 — Family Book infographic is always clipped and fitted as one unit. */
.book-infographic-tree-page{overflow:hidden!important;}
.book-infographic-tree-page .book-sticky-tree-viewport{width:100%!important;max-width:100%!important;overflow:hidden!important;}
.book-infographic-tree-page .book-sticky-tree-canvas{max-width:100%!important;}
@media print{
  .book-infographic-tree-page{overflow:hidden!important;}
  .book-infographic-tree-page .book-sticky-tree-viewport{overflow:hidden!important;max-width:100%!important;}
  .book-infographic-tree-page .book-sticky-tree-canvas{max-width:100%!important;}
}

/* v79 Family Map */
.family-map-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;background:#fff;border:1px solid #dbe6f2;border-radius:18px;padding:18px;box-shadow:0 12px 34px rgba(20,45,75,.07)}
.family-map-main>header{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:12px}.family-map-main>header h2{margin:0;font-family:Georgia,serif;font-size:30px}.family-map-main>header p{margin:4px 0;color:#536b87}.family-map-count{color:#536b87;white-space:nowrap}
.family-map-stage{position:relative;min-height:560px;border-radius:16px;overflow:hidden;background:linear-gradient(#bfe3f4,#d8eff8 48%,#acd8ec);border:1px solid #b8d9e8}.family-map-world{position:absolute;inset:0;background:radial-gradient(ellipse at 23% 34%,#c7dfad 0 13%,transparent 14%),radial-gradient(ellipse at 31% 70%,#b8d39c 0 10%,transparent 11%),radial-gradient(ellipse at 52% 30%,#c4dda8 0 7%,transparent 8%),radial-gradient(ellipse at 55% 52%,#bfd7a2 0 12%,transparent 13%),radial-gradient(ellipse at 72% 37%,#c6dda8 0 18%,transparent 19%),radial-gradient(ellipse at 84% 72%,#bdd7a0 0 7%,transparent 8%)}.continent{position:absolute;color:#54747a;font-family:Georgia,serif;font-size:15px}.north-america{left:18%;top:31%}.south-america{left:29%;top:69%}.europe{left:50%;top:28%}.africa{left:52%;top:53%}.asia{left:72%;top:36%}.australia{left:82%;top:72%}
.family-map-pin-layer{position:absolute;inset:0}.family-map-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;border:1px solid #c8d9ea;background:#fff;border-radius:10px;padding:5px 8px 5px 5px;box-shadow:0 5px 14px rgba(24,53,82,.18);max-width:190px;text-align:left;z-index:2}.family-map-pin:after{content:"";position:absolute;left:18px;bottom:-10px;border:5px solid transparent;border-top-color:#fff}.family-map-pin.root{border:2px solid #e33b42}.family-map-pin.root:before{content:"★";position:absolute;right:-7px;top:-9px;color:#e32934;font-size:17px}.family-map-pin img,.pin-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 34px}.pin-avatar{display:grid;place-items:center;background:#e6eef8;color:#234b78;font-weight:700}.pin-copy{display:flex;flex-direction:column;min-width:0}.pin-copy strong{font-size:12px;color:#102b4d}.pin-copy small{font-size:10px;color:#536b87;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.family-map-legend{display:flex;gap:18px;align-items:center;margin-top:10px;font-size:12px;color:#536b87}.family-map-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px}.legend-root{background:#e32934}.legend-birth{background:#2785e6}
.family-map-list{border-left:1px solid #e0e9f2;padding-left:16px;max-height:650px;overflow:auto}.family-map-list h2{margin:0 0 10px}.family-map-list article{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid #edf2f7}.family-map-list img,.map-list-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px}.map-list-avatar{display:grid;place-items:center;background:#e7f1ed;color:#23714e;font-weight:700}.family-map-list article div{display:flex;flex-direction:column}.family-map-list article strong{font-size:13px}.family-map-list article span{font-size:11px;color:#425d7a}.family-map-list article small{font-size:10px;color:#2a7d58}@media(max-width:900px){.family-map-shell{grid-template-columns:1fr}.family-map-list{border-left:0;border-top:1px solid #e0e9f2;padding-left:0;padding-top:14px}.family-map-stage{min-height:480px}}
.book-family-map-page{overflow:hidden}.book-map-stage{position:relative;height:470px;margin-top:18px;border:1px solid #c9deea;border-radius:12px;overflow:hidden;background:linear-gradient(#c8e7f5,#d9eef6)}.book-map-land{position:absolute;inset:0;background:radial-gradient(ellipse at 23% 34%,#c7dfad 0 13%,transparent 14%),radial-gradient(ellipse at 31% 70%,#b8d39c 0 10%,transparent 11%),radial-gradient(ellipse at 52% 30%,#c4dda8 0 7%,transparent 8%),radial-gradient(ellipse at 55% 52%,#bfd7a2 0 12%,transparent 13%),radial-gradient(ellipse at 72% 37%,#c6dda8 0 18%,transparent 19%),radial-gradient(ellipse at 84% 72%,#bdd7a0 0 7%,transparent 8%)}.book-map-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #bdd2e5;border-radius:8px;padding:4px 6px;max-width:135px;box-shadow:0 3px 8px rgba(20,45,70,.15);font-size:9px}.book-map-pin.root{border:2px solid #e33b42}.book-map-pin img,.book-map-pin>span{width:26px;height:26px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#e7eef6}.book-map-pin div{display:flex;flex-direction:column}.book-map-pin strong{font-size:9px}.book-map-pin small{font-size:7px;color:#526b85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}.book-map-location-list{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}.book-map-location-list>span{display:flex;flex-direction:column;border-top:1px solid #e0e7ef;padding-top:4px}.book-map-location-list strong{font-size:9px}.book-map-location-list small{font-size:7px;color:#64778b}
/* v80 Family Atlas — shared approved Family Map visual language */
.family-map-v2-page{max-width:1500px}.family-atlas{background:#fff;border:1px solid #cdddeb;border-radius:18px;padding:20px;box-shadow:0 12px 34px rgba(20,45,75,.08);font-family:Georgia,serif}.atlas-header{display:flex;justify-content:space-between;gap:28px;border-bottom:1px solid #bdd3e7;padding:0 4px 14px}.atlas-header h2{font-size:36px;margin:0;color:#092b59}.atlas-header h3{font-size:20px;font-weight:400;margin:3px 0 10px;color:#244c78}.atlas-header p{font-family:inherit;margin:0;max-width:780px;color:#344d69}.atlas-header blockquote{margin:0;text-align:center;font-style:italic;color:#183d68;font-size:18px;min-width:280px}.atlas-header blockquote small{display:block;margin-top:4px}.atlas-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;margin-top:14px}.atlas-map{height:600px;position:relative;overflow:hidden;border-radius:14px;border:1px solid #b7d4e7;background:#b9ddf0}.atlas-world{position:absolute;inset:0;width:100%;height:100%}.atlas-ocean-label{font-size:17px;font-style:italic;fill:#4b81a3}.atlas-marker{position:absolute;left:var(--mx);top:var(--my);z-index:3}.atlas-marker>i{position:absolute;width:13px;height:13px;border-radius:50% 50% 50% 0;background:#2779dc;transform:rotate(-45deg);left:-6px;top:-5px;border:2px solid #fff;box-shadow:0 1px 4px #446}.atlas-marker.root>i{background:#e62f3d}.atlas-marker.root:after{content:'★';position:absolute;color:#e62f3d;font-size:17px;left:7px;top:-25px;text-shadow:0 1px #fff}.atlas-callout{position:absolute;left:10px;bottom:8px;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #c9d9e8;border-radius:9px;padding:5px 8px 5px 5px;box-shadow:0 5px 14px rgba(25,54,85,.2);width:max-content;max-width:170px;font-family:Arial,sans-serif}.atlas-callout img,.atlas-callout>span{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#e7eef6;display:grid;place-items:center}.atlas-callout div{display:flex;flex-direction:column}.atlas-callout strong{font-size:12px;color:#102b4d}.atlas-callout small{font-size:10px;color:#526b85;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.atlas-marker:nth-of-type(3n) .atlas-callout{left:auto;right:10px}.atlas-marker:nth-of-type(4n) .atlas-callout{bottom:auto;top:10px}.atlas-legend{position:absolute;left:18px;bottom:16px;background:rgba(255,255,255,.94);border:1px solid #c9d9e8;border-radius:10px;padding:10px 13px;display:grid;gap:6px;font:12px Arial,sans-serif;color:#1d3d62;z-index:6}.atlas-legend i{display:inline-grid;width:15px;height:15px;place-items:center;margin-right:7px}.root-dot{color:#e62f3d}.blue-pin,.green-pin,.gold-pin{border-radius:50%;background:#2879dc}.green-pin{background:#21935a}.gold-pin{background:#e7a600}.atlas-locations{border:1px solid #cad9e8;border-radius:12px;overflow:auto;max-height:600px;background:#fff;font-family:Arial,sans-serif}.atlas-locations h2{font-family:Georgia,serif;margin:0;padding:12px;background:#f2f7fb;color:#12345d}.atlas-locations article{display:grid;grid-template-columns:42px 1fr 18px;gap:9px;align-items:center;padding:8px 10px;border-top:1px solid #e2eaf2}.atlas-locations img,.atlas-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#e7eef6}.atlas-locations article div{display:flex;flex-direction:column;min-width:0}.atlas-locations strong{font-size:13px;color:#102b4d}.atlas-locations span{font-size:11px;color:#425d7a}.atlas-locations small{font-size:10px;color:#17864c}.atlas-locations .root-status{color:#df2835}.atlas-locations article>b{color:#2779dc}.atlas-footer{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-top:12px}.atlas-stats,.atlas-footer>blockquote{border:1px solid #cbdcea;border-radius:10px;padding:12px;background:#fbfdff}.atlas-stats{display:flex;align-items:center;justify-content:space-around;font-family:Arial,sans-serif}.atlas-stats>strong{font-family:Georgia,serif}.atlas-stats span{border-left:1px solid #d8e3ed;padding-left:20px;color:#344d69}.atlas-stats b{font-size:20px;color:#123c70;margin-right:5px}.atlas-footer>blockquote{margin:0;text-align:center;font-style:italic;color:#234b72}.atlas-story-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.atlas-story-strip>div{height:64px;border-radius:8px;background:linear-gradient(135deg,#dbeaf5,#a9cadf);display:flex;flex-direction:column;justify-content:end;padding:8px 12px;color:#12345d}.atlas-story-strip span{font:11px Arial,sans-serif}@media(max-width:950px){.atlas-body{grid-template-columns:1fr}.atlas-locations{max-height:300px}.atlas-header{flex-direction:column}.atlas-header blockquote{text-align:left}.atlas-map{height:520px}}
/* Family Book version of the same atlas */
.book-family-map-v2{padding:32px!important}.book-atlas-header{display:flex;justify-content:space-between;border-bottom:1px solid #bdd3e7;padding-bottom:10px}.book-atlas-header h2{margin:3px 0;font-family:Georgia,serif;color:#092b59}.book-atlas-header p{margin:0;color:#244c78}.book-atlas-header blockquote{font:italic 13px Georgia,serif;text-align:right;margin:4px 0;color:#183d68}.book-atlas-header blockquote small{display:block}.book-atlas-intro{font:12px Georgia,serif;color:#344d69}.book-atlas-body{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:8px}.book-atlas-map{height:420px;position:relative;overflow:hidden;border:1px solid #b7d4e7;border-radius:10px;background:#b9ddf0}.book-atlas-map>svg{position:absolute;inset:0;width:100%;height:100%}.book-atlas-marker{position:absolute;left:var(--mx);top:var(--my);z-index:2}.book-atlas-marker>i{position:absolute;width:8px;height:8px;border-radius:50%;background:#2779dc;border:1px solid white}.book-atlas-marker.root>i{background:#e62f3d}.book-atlas-marker>div{position:absolute;left:7px;bottom:5px;width:max-content;max-width:105px;background:white;border:1px solid #c9d9e8;border-radius:6px;padding:3px;display:flex;gap:3px;align-items:center;box-shadow:0 2px 5px #4564}.book-atlas-marker:nth-of-type(3n)>div{left:auto;right:7px}.book-atlas-marker img,.book-atlas-marker>div>span{width:22px;height:22px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#e7eef6}.book-atlas-marker p{display:flex;flex-direction:column;margin:0}.book-atlas-marker strong{font-size:7px;line-height:1}.book-atlas-marker small{font-size:5.5px;color:#526b85;white-space:nowrap;max-width:70px;overflow:hidden;text-overflow:ellipsis}.book-atlas-legend{position:absolute;left:8px;bottom:8px;background:#fff;border-radius:5px;padding:4px 6px;font-size:6px;display:flex;gap:8px}.book-atlas-list{border:1px solid #cad9e8;border-radius:8px;overflow:hidden}.book-atlas-list h3{margin:0;padding:7px;background:#f2f7fb;font:13px Georgia,serif}.book-atlas-list article{display:flex;gap:5px;padding:5px;border-top:1px solid #e4ebf2}.book-atlas-list img{width:25px;height:25px;border-radius:50%;object-fit:cover}.book-atlas-list article div{display:flex;flex-direction:column}.book-atlas-list strong{font-size:7px}.book-atlas-list span{font-size:6px;color:#425d7a}.book-atlas-list small{font-size:5.5px;color:#17864c}.book-atlas-stats{display:grid;grid-template-columns:1fr 1fr 2fr;gap:6px;margin-top:8px}.book-atlas-stats>*{border:1px solid #cbdcea;border-radius:6px;padding:7px;margin:0;text-align:center;font-size:8px}.book-atlas-stats b{font-size:15px;color:#123c70}.book-atlas-stats blockquote{font:italic 8px Georgia,serif}.book-atlas-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:6px}.book-atlas-strip span{border-radius:5px;background:linear-gradient(135deg,#dbeaf5,#a9cadf);padding:7px;font:bold 8px Georgia,serif;color:#12345d}.book-atlas-strip small{font:6px Arial,sans-serif}@media print{.book-family-map-v2{break-inside:avoid;page-break-inside:avoid}.book-atlas-map{height:410px}}

/* v81 — real interactive Family Map (Leaflet + OpenStreetMap) */
.atlas-leaflet-map,.book-atlas-leaflet-map{background:#dceaf4!important;font-family:Arial,sans-serif}.atlas-leaflet-map .leaflet-control-container,.book-atlas-leaflet-map .leaflet-control-container{font-family:Arial,sans-serif}.family-leaflet-divicon{background:transparent!important;border:0!important}.family-map-pin{position:absolute;left:0;bottom:0;width:14px;height:14px;background:#337bd5;border:2px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 1px 4px rgba(0,0,0,.35)}.family-leaflet-divicon.root .family-map-pin{background:#e72f3e}.family-leaflet-divicon.root:after{content:'★';position:absolute;left:-5px;bottom:20px;color:#e72f3e;font-size:18px;text-shadow:0 1px 2px #fff}.family-map-callout{position:absolute;left:13px;bottom:10px;display:flex;align-items:center;gap:7px;width:max-content;max-width:170px;padding:5px 8px 5px 5px;border:1px solid #c7d8e8;border-radius:9px;background:rgba(255,255,255,.97);box-shadow:0 4px 12px rgba(22,49,78,.22);color:#102b4d;white-space:nowrap}.family-map-callout img,.family-map-callout>span{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#e8eff6;display:grid;place-items:center;flex:none}.family-map-callout>div{display:flex;flex-direction:column;min-width:0}.family-map-callout strong{font-size:12px;line-height:1.15}.family-map-callout small{font-size:10px;color:#526b85;max-width:110px;overflow:hidden;text-overflow:ellipsis}.family-map-popup{display:flex;flex-direction:column;gap:2px}.family-map-popup strong{font-size:14px}.family-map-popup span{font-size:12px}.family-map-popup small{font-size:11px;color:#268250}.family-map-reset{width:30px;height:30px;border:0;background:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.35);font-size:19px;cursor:pointer;color:#173c68}.atlas-leaflet-legend{z-index:500}.atlas-location-row{cursor:pointer}.atlas-location-row:hover{background:#f4f8fc}.book-atlas-leaflet-map .family-map-callout{transform:scale(.66);transform-origin:left bottom}.book-atlas-leaflet-map .family-map-pin{width:10px;height:10px}.book-atlas-leaflet-map .leaflet-control-layers,.book-atlas-leaflet-map .family-map-reset{display:none}.book-atlas-leaflet-map .leaflet-control-zoom a{width:22px;height:22px;line-height:22px;font-size:15px}.book-atlas-leaflet-map .leaflet-control-attribution{font-size:6px}.book-atlas-leaflet-map .leaflet-control-scale{transform:scale(.7);transform-origin:left bottom}@media print{.book-atlas-leaflet-map .leaflet-control-zoom,.book-atlas-leaflet-map .leaflet-control-layers{display:none!important}.book-atlas-leaflet-map .leaflet-tile{print-color-adjust:exact;-webkit-print-color-adjust:exact}.book-atlas-leaflet-map{overflow:hidden!important}}
/* v82 Family Atlas: approved interactive-map composition */
.family-atlas{padding:18px 20px 16px}.atlas-body{grid-template-columns:minmax(0,1fr) 292px}.atlas-map{height:590px;background:#cfe7f6}.atlas-leaflet-map .leaflet-tile-pane{filter:saturate(.92) brightness(1.03)}.atlas-leaflet-map .leaflet-control-layers{border:1px solid #bdd3e7!important;border-radius:8px!important;box-shadow:0 2px 8px rgba(17,52,89,.12)!important}.atlas-leaflet-map .leaflet-control-layers-expanded{padding:6px 9px;font-size:11px}.family-leaflet-divicon.callout-left .family-map-callout{left:auto;right:13px}.family-leaflet-divicon.callout-up .family-map-callout{bottom:auto;top:8px}.family-map-callout{max-width:185px}.atlas-gallery{margin-top:10px}.atlas-people-strip{display:flex;gap:7px;overflow:hidden;margin-bottom:7px}.atlas-people-strip article{flex:1;min-width:0;height:48px;border:1px solid #cbdcea;border-radius:8px;background:#fff;display:flex;align-items:center;gap:7px;padding:4px 7px;font-family:Arial,sans-serif}.atlas-people-strip img,.atlas-people-strip .atlas-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}.atlas-people-strip article div{display:flex;flex-direction:column;min-width:0}.atlas-people-strip b{font-size:11px;color:#12345d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.atlas-people-strip small{font-size:9px;color:#536b87;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.atlas-place-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) 150px;gap:7px}.atlas-place-card{height:105px;border:1px solid #c5d8e8;border-radius:8px;overflow:hidden;background:#e6f0f7;position:relative}.atlas-mini-map{position:absolute;inset:0 0 24px}.atlas-place-card>b{position:absolute;left:0;right:0;bottom:0;height:24px;padding:5px 7px;background:#fff;color:#12345d;font:10px Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.atlas-story-end{height:105px;border:1px solid #cbdcea;border-radius:8px;background:#f8fbfe;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#244c78;font-family:Georgia,serif}.atlas-story-end:before{content:'⌂';font-size:27px;color:#8aa9c5;margin-bottom:3px}.atlas-story-end b{font-size:12px}.atlas-story-end span{font-size:10px;margin-top:5px}.atlas-place-card .leaflet-control-container{display:none}.atlas-place-card .leaflet-pane{pointer-events:none}.book-atlas-people{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:6px}.book-atlas-people article{display:flex;align-items:center;gap:3px;border:1px solid #d5e1ec;border-radius:4px;padding:3px;min-width:0}.book-atlas-people img{width:22px;height:22px;border-radius:50%;object-fit:cover}.book-atlas-people div{display:flex;flex-direction:column;min-width:0}.book-atlas-people b{font-size:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.book-atlas-people small{font-size:5px;color:#536b87;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.book-atlas-strip span{background:linear-gradient(135deg,#e6f1f8,#b6d4e7);min-height:35px}.leaflet-container img.leaflet-tile{max-width:none!important;max-height:none!important}.leaflet-container{isolation:isolate}.leaflet-map-pane,.leaflet-tile-pane,.leaflet-overlay-pane,.leaflet-marker-pane,.leaflet-shadow-pane,.leaflet-tooltip-pane,.leaflet-popup-pane{position:absolute;left:0;top:0}.leaflet-tile{position:absolute;left:0;top:0}.leaflet-marker-icon,.leaflet-marker-shadow{position:absolute;left:0;top:0;display:block}@media(max-width:1100px){.atlas-place-strip{grid-template-columns:repeat(3,1fr)}.atlas-story-end{display:none}.atlas-people-strip article:nth-child(n+5){display:none}}@media print{.atlas-people-strip{display:none}.atlas-place-strip{display:none}}

/* v85 Family Book map layout only — keep Family Locations below the map.
   The standalone Family Map page intentionally keeps its right-side locations rail. */
.book-family-map-v2 .book-atlas-body{
    display:block;
}
.book-family-map-v2 .book-atlas-list{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0;
    margin-top:8px;
    overflow:hidden;
    border:1px solid #cad9e8;
    border-radius:8px;
    background:#fff;
}
.book-family-map-v2 .book-atlas-list h3{
    grid-column:1/-1;
    margin:0;
    padding:7px 9px;
    background:#f2f7fb;
    border-bottom:1px solid #dbe5ee;
    font:13px Georgia,serif;
    color:#12345d;
}
.book-family-map-v2 .book-atlas-list article{
    min-width:0;
    display:flex;
    align-items:center;
    gap:5px;
    padding:5px 6px;
    border-top:0;
    border-right:1px solid #e4ebf2;
    border-bottom:1px solid #e4ebf2;
}
.book-family-map-v2 .book-atlas-list article:nth-of-type(5n){
    border-right:0;
}
.book-family-map-v2 .book-atlas-list article div{
    min-width:0;
}
.book-family-map-v2 .book-atlas-list strong,
.book-family-map-v2 .book-atlas-list span,
.book-family-map-v2 .book-atlas-list small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.book-family-map-v2 .book-atlas-list img{
    width:24px;
    height:24px;
    flex:0 0 24px;
}
@media(max-width:900px){
    .book-family-map-v2 .book-atlas-list{grid-template-columns:repeat(4,minmax(0,1fr));}
    .book-family-map-v2 .book-atlas-list article:nth-of-type(5n){border-right:1px solid #e4ebf2;}
    .book-family-map-v2 .book-atlas-list article:nth-of-type(4n){border-right:0;}
}
@media print{
    .book-family-map-v2 .book-atlas-body{display:block!important;}
    .book-family-map-v2 .book-atlas-list{grid-template-columns:repeat(5,minmax(0,1fr));break-inside:avoid;page-break-inside:avoid;}
}

/* Dynamic city photography for the standalone Family Map gallery. */
.atlas-city-photo{position:absolute;inset:0 0 24px;background:linear-gradient(135deg,#e8f1f7,#c8dce9);display:flex;align-items:center;justify-content:center;color:#607991;font:10px Arial,sans-serif;overflow:hidden}
.atlas-city-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.atlas-city-photo-card:hover .atlas-city-photo img{transform:scale(1.035)}
.atlas-city-photo-credit{position:absolute;right:4px;top:4px;z-index:2;padding:2px 4px;border-radius:4px;background:rgba(0,0,0,.52);color:#fff!important;text-decoration:none;font:7px Arial,sans-serif}
.atlas-city-photo-card .atlas-mini-map{position:absolute;inset:0 0 24px}

/* v92: relationship editing is supported directly in the default Family Infographic. */
.relationship-edit-mode .infographic-person.relationship-draggable{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.relationship-edit-mode .infographic-person.relationship-draggable:active,.relationship-edit-mode .infographic-person.relationship-pointer-dragging{cursor:grabbing;opacity:.82}
.relationship-edit-mode .infographic-person.relationship-drop-target{outline:3px solid rgba(52,127,232,.38);border-color:#347fe8;box-shadow:0 0 0 5px rgba(52,127,232,.12),0 8px 20px rgba(24,57,98,.15)}

/* v93 — reliable Family Infographic relationship drag/drop */
.relationship-edit-mode .infographic-person.relationship-pointer-dragging{transform:scale(.98);opacity:.72;box-shadow:0 12px 28px rgba(24,57,98,.20);z-index:20}
.relationship-edit-mode .infographic-person.relationship-drop-target{transform:translateY(-2px) scale(1.02)}

/* v94 — Family Book infographic relationship overlay must share the exact
   unscaled pixel geometry of the cards before the complete tree is fitted. */
.book-infographic-tree-page .infographic-tree-svg{
  max-width:none!important;
  max-height:none!important;
  transform:none!important;
  transform-origin:top left!important;
}

/* v95: per-city family member counts on Family Map and Family Book */
.atlas-place-card>.atlas-place-caption{position:absolute;left:0;right:0;bottom:0;min-height:34px;padding:4px 7px;background:#fff;color:#12345d;font-family:Arial,sans-serif;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.atlas-place-card>.atlas-place-caption b{font-size:10px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atlas-place-card>.atlas-place-caption small{font-size:8px;line-height:1.2;color:#607991;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.atlas-city-photo,.atlas-city-photo-card .atlas-mini-map{bottom:34px}
.book-atlas-strip span{display:flex;flex-direction:column;justify-content:center;gap:2px}
.book-atlas-strip span>b{font:bold 8px Georgia,serif;color:#12345d}
.book-atlas-strip span>small{display:block;font:6px Arial,sans-serif;color:#496781}

/* v96: Family Map full-screen control + unique-location carousel navigation */
.family-map-fullscreen{width:30px;height:30px;border:0;background:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.35);font-size:19px;line-height:30px;cursor:pointer;color:#173c68;font-family:Arial,sans-serif}
#familyInteractiveMap:fullscreen,#familyInteractiveMap:-webkit-full-screen{width:100vw!important;height:100vh!important;border-radius:0!important;background:#dceaf4!important}
.atlas-place-carousel{position:relative;min-width:0}
.atlas-place-strip{display:flex!important;grid-template-columns:none!important;gap:7px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;padding:0}
.atlas-place-strip::-webkit-scrollbar{display:none}
.atlas-place-strip>.atlas-place-card{flex:0 0 calc((100% - 35px)/6);min-width:150px}
.atlas-place-strip>.atlas-story-end{flex:0 0 150px}
.atlas-place-nav{position:absolute;top:50%;z-index:20;width:38px;height:54px;transform:translateY(-50%);border:1px solid #b8cde0;border-radius:9px;background:rgba(255,255,255,.96);box-shadow:0 3px 12px rgba(17,52,89,.22);color:#123c70;font:bold 17px Arial,sans-serif;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.atlas-place-nav-left{left:6px}.atlas-place-nav-right{right:6px}
.atlas-place-carousel.has-overflow:hover .atlas-place-nav:not(:disabled),.atlas-place-carousel.has-overflow:focus-within .atlas-place-nav:not(:disabled){opacity:1;pointer-events:auto}
.atlas-place-nav:disabled{opacity:0!important;pointer-events:none!important}
.atlas-place-nav:not(:disabled):hover{transform:translateY(-50%) scale(1.05)}
@media(max-width:1100px){.atlas-place-strip>.atlas-place-card{flex-basis:calc((100% - 14px)/3);min-width:170px}.atlas-place-strip>.atlas-story-end{display:flex;flex-basis:150px}}
@media print{.atlas-place-carousel{display:none!important}.family-map-fullscreen{display:none!important}}

/* v98 — keep empty-tree actions vertically centered like populated tree cards. */
@media (min-width:1051px){
  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) > .my-tree-actions{
    position:absolute!important;
    top:50%!important;
    right:24px!important;
    transform:translateY(-50%)!important;
    grid-column:auto!important;
    grid-row:auto!important;
    width:auto!important;
    margin:0!important;
    padding-left:24px!important;
    display:grid!important;
    grid-template-columns:auto 42px!important;
    align-items:center!important;
    justify-content:end!important;
    gap:8px!important;
    border-left:1px solid #e4edf4!important;
    z-index:3!important;
  }
  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) > .my-tree-actions > .button:first-child{
    grid-column:1!important;
    grid-row:1!important;
    width:auto!important;
    min-width:96px!important;
  }
  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) > .my-tree-actions > .v48-tree-more{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
  }
}}
/* v101 — Premium Control Center Family Map switch + compact lower-column alignment */
.premium-lower-left{display:grid;gap:14px;align-content:start;min-width:0}
.premium-lower-right{display:block;min-width:0}
.family-map-admin-control .dashboard-mini-heading{min-height:78px}
.family-map-admin-control form{display:flex;align-items:center;justify-content:flex-end;margin:0}
.family-map-admin-control .family-map-switch{display:inline-block!important;position:relative!important;flex:0 0 42px!important;width:42px!important;min-width:42px!important;max-width:42px!important;height:24px!important;min-height:24px!important;max-height:24px!important;padding:0!important;margin:0!important;border:0!important;border-radius:999px!important;line-height:0!important;background:#cfd8e5!important;overflow:hidden!important}
.family-map-admin-control .family-map-switch>span{position:absolute!important;top:3px!important;left:3px!important;width:18px!important;height:18px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.18)!important;transition:left .16s ease!important}
.family-map-admin-control .family-map-switch.on{background:#397af3!important}
.family-map-admin-control .family-map-switch.on>span{left:21px!important}
@media(max-width:900px){.premium-lower-dashboard{grid-template-columns:1fr}.premium-lower-left{gap:14px}}
.premium-left-stack{display:grid;gap:14px;align-content:start;min-width:0}

/* v103 — Separate Family workspace navigation from Family Tree-only tools. */
.tree-internal-navigation{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
    max-width:100%;
}
.tree-primary-nav{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    padding:7px;
    border:1px solid #e0eaf2;
    border-radius:14px;
    background:#f8fbfe;
    white-space:nowrap;
}
.tree-primary-nav .button.internal-nav-active,
.tree-primary-nav .button[aria-current="page"]{
    background:var(--ft-navy-2,#234f80)!important;
    border-color:var(--ft-navy-2,#234f80)!important;
    color:#fff!important;
    box-shadow:0 5px 12px rgba(35,79,128,.14)!important;
}
.tree-secondary-tools{
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-end;
    justify-content:flex-end;
    gap:8px;
    padding:7px;
    border:1px solid #e0eaf2;
    border-radius:14px;
    background:#f8fbfe;
    white-space:nowrap;
}
.family-book-heading .tree-internal-navigation{align-items:flex-end;}
@media(max-width:980px){
    .tree-internal-navigation{width:100%;align-items:stretch;}
    .tree-primary-nav,.tree-secondary-tools{overflow-x:auto;justify-content:flex-start;max-width:100%;}
}


/* v104 — Family Tree contextual tools live in the tree canvas header, not under primary navigation. */
.tree-canvas-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:54px;
    padding:7px 12px;
    border-bottom:1px solid #e1e9f1;
    background:#fff;
}
.tree-canvas-toolbar .tree-status{
    flex:1 1 auto;
    min-width:160px;
    margin:0;
    padding:0;
}
.tree-canvas-toolbar .tree-secondary-tools{
    flex:0 0 auto;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
}
.tree-canvas-toolbar .tree-secondary-tools label{margin:0;}
@media(max-width:1050px){
    .tree-canvas-toolbar{align-items:flex-start;flex-direction:column;}
    .tree-canvas-toolbar .tree-secondary-tools{width:100%;overflow-x:auto;justify-content:flex-start;max-width:100%;padding-bottom:2px;}
}
@media print{.tree-canvas-toolbar{display:none!important;}}

/* v105 — Family Tree toolbar/full-screen cleanup. */
.tree-canvas-toolbar .tree-status{
    border-bottom:0;
}
.tree-maximize-button[hidden]{
    display:none!important;
}
.tree-surface.tree-viewer-active .tree-canvas-toolbar .relationship-edit-toggle,
.tree-surface:fullscreen .tree-canvas-toolbar .relationship-edit-toggle,
body.tree-viewer-fallback-open .tree-surface.tree-viewer-active .tree-canvas-toolbar .relationship-edit-toggle{
    display:none!important;
}

/* v109: Keep Family Tree, Family Map and Family Book workspace widths exactly consistent.
   The shared .page workspace is 1440px; Family Book must not override it to 1500px. */
.family-book-setup-page.page.internal-page {
    width: min(1440px, 100%);
    max-width: 1440px;
}

@media (max-width: 1440px) {
    .family-book-setup-page.page.internal-page {
        width: 100%;
        max-width: 100%;
    }
}

/* v107 — Consistent Family Tree / Family Map / Family Book page headers. */
@media (min-width: 901px) {
    .tree-page > .tree-toolbar,
    .family-map-page > .tree-toolbar,
    .family-book-setup-page > .family-book-heading {
        min-height: 104px;
        height: 104px;
        box-sizing: border-box;
        margin-bottom: 15px;
        align-items: center;
    }

    .tree-page > .tree-toolbar > :first-child,
    .family-map-page > .tree-toolbar > :first-child,
    .family-book-setup-page > .family-book-heading > :first-child {
        align-self: center;
    }

    .tree-page > .tree-toolbar .tree-internal-navigation,
    .family-map-page > .tree-toolbar .tree-internal-navigation,
    .family-book-setup-page > .family-book-heading .tree-internal-navigation {
        align-self: center;
    }
}

/* v110 — top tree switcher clipping + Family Tree fullscreen control placement. */
/* Keep the compact global tree switcher vertically centered without clipping its text. */
.global-topbar .nav-tree-switcher select {
    box-sizing: border-box !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 30px 0 10px !important;
    line-height: normal !important;
    vertical-align: middle;
}

/* Place the Family Tree fullscreen/viewer controls on the left side of the canvas. */
.tree-fullscreen-controls {
    justify-content: flex-start;
    padding-right: 0;
    padding-left: 12px;
}
.tree-maximize-button {
    left: 0;
    right: auto;
}


/* v111 — selected-family page identity + fullscreen-only viewer control alignment. */
/* Normal Family Tree page keeps only the fullscreen launcher on the left. */
.tree-fullscreen-controls {
    justify-content: flex-start;
    padding-left: 12px;
    padding-right: 0;
}

/* Once the tree itself is fullscreen, move zoom/Fit/exit controls to the right. */
.tree-surface:fullscreen .tree-fullscreen-controls,
.tree-surface:-webkit-full-screen .tree-fullscreen-controls,
.tree-surface.tree-viewer-active .tree-fullscreen-controls {
    justify-content: flex-end;
    padding-left: 0;
    padding-right: 12px;
}

/* Fallback fullscreen mode uses the same right-side placement. */
body.tree-viewer-fallback-open .tree-surface.tree-viewer-active .tree-fullscreen-controls {
    justify-content: flex-end;
    padding-left: 0;
    padding-right: 12px;
}


/* v112 — keep the complete My Family Trees kebab menu visible. */
.my-trees-v48 .v48-tree-more[open] .v48-tree-menu{
  display:block!important;
  min-width:190px!important;
  height:auto!important;
  min-height:max-content!important;
  max-height:none!important;
  overflow:visible!important;
}
.my-trees-v48 .v48-tree-menu>.tree-menu-submit{display:block!important;width:100%!important;}


/* v113 — print header, create-tree feedback, and complete tree action menu. */
.my-trees-v48 .my-tree-card:has(.v48-tree-more[open]){
  z-index:1000!important;
  margin-bottom:96px!important;
}
.my-trees-v48 .v48-tree-more[open]{z-index:1010!important;}
.my-trees-v48 .v48-tree-more[open] .v48-tree-menu{
  z-index:1020!important;
  display:block!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
.my-trees-v48 .v48-tree-menu form{display:block!important;margin:0!important;}
.my-trees-v48 .v48-tree-menu form button{display:block!important;width:100%!important;}

/* v114 — Family Trees kebab menu must overlay following cards without changing layout height. */
.my-trees-v48 .my-tree-grid{
  position:relative!important;
  overflow:visible!important;
}
.my-trees-v48 .my-tree-card{
  position:relative!important;
  z-index:1!important;
  overflow:visible!important;
}
.my-trees-v48 .my-tree-card-body,
.my-trees-v48 .my-tree-actions,
.my-trees-v48 .v48-tree-more{
  overflow:visible!important;
}
.my-trees-v48 .my-tree-card:has(.v48-tree-more[open]){
  position:relative!important;
  z-index:5000!important;
  margin-bottom:0!important;
}
.my-trees-v48 .v48-tree-more[open]{
  position:relative!important;
  z-index:5010!important;
}
.my-trees-v48 .v48-tree-more[open] .v48-tree-menu{
  position:absolute!important;
  right:0!important;
  top:47px!important;
  z-index:5020!important;
  display:block!important;
  min-width:190px!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

/* v115 — robust Family Trees action menu overlay.
   The open menu is promoted to the viewport so no card/grid overflow or
   sibling stacking context can clip it. Coordinates are set by my-trees JS. */
.my-trees-v48 .v48-tree-more[open] .v48-tree-menu.v115-viewport-menu{
  position:fixed!important;
  right:auto!important;
  top:auto;
  z-index:2147483000!important;
  min-width:190px!important;
  width:190px!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  display:block!important;
  box-sizing:border-box!important;
}
.my-trees-v48 .v48-tree-menu.v115-viewport-menu form,
.my-trees-v48 .v48-tree-menu.v115-viewport-menu form button{
  display:block!important;
  width:100%!important;
}


/* v116 — anchor the viewport action menu to the clicked kebab button.
   v114 left top/right declarations as !important; v116 coordinates are
   applied inline with !important by my-trees.html so those legacy rules
   cannot pin the popup to the page header. */
.my-trees-v48 .v48-tree-more[open] .v48-tree-menu.v115-viewport-menu{
  position:fixed!important;
  z-index:2147483000!important;
  margin:0!important;
  transform:none!important;
}

/* v119 — empty-tree kebab popup stability.
   The empty-tree action row previously used transform: translateY(-50%).
   A transformed ancestor becomes the containing block for position:fixed
   descendants, which broke the viewport-positioned kebab popup only on empty
   tree cards. Center the action row with top/bottom + auto margins instead so
   the same fixed popup logic works for populated and empty trees. */
@media (min-width:1051px){
  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) > .my-tree-actions{
    top:0!important;
    bottom:0!important;
    transform:none!important;
    margin-top:auto!important;
    margin-bottom:auto!important;
    height:max-content!important;
  }
}

/* v123 Stripe billing */
.plan-price{display:flex;align-items:baseline;gap:5px;margin:8px 0 10px}.plan-price b{font-size:30px;line-height:1;color:#14254a}.plan-price small{font-size:13px;color:#66738d}.plan-summary-grid form{margin-top:auto}.plan-summary-grid form .plan-buy-button{width:100%;border:0;cursor:pointer}.billing-alert{max-width:1180px;margin:0 auto 18px;padding:12px 16px;border:1px solid #efb4b4;border-radius:10px;background:#fff5f5;color:#8c2020}.billing-result{max-width:680px;margin:90px auto;padding:34px;border:1px solid #dce4ef;border-radius:18px;background:#fff;box-shadow:0 18px 55px rgba(20,37,74,.08);text-align:center}.billing-result h1{margin-top:0}.billing-result .button{margin-top:14px}


/* v125 — explicit tree selection for Family Premium invitations */
.family-tree-invite-selector { display:flex; align-items:end; gap:16px; flex-wrap:wrap; margin:14px 0 18px; padding:14px; border:1px solid var(--border, #d9e2ef); border-radius:14px; background:#f8fbff; }
.family-tree-invite-selector label { display:grid; gap:7px; min-width:min(360px,100%); font-weight:700; color:#17305b; }
.family-tree-invite-selector select { width:100%; min-height:42px; padding:9px 36px 9px 12px; border:1px solid #cbd7e7; border-radius:10px; background:#fff; color:#14284a; }
.family-tree-invite-selector .tree-status-pill { margin-bottom:5px; }

/* v126 — dedicated Family Collaboration workspace */
.family-collaboration-page .collaboration-hero { margin-bottom: 28px; }
.family-collaboration-page .collaboration-invitations { margin-bottom: 28px; }
.collaboration-invitation-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.collaboration-invitation-actions form { margin:0; }
.collaboration-tree-grid { margin-top:16px; }
.collaboration-tree-card .my-tree-card-body { display:flex; flex-direction:column; }
.collaboration-tree-actions { margin-top:auto; padding-top:20px; display:flex; gap:10px; flex-wrap:wrap; }
.collaboration-empty { margin:28px 0; display:flex; flex-direction:column; gap:6px; }

/* v127 — Family Collaboration list mirrors the Family Trees content width/card layout. */
.family-collaboration-page > section:has(.collaboration-tree-grid) {
    width:min(1180px,calc(100% - 136px))!important;
    margin-left:auto!important;
    margin-right:auto!important;
}
.family-collaboration-page .shared-tree-heading {
    width:100%!important;
    margin:0 0 16px!important;
}
.family-collaboration-page .collaboration-tree-grid {
    width:100%!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
}
.family-collaboration-page .collaboration-tree-card .my-tree-card-body {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 270px!important;
    grid-template-rows:auto auto 1fr!important;
    column-gap:26px!important;
    padding:30px 32px!important;
}
.family-collaboration-page .collaboration-tree-card .tree-card-title-row {
    grid-column:1!important;
    grid-row:1!important;
}
.family-collaboration-page .collaboration-tree-card .my-tree-card-body > p {
    grid-column:1!important;
    grid-row:2!important;
    margin:3px 0 7px!important;
}
.family-collaboration-page .collaboration-tree-actions {
    grid-column:2!important;
    grid-row:1 / 4!important;
    align-self:center!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:8px!important;
    margin:0!important;
    padding:0 0 0 24px!important;
    border-left:1px solid #e4edf4!important;
}
.family-collaboration-page .collaboration-tree-actions > .button,
.family-collaboration-page .collaboration-tree-actions > .button:first-child {
    width:auto!important;
    min-width:128px!important;
    min-height:42px!important;
    padding:9px 16px!important;
    border-radius:10px!important;
}
@media(max-width:1050px){
    .family-collaboration-page > section:has(.collaboration-tree-grid){width:calc(100% - 32px)!important;margin-left:16px!important;margin-right:16px!important;}
    .family-collaboration-page .collaboration-tree-card .my-tree-card-body{grid-template-columns:1fr!important;}
    .family-collaboration-page .collaboration-tree-actions{grid-column:1!important;grid-row:auto!important;justify-content:flex-start!important;border-left:0!important;padding-left:0!important;margin-top:10px!important;}
}
@media(max-width:700px){
    .family-collaboration-page > section:has(.collaboration-tree-grid){width:calc(100% - 20px)!important;margin-left:10px!important;margin-right:10px!important;}
}

/* v128 — collaboration alignment, horizontal invitation actions, and shared footer */
.family-collaboration-page > .collaboration-invitations,
.family-collaboration-page > .collaboration-empty {
    width:min(1180px,calc(100% - 136px))!important;
    margin-left:auto!important;
    margin-right:auto!important;
}
.family-collaboration-page .collaboration-invitation-actions {
    flex:0 0 auto!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
}
.family-collaboration-page .collaboration-invitation-actions .button {
    min-width:88px!important;
    margin:0!important;
}
.family-collaboration-page .collaboration-empty {
    margin-top:28px!important;
    margin-bottom:28px!important;
}
.family-collaboration-page .workspace-values {
    width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
}
@media(max-width:1050px){
    .family-collaboration-page > .collaboration-invitations,
    .family-collaboration-page > .collaboration-empty{width:calc(100% - 32px)!important;}
}
@media(max-width:700px){
    .family-collaboration-page > .collaboration-invitations,
    .family-collaboration-page > .collaboration-empty{width:calc(100% - 20px)!important;}
    .family-collaboration-page .collaboration-invitation-actions{flex-wrap:wrap!important;justify-content:flex-start!important;}
}

/* v129 — Family Collaboration hero summary matches the Family Trees Premium Plan card. */
.family-collaboration-page > .collaboration-hero {
    grid-template-columns:minmax(390px,1.2fr) minmax(280px,.8fr) 175px!important;
    gap:14px!important;
}
.family-collaboration-page > .collaboration-hero .workspace-hero-copy {
    grid-column:1!important;
}
.family-collaboration-page > .collaboration-hero .modern-plan-card {
    grid-column:3!important;
    width:175px!important;
    min-width:175px!important;
    max-width:175px!important;
    min-height:82px!important;
    padding:10px 12px!important;
    grid-template-columns:32px 1fr!important;
    gap:9px!important;
    align-self:center!important;
}
.family-collaboration-page > .collaboration-hero .modern-plan-card .plan-card-icon {
    width:30px!important;
    height:30px!important;
    font-size:17px!important;
}
.family-collaboration-page > .collaboration-hero .modern-plan-card strong {
    font-size:1.05rem!important;
}
.family-collaboration-page > .collaboration-hero .modern-plan-card span {
    font-size:11px!important;
}
@media(max-width:1050px){
    .family-collaboration-page > .collaboration-hero{grid-template-columns:1fr!important;}
    .family-collaboration-page > .collaboration-hero .workspace-hero-copy,
    .family-collaboration-page > .collaboration-hero .modern-plan-card{grid-column:1!important;}
    .family-collaboration-page > .collaboration-hero .modern-plan-card{
        width:100%!important;min-width:0!important;max-width:none!important;
    }
}
\n\n/* v131 — keep empty Family Tree cards aligned with populated cards.\n   Empty-tree guidance must not change the main content column width. */\n@media (min-width:1051px){\n  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance){\n    grid-template-columns:minmax(0,1fr) 270px!important;\n    grid-template-rows:auto auto 1fr!important;\n    column-gap:26px!important;\n    align-items:start!important;\n  }\n  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) .my-tree-metrics{\n    grid-column:1!important;\n    grid-row:3!important;\n    width:100%!important;\n    max-width:650px!important;\n    align-self:end!important;\n  }\n  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) .empty-tree-guidance{\n    position:absolute!important;\n    top:24px!important;\n    right:300px!important;\n    width:min(500px,calc(100% - 650px))!important;\n    max-width:none!important;\n    margin:0!important;\n  }\n}\n

/* v133 — empty-tree metric alignment and user-specific audit search. */
@media (min-width:1051px){
  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) .my-tree-metrics{
    width:auto!important;
    max-width:650px!important;
    justify-self:start!important;
  }
}
.audit-user-search{margin-bottom:18px!important}.audit-search-form{display:flex;flex-direction:column;gap:10px}.audit-search-form label{display:flex;gap:8px;align-items:baseline}.audit-search-controls{display:flex;gap:10px;align-items:center}.audit-search-controls input{flex:1;min-width:220px}.audit-selected-user{display:flex;gap:12px;align-items:baseline;margin:0 0 10px}.audit-empty-state{padding:28px;color:var(--muted)}.audit-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}.audit-empty-prompt{padding:28px!important}.audit-empty-prompt p{margin:6px 0 0}@media(max-width:700px){.audit-search-controls{align-items:stretch;flex-direction:column}.audit-search-controls .button{width:100%}}

/* v133 alignment final: empty and populated metric rails use the same desktop width. */
@media (min-width:1051px){
  .my-trees-v48 .my-tree-metrics,
  .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) .my-tree-metrics{
    width:650px!important;
    max-width:100%!important;
    justify-self:start!important;
  }
}

/* v141 — Family Archive library redesign */
.family-archive-page{max-width:1120px}
.family-archive-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.family-archive-heading .premium-back-button{margin-bottom:22px}.family-archive-heading h1{margin:5px 0 8px}.family-archive-heading p{max-width:720px;margin:0}
.archive-add-button{white-space:nowrap;padding:12px 18px}
.archive-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
.archive-summary-grid article{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #dbe4ef;border-radius:16px;padding:17px 18px;box-shadow:0 10px 25px rgba(15,23,42,.04)}
.archive-summary-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#eef2ff;color:#4338ca;font-weight:900;font-size:18px}.archive-summary-grid strong{display:block;font-size:22px;color:#10264d}.archive-summary-grid small{display:block;color:#64748b;margin-top:2px}
.archive-library-card{background:#fff;border:1px solid #dbe4ef;border-radius:18px;padding:0 18px 16px;margin-bottom:18px;box-shadow:0 10px 25px rgba(15,23,42,.035)}
.archive-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid #e7edf5;padding-top:8px}.archive-tabs button{appearance:none;border:0;background:transparent;padding:13px 12px 11px;font-weight:800;color:#64748b;white-space:nowrap;border-bottom:3px solid transparent;cursor:pointer}.archive-tabs button.active{color:#315ea8;border-bottom-color:#477ff0}
.archive-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 190px 150px;gap:10px;padding-top:15px}.archive-toolbar select,.archive-search{height:42px;border:1px solid #d5dfeb;border-radius:11px;background:#f8fafc}.archive-toolbar select{padding:0 11px;color:#243b61}.archive-search{display:flex;align-items:center;gap:8px;padding:0 12px}.archive-search span{font-size:20px;color:#64748b}.archive-search input{width:100%;border:0;outline:0;background:transparent;padding:0;font:inherit}
.archive-library-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.archive-library-item{padding:0;overflow:hidden;border-radius:18px;box-shadow:0 10px 25px rgba(15,23,42,.05);display:flex;flex-direction:column}.archive-library-item[hidden]{display:none!important}
.archive-card-media{height:165px;background:#eef2f7;overflow:hidden}.archive-card-media img{width:100%;height:100%;object-fit:cover}.archive-card-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:linear-gradient(145deg,#f8fafc,#eef2ff);color:#4338ca}.archive-card-placeholder span{font-size:32px}.archive-card-placeholder small{font-size:11px;font-weight:900;letter-spacing:.1em}.archive-item.sealed .archive-card-placeholder{background:linear-gradient(145deg,#faf5ff,#f5f3ff)}
.archive-card-content{padding:17px;display:flex;flex-direction:column;flex:1}.archive-card-topline{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;color:#64748b}.archive-card-content h2{font-size:17px;margin:7px 0 6px;color:#10264d}.archive-description{font-size:13px;color:#64748b;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.archive-card-content .archive-meta{margin-top:auto;padding-top:12px}.archive-file-link{font-size:12px;font-weight:800;color:#356fd6;text-decoration:none;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.archive-empty-state{grid-column:1/-1;text-align:center;padding:65px 20px;border:1px dashed #cbd5e1;border-radius:18px;background:#fbfdff}.archive-empty-state.initially-hidden{display:none}.archive-empty-state.initially-hidden.filter-empty{display:block}.archive-empty-state>div{font-size:34px;color:#6366f1}.archive-empty-state h2{margin:9px 0 5px}.archive-empty-state p{color:#64748b;margin:0 auto 16px;max-width:520px}
.archive-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:24px}.archive-modal.open{display:flex}.archive-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.56);backdrop-filter:blur(2px)}.archive-modal-dialog{position:relative;width:min(760px,100%);max-height:calc(100vh - 48px);overflow:auto;background:#fff;border-radius:20px;box-shadow:0 30px 80px rgba(15,23,42,.28);padding:24px}.archive-modal-header{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #e7edf5;padding-bottom:16px;margin-bottom:18px}.archive-modal-header h2{margin:4px 0 5px}.archive-modal-header p{margin:0;color:#64748b}.archive-modal-close{border:0;background:#f1f5f9;width:36px;height:36px;border-radius:50%;font-size:24px;cursor:pointer;color:#334155}.archive-modal-form{padding:0;border:0;box-shadow:none}.archive-modal-form label{font-weight:800;color:#1e3558}.archive-modal-form label input,.archive-modal-form label select,.archive-modal-form label textarea{font-weight:400}.archive-file-field span{font-weight:400;color:#64748b;font-size:12px}.archive-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.archive-modal-open{overflow:hidden}
@media(max-width:900px){.archive-summary-grid,.archive-library-grid{grid-template-columns:1fr}.archive-toolbar{grid-template-columns:1fr}.family-archive-heading{align-items:flex-start;flex-direction:column}.archive-add-button{width:100%}}

/* v144 — Family Archive connections across Tree/Timeline/Map/Book */
.archive-link-panel{border:1px solid #dce5f2;border-radius:16px;padding:16px 18px;margin:14px 0;background:#f8fbff}.archive-link-panel legend{font-weight:800;color:#102a55;padding:0 8px}.archive-link-panel>p{margin:0 0 12px;color:#64748b}.archive-link-panel select[multiple]{min-height:132px;width:100%;padding:8px;border:1px solid #ccd8e8;border-radius:10px;background:#fff}.archive-link-panel label small{display:block;color:#718096;margin-top:5px}.archive-link-checks{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}.archive-link-checks label{display:flex;align-items:center;gap:8px;font-weight:700}.archive-connections{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.archive-connections span{font-size:.76rem;background:#eef4ff;border:1px solid #d8e4fb;border-radius:999px;padding:4px 8px;color:#244b83}.event-archive-link{display:inline-flex;gap:4px;align-items:center;text-decoration:none;background:#eef4ff;border:1px solid #d8e4fb;border-radius:999px;padding:5px 9px;color:#244b83;font-weight:700;white-space:nowrap}.archive-memory-marker .archive-memory-pin{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#7c3aed;color:#fff;border:3px solid #fff;box-shadow:0 3px 10px #0003;font-size:12px}.archive-memory-dot{color:#7c3aed;font-style:normal}.atlas-archive-memories{border-top:1px solid #e4eaf2;margin-top:12px;padding-top:12px}.atlas-archive-memories h3{font-size:.86rem;margin:0 0 8px}.atlas-archive-memories a{display:flex;flex-direction:column;padding:8px 4px;text-decoration:none;border-bottom:1px solid #edf1f6;color:#102a55}.atlas-archive-memories a span{font-size:.75rem;color:#6b7b91}.book-archive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.book-archive-grid article{border:1px solid #dce4ee;border-radius:14px;overflow:hidden;background:#fff;display:grid;grid-template-columns:110px 1fr;min-height:120px}.book-archive-grid article>img{width:110px;height:100%;object-fit:cover}.book-archive-grid article>div{padding:14px}.book-archive-grid article span{font-size:.68rem;font-weight:800;letter-spacing:.08em;color:#6554d9}.book-archive-grid article h3{margin:4px 0 7px;font-size:1rem}.book-archive-grid article p{margin:0 0 6px;font-size:.84rem}.book-archive-grid article small{display:block;color:#65758b;margin-top:3px}@media(max-width:800px){.book-archive-grid{grid-template-columns:1fr}.archive-link-checks{display:grid;gap:10px}}

/* v145 — contextual Family Book archive memories */
.book-person-archive{margin-top:24px;padding-top:18px;border-top:1px solid #e3e9f1}
.book-person-archive>h3{margin:0 0 5px;color:#102a55}
.book-person-archive-intro{margin:0 0 12px;color:#65758b;font-size:.9rem}
.book-person-archive-grid{margin-top:10px}
@media print{.book-person-archive{break-inside:avoid-page}}

/* v146 — connected Family Archive content inside Family Book */
.book-archive-attachment { display:inline-flex; margin-top:10px; font-weight:700; text-decoration:none; }
.book-archive-grid audio, .book-archive-grid video { width:100%; max-width:100%; margin-top:10px; }
.book-archive-grid video { max-height:260px; background:#0f172a; border-radius:10px; }
.book-person-archive { margin-top:22px; padding-top:18px; border-top:1px solid var(--line, #dbe4ee); }

/* v149 — compact Family Book memory cards + print-friendly QR media access */
.book-person-archive .book-archive-grid article,
.book-archive-memories-page .book-archive-grid article{min-height:0}
.book-person-archive .book-archive-grid article:not(:has(>img)),
.book-archive-memories-page .book-archive-grid article:not(:has(>img)){grid-template-columns:1fr}
.book-person-archive .book-archive-grid article>div,
.book-archive-memories-page .book-archive-grid article>div{padding:12px 14px}
.book-media-access{display:flex;align-items:center;gap:10px;margin-top:9px;padding-top:9px;border-top:1px solid #edf1f6}
.book-media-access .book-media-qr{width:62px;height:62px;object-fit:contain;border:1px solid #e3e8ef;border-radius:7px;background:#fff;padding:3px;flex:0 0 62px}
.book-media-access>div{padding:0!important;min-width:0}
.book-media-access .book-archive-attachment{margin-top:0}
.book-media-access small{font-size:.68rem;line-height:1.25;margin-top:3px;color:#718096}
.book-archive-filename{font-size:.68rem;overflow-wrap:anywhere;max-width:100%}
@media print{
  .book-media-access .book-media-qr{width:54px;height:54px;flex-basis:54px}
  .book-person-archive .book-archive-grid,
  .book-archive-memories-page .book-archive-grid{gap:10px}
  .book-person-archive .book-archive-grid article,
  .book-archive-memories-page .book-archive-grid article{break-inside:avoid;page-break-inside:avoid}
}


/* v150 — tree switcher belongs to the internal Family Tree / Map / Book navigation. */
.tree-primary-nav .tree-internal-switcher{display:inline-flex;align-items:center;margin:0;}
.tree-primary-nav .tree-internal-switcher select{height:42px;min-width:170px;max-width:220px;border:1px solid var(--border);border-radius:9px;padding:7px 30px 7px 11px;background:var(--card);color:var(--text);font:inherit;font-weight:750;cursor:pointer;}
.tree-primary-nav .tree-internal-switcher select:hover{border-color:#b8c7dc;}
@media(max-width:800px){.tree-primary-nav .tree-internal-switcher,.tree-primary-nav .tree-internal-switcher select{width:100%;max-width:none;}}

/* v153 — clearer tree status + hide administrator-disabled Premium features */
.my-trees-v48 .tree-status-pill.active-status {
  background:#e7f8ed !important;
  color:#16814a !important;
  border:1px solid #b9e7c9 !important;
}
.my-trees-v48 .tree-status-pill.archived-status {
  background:#f3f4f6 !important;
  color:#6b7280 !important;
}
.my-trees-v48 .tree-status-pill.premium-locked-status {
  background:#f5f0ff !important;
  color:#7c3aed !important;
}


/* v155 — Editor tools for shared family-tree cards */
.collaboration-tree-actions{overflow:visible!important}
.shared-editor-menu{position:relative;margin:0}
.shared-editor-menu>summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex!important;align-items:center;justify-content:center;gap:7px}
.shared-editor-menu>summary::-webkit-details-marker{display:none}
.shared-editor-menu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:120;min-width:180px;padding:6px;border:1px solid #dbe4ee;border-radius:10px;background:#fff;box-shadow:0 14px 30px rgba(23,45,75,.18)}
.shared-editor-menu-panel a{display:block;padding:9px 10px;border-radius:7px;color:#17345f;text-decoration:none;font-size:13px;font-weight:750;white-space:nowrap}
.shared-editor-menu-panel a:hover{background:#f3f7fb}

/* v156 — shared Editor menu: viewport popup + consistent action alignment */
.family-collaboration-page .collaboration-tree-card,
.family-collaboration-page .collaboration-tree-card .my-tree-card-body,
.family-collaboration-page .collaboration-tree-actions{overflow:visible!important;}
.family-collaboration-page .collaboration-tree-actions{
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:center!important;
}
.family-collaboration-page .collaboration-tree-actions > .button,
.family-collaboration-page .collaboration-tree-actions > .button:first-child,
.family-collaboration-page .collaboration-tree-actions > .shared-editor-menu{
  width:100%!important;
  min-width:160px!important;
  box-sizing:border-box!important;
}
.family-collaboration-page .shared-editor-menu > summary{
  width:100%!important;
  min-height:42px!important;
  box-sizing:border-box!important;
}
.shared-editor-menu-panel.shared-editor-viewport-menu{
  position:fixed!important;
  z-index:10000!important;
  top:0;
  left:0;
  right:auto!important;
  min-width:190px!important;
  max-height:min(320px,calc(100vh - 16px));
  overflow-y:auto!important;
}


/* v157 — reliable shared-editor popup portal + shared-tree context on editor pages */
.shared-editor-menu-panel.shared-editor-viewport-menu{
  position:fixed!important;
  z-index:2147483000!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  margin:0!important;
}
.shared-editor-menu-panel.shared-editor-viewport-menu a{display:block!important;}
.people-tree-context{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:0 0 18px;padding:14px 16px;border:1px solid #dce7f1;border-radius:14px;
  background:linear-gradient(135deg,#f5fbf8,#f8fbff);
}
.people-tree-context strong{display:block;margin-top:3px;font-size:18px;color:#102b55;}
.people-tree-context .tree-internal-navigation{margin:0;}
.people-tree-context .tree-primary-nav{margin:0;}
.shared-tree-page-context{margin-top:5px!important;}
@media(max-width:850px){.people-tree-context{align-items:stretch;flex-direction:column}.people-tree-context .tree-primary-nav{flex-wrap:wrap}}

/* v158 — shared editor subpages: compact context without duplicate workspace nav */
.person-page-nav-stack{display:flex;align-items:flex-end;gap:10px;flex-direction:column;}
@media(max-width:760px){.person-page-nav-stack{align-items:stretch;}}

/* v162 — Family Archive navigation alignment */
.family-archive-heading-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:170px}
.family-archive-heading-actions .premium-back-button,.family-archive-heading-actions .archive-add-button{margin:0;width:100%;justify-content:center}
@media(max-width:900px){.family-archive-heading-actions{width:100%;min-width:0}}


/* v163 — shared-person timeline header visually matches the normal family timeline.
   Layout only: permissions, links, controls, and timeline behavior are unchanged. */
.timeline-page-heading.shared-timeline-page-heading{
  align-items:flex-start;
}
.timeline-page-heading.shared-timeline-page-heading .person-page-nav-stack{
  min-width:560px;
  align-items:flex-end;
}
.timeline-page-heading.shared-timeline-page-heading .timeline-screen-navigation{
  width:100%;
  justify-content:flex-end;
}
.timeline-page-heading.shared-timeline-page-heading + .timeline-view-controls{
  padding-left:360px;
}
@media(max-width:900px){
  .timeline-page-heading.shared-timeline-page-heading .person-page-nav-stack{min-width:0;width:100%;align-items:stretch;}
  .timeline-page-heading.shared-timeline-page-heading .timeline-screen-navigation{justify-content:flex-start;}
  .timeline-page-heading.shared-timeline-page-heading + .timeline-view-controls{padding-left:0;justify-content:flex-start;}
}

/* v164 — compact shared timeline header.
   Shared timeline keeps the existing Back/Theme/Print actions in one header block
   and suppresses the redundant active "Timeline View" button only. */
.shared-timeline-page-heading .timeline-screen-navigation .internal-nav-active{
  display:none;
}
.shared-timeline-page-heading .shared-timeline-inline-controls{
  margin:0;
  padding:0;
  width:100%;
  justify-content:flex-end;
}
@media(max-width:900px){
  .shared-timeline-page-heading .shared-timeline-inline-controls{
    justify-content:flex-start;
  }
}


/* v165 — condense shared timeline context/title copy without changing actions or behavior. */
.shared-timeline-heading-copy{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:5px;}
.shared-timeline-heading-copy .eyebrow{margin:0;}
.shared-timeline-heading-copy .shared-tree-page-context{margin:0;font-size:.88rem;}
.shared-timeline-heading-copy .shared-timeline-title-row{flex-basis:100%;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:4px;}
.shared-timeline-heading-copy .shared-timeline-title-row h1{margin:0;}
.shared-timeline-heading-copy .shared-timeline-title-row .timeline-screen-description{margin:0;}
@media(max-width:760px){
  .shared-timeline-heading-copy{display:block;}
  .shared-timeline-heading-copy .shared-tree-page-context{margin-top:4px;}
  .shared-timeline-heading-copy .shared-timeline-title-row{display:block;margin-top:8px;}
  .shared-timeline-heading-copy .shared-timeline-title-row .timeline-screen-description{display:block;margin-top:5px;}
}


/* v166 — shared timeline: remove duplicate context lines and keep one short message below person name. */
.shared-timeline-heading-copy .shared-timeline-title-row{display:block;margin-top:0;}
.shared-timeline-heading-copy .shared-timeline-title-row .timeline-screen-description{display:block;margin-top:6px;}

/* v170 — application-wide mobile responsiveness pass.
   Desktop layout is unchanged; these rules only apply to tablet/phone widths. */
@media (max-width: 900px) {
  html, body { max-width:100%; overflow-x:hidden; }
  img, video, canvas, svg { max-width:100%; }
  .page, .page.narrow, .form-page { width:100%; max-width:100%; }
  .page-heading, .tree-toolbar, .family-archive-heading, .ticket-heading {
    align-items:stretch; flex-direction:column;
  }
  .page-heading > .actions, .page-heading > .toolbar-controls,
  .tree-toolbar > .actions, .tree-toolbar > .toolbar-controls { width:100%; }
  .toolbar-controls { justify-content:flex-start; }
  .toolbar-controls label { flex:1 1 180px; }
  .toolbar-controls select { width:100%; }

  /* Cards and workspaces collapse cleanly to one column. */
  .tree-layout, .plan-summary-grid, .support-contact-grid,
  .tree-transfer-summary, .my-tree-grid { grid-template-columns:1fr!important; }
  .details-panel { position:static; }
  .family-archive-heading-actions { width:100%; }

  /* Generic tables stay usable without forcing the whole page wider. */
  .table-card, .plan-table-wrap, .tree-explorer-table-card { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { max-width:100%; }

  /* Visual family-tree/timeline canvases remain readable and pan horizontally. */
  .tree-surface, .book-tree-viewport, .family-map-shell, .timeline-shell,
  .timeline-stage, .infographic-tree-viewport { max-width:100%; overflow:auto; -webkit-overflow-scrolling:touch; }
}

@media (max-width: 720px) {
  body { font-size:14px; }
  .page { padding:14px 10px 28px!important; }
  h1 { font-size:1.55rem; line-height:1.18; }
  h2 { font-size:1.12rem; }

  /* Compact authenticated header for phones. */
  .global-topbar {
    position:sticky; top:0; display:grid!important;
    grid-template-columns:auto minmax(0,1fr); gap:7px 9px!important;
    padding:6px 9px!important; min-height:0!important;
  }
  .global-topbar .brand { grid-column:1; grid-row:1; width:auto!important; align-self:center; }
  .global-topbar .brand-logo { width:30px!important; height:30px!important; }
  .global-topbar .brand span { display:none!important; }
  .global-topbar .global-search-group {
    grid-column:2; grid-row:1; order:initial!important; width:100%!important;
    flex-basis:auto!important; margin:0!important; gap:6px!important; min-width:0!important;
  }
  .global-topbar .global-nav-search { min-width:0!important; }
  .global-topbar .global-nav-search input { height:34px!important; min-height:34px!important; font-size:13px; padding:7px 9px; }
  .global-topbar .notification-bell { width:34px!important; min-width:34px!important; }
  .global-topbar .nav-current-user { min-width:34px!important; padding:3px 4px!important; }
  .global-topbar .nav-current-user-copy, .global-topbar .user-menu-chevron { display:none!important; }
  .global-topbar .global-nav-actions {
    grid-column:1 / -1; grid-row:2; order:initial!important;
    width:100%!important; max-width:100%!important; margin:0!important;
    display:flex!important; flex-wrap:nowrap!important; overflow-x:auto!important;
    justify-content:flex-start!important; gap:6px!important; padding:1px 0 4px!important;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .global-topbar .global-nav-actions::-webkit-scrollbar { display:none; }
  .global-topbar .global-nav-actions .button,
  .global-topbar .global-nav-logout .button {
    flex:0 0 auto; min-height:34px!important; padding:6px 9px!important;
    font-size:12px!important; white-space:nowrap;
  }
  .global-nav-actions .nav-icon { display:none; }
  .notification-panel { top:58px!important; left:10px!important; right:10px!important; width:auto!important; max-height:70vh; }
  .nav-user-dropdown { position:fixed!important; top:58px!important; left:10px!important; right:10px!important; width:auto!important; max-height:calc(100vh - 70px); overflow:auto; }

  /* Forms/buttons use the available phone width. */
  .form-card, .table-card { padding:13px; border-radius:12px; }
  .form-grid.two, .form-grid.three, .create-tree-form { grid-template-columns:1fr!important; }
  .actions, .panel-actions { width:100%; }
  .actions > .button, .actions > form, .panel-actions > .button, .panel-actions > form { max-width:100%; }
  input, select, textarea { max-width:100%; }

  /* Family Trees / Shared Trees cards. */
  .my-trees-heading, .family-collaboration-page .my-trees-heading { gap:12px; }
  .create-tree-card { grid-template-columns:1fr!important; gap:16px; padding:16px; }
  .my-tree-grid { grid-template-columns:1fr!important; gap:12px; }
  .my-tree-card-body { padding:14px; }
  .my-tree-metrics { flex-direction:column; gap:5px; }
  .family-collaboration-page .collaboration-tree-card .my-tree-card-body { grid-template-columns:1fr!important; }
  .family-collaboration-page .collaboration-tree-actions { width:100%!important; min-width:0!important; }
  .family-collaboration-page .collaboration-tree-actions > .button,
  .family-collaboration-page .collaboration-tree-actions > .shared-editor-menu { min-width:0!important; width:100%!important; }

  /* Context headings used by People, Relationships, Life Events and Timeline. */
  .person-page-nav-stack { width:100%; align-items:stretch!important; }
  .timeline-page-heading, .shared-timeline-page-heading { gap:12px!important; }
  .timeline-page-heading .timeline-screen-navigation,
  .shared-timeline-page-heading .timeline-screen-navigation { justify-content:flex-start!important; width:100%!important; }
  .shared-timeline-inline-controls { justify-content:flex-start!important; flex-wrap:wrap; }

  /* Archive/workspace cards. */
  .family-archive-heading { gap:12px; }
  .family-archive-heading-actions { width:100%; min-width:0; }
  .family-archive-heading-actions .button { width:100%; }

  /* Preserve diagram legibility: pan the diagram rather than crushing it. */
  .tree-canvas { min-width:680px; }
  .branch-tree { min-width:820px; }
  .infographic-tree { min-width:900px!important; }
  .infographic-tree-stage { min-width:850px!important; }
  .tree-surface { min-height:480px; }

  /* Footer/value strips wrap instead of overflowing. */
  .workspace-values { display:grid!important; grid-template-columns:1fr 1fr!important; gap:0!important; }
  .workspace-values > * { min-width:0!important; }
}

@media (max-width: 430px) {
  .global-topbar .global-nav-actions .button,
  .global-topbar .global-nav-logout .button { font-size:11px!important; padding-inline:8px!important; }
  .workspace-values { grid-template-columns:1fr!important; }
  .button { padding-left:10px; padding-right:10px; }
  .people-tree-context { padding:11px 12px; }
}

/* v175 — Family Book themes are complete presentation systems, not background swaps. */
/* CLASSIC: formal genealogy volume — centered serif hierarchy, restrained rules and framed portraits. */
.family-book-theme-classic .book-page { border-top: 1px solid #d8dee5; }
.family-book-theme-classic .book-cover h1,
.family-book-theme-classic .book-page h2,
.family-book-theme-classic .book-page h3 { font-family: Georgia, "Times New Roman", serif; }
.family-book-theme-classic .book-person-header { justify-content: center; text-align: center; flex-direction: column; gap: 14px; }
.family-book-theme-classic .book-person-photo { width: 132px; height: 132px; border: 5px double #d7e0e7; }
.family-book-theme-classic .book-person-facts { border-top: 1px solid #dfe4e9; border-bottom: 1px solid #dfe4e9; padding: 8px 0; }
.family-book-theme-classic .book-generation-person { border-radius: 2px; }
.family-book-theme-classic .book-archive-grid article { border-radius: 2px; }

/* MODERN: editorial/photo-led book — bold sans type, asymmetric chapter hero and card-based milestones. */
.family-book-theme-modern .book-page { border-top: 8px solid var(--book-accent); border-radius: 0; }
.family-book-theme-modern .book-cover { text-align: left; justify-content: flex-end; }
.family-book-theme-modern .book-cover-content { margin: 0; max-width: 720px; }
.family-book-theme-modern .book-cover h1 { font-size: clamp(3.1rem, 7vw, 5rem); max-width: 680px; }
.family-book-theme-modern .book-cover-photo { width: 260px; height: 310px; margin: 28px 0 18px; border-radius: 18px; border: 0; box-shadow: 0 18px 45px rgba(17,24,39,.16); }
.family-book-theme-modern .book-cover-family-name { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; }
.family-book-theme-modern .book-cover-footer { text-align: left; }
.family-book-theme-modern .book-title-page { text-align: left; justify-content: flex-end; }
.family-book-theme-modern .book-title-stats { margin: 40px 0 20px; }
.family-book-theme-modern .book-title-stats > div { background: #f5f7fa; border: 0; border-left: 4px solid var(--book-accent); }
.family-book-theme-modern .book-person-header { display: grid; grid-template-columns: 190px 1fr; gap: 34px; align-items: end; border-bottom: 0; padding: 0 0 28px; }
.family-book-theme-modern .book-person-photo { width: 190px; height: 220px; border-radius: 14px; }
.family-book-theme-modern .book-person-heading-copy h2 { font-size: 2.7rem; line-height: 1; }
.family-book-theme-modern .book-person-facts { gap: 12px; }
.family-book-theme-modern .book-person-facts > div { background: #f5f7fa; border: 0; border-radius: 10px; padding: 14px 16px; }
.family-book-theme-modern .book-person-story { border-left: 4px solid var(--book-accent); padding-left: 20px; }
.family-book-theme-modern .book-timeline-row { grid-template-columns: 95px 1fr; gap: 14px; min-height: 0; margin: 10px 0; }
.family-book-theme-modern .book-timeline-marker { display: none; }
.family-book-theme-modern .book-timeline-date { text-align: left; padding: 15px 0 0; }
.family-book-theme-modern .book-timeline-content { background: #f5f7fa; border-radius: 12px; padding: 14px 16px; }
.family-book-theme-modern .book-generation-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.family-book-theme-modern .book-generation-person { display: grid; text-align: center; justify-items: center; border: 0; background: #f5f7fa; padding: 18px 12px; }
.family-book-theme-modern .book-generation-avatar { width: 64px; height: 64px; }

/* HERITAGE: archival keepsake — warm paper, ornamental rules, framed portraits and ledger-like chronology. */
.family-book-theme-heritage .book-page {
    border: 1px solid #d8c8aa;
    box-shadow: 0 12px 38px rgba(86,64,37,.14);
    background-image: linear-gradient(rgba(118,90,52,.025), rgba(118,90,52,.025));
}
.family-book-theme-heritage .book-cover-rule { inset: 28px; border: 3px double #9a7a4c; }
.family-book-theme-heritage .book-cover-kicker,
.family-book-theme-heritage .book-section-label { letter-spacing: .2em; }
.family-book-theme-heritage .book-cover-photo { border-radius: 4px; border: 8px double #b99b6a; padding: 3px; background: #fffaf0; }
.family-book-theme-heritage .book-cover-family-name::before,
.family-book-theme-heritage .book-cover-family-name::after { content: "❦"; margin: 0 12px; color: #9a7a4c; }
.family-book-theme-heritage .book-title-stats > div { border: 1px solid #d8c8aa; background: rgba(255,250,240,.72); }
.family-book-theme-heritage .book-person-header { border-bottom: 3px double #9a7a4c; }
.family-book-theme-heritage .book-person-photo { border-radius: 4px; border: 6px double #b99b6a; padding: 2px; background: #fffaf0; }
.family-book-theme-heritage .book-person-facts { border: 1px solid #ddceb3; padding: 12px 18px; background: rgba(255,250,240,.58); }
.family-book-theme-heritage .book-person-facts > div { border-bottom-color: #dfd0b7; }
.family-book-theme-heritage .book-person-story h3,
.family-book-theme-heritage .book-person-timeline h3 { border-bottom: 1px solid #b99b6a; padding-bottom: 7px; }
.family-book-theme-heritage .book-person-notes { background: #f4ead8; border-left-color: #9a7a4c; }
.family-book-theme-heritage .book-timeline-row { grid-template-columns: 120px 28px 1fr; }
.family-book-theme-heritage .book-timeline-marker::before { background: #c7b28d; }
.family-book-theme-heritage .book-timeline-marker::after { border-radius: 1px; transform: rotate(45deg); border-color: #765a34; background: #fffdf7; }
.family-book-theme-heritage .book-generation-person { border-color: #ddceb3; border-radius: 2px; background: rgba(255,250,240,.5); }
.family-book-theme-heritage .book-generation-avatar { border-radius: 4px; border: 2px solid #b99b6a; }
.family-book-theme-heritage .book-place-pills span { border-radius: 2px; border: 1px solid #d4c09d; }

@media (max-width: 760px) {
    .family-book-theme-modern .book-person-header { grid-template-columns: 1fr; align-items: start; }
    .family-book-theme-modern .book-person-photo { width: 130px; height: 150px; }
    .family-book-theme-modern .book-generation-grid { grid-template-columns: 1fr; }
    .family-book-theme-modern .book-timeline-row { grid-template-columns: 76px 1fr; }
}

/* v176 — collaboration workspace label/back-button consistency */
.family-premium-heading .shared-trees-back-button{white-space:nowrap;width:auto;flex:0 0 auto}


/* v177: make the selected family-tree context explicit on premium tool pages. */
.premium-tree-context { margin: 10px 0 18px; display: flex; justify-content: flex-start; }
.premium-tree-context label { display: flex; align-items: center; gap: 10px; font-weight: 800; color: #0b2347; }
.premium-tree-context select { min-width: 240px; max-width: 360px; padding: 9px 34px 9px 12px; border: 1px solid #cbd8e8; border-radius: 10px; background: #fff; color: #0b2347; font: inherit; }
.family-archive-heading-actions .premium-tree-context { margin: 0; width: 100%; }
.family-archive-heading-actions .premium-tree-context label { width: 100%; flex-direction: column; align-items: stretch; gap: 5px; }
.family-archive-heading-actions .premium-tree-context select { width: 100%; min-width: 0; }
.family-activity-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.family-activity-actions .premium-tree-context { margin: 0; }
@media (max-width: 700px) {
  .premium-tree-context label { width: 100%; flex-direction: column; align-items: stretch; gap: 5px; }
  .premium-tree-context select { width: 100%; max-width: none; min-width: 0; }
}

/* v178 — right-align the Family Tree context selector on Premium feature pages. */
.premium-tool-page > .premium-tree-context {
  justify-content: flex-end;
}
.family-archive-heading-actions .premium-tree-context,
.family-activity-actions .premium-tree-context {
  justify-content: flex-end;
  align-self: flex-end;
}
.family-archive-heading-actions .premium-tree-context label,
.family-activity-actions .premium-tree-context label {
  width: auto;
}
@media (max-width: 700px) {
  .premium-tool-page > .premium-tree-context,
  .family-archive-heading-actions .premium-tree-context,
  .family-activity-actions .premium-tree-context {
    justify-content: stretch;
    align-self: stretch;
  }
  .family-archive-heading-actions .premium-tree-context label,
  .family-activity-actions .premium-tree-context label {
    width: 100%;
  }
}


/* v179 — Family Archive: keep tree context beside the primary Archive action. */
.family-archive-heading-actions {
  min-width: 460px;
}
.family-archive-heading-actions > .premium-back-button {
  align-self: flex-end;
  width: auto;
}
.family-archive-primary-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
}
.family-archive-primary-actions .premium-tree-context {
  flex: 1 1 260px;
  width: auto;
}
.family-archive-primary-actions .premium-tree-context label {
  width: 100%;
}
.family-archive-primary-actions .premium-tree-context select {
  width: 100%;
  min-width: 240px;
}
.family-archive-primary-actions .archive-add-button {
  width: auto;
  min-width: 190px;
  flex: 0 0 auto;
}
@media (max-width: 900px) {
  .family-archive-heading-actions { min-width: 0; width: 100%; }
  .family-archive-heading-actions > .premium-back-button { align-self: stretch; width: 100%; }
  .family-archive-primary-actions { align-items: stretch; }
  .family-archive-primary-actions .archive-add-button { width: auto; }
}
@media (max-width: 700px) {
  .family-archive-primary-actions { flex-direction: column; }
  .family-archive-primary-actions .premium-tree-context { flex: 0 0 auto; width: 100%; }
  .family-archive-primary-actions .premium-tree-context select { min-width: 0; }
  .family-archive-primary-actions .archive-add-button { width: 100%; }
}

/* v180 — Family Activity History: workspace navigation above tree selector. */
.family-activity-actions > .button { align-self: flex-end; width: auto; white-space: nowrap; }
@media (max-width: 700px) { .family-activity-actions > .button { align-self: stretch; width: 100%; } }


/* v183 — Family Story Writer: title/description and Family Tree selector share one header row. */
.story-writer-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-top: 10px;
  margin-bottom: 18px;
}
.story-writer-heading-copy { flex: 1 1 auto; min-width: 0; }
.story-writer-heading-copy h1 { margin: 6px 0; }
.story-writer-heading-copy p { margin: 0; }
.story-writer-tree-context {
  flex: 0 0 auto;
  margin: 0;
  justify-content: flex-end;
}
.story-writer-tree-context label { white-space: nowrap; }
@media (max-width: 800px) {
  .story-writer-heading-row { align-items: stretch; flex-direction: column; gap: 14px; }
  .story-writer-tree-context { width: 100%; justify-content: stretch; }
  .story-writer-tree-context label { width: 100%; white-space: normal; }
  .story-writer-tree-context select { width: 100%; max-width: none; min-width: 0; }
}


/* v184 — Family Story Writer: Back to Premium sits above the Family Tree selector in the right header column. */
.story-writer-heading-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 340px;
}
.story-writer-heading-actions > .premium-back-button {
  align-self: flex-end;
  width: auto;
  white-space: nowrap;
}
.story-writer-heading-actions .story-writer-tree-context { width: 100%; }
@media (max-width: 800px) {
  .story-writer-heading-actions { width: 100%; min-width: 0; }
  .story-writer-heading-actions > .premium-back-button { align-self: stretch; width: 100%; }
}

/* v185 — Consistent premium tool header: navigation above Family Tree selector on the right. */
.premium-standard-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-top: 10px;
  margin-bottom: 18px;
}
.premium-standard-heading-copy { flex: 1 1 auto; min-width: 0; }
.premium-standard-heading-copy h1 { margin: 6px 0; }
.premium-standard-heading-copy p { margin: 0; }
.premium-standard-heading-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 340px;
}
.premium-standard-heading-actions > .premium-back-button {
  align-self: flex-end;
  width: auto;
  white-space: nowrap;
}
.premium-standard-heading-actions .premium-standard-tree-context {
  width: 100%;
  margin: 0;
  justify-content: flex-end;
}
.premium-standard-heading-actions .premium-standard-tree-context label { white-space: nowrap; }
@media (max-width: 800px) {
  .premium-standard-heading-row { align-items: stretch; flex-direction: column; gap: 14px; }
  .premium-standard-heading-actions { width: 100%; min-width: 0; }
  .premium-standard-heading-actions > .premium-back-button { align-self: stretch; width: 100%; }
  .premium-standard-heading-actions .premium-standard-tree-context { width: 100%; justify-content: stretch; }
  .premium-standard-heading-actions .premium-standard-tree-context label { width: 100%; white-space: normal; }
  .premium-standard-heading-actions .premium-standard-tree-context select { width: 100%; max-width: none; min-width: 0; }
}

/* v186 — Relationship Finder header alignment: keep navigation and tree context together at top-right. */
.relationship-finder-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 28px;
  row-gap: 10px;
  margin-top: 10px;
  margin-bottom: 18px;
}
.relationship-finder-heading-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 340px;
}
.relationship-finder-heading-actions .premium-back-button {
  width: auto;
  white-space: nowrap;
}
.relationship-finder-heading-actions .premium-tree-context {
  margin: 0;
  width: 100%;
  justify-content: flex-end;
}
@media (max-width: 800px) {
  .relationship-finder-heading-row { grid-template-columns: 1fr; align-items: stretch; }
  .relationship-finder-heading-actions { width: 100%; min-width: 0; align-items: stretch; }
  .relationship-finder-heading-actions .premium-back-button { width: 100%; }
  .relationship-finder-heading-actions .premium-tree-context { width: 100%; justify-content: stretch; }
  .relationship-finder-heading-actions .premium-tree-context label,
  .relationship-finder-heading-actions .premium-tree-context select { width: 100%; max-width: none; }
}

/* v187 — Normalize header action alignment across every Premium feature screen.
   Desktop: navigation button on the top-right, Family Tree selector directly below.
   Existing Archive/Activity navigation destinations remain unchanged. */
.premium-standard-heading-actions,
.story-writer-heading-actions,
.relationship-finder-heading-actions,
.family-archive-heading-actions,
.family-activity-actions {
  justify-self: end;
  align-self: end;
}
.premium-standard-heading-actions > .premium-back-button,
.story-writer-heading-actions > .premium-back-button,
.relationship-finder-heading-actions > .premium-back-button,
.family-archive-heading-actions > .premium-back-button,
.family-activity-actions > .button {
  align-self: flex-end;
  width: auto;
  white-space: nowrap;
}
.premium-standard-heading-actions .premium-tree-context,
.story-writer-heading-actions .premium-tree-context,
.relationship-finder-heading-actions .premium-tree-context,
.family-archive-heading-actions .premium-tree-context,
.family-activity-actions .premium-tree-context {
  justify-content: flex-end;
}
.family-activity-actions { min-width: 340px; }
.family-activity-actions .premium-tree-context { width: 100%; }
.family-activity-actions .premium-tree-context label { margin-left: auto; white-space: nowrap; }

@media (max-width: 800px) {
  .premium-standard-heading-actions,
  .story-writer-heading-actions,
  .relationship-finder-heading-actions,
  .family-archive-heading-actions,
  .family-activity-actions {
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    min-width: 0;
  }
  .premium-standard-heading-actions > .premium-back-button,
  .story-writer-heading-actions > .premium-back-button,
  .relationship-finder-heading-actions > .premium-back-button,
  .family-archive-heading-actions > .premium-back-button,
  .family-activity-actions > .button {
    align-self: stretch;
    width: 100%;
  }
  .family-activity-actions .premium-tree-context label { margin-left: 0; white-space: normal; }
}
\n\n/* v188 — Shared-tree life events + Archive header consistency.\n   Shared-tree Life Events no longer needs the redundant Timeline View control.\n   Archive keeps its three-way back-navigation logic, while matching the standard\n   Premium feature header: back button above, tree label + selector in one row. */\n@media (min-width: 801px) {\n  .family-archive-heading-actions {\n    min-width: 390px;\n  }\n  .family-archive-heading-actions .premium-tree-context {\n    width: 100%;\n  }\n  .family-archive-heading-actions .premium-tree-context label {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 12px;\n    width: 100%;\n    white-space: nowrap;\n  }\n  .family-archive-heading-actions .premium-tree-context select {\n    width: 250px;\n    min-width: 250px;\n  }\n  .family-archive-primary-actions {\n    justify-content: flex-end;\n  }\n  .family-archive-primary-actions .premium-tree-context {\n    flex: 0 1 auto;\n  }\n}\n
/* v189: make the target family explicit on the family import workspace. */
.import-tree-context {
    margin: 0.35rem 0 0.4rem;
    color: var(--text, #10264a);
    font-size: 1rem;
}
.import-tree-context strong {
    font-weight: 800;
}
/* v191 tree-scoped Backup/Restore + Advanced Export */
.protect-feature-page{max-width:1120px;margin:0 auto;padding-top:34px}
.protect-feature-header{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:24px}
.protect-feature-header h1{margin:8px 0 8px}.protect-feature-header p{margin:0;color:#667792}
.protect-feature-context{min-width:330px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.protect-feature-context .button{align-self:flex-end}
.protect-feature-context label{font-weight:800;display:flex;align-items:center;gap:12px;white-space:nowrap}
.protect-feature-context select{min-width:240px;padding:11px 38px 11px 12px;border:1px solid #ccd9e8;border-radius:10px;background:#fff;color:#102a50}
.protect-feature-card{border:1px solid #dbe4ee;border-radius:16px;background:#fff;padding:24px;margin:16px 0;box-shadow:0 8px 24px rgba(23,45,75,.05)}
.protect-feature-card h2{margin:7px 0 8px}.protect-feature-card p{color:#667792;max-width:760px;margin:0 0 18px}
@media(max-width:760px){.protect-feature-header{align-items:stretch;flex-direction:column}.protect-feature-context{min-width:0}.protect-feature-context .button{align-self:flex-start}.protect-feature-context label{align-items:stretch;flex-direction:column}.protect-feature-context select{width:100%;min-width:0}}

/* v192 Family Archive delete control: owner/editor only (template permission-gated). */
.archive-library-item{position:relative}
.archive-delete-form{position:absolute;top:10px;right:10px;z-index:6;margin:0}
.archive-delete-button{width:30px;height:30px;border-radius:999px;border:1px solid #d7deea;background:rgba(255,255,255,.96);color:#64748b;font-size:20px;line-height:26px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 10px rgba(15,23,42,.12)}
.archive-delete-button:hover,.archive-delete-button:focus-visible{background:#fff1f2;border-color:#fda4af;color:#be123c;outline:none}

/* ========================================================================== 
   v193 — application-wide responsive hardening
   Phone: <= 767px | Tablet: 768–1023px | Desktop: >= 1024px
   Keep data-dense family visualizations legible by scrolling/panning their own
   viewport instead of compressing the diagram or widening the document.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:hidden}
img,video{height:auto;max-width:100%}
input,select,textarea,button{max-width:100%}
.page,.internal-page,.admin-console,.family-premium-page,.premium-tool-page{max-width:100%}

/* Tablet */
@media (min-width:768px) and (max-width:1023px){
  .page{padding:22px 18px 38px!important}
  .global-topbar{flex-wrap:wrap!important;gap:8px 12px!important;padding:8px 14px!important}
  .global-topbar .brand{flex:0 0 auto}
  .global-topbar .global-search-group{order:2!important;flex:1 1 420px!important;max-width:none!important;margin-left:auto!important}
  .global-topbar .global-nav-actions{order:3!important;flex:1 0 100%!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;justify-content:flex-end!important;padding-bottom:3px;scrollbar-width:none}
  .global-topbar .global-nav-actions::-webkit-scrollbar{display:none}
  .page-heading,.ticket-heading,.family-premium-heading{gap:16px}
  .form-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .archive-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .premium-standard-heading-actions,.story-writer-heading-actions,.relationship-finder-heading-actions,.family-archive-heading-actions{min-width:320px!important}
  .admin-table-wrap,.table-card,.tree-explorer-table-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tree-surface,.book-tree-viewport,.infographic-tree-viewport,.timeline-stage,.family-map-shell{overflow:auto;-webkit-overflow-scrolling:touch}
}

/* Phone */
@media (max-width:767px){
  :root{--mobile-edge:12px}
  body{font-size:14px}
  .page,.page.narrow,.form-page,.internal-page,.admin-console,.family-premium-page,.premium-tool-page{width:100%!important;max-width:100%!important;padding-left:var(--mobile-edge)!important;padding-right:var(--mobile-edge)!important}
  h1{font-size:clamp(1.45rem,7vw,1.85rem)!important;line-height:1.15}
  h2{line-height:1.2}

  /* Header: compact first row; primary navigation becomes a touch-scroll row. */
  .global-topbar{position:sticky!important;top:0!important;display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:7px 8px!important;padding:6px 8px!important;min-height:0!important}
  .global-topbar .brand{grid-column:1!important;grid-row:1!important;margin:0!important;align-self:center}
  .global-topbar .brand-logo{width:30px!important;height:30px!important}
  .global-topbar .brand span{display:none!important}
  .global-topbar .global-search-group{grid-column:2!important;grid-row:1!important;order:initial!important;width:100%!important;min-width:0!important;max-width:none!important;flex-basis:auto!important;margin:0!important;gap:5px!important}
  .global-topbar .global-nav-search{min-width:0!important;flex:1 1 auto!important}
  .global-topbar .global-nav-search input{width:100%!important;height:34px!important;min-height:34px!important;font-size:13px!important;padding:6px 9px!important}
  .global-topbar .notification-bell{width:34px!important;min-width:34px!important;height:34px!important;padding:5px!important}
  .global-topbar .nav-current-user{width:34px!important;min-width:34px!important;height:34px!important;padding:3px!important;justify-content:center!important}
  .global-topbar .nav-current-user-copy,.global-topbar .user-menu-chevron{display:none!important}
  .global-topbar .global-nav-actions{grid-column:1/-1!important;grid-row:2!important;order:initial!important;display:flex!important;flex-wrap:nowrap!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;justify-content:flex-start!important;gap:6px!important;margin:0!important;padding:1px 0 4px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .global-topbar .global-nav-actions::-webkit-scrollbar{display:none}
  .global-topbar .global-nav-actions .button,.global-topbar .global-nav-logout .button{flex:0 0 auto!important;min-height:36px!important;padding:7px 10px!important;font-size:12px!important;white-space:nowrap!important}
  .global-nav-actions .nav-icon{display:none!important}
  .notification-panel,.nav-user-dropdown{position:fixed!important;left:8px!important;right:8px!important;top:58px!important;width:auto!important;max-width:none!important;max-height:calc(100vh - 70px)!important;overflow:auto!important}

  /* Headings/toolbars/navigation controls */
  .page-heading,.ticket-heading,.family-archive-heading,.family-premium-heading,.premium-standard-heading-row,.relationship-finder-heading-row,.protect-feature-header,.my-trees-heading{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  .page-heading>.actions,.page-heading>.toolbar-controls,.family-archive-heading-actions,.premium-standard-heading-actions,.story-writer-heading-actions,.relationship-finder-heading-actions,.family-activity-actions,.protect-feature-context{width:100%!important;min-width:0!important;max-width:none!important}
  .premium-standard-heading-actions>.premium-back-button,.story-writer-heading-actions>.premium-back-button,.relationship-finder-heading-actions>.premium-back-button,.family-archive-heading-actions>.premium-back-button{width:100%!important;align-self:stretch!important}
  .premium-tree-context,.premium-standard-tree-context,.story-writer-tree-context,.import-tree-context{width:100%!important;max-width:none!important}
  .premium-tree-context label,.premium-standard-tree-context label,.story-writer-tree-context label{width:100%!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:5px!important;white-space:normal!important}
  .premium-tree-context select,.premium-standard-tree-context select,.story-writer-tree-context select{width:100%!important;min-width:0!important;max-width:none!important}
  .toolbar-controls,.internal-page-nav,.tree-internal-tools,.person-life-nav,.timeline-screen-navigation{max-width:100%;overflow-x:auto;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .toolbar-controls::-webkit-scrollbar,.internal-page-nav::-webkit-scrollbar,.tree-internal-tools::-webkit-scrollbar,.person-life-nav::-webkit-scrollbar{display:none}
  .toolbar-controls>* ,.internal-page-nav>.button,.tree-internal-tools>.button,.person-life-nav>.button{flex:0 0 auto}

  /* Forms, cards, grids and actions */
  .form-grid,.form-grid.two,.form-grid.three,.create-tree-form,.support-contact-grid,.plan-summary-grid,.tree-transfer-summary,.archive-summary-grid,.archive-library-grid,.book-archive-grid{grid-template-columns:1fr!important}
  .form-card,.table-card,.family-panel,.premium-tool-card,.admin-panel{max-width:100%!important;padding:14px!important}
  .actions,.panel-actions,.my-tree-actions{max-width:100%;flex-wrap:wrap!important}
  .actions>.button,.panel-actions>.button{min-height:42px}
  .archive-toolbar{grid-template-columns:1fr!important}
  .archive-toolbar>*{width:100%!important;min-width:0!important}
  .archive-library-item{min-width:0}
  .archive-library-item p,.archive-library-item a{overflow-wrap:anywhere}
  .workspace-upgrade-strip{grid-template-columns:1fr!important}
  .workspace-upgrade-strip .button{width:100%!important;min-width:0!important}

  /* Tables stay inside their card. */
  .table-card,.admin-table-wrap,.plan-table-wrap,.tree-explorer-table-card{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .table-card table,.admin-table-wrap table,.plan-table-wrap table,.tree-explorer-table-card table{min-width:680px}

  /* Tree/map/timeline visualizations own their horizontal overflow. */
  .tree-layout{grid-template-columns:1fr!important;min-width:0!important}
  .details-panel{position:static!important;width:100%!important;max-width:none!important}
  .tree-surface,.book-tree-viewport,.infographic-tree-viewport,.timeline-shell,.timeline-stage,.family-map-shell{width:100%!important;max-width:100%!important;overflow:auto!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .tree-canvas{min-width:680px!important}
  .branch-tree{min-width:820px!important}
  .infographic-tree,.infographic-tree-stage{min-width:850px!important}

  /* Dialogs/popovers never exceed the viewport. */
  dialog,.modal,.dialog,.popover,[role="dialog"]{max-width:calc(100vw - 24px)!important;max-height:calc(100vh - 24px)!important}
  .search-results{max-width:calc(100vw - 24px)!important}
}

@media (max-width:430px){
  .page,.page.narrow,.form-page,.internal-page,.admin-console,.family-premium-page,.premium-tool-page{--mobile-edge:9px}
  .global-topbar .global-nav-actions .button,.global-topbar .global-nav-logout .button{font-size:11px!important;padding-inline:8px!important}
  .button{max-width:100%}
}
.atlas-header-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.atlas-location-links{display:flex;align-items:center;gap:8px;font:13px Arial,sans-serif;color:#647b94}
.atlas-location-links a{padding:7px 11px;border:1px solid #bdd3e7;border-radius:8px;color:#244c78;background:#fff;text-decoration:none;font-weight:600}
.atlas-location-links a:hover{background:#eef5fc}
.atlas-location-links a.active{background:#285c94;border-color:#285c94;color:#fff}
.atlas-location-links a:focus-visible{outline:3px solid #e7a600;outline-offset:2px}
@media(max-width:700px){.atlas-header{flex-direction:column}.atlas-header-actions{align-items:flex-start}.atlas-location-links{flex-wrap:wrap}}

/* Site appearance: original remains untouched. These palettes apply to all pages. */
html[data-site-theme="dark"] {
  color-scheme:dark;
  --bg:#101722;--card:#1b2635;--text:#f0f5fb;--muted:#afc0d3;
  --border:#3c5169;--accent:#71b9ff;--accent-soft:#243e59;
  --success:#6cdeaf;--danger:#ff8794;
  --shadow:0 12px 34px rgba(0,0,0,.27);--shadow-lg:0 22px 58px rgba(0,0,0,.4);
}
html[data-site-theme="sepia"] {
  color-scheme:light;
  --bg:#f5eddd;--card:#fff9ed;--text:#382d22;--muted:#625444;
  --border:#cdbda4;--accent:#805728;--accent-soft:#f0e3ca;
  --shadow:0 12px 34px rgba(69,45,23,.12);--shadow-lg:0 22px 58px rgba(69,45,23,.18);
}
html[data-site-theme="forest"] {
  color-scheme:light;
  --bg:#edf4ee;--card:#fbfefa;--text:#183628;--muted:#476452;
  --border:#b9d0bd;--accent:#246e4b;--accent-soft:#dcf0e3;
  --shadow:0 12px 34px rgba(21,69,40,.12);--shadow-lg:0 22px 58px rgba(21,69,40,.18);
}
html[data-site-theme]:not([data-site-theme="default"]) body,
html[data-site-theme]:not([data-site-theme="default"]) .auth-page,
html[data-site-theme]:not([data-site-theme="default"]) .auth-body,
html[data-site-theme]:not([data-site-theme="default"]) .public-form-page {
  background:var(--bg)!important;color:var(--text)!important;
}
html[data-site-theme]:not([data-site-theme="default"]) :is(.topbar,.global-topbar,.public-nav,.nav-user-dropdown,.notification-panel,.search-results,.theme-dashboard-card,.premium-admin-panel,.admin-console,.auth-card,.signin-card,.card,.panel,.form-card,.table-card,.admin-panel,.premium-card,.support-card,.tree-surface,.details-panel,.tree-stage,.tree-side-panel,.person-card,.sticky-card,.modal,.dialog,dialog,.popover,.atlas-card,.atlas-place-card,.atlas-sidebar,.atlas-location-card,.family-map-panel,.book-page,.book-card,.timeline-card,.page-section,.site-appearance-admin) {
  background:var(--card)!important;color:var(--text)!important;
  border-color:var(--border)!important;
}
html[data-site-theme]:not([data-site-theme="default"]) :is(.topbar,.global-topbar,.public-nav,.tree-toolbar,.nav-current-user,.user-dropdown-heading,.notification-panel-heading,.search-results,.tree-status,.facts>div,.atlas-location-links a) {
  border-color:var(--border)!important;
}
html[data-site-theme]:not([data-site-theme="default"]) :is(.brand,.page-heading h1,.tree-toolbar h1,h1,h2,h3,h4,th,td,dt,dd,.nav-current-user,.user-dropdown-heading,.theme-dashboard-card,.atlas-header,.atlas-place-card,.premium-admin-panel) {
  color:var(--text)!important;
}
html[data-site-theme]:not([data-site-theme="default"]) :is(.muted,.eyebrow,small,.page-heading p,.page-heading .muted,.facts dt,.atlas-location-links) {
  color:var(--muted)!important;
}
html[data-site-theme]:not([data-site-theme="default"]) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.search-wrap input,.global-nav-search input,.form-card input:not([type="checkbox"]),.form-card select,.form-card textarea,.atlas-location-links a,.internal-tree-menu,.tree-internal-tools,th) {
  background:var(--bg)!important;color:var(--text)!important;border-color:var(--border)!important;
}
html[data-site-theme]:not([data-site-theme="default"]) :is(.button.secondary,.nav-current-user,.nav-user-dropdown,.theme-state-pill,.theme-dashboard-row,.site-theme-picker-controls button) {
  background:var(--card)!important;color:var(--text)!important;border-color:var(--border)!important;
}
html[data-site-theme]:not([data-site-theme="default"]) :is(a:not(.button):not(.brand),.atlas-location-links a.active) {color:var(--accent)}
html[data-site-theme]:not([data-site-theme="default"]) .button:not(.secondary):not(.danger):not(.danger-outline):not(.premium-nav-button) {
  background:var(--accent);border-color:var(--accent);color:var(--bg);
}
html[data-site-theme="dark"] .button:not(.secondary):not(.danger):not(.danger-outline):not(.premium-nav-button) {color:#101722}
html[data-site-theme]:not([data-site-theme="default"]) :is(th,tbody tr:hover td,.search-result:hover,.search-result:focus,.theme-dashboard-head,.site-appearance-options form) {background:var(--accent-soft)!important;color:var(--text)!important}
html[data-site-theme]:not([data-site-theme="default"]) :is(img,video,canvas,.leaflet-container,.leaflet-tile,.leaflet-marker-icon,.map-container,.person-avatar img,.brand-logo) {filter:none}
@media print {html[data-site-theme]:not([data-site-theme="default"]) {color-scheme:light;--bg:#fff;--card:#fff;--text:#111;--muted:#444;--border:#aaa;--accent:#135d9d;--accent-soft:#eee}}
.site-appearance-admin{margin:0 0 20px;padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.site-appearance-admin h3{margin:0 0 6px}.site-appearance-admin form{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0}
.site-appearance-options{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}.site-appearance-options form{padding:8px 12px;border:1px solid var(--border);border-radius:10px}
.site-theme-picker{padding:12px 0;border-top:1px solid var(--border)}.site-theme-picker label{display:block;margin-bottom:6px;font-weight:700}
.site-theme-picker-controls{display:flex;align-items:center;gap:8px}.site-theme-picker-controls select{flex:1;min-width:0;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text)}

/* v207 — fit the My Family Trees workspace and tree cards on narrow phones.
   Earlier desktop rules set a 100%-height cover and fixed-width hero columns. */
@media (max-width:700px) {
  .my-trees-v48 > .workspace-hero {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    min-width:0!important;
    height:auto!important;
    overflow:visible!important;
  }
  .my-trees-v48 .workspace-hero-copy,
  .my-trees-v48 .modern-plan-card,
  .my-trees-v48 .modern-plan-card > div:last-child {
    min-width:0!important;
    max-width:100%!important;
  }
  .my-trees-v48 .workspace-hero-copy { grid-column:1!important; }
  .my-trees-v48 .workspace-hero-copy p { overflow-wrap:anywhere; }
  .my-trees-v48 .modern-plan-card {
    grid-column:1!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  .my-trees-v48 .my-tree-grid,
  .my-trees-v48 .my-tree-grid.single-tree-grid {
    grid-template-columns:minmax(0,1fr)!important;
    min-width:0!important;
  }
  .my-trees-v48 .my-tree-card,
  .my-trees-v48 .my-tree-grid.single-tree-grid .my-tree-card {
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
  }
  .my-trees-v48 .my-tree-card-cover,
  .my-trees-v48 .my-tree-grid.single-tree-grid .my-tree-card-cover {
    flex:0 0 96px!important;
    width:100%!important;
    height:96px!important;
    min-height:96px!important;
    max-height:96px!important;
    border-radius:14px 14px 0 0!important;
  }
  .my-trees-v48 .my-tree-card-body,
  .my-trees-v48 .my-tree-grid.single-tree-grid .my-tree-card-body {
    display:block!important;
    flex:0 0 auto!important;
    min-width:0!important;
    padding:16px!important;
  }
  .my-trees-v48 .tree-card-title-row,
  .my-trees-v48 .tree-name-display { min-width:0!important; }
  .my-trees-v48 .tree-display-name { overflow-wrap:anywhere; }
  .my-trees-v48 .my-tree-metrics {
    width:100%!important;
    max-width:100%!important;
    margin:12px 0!important;
  }
  .my-trees-v48 .my-tree-actions {
    position:static!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    margin:12px 0 0!important;
    padding:0!important;
    border:0!important;
    transform:none!important;
  }
  .my-trees-v48 .my-tree-actions > .button:first-child {
    min-width:0!important;
    width:auto!important;
  }
}

/* v208 — keep the My Family Trees value footer legible on phones. */
@media (max-width:700px) {
  .my-trees-v48 .trees-to-values-gap {
    height:14px!important;
    min-height:14px!important;
  }
  .my-trees-v48 .workspace-values {
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin:0 10px 20px!important;
    padding:12px!important;
  }
  .my-trees-v48 .workspace-values > div {
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    min-width:0!important;
    min-height:84px!important;
    padding:10px 6px!important;
    border-left:0!important;
    border-top:0!important;
    font-size:20px!important;
    line-height:1.1!important;
    text-align:center!important;
  }
  .my-trees-v48 .workspace-values > div strong {
    max-width:100%!important;
    font-size:12px!important;
    line-height:1.3!important;
    overflow-wrap:anywhere;
  }
}

/* v209 — Shared Trees cards use the same compact phone layout as My Trees. */
@media (max-width:700px) {
  .family-collaboration-page .collaboration-tree-grid,
  .family-collaboration-page .collaboration-tree-grid.single-tree-grid {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .family-collaboration-page .collaboration-tree-card,
  .family-collaboration-page .collaboration-tree-grid.single-tree-grid .collaboration-tree-card {
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
  }
  .family-collaboration-page .collaboration-tree-card .my-tree-card-cover,
  .family-collaboration-page .collaboration-tree-grid.single-tree-grid .collaboration-tree-card .my-tree-card-cover {
    flex:0 0 96px!important;
    width:100%!important;
    height:96px!important;
    min-height:96px!important;
    max-height:96px!important;
    border-radius:14px 14px 0 0!important;
  }
  .family-collaboration-page .collaboration-tree-card .my-tree-card-body,
  .family-collaboration-page .collaboration-tree-grid.single-tree-grid .collaboration-tree-card .my-tree-card-body {
    display:flex!important;
    flex-direction:column!important;
    flex:0 0 auto!important;
    min-width:0!important;
    padding:16px!important;
  }
  .family-collaboration-page .collaboration-tree-card .collaboration-tree-actions {
    position:static!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    margin:12px 0 0!important;
    padding:0!important;
    border:0!important;
    transform:none!important;
  }
  .family-collaboration-page .collaboration-tree-card .collaboration-tree-actions > .button,
  .family-collaboration-page .collaboration-tree-card .collaboration-tree-actions > .button:first-child,
  .family-collaboration-page .collaboration-tree-card .collaboration-tree-actions > .shared-editor-menu {
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
  }
  .family-collaboration-page .workspace-values {
    width:calc(100% - 20px)!important;
    margin:0 10px 20px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* v210 — keep the selected Family Tree tools and Family Map usable on phones. */
@media (max-width:700px) {
  .tree-page .tree-canvas-toolbar {
    width:100%!important;
    box-sizing:border-box!important;
    min-width:0!important;
    padding:10px!important;
  }
  .tree-page .tree-canvas-toolbar .tree-secondary-tools {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    overflow:visible!important;
    white-space:normal!important;
  }
  .tree-page .tree-canvas-toolbar .tree-secondary-tools > button,
  .tree-page .tree-canvas-toolbar .tree-secondary-tools > label {
    box-sizing:border-box!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
  }
  .tree-page .tree-canvas-toolbar .tree-secondary-tools > button {
    min-height:42px!important;
    white-space:normal!important;
  }
  .tree-page .tree-canvas-toolbar .tree-secondary-tools select {
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .tree-page .tree-layout { min-width:0!important; }
  .tree-page .tree-surface { min-width:0!important; }
  .family-map-v2-page .family-atlas {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:12px!important;
  }
  .family-map-v2-page .atlas-header { gap:12px!important; }
  .family-map-v2-page .atlas-header h2 { font-size:clamp(24px,7vw,30px)!important; }
  .family-map-v2-page .atlas-header blockquote {
    box-sizing:border-box!important;
    min-width:0!important;
    width:100%!important;
    text-align:left!important;
    font-size:14px!important;
  }
  .family-map-v2-page .atlas-body {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
  }
  .family-map-v2-page .atlas-map-wrap { min-width:0!important; width:100%!important; }
  .family-map-v2-page .atlas-map {
    box-sizing:border-box!important;
    display:block!important;
    width:100%!important;
    height:clamp(300px,52vh,430px)!important;
    min-width:0!important;
  }
  .family-map-v2-page .atlas-locations {
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-height:230px!important;
    overflow-y:auto!important;
  }
  .family-map-v2-page .atlas-footer { grid-template-columns:minmax(0,1fr)!important; }
  .family-map-v2-page .atlas-stats { flex-wrap:wrap!important; gap:8px!important; }
  .family-map-v2-page .atlas-stats > span { border-left:0!important; padding-left:0!important; }
}

/* v211 — preserve full SVG relationship geometry when the tree pans on phones. */
.tree-mobile-menu{display:none}
@media (max-width:700px) {
  .tree-page .complete-family-svg,
  .tree-page .infographic-tree-svg,
  .tree-page .sticky-tree-svg,
  .tree-page .colorbox-tree-svg {
    max-width:none!important;
    max-height:none!important;
  }
  .tree-page { padding-bottom:78px!important; }
  .tree-page .tree-mobile-menu {
    position:fixed;
    left:10px;
    right:10px;
    bottom:max(10px,env(safe-area-inset-bottom));
    z-index:850;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--card);
    box-shadow:0 5px 20px rgba(20,35,55,.18);
  }
  .tree-page .tree-mobile-menu > .button {
    flex:1 1 auto;
    min-height:40px!important;
    min-width:0!important;
    padding:8px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  .tree-page .tree-mobile-menu > .button[aria-pressed="true"] {
    border-color:var(--accent)!important;
  }
}
@media print {.tree-mobile-menu{display:none!important}}

/* Person pages: keep every action and table field visible on phones. */
@media (max-width:700px) {
  .life-events-page .person-page-nav-stack,
  .timeline-page .person-page-nav-stack { min-width:0; max-width:100%; width:100%; }
  .life-events-page .person-page-nav-stack > .button,
  .timeline-page .person-page-nav-stack > .button { width:100%; justify-content:center; }
  .life-events-page .person-page-nav-stack > div,
  .timeline-page .person-page-nav-stack > div { min-width:0; width:100%; }
  .life-events-page .timeline-screen-navigation,
  .timeline-page .timeline-screen-navigation {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:0;
  }
  .life-events-page .timeline-screen-navigation > .button,
  .timeline-page .timeline-screen-navigation > .button {
    min-width:0!important;
    width:100%!important;
    white-space:normal!important;
    text-align:center;
    line-height:1.25;
    min-height:44px;
    padding:8px 5px!important;
    justify-content:center;
  }
  .life-events-page .timeline-profile,
  .timeline-page .timeline-profile { max-width:100%; min-width:0; }
  .life-events-page .life-events-list-card { max-width:100%; min-width:0; overflow:hidden; }
  .life-events-page .life-events-list-header { flex-wrap:wrap; gap:12px; padding:14px; }
  .life-events-page .life-events-list-header > div { flex-wrap:wrap; }
  .life-events-page .life-events-list-header form,
  .life-events-page .life-events-list-header .button { max-width:100%; }
  .life-events-page .life-events-table-wrap,
  .people-workspace-page .table-card { overflow:visible!important; width:100%!important; }
  .life-events-page .life-events-table,
  .people-workspace-page .table-card table {
    display:block;
    width:100%!important;
    min-width:0!important;
    table-layout:auto;
  }
  .life-events-page .life-events-table thead,
  .people-workspace-page .table-card thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .life-events-page .life-events-table tbody,
  .people-workspace-page .table-card tbody { display:block; width:100%; }
  .life-events-page .life-events-table tbody tr,
  .people-workspace-page .table-card tbody tr {
    display:block;
    min-width:0;
    padding:8px 0;
    border-bottom:1px solid var(--border);
  }
  .life-events-page .life-events-table tbody tr:last-child,
  .people-workspace-page .table-card tbody tr:last-child { border-bottom:0; }
  .life-events-page .life-events-table tbody td,
  .people-workspace-page .table-card tbody td {
    display:block;
    position:relative;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    padding:8px 12px 8px 112px!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    border:0;
  }
  .life-events-page .life-events-table tbody td::before,
  .people-workspace-page .table-card tbody td::before {
    content:attr(data-label);
    position:absolute;
    left:12px;
    top:9px;
    width:88px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    line-height:1.25;
  }
  .life-events-page .event-row-actions,
  .people-workspace-page .people-row-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; white-space:normal; }
  .life-events-page .event-title-cell span { overflow-wrap:anywhere; }
  .people-workspace-page .people-page-actions { width:100%; display:flex; flex-wrap:wrap!important; gap:8px; }
  .people-workspace-page .people-page-actions > .inline-form { width:100%; }
  .people-workspace-page .people-page-actions > .inline-form .button { width:100%; }
}
@media (max-width:350px) {
  .life-events-page .timeline-screen-navigation,
  .timeline-page .timeline-screen-navigation { grid-template-columns:1fr; }
}

/* Account profile and the signed-in user menu */
.nav-user-dropdown .user-profile-edit-icon {
  display:inline-flex;
  flex:0 0 36px;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--accent,#2167be);
  background:var(--card,#fff);
  text-decoration:none;
}
.nav-user-dropdown .user-profile-edit-icon:hover { filter:brightness(.94); }
.nav-user-dropdown .user-profile-edit-icon:focus-visible { outline:2px solid var(--accent,#2167be); outline-offset:2px; }
.nav-user-dropdown .user-dropdown-heading > div { min-width:0; }
.nav-user-dropdown .user-dropdown-heading > div strong,
.nav-user-dropdown .user-dropdown-heading > div small { overflow-wrap:anywhere; }
.profile-settings-page { max-width:860px; }
.profile-settings-page .form-card { margin-top:18px; }
.profile-settings-page .form-card h2 { margin:0 0 12px; }
.profile-settings-page .form-card h3 { margin:0 0 8px; }
.profile-settings-page .form-card label { display:block; margin:12px 0; }
.profile-settings-page .form-card label input,
.profile-settings-page .form-card label select { display:block; width:100%; margin-top:6px; }
.profile-settings-page .form-card label small { display:block; color:var(--danger,#b52230); }
.profile-email-form,.profile-email-confirm { border-top:1px solid var(--border); margin-top:20px; padding-top:18px; }
.profile-settings-page .profile-email-form { border-top:0; margin-top:8px; padding-top:0; }
.profile-settings-page .form-card p { overflow-wrap:anywhere; }
@media (max-width:700px) {
  .profile-settings-page .page-heading > .button { width:100%; justify-content:center; }
  .profile-settings-page .form-card .button { max-width:100%; min-height:44px; }
}


/* v216: compact one-click appearance chooser in the user details menu. */
.site-theme-picker{padding:12px 0;border-top:1px solid var(--border)}
.site-theme-picker-label{display:block;margin-bottom:8px;font-weight:700}
.site-theme-icon-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.site-theme-icon-form{margin:0;min-width:0}
.site-theme-icon{width:100%;min-height:58px;padding:7px 4px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:inherit;font-size:11px;font-weight:700;line-height:1.1;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.site-theme-icon-glyph{font-size:21px;line-height:1;font-weight:400}
.site-theme-icon:hover{border-color:var(--accent);transform:translateY(-1px)}
.site-theme-icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.site-theme-icon.selected{border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 16%,transparent)}
html[data-site-theme]:not([data-site-theme="default"]) .site-theme-icon{background:var(--card)!important;color:var(--text)!important}
html[data-site-theme]:not([data-site-theme="default"]) .site-theme-icon.selected{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--card))!important}
@media(max-width:420px){.site-theme-icon-row{grid-template-columns:repeat(2,minmax(0,1fr))}.site-theme-icon{min-height:54px}}

/* v220: statistics span the card content independently of the empty notice column. */
@media (min-width:1051px){
 .my-trees-v48 .my-tree-card-body > .my-tree-metrics,
 .my-trees-v48 .my-tree-card-body:has(.empty-tree-guidance) > .my-tree-metrics{
  grid-column:1 / -1!important;
  grid-row:3!important;
  width:calc(100% - 296px)!important;
  max-width:650px!important;
  justify-self:start!important;
 }
}

/* v222: keep life-event headings readable and back navigation above the tabs. */
.internal-page .life-events-heading {
 display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px;
}
.internal-page .life-events-heading > :first-child {
 flex:1 1 320px; min-width:min(320px,100%);
}
.internal-page .life-events-heading > .person-page-nav-stack {
 display:flex; flex-direction:column; align-items:flex-end;
 flex:0 1 auto; min-width:0; max-width:100%; gap:10px; margin-left:auto;
}
.internal-page .life-events-heading .internal-page-nav {
 display:flex; flex-wrap:wrap; justify-content:flex-end; max-width:100%; white-space:normal;
}
.internal-page .life-events-heading .person-page-nav-stack > div {max-width:100%;}
@media(max-width:760px){
 .internal-page .life-events-heading > :first-child{flex-basis:auto;}
 .internal-page .life-events-heading > .person-page-nav-stack{width:100%;}
 .internal-page .life-events-heading .internal-page-nav{justify-content:flex-start;}
}

/* v224: the active Timeline View tab stays visible in the shared workspace. */
.shared-timeline-page-heading .timeline-screen-navigation .internal-nav-active {
  display: inline-flex;
}
/* Keep the archive selector at the right edge under the return button. */
@media (min-width: 901px) {
  .family-archive-heading-actions { align-items: flex-end; }
  .family-archive-heading-actions .family-archive-primary-actions {
    width: 100%; justify-content: flex-end; align-items: flex-end;
  }
  .family-archive-heading-actions .archive-tree-context {
    flex: 0 1 360px; width: 360px; max-width: 100%; margin-left: auto;
  }
  .family-archive-heading-actions .archive-tree-context label {
    width: 100%; display: flex; flex-direction: column; align-items: stretch;
    gap: 5px; white-space: normal;
  }
  .family-archive-heading-actions .archive-tree-context select {
    box-sizing: border-box; width: 100%; min-width: 0;
  }
}

/* v225: admin tree return control sits above the existing view switcher. */
.tree-admin-heading-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:0; }
.tree-admin-heading-actions > .button { align-self:flex-end; }
@media (max-width:760px) { .tree-admin-heading-actions { align-items:flex-start; width:100%; } .tree-admin-heading-actions > .button { align-self:flex-start; } }

/* Real Book uses the very same rendered pages as the printable preview. */
.family-book-builder-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.real-book-mode { background: #e6e1d7; }
.real-book-mode .family-book-document {
    position: relative;
    perspective: 1800px;
    margin: 22px auto 70px;
    filter: drop-shadow(12px 16px 14px rgba(33, 28, 23, .2));
}
.real-book-mode .family-book-document::before {
    content: ''; position: absolute; inset: 8px -10px -9px 9px;
    background: repeating-linear-gradient(0deg, #e5ded0 0 2px, #f9f5eb 2px 4px);
    border: 1px solid #c9c1b3; border-radius: 5px; pointer-events: none;
}
.real-book-mode .family-book-document > .book-page { display: none; margin: 0; min-height: min(1080px, calc(100vh - 220px)); max-height: max(700px, calc(100vh - 210px)); overflow: auto; border: 1px solid #ddd5c6; box-shadow: inset 12px 0 20px rgba(61, 50, 31, .07), 0 12px 30px rgba(38, 32, 23, .2); }
.real-book-mode .family-book-document > .book-page.is-active { display: block; animation: real-book-turn .34s ease-out both; transform-origin: left center; }
.real-book-mode .family-book-document > .book-cover.is-active,
.real-book-mode .family-book-document > .book-ending-page.is-active { display: flex; }
.real-book-mode .family-book-document > .book-page.turn-back { transform-origin: right center; animation-name: real-book-turn-back; }
@keyframes real-book-turn { from { opacity: .55; transform: rotateY(-13deg); } to { opacity: 1; transform: rotateY(0); } }
@keyframes real-book-turn-back { from { opacity: .55; transform: rotateY(13deg); } to { opacity: 1; transform: rotateY(0); } }
.real-book-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 18px auto 0; }
.real-book-controls span { min-width: 120px; text-align: center; font-weight: 700; }
.real-book-controls button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 760px) {
    .family-book-builder-actions, .family-book-builder-actions .button { width: 100%; }
    .real-book-mode .family-book-document > .book-page { min-height: min(650px, 75vh); max-height: 75vh; }
    .real-book-controls { gap: 8px; }
    .real-book-controls .button { padding: 9px; }
    .real-book-controls span { min-width: 75px; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .real-book-mode .family-book-document > .book-page.is-active { animation: none; } }
@media print {
    .real-book-mode .family-book-document { filter: none; margin: 0; perspective: none; }
    .real-book-mode .family-book-document::before { display: none; }
    .real-book-mode .family-book-document > .book-page,
    .real-book-mode .family-book-document > .book-page.is-active,
    .real-book-mode .family-book-document > .book-cover.is-active,
    .real-book-mode .family-book-document > .book-ending-page.is-active { display: block !important; animation: none !important; transform: none !important; min-height: 0; max-height: none; overflow: visible; border: 0; box-shadow: none; }
}
.family-book-builder-summary > .family-book-builder-actions { display: flex; }
@media (max-width: 760px) { .family-book-builder-summary > .family-book-builder-actions { flex-direction: column; } }
@media print {
    .real-book-mode .family-book-document > .book-cover.is-active,
    .real-book-mode .family-book-document > .book-ending-page.is-active { display: flex !important; }
}

/* Bound volume covers: scope to Real Book so the standard printable preview keeps its layout. */
.family-book-preview-body.real-book-mode .family-book-document > .book-cover,
.family-book-preview-body.real-book-mode .family-book-document > .book-ending-page {
    --cover-gold: #c9aa72;
    color: #fff5e5;
    border: 1px solid #463c34;
    border-left: 20px solid #2c2930;
    border-radius: 5px 13px 13px 5px;
    background: radial-gradient(circle at 72% 20%, rgba(229,187,124,.24), transparent 34%),
        radial-gradient(circle at 15% 85%, rgba(0,0,0,.46), transparent 55%),
        repeating-linear-gradient(106deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px),
        linear-gradient(140deg, #173a43 0%, #173d44 42%, #112a35 100%);
    box-shadow: inset 5px 0 8px #0d222a, inset 0 0 0 5px rgba(201,170,114,.29),
        inset 0 0 0 11px rgba(13,39,46,.8), 0 18px 36px rgba(27,32,30,.32);
    text-align: center;
    justify-content: center;
    isolation: isolate;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}
.family-book-preview-body.real-book-mode .family-book-document > .book-cover::before,
.family-book-preview-body.real-book-mode .family-book-document > .book-ending-page::before {
    content: ''; position: absolute; inset: 29px 22px 29px 16px;
    border: 1px solid rgba(221,187,122,.65); border-radius: 2px 7px 7px 2px;
    box-shadow: inset 0 0 0 5px rgba(201,170,114,.1);
    pointer-events: none;
}
.family-book-preview-body.real-book-mode .book-cover-rule { inset: 45px 39px 45px 33px; border-color: rgba(201,170,114,.46); }
.family-book-preview-body.real-book-mode .book-cover-content { margin: auto; max-width: 650px; }
.family-book-preview-body.real-book-mode .book-cover-kicker,
.family-book-preview-body.real-book-mode .book-ending-mark { color: #e2c99b; font: 700 .82rem Georgia,serif; letter-spacing: .27em; text-transform: uppercase; }
.family-book-preview-body.real-book-mode .book-cover h1 { color: #fff9ed; font: 500 clamp(2.7rem, 6vw, 5rem)/1.06 Georgia,serif; text-wrap: balance; text-shadow: 0 3px 20px rgba(0,0,0,.3); }
.family-book-preview-body.real-book-mode .book-cover-subtitle,
.family-book-preview-body.real-book-mode .book-cover-family-name,
.family-book-preview-body.real-book-mode .book-cover-footer { color: #f0dcc0; }
.family-book-preview-body.real-book-mode .book-cover-family-name { font: 500 1.25rem Georgia,serif; letter-spacing: .11em; }
.family-book-preview-body.real-book-mode .book-cover-photo { border: 4px solid #c9aa72; box-shadow: 0 10px 30px rgba(0,0,0,.36); }
.family-book-preview-body.real-book-mode .book-cover-footer { z-index: 1; text-align: center; }
.family-book-preview-body.real-book-mode .family-book-document > .book-ending-page {
    background: radial-gradient(circle at 50% 36%, rgba(225,187,121,.23), transparent 39%),
        repeating-linear-gradient(105deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px),
        linear-gradient(145deg, #18303e, #112630 70%, #0e222c);
    align-items: center;
    gap: 12px;
    padding: 90px 75px;
}
.family-book-preview-body.real-book-mode .book-ending-ornament { color: #dfbd84; font-size: 3.7rem; line-height: 1; }
.family-book-preview-body.real-book-mode .book-ending-page h2 { color: #fff7e8; font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 500; text-wrap: balance; }
.family-book-preview-body.real-book-mode .book-ending-page p { color: #f0ddc7; max-width: 490px; }
.family-book-preview-body.real-book-mode .book-ending-signature { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(224,188,127,.7); color: #e5c797; font: italic 1.15rem Georgia,serif; }
.family-book-preview-body.real-book-mode .family-book-document > .book-cover.is-opening {
    display: flex; position: absolute; inset: 0; z-index: 4; min-height: 100%; max-height: none;
    overflow: hidden; backface-visibility: hidden; transform-origin: left center;
    animation: real-book-open-cover .85s cubic-bezier(.24,.55,.3,1) forwards;
    pointer-events: none;
}
@keyframes real-book-open-cover {
    0% { transform: rotateY(0); opacity: 1; }
    65% { opacity: 1; }
    100% { transform: rotateY(-175deg); opacity: 0; }
}
@media (max-width: 760px) {
    .family-book-preview-body.real-book-mode .family-book-document > .book-cover,
    .family-book-preview-body.real-book-mode .family-book-document > .book-ending-page { border-left-width: 10px; }
    .family-book-preview-body.real-book-mode .family-book-document > .book-ending-page { padding: 54px 38px; }
    .family-book-preview-body.real-book-mode .book-cover-footer { bottom: 33px; left: 32px; right: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .family-book-preview-body.real-book-mode .family-book-document > .book-cover.is-opening { animation: none; display: none; }
}
@media print {
    .family-book-preview-body.real-book-mode .family-book-document > .book-cover.is-opening { position: relative; inset: auto; animation: none; }
    .family-book-preview-body.real-book-mode .family-book-document > .book-cover,
    .family-book-preview-body.real-book-mode .family-book-document > .book-ending-page { min-height: 9.2in; max-height: none; break-after: page; }
}
@media print {
    .family-book-preview-body.real-book-mode .family-book-document > .book-cover,
    .family-book-preview-body.real-book-mode .family-book-document > .book-ending-page { display: flex !important; }
}

/* Marketing editor: prevent intrinsic field/button sizes expanding narrow overlays. */
.premium-dashboard-marketing .marketing-popover { padding:64px 18px 18px; }
.marketing-form-clean { grid-template-columns:minmax(0,1fr); min-width:0; width:100%; }
.marketing-field { grid-template-columns:minmax(0,1fr); min-width:0; }
.marketing-field input,.marketing-field textarea { min-width:0; max-width:100%; box-sizing:border-box; }
.marketing-form-grid { min-width:0; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); }
.marketing-form-actions { min-width:0; flex-wrap:wrap; }
.marketing-form-actions .button { min-width:0; max-width:100%; box-sizing:border-box; white-space:normal; overflow-wrap:break-word; }
@media(max-width:700px) {
    .marketing-form-grid { grid-template-columns:minmax(0,1fr); }
    .marketing-form-actions { flex-direction:column; align-items:stretch; }
    .marketing-form-actions .button { width:100%; }
    .premium-dashboard-marketing .marketing-popover { padding:64px 14px 14px; }
}

/* Relationship editing is a toggle, with a shared mouse/touch drag affordance. */
#relationshipEditToggle[aria-pressed="true"] { background:#31558a!important; border-color:#31558a!important; color:#fff!important; box-shadow:0 0 0 3px rgba(49,85,138,.2)!important; }
.relationship-edit-mode .relationship-draggable { touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; }
.relationship-edit-mode .relationship-draggable img { -webkit-user-drag:none; pointer-events:none; }
.relationship-edit-mode .relationship-pointer-dragging { opacity:.45; cursor:grabbing; }
.relationship-edit-mode .relationship-drop-target { outline:3px solid #247d52!important; outline-offset:4px; box-shadow:0 0 0 7px rgba(36,125,82,.18)!important; }
.relationship-drag-ghost { position:fixed!important; z-index:10000!important; pointer-events:none!important; margin:0!important; transform:none!important; opacity:.92!important; box-sizing:border-box; background:#fff!important; box-shadow:0 12px 28px rgba(16,35,65,.3)!important; border:2px solid #31558a!important; overflow:hidden; }
@media print { .relationship-drag-ghost { display:none!important; } }

/* Shared All-generations renderer: SVG paths need a stroke in every theme. */
.complete-family-svg .complete-family-line,
.complete-family-svg .complete-partner-line {
    fill:none;
    stroke:#334d6c;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}
.complete-themed-unit { gap:16px; }
html[data-site-theme="dark"] .complete-family-svg .complete-family-line,
html[data-site-theme="dark"] .complete-family-svg .complete-partner-line { stroke:#bdd3f0; }
@media print {
    .complete-family-svg .complete-family-line,
    .complete-family-svg .complete-partner-line { stroke:#222!important; }
}

/* Supplied FamilyTree artwork: preserve its full aspect ratio and colors. */
.brand .brand-logo, .global-topbar .brand-logo {
 width:64px!important;height:64px!important;flex:0 0 64px!important;
 object-fit:contain;background:transparent!important;border-radius:0;filter:none!important;
}
.auth-family-logo{display:block;width:160px;height:160px;object-fit:contain;margin:0 auto 18px;border-radius:12px;}
@media(max-width:720px){
 .brand .brand-logo,.global-topbar .brand-logo{width:48px!important;height:48px!important;flex-basis:48px!important;}
}

/* Larger supplied header artwork; the sign-in card retains its original mark. */
.brand .brand-logo,.global-topbar .brand-logo{width:96px!important;height:96px!important;flex-basis:96px!important;}
@media(max-width:720px){.brand .brand-logo,.global-topbar .brand-logo{width:64px!important;height:64px!important;flex-basis:64px!important;}}

/* Keep the original logo colors; support the dark lettering only in dark mode. */
html[data-site-theme="dark"] .brand .brand-logo,
html[data-site-theme="dark"] .global-topbar .brand-logo {
 background:linear-gradient(to bottom,transparent 78%,#f1f6fc 78%,#f1f6fc 98%,transparent 98%)!important;
}
/* Informational footer: compact two-column layout on phones. */
@media(max-width:700px){
 .my-trees-v48 .workspace-values{gap:4px!important;padding:6px!important;margin-bottom:10px!important;}
 .my-trees-v48 .workspace-values > div{
  flex-direction:row!important;gap:6px!important;min-height:42px!important;
  padding:4px 5px!important;font-size:16px!important;
 }
 .my-trees-v48 .workspace-values > div strong{font-size:11px!important;line-height:1.2!important;}
 .my-trees-v48 .trees-to-values-gap{height:8px!important;min-height:8px!important;}
}

/* v244 promotional trial */
.trial-promo-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 16px;background:linear-gradient(90deg,#edf8f3,#eef5ff);border:1px solid #cfe6db;border-radius:14px;color:#16335d;font-size:.88rem}.trial-promo-bar form{display:flex;gap:8px;align-items:center;margin:0}.trial-promo-bar select{min-width:150px;padding:7px 10px}.trial-kpis{margin:18px 0;grid-template-columns:repeat(6,minmax(0,1fr))}.trial-config-form{display:grid;grid-template-columns:1.3fr 1fr 180px auto;align-items:end;gap:14px}.trial-admin-actions{display:flex;gap:10px;margin:16px 0}.button.danger{background:#a52828;color:#fff;border-color:#a52828}@media(max-width:1000px){.trial-kpis{grid-template-columns:repeat(2,1fr)}.trial-config-form{grid-template-columns:1fr}.trial-promo-bar{flex-wrap:wrap}}

/* v246 — keep promotional trial below authenticated navigation. */
.global-topbar > .trial-promo-bar{
  order:100;
  flex:1 0 100%;
  width:min(100%, 1480px);
  max-width:1480px;
  box-sizing:border-box;
  margin:3px auto 1px;
  padding:8px 12px;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:linear-gradient(90deg,#f1fbf6 0%,#f5f9ff 100%);
  border:1px solid #cfe6db;
  border-radius:12px;
  color:#16335d;
  font-size:.86rem;
}
.global-topbar > .trial-promo-bar .trial-promo-copy{display:flex;align-items:center;gap:9px;min-width:0}
.global-topbar > .trial-promo-bar .trial-promo-icon{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#dcf5e7;color:#168454;font-weight:900}
.global-topbar > .trial-promo-bar form{display:flex;align-items:center;gap:8px;margin:0;flex:0 0 auto}
.global-topbar > .trial-promo-bar select{min-width:145px;padding:7px 30px 7px 10px}

@media(max-width:767px){
  .global-topbar > .trial-promo-bar{
    grid-column:1/-1!important;
    grid-row:3!important;
    width:100%!important;
    max-width:none!important;
    margin:1px 0 0!important;
    padding:8px 9px!important;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    font-size:.78rem;
  }
  .global-topbar > .trial-promo-bar form{width:100%;justify-content:flex-end}
  .global-topbar > .trial-promo-bar select{flex:1;min-width:0}
  .global-topbar > .trial-promo-bar .button{white-space:nowrap}
}


/* v247 — promotional trial belongs in Family Trees page content, above the plan-limit notice. */
.my-trees-v48 > .page-trial-promo{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:28px 0 14px;
  padding:12px 16px;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:linear-gradient(90deg,#effbf5 0%,#f4f8ff 100%);
  border:1px solid #c9e7d8;
  border-radius:14px;
  color:#16335d;
  box-shadow:0 8px 24px rgba(31,67,113,.05);
}
.my-trees-v48 > .page-trial-promo .trial-promo-copy{display:flex;align-items:center;gap:10px;min-width:0}
.my-trees-v48 > .page-trial-promo .trial-promo-icon{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:#dff5e8;color:#168454;font-weight:900}
.my-trees-v48 > .page-trial-promo form{display:flex;align-items:center;gap:8px;margin:0;flex:0 0 auto}
.my-trees-v48 > .page-trial-promo + .tree-limit-card{margin-top:0!important}
@media(max-width:767px){
 .my-trees-v48 > .page-trial-promo{margin:16px 0 10px;padding:10px 12px;flex-direction:column;align-items:stretch;gap:9px}
 .my-trees-v48 > .page-trial-promo form{width:100%;justify-content:flex-end}
 .my-trees-v48 > .page-trial-promo select{flex:1;min-width:0}
}


/* v248 — trial eligibility + Family Trees content alignment.
   Trial offers are Free-plan-only. The promo sits above Create Family Tree and
   uses the same content width as tree cards/toolbar rather than full viewport width. */
.my-trees-v48 > .page-trial-promo{
  width:min(1380px,calc(100% - 80px))!important;
  max-width:1380px!important;
  margin:22px auto 10px!important;
  min-height:50px;
  padding:10px 14px;
}
.my-trees-v48 > .page-trial-promo + .v48-tree-toolbar{
  margin-top:10px!important;
}
@media(max-width:1050px){
  .my-trees-v48 > .page-trial-promo{width:calc(100% - 40px)!important;}
}
@media(max-width:767px){
  .my-trees-v48 > .page-trial-promo{margin:14px auto 8px!important;}
}

/* v251 - simplified trial promotion administration */
.trial-promotion-v2{padding:0!important;overflow:hidden;border:1px solid #dce5ef!important;border-radius:18px!important;background:#fff!important;box-shadow:0 10px 30px rgba(31,54,84,.06)!important}
.trial-v2-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px 18px;border-bottom:1px solid #e8edf4}
.trial-v2-title{display:flex;align-items:center;gap:13px}.trial-v2-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#eef5ff;color:#245bc7;font-size:18px}.trial-v2-title h2,.subscription-v2-header h2{margin:0;color:#102449;font-size:18px}.trial-v2-title p,.subscription-v2-header p{margin:4px 0 0;color:#6c7e95;font-size:11px}
.trial-v2-status{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;font-size:10px;font-weight:900}.trial-v2-status i{width:7px;height:7px;border-radius:50%;background:currentColor}.trial-v2-status.is-active{background:#e9f8ef;color:#167341}.trial-v2-status.is-off{background:#f2f4f7;color:#68778b}
.trial-v2-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px 24px}.trial-v2-overview>div,.subscription-v2-grid>div{padding:15px 16px;border:1px solid #e3eaf2;border-radius:13px;background:#fbfcfe}.trial-v2-overview strong,.subscription-v2-grid strong{display:block;color:#102449;font-size:23px;line-height:1}.trial-v2-overview span,.subscription-v2-grid span{display:block;margin-top:7px;color:#667991;font-size:10px;font-weight:800}
.trial-v2-settings{display:grid;grid-template-columns:1.35fr 1fr .7fr auto;gap:12px;align-items:end;margin:0;padding:18px 24px;border-top:1px solid #edf1f5;background:#fbfcfe}.trial-v2-setting{display:grid;gap:7px;margin:0;color:#203a61;font-size:11px;font-weight:850}.trial-v2-setting small{color:#7b8ba0;font-size:9px;font-weight:600}.trial-v2-setting select,.trial-v2-setting input{box-sizing:border-box;width:100%;height:40px;padding:8px 10px;border:1px solid #cfd9e6;border-radius:9px;background:#fff;color:#172c4e;font:inherit;font-size:11px;outline:none}.trial-v2-setting select:focus,.trial-v2-setting input:focus{border-color:#6d9df2;box-shadow:0 0 0 3px rgba(63,127,234,.1)}.trial-v2-toggle-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px}.trial-v2-toggle{position:relative;display:block;flex:0 0 42px;width:42px;height:24px;cursor:pointer}.trial-v2-toggle input{position:absolute;opacity:0;pointer-events:none}.trial-v2-toggle span{position:absolute;inset:0;border-radius:999px;background:#cbd5e1;transition:.18s}.trial-v2-toggle span:after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.18s}.trial-v2-toggle input:checked+span{background:#3478ef}.trial-v2-toggle input:checked+span:after{transform:translateX(18px)}.trial-v2-duration{display:grid;grid-template-columns:1fr auto;align-items:center}.trial-v2-duration input{border-radius:9px 0 0 9px}.trial-v2-duration span{display:grid;place-items:center;height:38px;padding:0 10px;border:1px solid #cfd9e6;border-left:0;border-radius:0 9px 9px 0;background:#f5f7fa;color:#6b7d94;font-size:10px}.trial-v2-save{min-width:130px;height:40px;margin:0!important}.trial-v2-note{margin:0;padding:12px 24px;border-top:1px solid #edf1f5;color:#5e718a;font-size:10px}.trial-v2-note:before{content:"i";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:7px;border-radius:50%;background:#e8f1ff;color:#316ff1;font-weight:900}
.trial-v2-advanced{border-top:1px solid #e8edf4}.trial-v2-advanced>summary{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;list-style:none;color:#29466f;font-size:11px;font-weight:900;cursor:pointer}.trial-v2-advanced>summary::-webkit-details-marker{display:none}.trial-v2-chevron{transition:.18s}.trial-v2-advanced[open] .trial-v2-chevron{transform:rotate(180deg)}.trial-v2-advanced-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end;padding:0 24px 20px}.trial-v2-promo-id{display:grid;gap:5px}.trial-v2-promo-id>span{color:#405876;font-size:10px;font-weight:900}.trial-v2-promo-id code{overflow-wrap:anywhere;color:#64768c;font-size:10px}.trial-v2-promo-id small{color:#8795a7;font-size:9px}.trial-v2-danger-actions{display:flex;gap:8px}.trial-v2-danger-actions form{margin:0}.trial-v2-danger-actions .button{font-size:10px!important}
.subscription-overview-v2{margin-top:14px!important;padding:18px 20px!important;border:1px solid #dce5ef!important;border-radius:16px!important;background:#fff!important}.subscription-v2-header{margin-bottom:13px}.subscription-v2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:1000px){.trial-v2-overview,.subscription-v2-grid{grid-template-columns:repeat(2,1fr)}.trial-v2-settings{grid-template-columns:1fr 1fr}.trial-v2-save{width:100%}.trial-v2-advanced-body{grid-template-columns:1fr}.trial-v2-danger-actions{justify-content:flex-start}}
@media(max-width:620px){.trial-v2-header{align-items:flex-start;padding:18px 16px}.trial-v2-title h2{font-size:16px}.trial-v2-overview{grid-template-columns:1fr 1fr;padding:14px 16px}.trial-v2-settings{grid-template-columns:1fr;padding:16px}.trial-v2-note,.trial-v2-advanced>summary{padding-left:16px;padding-right:16px}.trial-v2-advanced-body{padding:0 16px 16px}.trial-v2-danger-actions{display:grid}.trial-v2-danger-actions .button{width:100%}.subscription-overview-v2{padding:16px!important}.subscription-v2-grid{grid-template-columns:1fr 1fr}}

/* v253 simplified promotional-trial lifecycle */
.trial-lifecycle{overflow:hidden;padding:0!important}.trial-life-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;border-bottom:1px solid #e7edf4}.trial-life-title{display:flex;align-items:center;gap:13px}.trial-life-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#eef4ff;color:#245bc7;font-size:18px}.trial-life-title h2{margin:0;color:#102449;font-size:19px}.trial-life-title p{margin:4px 0 0;color:#6d7f96;font-size:11px}.trial-life-status{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.05em}.trial-life-status i{width:7px;height:7px;border-radius:50%;background:currentColor}.trial-life-status.active{background:#e8f8ee;color:#15723f}.trial-life-status.inactive{background:#f1f3f6;color:#6b7889}.trial-life-metrics{display:flex;align-items:center;gap:0;padding:17px 24px;border-bottom:1px solid #edf1f5}.trial-life-metrics>div{min-width:150px;padding:0 28px;border-right:1px solid #e7edf4}.trial-life-metrics>div:first-child{padding-left:0}.trial-life-metrics>div:last-child{border-right:0}.trial-life-metrics strong{display:block;color:#102449;font-size:22px}.trial-life-metrics span{display:block;margin-top:3px;color:#6a7d94;font-size:10px;font-weight:800}.trial-life-body{padding:20px 24px;background:#fbfcfe}.trial-life-section-title{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}.trial-life-section-title strong{color:#163258;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.trial-life-section-title span{color:#7a8ba0;font-size:10px}.trial-life-config{display:grid;grid-template-columns:1fr .55fr .8fr auto;gap:14px;align-items:end}.trial-life-config label,.trial-life-eligible{display:grid;gap:7px}.trial-life-config label>span,.trial-life-eligible>span,.trial-life-current span{color:#60748e;font-size:10px;font-weight:850}.trial-life-config select,.trial-life-config input{box-sizing:border-box;width:100%;height:42px;padding:8px 11px;border:1px solid #ced9e6;border-radius:9px;background:#fff;color:#172c4e;font-size:11px}.trial-life-duration{display:grid;grid-template-columns:1fr auto}.trial-life-duration input{border-radius:9px 0 0 9px}.trial-life-duration b{display:grid;place-items:center;padding:0 12px;border:1px solid #ced9e6;border-left:0;border-radius:0 9px 9px 0;background:#f5f7fa;color:#6d7f95;font-size:10px}.trial-life-eligible{min-height:42px;align-content:center}.trial-life-eligible strong{color:#19345a;font-size:11px}.trial-life-start{height:42px;white-space:nowrap}.trial-life-current{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.trial-life-current>div{display:grid;gap:5px;padding:14px 15px;border:1px solid #e1e8f0;border-radius:11px;background:#fff}.trial-life-current strong{color:#18345a;font-size:12px}.trial-life-live-note{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 13px;border:1px solid #ccebd8;border-radius:10px;background:#effaf3;color:#176f41}.trial-life-live-note>span{font-weight:900}.trial-life-live-note div{display:grid;gap:2px}.trial-life-live-note strong{font-size:11px}.trial-life-live-note small{font-size:9px;color:#557965}.trial-life-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}.trial-life-actions form{margin:0}.trial-life-actions .button{min-width:160px}.trial-life-actions button:disabled{opacity:.45;cursor:not-allowed}.trial-life-previous{display:flex;align-items:center;gap:10px;padding:13px 24px;border-top:1px solid #e8edf4;background:#fff;color:#667991;font-size:10px}.trial-life-previous span{font-weight:850}.trial-life-previous strong{color:#2b466b}.trial-life-body:not(:has(.trial-life-current)) .trial-life-actions .button:first-child{display:none}
@media(max-width:1000px){.trial-life-config{grid-template-columns:1fr 1fr}.trial-life-current{grid-template-columns:1fr 1fr}.trial-life-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.trial-life-metrics>div{min-width:0;padding:0;border:0}.trial-life-start{width:100%}}
@media(max-width:620px){.trial-life-header{align-items:flex-start;padding:18px 16px}.trial-life-title h2{font-size:16px}.trial-life-metrics{padding:15px 16px}.trial-life-body{padding:16px}.trial-life-config,.trial-life-current{grid-template-columns:1fr}.trial-life-section-title{display:grid;gap:4px}.trial-life-actions{display:grid}.trial-life-actions form,.trial-life-actions .button{width:100%}.trial-life-previous{display:grid;padding:12px 16px}}


/* v258: large Sticky Notes trees keep SVG geometry in the same pixel coordinate space as cards. */
.tree-page .sticky-tree-stage {
    width: max-content;
    min-width: 100%;
}
.tree-page .sticky-generation {
    min-width: max-content;
}
.tree-page .sticky-generation-row {
    width: max-content;
    min-width: 100%;
}
.tree-page .sticky-tree-svg {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
}


/* v259 — Family Trees navigation/plan/trial refinements. */
/* Match the trial notice to the same left/right content rails as the plan-limit notice. */
.my-trees-v48 > .page-trial-promo{
  width:calc(100% - 136px)!important;
  max-width:none!important;
  margin:18px 68px 10px!important;
  min-height:46px!important;
  padding:8px 12px!important;
  justify-content:space-between!important;
}
.my-trees-v48 > .page-trial-promo .trial-promo-copy{
  justify-content:flex-start!important;
  text-align:left!important;
}
@media(max-width:900px){
  .my-trees-v48 > .page-trial-promo{
    width:calc(100% - 40px)!important;
    margin:14px 20px 10px!important;
  }
}
@media(max-width:700px){
  .my-trees-v48 > .page-trial-promo{
    width:calc(100% - 20px)!important;
    margin:12px 10px 8px!important;
    padding:9px 10px!important;
  }
}

/* v260 — Family Trees trial notice uses the exact same content rail as the limit/tree cards. */
.my-trees-v48 > .page-trial-promo{
  width:min(1380px,calc(100% - 80px))!important;
  max-width:1380px!important;
  margin:18px auto 10px!important;
  min-height:44px!important;
  padding:7px 12px!important;
}
@media(max-width:760px){
  .my-trees-v48 > .page-trial-promo{
    width:calc(100% - 24px)!important;
    margin:12px auto 8px!important;
  }
}


/* v263 — final Family Trees trial rail + simplified public footer. */
@media (min-width:1051px){
  .my-trees-v48 > .page-trial-promo{
    width:min(1180px,calc(100% - 136px))!important;
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* v265 — keep the upgrade information strip during a trial offer, but hide only its paid-upgrade CTA.
   The available-trial notice is intentionally compact and left-aligned to the Family Trees content rail. */
@media (min-width:1051px){
  .my-trees-v48 > .page-trial-promo{
    width:min(820px,calc(100% - 80px))!important;
    max-width:820px!important;
    margin-left:max(40px,calc((100% - 1380px)/2))!important;
    margin-right:0!important;
  }
}
@media (min-width:761px) and (max-width:1050px){
  .my-trees-v48 > .page-trial-promo{
    width:min(720px,calc(100% - 40px))!important;
    max-width:720px!important;
    margin-left:20px!important;
    margin-right:0!important;
  }
}
@media (max-width:760px){
  .my-trees-v48 > .page-trial-promo{
    width:calc(100% - 24px)!important;
    max-width:none!important;
    margin-left:12px!important;
    margin-right:12px!important;
  }
}

/* v266 — align compact trial strip with the compact Family Trees content rail.
   The strip remains narrower, but its LEFT EDGE exactly matches the limit notice,
   tree card, and "Want to create more family trees?" strip below it. */
@media (min-width:1051px){
  .my-trees-v48 > .page-trial-promo{
    width:min(820px,calc(100% - 136px))!important;
    max-width:820px!important;
    margin-left:max(68px,calc((100% - 1180px)/2))!important;
    margin-right:0!important;
  }
}
@media (min-width:761px) and (max-width:1050px){
  .my-trees-v48 > .page-trial-promo{
    width:min(720px,calc(100% - 32px))!important;
    max-width:720px!important;
    margin-left:16px!important;
    margin-right:0!important;
  }
}
@media (max-width:760px){
  .my-trees-v48 > .page-trial-promo{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin-left:10px!important;
    margin-right:10px!important;
  }
}

/* v267: authenticated Premium Plans free-trial promotion */
.plan-summary-grid .plan-trial-callout{margin:14px 0 12px;padding:12px 14px;border:1px solid #d8b4fe;border-radius:14px;background:linear-gradient(135deg,#fff7ed 0%,#f5f3ff 52%,#ecfeff 100%);display:flex;flex-direction:column;align-items:flex-start;gap:2px;box-shadow:none}
.plan-summary-grid .plan-trial-callout .plan-trial-eyebrow{font-size:10px;font-weight:900;letter-spacing:.08em;color:#7e22ce}
.plan-summary-grid .plan-trial-callout strong{margin:0;color:#6d28d9;font-size:18px;line-height:1.25}
.plan-summary-grid .plan-trial-callout small{font-size:11px;color:#64748b;line-height:1.35}

/* v268: Plans trial offer mirrors landing-page card treatment. */
.plan-summary-grid article{position:relative}
.plan-summary-grid .plan-trial-corner{position:absolute;top:14px;right:14px;min-width:168px;padding:9px 11px;border:1px solid #d8b4fe;border-radius:13px;background:linear-gradient(135deg,#fff7ed 0%,#f5f3ff 52%,#ecfeff 100%);display:flex;flex-direction:column;align-items:flex-start;gap:1px;box-shadow:0 6px 16px rgba(109,40,217,.07)}
.plan-summary-grid .plan-trial-corner span{font-size:9px;font-weight:900;letter-spacing:.08em;color:#7e22ce}
.plan-summary-grid .plan-trial-corner strong{margin:0;color:#6d28d9;font-size:17px;line-height:1.2}
.plan-summary-grid .plan-trial-corner small{font-size:10px;color:#64748b;line-height:1.3}
.plan-summary-grid .plan-trial-corner.family{border-color:#e9d5ff}
@media(max-width:800px){.plan-summary-grid .plan-trial-corner{position:static;width:max-content;max-width:100%;margin:0 0 14px auto}}

/* v272 — align comparison-table plan columns directly beneath plan cards. */
.plan-comparison-page{
  --plan-gap:16px;
  --plan-col:calc((100% - (2 * var(--plan-gap))) / 3);
}
.plan-comparison-page .plan-table{
  table-layout:fixed;
}
.plan-comparison-page .plan-table th:first-child,
.plan-comparison-page .plan-table td:first-child{
  width:var(--plan-col)!important;
}
.plan-comparison-page .plan-table th:not(:first-child),
.plan-comparison-page .plan-table td:not(:first-child){
  width:var(--plan-col)!important;
  text-align:center!important;
}
@media(max-width:800px){
  .plan-comparison-page .plan-table{table-layout:auto;}
  .plan-comparison-page .plan-table th:first-child,
  .plan-comparison-page .plan-table td:first-child{width:auto!important;}
  .plan-comparison-page .plan-table th:not(:first-child),
  .plan-comparison-page .plan-table td:not(:first-child){width:auto!important;min-width:150px;}
}

/* v273: plans page - active plan state */
.plan-current-button,
.plan-current-button:disabled {
  cursor: default;
  opacity: 1;
  box-shadow: none;
  background: #eef8f2;
  border: 1px solid #9fd5b2;
  color: #176b3a;
}

/* v280: Timeline print output must contain only the printable timeline content.
   The authenticated application chrome is useful on screen but must never be
   included in browser print/PDF output. */
@media print {
    body:has(.timeline-page) > .global-topbar,
    body:has(.timeline-page) > .impersonation-banner {
        display: none !important;
    }

    body:has(.timeline-page) .timeline-page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* v281 Super Admin Email Tools */
.admin-email-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px;align-items:start}.admin-email-grid .form-card{margin-top:0}.admin-email-grid form{display:grid;gap:14px}.admin-email-grid label{display:grid;gap:6px;font-weight:800;color:var(--text)}.admin-email-grid input,.admin-email-grid textarea{box-sizing:border-box;width:100%}.admin-email-actions{display:flex;justify-content:flex-start;padding-top:2px}.admin-email-note{margin:18px 2px 0;font-size:.85rem}.alert.error{border:1px solid #fecaca;background:#fef2f2;color:#991b1b;padding:12px 14px;border-radius:10px;margin-bottom:16px}@media(max-width:760px){.admin-email-grid{grid-template-columns:1fr}.admin-email-tools .page-heading{gap:12px}.admin-email-tools .page-heading>.button{width:100%}}


/* v282: Never print timeline navigation/return controls. */
@media print {
 .timeline-page .timeline-print-exclude, .timeline-page .person-page-nav-stack, .timeline-page .timeline-screen-navigation, .timeline-page .timeline-actions {display:none!important;visibility:hidden!important;}
 .timeline-page .timeline-page-heading {display:none!important;}
}

/* v288: accessibility, keyboard navigation, and motion preferences. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid #2563eb !important;
  outline-offset:2px !important;
}
:where(input,select,textarea):focus-visible{
  border-color:#2563eb !important;
}
.skip-link{position:fixed;left:12px;top:12px;z-index:10000;transform:translateY(-160%);padding:10px 14px;border-radius:8px;background:#0f2747;color:#fff;font-weight:800;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.skip-link:focus{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* v295 — production UI/UX polish and interaction feedback. */
.app-navigation-progress{position:fixed;z-index:10050;top:0;left:0;width:100%;height:3px;pointer-events:none;opacity:0;transform:scaleX(.08);transform-origin:left center;background:currentColor;color:var(--primary,#3974ea);transition:opacity .14s ease,transform 8s cubic-bezier(.1,.7,.2,1)}
.app-navigation-progress.is-visible{opacity:.9;transform:scaleX(.86)}
button.is-submitting,.button.is-submitting{cursor:wait!important;opacity:.78}.button[aria-busy="true"]{white-space:nowrap}
button:disabled,.button[aria-disabled="true"]{cursor:not-allowed}
.form-card input,.form-card select,.form-card textarea{max-width:100%}
img{max-width:100%}
@media(max-width:700px){
  .page{padding-left:16px!important;padding-right:16px!important}
  .actions{flex-wrap:wrap}
  .actions>.button,.actions>button{min-height:44px}
  .form-grid.two,.form-grid.three{grid-template-columns:minmax(0,1fr)!important}
  .top-actions .button,.global-nav-actions .button{min-height:40px}
  .table-card{max-width:100%;overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){.app-navigation-progress{transition:none}}

/* v298.1: accessible page-turn controls at the left and right edges of the Real Book. */
.real-book-mode .family-book-document > .real-book-edge {
    position: absolute; top: 0; bottom: 0; width: clamp(42px, 10%, 100px);
    z-index: 30; display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: #fff; cursor: pointer;
    opacity: .3; transition: opacity .2s ease, background .2s ease;
}
.real-book-mode .family-book-document > .real-book-edge-left { left: 0; }
.real-book-mode .family-book-document > .real-book-edge-right { right: 0; }
.real-book-mode .family-book-document > .real-book-edge span {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: rgba(25,34,43,.72); font-size: 25px; box-shadow: 0 3px 12px rgba(0,0,0,.18);
}
.real-book-mode .family-book-document > .real-book-edge:not(:disabled):hover,
.real-book-mode .family-book-document > .real-book-edge:not(:disabled):focus-visible {
    opacity: 1; background: rgba(24,36,52,.09);
}
.real-book-mode .family-book-document > .real-book-edge:focus-visible { outline: 3px solid #3578d4; outline-offset: -4px; }
.real-book-mode .family-book-document > .real-book-edge:disabled { opacity: 0; pointer-events: none; cursor: default; }
@media (hover: none) { .real-book-mode .family-book-document > .real-book-edge:not(:disabled) { opacity: .8; } }
@media print { .real-book-mode .family-book-document > .real-book-edge { display: none !important; } }

/* v300.0: keep collaboration heading and navigation controls aligned on desktop. */
.collaboration-heading{display:flex;align-items:center;justify-content:space-between;gap:22px}
.collaboration-heading-copy{flex:1 1 auto;min-width:0;max-width:620px}
.collaboration-heading-copy p{max-width:600px}
.collaboration-heading-actions{display:flex;align-items:flex-end;justify-content:flex-end;gap:14px;flex:0 0 auto;min-width:0}
.collaboration-tree-selector{display:flex;flex-direction:column;gap:5px;width:210px;min-width:0;margin:0}
.collaboration-heading-actions>.button{white-space:nowrap;align-self:flex-end;width:auto;flex:0 0 auto}
@media(max-width:900px){.collaboration-heading{align-items:stretch;flex-direction:column}.collaboration-heading-copy{max-width:none}.collaboration-heading-actions{justify-content:flex-start;flex-wrap:wrap}}
@media(max-width:560px){.collaboration-heading-actions{align-items:stretch;flex-direction:column;width:100%}.collaboration-tree-selector{width:100%}.collaboration-heading-actions>.button{align-self:stretch;width:100%;text-align:center}}