/* ═══════════════════════════════════════════════════════════
   Church Records - Frontend Styles
   All colours reference CSS custom properties (--cr-*)
   set by PHP inline style from Appearance settings
   ═══════════════════════════════════════════════════════════ */

/* ── reset & base ── */

.cr-app {
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    color: var(--cr-browse-color-text, #333);
}

.cr-app *, .cr-app *::before, .cr-app *::after {
    box-sizing: border-box;
}

/* ── header & tabs ── */

.cr-header { margin-bottom: 0; }

.cr-title {
    font-size: var(--cr-font-size-title, 24px);
    color: var(--cr-browse-color-accent, #8b7355);
    margin: 0 0 12px 0;
}

.cr-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--cr-browse-color-border, #d4c9b8);
}

.cr-tab {
    padding: 10px 20px;
    border: 1px solid var(--cr-color-tab-inactive-border, var(--cr-color-tab-border, transparent));
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--cr-color-tab-inactive-bg, var(--cr-color-tab-bg, transparent));
    color: var(--cr-color-tab-inactive-text, #665544);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.cr-tab:hover {
    background: var(--cr-color-tab-hover-bg, #faf7f2);
    color: var(--cr-browse-color-text, #333);
}

.cr-tab.active {
    background: var(--cr-color-tab-active-bg, #f5f1eb);
    color: var(--cr-color-tab-active-text, #8b7355);
    border-color: var(--cr-color-tab-active-border, #d4c9b8);
    margin-bottom: -2px;
    border-bottom: 2px solid var(--cr-color-tab-active-bg, #f5f1eb);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   BROWSE MODE (per-church search)
   ═══════════════════════════════════════════════════════════ */

#cr-browse {
    background: var(--cr-browse-color-bg, #f5f1eb);
    border: 1px solid var(--cr-browse-color-border, #d4c9b8);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 20px;
    color: var(--cr-browse-color-text, #333);
}

.cr-browse-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    padding: 6px;
    background: var(--cr-color-search-bg, #fff);
    border: 1px solid var(--cr-color-search-border, #d4c9b8);
    border-radius: 6px;
    margin-bottom: 16px;
}

.cr-browse-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cr-browse-field label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cr-browse-color-text-dim, #665544);
}

.cr-browse-field select,
.cr-browse-field input[type="text"] {
    padding: 8px 10px;
    border: 1px solid var(--cr-color-search-border, #d4c9b8);
    border-radius: 4px;
    font-size: 14px;
    background: var(--cr-color-search-bg, #fff);
    min-width: 140px;
    color: var(--cr-browse-color-text, #333);
}

.cr-field-year input[type="text"] {
    min-width: 80px !important;
    max-width: 90px;
}

.cr-browse-field select:focus,
.cr-browse-field input[type="text"]:focus {
    outline: none;
    border-color: var(--cr-color-search-focus, #8b7355);
    box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.2);
}

.cr-browse-btns {
    flex-direction: row !important;
    gap: 8px !important;
    align-items: flex-end;
}

.cr-btn {
    padding: 8px 16px;
    border: 1px solid var(--cr-color-btn-bg, #8b7355);
    border-radius: 4px;
    background: var(--cr-color-btn-bg, #8b7355);
    color: var(--cr-color-btn-text, #fff);
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.cr-btn:hover { opacity: var(--cr-color-btn-hover-opacity, 0.85); }

.cr-btn-secondary {
    background: var(--cr-color-search-bg, #fff);
    color: var(--cr-browse-color-text-dim, #665544);
    border-color: var(--cr-browse-color-border, #d4c9b8);
}

.cr-btn-secondary:hover {
    background: var(--cr-browse-color-bg, #f5f1eb);
    opacity: 1;
}

.cr-perpage-wrap {
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
    margin-left: auto;
}

.cr-perpage-wrap select { min-width: auto !important; }

/* ── browse results table ── */

.cr-browse-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cr-browse-table thead th {
    background: var(--cr-color-table-header-bg, #665544);
    color: var(--cr-color-table-header-text, #fff);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cr-browse-table tbody tr {
    border-bottom: 1px solid var(--cr-color-table-row-border, #e5ddd2);
}

.cr-browse-table tbody tr:hover {
    background: var(--cr-color-table-row-hover, #faf7f2);
}

.cr-browse-table tbody td { padding: 10px 12px; }

/* ── view buttons ── */

.cr-view-btn {
    padding: 4px 14px;
    background: var(--cr-color-btn-bg, #8b7355);
    color: var(--cr-color-btn-text, #fff);
    border: 1px solid var(--cr-color-btn-bg, #8b7355);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cr-view-btn:hover { opacity: var(--cr-color-btn-hover-opacity, 0.85); }

/* ── gender icons ── */

.cr-gender-icon {
    font-size: 13px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
}

.cr-gender-m { color: var(--cr-color-gender-m, #5b8dbd); }
.cr-gender-f { color: var(--cr-color-gender-f, #c47a8e); }

/* ── pagination ── */

.cr-pagination {
    margin-top: 16px;
    text-align: center;
}

.cr-pagination-inner {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.cr-page-link {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--cr-browse-color-border, #d4c9b8);
    border-radius: 4px;
    text-decoration: none;
    color: var(--cr-browse-color-text-dim, #665544);
    font-size: 13px;
    background: var(--cr-color-search-bg, #fff);
    cursor: pointer;
}

.cr-page-link:hover { background: var(--cr-browse-color-bg, #f5f1eb); }

.cr-page-active {
    background: var(--cr-color-btn-bg, #8b7355) !important;
    color: var(--cr-color-btn-text, #fff) !important;
    border-color: var(--cr-color-btn-bg, #8b7355) !important;
}

.cr-page-dots {
    display: inline-block;
    padding: 6px 4px;
    color: #999;
}

.cr-result-count {
    margin-top: 8px;
    font-size: 13px;
    color: var(--cr-browse-color-text-dim, #665544);
    text-align: center;
}

.cr-loading {
    padding: 40px;
    text-align: center;
    color: var(--cr-browse-color-text-dim, #665544);
    font-style: italic;
}

/* ── detail view ── */

.cr-detail-layout {
    display: flex;
    gap: 0;
    border: 1px solid var(--cr-browse-color-border, #d4c9b8);
    border-radius: 6px;
    overflow: hidden;
    background: var(--cr-color-detail-bg, #fff);
    margin-top: 12px;
}

.cr-detail-info {
    flex: 0 0 28%;
    max-width: 28%;
    padding: 20px;
    background: var(--cr-color-detail-sidebar-bg, #f5f1eb);
    border-right: 1px solid var(--cr-browse-color-border, #d4c9b8);
}

.cr-detail-info h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: var(--cr-browse-color-text, #333);
    border-bottom: 2px solid var(--cr-browse-color-border, #d4c9b8);
    padding-bottom: 10px;
}

.cr-detail-info dl { margin: 0; }

.cr-detail-info dt {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cr-browse-color-text-dim, #665544);
    margin-top: 12px;
}

.cr-detail-info dt:first-child { margin-top: 0; }

.cr-detail-info dd {
    margin: 2px 0 0 0;
    font-size: 15px;
    color: var(--cr-browse-color-text, #333);
}

.cr-detail-image {
    flex: 1;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

#cr-detail-image-wrap {
    width: 100%;
    text-align: center;
}

.cr-image-protected {
    position: relative;
    display: inline-block;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
}

.cr-image-protected img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--cr-browse-color-border, #d4c9b8);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    pointer-events: none;
}

.cr-image-shield {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent;
    z-index: 10;
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════
   FAMILY EXPLORER MODE
   ═══════════════════════════════════════════════════════════ */

.cr-explorer-theme {
    background: var(--cr-browse-color-bg, #f5f1eb);
    color: var(--cr-browse-color-text, #333);
    border: 1px solid var(--cr-browse-color-border, #d4c9b8);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 20px;
}

/* ── search ── */

.cr-explorer-search { margin-bottom: 16px; }

.cr-explorer-search input {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    background: var(--cr-color-search-bg, #fff);
    border: 1px solid var(--cr-color-search-border, #d4c9b8);
    border-radius: 6px;
    color: var(--cr-browse-color-text, #333);
    font-size: 15px;
}

.cr-explorer-search input:focus {
    outline: none;
    border-color: var(--cr-color-search-focus, #8b7355);
    box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.2);
}

.cr-explorer-search input::placeholder { color: #aaa; }

/* ── stats ── */

.cr-explorer-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cr-stat-card {
    background: var(--cr-color-stat-bg, #fff);
    border: 1px solid var(--cr-color-stat-border, #d4c9b8);
    border-radius: 6px;
    padding: 10px 16px;
    text-align: center;
}

.cr-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--cr-color-stat-value, #8b7355);
}

.cr-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cr-color-stat-label, #665544);
}

/* ── letter nav ── */

.cr-letter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.cr-letter-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cr-color-letter-bg, #fff);
    border: 1px solid var(--cr-browse-color-border, #d4c9b8);
    border-radius: 4px;
    color: var(--cr-browse-color-text, #333);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cr-letter-btn:hover {
    background: var(--cr-browse-color-hover, #faf7f2);
    border-color: var(--cr-browse-color-accent, #8b7355);
}

.cr-letter-btn.active {
    background: var(--cr-color-letter-active-bg, #8b7355);
    color: var(--cr-color-letter-active-text, #fff);
    border-color: var(--cr-color-letter-active-bg, #8b7355);
}

.cr-letter-btn.disabled { opacity: 0.3; cursor: default; }

/* ── surname list ── */

.cr-surname-section { margin-bottom: 16px; }

.cr-surname-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--cr-color-surname-heading, #665544);
    border-bottom: 1px solid var(--cr-browse-color-border, #d4c9b8);
    padding-bottom: 4px;
    margin: 0 0 6px 0;
}

.cr-surname-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.cr-surname-link {
    color: var(--cr-color-surname-link, #8b7355);
    cursor: pointer;
    font-size: 14px;
    text-transform: capitalize;
}

.cr-surname-link:hover {
    color: var(--cr-color-surname-heading, #665544);
    text-decoration: underline;
}

/* ── controls ── */

.cr-explorer-controls {
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--cr-color-controls-bg, #fff);
    border: 1px solid var(--cr-color-controls-border, #d4c9b8);
    border-radius: 6px;
    font-size: 13px;
    color: var(--cr-browse-color-text-dim, #665544);
}

.cr-explorer-controls input[type="range"] {
    vertical-align: middle;
    accent-color: var(--cr-browse-color-accent, #8b7355);
}

.cr-control-row { margin-bottom: 10px; }

.cr-control-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--cr-browse-color-text, #333);
}

.cr-control-checkbox input[type="checkbox"] {
    accent-color: var(--cr-browse-color-accent, #8b7355);
    width: 16px;
    height: 16px;
}

.cr-control-slider { padding: 8px 0 12px 0; }

.cr-control-slider label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--cr-browse-color-text, #333);
}

.cr-control-slider input[type="range"] {
    flex: 1;
    max-width: 300px;
}

#cr-split-value {
    font-weight: 700;
    color: var(--cr-browse-color-accent, #8b7355);
    min-width: 24px;
}

.cr-control-hint {
    margin: 6px 0 0 0;
    font-size: 12px;
    color: var(--cr-browse-color-text-dim, #665544);
    line-height: 1.4;
    font-style: italic;
}

.cr-control-toggles {
    display: flex;
    gap: 24px;
    padding-top: 8px;
    border-top: 1px solid var(--cr-browse-color-border, #d4c9b8);
}

/* ── family cards ── */

.cr-family-card {
    background: var(--cr-color-card-bg, #fff);
    border: 1px solid var(--cr-color-card-border, #d4c9b8);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.cr-family-card.linked {
    border-color: var(--cr-color-linked-name, #8b7355);
    border-width: 2px;
}

.cr-family-card.was-split {
    border-left: 3px solid var(--cr-color-split-border, #c9a84c);
}

.cr-family-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.cr-family-header:hover {
    background: var(--cr-color-card-hover, #faf7f2);
}

.cr-family-parents {
    font-weight: 600;
    color: var(--cr-color-parent-text, #333);
}

.cr-family-meta {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 13px;
}

.cr-child-count { color: var(--cr-browse-color-text-dim, #665544); }
.cr-year-range  { color: var(--cr-browse-color-text-dim, #665544); }
.cr-expand-arrow {
    color: var(--cr-browse-color-text-dim, #665544);
    font-size: 18px;
    transition: transform 0.2s;
}

.cr-family-card.expanded .cr-expand-arrow { transform: rotate(90deg); }

/* ── children table ── */

.cr-children-wrap {
    display: none;
    padding: 0 16px 12px;
}

.cr-family-card.expanded .cr-children-wrap { display: block; }

.cr-children-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cr-children-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--cr-browse-color-text-dim, #665544);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--cr-browse-color-border, #d4c9b8);
}

.cr-children-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--cr-color-table-row-border, #e5ddd2);
}

.cr-child-name {
    color: var(--cr-color-child-text, #333);
    font-weight: 500;
}

.cr-child-name.is-linked {
    color: var(--cr-color-linked-name, #8b7355);
    cursor: pointer;
    font-weight: 600;
}

.cr-child-name.is-linked:hover { text-decoration: underline; }

.cr-gender-symbol {
    color: var(--cr-browse-color-text-dim, #665544);
    font-size: 12px;
}

.cr-date-text { color: var(--cr-browse-color-text-dim, #665544); }

.cr-page-btn-exp {
    padding: 3px 10px;
    background: var(--cr-color-btn-bg, #8b7355);
    color: var(--cr-color-btn-text, #fff);
    border: 1px solid var(--cr-color-btn-bg, #8b7355);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cr-page-btn-exp:hover { opacity: var(--cr-color-btn-hover-opacity, 0.85); }

.cr-church-tag {
    font-size: 10px;
    background: rgba(139, 115, 85, 0.12);
    color: var(--cr-browse-color-accent, #8b7355);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
}

/* ── generational links ── */

.cr-genlinks {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--cr-color-genlink-bg, #f5f1eb);
    border: 1px solid var(--cr-color-genlink-border, #d4c9b8);
    border-radius: 4px;
}

.cr-genlink-item {
    font-size: 12px;
    color: var(--cr-browse-color-text-dim, #665544);
    margin-bottom: 4px;
}

.cr-genlink-item:last-child { margin-bottom: 0; }

.cr-confidence-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.cr-confidence-high {
    background: var(--cr-color-conf-high-bg, #e6f4ea);
    color: var(--cr-color-conf-high-text, #1a7a2e);
}

.cr-confidence-medium {
    background: var(--cr-color-conf-med-bg, #fef7e0);
    color: var(--cr-color-conf-med-text, #8a6d1b);
}

.cr-confidence-low {
    background: var(--cr-color-conf-low-bg, #f0ece6);
    color: var(--cr-color-conf-low-text, #888);
}

/* ── explore family buttons ── */

.cr-explore-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cr-explore-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cr-browse-color-text-dim, #998877);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cr-explore-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    line-height: 1.4;
}

.cr-explore-btn:hover {
    opacity: 0.85;
    transform: translateX(2px);
}

.cr-explore-high {
    background: #c0392b;
    color: #fff;
}

.cr-explore-medium {
    background: #d4644a;
    color: #fff;
}

.cr-explore-low {
    background: #d4a08a;
    color: #fff;
}

.cr-explore-arrow {
    font-weight: bold;
    margin: 0 3px;
}

.cr-explore-gap {
    opacity: 0.8;
    font-size: 11px;
    margin-left: 4px;
}

/* ── family exploration modal ── */

.cr-family-modal-content {
    background: var(--cr-color-bg, #faf8f5);
    border-radius: 8px;
    max-width: 650px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.cr-family-modal-body {
    padding: 16px 20px 20px;
}

.cr-fm-connection {
    padding: 10px 12px;
    margin-bottom: 16px;
    background: var(--cr-color-genlink-bg, #f5f1eb);
    border: 1px solid var(--cr-color-genlink-border, #d4c9b8);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cr-color-text, #2e2219);
}

.cr-fm-family-card {
    border: 1px solid var(--cr-color-family-border, #d4c9b8);
    border-radius: 6px;
    background: var(--cr-color-family-bg, #fff);
    overflow: hidden;
}

.cr-fm-parents {
    padding: 10px 14px;
    background: var(--cr-color-family-parent-bg, #f5f1eb);
    font-size: 14px;
    border-bottom: 1px solid var(--cr-color-family-border, #d4c9b8);
}

.cr-fm-years {
    float: right;
    font-size: 12px;
    color: var(--cr-browse-color-text-dim, #998877);
    font-weight: normal;
}

.cr-fm-children {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cr-fm-children thead th {
    background: var(--cr-browse-color-header-bg, #665544);
    color: var(--cr-browse-color-header-text, #faf8f5);
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
}

.cr-fm-children tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--cr-browse-color-border, #e8e0d4);
}

.cr-fm-children tbody tr:last-child td {
    border-bottom: none;
}

.cr-fm-view-btn {
    font-size: 11px !important;
    padding: 2px 8px !important;
}

.cr-fm-actions {
    padding: 12px 0 0;
    text-align: right;
}

.cr-fm-scroll-btn {
    font-size: 12px;
    padding: 6px 14px;
}

/* ── burials section ── */

.cr-burials-section { margin-top: 20px; }

.cr-burials-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--cr-color-surname-heading, #665544);
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cr-browse-color-border, #d4c9b8);
}

.cr-burials-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cr-burials-table th {
    text-align: left;
    padding: 8px 10px;
    background: var(--cr-color-burial-header-bg, #665544);
    color: var(--cr-color-burial-header-text, #fff);
    font-size: 11px;
    text-transform: uppercase;
}

.cr-burials-table td {
    padding: 8px 10px;
    background: var(--cr-color-card-bg, #fff);
    border-bottom: 1px solid var(--cr-color-table-row-border, #e5ddd2);
}

.cr-burial-dim { color: var(--cr-color-burial-dim, #665544); }

/* ── census section ── */

.cr-census-section {
    margin-top: 24px;
    border-top: 2px solid var(--cr-browse-color-border, #d4c9b8);
    padding-top: 12px;
}

.cr-census-title {
    color: var(--cr-color-text, #2e2219);
    font-size: 15px;
    margin: 0 0 12px 0;
}

.cr-census-year-group {
    margin-bottom: 20px;
}

.cr-census-year-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--cr-color-text, #2e2219);
    margin: 0 0 6px 0;
    padding: 6px 10px;
    background: var(--cr-browse-color-header-bg, #665544);
    color: var(--cr-browse-color-header-text, #faf8f5);
    border-radius: 4px 4px 0 0;
}

.cr-census-year-count {
    font-weight: normal;
    opacity: 0.8;
    font-size: 12px;
}

.cr-census-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 4px;
}

.cr-census-table thead th {
    background: var(--cr-browse-color-filter-bg, #f5f1eb);
    color: var(--cr-color-text, #2e2219);
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cr-browse-color-border, #d4c9b8);
}

.cr-census-table tbody td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--cr-browse-color-border, #e8e0d4);
    vertical-align: top;
}

.cr-census-name {
    font-weight: 600;
    color: var(--cr-color-text, #2e2219);
}

.cr-census-dim {
    color: var(--cr-color-burial-dim, #665544);
    font-size: 12px;
}

.cr-census-role-cell {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cr-browse-color-text-dim, #998877);
    width: 55px;
    white-space: nowrap;
}

.cr-census-head-row .cr-census-role-cell {
    color: var(--cr-color-text, #2e2219);
}

.cr-census-head-row td {
    padding-top: 6px !important;
}

.cr-census-member-row td {
    border-bottom: none !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.cr-census-member-row .cr-census-name {
    font-weight: normal;
}

.cr-census-member-row .cr-census-role-cell {
    font-size: 10px;
    color: var(--cr-browse-color-text-dim, #aa9988);
}

.cr-census-household-sep td {
    height: 4px;
    padding: 0 !important;
    border-bottom: 2px solid var(--cr-browse-color-border, #d4c9b8) !important;
}

/* ═══════════════════════════════════════════════════════════
   MODAL IMAGE VIEWER
   ═══════════════════════════════════════════════════════════ */

.cr-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, var(--cr-modal-bg-opacity, 0.88));
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cr-modal-content {
    background: var(--cr-color-modal-bg, #fff);
    border: 1px solid var(--cr-browse-color-border, #d4c9b8);
    border-radius: 8px;
    max-width: 90vw;
    max-height: 90vh;
    display: inline-flex;
    flex-direction: column;
    overflow: hidden;
}

.cr-modal-autosize {
    width: auto;
}

.cr-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--cr-browse-color-border, #d4c9b8);
    background: var(--cr-color-modal-header-bg, #f5f1eb);
    gap: 16px;
}

.cr-modal-title {
    color: var(--cr-browse-color-header, #665544);
    font-size: 14px;
    font-weight: 600;
}

.cr-modal-subtitle {
    color: var(--cr-browse-color-text-dim, #665544);
    font-size: 13px;
    font-weight: 400;
    margin-left: 8px;
}

.cr-modal-close {
    background: none;
    border: none;
    color: var(--cr-browse-color-text-dim, #665544);
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.cr-modal-close:hover { color: var(--cr-browse-color-text, #333); }

.cr-modal-body {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: var(--cr-color-modal-body-bg, #faf8f4);
}

.cr-modal-image-container {
    position: relative;
    display: inline-block;
    max-height: var(--cr-modal-image-height, 700px);
    user-select: none;
    -webkit-user-select: none;
}

.cr-modal-image {
    display: block;
    max-width: 100%;
    max-height: var(--cr-modal-image-height, 700px);
    height: auto;
    -webkit-user-drag: none;
}

.cr-modal-shield {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5;
    cursor: crosshair;
}

.cr-modal-magnifier {
    display: none;
    position: absolute;
    width: var(--cr-magnifier-size, 180px);
    height: var(--cr-magnifier-size, 180px);
    border-radius: 50%;
    border: 2px solid var(--cr-color-magnifier-border, #8b7355);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 10;
    background-repeat: no-repeat;
    background-color: #fff;
}

.cr-modal-footer {
    padding: 6px 16px;
    border-top: 1px solid var(--cr-browse-color-border, #d4c9b8);
    text-align: center;
    background: var(--cr-color-modal-header-bg, #f5f1eb);
}

.cr-modal-hint {
    font-size: 12px;
    color: var(--cr-browse-color-text-dim, #665544);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   VIEW TOGGLE
   ═══════════════════════════════════════════════════════════ */

.cr-view-toggle {
    display: flex;
    gap: 0;
    margin: 10px 0;
    border: 1px solid var(--cr-color-tab-border, #c4b8a8);
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
}

.cr-view-btn {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    background: var(--cr-color-bg, #faf8f5);
    color: var(--cr-browse-color-text-dim, #665544);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.cr-view-btn:hover {
    background: var(--cr-color-tab-hover-bg, #f0ece6);
}

.cr-view-btn.active {
    background: var(--cr-color-tab-active-bg, #665544);
    color: var(--cr-color-tab-active-text, #faf8f5);
}

/* ═══════════════════════════════════════════════════════════
   ANCESTRY CHAINS
   ═══════════════════════════════════════════════════════════ */

/* ── chain summary bar ── */

.cr-chain-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--cr-color-genlink-bg, #f5f1eb);
    border: 1px solid var(--cr-color-genlink-border, #d4c9b8);
    border-radius: 4px;
    font-size: 13px;
    color: var(--cr-browse-color-text-dim, #665544);
}

.cr-chain-summary-item {
    white-space: nowrap;
}

/* ── chain breadcrumb ── */

.cr-chain-breadcrumb {
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--cr-color-explorer-panel-bg, #f5f1eb);
    border: 1px solid var(--cr-color-explorer-border, #d4c9b8);
    border-radius: 4px;
    font-size: 13px;
    color: var(--cr-browse-color-text-dim, #665544);
    position: sticky;
    top: 0;
    z-index: 5;
}

.cr-bc-arrow {
    color: var(--cr-browse-color-text-dim, #998877);
    margin: 0 2px;
}

.cr-bc-link {
    color: var(--cr-color-surname-link, #6b5d4d);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cr-bc-link:hover {
    color: var(--cr-color-btn-bg, #665544);
}

.cr-bc-static {
    color: var(--cr-browse-color-text-dim, #998877);
}

/* ── chain badge (in family header) ── */

.cr-chain-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--cr-color-conf-high-bg, #e6f4ea);
    color: var(--cr-color-conf-high-text, #1a7a2e);
    margin-right: 4px;
}

/* ── chain link items (within family cards) ── */

.cr-chain-links {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--cr-color-genlink-bg, #f5f1eb);
    border: 1px solid var(--cr-color-genlink-border, #d4c9b8);
    border-radius: 4px;
}

.cr-chain-link-item {
    font-size: 12px;
    color: var(--cr-browse-color-text-dim, #665544);
    margin-bottom: 6px;
    line-height: 1.5;
}

.cr-chain-link-item:last-child { margin-bottom: 0; }

.cr-chain-arrow {
    color: var(--cr-color-conf-high-text, #1a7a2e);
    font-weight: bold;
}

.cr-chain-gap {
    color: var(--cr-browse-color-text-dim, #998877);
    font-size: 11px;
}

.cr-chain-parents {
    font-size: 11px;
    color: var(--cr-browse-color-text-dim, #998877);
    margin-top: 2px;
    padding-left: 18px;
}

.cr-chain-jump {
    color: var(--cr-color-surname-link, #6b5d4d);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: 11px;
}

.cr-chain-jump:hover {
    color: var(--cr-color-btn-bg, #665544);
}

/* ── chain highlight flash ── */

@keyframes cr-chain-flash {
    0%   { box-shadow: 0 0 0 3px var(--cr-color-conf-high-bg, #e6f4ea); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.cr-chain-highlight {
    animation: cr-chain-flash 2s ease-out;
}

.cr-family-card.has-chain {
    border-left: 3px solid var(--cr-color-conf-high-text, #1a7a2e);
}

/* ═══════════════════════════════════════════════════════════
   CENSUS RECORDS MODE
   ═══════════════════════════════════════════════════════════ */

.cr-census-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0;
    border-bottom: 1px solid var(--cr-browse-color-border, #d4c9b8);
    margin-bottom: 10px;
}

.cr-census-area-tab {
    background: #f5f0e8;
    border: 1px solid #d4c9b8;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: #5a4e3c;
}

.cr-census-area-tab:hover {
    background: #ebe4d6;
    border-color: #b5a58a;
}

.cr-census-area-tab.active {
    background: var(--cr-tab-color-active, #f0c75e);
    border-color: var(--cr-tab-color-active, #f0c75e);
    color: #3a3020;
    font-weight: 600;
}

.cr-census-area-count {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.7;
}

.cr-census-years {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 0;
    margin-bottom: 10px;
}

.cr-census-year-pill {
    background: #fff;
    border: 1px solid #c5b89a;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    color: #5a4e3c;
}

.cr-census-year-pill:hover {
    background: #f5f0e8;
    border-color: #a89878;
}

.cr-census-year-pill.active {
    background: #5a4e3c;
    color: #fff;
    border-color: #5a4e3c;
}

.cr-census-select-all {
    font-weight: 600;
    border-style: dashed;
}

.cr-census-select-all.active {
    background: #5a4e3c;
    color: #fff;
    border-color: #5a4e3c;
    border-style: solid;
}

.cr-census-pill-count {
    font-size: 10px;
    opacity: 0.65;
}

.cr-census-searchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.cr-census-searchbar input[type="text"] {
    padding: 7px 12px;
    border: 1px solid #c5b89a;
    border-radius: 4px;
    font-size: 14px;
    min-width: 200px;
}

.cr-census-info {
    font-size: 12px;
    color: #888;
    margin-left: auto;
}

/* Household cards */

.cr-census-household {
    margin-bottom: 16px;
    border: 1px solid #d4c9b8;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.cr-census-hh-header {
    background: var(--cr-browse-color-header, #5a4e3c);
    color: #fff;
    padding: 8px 14px;
    font-size: 13px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.cr-census-hh-num {
    font-weight: 600;
}

.cr-census-hh-addr {
    opacity: 0.8;
    font-size: 12px;
}

.cr-census-hh-year {
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.cr-census-hh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cr-census-hh-table thead th {
    background: #f5f0e8;
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6b5d48;
    border-bottom: 1px solid #d4c9b8;
}

.cr-census-hh-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #ede8df;
    vertical-align: top;
}

.cr-census-hh-table tbody tr:last-child td {
    border-bottom: none;
}

.cr-census-hh-table tbody tr:hover {
    background: #faf8f4;
}

.cr-census-head td {
    font-weight: 600;
}

.cr-census-name {
    white-space: nowrap;
}

.cr-census-age {
    text-align: center;
    min-width: 30px;
}

.cr-no-census {
    padding: 30px 20px;
    text-align: center;
    color: #888;
    font-style: italic;
}

/* View button in census rows */

.cr-census-view-cell {
    text-align: right;
    white-space: nowrap;
}

.cr-census-view-btn {
    background: #f5f0e8;
    border: 1px solid #c5b89a;
    border-radius: 4px;
    padding: 3px 12px;
    font-size: 12px;
    cursor: pointer;
    color: #5a4e3c;
    transition: all 0.15s;
}

.cr-census-view-btn:hover {
    background: #5a4e3c;
    color: #fff;
    border-color: #5a4e3c;
}

/* Cross-reference buttons (B, M, Bu) */

.cr-census-xref-th {
    text-align: center;
    min-width: 90px;
}

.cr-census-xref-cell {
    text-align: center;
    white-space: nowrap;
}

.cr-xref-btn {
    display: inline-block;
    padding: 1px 5px;
    margin: 0 1px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.15s;
    line-height: 1.4;
    vertical-align: middle;
}

.cr-xref-bap {
    background: #e6f4ea;
    color: #1a7a2e;
    border-color: #a8d5b5;
}
.cr-xref-bap:hover {
    background: #1a7a2e;
    color: #fff;
}

.cr-xref-mar {
    background: #e8eaf6;
    color: #3949ab;
    border-color: #9fa8da;
}
.cr-xref-mar:hover {
    background: #3949ab;
    color: #fff;
}

.cr-xref-bur {
    background: #f3e5e5;
    color: #8b4545;
    border-color: #d4a0a0;
}
.cr-xref-bur:hover {
    background: #8b4545;
    color: #fff;
}

.cr-xref-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Census Person Modal - side-by-side layout */

.cr-census-modal-content {
    width: var(--cr-census-modal-width, 85%);
    max-width: 1200px;
    max-height: var(--cr-census-modal-max-height, 85%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cr-census-modal-body {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.cr-census-modal-info {
    width: var(--cr-census-modal-info-width, 30%);
    min-width: 220px;
    padding: 20px 24px;
    overflow-y: auto;
    border-right: 1px solid #ede8df;
    flex-shrink: 0;
    align-self: flex-start;
}

.cr-census-modal-image-wrap {
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding: 10px;
    background: var(--cr-color-modal-body-bg, #faf8f4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cr-census-modal-image-container {
    position: relative;
    display: inline-block;
    user-select: none;
    -webkit-user-select: none;
    max-width: 100%;
}

.cr-census-modal-img {
    display: block;
    max-width: 100%;
    height: auto;
    -webkit-user-drag: none;
}

.cr-census-magnifier {
    display: none;
    position: absolute;
    width: var(--cr-census-magnifier-size, 220px);
    height: var(--cr-census-magnifier-size, 220px);
    border-radius: 50%;
    border: 2px solid var(--cr-color-census-mag-border, #8b7355);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 10;
    background-repeat: no-repeat;
    background-color: #fff;
}

.cr-census-modal-dl {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 4px 12px;
    font-size: 14px;
    margin: 0;
}

.cr-census-modal-dl dt {
    font-weight: 600;
    color: #6b5d48;
    padding: 4px 0;
}

.cr-census-modal-dl dd {
    margin: 0;
    padding: 4px 0;
    color: #333;
}

/* Census modal - enhanced name and family info */

.cr-census-modal-content .cr-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--cr-browse-color-header, #3a3020);
}

.cr-census-modal-family {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #ede8df;
}

.cr-census-modal-family h4 {
    font-size: 12px;
    font-weight: 600;
    color: #6b5d48;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 6px 0;
}

.cr-census-modal-parents {
    font-size: 13px;
    color: #333;
    margin-bottom: 12px;
}

.cr-census-modal-parents span {
    display: block;
    padding: 2px 0;
}

.cr-census-modal-parents .cr-parent-label {
    color: #6b5d48;
    font-weight: 600;
    display: inline;
    margin-right: 4px;
}

.cr-census-modal-siblings {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cr-census-modal-siblings li {
    padding: 2px 0;
}

.cr-census-modal-siblings a {
    font-size: 13px;
    color: var(--cr-browse-color-accent, #8b7355);
    text-decoration: none;
    cursor: pointer;
}

.cr-census-modal-siblings a:hover {
    text-decoration: underline;
    color: var(--cr-browse-color-header, #3a3020);
}

.cr-census-modal-siblings .cr-sib-self {
    font-weight: 600;
    color: #333;
    cursor: default;
}

.cr-census-modal-siblings .cr-sib-age {
    color: #999;
    font-size: 11px;
    margin-left: 4px;
}

/* Select All pill */

.cr-census-select-all {
    background: #5a4e3c !important;
    color: #fff !important;
    border-color: #5a4e3c !important;
    font-weight: 600;
    font-size: 12px;
}

.cr-census-select-all:not(.active) {
    background: #ddd !important;
    color: #666 !important;
    border-color: #bbb !important;
}

/* Year badge in household header */

.cr-census-hh-year {
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .cr-tabs { flex-wrap: wrap; }
    .cr-tab { font-size: 12px; padding: 8px 12px; }
    .cr-browse-bar { flex-direction: column; }
    .cr-browse-field select,
    .cr-browse-field input[type="text"] { min-width: 100%; }
    .cr-detail-layout { flex-direction: column; }
    .cr-detail-info { flex: none; max-width: 100%; border-right: none; border-bottom: 1px solid var(--cr-browse-color-border, #d4c9b8); }
    .cr-browse-table { font-size: 12px; }
    .cr-browse-table thead th,
    .cr-browse-table tbody td { padding: 8px 6px; }
    .cr-modal-content { width: 98vw; max-height: 95vh; }

    .cr-census-areas { gap: 4px; }
    .cr-census-area-tab { padding: 6px 10px; font-size: 12px; }
    .cr-census-hh-table { font-size: 11px; }
    .cr-census-hh-table thead th,
    .cr-census-hh-table tbody td { padding: 4px 6px; }
    .cr-census-searchbar input[type="text"] { min-width: 140px; }
    .cr-census-modal-content { width: 98vw; max-height: 95vh; }
    .cr-census-modal-body { flex-direction: column; }
    .cr-census-modal-info { width: 100%; min-width: auto; border-right: none; border-bottom: 1px solid #ede8df; }
}


/* ═══════════════════════════════════════════════════════════
   LOCAL RECORDS SHORTCODE  (.lr-* classes)
   Shares the same CSS custom properties as .cr-* above.
   ═══════════════════════════════════════════════════════════ */

/* ── App wrapper ── */

.lr-app {
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cr-browse-color-text, #333);
    position: relative;
    float: none;
}

.lr-app *, .lr-app *::before, .lr-app *::after {
    box-sizing: border-box;
}

/* ── Tabs ── */

.lr-record-nav {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100%;
    border-bottom: 2px solid var(--cr-browse-color-border, #d4c9b8);
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;  /* removes inline-block whitespace gaps between buttons */
}

.lr-record-nav-btn {
    display: inline-block !important;
    vertical-align: bottom;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--cr-browse-color-text-dim, #665544);
    font-size: 14px;  /* restore after font-size:0 on parent */
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    position: static !important;
    float: none !important;
}

.lr-record-nav-btn:hover {
    background: var(--cr-color-tab-hover-bg, #faf7f2);
    color: var(--cr-browse-color-text, #333);
}

.lr-record-nav-btn.active {
    background: var(--cr-color-tab-active-bg, #f5f1eb);
    color: var(--cr-color-tab-active-text, #8b7355);
    border-color: var(--cr-browse-color-border, #d4c9b8);
    margin-bottom: -2px;
    border-bottom: 2px solid var(--cr-color-tab-active-bg, #f5f1eb);
    font-weight: 700;
}

/* ── Panels ── */

.lr-panel {
    display: none;
    background: var(--cr-browse-color-bg, #f5f1eb);
    border: 1px solid var(--cr-browse-color-border, #d4c9b8);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 20px;
}

.lr-panel.active { display: block; }

/* ── Search form ── */

.lr-search-form {
    margin-bottom: 16px;
}

.lr-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    background: var(--cr-color-search-bg, #fff);
    border: 1px solid var(--cr-color-search-border, #d4c9b8);
    border-radius: 6px;
    padding: 10px 12px;
}

.lr-search-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lr-search-field label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cr-browse-color-text-dim, #665544);
}

.lr-search-field input[type="text"],
.lr-search-field select {
    padding: 7px 10px;
    border: 1px solid var(--cr-color-search-border, #d4c9b8);
    border-radius: 4px;
    font-size: 14px;
    background: var(--cr-color-search-bg, #fff);
    min-width: 140px;
    color: var(--cr-browse-color-text, #333);
}

.lr-search-field input[type="text"]:focus,
.lr-search-field select:focus {
    outline: none;
    border-color: var(--cr-color-search-focus, #8b7355);
    box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.2);
}

.lr-field-narrow input[type="text"],
.lr-field-narrow select { min-width: 90px; max-width: 100px; }

.lr-field-medium select,
.lr-field-medium input[type="text"] { min-width: 160px; }

.lr-field-check { justify-content: flex-end; }

.lr-check-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--cr-browse-color-text, #333);
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    padding-bottom: 7px;
}

.lr-search-btns { justify-content: flex-end; }

.lr-btn-row {
    display: flex;
    gap: 6px;
}

/* ── Buttons ── */

.lr-btn {
    padding: 7px 16px;
    border: 1px solid var(--cr-color-btn-bg, #8b7355);
    border-radius: 4px;
    background: var(--cr-color-btn-bg, #8b7355);
    color: var(--cr-color-btn-text, #fff);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.lr-btn:hover { opacity: 0.85; }

.lr-btn-secondary {
    background: var(--cr-color-search-bg, #fff);
    color: var(--cr-browse-color-text-dim, #665544);
    border-color: var(--cr-browse-color-border, #d4c9b8);
}

.lr-btn-secondary:hover {
    background: var(--cr-browse-color-bg, #f5f1eb);
    opacity: 1;
}

.lr-btn-hh {
    background: var(--cr-color-letter-bg, #fff);
    color: var(--cr-browse-color-text-dim, #5a4e3c);
    border: 1px solid var(--cr-browse-color-border, #c5b89a);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.lr-btn-hh:hover {
    background: var(--cr-browse-color-header, #5a4e3c);
    color: #fff;
    border-color: var(--cr-browse-color-header, #5a4e3c);
}

/* ── View / action buttons in table ── */

.lr-view-btn {
    padding: 3px 12px;
    background: var(--cr-color-btn-bg, #8b7355);
    color: var(--cr-color-btn-text, #fff);
    border: 1px solid var(--cr-color-btn-bg, #8b7355);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.lr-view-btn:hover { opacity: 0.85; }

/* ── Results table ── */

.lr-result-count {
    font-size: 12px;
    color: var(--cr-browse-color-text-dim, #665544);
    margin: 0 0 8px 0;
    font-style: italic;
}

.lr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--cr-color-search-bg, #fff);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--cr-browse-color-border, #d4c9b8);
}

.lr-table thead th {
    background: var(--cr-color-table-header-bg, #665544);
    color: var(--cr-color-table-header-text, #fff);
    padding: 9px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lr-table tbody tr {
    border-bottom: 1px solid var(--cr-color-table-row-border, #e5ddd2);
}

.lr-table tbody tr:last-child { border-bottom: none; }

.lr-table tbody tr:hover { background: var(--cr-color-table-row-hover, #faf7f2); }

.lr-table tbody td { padding: 8px 10px; vertical-align: middle; }

.lr-td-name  { font-weight: 600; }
.lr-td-narrow { text-align: center; min-width: 50px; }
.lr-td-actions { white-space: nowrap; text-align: right; min-width: 140px; }
.lr-th-actions { width: 1%; white-space: nowrap; }

.lr-age {
    font-weight: normal;
    color: var(--cr-browse-color-text-dim, #665544);
    font-size: 12px;
}

/* Linked person star badge */
.lr-linked-badge {
    color: var(--cr-browse-color-accent, #8b7355);
    font-size: 11px;
    vertical-align: middle;
    margin-left: 3px;
    title: "Profile available";
}

/* ── Gender icons ── */

.lr-gender     { font-size: 13px; margin-left: 3px; vertical-align: middle; }
.lr-gender-m   { color: var(--cr-color-gender-m, #5b8dbd); }
.lr-gender-f   { color: var(--cr-color-gender-f, #c47a8e); }

/* ── Loading / no results ── */

.lr-loading, .lr-loading-inline {
    padding: 24px;
    text-align: center;
    color: var(--cr-browse-color-text-dim, #665544);
    font-style: italic;
}

.lr-loading-inline { padding: 12px; }

.lr-no-results {
    padding: 24px;
    text-align: center;
    color: var(--cr-browse-color-text-dim, #665544);
    font-style: italic;
    background: var(--cr-color-search-bg, #fff);
    border: 1px solid var(--cr-browse-color-border, #d4c9b8);
    border-radius: 4px;
}

/* ── Pagination ── */

.lr-pag-inner {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 14px;
}

.lr-page-btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--cr-browse-color-border, #d4c9b8);
    border-radius: 4px;
    background: var(--cr-color-search-bg, #fff);
    color: var(--cr-browse-color-text-dim, #665544);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.lr-page-btn:hover { background: var(--cr-browse-color-bg, #f5f1eb); }

.lr-page-active {
    background: var(--cr-color-btn-bg, #8b7355) !important;
    color: var(--cr-color-btn-text, #fff) !important;
    border-color: var(--cr-color-btn-bg, #8b7355) !important;
}

.lr-pag-dots {
    display: inline-block;
    padding: 6px 4px;
    color: #999;
}

/* ── Unified modal ── */

.lr-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.78);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.lr-modal-content {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.4);
}

.lr-modal-unified { max-width: 1140px; }

/* Header: title + close button */
.lr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cr-browse-color-border, #d4c9b8);
    background: var(--cr-color-detail-sidebar-bg, #f5f1eb);
    gap: 14px;
    flex-shrink: 0;
}

.lr-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--cr-browse-color-text, #333);
    flex: 1;
}

.lr-modal-close {
    background: none;
    border: none;
    font-size: 26px;
    color: var(--cr-browse-color-text-dim, #665544);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}

.lr-modal-close:hover { color: var(--cr-browse-color-text, #333); }

.lr-modal-back {
    background: none;
    border: 1px solid var(--cr-browse-color-border, #d4c9b8);
    border-radius: 4px;
    font-size: 13px;
    color: var(--cr-browse-color-text-dim, #665544);
    cursor: pointer;
    padding: 4px 10px;
    line-height: 1.4;
    flex-shrink: 0;
    white-space: nowrap;
}

.lr-modal-back:hover {
    background: var(--cr-browse-color-border, #d4c9b8);
    color: var(--cr-browse-color-text, #333);
}

/* Tab bar: hidden until 2+ tabs exist */
.lr-modal-tabbar {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 2px solid var(--cr-browse-color-border, #d4c9b8);
    background: var(--cr-browse-color-bg, #faf7f3);
    padding: 0 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.lr-modal-tab-btn {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    color: var(--cr-browse-color-text-dim, #776655);
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -2px;    /* overlap the tabbar border-bottom */
    white-space: nowrap;
}

.lr-modal-tab-btn:hover {
    color: var(--cr-browse-color-text, #333);
    border-bottom-color: var(--cr-browse-color-border, #d4c9b8);
}

.lr-modal-tab-btn.active {
    color: var(--cr-color-btn-bg, #8b7355);
    border-bottom-color: var(--cr-color-btn-bg, #8b7355);
}

/* Different accent colours per tab type */
.lr-modal-tab-household.active  { color: #4a7a5a; border-bottom-color: #4a7a5a; }
.lr-modal-tab-census.active     { color: #2c5f8a; border-bottom-color: #2c5f8a; }
.lr-modal-tab-baptisms.active   { color: #1a7a2e; border-bottom-color: #1a7a2e; }
.lr-modal-tab-marriages.active  { color: #7b2d8a; border-bottom-color: #7b2d8a; }
.lr-modal-tab-burials.active    { color: #8b4545; border-bottom-color: #8b4545; }

.lr-modal-tab-checking {
    font-size: 11px;
    font-style: italic;
    color: var(--cr-browse-color-text-dim, #aaa);
    padding: 0 10px;
    align-self: center;
}

/* Scrollable body */
.lr-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

/* ── Detail fields ── */

.lr-detail-dl {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 4px 14px;
    margin: 0;
    font-size: 14px;
}

.lr-detail-dl dt {
    font-weight: 700;
    color: var(--cr-browse-color-text-dim, #665544);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 6px 0;
}

.lr-detail-dl dd {
    margin: 0;
    padding: 6px 0;
    color: var(--cr-browse-color-text, #333);
    border-bottom: 1px solid var(--cr-color-table-row-border, #f0ece6);
}

/* ── Xref results table (inside a modal tab) ── */

.lr-xref-table { width: 100%; }

.lr-xref-row { border-bottom: 1px solid var(--cr-color-table-row-border, #ede8df); }
.lr-xref-row:last-child { border-bottom: none; }

.lr-xref-td-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--cr-browse-color-text, #333);
    padding: 9px 12px 9px 0;
    width: 50%;
}

.lr-xref-td-sub {
    font-size: 13px;
    color: var(--cr-browse-color-text-dim, #665544);
    padding: 9px 12px 9px 0;
}

.lr-xref-view-btn {
    padding: 4px 12px;
    background: var(--cr-color-btn-bg, #8b7355);
    color: var(--cr-color-btn-text, #fff);
    border: 1px solid var(--cr-color-btn-bg, #8b7355);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.lr-xref-view-btn:hover { opacity: 0.85; }

/* ── Household tab specifics ── */

.lr-hh-meta {
    font-size: 13px;
    color: var(--cr-browse-color-text-dim, #665544);
    margin: 0 0 14px 0;
    font-style: italic;
}

.lr-hh-table .lr-hh-head td {
    font-weight: 700;
    background: rgba(139, 115, 85, 0.06);
}

.lr-hh-view-btn {
    padding: 3px 9px;
    background: none;
    border: 1px solid var(--cr-browse-color-border, #c4b89e);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    color: var(--cr-browse-color-text-dim, #665544);
}
.lr-hh-view-btn:hover { background: var(--cr-browse-color-bg, #f0ece6); }

/* ── Responsive ── */

@media (max-width: 768px) {
    .lr-record-nav { border-bottom: none; }
    .lr-record-nav-btn  { display: block !important; width: 100%; border-bottom: 1px solid var(--cr-browse-color-border, #d4c9b8); border-radius: 0; font-size: 14px; }
    .lr-record-nav-btn.active { border-bottom: 3px solid var(--cr-color-btn-bg, #8b7355); }
    .lr-panel { border-radius: 0; }
    .lr-search-row { flex-direction: column; }
    .lr-search-field input[type="text"],
    .lr-search-field select { min-width: 100%; }
    .lr-field-narrow input[type="text"],
    .lr-field-narrow select { max-width: 100%; }
    .lr-table { font-size: 12px; }
    .lr-table thead th,
    .lr-table tbody td { padding: 6px 6px; }
    .lr-modal { padding: 8px; }
    .lr-modal-content { max-height: 97vh; }
    .lr-modal-tab-btn { padding: 8px 12px; font-size: 12px; }
    .lr-detail-dl { grid-template-columns: 120px 1fr; }
}