:root {
  /* Banyan look: pale sage page, white cards, teal and gold accents */
  --bg: #edf2ea;
  --surface: #ffffff;
  --surface-2: #e7eee4;
  --ink: #1e2a24;
  --muted: #5b6a61;
  --line: #cdd9cb;
  --bark: #6e5236;
  --leaf: #2f6b5a;
  --accent: #17706b;
  --accent-ink: #ffffff;
  --gold: #c49a3a;
  --male: #f6f9fb;
  --female: #fcf6f7;
  --warn-bg: #fff4d6;
  --warn-ink: #7a5300;
  --ok-bg: #e2f2e4;
  --ok-ink: #1f5a2a;
  --danger: #b3261e;
  --shadow: 0 1px 3px rgb(30 50 40 / 0.10), 0 4px 14px rgb(30 50 40 / 0.07);
  --radius: 10px;
  --topbar-h: 56px;
  --watermark-opacity: 0.11;
  /* Branch colours: one fixed order, largest branch first */
  --branch-1: #2a78d6; --branch-2: #eb6834; --branch-3: #1baf7a; --branch-4: #eda100;
  --branch-5: #e87ba4; --branch-6: #008300; --branch-7: #6250d6; --branch-8: #e34948; --branch-0: #9aa69e;
  /* Soft pastels for headers and tiles */
  --p-mint: #dcf2e6; --p-blush: #fae1e7; --p-sky: #dde9fa; --p-lavender: #e9e3f8; --p-butter: #faf1c8; --p-peach: #fde5d4;
  color-scheme: light;
}
/* Dark colours: follow the device unless the person picked Light or Dark
   with the switch in the menu (stored per device, see js/theme.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121815;
    --surface: #1b231f;
    --surface-2: #24302a;
    --ink: #e8efe9;
    --muted: #a3b2a8;
    --line: #33423a;
    --bark: #c79a6a;
    --leaf: #7fbfa8;
    --accent: #5cc0b5;
    --accent-ink: #0f1513;
    --gold: #d6b25a;
    --male: #1c272b;
    --female: #2a2226;
    --warn-bg: #3d3216;
    --warn-ink: #f2d27a;
    --ok-bg: #1f3524;
    --ok-ink: #9fd8a9;
    --danger: #ff8a80;
    --watermark-opacity: 0.13;
    --branch-1: #3987e5; --branch-2: #d95926; --branch-3: #199e70; --branch-4: #c98500;
    --branch-5: #d55181; --branch-6: #008300; --branch-7: #9085e9; --branch-8: #e66767; --branch-0: #6b776f;
    --p-mint: #1e3329; --p-blush: #3a252b; --p-sky: #1f2c3d; --p-lavender: #2b2639; --p-butter: #36311b; --p-peach: #3a2a1e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121815;
  --surface: #1b231f;
  --surface-2: #24302a;
  --ink: #e8efe9;
  --muted: #a3b2a8;
  --line: #33423a;
  --bark: #c79a6a;
  --leaf: #7fbfa8;
  --accent: #5cc0b5;
  --accent-ink: #0f1513;
  --gold: #d6b25a;
  --male: #1c272b;
  --female: #2a2226;
  --warn-bg: #3d3216;
  --warn-ink: #f2d27a;
  --ok-bg: #1f3524;
  --ok-ink: #9fd8a9;
  --danger: #ff8a80;
  --watermark-opacity: 0.13;
  --branch-1: #3987e5; --branch-2: #d95926; --branch-3: #199e70; --branch-4: #c98500;
  --branch-5: #d55181; --branch-6: #008300; --branch-7: #9085e9; --branch-8: #e66767; --branch-0: #6b776f;
  --p-mint: #1e3329; --p-blush: #3a252b; --p-sky: #1f2c3d; --p-lavender: #2b2639; --p-butter: #36311b; --p-peach: #3a2a1e;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  -webkit-text-size-adjust: 100%;
}
h1 { font-size: 1.5rem; margin: 0.2em 0 0.6em; }
h2 { font-size: 1.15rem; margin: 1.4em 0 0.5em; }
h3 { font-size: 0.95rem; margin: 1em 0 0.3em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
[hidden] { display: none !important; }

/* ---------- header */
.topbar {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  min-height: var(--topbar-h);
  padding: 8px max(16px, env(safe-area-inset-left));
  background: var(--surface); border-bottom: 2px solid var(--gold);
}
.brand { display: flex; align-items: center; gap: 8px; flex: none; }
.site-title { font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.search-wrap { position: relative; flex: 1; max-width: 420px; }
#search {
  width: 100%; padding: 9px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 16px;
}
#search:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }
#search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  list-style: none; margin: 0; padding: 4px; max-height: 60vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
#search-results button, .pick-list button {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; cursor: pointer;
}
#search-results li.active button, #search-results button:hover, .pick-list button:hover { background: var(--surface-2); }
#search-results .none { padding: 10px; }
nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
nav a, .linkish {
  padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--ink);
  background: none; border: 0; font: inherit; cursor: pointer;
}
nav a:hover, .linkish:hover { background: var(--surface-2); }
nav a.active { background: var(--surface-2); font-weight: 600; }
.count { display: inline-block; margin-left: 5px; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; text-align: center; }
.banner { padding: 8px 16px; background: var(--warn-bg); color: var(--warn-ink); font-size: 0.9rem; }
.who { padding: 0 16px; font-size: 0.8rem; color: var(--muted); text-align: right; }
.who:empty { display: none; }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 6px 10px; }
  .search-wrap { order: 3; flex-basis: 100%; max-width: none; }
  nav { gap: 0; }
  nav a, .linkish { padding: 6px 7px; font-size: 0.9rem; }
}

/* ---------- buttons and forms */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; min-height: 40px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); }
.btn.ghost { border-color: transparent; background: none; }
.btn.small { padding: 5px 10px; min-height: 32px; font-size: 0.88rem; }
.btn:disabled { opacity: 0.55; cursor: progress; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.icon-btn.small { width: 26px; height: 26px; font-size: 0.75rem; margin-left: 6px; vertical-align: middle; }
.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.form { display: grid; gap: 12px; }
.form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 12px; margin: 0; display: grid; gap: 10px; }
.form legend { padding: 0 6px; font-weight: 600; color: var(--muted); font-size: 0.85rem; }
.field { display: grid; gap: 4px; }
.field-label { font-size: 0.85rem; font-weight: 600; }
.field-hint { font-size: 0.8rem; color: var(--muted); }
.field input, .field select, .field textarea, .req-card input, .picker input, .member select {
  width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }
.form-note { margin: 0; color: var(--muted); }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.picker { position: relative; }
.pick-list { list-style: none; margin: 4px 0 0; padding: 0; }
.photo-preview { min-height: 60px; display: grid; place-items: center; background: var(--surface-2); border-radius: var(--radius); padding: 8px; }
.photo-preview img { max-width: 100%; max-height: 260px; border-radius: 8px; }

/* ---------- modal */
.modal {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 0; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
.modal::backdrop { background: rgb(20 12 4 / 0.45); }
.modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 1.1rem; }
.modal-body { padding: 16px; }

/* ---------- main layout */
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.topbar, .banner, .who { flex: none; }
main { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
#tree-area { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.crumbs { flex: none; }
.tree-wrap { position: relative; flex: 1; min-height: 300px; }
/* Faint banyan tree behind the family tree */
.tree-wrap::before, .help::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 420' fill='none' stroke='%235e8f80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 190Q40 150 80 130Q80 90 130 85Q150 50 200 60Q230 30 280 45Q320 25 360 48Q410 35 435 70Q485 70 495 110Q545 120 535 160Q560 195 520 210Q500 235 460 225Q430 245 390 230Q350 250 310 232Q270 250 230 232Q190 248 160 228Q120 240 100 220Q55 225 60 190Z'/%3E%3Cpath d='M120 160Q150 140 185 150M240 110Q270 95 300 105M350 100Q385 90 410 110M430 170Q460 160 480 175M170 200Q200 190 225 200M380 195Q410 185 440 197' stroke-width='2'/%3E%3Cpath d='M288 232C283 290 272 340 252 392M322 232C327 290 338 340 360 392M300 232C290 200 250 182 205 172M312 232C332 196 382 180 425 166M305 232L305 140'/%3E%3Cpath d='M130 222C127 280 134 340 130 392M165 230C168 290 160 340 166 392M200 238C197 300 204 350 200 392M232 236C236 300 228 350 232 392M382 234C379 300 386 350 382 392M415 232C418 290 410 350 416 392M448 228C445 290 452 345 448 392M482 222C485 285 478 345 482 392' stroke-width='2'/%3E%3Cpath d='M40 395Q300 383 560 395'/%3E%3C/svg%3E") no-repeat center 70% / min(900px, 92%) auto;
  opacity: var(--watermark-opacity);
}
.tree-canvas, .outline-wrap, .tree-tools { z-index: 1; }
.loading { padding: 40px 16px; text-align: center; color: var(--muted); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 16px; font-size: 0.9rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.crumbs .sep { color: var(--muted); }
.crumbs .btn { margin-left: auto; }
.tree-canvas { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.tree-svg { width: 100%; height: 100%; display: block; cursor: grab; }
.tree-svg:active { cursor: grabbing; }
.tree-tools { position: absolute; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; }
.tree-tools .icon-btn { box-shadow: var(--shadow); }

/* tree cards */
.link { }
path.link { fill: none; stroke: var(--bark); stroke-opacity: 0.55; stroke-width: 1.6; }
path.link.uncertain { stroke-dasharray: 5 4; stroke-opacity: 0.8; }
path.link.nonbio { stroke-dasharray: 2 3; }
g.node { cursor: pointer; }
g.node rect.card { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; filter: drop-shadow(0 1px 2px rgb(60 40 20 / 0.12)); }
g.node.male rect.card { fill: var(--male); }
g.node.female rect.card { fill: var(--female); }
g.node:hover rect.card, g.node:focus rect.card { stroke: var(--accent); }
g.node:focus { outline: none; }
g.node.selected rect.card { stroke: var(--accent); stroke-width: 3; }
g.node path.card-top { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; pointer-events: none; }
/* Each branch's colour on the top edge of its cards (see branches.js) */
g.node[data-branch] path.card-top { stroke: var(--branch-0); stroke-width: 4; }
g.node[data-branch="1"] path.card-top { stroke: var(--branch-1); }
g.node[data-branch="2"] path.card-top { stroke: var(--branch-2); }
g.node[data-branch="3"] path.card-top { stroke: var(--branch-3); }
g.node[data-branch="4"] path.card-top { stroke: var(--branch-4); }
g.node[data-branch="5"] path.card-top { stroke: var(--branch-5); }
g.node[data-branch="6"] path.card-top { stroke: var(--branch-6); }
g.node[data-branch="7"] path.card-top { stroke: var(--branch-7); }
g.node[data-branch="8"] path.card-top { stroke: var(--branch-8); }
g.node text { fill: var(--ink); font-size: 13px; }
g.node text.name { font-weight: 650; font-size: 13.5px; }
g.node text.sub { fill: var(--muted); font-size: 11.5px; }
g.node text.badge { fill: var(--warn-ink); font-weight: 700; font-size: 13px; }
.avatar-bg { fill: var(--surface-2); stroke: var(--line); }
.avatar-initials { fill: var(--muted) !important; font-weight: 700; font-size: 14px !important; }
path.marriage { fill: none; stroke: var(--gold); stroke-width: 2.2; }
path.marriage.divorced { stroke-dasharray: 4 3; stroke: var(--muted); }
g.ring circle { fill: var(--surface); stroke: var(--gold); stroke-width: 1.8; pointer-events: none; }
g.toggle path.stem { stroke: var(--bark); stroke-opacity: 0.55; stroke-width: 1.6; fill: none; }
g.node.spouse-card rect.card { stroke-dasharray: 5 3; }
g.edit-btn { cursor: pointer; }
g.edit-btn circle { fill: var(--surface); stroke: var(--accent); stroke-width: 1.3; }
g.edit-btn circle.edit-hit { fill: transparent; stroke: none; }
g.edit-btn path { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
g.edit-btn:hover circle:not(.edit-hit), g.edit-btn:focus circle:not(.edit-hit) { fill: var(--accent); }
g.edit-btn:hover path, g.edit-btn:focus path { stroke: var(--surface); }
g.edit-btn:focus { outline: none; }
g.toggle circle { fill: var(--surface); stroke: var(--bark); stroke-width: 1.4; }
g.toggle text { font-size: 11px !important; font-weight: 700; fill: var(--bark) !important; }
g.toggle:hover circle { fill: var(--surface-2); }
/* The open/close circles under a card are teal, like the child-count pills:
   a number when the family is closed, − when it is open. */
g.toggle circle { fill: var(--accent); stroke: none; }
g.toggle text { fill: var(--accent-ink) !important; }
g.toggle:hover circle { fill: var(--accent); filter: brightness(1.12); }
g.toggle.pill { cursor: pointer; }
g.toggle.pill rect { fill: var(--accent); stroke: none; }
g.toggle.pill text { fill: var(--accent-ink) !important; font-size: 12px !important; }
g.toggle.pill:hover rect { filter: brightness(1.12); }

/* outline */
.outline-wrap { position: absolute; inset: 0; overflow: auto; padding: 8px 12px 80px; }
.outline, .outline ul { list-style: none; margin: 0; padding: 0; }
.outline ul { padding-left: 18px; border-left: 1px dashed var(--line); margin-left: 9px; }
.outline summary { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.outline summary::marker { color: var(--bark); }
.outline-row {
  flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 2px 0;
  padding: 7px 8px; text-align: left; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; cursor: pointer;
}
li > .outline-row { margin-left: 18px; width: calc(100% - 18px); }
.outline-row:hover, .outline-row.selected { background: var(--surface-2); }
.outline-row.selected { outline: 2px solid var(--accent); }
.o-name { font-weight: 600; }
.o-spouse, .o-life { color: var(--muted); font-size: 0.88rem; }
.o-count { font-size: 0.75rem; color: var(--muted); padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; }

/* person panel */
.panel {
  position: fixed; z-index: 15; top: var(--topbar-h); right: 0; bottom: 0; width: min(380px, 100vw);
  overflow: auto; padding: 8px 18px 28px; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow);
}
@media (max-width: 760px) {
  .panel { top: auto; left: 0; width: 100%; max-height: 55dvh; border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}
.panel-head { position: sticky; top: 0; display: flex; justify-content: flex-end; margin: 0 -8px; }
.panel-head .icon-btn { width: 34px; height: 34px; }
.panel-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.panel-photo img { width: 132px; height: 132px; object-fit: cover; border-radius: 50%; border: 3px solid var(--surface-2); }
.avatar-lg { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; font-weight: 700; color: var(--muted); background: var(--surface-2); }
.panel-name { text-align: center; margin: 10px 0 2px; font-size: 1.3rem; }
.panel > .muted { text-align: center; margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: 0.78rem; color: var(--muted); }
.tag.warn { background: var(--warn-bg); color: var(--warn-ink); }
.tag.ok { background: var(--ok-bg); color: var(--ok-ink); }
.tag.lock::before { content: "🔒 "; }
.details { margin: 12px 0; display: grid; gap: 4px; }
.dl-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.dl-row dt { color: var(--muted); }
.dl-row dd { margin: 0; }
.notice { padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); font-size: 0.9rem; }
.uncertain { padding: 10px 12px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); font-size: 0.92rem; margin: 10px 0; }
.notes { white-space: pre-wrap; margin: 10px 0; }
.family ul { list-style: none; margin: 0; padding: 0; }
.family li { padding: 3px 0; }
.sources { margin: 12px 0; font-size: 0.88rem; color: var(--muted); }
.sources p { white-space: pre-wrap; }
.panel-actions { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.add-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.btn.danger.ghost { justify-self: start; }
.hint { text-align: center; margin-top: 14px; }

/* pages */
.page { max-width: 820px; margin: 0 auto; padding: 16px 16px 60px; }
.req-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 12px; display: grid; gap: 8px; box-shadow: var(--shadow); }
.req-card h3 { margin: 0; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 1rem; }
.review-photo { max-width: 220px; border-radius: 8px; }
.history, .members { list-style: none; margin: 0; padding: 0; }
.history li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.history .btn { margin-left: 8px; }
.member { display: grid; grid-template-columns: 1.2fr 1.2fr 1.4fr 0.8fr; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 700px) { .member { grid-template-columns: 1fr; } }
.empty { padding: 18px; text-align: center; background: var(--surface); border-radius: var(--radius); }
.invite-form { background: var(--surface); padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 50; transform: translate(-50%, 30px);
  max-width: min(520px, calc(100vw - 32px)); padding: 11px 16px; border-radius: 10px;
  background: var(--ink); color: var(--bg); opacity: 0; pointer-events: none; transition: 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); color: #fff; }
.toast.ok { background: var(--leaf); color: #fff; }

/* Desktop: the person panel sits beside the tree instead of over it. */
@media (min-width: 761px) {
  body.panel-open #tree-area { margin-right: min(380px, 100vw); }
}

@media (max-width: 760px) {
  .brand svg { display: none; }
  .site-title { font-size: 0.98rem; }
  .brand { flex: 1; min-width: 0; }
  nav { margin-left: 0; flex: none; }
  .banner { font-size: 0.8rem; padding: 6px 16px; }
  .tree-tools .icon-btn { width: 36px; height: 36px; font-size: 1rem; }
  .tree-tools { gap: 5px; }
}

/* Small phones: keep the header on one line; export is available on larger screens. */
@media (max-width: 480px) {
  .wide-only { display: none; }
  .site-title { white-space: normal; line-height: 1.15; }
  /* Signed in, the menu is too long to share a line with the title: give it
     its own row, scrolling sideways if needed. */
  .topbar:has(nav > :nth-child(5)) .site-title { white-space: nowrap; }
  .topbar:has(nav > :nth-child(5)) .brand { flex: 1 0 100%; }
  .topbar:has(nav > :nth-child(5)) nav {
    order: 2; flex-basis: 100%; justify-content: flex-start; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; margin: 0 -6px;
  }
  .topbar:has(nav > :nth-child(5)) nav > * { flex: none; }
}

/* Invite a relative */
.notice.ok { background: var(--ok-bg); color: var(--ok-ink); }
.notice p { margin: 0 0 8px; }
.send-invite { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.send-invite .btn { text-decoration: none; }

/* Photo framing */
.photo-editor { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.photo-frame { border-radius: 8px; touch-action: none; cursor: grab; background: var(--surface-2); max-width: 100%; }
.photo-frame:active { cursor: grabbing; }
.zoom-row { display: flex; align-items: center; gap: 8px; width: 260px; max-width: 100%; }
.zoom-row input { flex: 1; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* A member's own changes waiting for approval */
.pending-mine { border: 1px dashed var(--warn-ink); background: var(--warn-bg); border-radius: var(--radius); padding: 10px 12px; margin: 10px 0; }
.pending-mine h3 { margin: 0 0 4px; font-size: 0.95rem; }
.pending-mine details { margin: 6px 0; }
.pending-mine summary, .pending-detail summary { cursor: pointer; }

/* Dashboard */
.page:has(.stats) { max-width: 1100px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 12px; }
.stats:empty { display: none; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; }
.stat-label { background: var(--p-mint); padding: 6px 12px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); }
.stat:nth-child(6n+2) .stat-label { background: var(--p-blush); }
.stat:nth-child(6n+3) .stat-label { background: var(--p-sky); }
.stat:nth-child(6n+4) .stat-label { background: var(--p-lavender); }
.stat:nth-child(6n+5) .stat-label { background: var(--p-butter); }
.stat:nth-child(6n+6) .stat-label { background: var(--p-peach); }
.stat-value { font-size: 1.7rem; font-weight: 700; color: var(--accent); line-height: 1.1; padding: 10px 12px 0; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 0.8rem; color: var(--muted); padding: 2px 12px 10px; }
.stat-link:hover { border-color: var(--accent); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin: 12px 0; }
.dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 16px; box-shadow: var(--shadow); min-width: 0; }
.dash-card { padding-top: 0; overflow: hidden; }
.dash-card > h2 { margin: 0 -16px 10px; padding: 9px 16px; font-size: 1rem; background: var(--p-sky); border-bottom: 1px solid var(--line); }
.dash-grid > .dash-card:nth-child(6n+2) > h2 { background: var(--p-mint); }
.dash-grid > .dash-card:nth-child(6n+3) > h2 { background: var(--p-butter); }
.dash-grid > .dash-card:nth-child(6n+4) > h2 { background: var(--p-blush); }
.dash-grid > .dash-card:nth-child(6n+5) > h2 { background: var(--p-lavender); }
.dash-grid > .dash-card:nth-child(6n+6) > h2 { background: var(--p-peach); }
.dash-wide > h2 { background: var(--p-lavender); }
.dash-people.single { columns: 1; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.dash-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 2px solid var(--gold); padding: 6px 6px; }
.dash-table td { border-bottom: 1px solid var(--line); padding: 7px 6px; vertical-align: top; }
.dash-table .num { text-align: right; font-variant-numeric: tabular-nums; width: 5.5em; }
.dash-table .row-toggle { color: var(--accent); padding: 0; text-align: left; }
.dash-table .row-toggle::before { content: "▸ "; }
.dash-table .row-toggle[aria-expanded="true"]::before { content: "▾ "; }
.dash-table .names-row td { background: var(--surface-2); }
@media (max-width: 520px) { .dash-table .area, .dash-table th:last-child { display: none; } }
.dash-people { margin: 6px 0 2px; padding-left: 1.1em; columns: 2 180px; font-size: 0.88rem; }
.dash-people li { break-inside: avoid; margin: 2px 0; }
.bars { display: grid; gap: 6px; margin-top: 6px; }
.bar-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px; align-items: center; font-size: 0.88rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar { height: 14px; min-width: 2px; background: var(--accent); border-radius: 0 4px 4px 0; }
.bar-row:hover .bar { filter: brightness(1.15); }
.bar-value { font-variant-numeric: tabular-nums; color: var(--ink); }
.q-list { list-style: none; padding: 0; margin: 0 0 8px; }
.q { border-left: 3px solid var(--gold); padding: 6px 10px; margin: 8px 0; background: var(--surface-2); border-radius: 0 8px 8px 0; }
.q-text { font-weight: 600; }
.q-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.q-actions input { flex: 1; min-width: 160px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.dash-wide { margin-top: 12px; }

/* Export */
.export-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 8px 0 12px; }
.export-choices .dash-card > h2 { background: var(--p-mint); }
.export-choices .dash-card + .dash-card > h2 { background: var(--p-butter); }
.book-preview:empty { display: none; }
.book { background: #fff; color: #1e2a24; padding: 24px; border-radius: var(--radius); box-shadow: var(--shadow); margin-top: 16px; font-size: 13px; }
.book h2 { font-size: 1.3rem; color: #17706b; border-bottom: 2px solid #c49a3a; padding-bottom: 4px; margin: 0 0 12px; }
.book h3 { color: #6e5236; text-transform: none; letter-spacing: 0; font-size: 1rem; background: #faf1c8; padding: 4px 8px; border-radius: 6px; }
.bk-cover { text-align: center; padding: 40px 0 30px; }
.bk-cover h1 { font-size: 2.2rem; color: #17706b; margin: 12px 0 4px; }
.bk-sub { font-size: 1.1rem; margin: 0 0 18px; }
.bk-meta { color: #5b6a61; margin: 4px 0; }
.bk-mark { width: 220px; height: 150px; margin: 0 auto; background: no-repeat center / contain; opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 420' fill='none' stroke='%2317706b' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 190Q40 150 80 130Q80 90 130 85Q150 50 200 60Q230 30 280 45Q320 25 360 48Q410 35 435 70Q485 70 495 110Q545 120 535 160Q560 195 520 210Q500 235 460 225Q430 245 390 230Q350 250 310 232Q270 250 230 232Q190 248 160 228Q120 240 100 220Q55 225 60 190Z'/%3E%3Cpath d='M288 232C283 290 272 340 252 392M322 232C327 290 338 340 360 392M130 222C127 280 134 340 130 392M200 238C197 300 204 350 200 392M415 232C418 290 410 350 416 392M482 222C485 285 478 345 482 392M40 395Q300 383 560 395' stroke='%23c49a3a'/%3E%3C/svg%3E"); }
.bk-tree, .bk-tree ul { list-style: none; margin: 0; padding-left: 18px; }
.bk-tree { padding-left: 0; }
.bk-tree li { position: relative; padding: 1px 0 1px 12px; border-left: 1px solid #cdd9cb; }
.bk-tree .bk-name { break-inside: avoid; }
.bk-tree li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 8px; border-top: 1px solid #cdd9cb; }
.bk-tree li[data-branch] > .bk-name { border-bottom: 2px solid var(--branch-0); }
.bk-tree li[data-branch="1"] > .bk-name { border-bottom-color: #2a78d6; }
.bk-tree li[data-branch="2"] > .bk-name { border-bottom-color: #eb6834; }
.bk-tree li[data-branch="3"] > .bk-name { border-bottom-color: #1baf7a; }
.bk-tree li[data-branch="4"] > .bk-name { border-bottom-color: #eda100; }
.bk-tree li[data-branch="5"] > .bk-name { border-bottom-color: #e87ba4; }
.bk-tree li[data-branch="6"] > .bk-name { border-bottom-color: #008300; }
.bk-tree li[data-branch="7"] > .bk-name { border-bottom-color: #6250d6; }
.bk-tree li[data-branch="8"] > .bk-name { border-bottom-color: #e34948; }
.bk-name { font-weight: 650; }
.bk-years, .bk-spouse { color: #5b6a61; }
.bk-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.bk-person { display: flex; gap: 10px; border: 1px solid #cdd9cb; border-top: 3px solid #c49a3a; border-radius: 8px; padding: 8px 10px; break-inside: avoid; }
.bk-photo, .bk-initials { width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; }
.bk-initials { display: grid; place-items: center; background: #e7eee4; color: #2f6b5a; font-weight: 700; }
.bk-pname { font-weight: 700; margin-bottom: 2px; }
.bk-person dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; margin: 0; font-size: 12px; }
.bk-person dt { color: #5b6a61; }
.bk-person dd { margin: 0; }

@media print {
  @page { size: A4; margin: 14mm 12mm; }
  html, body { height: auto !important; overflow: visible !important; display: block !important; background: #fff !important; }
  body.printing > *:not(main), body.printing main > *:not(#page), body.printing #page > *:not(.book-preview) { display: none !important; }
  body.printing main, body.printing #page { display: block !important; overflow: visible !important; max-width: none !important; padding: 0 !important; }
  .book { box-shadow: none; padding: 0; margin: 0; border-radius: 0; }
  .bk-cover { min-height: 240mm; display: flex; flex-direction: column; justify-content: center; break-after: page; }
  .bk-dir { break-before: page; }
  .bk-people { grid-template-columns: 1fr 1fr; }
  .bk-gen h3 { break-after: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.person-history ul { margin: 6px 0 0; padding-left: 18px; }
.person-history li { margin: 2px 0; }
.person-history h4 { margin: 10px 0 0; font-size: 0.85rem; color: var(--ink); }
.person-history .form-note { margin-top: 2px; }

/* Balloon with key facts when hovering (or long-pressing) a box in the tree */
.hovercard { position: absolute; z-index: 20; width: min(320px, calc(100% - 16px)); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 28px rgb(30 40 30 / 0.22); padding: 12px; pointer-events: none; }
.hc-inner { display: flex; gap: 12px; align-items: flex-start; }
.hc-photo { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--surface-2);
  display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; color: var(--muted); border: 2px solid var(--gold); }
.hc-photo img { width: 100%; height: 100%; object-fit: cover; }
.hc-text { min-width: 0; font-size: 0.86rem; line-height: 1.35; }
.hc-rel { display: inline-block; background: var(--p-butter); color: var(--ink); border-radius: 999px; padding: 1px 8px; font-size: 0.76rem; font-weight: 650; margin-bottom: 4px; }
.hc-name { font-weight: 700; font-size: 1rem; }
.hc-muted { color: var(--muted); font-size: 0.8rem; }
.hc-life { color: var(--accent); font-weight: 600; margin: 2px 0 4px; }
.hc-facts { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; margin: 4px 0 0; }
.hc-facts dt { color: var(--muted); }
.hc-facts dd { margin: 0; overflow-wrap: anywhere; }
.hc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hc-branch, .hc-gen { font-size: 0.74rem; border-radius: 999px; padding: 1px 8px; background: var(--surface-2); border-left: 4px solid var(--branch-0); }
.hc-branch[data-branch="1"] { border-left-color: var(--branch-1); } .hc-branch[data-branch="2"] { border-left-color: var(--branch-2); }
.hc-branch[data-branch="3"] { border-left-color: var(--branch-3); } .hc-branch[data-branch="4"] { border-left-color: var(--branch-4); }
.hc-branch[data-branch="5"] { border-left-color: var(--branch-5); } .hc-branch[data-branch="6"] { border-left-color: var(--branch-6); }
.hc-branch[data-branch="7"] { border-left-color: var(--branch-7); } .hc-branch[data-branch="8"] { border-left-color: var(--branch-8); }
.hc-gen { border-left: none; }

/* Reminder to claim your own box */
.claim-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: #fdf3d6; color: #5b4310; border-bottom: 2px solid var(--gold, #c49a3a); }
.claim-banner[hidden] { display: none; }
.claim-banner.waiting { background: #eef6f4; color: #1d4d49; border-bottom-color: #9cc9c2; }
.claim-banner .claim-actions { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .claim-banner { background: #3a3018; color: #f3e3b8; } :root:not([data-theme="light"]) .claim-banner.waiting { background: #1e3633; color: #cfe8e3; } }
:root[data-theme="dark"] .claim-banner { background: #3a3018; color: #f3e3b8; } :root[data-theme="dark"] .claim-banner.waiting { background: #1e3633; color: #cfe8e3; }
.hovercard .hc-hint { font-size: 0.75rem; color: var(--muted); font-style: italic; margin-bottom: 4px; }

/* Admin: visits report */
.dash-card.wide { margin: 16px 0; }
.dash-card.wide h3 { font-size: 1rem; margin: 16px 0 6px; }
.dash-card.wide .dash-table td { vertical-align: top; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-head select { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.dash-card > .dash-head { margin: 0 -16px 10px; padding: 6px 16px; background: var(--p-sky); border-bottom: 1px solid var(--line); }
.dash-head h2 { margin: 0; font-size: 1rem; }

.theme-toggle { font-size: 0.95rem; }

/* Scroll view (?view=scroll): "you are here" bar across the top of the tree */
.tree-trail { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 6px 12px; font-size: 0.85rem; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line); }
.tree-trail .gen { background: var(--gold); color: #fff; border-radius: 999px; padding: 1px 8px; font-weight: 600; font-size: 0.75rem; }
.tree-trail .sep { color: var(--muted); }
.tree-trail .linkish { color: var(--accent); padding: 2px 4px; font-weight: 500; }
.tree-trail:empty { display: none; }