* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    color: #26382d;
    background: #eee5d4;
}

.family-header {
    position: relative;
    min-height: 145px;
    padding: 18px 195px;
    background: #26382d;
    color: white;
    border-bottom: 4px solid #c9b88d;
}

.family-title {
    text-align: center;
    padding-top: 20px;
}

.family-title-main {
    font-family: Georgia, serif;
    font-size: 30px;
    font-weight: 700;
}

.family-title-sub {
    margin-top: 7px;
    font-size: 14px;
    opacity: .9;
}

.left-nav,
.right-nav {
    position: absolute;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.left-nav {
    left: 18px;
}

.right-nav {
    right: 18px;
}

.left-nav a,
.right-nav a {
    width: 160px;
    min-width: 160px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: white;
    color: #26382d;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}


.map-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: calc(100vh - 145px);
    min-height: 560px;
}

.map-sidebar {
    padding: 16px;
    overflow-y: auto;
    background: #f4eddf;
    border-right: 1px solid #cbbfa7;
}

.panel {
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid #cbbfa7;
    border-radius: 8px;
    background: #fffdf8;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.panel h2,
.panel h3 {
    margin-top: 0;
    font-family: Georgia, serif;
    color: #315b43;
}

.panel label {
    display: block;
    margin: 12px 0;
}

.muted {
    color: #667069;
    line-height: 1.5;
}

.map-stage,
#family-map {
    width: 100%;
    height: 100%;
}

.map-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    background:
        linear-gradient(
            135deg,
            #e9e2d2,
            #d9e2d7
        );
}

.map-placeholder > div {
    max-width: 520px;
    padding: 32px;
    border: 1px solid #cbbfa7;
    border-radius: 10px;
    background: rgba(255,253,248,.95);
    box-shadow: 0 3px 14px rgba(0,0,0,.12);
}

.map-style-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.map-style-buttons button,
.primary-button {
    border: 1px solid #315b43;
    border-radius: 6px;
    padding: 9px 12px;
    background: #26382d;
    color: white;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #eee5d4;
}

.login-card {
    width: min(460px, 100%);
    padding: 32px;
    border: 1px solid #cbbfa7;
    border-radius: 10px;
    background: #fffdf8;
    text-align: center;
    box-shadow: 0 3px 14px rgba(0,0,0,.12);
}

.login-card h1 {
    font-family: Georgia, serif;
    color: #315b43;
}

.primary-button {
    display: inline-block;
    margin-top: 10px;
}

@media (max-width: 700px) {

    .family-header {
        padding: 14px;
    }

    .left-nav,
    .right-nav {
        position: static;
        width: 100%;
        margin-bottom: 10px;
    }

    .left-nav a,
    .right-nav a {
        width: 100%;
    }

    .family-title {
        padding: 12px 0;
    }

    .map-shell {
        display: block;
        height: auto;
    }

    .map-sidebar {
        border-right: 0;
        border-bottom: 1px solid #cbbfa7;
    }

    .map-stage {
        height: 65vh;
        min-height: 480px;
    }
}

/* Live genealogy map data */

.map-data-status {
    margin: 12px 0 2px;
    padding: 9px 10px;
    border: 1px solid #d7ccb7;
    border-radius: 6px;
    background: #f7f2e8;
    color: #536057;
    font-size: 13px;
    line-height: 1.35;
}

.map-data-status.error {
    border-color: #b98f87;
    background: #f7eae7;
    color: #7a3830;
}

.family-map-popup {
    width: min(390px, 72vw);
    max-height: 420px;
    overflow-y: auto;
    padding: 2px 5px 5px 0;
    color: #26382d;
}

.family-map-popup h3 {
    margin: 0 0 4px;
    padding-right: 15px;
    font-family: Georgia, serif;
    font-size: 19px;
    color: #315b43;
}

.popup-place-meta {
    margin-bottom: 8px;
    color: #667069;
    font-size: 12px;
}

.popup-branches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0;
}

.branch-badge {
    display: inline-block;
    padding: 3px 7px;
    border: 1px solid #c9b88d;
    border-radius: 12px;
    background: #eee5d4;
    color: #315b43;
    font-size: 11px;
    font-weight: 700;
}

.popup-event-list {
    margin-top: 8px;
    border-top: 1px solid #ddd4c2;
}

.popup-event {
    padding: 10px 2px;
    border-bottom: 1px solid #e4dccd;
}

.popup-event:last-child {
    border-bottom: 0;
}

.popup-person {
    font-weight: 700;
    color: #26382d;
}

.popup-event-meta {
    margin-top: 3px;
    color: #536057;
    font-size: 12px;
}

.popup-description {
    margin-top: 5px;
    color: #3f4942;
    font-size: 12px;
    line-height: 1.35;
}

@media (max-width: 700px) {
    .family-map-popup {
        width: min(310px, 70vw);
        max-height: 330px;
    }
}

/* Research filters */

.filter-field {
    margin: 11px 0 !important;
}

.filter-field span {
    display: block;
    margin-bottom: 5px;
    color: #536057;
    font-size: 12px;
    font-weight: 700;
}

.filter-field select,
.filter-field input {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid #cbbfa7;
    border-radius: 6px;
    background: white;
    color: #26382d;
    font: inherit;
    font-size: 13px;
}

.filter-actions {
    margin-top: 12px;
}

.filter-actions button {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #315b43;
    border-radius: 6px;
    background: #fffdf8;
    color: #315b43;
    cursor: pointer;
    font-weight: 700;
}

.filtered-result-count {
    margin-top: 10px;
    color: #667069;
    font-size: 12px;
    text-align: center;
}

/* Historical timeline */

.map-canvas-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.historical-time-control {
    position: absolute;
    z-index: 5;
    top: 12px;
    left: 50%;
    width: min(680px, calc(100% - 190px));
    padding: 9px 14px 8px;
    transform: translateX(-50%);
    border: 1px solid #cbbfa7;
    border-radius: 8px;
    background: rgba(255,253,248,.95);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.historical-time-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
    color: #315b43;
    font-size: 12px;
    font-weight: 700;
}

.historical-time-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 9px;
    align-items: center;
    color: #667069;
    font-size: 11px;
}

.historical-time-row input {
    width: 100%;
    accent-color: #315b43;
}

.historical-time-note {
    margin-top: 2px;
    color: #777f79;
    font-size: 10px;
    text-align: center;
}

@media (max-width: 700px) {
    .historical-time-control {
        top: 8px;
        width: calc(100% - 90px);
        padding: 7px 9px;
    }

    .historical-time-note {
        display: none;
    }
}

/*
 * Historical timeline layout correction.
 * Override the original floating overlay and reserve
 * permanent space above the Google Maps canvas.
 */

.map-canvas-wrap {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    background: #fffdf8;
}

.historical-time-control {
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    width: 100%;
    padding: 9px 22px 8px;
    transform: none;
    border: 0;
    border-bottom: 1px solid #cbbfa7;
    border-radius: 0;
    background: #fffdf8;
    box-shadow: 0 2px 5px rgba(0,0,0,.10);
}

.historical-time-heading {
    width: min(820px, 100%);
    margin: 0 auto 4px;
}

.historical-time-row {
    width: min(820px, 100%);
    margin: 0 auto;
}

.historical-time-note {
    width: min(820px, 100%);
    margin: 3px auto 0;
}

.map-canvas-wrap #family-map {
    width: 100%;
    height: 100%;
    min-height: 0;
}

@media (max-width: 700px) {

    .historical-time-control {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        padding: 7px 12px;
        transform: none;
    }

    .historical-time-note {
        display: none;
    }
}

.historical-time-row {
    grid-template-columns: auto 30px minmax(0,1fr) 30px auto;
}
.historical-time-row button {
    border: 1px solid #b8c7bb;
    border-radius: 5px;
    background: #f4f7f2;
    color: #315b43;
    cursor: pointer;
    font-size: 18px;
}
.historical-slider-wrap {
    position: relative;
    min-width: 0;
}
.historical-slider-wrap input {
    position: relative;
    z-index: 2;
    width: 100%;
    background: transparent;
}
#historical-year-ticks {
    position: absolute;
    inset: 0 8px;
    pointer-events: none;
}
.historical-year-tick {
    position: absolute;
    top: 0;
    width: 2px;
    height: 8px;
    background: #26382d;
}

/* Multi-select family branches */
#branch-menu {
    border: 1px solid #bcc9bf;
    border-radius: 5px;
    background: #fff;
    color: #315b43;
}
#branch-menu summary {
    padding: 9px;
    cursor: pointer;
    font-size: 13px;
}
.branch-options {
    max-height: 210px;
    overflow-y: auto;
    padding: 6px 10px;
    border-top: 1px solid #ddd;
}
.branch-options label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 2px;
    cursor: pointer;
    font-size: 13px;
}
.branch-options input {
    accent-color: #315b43;
}

/* Family branch checkbox layout repair */
#branch-filter.branch-options {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

#branch-filter.branch-options label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    font-weight: 400;
    line-height: 1.3;
    white-space: normal;
}

#branch-filter.branch-options input[type="checkbox"] {
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0 4px 0 0;
}

#branch-menu summary {
    overflow-wrap: anywhere;
}

/* Map style in the historical toolbar */
.historical-time-control { display:flex; align-items:center; justify-content:center; gap:20px; }
.historical-time-control > .historical-time-heading,
.historical-time-control > .historical-time-row,
.historical-time-control > .historical-time-note { flex:0 1 auto; }
.historical-time-control { display:grid; grid-template-columns:minmax(0,1fr) 270px; column-gap:20px; }
.historical-time-heading { grid-column:1; grid-row:1; }
.historical-time-row { grid-column:1; grid-row:2; }
.historical-time-note { grid-column:1; grid-row:3; }
.map-style-toolbar { grid-column:2; grid-row:1 / span 3; align-self:center; min-width:0; }
.map-style-title { display:block; text-align:center; font-size:12px; font-weight:700; color:#315b43; margin-bottom:5px; }
.map-style-toolbar .map-style-buttons { display:flex; flex-direction:row; gap:5px; }
.map-style-toolbar .map-style-buttons button { flex:1; padding:8px 4px; font-size:12px; }
.layer-main-label { display:flex !important; align-items:center; gap:7px; }
.layer-submenu { margin:0 0 12px 21px; border-left:2px solid #d7ccb7; padding-left:9px; }
.layer-submenu summary { cursor:pointer; color:#315b43; font-size:12px; padding:5px 0; }
.event-type-options { max-height:210px; overflow-y:auto; }
.event-type-options label { display:flex !important; align-items:center; gap:6px; margin:6px 0 !important; font-size:13px; }
.event-type-options input, #branch-filter input { width:16px !important; height:16px !important; min-height:0 !important; padding:0 !important; flex:0 0 16px; }
@media(max-width:900px) {
 .historical-time-control { grid-template-columns:minmax(0,1fr); }
 .map-style-toolbar { grid-column:1; grid-row:4; justify-self:center; width:min(280px,100%); margin-top:7px; }
}

/* Direct person profile links in genealogy marker popups */
.popup-person-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.popup-person-actions .popup-branches { margin:6px 0; }
.popup-profile-link { color:#245a43; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.popup-profile-link:hover, .popup-profile-link:focus { color:#153b2b; }

.popup-place-hierarchy { margin:0 0 7px; font-size:13px; line-height:1.45; color:#50665a; }

.popup-location-actions { display:flex; align-items:center; gap:12px; margin:7px 0; font-size:12px; }
.popup-location-actions button { border:1px solid #315b43; border-radius:5px; background:#315b43; color:white; cursor:pointer; padding:5px 9px; font-weight:600; }
.popup-location-actions a { color:#245a43; }
.popup-research-sections { margin-top:10px; border-top:1px solid #e1d8c9; }
.popup-research-sections details { padding:8px 0; border-bottom:1px solid #e1d8c9; }
.popup-research-sections summary { cursor:pointer; font-weight:600; color:#315b43; }
.popup-research-sections p,.popup-research-row { font-size:12px; color:#46594e; margin:6px 0; }
.library-record-notice:not([hidden]) { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.38); display:flex; align-items:center; justify-content:center; padding:15px; }
.library-record-dialog { width:min(430px,100%); background:#fffaf2; padding:22px; border-radius:10px; box-shadow:0 8px 35px #0004; color:#263b2d; }
.library-record-dialog h3 { margin:0 0 10px; }
.library-record-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:18px; }
.library-record-actions button { padding:8px 12px; cursor:pointer; }
.library-record-actions a { color:#245a43; font-weight:700; }

/* Place research drawer: intentionally outside Google Maps info-window. */
.map-canvas-wrap { position:relative; }
.research-detail-panel:not([hidden]) { position:absolute; z-index:5; right:0; top:0; bottom:0; width:min(430px, 100%); overflow-y:auto; background:#fffdf8; border-left:1px solid #cbbfa7; box-shadow:-6px 0 24px #172c2230; color:#26382d; }
.research-detail-topbar { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; padding:12px 18px; background:#315b43; color:white; font-size:11px; letter-spacing:1.5px; font-weight:700; }
.research-detail-topbar button { border:0; background:transparent; color:white; font-size:27px; cursor:pointer; }
.research-detail-heading { padding:19px 20px 10px; }
.research-detail-heading h2 { margin:0 0 7px; font:700 24px Georgia,serif; color:#315b43; }
.research-detail-place { margin:0 0 8px; line-height:1.5; font-size:13px; }
.research-detail-unavailable { color:#8b7660; font-style:italic; }
.research-detail-meta { font-size:12px; color:#657267; }
.research-detail-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:10px 20px 16px; }
.research-detail-actions button,.popup-research-button { background:#315b43; color:white; border:0; border-radius:5px; padding:10px 13px; cursor:pointer; font-weight:700; }
.research-detail-actions a { color:#315b43; font-size:12px; }
.research-detail-group { margin:0 20px; padding:13px 0; border-top:1px solid #ded4c1; }
.research-detail-group h3 { margin:0 0 8px; font:700 17px Georgia,serif; color:#315b43; }
.research-detail-group summary { cursor:pointer; color:#315b43; font-weight:700; }
.research-detail-group p { font-size:13px; line-height:1.5; }
.research-timeline-item { display:flex; flex-direction:column; gap:4px; border-left:2px solid #c9b88d; margin:12px 0; padding:2px 0 4px 12px; font-size:12px; }
.popup-research-button { display:block; width:100%; margin:12px 0 2px; }
.popup-more-events { font-size:12px; color:#687369; }
@media(max-width:700px) { .research-detail-panel:not([hidden]) { width:100%; } }

/* Centered research popup with click-outside dismissal */
.research-detail-backdrop:not([hidden]) { position:absolute; inset:0; z-index:6; background:rgba(20,37,27,.24); cursor:pointer; }
.research-detail-panel:not([hidden]) { position:absolute; z-index:7; top:50%; left:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); width:min(510px,calc(100% - 28px)); max-height:min(76vh,700px); overflow-y:auto; border:1px solid #cbbfa7; border-radius:10px; box-shadow:0 12px 50px #172c2260; }
@media(max-width:700px) { .research-detail-panel:not([hidden]) { width:calc(100% - 18px); max-height:80vh; } }