/* Self-hosted webfonts. Subsets:
   - Cormorant Garamond: latin + latin-ext (covers macron diacriticals like ā, Ā, ē, ī, ō, ū). */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --parchment: #f5ecd9;
  --parchment-dark: #e8dcc0;
  --ink: #000000;
  --ink-light: #1a1a1a;
  --turquoise: #3d9ca3;
  --gold: #c9a961;
  --gold-deep: #a88838;
  /* R8: darker gold reserved for small text on parchment so it clears ~4.5:1
     contrast where --gold-deep (decorative) would be too light. */
  --gold-text: #7a601f;
  --rose: #b8595e;
  --glass: rgba(246, 237, 216, 0.76);
  --glass-strong: rgba(246, 238, 220, 0.92);
  --line-soft: rgba(0,0,0, 0.18);
  --shadow-soft: 0 4px 20px rgba(0,0,0, 0.08);
  --shadow-strong: 0 18px 46px rgba(0,0,0, 0.16);
  --b-nahid: #4a9fa6;
  --b-assad: #c47c52;
  --b-hamid: #9b6fa6;
  --b-homa:  #5e9e7e;
  --b-nader: #7080b8;
  --b-core:  #c9a961;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* R5 visual-system tokens. Button tiers + modal rhythm so primary,
     secondary, and family-access controls read at a glance without new colors. */
  --btn-primary-bg: var(--gold-deep);
  --btn-primary-bg-hover: #95772f;
  --btn-primary-fg: #fff8e8;
  --btn-secondary-bg: rgba(255,255,255,0.62);
  --btn-secondary-bg-hover: rgba(201,169,97,0.2);
  --btn-family-bg: rgba(61,156,163,0.14);
  --btn-family-bg-hover: rgba(61,156,163,0.24);
  --btn-family-fg: var(--ink);
  --btn-family-border: rgba(61,156,163,0.55);
  --focus-ring: 2px solid var(--gold-deep);
  --modal-padding: 36px 44px 32px;
  --modal-gap: 14px;
  --touch-min: 44px;
}

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

html, body { height: 100%; height: 100dvh; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: var(--ink);
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.35), transparent 34%),
    linear-gradient(150deg, #f6edd8 0%, #ede3c8 100%);
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.site-icon {
  width: 1.05em;
  height: 1.05em;
  display: inline-block;
  vertical-align: -0.16em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(18px + var(--safe-top)) 0 14px;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(246,237,216,0.97) 60%, transparent);
}

.title .farsi {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  color: var(--ink);
  line-height: 1.2;
}

.title .ornament {
  color: var(--gold);
  letter-spacing: 12px;
  font-size: 15px;
  margin: 4px 0 2px;
}

.title .english {
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-light);
  opacity: 0.85;
}

.controls-left,
.controls-right,
#search-dock,
#focus-strip,
#mobile-actions,
#zoom-controls {
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(201,169,97,0.22);
  box-shadow: var(--shadow-soft);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .controls-left,
  .controls-right,
  #search-dock,
  #focus-strip,
  #mobile-actions,
  #zoom-controls,
  #panel,
  .modal,
  #modal-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .controls-left,
  .controls-right,
  #search-dock,
  #focus-strip,
  #mobile-actions,
  #zoom-controls {
    background: rgba(246, 238, 220, 0.94);
  }

  #panel,
  .modal {
    background: rgba(247, 240, 224, 0.98);
  }

  #modal-backdrop {
    background: rgba(0,0,0, 0.42);
  }
}

.controls-left {
  position: fixed;
  top: max(24px, calc(var(--safe-top) + 8px));
  left: max(24px, calc(var(--safe-left) + 12px));
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 218px;
  padding: 8px;
  border-radius: 12px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.controls-left {
  display: none;
}

/* Stacked below the masthead using measured heights, not magic numbers.
   syncChromeMetrics in app.js writes --header-h / --tools-h; the fallbacks
   match the old hardcoded values so the layout still holds before JS runs
   (and if it never does). The masthead grows when the Farsi title wraps, so
   a fixed 92px collided with the English subtitle. */
.controls-right {
  position: fixed;
  top: max(calc(var(--header-h, 118px) + 8px), calc(var(--safe-top) + 78px));
  left: 50%;
  right: auto;
  z-index: 120;
  display: flex;
  align-items: stretch;
  width: auto;
  max-width: min(920px, calc(100% - 48px));
  padding: 8px;
  border-radius: 14px;
  max-height: none;
  overflow: visible;
  transform: translateX(-50%);
  transition: opacity 0.22s;
  pointer-events: auto;
}

.controls-right .btn {
  pointer-events: auto;
}

#mobile-actions,
#zoom-controls,
#nav-hint {
  display: none;
}

#zoom-controls {
  position: fixed;
  right: max(18px, calc(var(--safe-right) + 12px));
  bottom: max(18px, calc(var(--safe-bottom) + 12px));
  z-index: 121;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  /* Zoom + reset are spatial controls, not text; keep them in the same physical
     order even when the page flips to RTL for Farsi. */
  direction: ltr;
}

/* Family-only surfaces hidden on the public launch. These carry an author
   display rule that would otherwise beat the [hidden] attribute, so re-assert it. */
.controls-left[hidden],
.more-branches-label[hidden],
.more-branch-buttons[hidden],
#welcome-tip .w-hint-row[hidden] {
  display: none;
}

#zoom-controls .btn {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 8px;
  font-size: 16px;
  line-height: 1;
}

#btnZoomCenter {
  gap: 6px;
  padding-inline: 12px;
}

.zoom-reset-label {
  font-size: 13px;
  line-height: 1;
}

body.panel-open .controls-right { opacity: 0; pointer-events: none; }

@media (max-width: 820px) and (min-width: 641px) {
  body.panel-open .controls-right {
    right: 24px;
    opacity: 1;
    pointer-events: auto;
  }
}

#branch-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: stretch;
}

#search-dock {
  position: fixed;
  top: max(calc(var(--header-h, 118px) + var(--tools-h, 56px) + 16px), calc(var(--safe-top) + 144px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: min(620px, calc(100% - 48px));
  padding: 8px;
  border-radius: 13px;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2,0.8,0.2,1);
}

/* While any modal is open, slide the dock up and out of the way so it can't
   cover modal close buttons or titles on short modals. The dock animates back
   in when the modal closes. */
body.modal-open #search-dock {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-24px);
}

body.modal-open .controls-left,
body.modal-open .controls-right,
body.modal-open #mobile-actions,
body.modal-open #nav-hint,
body.modal-open #profile-hint,
body.modal-open #zoom-controls {
  opacity: 0;
  pointer-events: none;
}

.search-dock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

#search-pick {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#search-pick[hidden] {
  display: none !important;
}

#search-hint {
  font-size: 13px;
  color: var(--ink-light);
  opacity: 0.9;
  min-height: 1.1em;
  padding: 0 2px;
}

#search-hint[hidden] {
  display: none !important;
}

.search-pick-item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  width: 100%;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(168,136,56,0.3);
  color: var(--ink);
  padding: 8px 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-height: 52px;
}

.search-pick-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--pick-accent, var(--gold));
  background: color-mix(in srgb, var(--pick-accent, var(--gold)) 14%, white);
  border: 1.5px solid var(--pick-accent, var(--gold));
  background-size: cover;
  background-position: center;
}

.search-pick-avatar.has-photo {
  color: transparent;
}

.search-pick-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.search-pick-name {
  font-size: 17px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-pick-sub {
  font-size: 12.5px;
  letter-spacing: 0.3px;
  color: var(--ink-light);
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-pick-item:hover,
.search-pick-item:focus {
  background: rgba(201,169,97,0.2);
  border-color: var(--gold);
  outline: none;
}

.search-pick-item.active {
  background: rgba(201,169,97,0.24);
  border-color: var(--gold);
  outline: var(--focus-ring);
  outline-offset: -2px;
}

#personSearch {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(168,136,56,0.28);
  background: rgba(255,255,255,0.74);
  color: var(--ink);
  border-radius: 11px;
  padding: 10px 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  min-height: var(--touch-min);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

/* Strip the native iOS/WebKit search decorations (magnifier, clear button,
   results dropdown affordance) so the field reads as part of the site's
   own type system rather than an OS search box. */
#personSearch::-webkit-search-decoration,
#personSearch::-webkit-search-cancel-button,
#personSearch::-webkit-search-results-button,
#personSearch::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

#personSearch:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,169,97,0.22);
}

.btn {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(168,136,56,0.38);
  color: var(--ink);
  padding: 10px 18px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  letter-spacing: 0.4px;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.18s;
  white-space: nowrap;
  min-height: 44px;
}

.btn:hover {
  background: rgba(201,169,97,0.22);
  border-color: var(--gold);
}

.btn:active,
.p-pill:active,
.search-pick-item:active {
  transform: scale(0.97);
  background: rgba(201,169,97,0.32);
}

.btn:focus-visible,
.p-pill:focus-visible,
.search-pick-item:focus-visible,
#personSearch:focus-visible,
.finder-person-trigger:focus-visible,
.finder-person-option:focus-visible,
#finder-person-search:focus-visible,
#btnClosePersonPicker:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--gold);
}

.branch-nav-label {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-light);
  opacity: 0.72;
  padding: 2px 3px 4px;
  font-weight: 600;
}

.btn.btn-sm {
  padding: 8px 12px;
  font-size: 15px;
  letter-spacing: 0.3px;
  min-height: 44px;
}

.btn.btn-branch {
  border-inline-start: 3px solid var(--branch-color, var(--gold));
  padding-inline-start: 11px;
  text-align: left;
}

/* Match the right-rail button rhythm; keep the branch color accent on the edge. */
.controls-left .btn.btn-branch {
  white-space: normal;
  line-height: 1.2;
  min-height: var(--touch-min);
  padding: 9px 10px;
  padding-inline-start: 11px;
  font-size: 13px;
  letter-spacing: 0.3px;
  border-radius: 10px;
}

.btn.btn-branch:hover,
.btn.btn-branch:focus-visible {
  background: rgba(201,169,97,0.16);
  border-color: rgba(168,136,56,0.4);
  border-inline-start-color: var(--branch-color, var(--gold));
}

.controls-right .btn {
  white-space: normal;
  line-height: 1.2;
  min-height: var(--touch-min);
  padding: 10px 14px;
  font-size: 15px;
}

/* R5 button tiers. Primary = key actions (splash CTA, How we're related),
   secondary = quieter tools, family = log in / members (warm unlock, not alarm). */
.btn.btn-primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(168,136,56,0.26);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg);
}

.btn.btn-secondary {
  background: var(--btn-secondary-bg);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible {
  background: var(--btn-secondary-bg-hover);
}

.btn.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-light);
  text-decoration: underline;
  text-decoration-color: rgba(168,136,56,0.5);
  text-underline-offset: 3px;
  box-shadow: none;
}

.btn.btn-ghost:hover,
.btn.btn-ghost:focus-visible {
  background: rgba(201,169,97,0.12);
  border-color: transparent;
  color: var(--ink);
}

#btnMembers,
#btnLogin,
.btn.btn-family {
  background: var(--btn-family-bg);
  border-color: var(--btn-family-border);
  color: var(--btn-family-fg);
  font-weight: 600;
  box-shadow: none;
}

#btnMembers:hover,
#btnMembers:focus-visible,
#btnLogin:hover,
#btnLogin:focus-visible,
.btn.btn-family:hover,
.btn.btn-family:focus-visible {
  background: var(--btn-family-bg-hover);
  border-color: var(--turquoise);
  color: var(--btn-family-fg);
}

/* Members carries a gold edge so admins can tell it apart from Log in
   without re-introducing an alarm-red treatment. */
#btnMembers {
  border-inline-start: 3px solid var(--gold-deep);
}

/* R1: group the desktop right rail into primary / secondary / family-access
   tiers so the first glance reads as a calm hierarchy, not eight equal buttons. */
.controls-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.controls-group--secondary {
  display: none;
}

.controls-group--secondary .btn {
  opacity: 0.92;
}

.controls-group--access {
  display: none;
}

#canvas {
  width: 100%;
  height: 100%;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

#canvas:active { cursor: grabbing; }

#canvas svg {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-select: none;
}

#generation-bands,
#core-hearth {
  pointer-events: none;
}

#generation-bands {
  opacity: 0.92;
}

#overview-labels {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

body.overview-mode #overview-labels {
  opacity: 1;
  pointer-events: auto;
}

.generation-rail,
.generation-tick {
  stroke: rgba(92,70,19,0.48);
  stroke-width: 2;
}

.generation-dot {
  fill: var(--parchment);
  stroke: var(--gold-deep);
  stroke-width: 3;
}

.generation-card {
  fill: rgba(255,252,244,0.96);
  stroke: rgba(122,96,31,0.5);
  stroke-width: 1.5;
}

.generation-kicker,
.generation-context {
  font-family: 'Cormorant Garamond', serif;
  fill: var(--ink);
}

.generation-kicker {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.generation-context {
  font-size: 18px;
  fill: var(--ink-light);
  font-style: italic;
}

.generation-bands--compact .generation-kicker {
  font-size: 10px;
  letter-spacing: 0.7px;
}

.generation-bands--compact .generation-context {
  display: none;
}

.generation-bands--compact .generation-card {
  fill: rgba(250,246,235,0.9);
}

.hearth-glow-inner {
  fill: rgba(255,255,255,0.14);
  stroke: rgba(201,169,97,0.24);
  stroke-width: 1;
}

.hearth-plinth {
  fill: rgba(255,255,255,0.24);
  stroke: rgba(201,169,97,0.18);
  stroke-width: 1;
}

.person {
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.09));
  transition: opacity 0.22s, filter 0.22s;
}

body.overview-mode .person {
  opacity: 0.2;
  filter: none;
}

body.overview-mode .person .n-first,
body.overview-mode .person .n-last {
  display: none;
}

body.overview-mode .person.overview-named-person {
  opacity: 0.34;
}

.overview-person,
.overview-branch-label {
  cursor: pointer;
  color: var(--branch-color, var(--gold-deep));
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.18));
}

.overview-dot {
  fill: color-mix(in srgb, var(--branch-color, var(--gold-deep)) 82%, white);
  stroke: rgba(255,255,255,0.96);
  stroke-width: 3;
}

.overview-person::selection,
.overview-branch-label::selection {
  background: transparent;
}

.overview-person:hover .overview-dot,
.overview-person:focus-visible .overview-dot {
  stroke: var(--ink);
  stroke-width: 3.5;
}

.overview-person-label,
.overview-branch-title,
.overview-branch-count {
  font-family: 'Cormorant Garamond', serif;
  text-anchor: middle;
  paint-order: stroke fill;
  stroke: rgba(255,252,244,0.96);
  stroke-width: 4px;
  stroke-linejoin: round;
  fill: var(--ink);
  pointer-events: none;
}

.overview-person-label {
  font-size: 15px;
  font-weight: 700;
}

.overview-branch-card {
  fill: rgba(255,252,244,0.95);
  stroke: var(--branch-color, var(--gold-deep));
  stroke-width: 1.8;
}

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

.overview-branch-count {
  font-size: 12px;
  fill: var(--gold-text);
  letter-spacing: 0.4px;
}

.person:hover,
.person.active {
  filter: drop-shadow(0 5px 16px rgba(0,0,0,0.24));
}

.person:hover .cartouche,
.person.active .cartouche {
  stroke: var(--branch-color, var(--gold));
  stroke-width: 1.8;
}

.person.dimmed,
.person.focus-muted {
  opacity: 0.14;
  filter: none;
}

.person.on-path .cartouche,
.person.focus-context .cartouche,
.person.focus-core .cartouche {
  stroke: var(--branch-color, var(--gold));
  stroke-width: 1.8;
  fill: rgba(255,255,255,0.95);
}

.person.focus-core .cartouche {
  stroke: var(--gold-deep);
}

.b-core  { --branch-color: var(--b-core); }
.b-nahid { --branch-color: var(--b-nahid); }
.b-assad { --branch-color: var(--b-assad); }
.b-hamid { --branch-color: var(--b-hamid); }
.b-homa  { --branch-color: var(--b-homa); }
.b-nader { --branch-color: var(--b-nader); }

.cartouche {
  fill: rgba(255,255,255,0.94);
  stroke: var(--line-soft);
  stroke-width: 1.5;
  transition: stroke 0.22s, stroke-width 0.22s, fill 0.22s;
}

.cartouche-inner {
  fill: none;
  stroke: var(--branch-color, var(--gold));
  stroke-width: 0.9;
  opacity: 0.55;
  pointer-events: none;
}

.n-first {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
  pointer-events: none;
}

.n-last {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-style: italic;
  fill: var(--ink-light);
  text-anchor: middle;
  pointer-events: none;
  opacity: 0.95;
}

.node-core .cartouche {
  stroke: rgba(201,169,97,0.45);
  stroke-width: 1.7;
  fill: rgba(255,255,255,0.94);
}

.node-core .cartouche-inner {
  stroke-width: 1.1;
  opacity: 0.72;
}

.node-core .n-first { font-size: 22px; }
.node-core .n-last  { font-size: 13px; }

.branch-root .cartouche {
  stroke-width: 1.45;
  fill: rgba(255,255,255,0.92);
}

.branch-root .n-first {
  font-size: 20px;
}

.branch {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  opacity: 0.42;
}

.marriage {
  fill: none;
  stroke: var(--rose);
  stroke-width: 2;
  opacity: 0.8;
}

.partner {
  fill: none;
  stroke: #999;
  stroke-width: 1.3;
  stroke-dasharray: 3 7;
  opacity: 0.7;
}

.relation-link {
  transition: opacity 0.22s, stroke-width 0.22s, filter 0.22s;
}

.relation-link.link-muted {
  opacity: 0.1;
}

.relation-link.link-context {
  opacity: 0.56;
}

.relation-link.link-core {
  opacity: 0.72;
  stroke-width: 1.9;
  filter: drop-shadow(0 0 6px rgba(201,169,97,0.28));
}

.node-ex .cartouche       { fill: rgba(240,240,240,0.7); stroke: #ccc; }
.node-ex .cartouche-inner { opacity: 0.2; }
.node-ex .n-first         { fill: #999; }
.node-ex .n-last          { fill: #bbb; }

.node-unknown .cartouche       { stroke: #d0c8b8; stroke-dasharray: 5 4; fill: rgba(245,236,217,0.4); }
.node-unknown .cartouche-inner { opacity: 0.15; }
.node-unknown .n-first         { fill: #c0b8a8; font-style: italic; }

.path-highlight {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(201,169,97,0.7));
}

@media (prefers-reduced-motion: reduce) {
  .path-highlight[stroke-dasharray] { stroke-dasharray: none !important; animation: none !important; }
}

.person:focus {
  outline: none;
}

.person:focus .cartouche,
.person:focus-visible .cartouche {
  stroke: var(--branch-color, var(--gold));
  stroke-width: 2.2;
}

#panel {
  position: fixed;
  top: 0;
  right: -560px;
  width: 520px;
  height: 100%;
  background: var(--glass-strong);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-left: 1px solid rgba(201,169,97,0.25);
  box-shadow: -20px 0 60px rgba(0,0,0,0.16);
  transition: right 0.38s cubic-bezier(0.2,0.8,0.2,1), bottom 0.38s cubic-bezier(0.2,0.8,0.2,1);
  overflow-y: auto;
  z-index: 130;
  padding: 32px 34px 40px;
}

#panel.open { right: 0; }

#panel .close {
  position: absolute;
  top: 18px;
  right: 20px;
  cursor: pointer;
  font-size: 22px;
  color: var(--ink-light);
  line-height: 1;
  width: var(--touch-min);
  height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.18s;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  z-index: 2;
  pointer-events: auto;
}

#panel .close:hover {
  background: rgba(184,89,94,0.12);
  color: var(--rose);
}

#panel .close:focus-visible,
.modal .close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  background: rgba(201,169,97,0.18);
}

.panel-border {
  padding: 4px 0;
  position: relative;
}

.panel-handle {
  display: none;
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  margin: 0 auto 8px;
}

.panel-handle-hint {
  display: none;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-light);
  opacity: 0.7;
  margin-bottom: 14px;
}

.p-portrait {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--parchment-dark), #d8cda8);
  border: 2px solid rgba(201,169,97,0.5);
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 500;
  color: var(--ink);
  background-size: cover;
  background-position: center;
}

.p-portrait.has-photo {
  color: transparent;
}

.p-first { font-size: 30px; font-weight: 600; text-align: center; }
.p-last  { font-size: 16px; font-style: italic; text-align: center; color: var(--ink-light); margin-top: 3px; }
.p-fa    { font-family: 'Cormorant Garamond', serif; font-size: 22px; text-align: center; margin: 6px 0 8px; color: var(--ink-light); }
.p-relcontext {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--gold-text);
  margin: 6px 0 2px;
  font-weight: 600;
}
.p-meta  { text-align: center; font-style: italic; color: var(--ink-light); font-size: 14px; margin: 7px 0; }
.p-divider { text-align: center; color: var(--gold); margin: 16px 0; letter-spacing: 8px; opacity: 0.7; }
.p-section { margin-bottom: 18px; }

/* Login modal: name + email fields. */
.login-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.login-fields label {
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-top: 6px;
}
.login-fields input {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(168,136,56,0.32);
  background: rgba(255,255,255,0.82);
  color: var(--ink);
  border-radius: 11px;
  padding: 11px 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  outline: none;
}
.login-fields input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,169,97,0.22);
}
.login-fields input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.login-fields .btn { margin-top: 12px; align-self: stretch; }
.login-status {
  min-height: 1.2em;
  font-size: 14px;
  margin-top: 6px;
  color: var(--ink-light);
}
.login-status.sent { color: #2e7d4f; }
.login-status.error { color: #b8595e; }

/* Admin Members panel rows. */
#members-list { list-style: none; margin: 10px 0 0; padding: 0; }
.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(168,136,56,0.2);
}
.member-row:last-child { border-bottom: none; }
.member-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.member-email {
  font-size: 16px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-status {
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.member-status.pending  { color: #b8595e; }
.member-status.approved { color: #2e7d4f; }
.member-status.admin    { color: var(--gold-deep); }
.member-actions { flex: 0 0 auto; }
.member-approve { border-color: var(--gold); background: rgba(201,169,97,0.18); }

/* Logged-out prompt shown in place of a person's private detail. */
.locked-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px dashed rgba(168,136,56,0.45);
  border-radius: 12px;
  background: rgba(201,169,97,0.08);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-light);
}

.locked-note .locked-icon { font-size: 16px; opacity: 0.8; }
.locked-note span { flex: 1; min-width: 0; }
.locked-note .btn { flex: 0 0 auto; }

/* Same shape as .locked-note so the two prompts read as one family, but a
   neutral border: a missing name is an invitation, not a locked door. */
.unknown-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px dashed rgba(122,110,88,0.38);
  border-radius: 12px;
  background: rgba(122,110,88,0.06);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-light);
}

.unknown-note span { flex: 1; min-width: 0; }
.unknown-note .btn { flex: 0 0 auto; }

.p-section h3 {
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--gold-text);
  margin-bottom: 10px;
  font-weight: 600;
}

.p-section p { font-size: 16px; line-height: 1.7; }

/* Bios in family-data.js often use <strong> to highlight names and places.
   The design calls for an unaccented body — neutralize the bold weight while
   leaving the semantic tag intact (still announced as emphasis by AT). */
#p-bio strong,
#p-bio b {
  font-weight: inherit;
}
.p-section ul { list-style: none; padding: 0; font-size: 15px; line-height: 1.55; }

.p-section li {
  padding: 6px 0 6px 20px;
  padding-inline-start: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  position: relative;
}

.p-section li:last-child { border-bottom: none; }

.p-section li::before {
  content: '·';
  color: var(--gold);
  position: absolute;
  inset-inline-start: 6px;
  font-size: 16px;
  line-height: 1.3;
}

.p-section a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(168,136,56,0.7);
  transition: color 0.2s;
}

.p-section a:hover { color: var(--gold-deep); }

#p-relatives {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-link-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-link-label {
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--ink-light);
  opacity: 0.95;
  font-weight: 600;
}

.p-link-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.p-pill {
  border: 1px solid rgba(168,136,56,0.38);
  background: rgba(255,255,255,0.78);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.18s;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.p-pill:hover {
  background: rgba(201,169,97,0.22);
  border-color: var(--gold);
}

.p-pill-core {
  background: rgba(201,169,97,0.16);
}

.p-quote {
  font-style: italic;
  color: var(--ink-light);
  font-size: 15px;
  line-height: 1.65;
  border-inline-start: 3px solid var(--gold);
  padding-inline-start: 14px;
  opacity: 0.9;
}

.placeholder {
  color: var(--ink-light);
  opacity: 0.6;
  font-style: italic;
}

.reunion-meta {
  color: var(--ink-light);
  font-size: 14px;
  margin-left: 4px;
}

.p-meta,
.reunion-meta,
.r-sub,
.path-result .steps,
.placeholder {
  opacity: 0.95;
}

#modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

body.modal-open #modal-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0.97);
  /* Single source of truth for modal width — every dialog (Path Finder,
     Memories, Library, Reunions, Help, More, Splash) reads from this rule so
     they all match. Mobile width drops to 92vw via the min() fallback. */
  width: min(560px, 92vw);
  background: rgba(247,240,224,0.96);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(201,169,97,0.28);
  border-radius: 18px;
  padding: 36px 44px 32px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 28px 80px rgba(0,0,0,0.24);
  transition: all 0.26s cubic-bezier(0.2,0.8,0.2,1);
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
}

.modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%,-50%) scale(1);
}

.modal .close {
  position: absolute;
  top: 12px;
  right: 14px;
  cursor: pointer;
  font-size: 20px;
  color: var(--ink-light);
  width: var(--touch-min);
  height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.18s;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
}

.modal .close:hover {
  background: rgba(184,89,94,0.1);
  color: var(--rose);
}

.modal h2 {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
}

.modal .sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--ink-light);
  margin: 6px 0 22px;
  text-align: center;
}

/* R5: comfortable tap targets inside dialogs for elder/touch use. */
.modal .btn {
  min-height: var(--touch-min);
  padding: 12px 18px;
}

.modal .close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

#splash-tip {
  text-align: center;
}

#splash-tip .sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  line-height: 1.4;
  margin: 12px auto 18px;
  max-width: 40ch;
}

#splash-tip .splash-meta {
  font-size: 14px;
  letter-spacing: 0.3px;
  color: var(--ink-light);
  margin: -2px 0 20px;
  opacity: 0.95;
}

/* R2: three task-based first-run actions, stacked and full-width. */
.splash-actions {
  display: flex;
  flex-direction: column;
  gap: var(--modal-gap);
  margin-bottom: 16px;
}

.splash-actions .btn {
  width: 100%;
  min-height: 48px;
  font-size: 17px;
}

#splash-tip .splash-help-btn {
  display: block;
  width: fit-content;
  margin: 0 auto 16px;
  min-height: 40px;
}

.splash-guidance {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 38ch;
  margin: 0 auto;
}

.splash-guidance[hidden] {
  display: none;
}

.splash-guidance p {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-light);
  margin: 0;
}

.splash-guidance strong {
  color: var(--ink);
  font-weight: 600;
}

.splash-subscribe-wrap {
  margin: 12px auto 0;
  max-width: 38ch;
}

.splash-subscribe-wrap summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  color: var(--ink-light);
  font-size: 14px;
  letter-spacing: 0.4px;
}

.splash-subscribe-wrap summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Splash email capture stays tucked away unless someone asks for updates. */
.splash-subscribe {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--parchment-dark);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.splash-subscribe #sub-label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-light);
}
.splash-subscribe .sub-row {
  display: flex;
  gap: 8px;
}
.splash-subscribe #subName,
.splash-subscribe #subEmail {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 8px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--parchment-dark);
  border-radius: 8px;
}
.splash-subscribe #subName:focus-visible,
.splash-subscribe #subEmail:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--gold-deep);
}
.splash-subscribe #btnSubscribe {
  flex: 0 0 auto;
}
.splash-subscribe .sub-status {
  font-size: 13px;
  line-height: 1.4;
  min-height: 1.1em;
  color: var(--gold-text);
}
.splash-subscribe .sub-status.error { color: #b3261e; }
.splash-subscribe .sub-status.sent { color: var(--gold-deep); font-weight: 600; }

/* Gentle staggered entrance for the splash actions; respects reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .modal.splash-modal.open .splash-actions .btn {
    animation: splash-rise 0.4s cubic-bezier(0.2,0.8,0.2,1) both;
  }
  .modal.splash-modal.open .splash-actions .btn:nth-child(1) { animation-delay: 0.04s; }
  .modal.splash-modal.open .splash-actions .btn:nth-child(2) { animation-delay: 0.12s; }
  .modal.splash-modal.open .splash-actions .btn:nth-child(3) { animation-delay: 0.20s; }
}

@keyframes splash-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


#path-finder .row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 11px;
}

#path-finder label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--ink-light);
  text-transform: uppercase;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.finder-selection-state {
  width: fit-content;
  padding: 3px 6px;
  border: 1px solid rgba(168,136,56,0.48);
  border-radius: 999px;
  background: rgba(201,169,97,0.18);
  color: var(--gold-text);
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  line-height: 1;
}

.finder-selection-state[hidden] {
  display: none;
}

.finder-native-value {
  display: none;
}

.finder-person-trigger {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  text-align: start;
  border: 1px solid rgba(168,136,56,0.35);
  background: rgba(255,255,255,0.7);
  color: var(--ink);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.finder-person-trigger:hover {
  border-color: var(--gold-deep);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 3px rgba(201,169,97,0.14);
}

.finder-picker-open .finder-row:not(.is-selecting) {
  opacity: 0.58;
}

.finder-row.is-selecting label,
.finder-row.selection-confirmed label {
  color: var(--gold-text);
  opacity: 1;
}

.finder-row.is-selecting .finder-person-trigger {
  position: relative;
  z-index: 1;
  border: 2px solid var(--gold-deep);
  background: rgba(255,252,239,0.98);
  box-shadow:
    0 0 0 4px rgba(201,169,97,0.26),
    0 0 24px rgba(168,136,56,0.38),
    0 10px 24px rgba(90,68,21,0.12);
  transform: scale(1.012);
}

.finder-row.is-selecting .finder-person-chevron {
  transform: rotate(180deg);
}

.finder-row.selection-confirmed .finder-person-trigger {
  border-color: var(--gold-deep);
  background: rgba(255,250,229,0.96);
  box-shadow: 0 0 0 4px rgba(201,169,97,0.24), 0 0 20px rgba(168,136,56,0.28);
}

.finder-row.selection-confirmed .finder-selection-state {
  background: rgba(201,169,97,0.28);
}

.finder-person-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-person-chevron {
  color: var(--gold-text);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.18s ease;
}

.finder-person-picker {
  position: absolute;
  inset: 18px 20px 20px;
  z-index: 4;
  min-height: 0;
  margin: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(168,136,56,0.38);
  border-radius: 14px;
  background: rgba(250,246,235,1);
  box-shadow: 0 14px 34px rgba(0,0,0,0.13);
}

.finder-person-picker[hidden] {
  display: none;
}

#path-finder.finder-picker-open {
  overflow: hidden;
}

.finder-picker-heading {
  flex: 0 0 auto;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px 6px;
  color: var(--gold-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#btnClosePersonPicker {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

#btnClosePersonPicker:hover {
  background: rgba(201,169,97,0.18);
}

#finder-person-search {
  flex: 0 0 auto;
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid rgba(168,136,56,0.34);
  border-radius: 9px;
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

#finder-person-search::-webkit-search-decoration,
#finder-person-search::-webkit-search-cancel-button,
#finder-person-search::-webkit-search-results-button,
#finder-person-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.finder-person-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-top: 8px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(168,136,56,0.7) rgba(201,169,97,0.12);
  scrollbar-width: thin;
  border-radius: 10px;
}

.finder-person-list::-webkit-scrollbar {
  width: 10px;
}

.finder-person-list::-webkit-scrollbar-track {
  background: rgba(201,169,97,0.12);
  border-radius: 999px;
}

.finder-person-list::-webkit-scrollbar-thumb {
  min-height: 36px;
  border: 2px solid rgba(250,246,235,1);
  border-radius: 999px;
  background: rgba(168,136,56,0.7);
}

.finder-person-list::-webkit-scrollbar-thumb:hover {
  background: var(--gold-deep);
}

.finder-person-option {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid rgba(168,136,56,0.14);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.finder-person-option:last-child {
  border-bottom: 0;
}

.finder-person-option:hover,
.finder-person-option.selected {
  background: rgba(201,169,97,0.16);
}

.finder-option-initial {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(168,136,56,0.45);
  border-radius: 50%;
  background: rgba(255,255,255,0.72);
  color: var(--gold-text);
  font-weight: 700;
}

.finder-option-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.finder-option-name {
  overflow: hidden;
  font-size: 17px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-option-meta {
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink-light);
  font-size: 12px;
  line-height: 1.15;
  opacity: 0.72;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-option-check {
  color: var(--gold-text);
  font-size: 18px;
  font-weight: 700;
}

.finder-picker-empty {
  padding: 22px 12px;
  color: var(--ink-light);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .finder-row.selection-confirmed .finder-person-trigger {
    animation: finder-selection-confirmed 0.58s cubic-bezier(0.2,0.8,0.2,1);
  }
}

@keyframes finder-selection-confirmed {
  0% { transform: scale(1); }
  45% { transform: scale(1.018); }
  100% { transform: scale(1); }
}

.path-result {
  margin-top: 20px;
  padding: 16px 18px;
  background: rgba(201,169,97,0.13);
  border-inline-start: 3px solid var(--gold);
  font-size: 16px;
  line-height: 1.55;
  display: none;
}

.path-result.show {
  display: block;
  animation: path-result-in 0.32s cubic-bezier(0.2,0.8,0.2,1);
}

@keyframes path-result-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.path-result .summary {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.path-result .steps {
  margin-top: 10px;
  color: var(--ink-light);
  font-size: 16px;
  line-height: 1.8;
  opacity: 0.92;
}

.path-person {
  white-space: nowrap;
}

.path-role {
  color: var(--gold-text);
  font-style: italic;
}

.path-arrow {
  display: inline-block;
  margin: 0 7px;
  color: var(--gold-deep);
  font-style: normal;
}


.r-item {
  list-style: none;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid rgba(201,169,97,0.25);
  background: rgba(255,255,255,0.38);
  border-radius: 10px;
  transition: all 0.18s;
}

.r-item:hover {
  background: rgba(201,169,97,0.14);
  border-color: var(--gold);
}

.r-item a {
  display: block;
  text-decoration: none;
  color: var(--ink);
}

.r-item a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

.r-title { font-size: 20px; font-weight: 600; }

.r-sub {
  font-size: 15px;
  color: var(--ink-light);
  margin-top: 4px;
}

.r-note {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-light);
  opacity: 0.9;
}

.r-note-label {
  font-weight: 600;
}

/* Reunions with a placeholder '#' link have no real album yet. Mark them clearly
   non-clickable: muted note + no hover lift, so they don't read as broken links. */
.r-soon {
  color: var(--ink-light);
  opacity: 0.75;
  font-style: italic;
}

.r-item-soon,
.r-item-soon:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(201,169,97,0.18);
  cursor: default;
}

.empty-item {
  color: var(--ink-light);
  font-style: italic;
  text-align: center;
  padding: 20px;
}

.fatal-screen {
  max-width: 780px;
  margin: 48px auto;
  padding: 24px;
  border: 1px solid rgba(184, 89, 94, 0.35);
  border-radius: 14px;
  background: rgba(255, 250, 247, 0.94);
  color: var(--ink);
}

.fatal-details {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(43, 49, 64, 0.06);
  overflow-x: auto;
  white-space: pre-wrap;
}

#focus-strip {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(18px, calc(var(--safe-bottom) + 8px));
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(520px, calc(100% - 440px));
  padding: 11px 12px 11px 14px;
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, left 0.28s cubic-bezier(0.2,0.8,0.2,1);
}

/* The strip is only ever visible while the profile panel is open, and the
   panel is a 520px sheet pinned to the right on desktop. Centred on the whole
   viewport the strip slid underneath it and clipped "Return to Center", so
   centre it on the space the panel leaves instead. Mobile overrides this below
   (the panel is a bottom sheet there, not a side one). */
@media (min-width: 641px) {
  body.panel-open #focus-strip {
    left: 24px;
    right: calc(520px + 24px);
    width: auto;
    max-width: 520px;
    transform: none;
  }
}

body.panel-open #focus-strip {
  opacity: 1;
  pointer-events: auto;
}

body.panel-open #creator-credit {
  opacity: 0;
  pointer-events: none;
}

.focus-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#focus-eyebrow {
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1C39BB;
  font-weight: 600;
}

#focus-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 2px 10px;
  border: 1px solid rgba(168,136,56,0.38);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--ink-light);
  background: rgba(255,255,255,0.55);
}

#focus-text {
  font-size: 17px;
  color: var(--ink);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#legend {
  display: none;
  position: fixed;
  bottom: max(60px, calc(var(--safe-bottom) + 40px));
  left: max(32px, calc(var(--safe-left) + 12px));
  font-size: 14px;
  color: var(--ink);
  pointer-events: none;
  line-height: 1.9;
}

#legend .l-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#legend .l-line {
  width: 36px;
  height: 0;
  border: none;
  display: inline-block;
  flex-shrink: 0;
}

.l-married  { border-top: 3px solid var(--rose); opacity: 0.85; }
.l-coparent { border-top: 3px dotted #888; opacity: 0.85; }
.l-branch   { border-top: 3px solid var(--ink); opacity: 0.5; }

#creator-credit {
  position: fixed;
  bottom: max(20px, calc(var(--safe-bottom) + 8px));
  left: max(32px, calc(var(--safe-left) + 12px));
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--ink-light);
  opacity: 0.95;
  transition: opacity 0.2s;
  z-index: 25;
}

#creator-credit:hover { opacity: 1; }

#creator-credit .creator-name {
  color: var(--ink-light);
}

#creator-credit a {
  color: var(--ink-light);
  text-decoration: none;
  border-bottom: 1.5px solid var(--gold-deep);
  transition: color 0.2s;
}

#creator-credit a:hover { color: var(--gold-deep); }

@keyframes tap-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.person.tapped { animation: tap-pulse 0.32s ease-out; }

#welcome-tip {
  text-align: center;
}

/* R6 framing line under the Help title — task-first invitation. */
#welcome-tip .w-intro {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--gold-deep);
  margin: 6px 0 16px;
}

#welcome-tip .w-hints {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 18px;
  text-align: left;
}

#welcome-tip .w-hint-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 7px 8px;
}

#welcome-tip .w-icon {
  font-size: 20px;
  width: 30px;
  flex-shrink: 0;
  text-align: center;
  color: var(--gold-deep);
  line-height: 1.4;
}

/* Legend is secondary now: collapsed by default behind a tap-to-open summary
   so the first view of Help leads with tasks, not the line key. */
#welcome-tip .w-legend {
  text-align: left;
  margin: 6px auto 22px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(201,169,97,0.22);
  border-radius: 12px;
  max-width: 360px;
}

#welcome-tip .w-legend[open] {
  padding-bottom: 14px;
}

#welcome-tip .w-legend-row {
  margin-top: 8px;
}

#welcome-tip .w-legend-title {
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #1C39BB;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}

#welcome-tip .w-legend-title::-webkit-details-marker {
  display: none;
}

#welcome-tip .w-legend-title::after {
  content: '＋';
  float: right;
  font-weight: 600;
}

#welcome-tip .w-legend[open] .w-legend-title::after {
  content: '−';
}

#welcome-tip .w-legend-title:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

#welcome-tip .w-legend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--ink);
}

#welcome-tip .w-legend-line {
  width: 56px;
  height: 6px;
  flex-shrink: 0;
}

#welcome-tip .w-credit {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: 0.4px;
  color: var(--ink-light);
  opacity: 0.95;
}

#welcome-tip .w-credit a {
  color: var(--ink-light);
  text-decoration: none;
  border-bottom: 1.5px solid var(--gold-deep);
}

#w-begin {
  width: 100%;
}

/* R8/R7: Easy View toggle + Surprise me sit above the primary action. */
#welcome-tip .w-easy-view,
#welcome-tip .w-surprise {
  width: 100%;
  margin-bottom: 10px;
}

#pf-trace {
  width: 100%;
  margin-top: 10px;
}

#r-list,
#s-list,
#m-list,
#l-list {
  padding: 0;
}


.r-kicker {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #1C39BB;
  font-weight: 700;
  margin-bottom: 4px;
}

#btnLang {
  margin-top: 0;
  padding: 9px 16px;
  font-size: 13px;
  letter-spacing: 1.5px;
  min-height: var(--touch-min);
}

body.lang-fa #btnLang {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  font-variant: small-caps;
}

body.lang-fa .p-first,
body.lang-fa .p-last,
body.lang-fa #focus-text {
  direction: rtl;
}

body.lang-fa #personSearch {
  direction: rtl;
}

body.lang-fa .search-pick-item {
  text-align: right;
}

body.lang-fa .btn.btn-branch {
  text-align: right;
}

body.lang-fa #splash-tip .sub {
  font-size: 18px;
}

body.lang-fa #focus-chip {
  letter-spacing: 0;
}

.more-actions-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.more-actions-list .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

/* Family-only Globe entry: lock badge on the label + a quiet "log in to open"
   hint underneath so logged-out visitors know why it opens the lock screen. */
.more-actions-list .btn-locked {
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.btn-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lock-badge {
  font-size: 0.82em;
  opacity: 0.85;
}

.lock-hint {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--gold-text);
  opacity: 0.95;
}

/* Desktop toolbar Globe button: just the inline lock badge. */
.controls-right .btn-locked .lock-badge {
  margin-inline-start: 5px;
}

.more-branches-label {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(28,24,18,0.55);
}

.more-branch-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 7px;
}

.more-branch-buttons .btn-branch {
  min-height: 38px;
  padding-block: 7px;
  font-size: 12px;
}


#nav-hint {
  position: fixed;
  right: max(18px, calc(var(--safe-right) + 12px));
  bottom: max(18px, calc(var(--safe-bottom) + 12px));
  z-index: 121;
  width: min(300px, calc(100% - 36px));
  padding: 10px;
  border-radius: 14px;
  background: var(--glass-strong);
  border: 1px solid rgba(201,169,97,0.24);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#nav-hint[hidden] {
  display: none !important;
}

#nav-hint-text {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

/* R6 contextual profile hint — same glass card as #nav-hint, anchored
   bottom-left so it clears the right-hand profile sheet. */
#profile-hint {
  position: fixed;
  left: max(18px, calc(var(--safe-left) + 12px));
  bottom: max(18px, calc(var(--safe-bottom) + 12px));
  z-index: 121;
  width: min(300px, calc(100% - 36px));
  padding: 10px;
  border-radius: 14px;
  background: var(--glass-strong);
  border: 1px solid rgba(201,169,97,0.24);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 0.25s ease;
}

#profile-hint[hidden] {
  display: none !important;
}

#profile-hint-text {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

.easy-view {
  font-size: 19px;
}

.easy-view .btn {
  font-size: 19px;
  min-height: 56px;
  padding: 13px 18px;
}

.easy-view #personSearch {
  font-size: 22px;
  padding: 16px 18px;
}

.easy-view .n-first {
  font-size: 26px;
}

.easy-view .n-last {
  font-size: 17px;
}

.easy-view #focus-text {
  font-size: 19px;
}

.easy-view .p-section p,
.easy-view .p-section ul,
.easy-view .r-sub {
  font-size: 18px;
}

@media (max-width: 1000px) {
  #search-dock {
    top: max(132px, calc(var(--safe-top) + 108px));
    width: min(560px, calc(100% - 48px));
  }
}

@media (max-width: 1180px) and (min-width: 641px) {
  .controls-left,
  .controls-right {
    display: none;
  }

  #search-dock {
    width: min(560px, calc(100% - 48px));
  }

  #mobile-actions {
    position: fixed;
    left: 50%;
    bottom: max(18px, calc(var(--safe-bottom) + 12px));
    z-index: 120;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: min(560px, calc(100% - 48px));
    padding: 8px;
    border-radius: 14px;
    transform: translateX(-50%);
  }

  #zoom-controls {
    right: max(18px, calc(var(--safe-right) + 12px));
    bottom: max(86px, calc(var(--safe-bottom) + 72px));
  }

  #mobile-actions .btn {
    min-height: var(--touch-min);
    padding: 9px 10px;
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  header {
    padding: 14px 0 12px;
  }

  .title .farsi { font-size: 30px; }
  .title .english { letter-spacing: 3px; }

  #search-dock {
    top: max(126px, calc(var(--safe-top) + 112px));
    width: calc(100% - 24px);
    padding: 8px;
  }

  .controls-left {
    top: max(152px, calc(var(--safe-top) + 138px));
    left: max(12px, calc(var(--safe-left) + 8px));
    right: max(12px, calc(var(--safe-right) + 8px));
    padding: 8px 10px;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    gap: 8px;
    max-height: none;
  }

  #branch-buttons {
    flex-direction: row;
    gap: 6px;
  }

  .controls-left,
  .controls-right {
    display: none;
  }

  #mobile-actions {
    position: fixed;
    left: max(12px, calc(var(--safe-left) + 8px));
    right: max(12px, calc(var(--safe-right) + 8px));
    bottom: max(16px, calc(var(--safe-bottom) + 10px));
    z-index: 120;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
  }

  /* R8: keep the zoom buttons available on phones too (elders who can't pinch),
     parked just above the bottom action bar. Hidden while the profile sheet is
     up so it can't collide with the bottom sheet. */
  #zoom-controls {
    display: flex;
    right: max(12px, calc(var(--safe-right) + 8px));
    /* Clear the bottom nav by its measured height (--nav-h from
       syncChromeMetrics) plus the nav's own bottom inset and a 10px gap. The
       old flat 84px was shorter than nav bottom-inset + nav height, so the
       zoom dock sat on top of the Related/More buttons. */
    bottom: max(
      calc(var(--nav-h, 78px) + max(16px, calc(var(--safe-bottom) + 10px)) + 10px),
      calc(var(--safe-bottom) + 78px)
    );
  }

  body.panel-open #zoom-controls {
    display: none;
  }

  #nav-hint {
    display: none !important;
  }

  #zoom-controls .btn {
    min-height: 44px;
    padding: 8px;
    font-size: 20px;
    line-height: 1;
  }

  #btnZoomCenter {
    font-size: 18px !important;
    padding: 8px;
  }

  .zoom-reset-label {
    display: none;
  }

  #generation-bands {
    display: none;
  }

  .controls-right {
    top: auto;
    right: max(12px, calc(var(--safe-right) + 8px));
    bottom: max(88px, calc(var(--safe-bottom) + 70px));
    left: max(12px, calc(var(--safe-left) + 8px));
    width: auto;
    padding: 8px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body.panel-open .controls-right {
    right: 12px;
    opacity: 1;
    pointer-events: auto;
  }

  #btnLang {
    margin-top: 0;
  }

  .btn {
    padding: 9px 8px;
    font-size: 12px;
    letter-spacing: 0.2px;
    min-height: 44px;
  }

  .btn.btn-branch {
    padding: 9px 9px 9px 7px;
    font-size: 12px;
    line-height: 1.15;
    min-height: var(--touch-min);
  }

  .more-branch-buttons .btn.btn-branch {
    min-height: 38px;
  }

  #panel {
    top: 100vh;
    top: 100dvh;
    bottom: auto;
    right: 0;
    width: 100%;
    height: min(70vh, 560px);
    height: min(70dvh, 560px);
    border-left: none;
    border-top: 1px solid rgba(201,169,97,0.25);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.16);
    padding: 18px 22px 30px;
    padding-bottom: calc(30px + var(--safe-bottom));
  }

  #panel.open {
    right: 0;
    top: calc(100vh - min(70vh, 560px));
    top: calc(100dvh - min(70dvh, 560px));
  }

  #panel .close {
    top: 12px;
    right: 14px;
    width: 44px;
    height: 44px;
  }

  .modal .close {
    width: 44px;
    height: 44px;
  }

  .panel-handle,
  .panel-handle-hint {
    display: block;
  }

  .panel-handle {
    width: 86px;
    height: 8px;
    margin-bottom: 10px;
  }

  .p-first { font-size: 28px; }

  #legend,
  #creator-credit { display: none; }

  .modal {
    border-radius: 14px;
  }

  #path-finder {
    padding-inline: 20px;
  }

  #path-finder .row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
  }

  .finder-person-picker {
    inset: 14px;
    margin: 0;
  }

  #focus-strip {
    left: max(12px, calc(var(--safe-left) + 8px));
    right: max(12px, calc(var(--safe-right) + 8px));
    bottom: max(12px, calc(var(--safe-bottom) + 8px));
    width: auto;
    transform: none;
    padding: 10px 12px;
  }

  /* Hidden on phones. The panel is a bottom sheet here, so the strip landed on
     top of its grab handle and close button, and the sheet already carries a
     "Return to Center" chip under Core family. One control, not two. */
  body.panel-open #focus-strip {
    display: none;
    opacity: 1;
    pointer-events: auto;
    z-index: 135;
    top: calc(100vh - min(70vh, 560px) + 54px);
    top: calc(100dvh - min(70dvh, 560px) + 54px);
    bottom: auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 16px;
    /* Mobile-only: lift the Return Home strip so users notice it instead of
       hunting for a back gesture. Stronger parchment fill + gold edge. */
    background: var(--glass-strong);
    border: 1.5px solid var(--gold);
    box-shadow: 0 6px 20px rgba(122,96,31,0.28);
  }

  body.panel-open .panel-handle-hint {
    display: none;
  }

  body.panel-open #panel .p-portrait {
    margin-top: 86px;
  }

  body.panel-open #focus-chip {
    display: none;
  }

  body.panel-open #focus-eyebrow {
    font-size: 12px;
    letter-spacing: 1.1px;
    font-weight: 700;
    color: var(--gold-text);
  }

  body.panel-open #focus-text {
    font-size: 14px;
    line-height: 1.15;
    -webkit-line-clamp: 1;
    font-weight: 600;
    color: var(--ink);
  }

  body.panel-open #btnReturnCore {
    min-height: var(--touch-min);
    flex: 0 0 auto;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 700;
    background: var(--gold-deep);
    color: #fff;
    border-color: var(--gold-deep);
  }

  #focus-text {
    font-size: 14px;
  }

  .easy-view .btn {
    min-height: 56px;
    font-size: 19px;
  }

  .easy-view #mobile-actions {
    gap: 10px;
    padding: 10px;
  }
}

/* When a profile panel is open, hide surrounding chrome (branches rail, right
   toolbar, mobile actions) so the profile reads cleanly. The top
   search dock stays visible. Defined last so it overrides earlier panel-open
   rules in both desktop and mobile media queries. */
body.panel-open .controls-left,
body.panel-open .controls-right,
body.panel-open #mobile-actions {
  opacity: 0;
  pointer-events: none;
}