:root {
    --forest: #2f4a34;
    --forest-dark: #1f3324;
    --gold: #b98b3e;
    --cream: #f6f1e7;
    --paper: #fffdf8;
    --ink: #2a271f;
    --ink-soft: #5a5548;
    --border: rgba(42, 39, 31, 0.12);
    --accent-blue: #2563eb;
    --accent-blue-dark: #1d4ed8;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--ink);
    background: var(--cream);
}

img {
    max-width: 100%;
    display: block;
}

/* ---------- Header ---------- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 2rem;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.brand img {
    height: 44px;
    width: auto;
}

.brand-text {
    font-size: 1.6rem;
    color: var(--forest);
    letter-spacing: 0.02em;
    font-weight: normal;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 640px) {
    .site-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.6rem 1rem;
    }

    .header-right {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.4rem;
    }

    .header-right .btn,
    .header-actions .btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .header-actions {
        gap: 0.4rem;
    }
}

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

.lang-switcher select {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.35rem 1.6rem 0.35rem 0.6rem;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--forest);
    cursor: pointer;
    transition: background 0.15s ease;
}

.icon-btn:hover {
    background: rgba(47, 74, 52, 0.08);
}

.dev-menu {
    position: relative;
}

.dev-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95rem;
    color: var(--forest);
    background: transparent;
    border: 1px solid var(--forest);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dev-menu-toggle:hover {
    background: var(--forest);
    color: var(--paper);
}

.dev-menu-caret {
    transition: transform 0.15s ease;
}

.dev-menu.is-open .dev-menu-caret {
    transform: rotate(180deg);
}

.dev-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(31, 51, 36, 0.15);
    padding: 0.5rem;
    display: none;
    z-index: 20;
}

.dev-menu.is-open .dev-menu-panel {
    display: block;
}

.dev-menu-panel a {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
}

.dev-menu-panel a:hover {
    background: var(--cream);
}

/* ---------- Manager ---------- */

.manager-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}

/* Manage Users specifically: the table has enough columns (name, email,
   country, verified, joined, roles, actions) that the standard 960px column
   clips it into a horizontal scrollbar even on an ordinary laptop screen.
   This one page is allowed to use the full width instead. */
.manager-main-wide {
    max-width: 1440px;
}

.manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.manager-header h1 {
    font-size: 1.9rem;
    font-weight: normal;
    color: var(--forest);
    margin: 0;
}

.manager-add-btn {
    width: auto;
    margin-top: 0;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    white-space: nowrap;
}

.manager-empty {
    background: var(--paper);
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--ink-soft);
}

.manager-empty p {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.manager-empty-sub {
    font-size: 0.95rem !important;
    color: var(--ink-soft);
}

.tree-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
}

.tree-tile {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.tree-tile:hover {
    box-shadow: 0 12px 28px rgba(31, 51, 36, 0.1);
    transform: translateY(-2px);
}

.tree-tile-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.tree-tile-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.tree-tile-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    word-break: break-word;
}

.tree-delete-form {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
}

.tree-delete-btn {
    width: 28px;
    height: 28px;
}

html.is-narrow .manager-header {
    flex-direction: column;
    align-items: flex-start;
}

html.is-narrow .manager-add-btn {
    width: 100%;
}

.role-add-form {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.role-add-form input[type="email"],
.role-add-form select {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--ink);
}

.role-add-form input[type="email"] {
    flex: 1;
    min-width: 220px;
}

.role-add-form .btn {
    width: auto;
    margin-top: 0;
    padding: 0.65rem 1.4rem;
}

.users-table-empty {
    text-align: center;
    color: var(--ink-soft);
    padding: 2rem 1rem !important;
}

.users-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.user-search {
    width: 100%;
    max-width: 360px;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--ink);
}

.role-filter {
    display: flex;
    gap: 0.5rem;
}

.role-filter-btn {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--paper);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.role-filter-btn:hover {
    border-color: var(--forest);
}

.role-filter-btn.is-active {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--paper);
}

.user-search:focus {
    outline: none;
    border-color: var(--accent-blue);
    background: var(--paper);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.users-table-wrap {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow-x: auto;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
}

.users-table th,
.users-table td {
    text-align: left;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

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

.users-table tbody tr:hover {
    background: rgba(47, 74, 52, 0.03);
}

.users-table th {
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    user-select: none;
}

.users-table th[data-sort]:hover {
    color: var(--forest);
}

.users-table th.sorted-asc::after {
    content: " \25B2";
}

.users-table th.sorted-desc::after {
    content: " \25BC";
}

/* One consistent pill for every role: same size, same weight, same border
   treatment -- only the hue changes, and each hue is built the same way
   (a light tint, a matching border, a darker text) so the set reads as one
   family rather than four unrelated colours. Built from the site's own
   palette (forest, gold, accent-blue) rather than one-off hex values. */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.role-badge-developer {
    background: rgba(47, 74, 52, 0.09);
    border-color: rgba(47, 74, 52, 0.28);
    color: var(--forest-dark);
}

.role-badge-vip {
    background: rgba(185, 139, 62, 0.14);
    border-color: rgba(185, 139, 62, 0.38);
    color: #8a611f;
}

.role-badge-accounts {
    background: rgba(37, 99, 235, 0.09);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--accent-blue-dark);
}

.role-badge-customer_service {
    background: rgba(129, 74, 148, 0.1);
    border-color: rgba(129, 74, 148, 0.32);
    color: #6b3c7e;
}

/* Subscription status, on the Subscriptions page. Same pill, same formula
   (a light tint, a matching border, a darker text) as the role badges above,
   so the two pages read as one family -- VIP status reuses .role-badge-vip
   directly rather than a fifth colour, since it is literally that role. */
.role-badge-status-active {
    background: rgba(47, 74, 52, 0.09);
    border-color: rgba(47, 74, 52, 0.28);
    color: var(--forest-dark);
}

.role-badge-status-expired {
    background: rgba(178, 58, 46, 0.09);
    border-color: rgba(178, 58, 46, 0.3);
    color: #b23a2e;
}

.role-badge-status-none {
    background: rgba(42, 39, 31, 0.05);
    border-color: rgba(42, 39, 31, 0.16);
    color: var(--ink-soft);
}

/* The Manager role's own tint -- teal, since every other warm/cool hue nearby
   (green, gold, blue, plum) already belongs to something else. */
.role-badge-manager {
    background: rgba(15, 110, 110, 0.1);
    border-color: rgba(15, 110, 110, 0.32);
    color: #0f6e6e;
}

/* ---------- System Log: one tint per category, same pill formula as every
   other badge on the site, so the log reads as part of the same family. ---------- */
.role-badge-log-account {
    background: rgba(47, 74, 52, 0.09);
    border-color: rgba(47, 74, 52, 0.28);
    color: var(--forest-dark);
}

.role-badge-log-role {
    background: rgba(37, 99, 235, 0.09);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--accent-blue-dark);
}

.role-badge-log-subscription {
    background: rgba(185, 139, 62, 0.14);
    border-color: rgba(185, 139, 62, 0.38);
    color: #8a611f;
}

.role-badge-log-tree {
    background: rgba(139, 94, 60, 0.12);
    border-color: rgba(139, 94, 60, 0.34);
    color: #6b4a2e;
}

.role-badge-log-person {
    background: rgba(129, 74, 148, 0.1);
    border-color: rgba(129, 74, 148, 0.32);
    color: #6b3c7e;
}

.role-badge-log-relationship {
    background: rgba(190, 80, 120, 0.1);
    border-color: rgba(190, 80, 120, 0.32);
    color: #9c3f60;
}

.role-badge-log-flags {
    background: rgba(200, 120, 40, 0.12);
    border-color: rgba(200, 120, 40, 0.34);
    color: #96581c;
}

.role-badge-log-file {
    background: rgba(42, 39, 31, 0.05);
    border-color: rgba(42, 39, 31, 0.16);
    color: var(--ink-soft);
}

/* ---------- System Log page ---------- */
.log-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.log-filters .form-row {
    margin-bottom: 0;
}

.log-filters input[type="text"],
.log-filters input[type="datetime-local"],
.log-filters select {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--ink);
}

.log-filters-actions {
    display: flex;
    gap: 0.6rem;
}

.log-filters-actions .btn {
    width: auto;
    margin-top: 0;
    padding: 0.6rem 1.2rem;
}

/* ---------- Pricing (Manager) ---------- */

.pricing-tiers-form {
    max-width: 360px;
    margin-bottom: 2rem;
}

.pricing-tiers-form input[type="number"] {
    width: 100%;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--ink);
}

.pricing-section-title {
    font-size: 1.3rem;
    margin: 2rem 0 0.5rem;
}

.pricing-percent-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-percent-row input {
    width: 6rem;
}

.pricing-sale-tiers {
    flex-basis: 100%;
}

.pricing-tier-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin-top: 0.4rem;
}

.pricing-tier-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.88rem;
}

.pricing-sale-breakdown {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

.pricing-sale-breakdown li {
    padding: 0.15rem 0;
}

.pricing-saving {
    color: var(--ink-soft);
}

.pricing-countries-form .users-table-wrap {
    max-height: 420px;
    overflow-y: auto;
}

.pricing-countries-form select {
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--ink);
}

.log-result-count {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0 0 0.75rem;
}

.log-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.log-actor-name {
    font-weight: 600;
}

.log-actor-email {
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.log-details-toggle {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-blue-dark);
    background: transparent;
    border: none;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    white-space: nowrap;
}

.log-details-toggle:hover {
    text-decoration: underline;
}

.log-details-row td {
    background: var(--cream);
}

.log-details-json {
    margin: 0;
    padding: 0.85rem 1rem;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Report Log: tabs, per-row controls and the bulk bar. */
.report-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.report-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    margin-bottom: -1px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.report-tab:hover {
    color: var(--ink);
}

.report-tab.is-active {
    color: var(--accent-blue-dark);
    border-bottom-color: var(--accent-blue);
}

.report-tab-count {
    min-width: 1.4rem;
    padding: 0.05rem 0.45rem;
    font-size: 0.72rem;
    text-align: center;
    border-radius: 999px;
    background: rgba(42, 39, 31, 0.07);
}

.report-lead-col {
    width: 1%;
    white-space: nowrap;
}

.report-done-col {
    width: 1%;
    text-align: center;
}

.report-lead {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.report-star,
.report-done {
    display: inline-flex;
    padding: 0.2rem;
    background: transparent;
    border: none;
    color: rgba(42, 39, 31, 0.3);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.report-star:hover,
.report-done:hover {
    transform: scale(1.12);
}

.report-star:hover {
    color: #d99a00;
}

.report-done:hover {
    color: #2f8f4e;
}

.report-star.is-on {
    color: #d99a00;
}

.report-star.is-on svg path {
    fill: currentColor;
}

.report-done.is-on {
    color: #2f8f4e;
}

.report-done.is-on svg circle {
    fill: currentColor;
}

.report-done.is-on svg path {
    stroke: #fff;
}

.report-bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.85rem;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Pushed to the far end of the search row, in line with the table's edge. */
.report-delete-btn {
    margin-left: auto;
    padding: 0.6rem 1.2rem;
}

.report-delete-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.report-bulk-bar[hidden] {
    display: none;
}

.report-bulk-bar .btn {
    width: auto;
    margin-top: 0;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
}

/* Report Log: the expanded row under a bug report. */
.report-log-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.report-log-details dt {
    font-weight: 600;
    color: var(--ink-soft);
}

.report-log-details dd {
    margin: 0;
    word-break: break-word;
}

.report-log-description {
    white-space: pre-wrap;
}

.report-log-images {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.report-log-images img {
    max-width: 180px;
    max-height: 140px;
    border: 1px solid var(--border);
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

.log-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.log-pagination .btn {
    width: auto;
    margin-top: 0;
    padding: 0.55rem 1.1rem;
}

.log-pagination-label {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.sub-days-left {
    display: block;
    margin-top: 0.2rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.75rem;
    color: var(--ink-soft);
}

/* The inline "+ months" control sitting in its own table cell -- a number
   input just wide enough for two digits, and a compact button beside it. */
.sub-extend-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sub-extend-form input[type="number"] {
    width: 3.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.4rem 0.5rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--ink);
}

.sub-extend-btn {
    width: auto;
    margin-top: 0;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* An account can hold several roles, so badges sit in a wrapping row. */
.role-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.role-badge form {
    display: inline;
}

.role-badge-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.55;
}

.role-badge-remove:hover {
    opacity: 1;
    background: rgba(178, 58, 46, 0.18);
    color: #b23a2e;
}

/* Ticking roles, on Manage Roles and in the user modals. */
.role-add-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.role-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--ink);
    cursor: pointer;
}

.role-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--forest);
    cursor: pointer;
}

.role-check input[type="checkbox"]:disabled + span {
    opacity: 0.5;
}

.role-add-note {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
    max-width: 46rem;
    margin: -0.75rem 0 1.5rem;
}

/* ---------- The Staff menu: a role list, each opening its own side panel ---------- */

/* The main panel just lists roles -- same look as every other dev-menu-panel
   in the app (Segoe UI, cream hover), so it reads as part of the same
   dropdown family rather than a differently themed control bolted on. */
.staff-menu-panel {
    min-width: 200px;
    padding: 0.4rem;
}

.staff-role {
    position: relative;
}

.staff-role-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--ink);
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
}

.staff-role-toggle:hover {
    background: var(--cream);
}

/* The row for the currently-open role stays highlighted while its panel is
   showing, the same way an OS submenu keeps its parent item picked out. */
.staff-role.is-open .staff-role-toggle {
    background: var(--cream);
    color: var(--forest-dark);
}

.staff-role-caret {
    flex-shrink: 0;
    color: var(--ink-soft);
    /* Points at the panel it opens, to the side rather than downward -- this
       is a submenu, not an accordion, so nothing here rotates open/closed. */
    transform: rotate(-90deg);
}

.staff-role.is-open .staff-role-caret {
    color: var(--forest-dark);
}

/* The submenu itself: a second dropdown of the same size and shape as the
   first, docked to its side rather than stacked underneath it. Anchored on
   the right edge because the Staff button sits at the right of the header --
   opening further right would run the panel off the edge of the screen, so
   it opens toward the middle of the page instead. */
.staff-role-pages {
    display: none;
    position: absolute;
    top: -0.4rem;
    right: calc(100% + 10px);
    min-width: 210px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(31, 51, 36, 0.15);
    padding: 0.4rem;
    z-index: 21;
}

.staff-role.is-open .staff-role-pages {
    display: block;
}

.staff-role-pages a {
    display: block;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--ink);
    text-decoration: none;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
}

.staff-role-pages a:hover {
    background: var(--cream);
}

.staff-role-pages a.is-current {
    color: var(--forest-dark);
    font-weight: 600;
    background: rgba(47, 74, 52, 0.08);
}

/* On a narrow screen there is no room to the side, so the submenu falls back
   to stacking under its row instead -- the original accordion behaviour,
   kept only for this width. */
html.is-narrow .staff-role-caret {
    transform: rotate(0deg);
}

html.is-narrow .staff-role.is-open .staff-role-caret {
    transform: rotate(180deg);
}

html.is-narrow .staff-role-pages {
    position: static;
    top: auto;
    right: auto;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 0.3rem 0.75rem;
}

.role-badge-none {
    display: inline-flex;
    align-items: center;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.icon-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--paper);
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.icon-btn-sm:hover {
    background: var(--cream);
    color: var(--forest);
    border-color: var(--forest);
}

.icon-btn-delete:hover {
    background: rgba(178, 58, 46, 0.08);
    color: #b23a2e;
    border-color: rgba(178, 58, 46, 0.4);
}

/* ---------- Edit user modal ---------- */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(31, 51, 36, 0.45);
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1.5rem;
}

/* Opens on top of the Edit Person dialog (also a .modal-overlay, same
   z-index) when its trash icon is used, so it must outrank that dialog
   rather than relying on DOM order to break the tie. */
#node-delete-overlay {
    z-index: 200;
}

.modal-overlay.is-open {
    display: flex;
}

.modal-box {
    background: var(--paper);
    border-radius: 14px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(31, 51, 36, 0.25);
}

/* A scrollbar rendered flush against an element's own edge ignores that
   element's border-radius (a long-standing cross-browser limitation), which
   squares off the corner next to it. Scrolling instead happens on this inner
   wrapper, held a few pixels narrower than .modal-box -- the outer box still
   clips to its rounded corners, and that reserved strip is what lets the
   corner show past the scrollbar. */
.modal-box-scroll {
    width: calc(100% - 14px);
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.5rem;
    box-sizing: border-box;
}

.modal-box h2 {
    font-size: 1.5rem;
    font-weight: normal;
    color: var(--forest);
    margin: 0 0 1.5rem;
    text-align: center;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.modal-actions .btn {
    width: auto;
    margin-top: 0;
}

.form-row-optional {
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(90, 85, 72, 0.75);
    font-size: 0.8rem;
}

.btn-reset-password {
    align-self: flex-start;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--forest);
    background: transparent;
    border: 1.5px solid var(--forest);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-reset-password:hover {
    background: var(--forest);
    color: var(--paper);
}

.modal-divider {
    border-top: 1px solid var(--border);
    margin: 0.5rem 0;
}

.modal-section-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    font-weight: normal;
    color: var(--forest);
    margin: 0;
}

.tree-canvas-menu {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10;
}

.tree-settings-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    color: var(--forest);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
}

.tree-settings-toggle:hover {
    background: rgba(31, 51, 36, 0.06);
}

.tree-canvas-menu .dev-menu-panel {
    top: calc(100% + 6px);
}

/* The row of canvas tools in the bottom-right corner. */
.tree-canvas-tools {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tree-zoom-indicator {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(31, 51, 36, 0.12);
}

.tree-zoom-indicator:hover {
    background: var(--cream);
}

.tree-tool-btn {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(31, 51, 36, 0.12);
}

.tree-tool-btn:hover {
    background: var(--cream);
}

.tree-tool-btn.is-active {
    color: var(--paper);
    background: var(--forest);
    border-color: var(--forest);
}

/* Select mode: the canvas stays put and an empty-space drag ropes people off. */
.tree-viewport.is-select-mode {
    cursor: crosshair;
}

.tree-viewport.is-select-mode .tree-node {
    cursor: pointer;
}

.tree-viewport.is-select-mode .tree-node-add {
    display: none;
}

.tree-node.is-multi-selected {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35), 0 8px 20px rgba(31, 51, 36, 0.08);
}

.tree-marquee {
    position: absolute;
    z-index: 9;
    border: 1px solid var(--accent-blue);
    border-radius: 3px;
    background: rgba(37, 99, 235, 0.1);
    pointer-events: none;
}

.tree-settings-panel {
    min-width: 220px;
    padding: 0.75rem;
}

.tree-settings-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--ink);
    background: transparent;
    border: none;
    padding: 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
}

.tree-settings-menu-item:hover {
    background: var(--cream);
}

/* ---------- Dialog card (standard shape for all popup dialogs) ---------- */

html.is-narrow .dialog-card {
    max-width: none;
    width: 100%;
    border-radius: 18px 18px 0 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    max-height: 80vh;
    overflow: hidden;
}

/* Scrolling happens on .modal-box-scroll, not .dialog-card itself --
   giving both an overflow-y would show two scrollbars stacked. */
html.is-narrow .dialog-card .modal-box-scroll {
    width: 100%;
    max-height: 80vh;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
}

html.is-narrow .dialog-card-overlay {
    align-items: flex-end;
    padding: 0;
}

/* Every field in the Edit Person form sits on its own line, whatever the
   window size, so no input is ever squeezed narrower than its own content. */
.node-edit-dialog .form-grid-2,
.node-edit-dialog .form-grid-3 {
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Edit Person spans the full screen width on mobile, and 90% of it on desktop. */
.node-edit-dialog {
    width: 90%;
    max-width: 1100px;
}

.node-edit-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Room for the Edit button on the left and the bin on the right. Equal on
       both sides, so a long name stays centred on the card rather than being
       nudged off by the wider button. */
    padding: 0 4.75rem;
    min-height: 32px;
}

/* Make PDF sits directly under the Edit button. */
.node-edit-header {
    margin-bottom: 1.6rem;
}

.node-edit-tools {
    position: absolute;
    top: 2.3rem;
    left: 0;
    display: flex;
    gap: 0.4rem;
}

.node-edit-pdf-btn {
    position: static;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.95rem;
    cursor: pointer;
    white-space: nowrap;
}

.node-edit-pdf-btn:hover {
    background: var(--cream);
}

.node-edit-pdf-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.node-edit-header h2 {
    margin: 0;
    text-align: center;
}

/* Reading mode: the card opens as plain text, and the Edit button in the top
   left corner swaps the form in. */
.node-edit-mode-btn {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.95rem;
    cursor: pointer;
}

.node-edit-mode-btn:hover {
    background: var(--cream);
}

.node-edit-dialog.is-view-mode #node-edit-form,
.node-edit-dialog.is-view-mode #relationships-list,
.node-edit-dialog.is-view-mode #relationships-empty {
    display: none;
}

.node-edit-dialog:not(.is-view-mode) .node-edit-view {
    display: none;
}

/* No point offering the photo picker on a card you cannot type into. */
.node-edit-dialog.is-view-mode .identity-photo-overlay {
    display: none;
}

.node-edit-dialog.is-view-mode .identity-photo-frame {
    cursor: default;
}

.view-section-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.15rem;
    color: var(--forest);
    margin: 1.6rem 0 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
}

.view-section-title:first-child {
    margin-top: 0;
}

.view-sub-title {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 1.1rem 0 0.25rem;
}

.view-row {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    gap: 0.5rem 1rem;
    padding: 0.4rem 0;
}

.view-row-label {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.view-row-value {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* One repeated thing -- a job, a posting, an address -- kept together so two
   of them do not read as one. */
.view-entry {
    border-left: 2px solid var(--border);
    padding-left: 0.85rem;
    margin: 0.5rem 0;
}

/* Flags and photos: five across a row, whatever the panel is wide. The
   tiles keep each image's own proportions rather than cropping to a square,
   since flags come in a range of shapes. */
.view-media {
    padding: 0.4rem 0;
}

.view-media-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.view-media-grid img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.view-empty {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin: 0.5rem 0;
}

.node-edit-delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}

.node-edit-delete-btn:hover {
    background: rgba(178, 58, 46, 0.1);
    color: #b23a2e;
}

.node-edit-tabs {
    display: none;
}

.node-edit-columns {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.node-edit-col-info {
    flex: 1.6;
    min-width: 0;
}

.node-edit-col-relationships {
    flex: 1;
    min-width: 0;
    padding-left: 2rem;
    border-left: 1px solid var(--border);
    position: sticky;
    top: 0;
}

.node-edit-relationships-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    font-weight: normal;
    color: var(--forest);
    margin: 0 0 1.25rem;
}

.relationships-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.relationships-empty {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.relationship-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.relationship-picker-toggle {
    flex-shrink: 0;
    width: 160px;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relationship-picker-panel {
    max-height: 60vh;
    overflow-y: auto;
    min-width: 220px;
}

.relationship-name {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.is-narrow #node-edit-overlay {
    padding-left: 0;
    padding-right: 0;
}

html.is-narrow .node-edit-dialog {
    width: 100%;
    /* A fixed height rather than a max-height, so the card is the same size
       whether the person has two fields filled in or fifty. dvh keeps that
       honest on phones, where a browser toolbar sliding away changes what vh
       means mid-scroll. */
    height: 90vh;
    height: 90dvh;
    max-height: none;
}

/* The scrolling area fills the card, so a short form still leaves the card
   at full height with the empty space inside it. */
html.is-narrow .node-edit-dialog .modal-box-scroll {
    height: 100%;
    max-height: none;
}

html.is-narrow .view-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
    padding: 0.45rem 0;
}

html.is-narrow .node-edit-tabs {
    display: flex;
    gap: 0.4rem;
    margin: 0.5rem 0 1.25rem;
    border-bottom: 1px solid var(--border);
}

html.is-narrow .node-edit-tab {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--ink-soft);
    background: transparent;
    border: none;
    padding: 0.6rem 0.4rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

html.is-narrow .node-edit-tab.is-active {
    color: var(--ink);
    border-bottom-color: var(--accent-blue, #2563eb);
    font-weight: 600;
}

html.is-narrow .node-edit-columns {
    display: block;
}

html.is-narrow .node-edit-col-relationships {
    border-left: none;
    padding-left: 0;
    position: static;
}

html.is-narrow .node-edit-col-info,
html.is-narrow .node-edit-col-relationships {
    display: none;
}

html.is-narrow .node-edit-columns.show-info .node-edit-col-info,
html.is-narrow .node-edit-columns.show-relationships .node-edit-col-relationships {
    display: block;
}

/* ---------- Node edit dialog: Identity section ---------- */

.dialog-section-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    margin: -0.5rem 0 0;
    cursor: pointer;
    text-align: left;
}

.dialog-section-heading h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    font-weight: normal;
    color: var(--forest);
    margin: 0;
}

.dialog-section-arrow {
    color: var(--forest);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.dialog-section-heading[aria-expanded="true"] .dialog-section-arrow {
    transform: rotate(90deg);
}

.btn-add-item {
    width: auto;
    margin: 0.5rem 0 0;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.dialog-collapsible-content {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    overflow: hidden;
}

.dialog-collapsible-content.is-collapsed {
    display: none;
}

/* ---------- Life Events section ---------- */

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.life-event-remove-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--ink-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.life-event-remove-btn:hover {
    background: rgba(178, 58, 46, 0.1);
    color: #b23a2e;
}

.life-event-block {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.life-event-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.life-event-block-header label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.life-event-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.life-event-divider-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.life-event-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.life-event-divider-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95rem;
    color: var(--forest);
    white-space: nowrap;
}

.life-event-entry {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.85rem;
    background: var(--cream);
    border-radius: 8px;
}

.life-event-entry .life-event-remove-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.life-event-repeat-row {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}

.life-event-repeat-row > .form-grid-2,
.life-event-repeat-row > .form-grid-3 {
    flex: 1;
}

.life-event-repeat-row > input {
    flex: 1;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #fbfaf6;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.life-event-repeat-row > input::placeholder {
    color: rgba(90, 85, 72, 0.45);
}

.life-event-sublabel {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.life-event-image-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.life-event-image-preview {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.life-event-medal-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.6rem;
}

.life-event-medal-photos:empty {
    display: none;
}

.life-event-medal-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

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

.life-event-medal-photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(31, 51, 36, 0.75);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.life-event-medal-photo-remove:hover {
    background: rgba(178, 58, 46, 0.9);
}

html.is-narrow .life-event-repeat-row {
    flex-direction: column;
    align-items: stretch;
}

.add-field-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: none;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
    transition: background 0.15s ease, transform 0.15s ease;
}

.add-field-btn:hover {
    background: var(--accent-blue-dark);
    transform: scale(1.06);
}

.add-field-btn-inline {
    width: 24px;
    height: 24px;
    margin-bottom: 0.9rem;
}

.tree-settings-section-title {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.82rem;
    color: var(--ink-soft);
    padding: 0.5rem 0.6rem;
}

.item-menu {
    display: inline-block;
}

/* "+ Item" dropdowns are positioned in JS (fixed to the viewport, computed
   from the toggle button's own rect) so they always open directly under the
   button and are never clipped by a scrolling/overflow:hidden ancestor --
   both real problems when these live inside a tall, scrollable form. Shown
   via opacity/transform (not display) so the fade + slide transition can
   play in both directions. */
.item-menu-panel {
    position: fixed;
    display: block;
    right: auto;
    min-width: 200px;
    padding: 0.4rem;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 500;
}

.dev-menu.is-open .item-menu-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

html.is-narrow .item-menu-panel {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    width: 100%;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
}

html.is-narrow .dev-menu.is-open .item-menu-panel {
    transform: translateY(0);
}

.line-context-menu,
.line-style-menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(31, 51, 36, 0.18);
    padding: 0.5rem;
    z-index: 600;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.line-context-menu.is-open,
.line-style-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.line-context-menu {
    min-width: 160px;
}

.line-context-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--ink);
    background: transparent;
    border: none;
    padding: 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.line-context-menu-item:hover {
    background: var(--cream);
}

.line-context-menu-item-danger {
    color: #b23a2e;
}

.line-context-menu-item-danger:hover {
    background: rgba(178, 58, 46, 0.1);
}

.line-style-option {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
}

.line-style-option:hover {
    background: var(--cream);
}

.line-style-option.is-selected {
    border-color: var(--accent-blue, #2563eb);
    background: rgba(37, 99, 235, 0.08);
}

html.is-narrow .line-style-menu {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    border-radius: 18px 18px 0 0;
    padding: 1.25rem 1rem;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
}

html.is-narrow .line-context-menu {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    width: 100%;
    min-width: 0;
    border-radius: 18px 18px 0 0;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
}

.identity-photo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.photo-source-panel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: 200px;
}

/* ---------- Photo crop dialog ---------- */

.photo-crop-dialog {
    max-width: 420px;
}

.photo-crop-stage {
    display: flex;
    justify-content: center;
    margin: 0 0 1.25rem;
}

.photo-crop-stage canvas {
    border-radius: 8px;
    background: var(--cream);
    cursor: grab;
    touch-action: none;
}

.photo-crop-stage canvas:active {
    cursor: grabbing;
}

.photo-crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
}

.photo-crop-zoom-row input[type="range"] {
    flex: 1;
}

/* ---------- Photo library picker ---------- */

.photo-library-dialog {
    max-width: 640px;
}

.photo-library-dialog .user-search {
    margin-bottom: 0.85rem;
}

.photo-library-dialog .role-filter {
    margin-bottom: 1.25rem;
}

.identity-photo-frame {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--cream);
    padding: 0;
    cursor: pointer;
}

.identity-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.identity-photo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    background: rgba(31, 51, 36, 0.55);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.identity-photo-frame:hover .identity-photo-overlay {
    opacity: 1;
}

.identity-flags-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    cursor: pointer;
}

.identity-flags-grid .identity-flag-tile {
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cream);
    border: 1px solid var(--border);
}

.identity-flags-grid .identity-flag-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.identity-flags-add {
    grid-column: 1 / -1;
    aspect-ratio: 5 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.identity-flags-grid:not(.is-empty) .identity-flags-add {
    display: none;
}

.identity-flags-add:hover {
    border-color: var(--ink-soft);
    color: var(--ink);
}

.flags-picker-dialog {
    max-width: 560px;
}

.flags-picker-upload-btn {
    width: 100%;
    margin-bottom: 1rem;
}

.flags-picker-search {
    width: 100%;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin: 0.85rem 0;
    box-sizing: border-box;
}

.flags-picker-added-title {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin: 1.25rem 0 0.6rem;
}

.flags-picker-added {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
}

.flags-picker-added:empty::after {
    content: 'No flags added yet.';
    grid-column: 1 / -1;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.flags-picker-added-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.flags-picker-added-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cream);
    border: 1px solid var(--border);
}

.flags-picker-added-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.flags-picker-added-name {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.7rem;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

.flags-picker-added-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(31, 51, 36, 0.75);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flags-picker-added-remove:hover {
    background: rgba(178, 48, 48, 0.9);
}

.flags-picker-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.flags-picker-tab {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
    background: transparent;
    border: none;
    padding: 0.6rem 0.4rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.flags-picker-tab.is-active {
    color: var(--ink);
    border-bottom-color: var(--accent, #2563eb);
    font-weight: 600;
}

.flags-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
    max-height: 50vh;
    overflow-y: auto;
    padding: 0.25rem;
}

.flags-picker-flag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem;
    border-radius: 8px;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    text-align: center;
}

.flags-picker-flag-thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cream);
    border: 1px solid var(--border);
}

.flags-picker-flag-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.flags-picker-flag-name {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.7rem;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.flags-picker-flag.is-selected {
    border-color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, 0.08);
}

.flags-picker-flag.is-selected .flags-picker-flag-name {
    color: var(--ink);
    font-weight: 600;
}

html.is-narrow .identity-flags-grid,
html.is-narrow .flags-picker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.name-fields-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.75rem;
}

.name-fields-header {
    position: absolute;
    top: 0;
    left: 0;
}

.info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ink-soft);
    color: var(--paper);
    border: none;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
}

.info-btn:hover {
    background: var(--forest);
}

.info-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 240px;
    background: var(--ink);
    color: var(--paper);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    z-index: 20;
}

.name-field-row,
.middle-name-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.name-field-row input[type="checkbox"],
.middle-name-row input[type="checkbox"] {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    accent-color: var(--forest);
    cursor: pointer;
    margin-top: 1.5rem;
}

.middle-name-row input[type="checkbox"] {
    margin-top: 0;
}

.name-field-input {
    flex: 1;
    min-width: 0;
}

.middle-name-row {
    position: relative;
    flex: 1;
}

.middle-name-row input[type="text"] {
    flex: 1;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.9rem 2.1rem 0.9rem 1.1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #fbfaf6;
    color: var(--ink);
    min-width: 0;
}

.middle-name-row .remove-field-btn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
}

.add-middle-name-row-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    align-self: flex-start;
    margin-left: calc(19px + 0.75rem);
    background: transparent;
    border: none;
    padding: 0;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--forest);
    cursor: pointer;
}

.add-middle-name-row-btn .add-field-btn {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.extra-field-row-checked {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.extra-field-row-checked input[type="checkbox"] {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    accent-color: var(--forest);
    cursor: pointer;
    margin-top: 1.5rem;
}

.remove-field-btn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--ink-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}

.remove-field-btn:hover {
    background: rgba(178, 58, 46, 0.1);
    color: #b23a2e;
}

.extra-field-row {
    position: relative;
    padding-right: 2rem;
}

.extra-field-row .remove-field-btn {
    top: 0;
    right: -0.25rem;
    transform: none;
}

.extra-field-other-input {
    margin-top: 0.6rem;
}

#extra-fields-list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* ---------- Line type dialog ---------- */

html:not(.is-narrow) .line-type-dialog {
    max-width: 380px;
}

.toggle-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--border);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
}

.toggle-option:last-of-type {
    border-bottom: none;
}

.toggle-option small {
    display: block;
    color: var(--ink-soft);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.language-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}

.language-option {
    display: block;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.language-option:hover {
    border-color: var(--forest);
    background: var(--cream);
}

.language-option.is-selected {
    border-color: var(--forest);
    background: rgba(47, 74, 52, 0.08);
    font-weight: 700;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.toggle-track {
    display: block;
    width: 46px;
    height: 26px;
    background: var(--border);
    border-radius: 999px;
    transition: background 0.15s ease;
}

.toggle-thumb {
    display: block;
    width: 20px;
    height: 20px;
    margin: 3px;
    background: var(--paper);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.toggle-switch input:checked + .toggle-track {
    background: var(--forest);
}

.toggle-switch input:checked + .toggle-track .toggle-thumb {
    transform: translateX(20px);
}

.toggle-switch input:focus-visible + .toggle-track {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* ---------- My Files ---------- */

.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.25rem;
}

.file-tile {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.file-tile:hover {
    box-shadow: 0 10px 24px rgba(31, 51, 36, 0.1);
    transform: translateY(-2px);
}

.file-tile-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
}

.file-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-tile-icon {
    color: var(--ink-soft);
}

.file-tile-name {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--ink);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-detail-dialog {
    max-width: 560px;
}

.file-detail-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 55vh;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    overflow: hidden;
    background: var(--cream);
}

.file-detail-preview img {
    max-width: 100%;
    max-height: 55vh;
    object-fit: contain;
}

.file-detail-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink-soft);
    padding: 3rem 1.5rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    word-break: break-word;
    text-align: center;
}

.file-detail-meta {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin: 0;
}

html.is-narrow .files-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.85rem;
}

/* ---------- Family tree canvas ---------- */

.tree-page-body {
    overflow: hidden;
    height: 100vh;
}

.tree-page-title {
    font-size: 1.05rem;
    color: var(--forest);
    font-weight: normal;
}

/* Shown next to the tree's name when the viewer has no write access to it.
   Same pill formula as everything else, its own neutral tint rather than
   borrowing a role colour, since "view only" is neither a role nor a
   subscription status. */
.tree-view-only-badge {
    margin-left: 0.6rem;
    background: rgba(42, 39, 31, 0.05);
    border-color: rgba(42, 39, 31, 0.16);
    color: var(--ink-soft);
    cursor: help;
    vertical-align: middle;
}

/* Shown to a Developer viewing a tree they don't own -- reuses the Developer
   role colour so it's recognisable as "this is a staff-only view", not a
   normal tree state. */
.tree-dev-view-badge {
    margin-left: 0.6rem;
    background: rgba(47, 74, 52, 0.09);
    border-color: rgba(47, 74, 52, 0.28);
    color: var(--forest-dark);
    cursor: help;
    vertical-align: middle;
}

/* The per-user tree list on the Trees (Developer) page. */
.user-trees-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.user-trees-empty {
    color: var(--ink-soft);
    font-style: italic;
}

/* The "open a tree by id" jump box on the Trees (Developer) page. */
.tree-id-jump-form {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}

.tree-id-jump-form input[type="number"] {
    width: 8rem;
}

/* Read-only mode on the canvas: every control that would add, move, edit or
   delete something is hidden. Node dragging and the right-click/double-click
   menus have nothing to hide (they are not buttons) -- those are guarded in
   tree.js instead, so this CSS and that JS are two halves of the same gate. */
body.is-read-only .tree-node-add,
body.is-read-only #node-edit-mode-btn,
body.is-read-only #node-edit-delete-btn,
body.is-read-only #tree-select-mode-btn,
body.is-read-only #tree-settings-line-type-btn {
    display: none !important;
}

/* my_files.php: the only write that page can do is renaming a file's label. */
body.is-read-only #file-detail-save {
    display: none;
}

body.is-read-only #file-detail-label {
    pointer-events: none;
    background: var(--cream);
    color: var(--ink-soft);
}

.tree-viewport {
    /* The canvas handles its own panning and pinch-zooming, so the browser is
       told not to claim a touch-drag for scrolling -- without this a finger
       drag produces no move events at all and nothing on the canvas responds
       to touch. */
    touch-action: none;
    -webkit-touch-callout: none;
    position: relative;
    width: 100%;
    height: calc(100vh - 73px);
    overflow: hidden;
    background: var(--cream);
    cursor: grab;
    user-select: none;
}

.tree-viewport.is-panning {
    cursor: grabbing;
}

.tree-world {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
}

.tree-lines {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: visible;
    pointer-events: none;
}

.tree-node {
    position: absolute;
    width: 140px;
    transform: translate(-50%, -50%);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 0.75rem 0.85rem;
    text-align: center;
    box-shadow: 0 8px 20px rgba(31, 51, 36, 0.08);
    cursor: grab;
    user-select: none;
}

.tree-node.is-dragging {
    cursor: grabbing;
    z-index: 5;
}

.tree-node-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 0.6rem;
    background: var(--cream);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tree-node-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Otherwise a mousedown on the photo can start the browser's native
       "drag this image" gesture instead of moving the node -- draggable="false"
       on the element covers Chrome/Firefox, these two catch Safari/older WebKit. */
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.tree-node-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    word-break: break-word;
}

.tree-node-dates {
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-top: 0.25rem;
}

.tree-node-add {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    border: 3px solid var(--paper);
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.tree-node:hover .tree-node-add,
.tree-node.is-selected .tree-node-add {
    opacity: 1;
    pointer-events: auto;
}

.tree-node-add:hover {
    background: var(--accent-blue-dark);
    transform: scale(1.08);
}

/* Relationship name shown under each relative while a person is selected. */
.tree-node-relation {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.5rem;
    max-width: 200px;
    padding: 0.2rem 0.65rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(31, 51, 36, 0.12);
    pointer-events: none;
}

.tree-node.is-selected {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), 0 8px 20px rgba(31, 51, 36, 0.08);
}

/* A subtle warning when one or more of this person's connections has no
   relationship chosen yet -- nothing can be reliably named through it until
   it is (see computeConnectionIssues() in tree.js). Layers onto whatever
   shadow is already there rather than replacing it, so it still reads
   clearly alongside the blue selection ring. */
.tree-node.tree-node-incomplete {
    box-shadow: 0 0 0 3px rgba(200, 40, 40, 0.22), 0 8px 20px rgba(31, 51, 36, 0.08);
}

.tree-node.tree-node-incomplete.is-selected {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), 0 0 0 6px rgba(200, 40, 40, 0.22), 0 8px 20px rgba(31, 51, 36, 0.08);
}

.btn {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95rem;
    padding: 0.55rem 1.4rem;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-block;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-outline {
    color: var(--forest);
    border-color: var(--forest);
    background: transparent;
}

.btn-outline:hover {
    background: var(--forest);
    color: var(--paper);
}

.btn-solid {
    background: var(--forest);
    color: var(--paper);
    border-color: var(--forest);
}

.btn-solid:hover {
    background: var(--forest-dark);
    border-color: var(--forest-dark);
}

/* ---------- Hero slider ---------- */

.hero {
    position: relative;
    width: 100%;
    height: 90vh;
    min-height: 420px;
    overflow: hidden;
    background: var(--forest-dark);
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.hero-slide.is-active {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31, 51, 36, 0.15) 0%, rgba(31, 51, 36, 0.55) 100%);
}

.hero-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3rem;
    text-align: center;
    color: var(--paper);
    z-index: 2;
    padding: 0 1.5rem;
}

.hero-caption h1 {
    font-size: 2.6rem;
    font-weight: normal;
    margin: 0 0 0.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.hero-caption p {
    font-size: 1.15rem;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 3;
}

.hero-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0;
}

.hero-dot.is-active {
    background: var(--gold);
    border-color: var(--gold);
}

/* ---------- Homepage: first-year offer banner ---------- */

.offer-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(260px, 24vw, 340px);
    margin-top: 2rem;
    overflow: hidden;
    background: var(--forest-dark);
}

.offer-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 85% 30%;
}

.offer-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(31, 51, 36, 0.94) 0%,
        rgba(31, 51, 36, 0.82) 38%,
        rgba(31, 51, 36, 0.25) 66%,
        rgba(31, 51, 36, 0) 80%);
}

.offer-banner-content {
    position: relative;
    z-index: 1;
    max-width: 520px;
    padding: 2.5rem 1.5rem 2.5rem clamp(1.5rem, 6vw, 5rem);
    color: #fff;
}

.offer-banner-eyebrow {
    margin: 0 0 0.6rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #e3b95a;
}

.offer-banner-title {
    margin: 0;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: normal;
    line-height: 1.15;
    color: #fff;
}

.offer-banner-sub {
    margin: 0.75rem 0 1.4rem;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
}

.offer-banner-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.3rem;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.offer-banner-link span {
    transition: transform 0.2s ease;
}

.offer-banner-link:hover {
    background: #fff;
    border-color: #fff;
    color: var(--forest-dark);
}

.offer-banner-link:hover span {
    transform: translateY(2px);
}

.offer-banner-link:focus-visible {
    outline: 2px solid #e3b95a;
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .offer-banner {
        min-height: 0;
        margin-top: 1.5rem;
    }

    .offer-banner-img {
        object-position: 88% 25%;
    }

    .offer-banner::after {
        background: linear-gradient(90deg,
            rgba(31, 51, 36, 0.93) 0%,
            rgba(31, 51, 36, 0.85) 60%,
            rgba(31, 51, 36, 0.55) 100%);
    }

    .offer-banner-content {
        padding: 2.2rem 1.4rem;
    }
}

/* ---------- Homepage: beta notification ---------- */

.beta-notice-wrap {
    padding: 2rem 1.25rem 0.5rem;
}

.beta-notice-wrap[hidden] {
    display: none;
}

.beta-notice {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid rgba(185, 139, 62, 0.35);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(31, 51, 36, 0.06), 0 14px 34px rgba(31, 51, 36, 0.12);
    overflow: hidden;
    animation: beta-notice-in 0.6s ease both;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.beta-notice::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), #e3b95a 50%, var(--forest));
}

.beta-notice-wrap.is-closing .beta-notice {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
}

@keyframes beta-notice-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.beta-notice-main {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.35rem 3.2rem 1.15rem 1.4rem;
}

.beta-notice-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(185, 139, 62, 0.14);
    color: var(--gold);
}

.beta-notice-text {
    flex: 1;
    min-width: 0;
}

.beta-notice-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.25rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.beta-notice-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3c9a5f;
    box-shadow: 0 0 0 0 rgba(60, 154, 95, 0.5);
    animation: beta-notice-pulse 2s ease-out infinite;
}

@keyframes beta-notice-pulse {
    0% { box-shadow: 0 0 0 0 rgba(60, 154, 95, 0.5); }
    70% { box-shadow: 0 0 0 7px rgba(60, 154, 95, 0); }
    100% { box-shadow: 0 0 0 0 rgba(60, 154, 95, 0); }
}

.beta-notice-title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--forest-dark);
}

.beta-notice-sub {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.beta-notice-actions {
    flex: none;
}

.beta-notice-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.25rem;
    border-radius: 999px;
    background: var(--forest);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(47, 74, 52, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.beta-notice-cta span {
    transition: transform 0.2s ease;
}

.beta-notice-cta:hover {
    background: var(--forest-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(47, 74, 52, 0.3);
}

.beta-notice-cta:hover span {
    transform: translateX(3px);
}

.beta-notice-cta:focus-visible,
.beta-notice-close:focus-visible,
.beta-notice-details summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.beta-notice-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.beta-notice-close:hover {
    background: var(--cream);
    color: var(--ink);
}

.beta-notice-details {
    border-top: 1px solid var(--border);
    padding: 0 1.4rem;
}

.beta-notice-details summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0;
    list-style: none;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--forest);
}

.beta-notice-details summary::-webkit-details-marker {
    display: none;
}

.beta-notice-details summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 0.2rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
}

.beta-notice-details[open] summary::after {
    transform: rotate(-135deg) translateY(-2px);
}

.beta-notice-details ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem 1.4rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}

.beta-notice-details li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.9rem;
    color: var(--ink);
}

.beta-notice-details li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
}

@media (max-width: 640px) {
    .beta-notice-main {
        flex-wrap: wrap;
        padding: 1.25rem 1.1rem 1rem;
    }

    .beta-notice-text {
        flex-basis: calc(100% - 64px);
        padding-right: 1.5rem;
    }

    .beta-notice-actions,
    .beta-notice-cta {
        width: 100%;
        justify-content: center;
    }

    .beta-notice-title {
        font-size: 1.15rem;
    }

    .beta-notice-details {
        padding: 0 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .beta-notice,
    .beta-notice-dot {
        animation: none;
    }
}

.beta-signup-note {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    background: var(--cream);
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--forest);
}

/* ---------- Homepage: subscription pricing table ---------- */

.pricing-section {
    padding: 5rem 1.5rem 5.5rem;
    background: var(--cream);
}

.pricing-header {
    max-width: 640px;
    margin: 0 auto 3rem;
    text-align: center;
}

.pricing-header .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    color: var(--gold);
    margin-bottom: 0.9rem;
}

.pricing-header h2 {
    font-size: 2.1rem;
    font-weight: normal;
    margin: 0 0 0.75rem;
    color: var(--ink);
}

.pricing-header p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
}

.pricing-table {
    max-width: 760px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(42, 39, 31, 0.08);
}

.pricing-table-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: center;
}

.pricing-table-row:not(.pricing-table-head):nth-of-type(even) {
    background: rgba(42, 39, 31, 0.03);
}

.pricing-table-feature {
    padding: 0.9rem 1.5rem;
    font-size: 0.92rem;
    color: var(--ink);
}

.pricing-table-cell {
    text-align: center;
    font-size: 1.1rem;
    padding: 0.9rem 0.5rem;
}

.pricing-table-cell.is-yes {
    color: var(--forest);
    font-weight: 700;
}

.pricing-table-cell.is-no {
    color: var(--ink-soft);
    opacity: 0.5;
}

.pricing-table-head {
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid var(--border);
}

.pricing-table-plan {
    text-align: center;
    padding: 0 0.75rem;
    position: relative;
}

.pricing-table-plan.is-featured {
    background: rgba(185, 139, 62, 0.08);
    border-radius: 12px;
    padding-top: 0.5rem;
}

.pricing-plan-badge {
    display: inline-block;
    background: var(--gold);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    margin-bottom: 0.5rem;
}

.pricing-plan-name {
    font-size: 1.1rem;
    color: var(--ink);
    margin-bottom: 0.3rem;
}

.pricing-plan-price {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--forest);
    margin-bottom: 0.9rem;
}

.pricing-plan-price span {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-soft);
}

.pricing-plan-was {
    font-size: 1.1rem;
    text-decoration: line-through;
    opacity: 0.6;
    margin-right: 0.35rem;
}

.pricing-plan-cta {
    font-size: 0.85rem;
    padding: 0.5rem 1.1rem;
}

.plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 860px;
    margin: 0 auto;
    align-items: stretch;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.9rem 2.1rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(42, 39, 31, 0.04), 0 12px 30px rgba(42, 39, 31, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(42, 39, 31, 0.04), 0 18px 40px rgba(42, 39, 31, 0.1);
}

.plan-featured {
    border: 2px solid var(--forest);
    box-shadow: 0 1px 2px rgba(31, 51, 36, 0.06), 0 22px 48px rgba(31, 51, 36, 0.16);
}

.plan-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.32rem 0.95rem;
    border-radius: 999px;
    background: var(--forest);
    color: #fff;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.plan-name {
    margin: 0;
    font-size: 1.45rem;
    font-weight: normal;
    color: var(--ink);
}

.plan-desc {
    margin: 0.4rem 0 1.4rem;
    min-height: 3em;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.plan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.plan-amount {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--forest-dark);
}

.plan-was {
    font-size: 1.15rem;
    color: var(--ink-soft);
    text-decoration: line-through;
    opacity: 0.7;
}

.plan-period {
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.plan-note {
    margin: 0.55rem 0 1.4rem;
    min-height: 1.4em;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold);
}

.plan-cta {
    display: block;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--forest);
    border: 1.5px solid var(--forest);
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.plan-cta:hover {
    background: var(--forest-dark);
    border-color: var(--forest-dark);
}

.plan-cta-outline {
    background: transparent;
    color: var(--forest);
}

.plan-cta-outline:hover {
    background: var(--cream);
    color: var(--forest-dark);
}

.plan-cta:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.plan-features-lead {
    margin: 1.6rem 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
}

.plan-features {
    display: grid;
    gap: 0.8rem;
    margin: 1.6rem 0 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
}

.plan-features-lead + .plan-features {
    margin-top: 0.9rem;
    padding-top: 0;
    border-top: 0;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.93rem;
    line-height: 1.45;
    color: var(--ink);
}

.plan-features svg {
    flex: none;
    margin-top: 0.1rem;
    color: var(--forest);
}

.plan-featured .plan-features svg {
    color: var(--gold);
}

.pricing-compare {
    max-width: 640px;
    margin: 2.5rem auto 0;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

@media (max-width: 720px) {
    .plans {
        grid-template-columns: 1fr;
        max-width: 440px;
        gap: 2rem;
    }

    .plan-featured {
        order: -1;
    }

    .plan-desc,
    .plan-note {
        min-height: 0;
    }

    .plan:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .plan,
    .plan:hover {
        transition: none;
        transform: none;
    }
}

/* ===== go_pro.php ===== */
.gopro-price-card {
    max-width: 420px;
    margin: 1.5rem auto 2.5rem;
    padding: 1.5rem 1.8rem;
    background: var(--cream);
    border-radius: 14px;
    text-align: center;
}

.gopro-price-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.gopro-price-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--forest);
}

.gopro-price-amount {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--forest);
}

.gopro-price-amount span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ink-soft);
}

.gopro-first-time-note {
    margin: 0.6rem 0 0;
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.gopro-then-price {
    margin: 0.3rem 0 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.gopro-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    margin: 2rem auto 0;
}

.gopro-buy-btn {
    min-width: 220px;
}

.gopro-error {
    max-width: 420px;
    margin: 1rem auto 0;
    text-align: center;
}

@media (max-width: 640px) {
    .pricing-table-row {
        grid-template-columns: 1.1fr 1fr 1fr;
    }
    .pricing-table-feature {
        padding: 0.9rem 0.75rem;
        font-size: 0.82rem;
    }
    .pricing-plan-price {
        font-size: 1.5rem;
    }
}

.site-footer {
    background: #14201a;
    padding: 3rem 2rem 0;
}

.site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.2rem 2rem;
    padding-bottom: 2rem;
}

.site-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    justify-self: start;
}

.site-footer-brand img {
    height: 30px;
    width: auto;
    border-radius: 6px;
}

.site-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    grid-column: 2;
    justify-self: center;
}

.site-footer-links a {
    color: rgba(255, 255, 255, 0.75);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-footer-links a:hover {
    color: #fff;
}

.site-footer-spacer {
    justify-self: end;
}

.site-footer-copy {
    text-align: center;
    margin: 0;
    padding: 1.4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.45);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 0.8rem;
}

@media (max-width: 600px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .site-footer-brand,
    .site-footer-links {
        justify-self: center;
    }
    .site-footer-spacer {
        display: none;
    }
}

/* ---------- Auth pages (subscribe / login / verify) ---------- */

.auth-section {
    min-height: calc(100vh - 73px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    background: var(--cream);
    background-image:
        radial-gradient(circle at 15% 20%, rgba(47, 74, 52, 0.05), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(185, 139, 62, 0.07), transparent 40%);
}

.auth-card {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3.5rem 3.5rem;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(31, 51, 36, 0.12);
}

.auth-card h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: normal;
    color: var(--forest);
    margin: 0 0 0.5rem;
    text-align: center;
}

.auth-subtitle {
    font-size: 0.98rem;
    color: var(--ink-soft);
    margin: 0 0 2.5rem;
    line-height: 1.5;
    text-align: center;
}

.auth-success {
    background: rgba(47, 74, 52, 0.08);
    border: 1px solid rgba(47, 74, 52, 0.3);
    color: var(--forest-dark);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-inline-link {
    margin: -0.5rem 0 0;
    text-align: right;
    font-size: 0.85rem;
}

.auth-inline-link a {
    color: var(--ink-soft);
}

.auth-error {
    background: rgba(178, 58, 46, 0.08);
    border: 1px solid rgba(178, 58, 46, 0.3);
    color: #7a2a1f;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* ---------- Research gate: the "Opening ..." interstitial before an External Source ---------- */

.gate-card {
    max-width: 480px;
}

.gate-why {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink-soft);
    background: var(--cream);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 0 0 1.5rem;
}

.gate-safari-row {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.gate-chrome-icon {
    width: 40px;
    height: 40px;
    flex: none;
}

.gate-safari-row p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink);
    margin: 0;
}

.gate-safari {
    text-align: center;
}

.gate-safari .btn {
    display: inline-block;
}

.gate-step {
    display: flex;
    gap: 0.9rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
}

.gate-step:first-of-type {
    border-top: none;
}

.gate-step-num {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--forest);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.gate-step.is-done .gate-step-num {
    background: var(--gold);
}

.gate-step.is-done .gate-step-num::after {
    content: "\2713";
}

.gate-step.is-done .gate-step-num {
    font-size: 0;
}

.gate-step-body {
    flex: 1;
}

.gate-step-title {
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.gate-step-hint {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0 0 0.7rem;
}

.gate-connect-status {
    min-height: 1.3em;
    margin: 0.6rem 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--forest);
}

.gate-divider {
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

.gate-skip {
    display: block;
    width: 100%;
    text-align: center;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* The contact form's honeypot field: invisible and untabbable for a real
   visitor, but still present in the DOM (not display:none) for a bot's
   auto-fill to catch. */
.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.form-row[hidden] {
    display: none;
}

.form-row label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.form-row input,
.form-row select,
.form-row textarea {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #fbfaf6;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.form-row textarea {
    resize: vertical;
    min-height: 6rem;
}

.form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235a5548'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1rem;
    padding-right: 2.75rem;
    cursor: pointer;
}

.form-row select:invalid {
    color: rgba(42, 39, 31, 0.45);
}

.form-row input::placeholder,
.form-row textarea::placeholder {
    color: rgba(90, 85, 72, 0.45);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    background-color: var(--paper);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.btn-block {
    width: 100%;
    text-align: center;
    border: none;
    margin-top: 1rem;
    padding: 1.05rem 1.4rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 10px;
}

.btn-primary-blue {
    background: var(--accent-blue);
    color: #fff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.3);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-danger {
    width: auto;
    margin-top: 0;
    background: #b23a2e;
    color: #fff;
    border: none;
    box-shadow: 0 10px 24px rgba(178, 58, 46, 0.3);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-danger:hover {
    background: #942f25;
    box-shadow: 0 12px 28px rgba(178, 58, 46, 0.38);
    transform: translateY(-1px);
}

.dialog-message {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: center;
    margin: 0 0 1.5rem;
}

.btn-primary-blue:hover {
    background: var(--accent-blue-dark);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.38);
    transform: translateY(-1px);
}

.auth-footer {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.auth-footer a {
    color: var(--forest);
}

html.is-narrow .site-header {
    padding: 0.6rem 1rem;
}

html.is-narrow .brand-text {
    font-size: 1.25rem;
}

html.is-narrow .brand img {
    height: 34px;
}

html.is-narrow .header-actions .btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
}

html.is-narrow .hero-caption h1 {
    font-size: 1.7rem;
}

html.is-narrow .auth-card {
    padding: 2.25rem 1.5rem;
}

html.is-narrow .form-grid-2 {
    grid-template-columns: 1fr;
}

/* ---------- Notification bell (header + tree page) ---------- */

.icon-btn.dev-menu-toggle.notif-toggle {
    position: relative;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--forest);
    background: transparent;
}

.icon-btn.dev-menu-toggle.notif-toggle:hover {
    background: rgba(47, 74, 52, 0.08);
    color: var(--forest);
}

.notif-badge {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #b23a2e;
    color: #fff;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.notif-badge[hidden] {
    display: none;
}

.notif-panel {
    width: 380px;
    max-width: calc(100vw - 1.5rem);
    max-height: 70vh;
    overflow-y: auto;
    padding: 0;
}

.notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 1;
}

.notif-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.4rem;
    margin-left: -0.4rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    color: var(--forest);
    cursor: pointer;
}

.notif-panel-title:hover {
    background: rgba(47, 74, 52, 0.08);
}

.notif-mark-all {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-blue-dark);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
}

.notif-mark-all:hover {
    text-decoration: underline;
}

.notif-mark-all[hidden] {
    display: none;
}

.notif-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--ink-soft);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
}

.notif-item,
.notif-archive-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

.notif-item:last-child,
.notif-archive-row:last-child {
    border-bottom: none;
}

.notif-item:hover,
.notif-archive-row:hover {
    background: var(--cream);
}

.notif-item.is-unread,
.notif-archive-row.is-unread {
    background: rgba(37, 99, 235, 0.06);
    box-shadow: inset 3px 0 0 var(--accent-blue);
}

.notif-item-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
}

.is-unread > .notif-item-title {
    font-weight: 700;
}

.notif-item-meta {
    font-size: 0.75rem;
    color: var(--ink-soft);
}

.notif-archive-excerpt {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink-soft);
    word-break: break-word;
}

@media (max-width: 640px) {
    .notif-panel {
        position: fixed;
        top: 64px;
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        max-width: none;
    }
}

/* ---------- Notifications page: compose form ---------- */

.compose {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(31, 51, 36, 0.06);
    overflow: hidden;
}

.compose-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

.compose-label {
    flex: 0 0 4.5rem;
    padding-top: 0.55rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.compose-field {
    flex: 1;
    min-width: 0;
}

.compose-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.4rem;
    cursor: text;
}

.compose-to-input,
.compose-input {
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: transparent;
    border: none;
    outline: none;
}

.compose-to-input {
    flex: 1;
    min-width: 14rem;
    padding: 0.5rem 0.25rem;
}

.compose-input {
    width: 100%;
    padding: 0.55rem 0.25rem;
    box-sizing: border-box;
}

.compose-message {
    resize: vertical;
    min-height: 10rem;
    line-height: 1.55;
}

.compose-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.3rem 0.2rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--cream);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--ink);
}

.compose-chip-group {
    background: rgba(47, 74, 52, 0.09);
    border-color: rgba(47, 74, 52, 0.28);
    color: var(--forest-dark);
    font-weight: 600;
}

.compose-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.compose-chip-remove:hover {
    background: rgba(42, 39, 31, 0.12);
}

.compose-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.compose-groups-label {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.75rem;
    color: var(--ink-soft);
}

.compose-group-btn {
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
}

.compose-group-btn:hover {
    border-color: var(--forest);
    color: var(--forest);
}

.compose-group-btn.is-on {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--paper);
}

.compose-hint {
    margin-top: 0.4rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    color: #b23a2e;
}

.compose-hint[hidden] {
    display: none;
}

.compose-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--cream);
}

.compose-footer .btn {
    width: auto;
    margin-top: 0;
    padding: 0.65rem 1.6rem;
}

.compose-status {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.compose-status.is-error {
    color: #b23a2e;
}

.compose-status.is-success {
    color: #2f8f4e;
    font-weight: 600;
}

/* ---------- Notification reader + archive overlays ---------- */

.notif-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background: rgba(31, 51, 36, 0.5);
}

.notif-modal-overlay.is-open {
    display: flex;
}

/* The reader opens over the archive card when it's opened from there. */
.notif-reader-overlay {
    z-index: 1100;
}

body.notif-modal-open {
    overflow: hidden;
}

.notif-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--paper);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(31, 51, 36, 0.35);
    overflow: hidden;
}

.notif-reader {
    width: min(1100px, 94vw);
    height: 92vh;
    padding: 2rem 2.5rem;
    overflow-y: auto;
}

.notif-archive {
    width: min(920px, 94vw);
    height: 88vh;
}

.notif-modal-close {
    position: absolute;
    top: 0.7rem;
    right: 0.9rem;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-soft);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.notif-modal-close:hover {
    background: rgba(42, 39, 31, 0.08);
    color: var(--ink);
}

.notif-reader-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2.5rem;
    margin: 0 2.5rem 1.25rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

.notif-reader-meta dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.notif-reader-meta dd {
    margin: 0.15rem 0 0;
    font-size: 1rem;
    color: var(--ink);
}

.notif-reader-title {
    margin: 0 0 1.25rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.9rem;
    line-height: 1.25;
    color: var(--forest-dark);
    word-break: break-word;
}

.notif-reader-message {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}

.notif-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem 0.4rem;
}

.notif-modal-head h2 {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.4rem;
    color: var(--forest-dark);
}

.notif-modal-head .notif-modal-close {
    position: static;
}

.notif-archive-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.4rem 0.9rem;
    border-bottom: 1px solid var(--border);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.notif-archive-search input[type="text"] {
    flex: 1;
    min-width: 12rem;
}

.notif-archive-search input[type="text"],
.notif-archive-search input[type="date"] {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.55rem 0.8rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--ink);
}

.notif-archive-search label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.notif-archive-search .btn {
    width: auto;
    margin-top: 0;
    padding: 0.55rem 1.1rem;
}

.notif-archive-count {
    padding: 0.6rem 1.4rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.notif-archive-list {
    flex: 1;
    overflow-y: auto;
    border-top: 1px solid var(--border);
}

.notif-archive-list:empty {
    border-top: none;
}

.notif-archive-more-wrap {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
}

.notif-archive-more-wrap:has(> [hidden]) {
    display: none;
}

.notif-archive-more-wrap .btn {
    width: auto;
    margin-top: 0;
}

@media (max-width: 640px) {
    .notif-reader {
        padding: 1.5rem 1.25rem;
    }

    .notif-reader-title {
        font-size: 1.5rem;
    }
}

.compose-from-fixed {
    display: inline-block;
    padding: 0.55rem 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--forest-dark);
}

.compose-from-select {
    width: auto;
    min-width: 12rem;
}

/* ---------- Upgrade to Pro (free accounts only) ---------- */

.upgrade-pro-btn {
    position: fixed;
    left: 1.25rem;
    bottom: 1.5rem;
    z-index: 60;
    border: none;
    border-radius: 999px;
    padding: 0.75rem 1.4rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: var(--gold);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(31, 51, 36, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.upgrade-pro-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(31, 51, 36, 0.32);
}

.upgrade-pro-was {
    text-decoration: line-through;
    opacity: 0.7;
    margin-right: 0.25rem;
}

/* ---------- Support: the corner button and member chat ---------- */

.support-widget {
    position: fixed;
    right: 1.25rem;
    bottom: 1.5rem;
    z-index: 60;
    --support-bottom: 1.5rem;
}

/* On the tree page it sits above the zoom button in the same corner. */
.support-widget-tree {
    bottom: 4.4rem;
    --support-bottom: 4.4rem;
}

.support-fab {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--forest);
    color: var(--paper);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(31, 51, 36, 0.32);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.support-fab:hover {
    background: var(--forest-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(31, 51, 36, 0.4);
}

.support-fab-bubble {
    fill: currentColor;
}

.support-fab-lines {
    stroke: var(--forest);
}

.support-fab:hover .support-fab-lines {
    stroke: var(--forest-dark);
}

.support-fab-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #b23a2e;
    border: 2px solid var(--paper);
}

.support-fab-dot[hidden] {
    display: none;
}

.support-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.75rem);
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - 2.5rem);
    height: 520px;
    max-height: calc(100vh - var(--support-bottom) - 8rem);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(31, 51, 36, 0.28);
    overflow: hidden;
}

.support-panel[hidden] {
    display: none;
}

.support-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: var(--forest);
    color: var(--paper);
}

.support-panel-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
}

.support-panel-sub {
    margin-top: 0.15rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.78rem;
    opacity: 0.85;
}

.support-panel-close {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.support-panel-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.support-closed-note,
.chat-closed-note {
    padding: 0.55rem 1rem;
    background: rgba(185, 139, 62, 0.14);
    border-bottom: 1px solid var(--border);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    color: var(--ink);
}

.support-closed-note[hidden],
.chat-closed-note[hidden] {
    display: none;
}

.support-error,
.chat-error {
    padding: 0.4rem 1rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    color: #b23a2e;
}

.support-error[hidden],
.chat-error[hidden] {
    display: none;
}

.support-compose,
.chat-compose {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    border-top: 1px solid var(--border);
    background: var(--cream);
}

.chat-compose[hidden] {
    display: none;
}

.support-compose textarea,
.chat-compose textarea {
    flex: 1;
    resize: none;
    max-height: 7rem;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #fbfaf6;
    color: var(--ink);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.4;
}

.support-compose textarea:focus,
.chat-compose textarea:focus {
    outline: none;
    border-color: var(--forest);
}

.support-send,
.chat-send {
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 10px;
    background: var(--forest);
    color: var(--paper);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.support-send:hover:not(:disabled),
.chat-send:hover:not(:disabled) {
    background: var(--forest-dark);
}

.support-send:disabled,
.chat-send:disabled {
    opacity: 0.5;
    cursor: default;
}

/* The message feed, shared by the member chat and the staff ticket window. */
.chat-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    overflow-y: auto;
    background: var(--cream);
}

.chat-empty {
    margin: auto 0.5rem;
    text-align: center;
    color: var(--ink-soft);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
}

.chat-msg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 82%;
}

.chat-msg.is-mine {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-msg-body {
    padding: 0.55rem 0.8rem;
    border-radius: 14px 14px 14px 4px;
    background: var(--paper);
    border: 1px solid var(--border);
    color: var(--ink);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-msg.is-mine .chat-msg-body {
    border-radius: 14px 14px 4px 14px;
    background: var(--forest);
    border-color: var(--forest);
    color: var(--paper);
}

.chat-msg-meta {
    margin-top: 0.2rem;
    padding: 0 0.3rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.7rem;
    color: var(--ink-soft);
}

@media (max-width: 640px) {
    .support-panel {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 5.5rem;
        width: auto;
        max-width: none;
        height: auto;
        max-height: calc(100vh - 8rem);
        min-height: 60vh;
    }
}

/* ---------- The "Communications" panel: contacts list and back button ---------- */

.comms-head-text {
    flex: 1;
    min-width: 0;
}

.comms-back {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.comms-back:hover {
    background: rgba(255, 255, 255, 0.15);
}

.comms-back[hidden] {
    display: none;
}

.comms-contacts {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 1.1rem 0.5rem;
    align-content: start;
    padding: 1.1rem;
    overflow-y: auto;
    background: var(--cream);
}

.comms-contacts[hidden] {
    display: none;
}

.comms-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

.comms-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--forest);
    color: var(--paper);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.4rem;
    font-weight: 600;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.comms-avatar-support {
    background: var(--gold);
}

.comms-contact:hover .comms-avatar {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(31, 51, 36, 0.25);
}

.comms-contact-name {
    max-width: 84px;
    color: var(--ink);
    font-size: 0.78rem;
    text-align: center;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.comms-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #b23a2e;
    border: 2px solid var(--cream);
}

.comms-dot[hidden] {
    display: none;
}

/* ---------- Support Tickets page ---------- */

.ticket-reply-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(178, 58, 46, 0.1);
    border: 1px solid rgba(178, 58, 46, 0.35);
    color: #b23a2e;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ticket-reply-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b23a2e;
}

.ticket-row {
    cursor: pointer;
}

.ticket-row:hover td {
    background: rgba(47, 74, 52, 0.04);
}

.ticket-row.needs-reply td:first-child {
    box-shadow: inset 3px 0 0 #b23a2e;
}

.ticket-subject {
    font-weight: 600;
    color: var(--ink);
}

.ticket-excerpt {
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.report-tab-count-alert {
    background: #b23a2e;
    color: #fff;
}

.report-tab-count-alert[hidden] {
    display: none;
}

.ticket-modal {
    width: min(760px, 94vw);
    height: 88vh;
}

.ticket-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.ticket-modal-who {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.ticket-modal-subject {
    margin: 0.15rem 0 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
    color: var(--forest-dark);
    word-break: break-word;
}

.ticket-modal-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ticket-modal-actions .btn {
    width: auto;
    margin-top: 0;
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
}

.ticket-modal-actions .notif-modal-close {
    position: static;
}

.ticket-modal .chat-compose {
    flex-shrink: 0;
}

/* ---------- Manager page: the Customer Service inbox icon ---------- */

.icon-btn.support-inbox-btn {
    position: relative;
    text-decoration: none;
}

.support-inbox-btn .notif-badge[hidden] {
    display: none;
}

/* ---------- Notes canvas (profile card) ---------- */

.node-edit-col-notes {
    display: none;
}

.notes-open-btn {
    width: 100%;
    margin-top: 1.5rem;
}

/* Desktop: notes take over the whole card -- no header, photo, information or
   relationships, just the canvas and a Back button. */
.node-edit-dialog.is-notes-mode {
    width: 96vw;
    max-width: none;
    height: 92vh;
    max-height: 92vh;
}

.node-edit-dialog.is-notes-mode .modal-box-scroll {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 0;
    overflow: hidden;
}

.node-edit-dialog.is-notes-mode .node-edit-header,
.node-edit-dialog.is-notes-mode .identity-photo-wrap {
    display: none;
}

.node-edit-dialog.is-notes-mode .node-edit-columns {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
}

.node-edit-dialog.is-notes-mode .node-edit-col-info,
.node-edit-dialog.is-notes-mode .node-edit-col-relationships {
    display: none;
}

.node-edit-dialog.is-notes-mode .node-edit-col-notes {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.notes-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

.notes-back-btn {
    width: auto;
    margin: 0;
    padding: 0.45rem 0.95rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.notes-tools {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.notes-tool-btn {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.notes-tool-btn:hover {
    background: var(--cream);
}

.notes-tool-btn[aria-pressed="true"] {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--paper);
}

.notes-text-menu {
    position: relative;
}

.notes-text-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    padding: 0.35rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(31, 51, 36, 0.18);
    z-index: 30;
}

.notes-text-menu.is-open .notes-text-panel {
    display: block;
}

.notes-text-panel button {
    display: block;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.notes-text-panel button:hover {
    background: var(--cream);
}

.notes-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.notes-status {
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.notes-status.is-error {
    color: #b23a2e;
}

.notes-zoom {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--paper);
}

.notes-zoom button {
    min-width: 2rem;
    padding: 0.35rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.notes-zoom button:hover {
    background: var(--cream);
}

/* Read-only: nothing to add with. */
.notes-canvas.is-readonly .notes-tools {
    visibility: hidden;
}

.notes-viewport {
    --nz: 1;
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.notes-viewport.is-drawing {
    cursor: crosshair;
}

.notes-canvas.is-loading .notes-viewport {
    opacity: 0.5;
}

.notes-world {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
}

.notes-empty-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 22rem;
    text-align: center;
    color: var(--ink-soft);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    pointer-events: none;
}

.notes-empty-hint[hidden] {
    display: none;
}

/* ----- Items ----- */

.notes-item {
    position: absolute;
    box-sizing: border-box;
    transform-origin: 50% 50%;
    cursor: move;
}

.notes-canvas.is-readonly .notes-item {
    cursor: default;
}

.notes-item.is-selected {
    outline: calc(2px / var(--nz)) solid var(--accent-blue);
}

.notes-item-image img,
.notes-item-flag img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.notes-item-image img {
    object-fit: fill;
}

.notes-item-flag img {
    object-fit: contain;
    box-shadow: 0 2px 8px rgba(31, 51, 36, 0.25);
}

.notes-item-section {
    background: rgba(47, 74, 52, 0.07);
    border: calc(2px / var(--nz)) solid rgba(47, 74, 52, 0.28);
    border-radius: 6px;
}

.notes-section-draft {
    position: absolute;
    background: rgba(47, 74, 52, 0.07);
    border: calc(2px / var(--nz)) dashed rgba(47, 74, 52, 0.5);
    border-radius: 6px;
    pointer-events: none;
}

/* Text: the size of each style is scaled by --s when the item is resized. */
.notes-text {
    padding: 4px 6px;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
    outline: none;
    cursor: inherit;
    pointer-events: none;
}

.notes-text-h1 { font-size: calc(2.2rem * var(--s, 1)); font-weight: 700; line-height: 1.2; }
.notes-text-h2 { font-size: calc(1.7rem * var(--s, 1)); font-weight: 700; line-height: 1.25; }
.notes-text-h3 { font-size: calc(1.3rem * var(--s, 1)); font-weight: 700; line-height: 1.3; }
.notes-text-p { font-size: calc(1rem * var(--s, 1)); line-height: 1.5; }

.notes-item.is-editing {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}

.notes-item.is-editing .notes-text {
    pointer-events: auto;
    background: rgba(37, 99, 235, 0.05);
}

/* Video and audio: tap to play. */
.notes-video-frame,
.notes-audio-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.notes-video-frame {
    background: #1b1b1b;
}

.notes-video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.notes-play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22%;
    max-width: 64px;
    min-width: 28px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    padding: 0.5em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #1b1b1b;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.notes-item-video.is-playing .notes-play-icon {
    opacity: 0;
}

.notes-audio-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--cream);
    border: 1px solid var(--border);
}

.notes-audio-card .notes-play-icon {
    position: static;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    max-width: none;
    transform: none;
    background: var(--forest);
    color: var(--paper);
}

.notes-audio-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--ink);
}

/* ----- Selection handles: kept the same size on screen at any zoom ----- */

.notes-handle,
.notes-delete,
.notes-rotate-stem {
    display: none;
    position: absolute;
    box-sizing: border-box;
}

.notes-item.is-selected .notes-handle,
.notes-item.is-selected .notes-delete,
.notes-item.is-selected .notes-rotate-stem {
    display: block;
}

.notes-item.is-editing .notes-handle,
.notes-item.is-editing .notes-delete,
.notes-item.is-editing .notes-rotate-stem {
    display: none;
}

.notes-handle {
    width: calc(13px / var(--nz));
    height: calc(13px / var(--nz));
    background: #fff;
    border: calc(2px / var(--nz)) solid var(--accent-blue);
    border-radius: 50%;
    z-index: 2;
}

.notes-handle-nw { left: calc(-7px / var(--nz)); top: calc(-7px / var(--nz)); cursor: nwse-resize; }
.notes-handle-ne { right: calc(-7px / var(--nz)); top: calc(-7px / var(--nz)); cursor: nesw-resize; }
.notes-handle-sw { left: calc(-7px / var(--nz)); bottom: calc(-7px / var(--nz)); cursor: nesw-resize; }
.notes-handle-se { right: calc(-7px / var(--nz)); bottom: calc(-7px / var(--nz)); cursor: nwse-resize; }

.notes-rotate-stem {
    left: 50%;
    top: calc(-26px / var(--nz));
    width: calc(2px / var(--nz));
    height: calc(26px / var(--nz));
    margin-left: calc(-1px / var(--nz));
    background: var(--accent-blue);
}

.notes-rotate {
    left: 50%;
    top: calc(-38px / var(--nz));
    margin-left: calc(-6.5px / var(--nz));
    cursor: grab;
    background: var(--accent-blue);
}

.notes-delete {
    right: calc(-34px / var(--nz));
    top: calc(-34px / var(--nz));
    width: calc(26px / var(--nz));
    height: calc(26px / var(--nz));
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #b23a2e;
    color: #fff;
    font-size: calc(18px / var(--nz));
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

/* ----- Mobile: Notes is a tab, so no Back button and the tabs stay on top ----- */

html.is-narrow #notes-open-btn,
html.is-narrow .notes-back-btn {
    display: none;
}

html.is-narrow .node-edit-dialog.is-notes-mode {
    width: 100%;
    height: 90vh;
    height: 90dvh;
    max-height: none;
}

html.is-narrow .node-edit-dialog.is-notes-mode .modal-box-scroll {
    padding: 1rem 0 0;
}

html.is-narrow .node-edit-dialog.is-notes-mode .node-edit-header {
    display: flex;
    padding-left: 1rem;
    padding-right: 1rem;
}

html.is-narrow .node-edit-dialog.is-notes-mode .node-edit-tabs {
    margin: 0.5rem 1rem 0;
}

html.is-narrow .node-edit-columns.show-notes .node-edit-col-notes {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

html.is-narrow .node-edit-dialog.is-notes-mode .node-edit-columns {
    display: flex;
}

html.is-narrow .notes-toolbar {
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
}

html.is-narrow .notes-tools {
    flex: none;
}

html.is-narrow .notes-status {
    display: none;
}

/* ----- The add / library / flag picker ----- */

.notes-picker-dialog {
    max-width: 640px;
}

.notes-picker-tabs {
    margin-bottom: 1rem;
}

.notes-picker-grid {
    max-height: 45vh;
    overflow-y: auto;
    margin-top: 0.75rem;
}

.notes-picker-grid .file-tile {
    font: inherit;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    text-align: center;
}

.notes-picker-grid .file-tile:hover {
    border-color: var(--forest);
}

.notes-picker-help,
.notes-picker-progress {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.notes-picker-progress.is-error {
    color: #b23a2e;
}

.notes-picker-dialog .flags-picker-flag {
    font: inherit;
    cursor: pointer;
}

#notes-picker-overlay {
    z-index: 1200;
}

/* ---------- My Library: storage meter (percentage only, never sizes) ---------- */

.storage-meter {
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.1rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.storage-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.55rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.storage-meter-head strong {
    font-size: 1rem;
    color: var(--ink);
}

.storage-meter-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(42, 39, 31, 0.08);
}

.storage-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--forest);
    transition: width 0.3s ease;
}

.storage-meter-fill.is-high {
    background: #c98a1b;
}

.storage-meter-fill.is-full {
    background: #b23a2e;
}

/* ---------- Support chat: reply-time notice ---------- */

.support-notice {
    padding: 0.55rem 1rem;
    background: rgba(47, 74, 52, 0.08);
    border-bottom: 1px solid var(--border);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--forest-dark);
}

/* The office is on holiday: stands out from the everyday line. */
.support-notice.is-holiday {
    background: rgba(185, 139, 62, 0.16);
    color: var(--ink);
}

.support-notice[hidden] {
    display: none;
}

/* ---------- Set Holidays page ---------- */

.holiday-preview {
    margin-bottom: 1.5rem;
    padding: 0.85rem 1.1rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-left: 4px solid var(--forest);
    border-radius: 10px;
}

.holiday-preview.is-holiday {
    border-left-color: var(--gold);
}

.holiday-preview-label {
    margin-bottom: 0.25rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.holiday-preview-text {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
}

.log-filters input[type="date"] {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--ink);
}

.holiday-form {
    margin-bottom: 1.5rem;
}

.holiday-status {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.holiday-status-active {
    background: rgba(185, 139, 62, 0.16);
    border-color: rgba(185, 139, 62, 0.5);
    color: #7a5a1f;
}

.holiday-status-upcoming {
    background: rgba(37, 99, 235, 0.09);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--accent-blue-dark);
}

.holiday-status-past {
    background: rgba(42, 39, 31, 0.05);
    color: var(--ink-soft);
}

/* ---------- Warnings ---------- */

.warning-form {
    margin-bottom: 1.5rem;
}

.warning-form-message {
    flex-basis: 100%;
}

.warning-form-message textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.55rem 0.7rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--ink);
    resize: vertical;
}

.manager-warning {
    position: relative;
    background: rgba(178, 58, 46, 0.08);
    border: 1px solid rgba(178, 58, 46, 0.3);
    color: #7a2a1f;
    padding: 0.9rem 2.6rem 0.9rem 1.1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.manager-warning p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.manager-warning-close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    border: none;
    background: none;
    color: #b23a2e;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}

.manager-warning-close:hover {
    color: #7a2a1f;
}

/* ---------- Sharing a tree ---------- */

.share-dialog,
.share-perms-dialog {
    max-width: 560px;
}

.share-note {
    margin: 0 0 1.1rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.share-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.share-form .form-row {
    flex: 1;
    margin-bottom: 0;
}

.share-form .btn {
    width: auto;
    margin-top: 0;
    padding: 0.9rem 1.3rem;
}

.share-message {
    margin-top: 0.75rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: #2f8f4e;
}

.share-message.is-error {
    color: #b23a2e;
}

.share-message[hidden] {
    display: none;
}

.share-list-title {
    margin: 1.5rem 0 0.5rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    font-weight: normal;
    color: var(--forest);
}

.share-list,
.share-perms-list {
    display: flex;
    flex-direction: column;
}

.share-row,
.share-perm-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
}

.share-row:last-child,
.share-perm-row:last-child {
    border-bottom: none;
}

.share-row-who {
    flex: 1;
    min-width: 0;
}

.share-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
}

.share-row-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.share-row-btn {
    width: auto;
    margin: 0;
    padding: 0.4rem 0.8rem;
    font-size: 0.78rem;
}

.share-status {
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.share-status-accepted {
    background: rgba(47, 143, 78, 0.12);
    border-color: rgba(47, 143, 78, 0.4);
    color: #2f8f4e;
}

.share-status-pending {
    background: rgba(185, 139, 62, 0.14);
    border-color: rgba(185, 139, 62, 0.45);
    color: #7a5a1f;
}

.share-status-ignored {
    background: rgba(42, 39, 31, 0.05);
    color: var(--ink-soft);
}

.share-empty {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.share-empty[hidden] {
    display: none;
}

.share-privacy {
    margin-bottom: 1.1rem;
    padding: 0.85rem 1rem;
    background: rgba(185, 139, 62, 0.12);
    border: 1px solid rgba(185, 139, 62, 0.45);
    border-radius: 10px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--ink);
}

.share-privacy p {
    margin: 0.35rem 0 0;
}

.share-privacy-title {
    font-weight: 700;
    color: #7a5a1f;
}

.share-perms-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 2px solid var(--border);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.share-perms-all[hidden] {
    display: none;
}

.share-perms-list {
    max-height: 42vh;
    overflow-y: auto;
}

/* ----- What the other person sees on a locked profile ----- */

.tree-node-lock {
    position: absolute;
    top: 6px;
    left: 6px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--forest);
    color: var(--paper);
    box-shadow: 0 2px 6px rgba(31, 51, 36, 0.3);
}

.tree-node.is-locked .tree-node-photo img {
    filter: saturate(0.6);
}

.locked-dialog {
    max-width: 380px;
    text-align: center;
}

.locked-dialog h2 {
    margin-bottom: 0.5rem;
}

.locked-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 1.1rem 2rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--cream);
    color: var(--ink-soft);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: not-allowed;
}

/* ----- Manager page: trees shared with you ----- */

.tree-tile-shared-by {
    margin-top: 0.15rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-soft);
}

/* ----- Notification buttons (Accept / Ignore) ----- */

.notif-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem 0.75rem;
}

.notif-action-btn {
    padding: 0.4rem 1rem;
    border: 1px solid var(--forest);
    border-radius: 999px;
    background: var(--forest);
    color: var(--paper);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.notif-action-btn:hover:not(:disabled) {
    background: var(--forest-dark);
}

.notif-action-btn.is-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--border);
}

.notif-action-btn.is-secondary:hover:not(:disabled) {
    background: var(--cream);
}

.notif-action-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.notif-action-result {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.notif-action-result.is-accepted {
    color: #2f8f4e;
}

.notif-reader-actions {
    margin-top: 1.5rem;
    padding: 0;
}

.notif-reader-actions .notif-action-btn {
    padding: 0.6rem 1.4rem;
    font-size: 0.9rem;
}

/* Buttons inside a dropdown / archive row sit under the text, not padded like the reader's. */
.notif-item .notif-actions,
.notif-archive-row .notif-actions {
    padding: 0.4rem 0 0;
}

.notif-actions[hidden] {
    display: none;
}

/* my_files: deleting a file. */
.file-detail-delete { margin-right: auto; }
body.is-read-only #file-detail-delete { display: none; }
.file-delete-dialog { max-width: 480px; }
.file-delete-name { font-weight: 600; word-break: break-word; }
.file-delete-intro, .file-delete-none { margin: 0 0 6px; }
.file-delete-list { margin: 0 0 12px; padding-left: 20px; max-height: 220px; overflow-y: auto; }
.file-delete-list li { margin-bottom: 4px; }
.file-delete-warning { color: var(--ink-soft); font-size: 0.9rem; }
.file-delete-error { color: #b42318; }

/* manage_files.php: Clean Files. */
.clean-files-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.clean-files-all { display: inline-flex; align-items: center; gap: 8px; }
.clean-files-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block; }
.clean-files-inuse { color: #b45309; }
.clean-files-result { margin: 0 0 12px; font-weight: 600; }

/* Notes: headings are centred by default; paragraphs keep the default alignment. */
.notes-text-h1,
.notes-text-h2,
.notes-text-h3 {
    text-align: center;
}

/* Notes: canvas / list mode. */
.notes-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.notes-mode-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(31, 51, 36, 0.15);
}

.notes-mode-btn:hover {
    background: var(--cream);
}

.notes-mode-btn svg {
    display: block;
}

.notes-canvas.is-list-mode .notes-viewport,
.notes-canvas.is-list-mode .notes-zoom {
    display: none;
}

.notes-canvas.is-list-mode .notes-add-section-btn {
    display: none;
}

.notes-list {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 56px 16px 24px;
    background: #fff;
}

.notes-list[hidden] {
    display: none;
}

.notes-list-item {
    position: relative;
    width: 100%;
    margin-bottom: 14px;
}

.notes-list-item .notes-text {
    pointer-events: auto;
    cursor: text;
    border-radius: 4px;
}

.notes-canvas.is-readonly .notes-list-item .notes-text {
    cursor: default;
}

.notes-list-item .notes-text:focus {
    background: rgba(37, 99, 235, 0.05);
}

.notes-list-item img {
    display: block;
    /* Shown at the picture's own size, only shrunk if it is wider than the card. */
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.notes-list-item-flag img {
    max-width: 260px;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(31, 51, 36, 0.25);
}

.notes-list-item video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1b1b1b;
    border-radius: 8px;
}

.notes-list-item audio {
    display: block;
    width: 100%;
}

.notes-list-media-name {
    margin: 0 0 4px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.notes-list-item.is-selected {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Controls in the top right corner of the selected item. */
.notes-list-tools {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    display: none;
    gap: 4px;
}

.notes-list-item.is-selected .notes-list-tools {
    display: flex;
}

.notes-list-tools button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(31, 51, 36, 0.75);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}

.notes-list-tools button:disabled {
    opacity: 0.35;
    cursor: default;
}

.notes-list-delete {
    font-size: 1.1rem !important;
}

.notes-canvas.is-readonly .notes-list-tools {
    display: none !important;
}

.notes-list-empty {
    padding: 2rem 0.5rem;
    text-align: center;
    color: var(--ink-soft);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Notes list mode, desktop only: text is brought in from the sides (15% each,
   30% of the width in all) so it doesn't sit hard against the edges. */
html:not(.is-narrow) .notes-list-item-text {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

/* Tree / Research / Export: a floating row of pill buttons at the top middle of
   the tree page, with no bar or background behind them. */
.tree-view-switch {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    display: flex;
    gap: 0.5rem;
    background: none;
}

.tree-view-btn {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.5rem 1.3rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(31, 51, 36, 0.12);
}

.tree-view-btn:hover {
    background: #fff;
}

.tree-view-btn.is-active {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--paper);
}

/* ---------- Export menu ---------- */
/* A centred dialog (a bottom-sheet card on mobile, same switch every other
   .dialog-card-overlay/.dialog-card on this page already makes) whose content
   is a stack of "screens" -- only one .tree-export-screen shows at a time. */

.tree-export-dialog {
    max-width: 420px;
}

.tree-export-screen {
    display: flex;
    flex-direction: column;
}

/* Giving .tree-export-screen its own "display" above overrides the browser's
   default [hidden] { display: none } rule (an author stylesheet always wins
   over the UA one, whatever the specificity) -- so the JS setting .hidden on
   the other screens had no visible effect at all; every screen stacked up at
   once instead of just the current one showing. This restores it explicitly. */
.tree-export-screen[hidden] {
    display: none;
}

/* The main menu (and Export Tree / Export Individual's own sub-menus): a grid
   of app-launcher-style tiles, icon above label. */
.tree-export-apps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.tree-export-app {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.2rem 0.75rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tree-export-app:hover {
    background: #fff;
    border-color: var(--forest);
}

/* A free account sees these tiles (Export Tree, Export All, Create Book) but
   can't use them -- a single person's PDF stays free either way. Dimmed
   rather than hidden, with a "Pro" badge, so the feature is discoverable. */
.tree-export-app.is-pro-locked {
    opacity: 0.55;
}

.tree-export-app.is-pro-locked:hover {
    background: var(--cream);
    border-color: var(--border);
}

.tree-export-pro-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--gold);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}

.tree-export-app-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--forest);
}

.tree-export-app-label {
    text-align: center;
    line-height: 1.25;
}

.tree-export-back {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--forest);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.3rem 0.4rem 0.6rem;
}

.tree-export-back:hover {
    text-decoration: underline;
}

.tree-export-search {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.35rem;
}

.tree-export-people {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tree-export-person-row {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--ink);
    cursor: pointer;
}

.tree-export-person-row:hover {
    background: var(--cream);
}

.tree-export-people-empty {
    font-size: 0.85rem;
    color: var(--ink-soft);
    padding: 0.5rem 0.65rem;
    margin: 0;
}

/* Research is blank for now; it covers the canvas the same way Export's menu
   would if it swapped views too -- it doesn't, see .tree-export-menu above. */
.tree-blank-view {
    position: absolute;
    inset: 0;
    z-index: 9;
    background: var(--cream);
    cursor: default;
}

.tree-blank-view[hidden] {
    display: none;
}

.tree-viewport.is-other-view .tree-canvas-tools,
.tree-viewport.is-other-view .tree-canvas-menu {
    display: none;
}

html.is-narrow .tree-view-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
}

/* ===== Research section (inside the tree page's Research view) ===== */
.research-root {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 4.6rem 1.5rem 2.5rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    color: var(--ink);
    user-select: text;
    cursor: auto;
}

.tree-blank-view[data-view="export"] .research-root {
    display: none;
}

.research-head,
.research-groups,
.research-source-head,
.research-form,
.research-results,
.research-panel {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.research-title {
    margin: 0 0 0.35rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.7rem;
    color: var(--forest);
}

.research-intro,
.research-source-desc {
    margin: 0 0 1rem;
    max-width: 46rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

.research-filter {
    width: 100%;
    max-width: 26rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--paper);
    font: inherit;
}

.research-region {
    margin: 1.6rem 0 0.6rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.15rem;
    color: var(--forest);
}

.research-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.9rem;
}

.research-source-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.95rem 1rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}

.research-source-card:hover,
.research-source-card:focus-visible {
    box-shadow: 0 6px 18px rgba(31, 51, 36, 0.14);
    transform: translateY(-1px);
    outline: none;
}

.research-source-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
}

.research-source-name {
    font-weight: 700;
    line-height: 1.3;
}

.research-source-blurb {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.research-source-foot,
.research-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
}

.research-chips {
    margin: 0 0 0.8rem;
}

.research-chip {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: rgba(47, 74, 52, 0.09);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ink);
}

.research-chip.is-mode { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; }
.research-chip.is-mode-demo { background: rgba(185, 139, 62, 0.18); color: #7a5a1c; }
.research-chip.is-mode-linkout { background: rgba(90, 85, 72, 0.12); color: var(--ink-soft); }
.research-chip.is-live { background: rgba(47, 74, 52, 0.16); color: var(--forest-dark); }
.research-chip.is-pending { background: rgba(185, 139, 62, 0.16); color: #7a5a1c; }
.research-chip.is-link { background: rgba(90, 85, 72, 0.1); color: var(--ink-soft); }
.research-chip.is-sensitive { background: rgba(163, 53, 42, 0.12); color: #a3352a; }
.research-chip.is-type { background: rgba(47, 74, 52, 0.12); color: var(--forest-dark); }

.research-back {
    display: inline-block;
    margin: 0 0 0.9rem;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--accent-blue-dark);
    cursor: pointer;
}

.research-notice {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid #a3352a;
    background: rgba(163, 53, 42, 0.07);
    border-radius: 0 8px 8px 0;
    font-size: 0.88rem;
}

.research-panel {
    padding: 1rem 1.1rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.research-open-site {
    display: inline-block;
    width: auto;
    margin-top: 0.4rem;
    text-decoration: none;
}

.research-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.8rem 1rem;
    padding: 1rem 1.1rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.research-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 12rem;
    flex: 1 1 14rem;
}

.research-field label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.research-field input,
.research-field select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font: inherit;
}

.research-years {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.research-years input {
    width: 100%;
    min-width: 0;
}

.research-form-actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.research-form-actions .btn {
    width: auto;
    margin: 0;
    padding: 0.55rem 1.1rem;
}

.research-results {
    margin-top: 1.2rem;
}

.research-count {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.research-message {
    padding: 1.2rem 0.4rem;
    color: var(--ink-soft);
}

.research-message.is-error {
    color: #a3352a;
}

.research-empty {
    padding: 1.5rem 0;
    color: var(--ink-soft);
}

.research-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.research-result {
    display: flex;
    gap: 0.9rem;
    padding: 0.8rem 0.9rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.research-result:hover,
.research-result:focus-visible {
    box-shadow: 0 6px 18px rgba(31, 51, 36, 0.14);
    outline: none;
}

.research-result-thumb {
    flex: 0 0 84px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(47, 74, 52, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.research-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.research-result-icon {
    font-family: Georgia, serif;
    font-size: 1.8rem;
    color: var(--forest);
    opacity: 0.6;
}

.research-result-body {
    min-width: 0;
    flex: 1;
}

.research-result-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.research-result-title {
    font-weight: 700;
    line-height: 1.3;
}

.research-result-meta {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.research-result-summary {
    margin: 0.35rem 0 0;
    font-size: 0.86rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.research-result-attr {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--ink-soft);
}

.research-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.research-pager .btn {
    width: auto;
    margin: 0;
    padding: 0.45rem 1rem;
}

/* ----- The Record Viewer ----- */
.research-viewer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
    background: rgba(31, 51, 36, 0.5);
}

.research-viewer-overlay.is-open {
    display: flex;
}

.research-viewer {
    position: relative;
    width: min(1000px, 94vw);
    height: 92vh;
    background: var(--paper);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(31, 51, 36, 0.35);
    overflow: hidden;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

.research-viewer-close {
    position: absolute;
    top: 0.6rem;
    right: 0.9rem;
    z-index: 2;
    border: none;
    background: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
}

.research-viewer-body {
    height: 100%;
    overflow-y: auto;
    padding: 1.8rem 2.2rem 2rem;
}

.rv-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.rv-title {
    margin: 0.5rem 2rem 0.3rem 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.6rem;
    line-height: 1.25;
    color: var(--forest-dark);
}

.rv-line {
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.rv-part {
    margin-top: 0.7rem;
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.rv-linkbtn {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--accent-blue-dark);
    text-align: left;
    cursor: pointer;
}

.rv-h {
    margin: 1.4rem 0 0.4rem;
    font-size: 1rem;
    color: var(--forest);
}

.rv-p {
    margin: 0.8rem 0 0;
    line-height: 1.65;
    white-space: pre-wrap;
}

.rv-quote {
    margin: 0.8rem 0;
    padding: 0.3rem 1rem;
    border-left: 3px solid var(--gold);
    color: var(--ink-soft);
    font-style: italic;
}

.rv-figure {
    margin: 1rem 0 0;
}

.rv-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.rv-figure figcaption {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.rv-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.rv-gallery img {
    height: 140px;
    width: auto;
    border-radius: 6px;
    border: 1px solid var(--border);
    display: block;
}

.rv-kv {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr;
    gap: 0.35rem 1rem;
    margin: 0.4rem 0 0;
    font-size: 0.92rem;
}

.rv-kv dt {
    font-weight: 700;
    color: var(--ink-soft);
}

.rv-kv dd {
    margin: 0;
}

.rv-people {
    border-collapse: collapse;
    font-size: 0.92rem;
}

.rv-people td {
    padding: 0.25rem 1.2rem 0.25rem 0;
}

.rv-soft {
    color: var(--ink-soft);
}

.rv-children {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.8;
}

.rv-foot {
    margin-top: 1.6rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
}

.rv-attr {
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.rv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.rv-actions .btn {
    width: auto;
    margin: 0;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.rv-actions .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

html.is-narrow .research-root { padding: 4.2rem 0.9rem 2rem; }
html.is-narrow .research-viewer { width: 100vw; height: 100vh; border-radius: 0; }
html.is-narrow .research-viewer-body { padding: 1.4rem 1.1rem 1.6rem; }
html.is-narrow .rv-kv { grid-template-columns: 1fr; }

/* Site Settings and the Research Sources page. */
.site-setting-card { max-width: 34rem; padding: 1.2rem 1.4rem; background: var(--paper); border: 1px solid var(--border); border-radius: 12px; }
.site-setting-card h2 { margin: 0 0 0.4rem; font-size: 1.15rem; color: var(--forest); }
.site-setting-saved { margin: 0 0 0.8rem; font-weight: 600; color: var(--forest); }
.research-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.research-switch input { opacity: 0; width: 0; height: 0; }
.research-switch span { position: absolute; inset: 0; border-radius: 999px; background: #c9c5b8; transition: background 0.15s; cursor: pointer; }
.research-switch span::before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.research-switch input:checked + span { background: var(--forest); }
.research-switch input:checked + span::before { transform: translateX(18px); }
.research-switch input:focus-visible + span { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* ===== Research board, pinned record cards, and pinning ===== */

/* The Databases / Board tabs sit under the floating Tree / Research / Export buttons. */
.research-tabs {
    position: absolute;
    top: 4.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.35rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

.tree-blank-view[data-view="export"] .research-tabs,
.tree-blank-view[data-view="export"] .research-board {
    display: none;
}

.research-tab {
    padding: 0.3rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--paper);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
}

.research-tab.is-active {
    background: rgba(47, 74, 52, 0.12);
    border-color: rgba(47, 74, 52, 0.35);
    color: var(--forest-dark);
}

.research-root {
    top: 6.6rem;
    padding-top: 1rem;
}

html.is-narrow .research-root {
    top: 6.4rem;
    padding-top: 0.8rem;
}

.research-root[hidden] {
    display: none;
}

.research-board {
    position: absolute;
    left: 0;
    right: 0;
    top: 6.6rem;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid var(--border);
    cursor: auto;
}

.research-board[hidden] {
    display: none;
}

/* ----- A pinned record or web clip, on the canvas and in the list ----- */
.notes-item-record,
.notes-item-web-clip,
.notes-item-map-area {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(31, 51, 36, 0.12);
    overflow: hidden;
}

.notes-record {
    display: flex;
    gap: 0.7rem;
    padding: 0.55rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    color: var(--ink);
}

.notes-list-item .notes-record {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.notes-record-thumb {
    flex: 0 0 76px;
    height: 76px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(47, 74, 52, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 1.6rem;
    color: var(--forest);
}

.notes-record-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.notes-record-body {
    min-width: 0;
    flex: 1;
    pointer-events: none;
}

.notes-record-body .notes-record-open {
    pointer-events: auto;
}

.notes-record-kind {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--forest);
}

.notes-record-title {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notes-record-meta {
    margin-top: 0.15rem;
    font-size: 0.76rem;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notes-record-attr {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes-record-open {
    margin-top: 0.4rem;
    padding: 0.25rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--paper);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-blue-dark);
    cursor: pointer;
}

/* ----- Pinning from Research ----- */
.research-result {
    position: relative;
}

.research-quickpin {
    align-self: flex-start;
    padding: 0.25rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--paper);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--forest-dark);
    cursor: pointer;
}

.research-quickpin:hover {
    background: rgba(47, 74, 52, 0.1);
}

.research-quickpin:disabled {
    opacity: 0.5;
    cursor: default;
}

.research-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translate(-50%, 1rem);
    z-index: 1300;
    max-width: 90vw;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    background: var(--forest-dark);
    color: #fff;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

.research-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

.research-toast.is-error {
    background: #a3352a;
}

.research-picker-overlay {
    z-index: 1200;
}

.research-picker {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: min(420px, 92vw);
    max-height: 80vh;
    padding: 1.2rem 1.3rem;
    background: var(--paper);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(31, 51, 36, 0.35);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

.research-picker h3 {
    margin: 0;
    font-family: Georgia, serif;
    color: var(--forest);
}

.research-picker .research-filter {
    max-width: none;
}

.research-picker .btn {
    width: auto;
    align-self: flex-end;
    margin: 0;
    padding: 0.45rem 1.1rem;
}

.research-picker-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 4rem;
}

.research-picker-item {
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.research-picker-item:hover {
    background: rgba(47, 74, 52, 0.08);
}

.rv-images {
    margin-top: 1.4rem;
}

.rv-copy {
    display: block;
    margin: 0.2rem 0 0.6rem;
    font-size: 0.88rem;
}

.rv-image-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0;
}

.rv-image-row img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.rv-image-row .rv-soft {
    flex: 1;
    min-width: 0;
    font-size: 0.86rem;
}

.rv-image-row .btn {
    width: auto;
    margin: 0;
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
}

.rv-actions .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ===== Researching a person, and suggestions for their profile ===== */

.research-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 1rem;
}

.research-ingredient {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(90, 85, 72, 0.08);
    font: inherit;
    font-size: 0.82rem;
    color: var(--ink-soft);
    text-decoration: line-through;
    cursor: pointer;
}

.research-ingredient.is-on {
    background: rgba(47, 74, 52, 0.12);
    border-color: rgba(47, 74, 52, 0.35);
    color: var(--forest-dark);
    text-decoration: none;
}

.research-ingredient.is-info {
    background: transparent;
    text-decoration: none;
    cursor: default;
}

.research-ingredient-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}

.research-again {
    width: auto;
    margin: 0;
    padding: 0.5rem 1.4rem;
}

.research-person-section {
    margin-bottom: 1.2rem;
}

.research-others {
    margin-top: 1.6rem;
    font-size: 0.9rem;
}

.research-others summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink-soft);
}

.research-others ul {
    margin: 0.6rem 0 0;
    padding-left: 1.2rem;
    line-height: 1.8;
}

.research-others a {
    color: var(--accent-blue-dark);
}

.research-consent-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.research-consent-actions .btn {
    width: auto;
    margin: 0;
    padding: 0.5rem 1.2rem;
}

/* ----- Suggestions ----- */
.research-suggest-panel {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(47, 74, 52, 0.3);
    border-radius: 12px;
    background: rgba(47, 74, 52, 0.06);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

.research-suggest-panel[hidden] {
    display: none;
}

.research-suggest-head {
    margin-bottom: 0.6rem;
    color: var(--forest-dark);
}

.research-suggest-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    overflow-y: auto;
}

.research-suggest-modal {
    width: min(560px, 94vw);
}

.research-suggestion {
    padding: 0.75rem 0.85rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.88rem;
}

.research-suggestion-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.research-suggestion-change {
    margin-top: 0.3rem;
    font-size: 0.98rem;
}

.research-suggestion-change .is-current {
    color: var(--ink-soft);
    text-decoration: line-through;
}

.research-suggestion-change .is-proposed {
    font-weight: 700;
    color: var(--forest-dark);
}

.research-suggestion-reason {
    margin-top: 0.3rem;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.research-suggestion-evidence {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.research-suggestion .research-notice {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
}

.research-edit-input {
    display: block;
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

.research-suggestion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.research-suggestion-actions .btn {
    width: auto;
    margin: 0;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
}

.research-chip.is-conf-high { background: rgba(47, 74, 52, 0.16); color: var(--forest-dark); }
.research-chip.is-conf-medium { background: rgba(185, 139, 62, 0.2); color: #7a5a1c; }
.research-chip.is-conf-low { background: rgba(163, 53, 42, 0.12); color: #a3352a; }

/* The Research button sits beside Make PDF, in reading mode only. */
.node-edit-dialog:not(.is-view-mode) .node-edit-research-btn {
    display: none;
}

/* Connected extensions page. */
.ext-card { max-width: 40rem; }
.ext-status { margin: 0.4rem 0 0.8rem; font-weight: 600; color: var(--forest); }
.ext-help { margin: 0.8rem 0 0; color: var(--ink-soft); }
#ext-install-btn { margin-top: 0.8rem; }
.ext-heading { margin: 1.6rem 0 0.6rem; font-size: 1.1rem; color: var(--forest); }

/* ===== Search everything ===== */
.research-catalogue-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}

.research-catalogue-bar .research-filter {
    flex: 1 1 16rem;
}

.research-everything-btn {
    width: auto;
    margin: 0;
    padding: 0.55rem 1.3rem;
}

.research-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
}

.research-type {
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--ink);
    cursor: pointer;
}

.research-everything-form .research-again {
    align-self: flex-end;
}

.research-plan {
    max-width: 1100px;
    margin: 0.4rem auto 0;
}

.research-plan-row {
    display: block;
    padding: 0.35rem 0;
    font-size: 0.9rem;
    cursor: pointer;
}

.research-plan-row.is-skipped {
    color: var(--ink-soft);
}

.research-plan-row .research-chip {
    margin-left: 0.4rem;
}

.research-progress {
    margin: 1rem 0 0.4rem;
}

.research-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(47, 74, 52, 0.12);
    overflow: hidden;
}

.research-progress-fill {
    height: 100%;
    width: 0;
    background: var(--forest);
    transition: width 0.25s;
}

.research-progress.is-done .research-progress-bar {
    opacity: 0.35;
}

.research-result-why {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.research-why-chip {
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(90, 85, 72, 0.09);
    font-size: 0.72rem;
    color: var(--ink-soft);
}

.research-statuses {
    margin-top: 1.4rem;
}

.research-status-list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.86rem;
    line-height: 1.7;
}

.research-status-list li.is-error {
    color: #a3352a;
}

/* ===== Research: Search by place (the Map tab) ===== */
.research-map {
    position: absolute;
    left: 0;
    right: 0;
    top: 6.6rem;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    color: var(--ink);
    cursor: auto;
    user-select: text;
}
.research-map[hidden] { display: none; }
.tree-blank-view[data-view="export"] .research-map { display: none; }

.rmap { display: flex; height: 100%; }
.rmap-side {
    width: 320px;
    flex: none;
    overflow-y: auto;
    padding: 1rem;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.rmap-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rmap-canvas { flex: 1; min-height: 240px; background: #e8e4d8; }

.rmap-pin-card { display: flex; flex-direction: column; gap: 0.3rem; min-width: 11rem; }
.rmap-pin-title { font-weight: 700; color: var(--ink); }
.rmap-pin-sub { font-size: 0.82rem; color: var(--ink-soft); }
.rmap-pin-btn { margin-top: 0.3rem; align-self: flex-start; }

.rmap-field { display: flex; flex-direction: column; gap: 0.3rem; }
.rmap-field label { font-weight: 600; font-size: 0.85rem; }
.rmap-field input,
.rmap-field select {
    font: inherit;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    min-width: 0;
}
.rmap-hint { margin: 0; font-size: 0.78rem; color: var(--ink-soft); }
.rmap-years, .rmap-radius, .rmap-add { display: flex; align-items: center; gap: 0.4rem; }
.rmap-years input, .rmap-radius input[type="number"] { width: 5.5rem; }
.rmap-radius input[type="range"] { flex: 1; padding: 0; }
.rmap-add input { flex: 1; }
.rmap-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; max-height: 9rem; overflow-y: auto; }
.rmap-suggest { display: flex; flex-direction: column; }
.rmap-suggest-item {
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 0.4rem 0.2rem;
    font: inherit;
    cursor: pointer;
}
.rmap-suggest-item:hover { background: var(--cream); }
.rmap-check { font-size: 0.85rem; }
.rmap-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rmap-credit { margin: 0; font-size: 0.72rem; color: var(--ink-soft); }
.research-map-handle {
    background: #fff;
    border: 3px solid var(--forest);
    border-radius: 50%;
    cursor: ew-resize;
}

html.is-narrow .research-map { top: 6.4rem; overflow-y: auto; }
html.is-narrow .rmap { flex-direction: column; height: auto; min-height: 100%; }
html.is-narrow .rmap-side { width: auto; border-right: 0; border-bottom: 1px solid var(--border); }
html.is-narrow .rmap-canvas { flex: none; height: 320px; }

/* ===== Board cards: link icon, delete corner, undo/redo, right-click menu ===== */
.notes-record-www {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--forest);
    font: 700 0.72rem/1 'Segoe UI', -apple-system, Helvetica, Arial, sans-serif;
    letter-spacing: 0.02em;
    color: var(--forest);
    background: #fff;
}

.notes-item .notes-card-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(42, 39, 31, 0.08);
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
}

.notes-item .notes-card-del:hover {
    background: #b23a2e;
    color: #fff;
}

/* The corner button replaces the round one outside the card. */
.notes-item-web-clip .notes-delete,
.notes-item-record .notes-delete,
.notes-item-map-area .notes-delete,
.notes-item-pdf .notes-delete {
    display: none !important;
}

.notes-item-pdf {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(31, 51, 36, 0.12);
    overflow: hidden;
}

.notes-item-pdf .notes-record-thumb span {
    font: 700 0.9rem 'Segoe UI', -apple-system, Helvetica, Arial, sans-serif;
    color: #b23a2e;
}

.notes-item-web-clip .notes-record-body,
.notes-item-record .notes-record-body,
.notes-item-pdf .notes-record-body {
    padding-right: 22px;
}

.notes-undo {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--paper);
}

.notes-undo button {
    border: 0;
    background: none;
    padding: 0.28rem 0.6rem;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ink);
}

.notes-undo button:hover:not(:disabled) { background: var(--cream); }
.notes-undo button:disabled { opacity: 0.35; cursor: default; }
.notes-canvas.is-readonly .notes-undo { display: none; }

.notes-ctx {
    position: fixed;
    z-index: 10000;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', -apple-system, Helvetica, Arial, sans-serif;
}

.notes-ctx button {
    text-align: left;
    background: none;
    border: 0;
    padding: 0.5rem 0.7rem;
    font: inherit;
    font-size: 0.88rem;
    border-radius: 5px;
    cursor: pointer;
    color: var(--ink);
}

.notes-ctx button:hover:not(:disabled) { background: var(--cream); }
.notes-ctx button:disabled { color: #999; cursor: default; }

/* In list mode each row has its own delete button. */
.notes-list .notes-card-del { display: none; }

/* ===== External sources: logo boxes and cards ===== */
.research-logo {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.research-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
}

.research-logo-mono {
    font: 700 0.95rem/1 'Segoe UI', -apple-system, Helvetica, Arial, sans-serif;
    letter-spacing: 0.02em;
    color: var(--forest);
    background: rgba(47, 74, 52, 0.1);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.research-source-top { align-items: center; }
.research-source-top .research-source-name { flex: 1; min-width: 0; }

.research-external { margin-top: 2rem; }

.research-ext-intro {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
    max-width: 48rem;
}

.research-recommended {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.2rem 1.2rem 1.4rem;
    margin-bottom: 1.6rem;
    box-shadow: 0 1px 3px rgba(31, 51, 36, 0.06);
}

.research-recommended[hidden] { display: none; }

.research-recommended-title {
    margin: 0 0 1rem;
    color: var(--gold);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
}

.research-ext-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.9rem;
}

.research-ext-card {
    position: relative;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1rem 2.4rem 1rem 1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(31, 51, 36, 0.06);
    color: var(--ink);
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.research-ext-card:hover,
.research-ext-card:focus-visible {
    border-color: var(--forest);
    box-shadow: 0 6px 18px rgba(31, 51, 36, 0.14);
    transform: translateY(-1px);
    outline: none;
}

.research-ext-card .research-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
}

.research-ext-card.is-featured {
    border-color: var(--gold);
    box-shadow: 0 1px 3px rgba(185, 139, 62, 0.18);
}

.research-ext-card.is-featured:hover,
.research-ext-card.is-featured:focus-visible {
    border-color: var(--gold);
    box-shadow: 0 6px 18px rgba(185, 139, 62, 0.3);
}

.research-ext-star {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(31, 51, 36, 0.25);
}

.research-ext-body { min-width: 0; flex: 1; }

.research-ext-name {
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.25;
    color: var(--forest-dark);
}

.research-ext-region {
    margin-top: 0.1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.research-ext-blurb {
    margin: 0.45rem 0 0.6rem;
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

.research-ext-foot { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.research-ext-go {
    position: absolute;
    top: 0.8rem;
    right: 0.9rem;
    font-size: 1.05rem;
    color: var(--ink-soft);
}

.research-ext-card:hover .research-ext-go { color: var(--forest); }

/* ===== External Sources: the country / state / type bar ===== */
.research-ext-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin: 0 0 0.6rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.research-ext-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 200px;
    min-width: 0;
}

.research-ext-field span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.research-ext-field input,
.research-ext-field select {
    font: inherit;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    min-width: 0;
}

.research-ext-field input:disabled { background: var(--cream); color: var(--ink-soft); }

.research-ext-clear { white-space: nowrap; }

.research-ext-count {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.research-ext-advanced {
    display: block;
    margin: 0 0 1rem;
    font-size: 0.85rem;
}

.research-ext-loaded {
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    color: var(--forest-dark);
    background: rgba(47, 74, 52, 0.08);
    border-radius: 8px;
}


/* ===== Place of birth / death: suggestions under the field ===== */
.place-suggest {
    display: flex;
    flex-direction: column;
    margin-top: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.place-suggest[hidden] { display: none; }

.place-suggest-item {
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 0.55rem 0.8rem;
    font: inherit;
    font-size: 0.92rem;
    color: var(--ink);
    cursor: pointer;
}

.place-suggest-item:last-child { border-bottom: 0; }
.place-suggest-item:hover { background: var(--cream); }

/* Every text box in the Edit Person form sits on its own line, whatever it is inside. */
.node-edit-dialog .form-row > input[type="text"],
.node-edit-dialog .form-row > input[type="date"],
.node-edit-dialog .form-row > input[type="number"],
.node-edit-dialog .form-row > select {
    width: 100%;
    box-sizing: border-box;
}

/* ---------- Create Book wizard ---------- */

.book-wizard-main {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.book-wizard-card {
    max-width: 560px;
    position: static;
}

.book-wizard-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.book-wizard-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 0.75rem;
    font-family: inherit;
    cursor: pointer;
}

.book-wizard-type:hover { border-color: var(--forest); }

.book-wizard-type.is-selected {
    background: #fff;
    border-color: var(--forest);
    box-shadow: 0 0 0 1px var(--forest);
}

.book-wizard-type-label { font-weight: 600; }
.book-wizard-type-dims { font-size: 0.82rem; color: var(--ink-soft); }

.book-wizard-other-dims { margin-bottom: 1.25rem; }
.book-wizard-other-dims[hidden] { display: none; }

.book-wizard-yesno {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.book-wizard-title-options { margin-top: 1rem; }

.book-wizard-hint {
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.book-wizard-select-all {
    margin-bottom: 0.6rem;
    font-size: 0.92rem;
}

.book-wizard-person-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.book-wizard-image-preview img {
    max-width: 160px;
    max-height: 120px;
    border-radius: 8px;
    margin-top: 0.5rem;
}

.book-image-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 1rem 0;
    max-height: 300px;
    overflow-y: auto;
}

.book-image-picker-tile {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: none;
    aspect-ratio: 1;
}

.book-image-picker-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-image-picker-tile:hover { border-color: var(--forest); }

/* ---------- Book editor ---------- */

.book-editor-layout {
    display: flex;
    align-items: flex-start;
}

.book-editor-toolbar {
    position: sticky;
    top: 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    width: 140px;
    box-sizing: border-box;
}

.book-editor-toolbar.is-readonly { display: none; }

.book-editor-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.8rem 0.5rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    text-align: center;
}

.book-editor-tool:hover { border-color: var(--forest); background: #fff; }
.book-editor-tool-icon { color: var(--forest); }

.book-editor-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
}

.book-editor-page {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(31, 51, 36, 0.15);
    flex-shrink: 0;
}

/* One of these sits after every page -- including the last, so it also
   serves as the "add a page" control at the bottom of the whole book. */
.book-editor-add-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px dashed var(--border);
    background: var(--paper);
    color: var(--forest);
    cursor: pointer;
    flex-shrink: 0;
}

.book-editor-add-page:hover {
    border-color: var(--forest);
    background: #fff;
}

.book-editor-item {
    position: absolute;
    /* Every gesture on an item -- one-finger drag, pinch, double-tap,
       press-and-hold -- is handled by this editor's own pointer-event code,
       so the browser's own versions of all of them (page panning, page
       zoom, double-tap-to-zoom, the text-selection magnifier, an image's
       "Save Image" callout) need to be switched off here, or they compete
       with and sometimes swallow the gesture before our own code sees it. */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Same reasoning for the corner/rotate handles, the delete button and the
   add-page button. */
.book-editor-handle,
.book-editor-delete,
.book-editor-add-page {
    touch-action: none;
}

/* Only pictures and the tree crop to their frame -- text and a person's
   details must never be silently clipped just because the box estimated for
   them ran short; better it visibly overflows and gets resized than a
   person's details look incomplete. */
.book-editor-item-image,
.book-editor-item-person-photo,
.book-editor-item-tree-image,
.book-editor-item-tree {
    overflow: hidden;
}

.book-editor-item.is-selected {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* A tree object in "pan mode" (double-click it) gets its own highlight,
   distinct from the ordinary selection outline, and a move cursor over the
   map itself to signal that dragging now pans the map, not the object. */
.book-editor-item-tree.is-tree-panning {
    outline: 2px dashed var(--gold);
    outline-offset: 2px;
}

.book-editor-item-tree.is-tree-panning .book-editor-tree-frame {
    cursor: move;
}

/* Same idea for a picture (title page, back cover, or any added image): a
   red highlight in pan mode instead of the tree's gold, so the two are easy
   to tell apart at a glance. */
.book-editor-item-image.is-image-panning {
    outline: 2px dashed #c0392b;
    outline-offset: 2px;
}

.book-editor-item-image.is-image-panning img {
    cursor: move;
}

.book-editor-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.book-editor-item-person-photo img { border-radius: 50%; }

.book-editor-tree-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--paper);
    /* auto, not none: the wheel needs to reach this element to zoom the tree.
       Its own contents (lines, node tiles) stay pointer-events:none, so
       nothing inside is individually clickable -- only the frame as a whole
       responds, the same as any other item. */
}

.book-editor-tree-content {
    position: absolute;
    left: 0;
    top: 0;
}

.book-editor-tree-lines {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}

.book-editor-tree-node {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.75rem;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.2rem;
    box-sizing: border-box;
    pointer-events: none;
}

.book-editor-heading-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(1.4rem * var(--book-item-scale, 1));
    text-align: center;
    color: var(--forest);
}

.book-editor-text-text {
    width: 100%;
    height: 100%;
    font-size: calc(0.95rem * var(--book-item-scale, 1));
    color: var(--ink);
    overflow: hidden;
}

/* A double-click on any piece of a book object's text turns just that piece
   into a normal editable field -- the same highlight for a whole heading and
   for one row's value inside a person's profile. */
.is-text-editing {
    cursor: text;
    outline: 1px dashed var(--accent-blue);
    outline-offset: 2px;
    background: rgba(37, 99, 235, 0.06);
    /* The parent .book-editor-item turns off text selection and iOS's
       press-and-hold callout so they never steal a drag or a long-press --
       but the one field actually being edited needs both back, or there is
       no way to place a caret, select a word, or get iOS's copy/paste menu. */
    touch-action: auto;
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
}

/* height is deliberately auto, not 100%: with a fixed height, a CSS
   multi-column block that runs out of room doesn't wrap downward, it opens
   extra columns sideways past the page edge -- invisible without scrolling
   right, which is how a person's details went missing. Auto height lets the
   browser balance everything into exactly `columns` columns however tall
   that needs to be, so nothing is ever off-page. */
.book-editor-person-body {
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
}

/* A book page holds far more people/detail per page than the roomy edit
   dialog these .view-* classes were designed for, so everything here is
   scaled well down from the shared base styles -- smaller text, and much
   tighter spacing between rows and sections. */
.book-editor-person-body h3 {
    font-size: 0.85rem;
    margin: 0 0 0.3rem;
}

.book-editor-person-body .view-section-title {
    font-size: 0.72rem;
    margin: 0.5rem 0 0.15rem;
    padding-bottom: 0.1rem;
}

.book-editor-person-body .view-section-title:first-child { margin-top: 0; }

.book-editor-person-body .view-sub-title {
    font-size: 0.55rem;
    margin: 0.35rem 0 0.1rem;
}

.book-editor-person-body .view-row {
    grid-template-columns: minmax(0, 5rem) minmax(0, 1fr);
    gap: 0.15rem 0.4rem;
    padding: 0.08rem 0;
}

.book-editor-person-body .view-row-label,
.book-editor-person-body .view-row-value {
    font-size: 0.55rem;
}

.book-editor-person-body .view-media { padding: 0.15rem 0; }
.book-editor-person-body .view-media-grid { gap: 0.2rem; margin-top: 0.1rem; }

/* ----- Selection handles: same math as the notes canvas's, redrawn to
   match the book editor's own visual style. ----- */

.book-editor-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--paper);
    border: 2px solid var(--accent-blue);
    border-radius: 50%;
    display: none;
    pointer-events: auto;
}

.book-editor-item.is-selected .book-editor-handle,
.book-editor-item.is-selected .book-editor-rotate-stem,
.book-editor-item.is-selected .book-editor-delete {
    display: block;
}

.book-editor-handle-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.book-editor-handle-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.book-editor-handle-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.book-editor-handle-se { right: -6px; bottom: -6px; cursor: nwse-resize; }

.book-editor-rotate-stem {
    position: absolute;
    left: 50%;
    top: -28px;
    width: 1px;
    height: 22px;
    background: var(--accent-blue);
    display: none;
}

.book-editor-rotate {
    left: 50%;
    top: -34px;
    margin-left: -6px;
    cursor: grab;
}

.book-editor-delete {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    display: none;
}