/* ═══════════════════════════════════════════════════════════════════
   THE WEBB FAMILY HISTORY — styles.css  v3
   High contrast · Modern · Inter + Playfair Display
   Accessible for all ages · Mobile-first
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap');

:root {
  /* Core palette — high contrast, WCAG AA compliant */
  --bg:         #0A0A14;
  --surface:    #141420;
  --surface2:   #1E1E2E;
  --surface3:   #28283A;
  --border:     rgba(255,255,255,0.08);
  --border-md:  rgba(255,255,255,0.16);
  --border-hi:  rgba(255,255,255,0.32);

  /* Text — full white for maximum readability */
  --text:       #FFFFFF;
  --text-sub:   rgba(255,255,255,0.80);
  --text-muted: rgba(255,255,255,0.50);

  /* Accent — amber gold, bright enough to read */
  --gold:       #F0A500;
  --gold-dim:   rgba(240,165,0,0.15);
  --gold-text:  #FFC020;

  /* Status colours */
  --green:      #34C759;
  --sage:       #30D158;
  --red:        #FF453A;

  /* Fonts */
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'Inter', system-ui, sans-serif;
  --mono:   'JetBrains Mono', monospace;

  /* Motion */
  --ease:   cubic-bezier(0.4,0,0.2,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);

  /* Layout */
  --nav-h:  72px;
  --r:      12px;
  --r-lg:   20px;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;background:var(--bg);color:var(--text);
  font-family:var(--serif);font-size:16px;font-weight:400;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
button{font-family:var(--sans);cursor:pointer;border:none;background:none}
input,textarea,select{font-family:var(--sans)}
img{display:block;max-width:100%}
.hidden{display:none!important}

/* ═══════════════════════════════════════════════════════════════════
   LOADER
═══════════════════════════════════════════════════════════════════ */
#loader{
  position:fixed;inset:0;z-index:500;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  transition:opacity 0.5s ease;
}
#loader.fade{opacity:0;pointer-events:none}
.loader-ring{
  width:40px;height:40px;border-radius:50%;
  border:3px solid rgba(240,165,0,0.2);border-top-color:var(--gold);
  animation:spin 0.85s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{font-size:0.9rem;color:var(--text-muted);letter-spacing:0.08em}

/* ═══════════════════════════════════════════════════════════════════
   SPLASH
═══════════════════════════════════════════════════════════════════ */
#splash{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  cursor:pointer;transition:opacity 1s ease;
}
#splash-bg{position:absolute;inset:0;overflow:hidden}
.splash-bg-img{
  position:absolute;inset:-5%;width:110%;height:110%;
  object-fit:cover;filter:blur(20px)brightness(0.25)saturate(0.5);
  transition:opacity 1.4s ease;opacity:0;
}
.splash-bg-img.active{opacity:1}
#splash-photo-wrap{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.splash-photo{
  position:absolute;max-width:70vw;max-height:70vh;object-fit:contain;
  border-radius:4px;box-shadow:0 24px 80px rgba(0,0,0,0.85);
  opacity:0;transition:opacity 1.4s ease;
}
.splash-photo.active{opacity:0.9;animation:kb 12s ease forwards}
@keyframes kb{0%{transform:scale(1.04)}100%{transform:scale(1.00)}}

/* Subtle vignette */
#splash::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,0.6)100%);
}
/* Grain */
#splash::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:0.6;
}

#splash-content{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  padding:40px 28px 56px;
  background:linear-gradient(to bottom,transparent 0%,rgba(8,8,15,0.85)40%,rgba(8,8,15,0.98)100%);
  text-align:center;
}
#splash-title{
  font-family:var(--serif);font-size:clamp(2rem,8vw,3.6rem);font-weight:700;
  color:#FFFFFF;letter-spacing:-0.01em;line-height:1.05;
  opacity:0;transform:translateY(16px);transition:opacity 1s ease 0.2s,transform 1s ease 0.2s;
}
#splash-title.show{opacity:1;transform:translateY(0)}
#splash-verse{
  font-family:var(--serif);font-style:italic;font-size:1rem;
  color:rgba(255,255,255,0.75);margin:12px 0 4px;
  opacity:0;transition:opacity 1s ease 0.5s;
}
#splash-verse.show{opacity:1}
#splash-ref{
  font-size:0.7rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold-text);opacity:0;transition:opacity 1s ease 0.75s;
}
#splash-ref.show{opacity:0.85}
#splash-stats{
  margin:20px 0 24px;display:flex;align-items:center;justify-content:center;gap:24px;
  opacity:0;transition:opacity 1s ease 1s;
}
#splash-stats.show{opacity:1}
.splash-stat-num{font-family:var(--serif);font-size:clamp(1.6rem,5vw,2.2rem);font-weight:700;color:var(--gold-text);line-height:1}
.splash-stat-label{font-size:0.65rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-top:4px}
.splash-divider{width:1px;height:36px;background:rgba(255,255,255,0.15)}
#splash-cta{
  font-size:0.78rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);opacity:0;transition:opacity 1s ease 1.3s;
  animation:pulse 2.8s ease-in-out infinite;
}
#splash-cta.show{opacity:1}
@keyframes pulse{0%,100%{opacity:0.3}50%{opacity:0.7}}

#flash-intro{position:fixed;inset:0;z-index:200;background:var(--bg);pointer-events:none}
.flash-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}

/* ═══════════════════════════════════════════════════════════════════
   NAME GATE
═══════════════════════════════════════════════════════════════════ */
#name-gate{
  position:fixed;inset:0;z-index:50;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 24px;opacity:0;transition:opacity 0.5s ease;
}
#name-gate.show{opacity:1}
.gate-eyebrow{
  font-size:0.7rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:20px;
}
.gate-title{
  font-family:var(--serif);font-size:clamp(2rem,7vw,3rem);font-weight:700;
  color:#FFFFFF;text-align:center;line-height:1.1;margin-bottom:8px;
}
.gate-sub{font-size:1rem;color:var(--text-sub);text-align:center;margin-bottom:36px}
.gate-search-wrap{width:100%;max-width:400px}
.gate-search{
  width:100%;background:var(--surface2);border:2px solid var(--border-md);border-radius:var(--r);
  color:#FFFFFF;font-family:var(--sans);font-size:1.1rem;font-weight:400;
  padding:16px 20px;outline:none;text-align:center;caret-color:var(--gold);
  transition:border-color 0.2s ease;
}
.gate-search:focus{border-color:var(--gold)}
.gate-search::placeholder{color:var(--text-muted)}
#gate-results{width:100%;max-width:400px;margin-top:4px;max-height:50vh;overflow-y:auto;overflow-x:hidden;border-radius:0 0 var(--r) var(--r);-webkit-overflow-scrolling:touch;}
.gate-result-item{
  padding:16px 20px;cursor:pointer;
  background:var(--surface2);border-bottom:1px solid var(--border);
  transition:background 0.15s ease;display:flex;flex-direction:column;gap:3px;
}
.gate-result-item:hover,.gate-result-item:active{background:var(--surface3)}
.gate-result-name{font-size:1.05rem;font-weight:500;color:#FFFFFF}
.gate-result-dates{font-family:var(--mono);font-size:0.75rem;color:var(--gold-text)}
.gate-skip{
  margin-top:28px;font-size:0.78rem;font-weight:500;letter-spacing:0.1em;
  color:var(--text-muted);transition:color 0.2s ease;
}
.gate-skip:hover{color:var(--text-sub)}

/* ═══════════════════════════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════════════════════════ */
#app{
  position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;
  background:var(--bg);opacity:0;transition:opacity 0.5s ease;
}
#app.show{opacity:1}

/* Header */
#app-header{
  flex-shrink:0;
  background:rgba(8,8,15,0.96);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  padding-top:env(safe-area-inset-top,0);
}
.header-inner{display:flex;align-items:center;gap:10px;padding:14px 16px}
.header-home-btn{
  color:var(--gold-text);opacity:0.7;font-size:1.1rem;padding:6px;
  border-radius:8px;transition:opacity 0.2s ease,background 0.2s ease;
}
.header-home-btn:hover{opacity:1;background:var(--gold-dim)}
.header-title-wrap{flex:1;text-align:center}
.header-title{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:#FFFFFF;line-height:1}
.header-subtitle{font-size:0.6rem;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-text);opacity:0.7;margin-top:2px}
#edit-mode-btn{
  font-size:1rem;padding:6px;border-radius:8px;opacity:0.5;
  transition:opacity 0.2s ease,background 0.2s ease;
}
#edit-mode-btn:hover{opacity:0.9}
#edit-mode-btn.active{opacity:1;background:var(--gold-dim)}

/* Search bar */
#search-bar-wrap{padding:0 16px 12px}
.search-bar{
  display:flex;align-items:center;gap:10px;
  background:var(--surface2);border:1.5px solid var(--border-md);
  border-radius:var(--r);padding:12px 16px;transition:border-color 0.2s ease;
}
.search-bar:focus-within{border-color:var(--gold)}
.search-icon{color:var(--gold-text);opacity:0.6;font-size:0.95rem;flex-shrink:0}
.search-input{
  background:none;border:none;outline:none;
  color:#FFFFFF;font-size:1rem;font-weight:400;
  width:100%;caret-color:var(--gold);
}
.search-input::placeholder{color:var(--text-muted)}
.search-clear{color:var(--text-muted);font-size:0.85rem;padding:2px;transition:color 0.2s ease}
.search-clear:hover{color:var(--text)}

/* Content area */
#app-body{flex:1;overflow:hidden;position:relative}

/* Views */
.view{
  position:absolute;inset:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity 0.25s ease,transform 0.25s ease;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 24px);
}
.view.active{opacity:1;pointer-events:auto;transform:translateY(0)}

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM NAV
═══════════════════════════════════════════════════════════════════ */
#bottom-nav{
  flex-shrink:0;
  background:rgba(8,8,15,0.97);backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--border);
  display:flex;align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom,0);
  min-height:var(--nav-h);
}
.nav-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:var(--text-muted);font-size:0.65rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  padding:10px 4px;transition:color 0.2s ease;
  -webkit-tap-highlight-color:transparent;
}
.nav-tab-icon{font-size:1.35rem;transition:transform 0.25s var(--spring)}
.nav-tab.active{color:var(--gold-text)}
.nav-tab.active .nav-tab-icon{transform:scale(1.18)}

/* ═══════════════════════════════════════════════════════════════════
   SEARCH VIEW
═══════════════════════════════════════════════════════════════════ */
.results-meta{
  font-size:0.72rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-muted);padding:14px 16px 8px;
}
.surname-header{
  padding:10px 16px 6px;font-size:0.68rem;font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--gold-text);opacity:0.65;
  border-top:1px solid var(--border);margin-top:4px;
}

/* Person cards — high contrast, large tap targets */
.person-card{
  display:flex;align-items:center;gap:14px;padding:16px;
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:background 0.15s ease;-webkit-tap-highlight-color:transparent;
  min-height:72px;
}
.person-card:hover,.person-card:active{background:var(--surface)}
.person-avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--surface3);border:2px solid var(--border-md);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:600;color:var(--gold-text);
  flex-shrink:0;overflow:hidden;letter-spacing:0.02em;
}
.person-avatar img{width:100%;height:100%;object-fit:cover}
.person-info{flex:1;min-width:0}
.person-name{
  font-size:1.05rem;font-weight:500;color:#FFFFFF;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.person-name strong{font-weight:700}
.person-dates{font-family:var(--mono);font-size:0.72rem;color:var(--gold-text);margin-top:3px}
.person-place{font-size:0.75rem;color:var(--text-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-chevron{color:var(--text-muted);font-size:1rem;flex-shrink:0}
.person-custom-badge{
  display:inline-block;font-size:0.6rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--green);border:1px solid rgba(52,199,89,0.3);border-radius:4px;padding:2px 6px;margin-top:4px;
}
.empty-state{padding:60px 24px;text-align:center}
.empty-icon{font-size:2.5rem;opacity:0.2;margin-bottom:16px}
.empty-text{font-size:1.05rem;color:var(--text-muted);line-height:1.6}

/* ═══════════════════════════════════════════════════════════════════
   TREE VIEW — natural scrolling, horizontally scrollable rows
═══════════════════════════════════════════════════════════════════ */
#tree-view{
  /* Natural vertical scroll inherited from .view */
  padding:16px 0 calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 40px) !important;
}

#tree-container{width:100%}

.tree-breadcrumb{
  display:flex;align-items:center;gap:10px;padding:0 16px 16px;flex-wrap:wrap;
}
.tree-back-btn{
  background:var(--surface2);border:1.5px solid var(--border-md);
  border-radius:20px;color:#FFFFFF;font-size:0.85rem;font-weight:500;
  padding:6px 16px;transition:background 0.15s ease,border-color 0.15s ease;
  display:flex;align-items:center;gap:4px;
}
.tree-back-btn:hover{background:var(--surface3);border-color:var(--border-hi)}
.tree-crumb-name{font-size:1rem;font-weight:600;color:#FFFFFF;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-crumb-hint{font-size:0.65rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);width:100%}

/* Mode toggle */
.tree-toggle{
  display:flex;gap:4px;margin:0 16px 20px;
  background:var(--surface);border-radius:var(--r);padding:4px;
  border:1.5px solid var(--border);
}
.tree-toggle-btn{
  flex:1;padding:10px 12px;border-radius:8px;
  font-size:0.78rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--text-muted);transition:all 0.2s ease;
}
.tree-toggle-btn.active{background:var(--surface3);color:#FFFFFF;box-shadow:inset 0 0 0 1px var(--border-md)}

/* Generation label */
.tree-gen-label{
  text-align:center;font-size:0.68rem;font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--gold-text);opacity:0.6;
  margin:8px 0 10px;padding:0 16px;
}

/* Generation row — horizontal scroll when overflows */
.tree-gen{
  display:flex;gap:10px;
  padding:0 16px 4px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  /* Centre when few nodes */
  justify-content:safe center;
}
.tree-gen::-webkit-scrollbar{display:none}

/* Connector */
.tree-connector{
  display:flex;justify-content:center;
  height:36px;margin:0;
}
.tree-connector svg{width:60px;height:36px}

/* Tree node card — large, readable, high contrast */
.tree-node{
  flex-shrink:0;
  width:130px;
  display:flex;flex-direction:column;align-items:center;
  background:var(--surface);border:2px solid var(--border);
  border-radius:var(--r);padding:14px 8px 12px;
  cursor:pointer;scroll-snap-align:center;
  transition:border-color 0.2s ease,background 0.2s ease,transform 0.2s var(--spring);
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.tree-node:hover,.tree-node:active{
  border-color:var(--border-md);background:var(--surface2);transform:scale(1.03);
}
.tree-node.focus-node{
  width:150px;
  background:var(--surface2);border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 8px 32px rgba(240,165,0,0.2);
}
.tree-node-avatar{
  width:52px;height:52px;border-radius:50%;margin-bottom:10px;
  background:var(--surface3);border:2px solid var(--border-md);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:600;color:var(--gold-text);
  overflow:hidden;flex-shrink:0;
}
.tree-node.focus-node .tree-node-avatar{width:60px;height:60px;border-color:var(--gold)}
.tree-node-avatar img{width:100%;height:100%;object-fit:cover}
.tree-node-name{
  font-size:0.82rem;font-weight:600;color:#FFFFFF;
  text-align:center;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  min-height:2em;
}
.tree-node.focus-node .tree-node-name{font-size:0.88rem}
.tree-node-dates{
  font-family:var(--mono);font-size:0.65rem;color:var(--gold-text);
  text-align:center;margin-top:4px;opacity:0.8;
}
.tree-node-tap-hint{
  font-size:0.58rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold-text);opacity:0;margin-top:6px;
  transition:opacity 0.2s ease;
}
.tree-node:hover .tree-node-tap-hint{opacity:0.6}

.tree-more-btn{
  flex-shrink:0;width:130px;padding:20px 12px;
  background:none;border:2px dashed var(--border-md);border-radius:var(--r);
  color:var(--text-muted);font-size:0.75rem;font-weight:500;text-align:center;
  transition:border-color 0.2s ease,color 0.2s ease;
}
.tree-more-btn:hover{border-color:var(--gold);color:var(--gold-text)}

.tree-instructions{
  padding:48px 24px;text-align:center;
  font-size:1rem;color:var(--text-muted);line-height:1.6;
}
.tree-instructions strong{color:#FFFFFF;font-weight:600}

/* ═══════════════════════════════════════════════════════════════════
   DISCOVER VIEW
═══════════════════════════════════════════════════════════════════ */
#discover-view{padding:16px}

.discover-hero{
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:20px;cursor:pointer;
  transition:transform 0.2s ease,border-color 0.2s ease;
}
.discover-hero:hover{transform:translateY(-2px);border-color:var(--border-md)}
.discover-hero-img{
  width:100%;height:220px;background:var(--surface2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
}
.discover-hero-img img{width:100%;height:100%;object-fit:cover}
.discover-hero-avatar{font-size:5rem;font-weight:700;color:rgba(255,255,255,0.08)}
.discover-hero-badge{
  position:absolute;top:12px;left:12px;
  background:rgba(8,8,15,0.8);backdrop-filter:blur(8px);
  border:1px solid var(--border-md);border-radius:20px;
  padding:5px 14px;font-size:0.65rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold-text);
}
.discover-hero-body{padding:18px 20px 22px}
.discover-hero-eyebrow{font-size:0.68rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-text);margin-bottom:6px}
.discover-hero-name{font-family:var(--serif);font-size:1.8rem;font-weight:700;color:#FFFFFF;line-height:1.05;margin-bottom:6px}
.discover-hero-dates{font-family:var(--mono);font-size:0.8rem;color:var(--gold-text);opacity:0.8}
.discover-hero-note{font-size:0.88rem;color:var(--text-sub);margin-top:10px;line-height:1.55}

.discover-section-title{
  font-size:0.68rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--text-muted);margin:24px 0 12px;
}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.stat-card{
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);
  padding:18px 16px;text-align:center;
}
.stat-num{font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--gold-text);line-height:1;margin-bottom:6px}
.stat-label{font-size:0.68rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted)}

.today-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.today-card{
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);
  padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:14px;
  transition:background 0.15s ease,border-color 0.15s ease;min-height:64px;
}
.today-card:hover,.today-card:active{background:var(--surface2);border-color:var(--border-md)}
.today-card-icon{font-size:1.5rem;flex-shrink:0}
.today-card-info{flex:1;min-width:0}
.today-card-name{font-size:0.95rem;font-weight:600;color:#FFFFFF}
.today-card-detail{font-size:0.78rem;color:var(--text-muted);margin-top:2px}
.today-card-year{font-family:var(--mono);font-size:0.75rem;color:var(--gold-text);flex-shrink:0}

.discover-refresh{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px;margin-top:12px;
  border:1.5px solid var(--border);border-radius:var(--r);
  color:var(--text-muted);font-size:0.82rem;font-weight:500;
  transition:border-color 0.2s ease,color 0.2s ease;
}
.discover-refresh:hover{border-color:var(--border-md);color:#FFFFFF}

/* ═══════════════════════════════════════════════════════════════════
   DETAIL PANEL
═══════════════════════════════════════════════════════════════════ */
#detail-panel{
  position:fixed;inset:0;z-index:30;
  background:var(--bg);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform 0.32s var(--ease);
}
#detail-panel.open{transform:translateX(0)}

.panel-header{
  flex-shrink:0;
  background:rgba(8,8,15,0.97);border-bottom:1px solid var(--border);
  padding:14px 16px;display:flex;align-items:center;gap:10px;
  padding-top:max(14px,env(safe-area-inset-top));
}
.panel-back{
  color:#FFFFFF;font-size:0.95rem;font-weight:500;
  padding:6px 12px 6px 4px;opacity:0.75;transition:opacity 0.2s ease;
  display:flex;align-items:center;gap:4px;
}
.panel-back:hover{opacity:1}
.panel-header-name{font-size:1rem;font-weight:600;color:#FFFFFF;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* Hero */
.detail-hero-photos{width:100%;height:260px;background:var(--surface);overflow:hidden;position:relative}
.detail-hero-photos img{width:100%;height:100%;object-fit:cover}
.detail-hero-no-photo{
  width:100%;height:200px;background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-size:5rem;font-weight:700;color:rgba(255,255,255,0.06);
}
.detail-hero-info{padding:20px 20px 0}
.detail-name-given{font-size:0.7rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-text);margin-bottom:6px}
.detail-name-full{font-family:var(--serif);font-size:clamp(1.9rem,7vw,2.6rem);font-weight:700;color:#FFFFFF;line-height:1;margin-bottom:8px}
.detail-lifespan{font-family:var(--mono);font-size:0.9rem;color:var(--gold-text);opacity:0.8}

.photo-strip-wrap{
  display:flex;gap:8px;overflow-x:auto;padding:16px 20px 4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.photo-strip-wrap::-webkit-scrollbar{display:none}
.photo-thumb{flex-shrink:0;width:100px;height:100px;border-radius:8px;object-fit:cover;border:2px solid var(--border)}
.photo-add-btn{
  flex-shrink:0;width:100px;height:100px;border-radius:8px;
  border:2px dashed var(--border-md);background:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--gold-text);font-size:0.68rem;font-weight:500;letter-spacing:0.06em;cursor:pointer;
  transition:border-color 0.2s ease,background 0.2s ease;
}
.photo-add-btn:hover{border-color:var(--gold);background:var(--gold-dim)}

.detail-sections{padding:20px}
.detail-section{margin-bottom:28px}
.detail-section-title{
  font-size:0.65rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:12px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.detail-row{display:flex;gap:14px;margin-bottom:12px;align-items:flex-start}
.detail-row-label{font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);flex-shrink:0;width:54px;padding-top:2px}
.detail-row-value{font-size:1rem;color:#FFFFFF;line-height:1.45;flex:1}
.editable-field{cursor:pointer;border-bottom:1.5px dashed var(--border-md);transition:border-color 0.2s ease}
.editable-field:hover{border-bottom-color:var(--gold)}
.edit-hint{font-size:0.65rem;color:var(--gold-text);opacity:0.6;margin-left:4px}

.person-links{display:flex;flex-direction:column;gap:6px}
.person-link-btn{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);
  cursor:pointer;text-align:left;width:100%;min-height:60px;
  transition:border-color 0.15s ease,background 0.15s ease;
}
.person-link-btn:hover,.person-link-btn:active{border-color:var(--border-md);background:var(--surface2)}
.person-link-avatar{
  width:38px;height:38px;border-radius:50%;
  background:var(--surface2);border:2px solid var(--border-md);
  display:flex;align-items:center;justify-content:center;
  font-size:0.9rem;font-weight:600;color:var(--gold-text);
  flex-shrink:0;overflow:hidden;
}
.person-link-avatar img{width:100%;height:100%;object-fit:cover}
.person-link-info{flex:1;min-width:0}
.person-link-name{font-size:1rem;font-weight:500;color:#FFFFFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-link-role{font-size:0.75rem;color:var(--text-muted);margin-top:2px}
.person-link-chevron{color:var(--text-muted);font-size:1rem;flex-shrink:0}

.detail-note{
  font-size:0.95rem;color:var(--text-sub);line-height:1.65;
  border-left:3px solid var(--border-md);padding-left:14px;
}
.action-btn{
  width:100%;padding:14px;background:var(--surface2);border:1.5px solid var(--border-md);
  border-radius:var(--r);color:#FFFFFF;font-size:0.88rem;font-weight:500;
  transition:background 0.15s ease,border-color 0.15s ease;
}
.action-btn:hover{background:var(--surface3);border-color:var(--border-hi)}
.custom-badge-hero{
  display:inline-block;margin-top:8px;padding:3px 12px;
  background:rgba(52,199,89,0.12);border:1px solid rgba(52,199,89,0.3);
  border-radius:20px;font-size:0.65rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--green);
}

/* ═══════════════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════════════ */
.form-panel{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform 0.35s var(--ease);
}
.form-panel.open{transform:translateY(0)}
.form-panel-header{
  flex-shrink:0;padding:16px;background:var(--bg);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
  padding-top:max(16px,env(safe-area-inset-top));
}
.form-panel-title{font-size:1.05rem;font-weight:600;color:#FFFFFF;flex:1}
.form-panel-close{color:var(--text-muted);font-size:1.1rem;padding:4px;transition:color 0.2s ease}
.form-panel-close:hover{color:#FFFFFF}
.form-panel-body{flex:1;overflow-y:auto;padding:24px 16px 48px;-webkit-overflow-scrolling:touch}
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:0.72rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.form-input,.form-select,.form-textarea{
  width:100%;background:var(--surface2);border:1.5px solid var(--border-md);border-radius:var(--r);
  color:#FFFFFF;font-size:1rem;font-weight:400;padding:13px 16px;outline:none;
  caret-color:var(--gold);transition:border-color 0.2s ease;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--gold)}
.form-input::placeholder{color:var(--text-muted)}
.form-select{appearance:none;cursor:pointer}
.form-textarea{resize:vertical;min-height:90px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-divider{
  font-size:0.68rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--text-muted);margin:22px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border);
}
.form-submit-btn{
  width:100%;margin-top:24px;padding:16px;background:var(--gold);color:var(--bg);
  border-radius:var(--r);font-size:0.95rem;font-weight:600;letter-spacing:0.04em;
  transition:opacity 0.2s ease;
}
.form-submit-btn:hover{opacity:0.9}

/* FAB */
#add-person-fab{
  position:fixed;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 16px);right:20px;
  z-index:20;background:var(--gold);color:var(--bg);border-radius:28px;
  padding:14px 24px;font-size:0.88rem;font-weight:600;letter-spacing:0.04em;
  box-shadow:0 4px 24px rgba(240,165,0,0.4);
  display:flex;align-items:center;gap:8px;
  transition:transform 0.2s var(--spring),box-shadow 0.2s ease;
}
#add-person-fab:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(240,165,0,0.5)}

/* Toast */
#toast{
  position:fixed;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 12px);
  left:50%;transform:translateX(-50%) translateY(16px);
  background:var(--surface3);border:1.5px solid var(--border-md);border-radius:24px;
  padding:11px 24px;font-size:0.88rem;font-weight:500;color:#FFFFFF;
  opacity:0;transition:opacity 0.3s ease,transform 0.3s ease;
  pointer-events:none;z-index:999;white-space:nowrap;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Desktop */
@media(min-width:768px){
  #detail-panel{left:auto;width:min(480px,44vw);border-left:1px solid var(--border)}
  .form-panel{left:auto;width:min(500px,50vw);border-left:1px solid var(--border)}
  #add-person-fab{bottom:calc(var(--nav-h) + 20px);right:32px}
  .tree-node{width:150px}
  .tree-node.focus-node{width:170px}
}

/* ── Sibling nodes in tree ───────────────────────────────────────── */
.tree-node-sibling {
  border-color: rgba(255,255,255,0.12);
  opacity: 0.82;
}
.tree-node-sibling:hover { opacity: 1; border-color: var(--border-md); }
.tree-node-sibling-label {
  position: absolute;
  top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   MY FAMILY VIEW
═══════════════════════════════════════════════════════════════════ */
#home-view { padding: 0 0 calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 32px) !important; }

/* No user state */
.myfam-no-user {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 64px 24px; text-align: center;
  gap: 16px;
}
.myfam-no-user-icon { font-size: 3rem; }
.myfam-no-user h2 { font-family: var(--serif); font-size: 1.8rem; font-weight: 700; color: #FFF; }
.myfam-no-user p { font-size: 1rem; color: var(--text-muted); line-height: 1.5; }
.myfam-identify-btn {
  margin-top: 8px; padding: 14px 32px;
  background: var(--gold); color: var(--bg); border-radius: var(--r);
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em;
  transition: opacity 0.2s ease;
}
.myfam-identify-btn:hover { opacity: 0.88; }

/* Hero */
.myfam-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 16px 16px;
  background: linear-gradient(180deg, var(--surface) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}
.myfam-hero-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface2); border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 600; color: var(--gold-text);
  flex-shrink: 0; overflow: hidden;
}
.myfam-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.myfam-hero-info { flex: 1; min-width: 0; }
.myfam-hero-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: #FFF; }
.myfam-hero-dates { font-family: var(--mono); font-size: 0.72rem; color: var(--gold-text); margin-top: 2px; }
.myfam-switch-btn {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 20px; padding: 6px 14px; flex-shrink: 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.myfam-switch-btn:hover { color: #FFF; border-color: var(--border-md); }

/* Stats bar */
.myfam-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 20px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.myfam-stat {
  flex: 1; text-align: center; cursor: pointer;
  padding: 4px 0; transition: opacity 0.2s ease;
}
.myfam-stat:hover { opacity: 0.8; }
.myfam-stat-num { font-family: var(--serif); font-size: 1.8rem; font-weight: 700; color: var(--gold-text); line-height: 1; }
.myfam-stat-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.myfam-stat-div { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; }

/* Sections */
.myfam-section { padding: 20px 16px 4px; }
.myfam-section-title {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-text); opacity: 0.6; margin-bottom: 12px;
}

/* Person cards in My Family */
.myfam-cards {
  display: flex; gap: 10px;
  overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.myfam-cards::-webkit-scrollbar { display: none; }

.myfam-person-card {
  flex-shrink: 0; width: 110px;
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r); padding: 14px 8px 12px;
  cursor: pointer; scroll-snap-align: center; text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.myfam-person-card:hover, .myfam-person-card:active {
  border-color: var(--gold); background: var(--surface2); transform: scale(1.03);
}
.myfam-person-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface2); border: 2px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 600; color: var(--gold-text);
  overflow: hidden; margin-bottom: 10px;
}
.myfam-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.myfam-person-name { font-size: 0.78rem; font-weight: 600; color: #FFF; line-height: 1.2; }
.myfam-person-rel {
  font-size: 0.65rem; font-weight: 600; color: var(--gold-text);
  margin-top: 4px; opacity: 0.8;
}
.myfam-person-dates { font-family: var(--mono); font-size: 0.62rem; color: var(--text-muted); margin-top: 4px; }

/* Military section */
.myfam-mil-list { display: flex; flex-direction: column; gap: 8px; }
.myfam-mil-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r); padding: 14px; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.myfam-mil-card:hover { border-color: var(--border-md); background: var(--surface2); }
.myfam-mil-icon { font-size: 1.4rem; flex-shrink: 0; }
.myfam-mil-name { font-size: 0.95rem; font-weight: 600; color: #FFF; }
.myfam-mil-rel { font-size: 0.7rem; color: var(--gold-text); margin-top: 2px; }
.myfam-mil-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

/* Oldest ancestor card */
.myfam-ancestor-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r); padding: 16px; cursor: pointer;
  transition: border-color 0.2s ease;
}
.myfam-ancestor-card:hover { border-color: var(--gold); }
.myfam-ancestor-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface2); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 600; color: var(--gold-text);
}
.myfam-ancestor-name { font-size: 1rem; font-weight: 600; color: #FFF; }
.myfam-ancestor-rel { font-size: 0.72rem; color: var(--gold-text); margin-top: 2px; }
.myfam-ancestor-dates { font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.myfam-ancestor-note { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

/* Relationship badges */
.detail-rel-badge {
  display: inline-block; margin-bottom: 8px;
  background: rgba(240,165,0,0.15); border: 1px solid rgba(240,165,0,0.35);
  border-radius: 20px; padding: 3px 14px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-text);
}
.person-rel-badge {
  font-size: 0.68rem; font-weight: 600; color: var(--gold-text);
  margin-top: 2px;
}
.tree-node-rel {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--gold-text); opacity: 0.7; margin-top: 3px; text-align: center;
}
.tree-crumb-rel {
  font-size: 0.68rem; font-weight: 600; color: var(--gold-text); opacity: 0.75;
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   MULTI-STEP ADD PERSON
═══════════════════════════════════════════════════════════════════ */
.add-step-progress {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 28px;
}
.add-step-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border-md); transition: background 0.3s ease, transform 0.3s ease;
}
.add-step-dot.done { background: var(--gold); }
.add-step-dot.active { background: var(--gold); transform: scale(1.3); box-shadow: 0 0 0 4px rgba(240,165,0,0.2); }
.add-step-line { flex: 1; max-width: 48px; height: 1px; background: var(--border-md); }

.add-step-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: #FFF; margin-bottom: 8px; }
.add-step-sub { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 20px; }
.add-step-skip { font-size: 0.78rem; color: var(--text-muted); margin-top: 16px; text-align: center; }

/* Search within add form */
.add-search-wrap { position: relative; }
.add-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: var(--surface2); border: 1.5px solid var(--border-md);
  border-top: none; border-radius: 0 0 var(--r) var(--r);
  max-height: 200px; overflow-y: auto;
}
.add-search-item {
  padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border);
  font-size: 0.9rem; color: #FFF; transition: background 0.15s ease;
}
.add-search-item:hover, .add-search-item:active { background: var(--surface3); }
.add-search-item span { font-family: var(--mono); font-size: 0.72rem; color: var(--gold-text); margin-left: 8px; }

/* Linked person chip */
.linked-person-chip {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface2); border: 1.5px solid var(--gold);
  border-radius: var(--r); padding: 10px 14px;
}
.linked-person-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface3); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 600; color: var(--gold-text); flex-shrink: 0;
}
.linked-person-info { flex: 1; min-width: 0; }
.linked-person-name { font-size: 0.95rem; font-weight: 500; color: #FFF; }
.linked-person-dates { font-family: var(--mono); font-size: 0.68rem; color: var(--gold-text); margin-top: 2px; }
.linked-person-remove {
  color: var(--text-muted); font-size: 1rem; padding: 4px; flex-shrink: 0;
  transition: color 0.2s ease;
}
.linked-person-remove:hover { color: var(--red); }

/* Step navigation */
.add-step-nav {
  display: flex; gap: 10px; margin-top: 28px;
}
.add-nav-btn-back {
  flex: 1; padding: 14px; background: var(--surface2);
  border: 1.5px solid var(--border); border-radius: var(--r);
  color: var(--text-sub); font-size: 0.9rem; font-weight: 500;
  transition: border-color 0.2s ease;
}
.add-nav-btn-back:hover { border-color: var(--border-md); }
.add-nav-btn-next {
  flex: 2; padding: 14px; background: var(--surface2);
  border: 1.5px solid var(--gold); border-radius: var(--r);
  color: var(--gold-text); font-size: 0.9rem; font-weight: 600;
  transition: background 0.2s ease;
}
.add-nav-btn-next:hover { background: rgba(240,165,0,0.12); }
.add-nav-btn-save {
  flex: 2; padding: 14px; background: var(--gold);
  border: none; border-radius: var(--r);
  color: var(--bg); font-size: 0.9rem; font-weight: 600;
  transition: opacity 0.2s ease;
}
.add-nav-btn-save:hover { opacity: 0.88; }

/* Sibling nodes in tree */
.tree-node-sibling { border-color: rgba(255,255,255,0.1); opacity: 0.8; }
.tree-node-sibling:hover { opacity: 1; border-color: var(--border-md); }
.tree-node-sibling-label {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--bg); border: 1px solid var(--border-md);
  border-radius: 10px; padding: 1px 8px;
  font-size: 0.55rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}

/* ── My Family hero extra details ────────────────────────────────── */
.myfam-hero-place {
  font-size: 0.75rem; color: var(--text-muted);
  margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.myfam-hero-occ {
  font-size: 0.72rem; color: var(--gold-text); opacity: 0.65;
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── pLink relationship tag ──────────────────────────────────────── */
.plink-rel-tag {
  display: inline-block;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--gold-text); opacity: 0.75;
  background: rgba(240,165,0,0.1);
  border-radius: 6px; padding: 1px 6px; margin-left: 4px;
  vertical-align: middle;
}

/* ── Gate results better scroll affordance ───────────────────────── */
#gate-results::after {
  content: ''; display: block;
  position: sticky; bottom: 0; left: 0; right: 0;
  height: 24px;
  background: linear-gradient(to top, var(--surface2), transparent);
  pointer-events: none;
}
.gate-result-item:first-child {
  border-radius: var(--r) var(--r) 0 0;
}

/* ── Splash: stronger typography ─────────────────────────────────── */
#splash-title {
  text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}
#splash-verse {
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* ── My Family: warm gradient header ─────────────────────────────── */
.myfam-hero {
  background: linear-gradient(135deg, #1E1828 0%, #1A1420 100%) !important;
  border-bottom: 1px solid rgba(240,165,0,0.2) !important;
}

/* ── Detail panel: show serif name larger ────────────────────────── */
.detail-name-full {
  font-size: clamp(2rem, 7vw, 2.8rem) !important;
}

/* ── Person cards: warmer hover ──────────────────────────────────── */
.person-card:hover, .person-card:active {
  background: #1E1E2E !important;
  border-left: 3px solid var(--gold);
}

/* ── Surname header: more visible ────────────────────────────────── */
.surname-header {
  color: var(--gold-text) !important;
  opacity: 0.8 !important;
  font-size: 0.72rem !important;
  padding: 12px 16px 6px !important;
}

/* ── Nav tab active: gold underline ──────────────────────────────── */
.nav-tab.active::after {
  content: '';
  display: block;
  width: 24px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin: 2px auto 0;
}

/* ── Stat cards: subtle gold border on hover ─────────────────────── */
.stat-card:hover { border-color: rgba(240,165,0,0.3); }

/* ── Tree node: warmer gold glow on focus ────────────────────────── */
.tree-node.focus-node {
  background: linear-gradient(135deg, #1E1828 0%, #221A10 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FONT FIX v2 — All names use Playfair Display (serif)
   Applying explicitly to every name element across the app
═══════════════════════════════════════════════════════════════════ */

/* Search + browse names */
.person-name,
.gate-result-name,
.gate-title {
  font-family: var(--serif) !important;
  font-weight: 600;
}

/* Tree node names */
.tree-node-name {
  font-family: var(--serif) !important;
  font-weight: 600;
}

/* My Family card names */
.myfam-person-name,
.myfam-hero-name,
.myfam-ancestor-name,
.myfam-mil-name {
  font-family: var(--serif) !important;
  font-weight: 600;
}

/* Detail panel person links */
.person-link-name,
.panel-header-name {
  font-family: var(--serif) !important;
  font-weight: 600;
}

/* Discover names */
.today-card-name {
  font-family: var(--serif) !important;
  font-weight: 600;
}

/* Add person form linked chips */
.linked-person-name {
  font-family: var(--serif) !important;
  font-weight: 600;
}

/* Story section */
.story-text {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  color: rgba(255,255,255,0.82);
  line-height: 1.8;
  font-style: italic;
}
.story-section {
  margin-bottom: 20px;
}
.story-edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  color: var(--gold-text); opacity: 0.7;
  border: 1px dashed rgba(240,165,0,0.4);
  border-radius: 20px; padding: 5px 14px;
  transition: opacity 0.2s, border-color 0.2s;
}
.story-edit-btn:hover { opacity: 1; border-color: var(--gold); }
.story-textarea {
  width: 100%; min-height: 120px; resize: vertical;
  background: var(--surface2); border: 1.5px solid var(--border-md);
  border-radius: var(--r); color: #FFF;
  font-family: var(--serif); font-size: 0.95rem; font-style: italic;
  padding: 12px 14px; outline: none; caret-color: var(--gold);
  line-height: 1.75; transition: border-color 0.2s;
}
.story-textarea:focus { border-color: var(--gold); }
.story-save-btn {
  margin-top: 8px; padding: 10px 20px;
  background: var(--gold); color: var(--bg);
  border-radius: var(--r); font-size: 0.82rem; font-weight: 600;
  transition: opacity 0.2s;
}
.story-save-btn:hover { opacity: 0.88; }

/* ── "This is you" profile hero ────────────────────────────────── */
.detail-self-hero {
  background: linear-gradient(135deg, #1C1428 0%, #1A1C28 100%);
  padding: 24px 20px 20px;
  border-bottom: 1px solid rgba(240,165,0,0.2);
}
.detail-self-badge {
  display: inline-block; margin-bottom: 12px;
  background: var(--gold); color: var(--bg);
  border-radius: 20px; padding: 3px 14px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
}
.detail-self-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--surface2); border: 3px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 700; color: var(--gold-text);
  overflow: hidden; margin-bottom: 14px;
}
.detail-self-avatar img { width: 100%; height: 100%; object-fit: cover; }
.detail-self-name {
  font-family: var(--serif); font-size: 2rem; font-weight: 700;
  color: #FFF; line-height: 1.05; margin-bottom: 6px;
}
.detail-self-sub {
  font-family: var(--mono); font-size: 0.82rem;
  color: var(--gold-text); opacity: 0.75;
}
.detail-self-place {
  font-size: 0.82rem; color: var(--text-muted); margin-top: 4px;
}
.detail-self-add-photo {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 8px 18px;
  border: 1.5px dashed rgba(240,165,0,0.5); border-radius: 20px;
  color: var(--gold-text); font-size: 0.78rem; font-weight: 500;
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.detail-self-add-photo:hover { border-color: var(--gold); background: var(--gold-dim); }

/* Logo in splash */
.splash-logo {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 16px;
  object-fit: cover;
  opacity: 0; transition: opacity 0.8s ease 0.1s;
}
.splash-logo.show { opacity: 1; }

/* ── Inter for UI chrome only ────────────────────────────────────── */
.nav-tab, .results-meta, .surname-header,
.detail-section-title, .detail-row-label,
.person-dates, .person-place, .person-rel-badge,
.tree-gen-label, .tree-crumb-hint, .tree-node-rel, .tree-node-dates,
.tree-node-sibling-label, .tree-back-btn,
.myfam-stat-label, .myfam-section-title, .myfam-person-rel,
.myfam-person-dates, .myfam-hero-dates, .myfam-hero-place, .myfam-hero-occ,
.discover-hero-eyebrow, .discover-section-title,
.detail-rel-badge, .detail-name-given, .detail-lifespan,
.custom-badge-hero, .plink-rel-tag, .person-link-role,
.gate-sub, .gate-skip, .gate-eyebrow,
.add-step-sub, .add-step-skip, .add-step-progress,
.today-card-detail, .today-card-year,
.header-subtitle, .myfam-hero-dates,
.loader-text, .detail-self-sub, .detail-self-place,
.splash-stat-label, .splash-ref, .splash-cta,
.form-label, .form-divider,
.story-edit-btn, .story-save-btn,
.tree-toggle-btn, .myfam-switch-btn, .myfam-identify-btn,
.action-btn, .gate-skip,
.detail-self-badge, .person-custom-badge {
  font-family: var(--sans) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO PHOTO — Full bleed with gradient fade edges (v2)
   Inspired by cinematic gradient overlay treatment
═══════════════════════════════════════════════════════════════════ */

/* Remove old hero photo styles — override them */
.detail-hero-photos {
  width: 100% !important;
  height: 340px !important;
  position: relative !important;
  overflow: hidden !important;
  background: var(--surface) !important;
}
.detail-hero-photos img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}
/* Gradient fade edges — sides fade to bg, bottom fades heavily for text overlay */
.detail-hero-photos::after {
  content: '';
  position: absolute; inset: 0;
  background:
    /* top fade */
    linear-gradient(to bottom, rgba(10,10,20,0.5) 0%, transparent 25%),
    /* bottom fade — heavy for text */
    linear-gradient(to top, rgba(10,10,20,1) 0%, rgba(10,10,20,0.7) 30%, transparent 65%),
    /* left fade */
    linear-gradient(to right, rgba(10,10,20,0.6) 0%, transparent 25%),
    /* right fade */
    linear-gradient(to left, rgba(10,10,20,0.6) 0%, transparent 25%);
  pointer-events: none;
}

/* Name overlaid at bottom of photo */
.detail-hero-photo-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 16px 20px 20px;
}
.detail-hero-photo-overlay .detail-rel-badge {
  margin-bottom: 6px;
}
.detail-hero-photo-overlay .detail-name-given {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: 4px;
  font-family: var(--sans) !important;
}
.detail-hero-photo-overlay .detail-name-full {
  font-family: var(--serif) !important;
  font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 700;
  color: #FFF; line-height: 1; margin-bottom: 6px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.detail-hero-photo-overlay .detail-lifespan {
  font-family: var(--mono) !important;
  font-size: 0.85rem; color: var(--gold-text); opacity: 0.9;
}

/* No-photo fallback — large initials */
.detail-hero-no-photo {
  width: 100% !important;
  height: 260px !important;
  background: linear-gradient(135deg, #1A1428 0%, #141428 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--serif) !important;
  font-size: 7rem !important;
  font-weight: 700 !important;
  color: rgba(240,165,0,0.12) !important;
  position: relative;
}
/* Name below no-photo */
.detail-hero-info {
  padding: 16px 20px 0 !important;
}

/* Self hero photo — also full bleed */
.detail-self-hero-photo {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.detail-self-hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
.detail-self-hero-photo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,20,0.4) 0%, transparent 30%),
    linear-gradient(to top, rgba(10,10,20,1) 0%, rgba(10,10,20,0.5) 40%, transparent 70%),
    linear-gradient(to right, rgba(10,10,20,0.5) 0%, transparent 30%),
    linear-gradient(to left, rgba(10,10,20,0.5) 0%, transparent 30%);
  pointer-events: none;
}
.detail-self-hero-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 14px 20px 16px;
}

/* Audio mute button */
#audio-btn {
  position: fixed; top: env(safe-area-inset-top, 14px); right: 16px;
  z-index: 200;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(20,20,30,0.75); backdrop-filter: blur(8px);
  border: 1px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  color: #FFF;
}
#audio-btn:hover { background: rgba(40,40,60,0.9); border-color: var(--gold); }
#audio-btn.muted { opacity: 0.5; }

/* Delete record button */
.delete-record-btn {
  width: 100%; margin-top: 8px; padding: 14px;
  background: rgba(255,69,58,0.1); border: 1.5px solid rgba(255,69,58,0.3);
  border-radius: var(--r); color: var(--red);
  font-family: var(--sans); font-size: 0.88rem; font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
}
.delete-record-btn:hover { background: rgba(255,69,58,0.2); border-color: var(--red); }

/* Loading gate indicator */
.gate-loading {
  padding: 16px; text-align: center;
  font-family: var(--sans);
  font-size: 0.8rem; color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════════════════════════════
   FIXES: Header actions, panel width, photo rendering, fonts
═══════════════════════════════════════════════════════════════════ */

/* ── Bug 2: Header actions group ────────────────────────────────── */
.header-actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.header-actions button {
  width: 34px; height: 34px;
  border-radius: 8px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  opacity: 0.7;
}
.header-actions button:hover { opacity: 1; background: rgba(255,255,255,0.12); border-color: var(--border-md); }
.header-actions button.active { background: var(--gold-dim); border-color: var(--border-md); opacity: 1; }

/* Remove old fixed audio button styles */
#audio-btn {
  position: static !important;
  width: 34px !important; height: 34px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  font-size: 0.95rem !important;
}
#audio-btn.muted { opacity: 0.45 !important; }

/* ── Bug 4: Detail panel — wider on desktop ──────────────────────── */
@media(min-width:768px){
  #detail-panel {
    width: min(600px, 52vw) !important;
  }
  .form-panel {
    width: min(520px, 48vw) !important;
  }
}

/* ── Bug 4: Hero photo — taller, face-aware crop ────────────────── */
.detail-hero-photos {
  height: 380px !important;
}
.detail-hero-photos img {
  /* Use top-center positioning to show faces, not waist */
  object-position: center 15% !important;
}
/* Stronger gradient — 15% more than before */
.detail-hero-photos::after {
  background:
    linear-gradient(to bottom, rgba(10,10,20,0.55) 0%, transparent 25%),
    linear-gradient(to top, rgba(10,10,20,1) 0%, rgba(10,10,20,0.75) 32%, transparent 68%),
    linear-gradient(to right, rgba(10,10,20,0.7) 0%, transparent 28%),
    linear-gradient(to left, rgba(10,10,20,0.7) 0%, transparent 28%) !important;
}

/* Self hero photo also taller */
.detail-self-hero-photo {
  height: 340px !important;
}
.detail-self-hero-photo img {
  object-position: center 15% !important;
}

/* ── Bug 1: Font — embed Playfair Display via system stack fallback ─ */
/* Force font on every meaningful text element */
h1, h2, h3, h4, h5, h6,
.person-name, .person-name strong,
.tree-node-name,
.myfam-person-name,
.myfam-hero-name,
.myfam-ancestor-name,
.myfam-mil-name,
.gate-result-name,
.gate-title,
.person-link-name,
.panel-header-name,
.today-card-name,
.linked-person-name,
.detail-name-full,
.detail-self-name,
.discover-hero-name,
.story-text,
.add-step-title,
.detail-row-value {
  font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif !important;
}

/* ── Bug 3: Delete button styling ───────────────────────────────── */
#delete-record-btn {
  display: none; /* Hidden by default, shown by JS in edit mode */
}

/* ── Flash intro overlay fix ────────────────────────────────────── */
#flash-intro {
  background: #0A0A14;
}