*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Heights set by JS (main.js) after elements render. Fallbacks until JS runs. */
:root {
  --topbar-h:  38px;
  --treenav-h: 0px;
}

body {
  font-family: system-ui, sans-serif;
  font-size: 14px;
  background: #f9f6f0;
  color: #1a1a1a;
  min-height: 100vh;
}

/* Prevent iOS auto-zoom on input focus (triggered when font-size < 16px) */
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
select,
textarea {
  font-size: 16px;
}

/* ── Topbar — fixed so it persists while scrolling ── */
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #e0d8cc;
  /* expand into the notch/status-bar area on iPhone */
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  color: #555;
}
.topbar-identity {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-logout {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  text-decoration: underline;
  font-size: 13px;
  padding: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-logout:hover { color: #c0392b; }

/* ── Tree sub-nav ── */
#treenav {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  z-index: 9;
  background: #fff;
  border-bottom: 1px solid #e0d8cc;
}
#treenav:empty { display: none; }

.treenav {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 720px;
  margin: 0 auto;
}
.treenav-tab {
  flex-shrink: 0;
  padding: 9px 14px;
  font-size: 13px;
  color: #666;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.treenav-tab.active {
  color: #2f7a4c;
  border-bottom-color: #2f7a4c;
  font-weight: 600;
}
.treenav-tab:hover { color: #2f7a4c; }

/* ── App shell ── */
#app {
  padding: 16px;
  /* push content below topbar + optional tree sub-nav */
  padding-top: calc(var(--topbar-h) + var(--treenav-h) + 16px);
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

/* ── Footer nav ── */
#footnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border-top: 1px solid #e0d8cc;
  /* safe area for notched phones */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.footnav {
  display: flex;
  height: 56px;
  max-width: 600px;
  margin: 0 auto;
}

.footnav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: #aaa;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 4px;
  transition: color 0.12s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.footnav-tab:hover,
.footnav-tab.active { color: #2f7a4c; }

.footnav-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.footnav-label { line-height: 1; }

/* ── Shared form / error ── */
.form-status { color: #c0392b; margin-top: 8px; min-height: 1.4em; }
.error { color: #c0392b; }
.loading { color: #888; }

/* ── Sign-in ── */
.view-signin {
  display: flex;
  justify-content: center;
  padding-top: 80px;
}
.signin-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 320px;
}
.signin-form h1 { font-size: 24px; }
.signin-form input {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
}
.signin-form button {
  padding: 8px 16px;
  background: #3a6b4a;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.signin-form button:disabled { opacity: 0.6; cursor: default; }

.signin-qr { width: 120px; height: 120px; margin: 20px auto 0; }
.signin-qr svg { display: block; width: 100%; height: 100%; }
.signin-qr-url { text-align: center; font-size: 11px; color: #999; margin-top: 6px; }
.signin-about { font-size: 12px; color: #888; text-align: center; margin-top: 20px; line-height: 1.6; border-top: 1px solid #e8e0d4; padding-top: 16px; }

.signin-confirm-hint { font-size: 13px; color: #888; }

.signin-confirm-fields {
  background: #f5f1ea;
  border: 1px solid #e0d8cc;
  border-radius: 8px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
}
.signin-confirm-fields dt {
  font-size: 12px;
  color: #888;
  font-weight: 500;
  white-space: nowrap;
}
.signin-confirm-fields dd {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.signin-confirm-actions {
  display: flex;
  gap: 10px;
}
.btn-primary {
  flex: 1;
  padding: 10px 16px;
  background: #3a6b4a;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { background: #2d5538; }
.btn-secondary {
  flex: 1;
  padding: 10px 16px;
  background: none;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.btn-secondary:hover { background: #f5f0e8; color: #333; }

/* ── Claim ── */
.view-claim { max-width: 600px; }
.view-claim h1 { margin-bottom: 8px; font-size: 20px; }
.view-claim p  { color: #555; margin-bottom: 12px; }
.view-claim input[type="search"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 8px;
}
.claim-results { list-style: none; }
.claim-result {
  padding: 10px 12px;
  border: 1px solid #e0d8cc;
  border-radius: 4px;
  margin-bottom: 6px;
  cursor: pointer;
  background: #fff;
}
.claim-result:hover { background: #f0ebe0; }

.claim-create-panel {
  margin-top: 16px;
  border-top: 1px solid #e8e0d4;
  padding-top: 12px;
}
.claim-create-toggle {
  background: none;
  border: none;
  color: #3a6b4a;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.claim-create-toggle.open { color: #888; text-decoration: none; }
.claim-create-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.claim-create-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.claim-create-fields input,
.claim-create-fields select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
}
.claim-create-form .btn-primary {
  align-self: flex-start;
  margin-top: 4px;
  padding: 9px 22px;
  background: #3a6b4a;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.claim-create-form .btn-primary:hover   { background: #2d5538; }
.claim-create-form .btn-primary:disabled { opacity: 0.6; cursor: default; }

/* ── Person card ── */
.person-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  min-width: 80px;
  max-width: 120px;
  text-align: center;
  transition: box-shadow 0.15s;
}
.person-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.person-card.ego-self {
  border-color: #3a6b4a;
  border-width: 2px;
  background: #f0f7f2;
}
.person-card.memorial { opacity: 0.75; }
.person-card.unknown {
  border-style: dashed;
  border-color: #ccc;
  background: #fafafa;
  color: #aaa;
  cursor: default;
}

.card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #c8ddd0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  color: #2a5a3a;
  flex-shrink: 0;
}
.ego-self .card-avatar { background: #3a6b4a; color: #fff; }
.unknown  .card-avatar { background: #e8e8e8; color: #aaa; }

.card-name  { font-size: 11px; font-weight: 600; line-height: 1.3; word-break: break-word; }
.card-dates { font-size: 10px; color: #888; }
.card-label { font-size: 10px; color: #999; font-style: italic; }
.card-profile-link {
  font-size: 10px;
  color: #3a6b4a;
  text-decoration: none;
  margin-top: 2px;
}
.card-profile-link:hover { text-decoration: underline; }

/* ── Ego hourglass ── */
.view-ego { display: flex; flex-direction: column; align-items: center; gap: 0; }

.ego-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #666;
  padding: 8px 0 16px;
}
.ctrl-sep  { color: #bbb; }
.depth-val { font-weight: 600; min-width: 16px; text-align: center; }
.depth-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.depth-btn:hover { background: #f0ebe0; }

.ego-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.ego-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Descendants: each child stacks its own subtree below */
.desc-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ── Profile ── */
.view-profile { max-width: 720px; }

.profile-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0 24px;
  border-bottom: 1px solid #e0d8cc;
  margin-bottom: 0;
}
.profile-header.memorial { opacity: 0.85; }

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #c8ddd0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #2a5a3a;
  flex-shrink: 0;
}
.profile-header.memorial .profile-avatar { background: #d0ccc8; color: #666; }

/* Avatar showing QR code — switch to white square so QR is scannable */
.profile-avatar--qr {
  background: #fff;
  border: 1px solid #e0d8cc;
  border-radius: 10px;
  overflow: hidden;
}
.profile-avatar--qr svg { display: block; width: 100%; height: 100%; }

.profile-meta { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.profile-name { font-size: 22px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; }

/* Two-block row: info on the left, QR on the right */
.profile-details-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
}
.profile-info-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.profile-qr-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.profile-nickname { font-size: 14px; color: #777; font-style: italic; }
.profile-dates    { font-size: 13px; color: #666; }
.profile-place    { font-size: 13px; color: #888; }

.profile-qr-inline {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e0d8cc;
}
.profile-qr-inline svg { display: block; width: 100%; height: 100%; }

.profile-edit-link { margin-top: 4px; align-self: flex-start; }
.badge-memorial {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  background: #e8e4df;
  border-radius: 10px;
  color: #666;
  margin-top: 4px;
}
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.action-link {
  font-size: 13px;
  color: #3a6b4a;
  text-decoration: none;
  border: 1px solid #3a6b4a;
  border-radius: 4px;
  padding: 4px 10px;
}
.action-link:hover { background: #f0f7f2; }

/* ── Tabs ── */
.tabs { margin-top: 0; }
.tab-bar {
  display: flex;
  border-bottom: 2px solid #e0d8cc;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
  background: #fff;
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 10px 16px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
}
.tab-btn:hover { color: #1a1a1a; }
.tab-btn.active { color: #3a6b4a; border-bottom-color: #3a6b4a; font-weight: 600; }

.tab-panel { padding: 20px 0; }
.tab-body  { display: flex; flex-direction: column; gap: 16px; }

/* Scrollspy sections */
.tab-scroll-body { display: flex; flex-direction: column; }
.tab-section {
  padding: 18px 0 24px;
  border-bottom: 1px solid #ede7dc;
}
.tab-section:last-child { border-bottom: none; }
.tab-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #b0a090;
  margin-bottom: 12px;
}
.tab-section-content { display: flex; flex-direction: column; gap: 0; }

.empty-state { color: #999; font-style: italic; }

/* vitals definition list */
.vitals { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 13px; }
.vitals dt { color: #888; font-weight: 600; }
.vitals dd { color: #1a1a1a; }

.bio-section h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; color: #555; }
.bio-text { font-size: 14px; line-height: 1.6; color: #333; white-space: pre-wrap; }

/* Family tab */
.family-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid #f0ebe0;
}
.family-row-tree { border-bottom: none; margin-top: 8px; flex-wrap: wrap; gap: 8px; }
.family-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a08060;
  margin-top: 14px;
  padding-bottom: 4px;
}
.fam-role { width: 60px; color: #888; font-weight: 600; flex-shrink: 0; }
.fam-link { color: #1a1a1a; text-decoration: none; }
.fam-link:hover { text-decoration: underline; color: #3a6b4a; }
.fam-tree-link { font-size: 12px; color: #999; text-decoration: none; margin-left: auto; }
.fam-tree-link:hover { color: #3a6b4a; }

/* ── Contribution items (stories, comments, timeline) ── */
.contrib-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

.contrib-item {
  padding: 14px;
  border: 1px solid #e0d8cc;
  border-radius: 6px;
  background: #fff;
}
.story-item  { border-left: 3px solid #c8ddd0; }
.comment-item{ border-left: 3px solid #d8d0c8; }
.tl-item     { border-left: 3px solid #d0d8dd; }
.tl-auto     { opacity: 0.8; }

.contrib-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.contrib-body  { font-size: 14px; line-height: 1.6; color: #333; white-space: pre-wrap; }

.item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}
.meta-author { font-weight: 600; color: #666; }
.meta-sep    { color: #ccc; }

.item-actions { display: flex; gap: 6px; margin-left: auto; }
.btn-act {
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  color: #666;
}
.btn-act:hover        { background: #f0ebe0; }
.btn-act.btn-danger   { color: #c0392b; border-color: #e0b0b0; }
.btn-act.btn-danger:hover { background: #fdf0f0; }

/* Timeline specifics */
.tl-meta   { margin-top: 0; margin-bottom: 6px; }
.tl-date   { font-size: 12px; color: #888; font-weight: 600; }
.tl-badge  {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #e8f0e8;
  color: #3a6b4a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tl-auto-note { font-size: 10px; color: #bbb; display: block; margin-top: 4px; }

/* Composers */
/* Collapsible composer toggle + panel */
.composer-wrap { margin-bottom: 4px; }

.composer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: none;
  border: 1px solid #3a6b4a;
  border-radius: 20px;
  color: #3a6b4a;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.composer-toggle:hover     { background: #f0f7f2; }
.composer-toggle.open      { background: #3a6b4a; color: #fff; border-color: #3a6b4a; }
.composer-toggle-icon      { font-size: 15px; line-height: 1; font-weight: 400; }

.composer-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, padding 0.28s ease;
  padding-top: 0;
}
.composer-panel.open {
  max-height: 600px;
  padding-top: 12px;
}

.composer {
  border: 1px solid #e0d8cc;
  border-radius: 6px;
  padding: 14px;
  background: #faf8f5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.composer-compact { padding: 12px; }
.composer-heading { font-size: 13px; font-weight: 600; color: #555; }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-row { display: flex; gap: 8px; }
.form-row .form-input,
.form-row .form-select { flex: 1; }

.form-actions { display: flex; gap: 8px; }
.btn-primary {
  padding: 7px 16px;
  background: #3a6b4a;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-primary:hover:not(:disabled) { background: #2d5538; }
.btn-cancel {
  padding: 7px 14px;
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  color: #666;
}
.btn-cancel:hover { background: #f0ebe0; }

/* Inline edit form */
.edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── QR Code ── */
.action-qr { cursor: pointer; background: none; border: none; font: inherit; }

.qr-slot { margin-top: 12px; }

.qr-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.qr-card svg {
  width: 180px;
  height: 180px;
  display: block;
}

.qr-caption {
  font-size: 12px;
  color: #666;
  text-align: center;
  max-width: 180px;
}

/* ── Relate ── */
.view-relate { max-width: 680px; }

.relate-header { margin-bottom: 20px; }
.relate-title  { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.relate-back   { display: flex; gap: 12px; }

.relate-body { display: flex; flex-direction: column; gap: 16px; }

/* Colloquial block — primary answer to "how are we related?" */
.colloquial-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: #f4f9f6;
  border: 1px solid #c0ddd0;
  border-radius: 8px;
}

.colloquial-line {
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

.colloquial-symmetric { font-size: 16px; }

.cq-name { font-weight: 700; color: #1a1a1a; }

.cq-term {
  font-weight: 700;
  color: #2f7a4c;
  font-size: 1.05em;
}

/* Type badge row */
.relate-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 4px;
}

.badge-blood   { background: #e8f5ed; color: #2f7a4c; }
.badge-marriage { background: #f5eedd; color: #7a5a2a; }

.type-formal { font-size: 13px; color: #666; }

/* Verdict cards for terminal states */
.verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 8px;
  border: 1px solid;
}

.verdict-spouses {
  background: #fdf4fb;
  border-color: #d4a8cc;
}

.verdict-icon {
  font-size: 20px;
  color: #b06090;
}

.verdict-text {
  font-size: 18px;
  font-weight: 700;
  color: #8a3a6a;
}

.verdict-gap {
  background: #fffbe6;
  border-color: #e0c860;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.verdict-gap .verdict-text { font-size: 16px; color: #8a6a00; font-weight: 700; }

.verdict-note { font-size: 13px; color: #8a6a00; }

.verdict-none {
  background: #f5f5f5;
  border-color: #ddd;
}

.verdict-none .verdict-text { font-size: 16px; color: #888; }

/* ── Common ancestor box ── */
.ancestor-box {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #d4c9b6;
  border-radius: 8px;
  background: #faf6ef;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
}

.ancestor-box-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a08060;
}

.ancestor-person-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.ancestor-person-link:hover .ancestor-name { text-decoration: underline; }

.ancestor-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e0d8cc;
  border: 2px solid #c8bba0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #6b5a3e;
  flex-shrink: 0;
}

.ancestor-name {
  font-size: 15px;
  font-weight: 700;
  color: #2f7a4c;
}

.ancestor-distances {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid #e0d4c0;
}

.ancestor-dist-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.dist-who {
  font-weight: 600;
  color: #444;
}

.dist-label {
  color: #777;
  font-size: 12px;
  line-height: 1.4;
}

.dist-count {
  font-size: 14px;
  font-weight: 700;
  color: #2f7a4c;
}

.dist-is-ancestor {
  font-style: italic;
  color: #a08060;
}

.dist-role {
  font-style: italic;
  color: #a08060;
}

.relate-fan-link {
  display: block;
  margin-top: 16px;
  padding: 10px 14px;
  background: #f0f7f2;
  border: 1px solid #b5d9c2;
  border-radius: 7px;
  color: #1a5c38;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.relate-fan-link:hover { background: #e0efe8; }

.dist-sublabel {
  font-weight: 400;
  font-size: 12px;
  color: #888;
}

/* Marriage path strip: allow the blood-relation step label to be wider and wrap */
.path-strip-marriage .path-node { max-width: 100px; }
.path-strip-marriage .path-step {
  font-size: 9px;
  max-width: 90px;
  white-space: normal;
  line-height: 1.3;
  color: #7a5a2a;
}

.path-strip {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0;
}
.path-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  max-width: 80px;
  text-align: center;
}
.path-node:hover .path-avatar { border-color: #3a6b4a; }
.path-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ddd;
  background: #f0ebe0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}
.path-name { font-size: 10px; line-height: 1.3; word-break: break-word; }
.path-step { font-size: 10px; color: #999; font-style: italic; }
.path-arrow { font-size: 16px; color: #bbb; align-self: center; padding: 0 2px; }

/* ── Audit ── */
.view-audit { max-width: 720px; }

.audit-heading {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.audit-recent-link { display: inline-block; margin-bottom: 16px; font-size: 13px; }

.audit-list { display: flex; flex-direction: column; gap: 10px; }

.audit-entry {
  padding: 12px 14px;
  border: 1px solid #e0d8cc;
  border-radius: 6px;
  background: #fff;
}

.audit-meta {
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
}

.audit-person { color: #2f7a4c; text-decoration: none; font-weight: 600; }
.audit-person:hover { text-decoration: underline; }
.audit-actor, .audit-when { color: #999; }

.audit-diffs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: 12px;
}

.diff-field {
  font-weight: 600;
  color: #555;
  grid-column: 1;
  align-self: start;
}

.diff-values {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.diff-before {
  background: #fde8e8;
  color: #c0392b;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 11px;
}

.diff-after {
  background: #e8f5ed;
  color: #2f7a4c;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 11px;
}

/* ── Tree ── */
.view-tree {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50px);
  overflow: hidden;
}

.tree-svg-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tree-loading { padding: 20px; }

.tree-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #e0d8cc;
  flex-shrink: 0;
}

.tree-root-label {
  font-size: 14px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-back { margin-left: auto; }

.tree-svg {
  display: block;
  flex: 1;
  cursor: grab;
  background: #faf8f4;
}
.tree-svg:active { cursor: grabbing; }

/* SVG node styles — targeted by class set via d3 */
.tree-node-rect {
  fill: #fff;
  stroke: #2f7a4c;
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill 0.12s;
}
.tree-node-rect:hover { fill: #f0f7f2; }
.tree-node-rect.deceased { stroke: #aaa; }
.tree-node-rect.deceased:hover { fill: #f5f5f5; }

.tree-node-name {
  font-size: 11px;
  font-weight: 600;
  fill: #1a1a1a;
  pointer-events: none;
}

.tree-node-dates {
  font-size: 10px;
  fill: #888;
  pointer-events: none;
}

.tree-link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5;
}

.tree-toggle-btn circle {
  fill: #2f7a4c;
  cursor: pointer;
  stroke: none;
}
.tree-toggle-btn circle:hover { fill: #245f3a; }

.tree-toggle-glyph {
  font-size: 13px;
  font-weight: 700;
  fill: #fff;
  pointer-events: none;
  user-select: none;
}

/* ── Home / feed ── */
.view-home { max-width: 680px; }

.home-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.home-title { font-size: 22px; font-weight: 700; flex: 1; }

.home-tree-btn { flex-shrink: 0; }

.home-search {
  display: flex;
  gap: 8px;
  margin-bottom: 36px;
}
.home-search .form-input { flex: 1; }

.home-section { margin-bottom: 40px; }

.section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 12px;
}

.section-hint { font-size: 12px; color: #aaa; margin-bottom: 10px; }

.feed-list { display: flex; flex-direction: column; gap: 8px; }

.feed-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 12px 14px;
  border: 1px solid #e0d8cc;
  border-radius: 6px;
  background: #fff;
  transition: border-color 0.12s;
}
.feed-item:hover { border-color: #b5a88e; }

.feed-item-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.feed-meta { font-size: 12px; color: #888; }

.feed-person { color: #2f7a4c; text-decoration: none; }
.feed-person:hover { text-decoration: underline; }

.meta-sep { color: #ccc; }
.meta-author { color: #666; }

/* ── Needs attention ── */
.missing-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.missing-results { display: flex; flex-direction: column; gap: 6px; }

.missing-count { font-size: 12px; color: #888; margin-bottom: 4px; }

.missing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid #e0d8cc;
  border-radius: 4px;
  background: #fff;
}
.missing-name { flex: 1; font-size: 13px; }

/* ── Search ── */
.view-search { max-width: 680px; }

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

.search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input { flex: 1; min-width: 180px; }
.search-type { width: 140px; }

.search-count { font-size: 12px; color: #888; margin-bottom: 12px; }

.search-results { display: flex; flex-direction: column; gap: 6px; }

.result-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #e0d8cc;
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  flex-wrap: wrap;
}
.result-item:hover { border-color: #b5a88e; }

.result-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.result-person         { background: #e8f5ed; color: #2f7a4c; }
.result-story          { background: #e8edf8; color: #2c5098; }
.result-comment        { background: #f5e8f5; color: #7a2f7a; }
.result-timeline_event { background: #fff3e0; color: #a06000; }

.result-title   { font-size: 13px; font-weight: 600; }
.result-excerpt { font-size: 13px; color: #555; }
.result-person  { font-size: 12px; color: #888; }

/* ── Edit / Add person ── */
.view-edit { max-width: 640px; }

.edit-heading {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
}

.edit-attribution-notice {
  margin-bottom: 20px;
  padding: 10px 14px;
  background: #fff8e6;
  border: 1px solid #e0c860;
  border-radius: 6px;
  font-size: 13px;
  color: #7a6000;
}

.edit-section {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.edit-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 4px;
}

.edit-section-maintainer {
  border: 1px solid #e0d8cc;
  border-radius: 6px;
  padding: 16px;
  background: #fffbe6;
}

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

.edit-label {
  font-size: 12px;
  font-weight: 600;
  color: #666;
}

.field-hint {
  font-size: 11px;
  color: #aaa;
}

/* Date field picker */
.date-picker-row {
  display: flex;
  gap: 6px;
}
.date-year  { flex: 2; min-width: 0; }
.date-month { flex: 3; min-width: 0; }
.date-day   { flex: 1; min-width: 0; }
.date-toggle {
  background: none;
  border: none;
  color: #2f7a4c;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 0;
  text-align: left;
}

.edit-actions {
  padding-top: 8px;
  border-top: 1px solid #e0d8cc;
  margin-top: 8px;
  align-items: center;
}

.btn-delete { margin-left: auto; }

.edit-form-main { display: flex; flex-direction: column; }

/* ── Person picker ── */
.picker-wrap {
  position: relative;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.picker-input { flex: 1; }

.picker-clear {
  flex-shrink: 0;
  width: 32px;
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  color: #999;
}
.picker-clear:hover { background: #fdf0f0; color: #c0392b; }

.picker-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 40px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  z-index: 100;
}
.picker-dropdown:empty { display: none; }

.picker-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.picker-item:hover { background: #f0f7f2; }
.picker-dates { font-size: 11px; color: #999; }

/* ── Radial ancestor fan ── */
.view-radial {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radial-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.radial-title {
  font-size: 17px;
  font-weight: 700;
}

.radial-svg-wrap {
  width: 100%;
}

.radial-svg {
  display: block;
  cursor: grab;
  touch-action: none;
}

.radial-svg:active { cursor: grabbing; }

/* ── Chart nav controls (shared by dfan + radial) ── */
/* Node click popup */
.chart-node-popup {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #d4c9b6;
  border-radius: 10px;
  padding: 16px 20px 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.14);
  min-width: 200px;
  max-width: 280px;
  text-align: center;
  z-index: 4;
  pointer-events: all;
}
.chart-node-popup[hidden] { display: none; }
.popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #aaa;
}
.popup-close:hover { color: #555; }
.popup-name {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.popup-dates {
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
}
.popup-profile-link {
  display: inline-block;
  padding: 7px 20px;
  background: #3a6b4a;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.popup-profile-link:hover { background: #2d5538; }

.chart-controls-toggle {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 1px solid #d4c9b6;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #666;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  z-index: 2;
  transition: background 0.1s, color 0.1s;
}
.chart-controls-toggle:hover  { background: #f0f7f2; color: #2f7a4c; }
.chart-controls-toggle.active { background: #2f7a4c; color: #fff; border-color: #2f7a4c; }

.chart-controls {
  position: absolute;
  bottom: 60px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}
.chart-controls[hidden] { display: none; }

.chart-zoom-strip,
.chart-dpad {
  pointer-events: all;
}

.chart-zoom-strip {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chart-dpad {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(3, 36px);
  gap: 2px;
}

.chart-nav-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #d4c9b6;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 7px;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.1s, color 0.1s;
}

.chart-nav-btn:hover {
  background: #f0f7f2;
  border-color: #2f7a4c;
  color: #2f7a4c;
}

.chart-nav-btn:active {
  background: #d8ede3;
}

/* ── Ping ── */
.ping pre {
  background: #f4f4f4;
  padding: 12px;
  border-radius: 4px;
  font-size: 12px;
  max-width: 600px;
  overflow: auto;
}

/* ── Mobile responsive ── */
@media (max-width: 600px) {
  #app {
    padding: 12px;
    padding-top: calc(var(--topbar-h) + var(--treenav-h) + 12px);
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  /* Profile header: stack avatar + meta vertically */
  .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .profile-info-block {
    text-align: left;
  }
  .profile-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Path strip: allow horizontal scroll instead of wrapping awkwardly */
  .path-strip {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  /* Ancestor box: full width */
  .ancestor-box { max-width: 100%; }

  /* Colloquial block font size */
  .colloquial-line { font-size: 14px; }

  /* Ego view: shrink node cards */
  .ego-person { min-width: 80px; max-width: 100px; }

  /* Tab bar: smaller text */
  .tab-btn { font-size: 12px; padding: 8px 10px; }

  /* Forms: full width inputs */
  .form-input, .form-textarea, .form-select { width: 100%; }

  /* Edit actions: stack buttons */
  .edit-actions { flex-direction: column; gap: 8px; }
  .btn-primary, .btn-cancel { width: 100%; text-align: center; }

  /* Search input: full width */
  .search-bar input { width: 100%; }

  /* Tree SVG: fill viewport */
  .view-tree { padding: 0; }
}