/* ==========================================================================
   Reyes–Palma Family History • Tree-First Interactive Genealogy Stylesheet
   Aesthetic: Archival Manuscript & Heirloom Artistry
   Palette: Warm ivory, dark charcoal, restrained jade, muted amber, warm sepia
   Fonts: Privacy-friendly system & local font stacks (Zero external CDN requests)
   ========================================================================== */

:root {
  /* Archival Paper & Parchment Backgrounds */
  --bg-parchment: #fbf8f2;
  --bg-surface: #f4ece0;
  --bg-surface-elevated: #faf5ec;
  --bg-card: #ffffff;
  --bg-card-hover: #fffdf9;
  --bg-subtle: #ede5d5;

  /* Charcoal Typography */
  --text-main: #212427;
  --text-secondary: #51565e;
  --text-muted: #787f8a;
  --text-inv: #ffffff;

  /* Status Colors: Quieted & Refined */
  --status-confirmed-text: #205c41;
  --status-confirmed-bg: #eef6f1;
  --status-confirmed-border: #c4e3d3;

  --status-family-confirmed-text: #2f5660;
  --status-family-confirmed-bg: #f2f7f9;
  --status-family-confirmed-border: #cadfe4;

  --status-pending-text: #8c520a;
  --status-pending-bg: #fbf5ec;
  --status-pending-border: #ecdcc6;

  --status-lead-text: #4a5160;
  --status-lead-bg: #f1f3f7;
  --status-lead-border: #c8ced9;

  /* Heritage Bronze & Gold Accents */
  --accent-heritage: #87572b;
  --accent-heritage-light: #f5ede4;
  --accent-heritage-dark: #633e1c;
  --border-archival: #dfd7c7;
  --border-delicate: #ebe4d5;
  --divider-gold: #cbb279;

  /* Connector Line Tokens */
  --line-direct: #6f5338;
  --line-couple: #9e8268;
  --line-rail: #b8a690;
  --line-unconfirmed: #c8a368;

  /* Fonts */
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", Cambria, serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Elevations */
  --shadow-card: 0 2px 8px rgba(50, 40, 25, 0.04), 0 1px 2px rgba(50, 40, 25, 0.03);
  --shadow-card-hover: 0 6px 16px rgba(50, 40, 25, 0.08), 0 2px 4px rgba(50, 40, 25, 0.05);
  --shadow-drawer: -6px 0 32px rgba(35, 25, 15, 0.15);

  /* Radii & Transitions */
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --transition-fast: 0.16s ease;
  --transition-smooth: 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: #faf6ee;
  color: var(--text-main);
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image:
    /* Tactile archival paper grain (pure SVG turbulence, zero dots, zero grid) */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.28 0 0 0 0.038 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperGrain)'/%3E%3C/svg%3E"),
    /* Soft archival document vignette */
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.45) 0%, rgba(246, 239, 226, 0.2) 58%, rgba(228, 216, 198, 0.5) 100%),
    /* Soft parchment warmth tone shift */
    linear-gradient(180deg, #fdfbf6 0%, #f7f0e3 50%, #f1e6d4 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* ==========================================================================
   Header & Controls
   ========================================================================== */
.site-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-archival);
  position: relative;
  z-index: 20;
}

.header-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.brand-crest {
  width: 36px;
  height: 36px;
  background: var(--accent-heritage-light);
  border: 1px solid var(--divider-gold);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-heritage);
  font-size: 1.15rem;
  flex-shrink: 0;
}

.site-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.15;
}

.site-subtitle {
  font-size: 0.725rem;
  font-weight: 600;
  color: var(--accent-heritage);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.75);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-archival);
}

.dot-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--status-confirmed-text);
}

/* Controls Bar */
.controls-bar {
  background: var(--bg-surface-elevated);
  border-bottom: 1px solid var(--border-archival);
  position: sticky;
  top: 0;
  z-index: 15;
  box-shadow: 0 1px 6px rgba(35, 25, 15, 0.03);
}

.controls-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.55rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.mode-toggles {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #ebe2d3;
  padding: 0.2rem;
  border-radius: var(--radius-md);
  border: 1px solid #d8cdba;
}

.btn-mode {
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: #5c5243;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--transition-fast);
}

.btn-mode:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.6);
}

.btn-mode.is-active {
  background: #fffdf9;
  color: var(--accent-heritage-dark);
  border-color: #d8ccba;
  box-shadow: 0 1px 3px rgba(45, 35, 20, 0.06);
}

.btn-icon {
  font-size: 0.8rem;
}

.viewport-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.btn-utility {
  background: #ffffff;
  border: 1px solid var(--border-archival);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--text-main);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all var(--transition-fast);
}

.btn-utility:hover {
  background: var(--bg-surface);
  border-color: var(--accent-heritage);
}

.btn-reset-focus {
  background: var(--accent-heritage);
  color: #ffffff;
  border-color: var(--accent-heritage);
}

.btn-reset-focus:hover {
  background: var(--accent-heritage-dark);
}

.btn-reset-focus.is-hidden {
  display: none !important;
}

.zoom-button-group {
  display: flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-archival);
}

.zoom-button-group .btn-zoom {
  border: none;
  border-radius: 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.9rem;
}

.zoom-button-group .btn-zoom:first-child {
  border-right: 1px solid var(--border-archival);
}

/* Branch Heritage Navigation Tabs */
.mobile-branch-nav {
  display: flex;
  background: #f5ede1;
  border-top: 1px solid #dfd5c4;
  padding: 0.35rem 1rem;
  justify-content: center;
  gap: 0.65rem;
}

.mobile-branch-btn {
  background: #ffffff;
  border: 1px solid #dcd1be;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.95rem;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #5c5243;
  cursor: pointer;
  text-align: center;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 2px rgba(40, 30, 15, 0.03);
}

.mobile-branch-btn:hover {
  background: #ffffff;
  color: var(--text-main);
  border-color: #cbbba3;
}

.mobile-branch-btn.is-active {
  background: #ffffff;
  border-color: #cbb997;
  color: var(--accent-heritage-dark);
  box-shadow: 0 1px 3px rgba(45, 35, 20, 0.08);
}

/* Central Reyes–Palma tab: visual meeting point of both ancestral lines */
#mobile-nav-root {
  font-weight: 700;
  letter-spacing: 0.02em;
  border-color: #cbb997;
  background: linear-gradient(180deg, #ffffff 0%, #faf4ea 100%);
  position: relative;
}

#mobile-nav-root::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--divider-gold);
  margin-left: 0.4rem;
}

/* ==========================================================================
   Main Tree Viewport & Canvas (Tightened Generational Spacing)
   ========================================================================== */
.tree-viewport {
  flex: 1;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding: 1.25rem 1rem 3rem;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--border-archival) transparent;
}

.tree-canvas {
  position: relative;
  min-width: 1280px; /* Scaled up ~8-12% for substantial archival presence */
  max-width: 1540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding-bottom: 2rem;
  transition: transform var(--transition-smooth);
  transform-origin: center top;
}

/* ==========================================================================
   Embedded Heritage Artwork & Layering System
   Layer 0: Archival paper background (body / .tree-canvas)
   Layer 1: Heritage environmental illustrations (Toronto, Philippines, Roots)
   Layer 2: Decorative botanical embellishments (Junction & Banner Garlands)
   Layer 3: Genealogy SVG relationship connectors (z-index: 3)
   Layer 4: Family cards & slots (z-index: 4)
   Layer 5: Navigation, controls, details drawer (z-index: 50–100)
   ========================================================================== */

.heritage-artwork-img {
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   Philippine Ancestral Landscape (Layer 1)
   Embedded behind the maternal grandparents (Geronimo + Asuncion),
   extending into the maternal great-grandparents and parent generation
   -------------------------------------------------------------------------- */
.embedded-ancestral-backdrop {
  position: absolute;
  top: -65px;
  right: -30px;
  width: clamp(540px, 44vw, 720px);
  pointer-events: none;
  user-select: none;
  z-index: 1; /* Layer 1: Behind connectors (3) and cards (4) */
  opacity: 0.20;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 55% 50%, black 20%, rgba(0, 0, 0, 0.6) 55%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 60% at 55% 50%, black 20%, rgba(0, 0, 0, 0.6) 55%, transparent 85%);
  transition: opacity var(--transition-smooth);
}

.artwork-philippines {
  width: 100%;
  height: auto;
  filter: sepia(0.2) contrast(1.05);
}

/* --------------------------------------------------------------------------
   Current Generation Backdrops (Layer 1)
   Embedded directly behind Geoffrey, Glendale, and Ginhette
   -------------------------------------------------------------------------- */
.embedded-generation-backdrop {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1; /* Layer 1: Behind connectors (3) and cards (4) */
  transition: opacity var(--transition-smooth);
}

/* Toronto Skyline: Lower-left to lower-center behind current generation */
.backdrop-toronto {
  top: -50px;
  left: 6%;
  width: clamp(420px, 36vw, 560px);
  opacity: 0.18;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 45% 55%, black 20%, rgba(0, 0, 0, 0.6) 55%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 65% at 45% 55%, black 20%, rgba(0, 0, 0, 0.6) 55%, transparent 85%);
}

.artwork-toronto {
  width: 100%;
  height: auto;
  filter: sepia(0.15) contrast(1.05);
}

/* Root Flourish: Centered behind and grounding the current generation */
.backdrop-roots {
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(380px, 32vw, 480px);
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 50%, black 25%, rgba(0, 0, 0, 0.6) 55%, transparent 85%);
  mask-image: radial-gradient(ellipse 65% 60% at 50% 50%, black 25%, rgba(0, 0, 0, 0.6) 55%, transparent 85%);
}

.artwork-roots {
  width: 100%;
  height: auto;
  filter: sepia(0.18) contrast(1.05);
}

/* --------------------------------------------------------------------------
   Botanical Accents (Layer 2)
   Embedded at central tree junctions & branch joins
   -------------------------------------------------------------------------- */

/* Central Family Junction: Gideon + Florencia marriage union & central trunk */
.botanical-junction-accent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  width: 360px;
  height: 140px;
  pointer-events: none;
  user-select: none;
  z-index: 2; /* Layer 2: Behind connectors (3) and cards (4) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0.20;
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 25%, rgba(0, 0, 0, 0.5) 55%, transparent 80%);
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 25%, rgba(0, 0, 0, 0.5) 55%, transparent 80%);
}

.artwork-botanical-junction {
  width: 340px;
  height: auto;
  object-fit: cover;
  object-position: center;
  filter: sepia(0.2) contrast(1.05);
}

/* Ancestral Branch Banners Junction */
.branch-banner-botanical {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 60px;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0.15;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 25%, transparent 75%);
}

.artwork-botanical-banner {
  width: 260px;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Grandparent Cluster Positions */
#cluster-geronimo-asuncion,
#cluster-anselmo-apolinaria {
  position: relative;
}

/* SVG Connectors Overlay — Layer 3 */
.tree-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3; /* Layer 3: above environmental artwork and botanical accents, below cards */
  overflow: visible;
}

.tree-svg path {
  fill: none;
  transition: opacity var(--transition-fast);
}

.connector-direct {
  stroke: #664b30;
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(60, 45, 30, 0.05));
}

.connector-trunk {
  stroke: #583e25;
  stroke-width: 2.6px;
}

.connector-couple {
  stroke: #92775d;
  stroke-width: 1.6px;
  stroke-linecap: round;
}

.connector-rail {
  stroke: #b3a08a;
  stroke-width: 1.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.connector-unconfirmed {
  stroke: #c29b5e;
  stroke-width: 1.4px;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}

.connector-botanical-accent {
  pointer-events: none;
}

/* Branch Banners */
.branch-banners {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  align-items: center;
  margin-bottom: -0.85rem;
  position: relative;
  z-index: 2;
}

.branch-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
}

.branch-pill {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-heritage);
  background: var(--bg-surface);
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-archival);
}

.branch-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.branch-divider-guide {
  height: 32px;
  background: repeating-linear-gradient(to bottom, var(--divider-gold) 0, var(--divider-gold) 4px, transparent 4px, transparent 8px);
}

/* Level Rows (Refined Subtle Generation Orientation Markers) */
.tree-level-row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.45rem; /* Tightened from 0.75rem */
}

.level-indicator-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #726859;
  padding: 0.25rem 0.5rem;
}

.level-indicator-tag::before,
.level-indicator-tag::after {
  content: "";
  flex: 1;
  max-width: 180px;
  height: 1px;
  background: linear-gradient(to right, transparent, #dacdbb, transparent);
}

/* Level content flex */
.level-content-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}

.level-content-flex.justify-center {
  justify-content: center;
}

/* ==========================================================================
   Couple Units & Branch Clusters
   ========================================================================== */
.branch-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem; /* Tightened from 0.85rem */
}

.paternal-great-grandparents,
.paternal-grandparents {
  flex: 1;
  max-width: 530px;
}

.maternal-great-grandparents,
.maternal-grandparents {
  flex: 1;
  max-width: 530px;
}

.maternal-great-grandparents {
  flex-direction: row;
  justify-content: center;
  gap: 1.25rem;
}

.couple-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.couple-cards {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.couple-bridge {
  width: 24px;
  height: 24px;
  margin: 0 -3px;
  background: var(--bg-surface);
  border: 1px solid var(--border-archival);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--accent-heritage);
  z-index: 5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.primary-marriage-bridge {
  background: #fdfaf4;
  border-color: var(--divider-gold);
  color: var(--accent-heritage-dark);
  font-size: 0.85rem;
}

/* ==========================================================================
   Genealogy Cards (Layer 4)
   ========================================================================== */
.card-slot {
  position: relative;
  z-index: 4; /* Layer 4: Cards & Slots */
}

.tree-card {
  position: relative;
  overflow: hidden;
  width: 236px; /* Scaled up ~10% for substantial archival plate presence */
  min-height: 114px;
  background: var(--bg-card);
  border: 1px solid #d4c7b2;
  border-radius: 7px; /* Archival bookplate corner, not an app-like pill */
  padding: 0.85rem 0.95rem;
  box-shadow: 
    inset 0 0 0 1px rgba(255, 255, 255, 0.75), 
    inset 0 1px 2px rgba(210, 190, 165, 0.2), 
    0 2px 7px rgba(60, 42, 22, 0.05);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.35rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  text-align: left;
  outline: none;
}

.tree-card > * {
  position: relative;
  z-index: 2;
}

.tree-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  transition: opacity var(--transition-fast);
}

/* ==========================================================================
   Generational Symbolic Treatments
   ========================================================================== */

/* Level 0: Current Generation — Canadian-Born Visual Treatment */
.tree-card.generation-current {
  background: linear-gradient(150deg, #fffdfa 0%, #faf3ec 100%);
  border-color: #d6c8be;
}

.tree-card.generation-current::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M50 86 L50 72 M50 72 L42 66 L38 69 L33 63 L38 56 L24 57 L22 52 L14 54 L19 44 L11 41 L17 31 L28 35 L33 26 L42 35 L45 22 L50 14 L55 22 L58 35 L67 26 L72 35 L83 31 L89 41 L81 44 L86 52 L84 57 L70 56 L75 63 L70 69 L66 66 L58 72 Z' fill='%239c4a36' fill-opacity='0.055' stroke='%239c4a36' stroke-opacity='0.09' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 8px bottom 8px;
  background-size: 72px 72px;
}

/* Level +1: Parent Generation — Philippine Heritage Visual Treatment (Visual Heart) */
.tree-card.generation-parents {
  background: linear-gradient(150deg, #fefdf9 0%, #f8f1e1 100%);
  border-color: #dcd0bc;
}

.tree-card.generation-parents::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Ccircle cx='50' cy='50' r='7' fill='%239e782f' fill-opacity='0.04' stroke='%239e782f' stroke-opacity='0.09' stroke-width='1.2'/%3E%3Cpath d='M50 34 L50 22 M50 66 L50 78 M34 50 L22 50 M66 50 L78 50 M39 39 L30 30 M61 61 L70 70 M39 61 L30 70 M61 39 L70 30' stroke='%239e782f' stroke-opacity='0.08' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M47 35 L50 25 L53 35 M47 65 L50 75 L53 65 M35 47 L25 50 L35 53 M65 47 L75 50 L65 53' stroke='%239e782f' stroke-opacity='0.06' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 8px bottom 8px;
  background-size: 76px 76px;
}

/* Central Family Junction Accent: Gideon + Florencia */
#unit-gideon-florencia .tree-card {
  border-color: #cbb997;
  box-shadow: 
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    0 3px 12px rgba(160, 120, 50, 0.09),
    0 1px 3px rgba(60, 45, 25, 0.05);
}

/* Level +2: Grandparents — Ancestral Archival Treatment */
.tree-card.generation-grandparents {
  background: linear-gradient(150deg, #fcf9f2 0%, #f3ead7 100%);
  border-color: #cfbeaa;
}

.tree-card.generation-grandparents::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M50 82 C50 65 36 54 26 50 C36 46 45 36 46 22 C48 35 55 45 68 48 C58 52 50 64 50 82 Z' fill='%23876d49' fill-opacity='0.03' stroke='%23876d49' stroke-opacity='0.08' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M38 42 C30 38 24 28 26 18 C34 22 38 32 38 42 Z M62 42 C70 38 76 28 74 18 C66 22 62 32 62 42 Z' stroke='%23876d49' stroke-opacity='0.07' stroke-width='1.1' fill='%23876d49' fill-opacity='0.025'/%3E%3C/svg%3E");
  background-position: right 8px bottom 8px;
  background-size: 74px 74px;
}

/* Level +3: Great-Grandparents — Deepest Root Treatment */
.tree-card.generation-great-grandparents {
  background: linear-gradient(150deg, #f9f2e4 0%, #ebdec6 100%);
  border-color: #c4b097;
}

.tree-card.generation-great-grandparents::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M50 15 C50 35 48 48 38 62 C30 72 20 78 12 85 M48 48 C56 60 68 70 82 82 M38 62 C42 72 46 82 48 88 M60 55 C65 65 72 74 76 86 M32 38 C24 48 16 56 10 60' stroke='%23705335' stroke-opacity='0.08' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='15' r='3' fill='%23705335' fill-opacity='0.08'/%3E%3C/svg%3E");
  background-position: right 8px bottom 8px;
  background-size: 74px 74px;
}

.tree-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--accent-heritage);
}

.tree-card:focus-visible {
  outline: 2px solid var(--accent-heritage);
  outline-offset: 2px;
}

.tree-card.is-selected {
  border-color: var(--accent-heritage);
  box-shadow: 0 0 0 2px var(--accent-heritage), var(--shadow-card-hover);
  background: #fffdf9;
}

/* Card Pill Row (Uniform status pill alignment across all cards) */
.card-pill-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  min-height: 16px;
}

/* Quieted Status Badges: no loud uppercase, concise, softer contrast */
.card-status-pill {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none; /* No all-uppercase */
  padding: 0.1rem 0.38rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.2;
}

.card-status-pill.status-confirmed {
  color: var(--status-confirmed-text);
  background-color: var(--status-confirmed-bg);
  border-color: var(--status-confirmed-border);
}

.card-status-pill.status-family-confirmed {
  color: var(--status-family-confirmed-text);
  background-color: var(--status-family-confirmed-bg);
  border-color: var(--status-family-confirmed-border);
}

.card-status-pill.status-needs-confirmation {
  color: var(--status-pending-text);
  background-color: var(--status-pending-bg);
  border-color: var(--status-pending-border);
}

/* Name Typography: Strong Archival Ink */
.card-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: #241b12;
  line-height: 1.25;
  letter-spacing: 0.015em;
  word-break: normal;
}

.card-nickname {
  font-family: var(--font-serif);
  font-size: 0.825rem;
  font-style: italic;
  color: var(--accent-heritage);
  margin-top: -0.1rem;
}

.card-vitals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #645a4d;
  border-top: 1px solid var(--border-delicate);
  padding-top: 0.25rem;
  margin-top: 0.1rem;
}

.card-years {
  font-weight: 600;
  white-space: nowrap;
}

.card-place {
  color: #8c8070;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 115px;
}

/* ==========================================================================
   Root Generation Group (Level 0)
   ========================================================================== */
.root-siblings-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Grounding Creed (Tightly bound to current generation — Layer 3) */
.foundation-creed-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.85rem;
  opacity: 0.60;
  position: relative;
  z-index: 3;
}

.foundation-creed-wrap::before,
.foundation-creed-wrap::after {
  content: "";
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, transparent, #cbb997, transparent);
}

.foundation-creed {
  font-family: var(--font-serif);
  font-size: 0.725rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #726350;
}

/* ==========================================================================
   Collapsible Sibling Rails (No Carousel Feel, Clean Wall Clustered)
   ========================================================================== */
.sibling-collapsible-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.btn-expand-siblings {
  background: var(--bg-surface);
  border: 1px dashed var(--border-archival);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.725rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--transition-fast);
  z-index: 3;
}

.btn-expand-siblings:hover {
  background: #ffffff;
  border-color: var(--accent-heritage);
  color: var(--text-main);
  box-shadow: var(--shadow-card);
}

.btn-expand-siblings.status-amber-pill {
  border-color: var(--status-pending-border);
  background: var(--status-pending-bg);
  color: var(--status-pending-text);
}

.badge-mini-amber {
  font-size: 0.625rem;
  font-weight: 700;
  background: #ffffff;
  padding: 0.08rem 0.32rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--status-pending-border);
}

.expand-icon {
  font-weight: bold;
  font-size: 0.8rem;
}

.sibling-rail {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 0.65rem 0 0.15rem;
  display: block;
  transition: opacity var(--transition-smooth);
}

.sibling-rail.is-collapsed {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Sibling Track: Tidy genealogy cluster, no ugly scrollbar */
.sibling-rail-track {
  display: flex;
  flex-wrap: wrap; /* Wraps cleanly into 2 rows, eliminating horizontal carousel feel */
  justify-content: center;
  gap: 0.55rem;
  padding: 0.25rem;
}

.sibling-rail-track .tree-card {
  width: 184px; /* Scaled up ~10% */
  min-height: 98px;
  padding: 0.7rem 0.8rem;
}

.sibling-rail-track .tree-card .card-name {
  font-size: 0.95rem;
}

/* ==========================================================================
   Modes & Focus States
   ========================================================================== */

/* Needs Confirmation Mode Highlight */
body.mode-needs-confirmation .tree-card.status-needs-confirmation {
  border-color: #b87a28;
  box-shadow: 0 0 0 3px rgba(184, 122, 40, 0.3), var(--shadow-card-hover);
  background: #fffcf7;
}

body.mode-needs-confirmation .tree-card.status-confirmed {
  opacity: 0.65;
}

/* Focus Mode Dimming (Softened context while keeping names legible) */
body.mode-focus .tree-card.is-dimmed {
  opacity: 0.55;
}

body.mode-focus .tree-card.is-connected {
  border-color: var(--accent-heritage);
  box-shadow: 0 0 0 2px rgba(135, 87, 43, 0.35);
}

body.mode-focus .tree-svg path.is-dimmed {
  opacity: 0.35;
}

body.mode-focus .tree-svg path.is-highlighted {
  stroke: var(--accent-heritage);
  stroke-width: 2.5px;
  opacity: 1;
}

/* Ancestral Line Mode: hide collateral sibling buttons */
body.mode-direct-line .sibling-collapsible-wrapper {
  display: none !important;
}

/* ==========================================================================
   Slide-out Details Drawer (Desktop) & Bottom Sheet (Mobile)
   ========================================================================== */
.details-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  visibility: hidden;
  transition: visibility var(--transition-smooth);
}

.details-panel.is-open {
  pointer-events: auto;
  visibility: visible;
}

.details-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 20, 15, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.details-panel.is-open .details-backdrop {
  opacity: 1;
}

.details-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100%;
  background: var(--bg-parchment);
  border-left: 1px solid var(--border-archival);
  box-shadow: var(--shadow-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-smooth);
  z-index: 2;
  overflow-y: auto;
}

.details-panel.is-open .details-card {
  transform: translateX(0);
}

.details-header {
  padding: 1.15rem 1.4rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-archival);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: sticky;
  top: 0;
  z-index: 3;
}

.details-meta-pill-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.details-overline {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-heritage);
}

.details-level-chip {
  font-size: 0.625rem;
  font-weight: 700;
  background: var(--bg-card);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-archival);
  color: var(--text-secondary);
}

.detail-name {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  margin-top: 0.15rem;
}

.close-btn {
  background: transparent;
  border: 1px solid var(--border-archival);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.close-btn:hover {
  background-color: var(--bg-card);
  color: var(--text-main);
}

.details-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.detail-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-heritage);
}

/* Geronimo "HIS STORY" Presentation */
.geronimo-story-card {
  background: #ffffff;
  border: 1px solid var(--divider-gold);
  border-left: 4px solid var(--accent-heritage);
  border-radius: var(--radius-sm);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.story-heading {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-heritage-dark);
}

.story-narrative {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-main);
}

.story-callouts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin-top: 0.2rem;
}

.story-callout-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-archival);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
}

.story-callout-title {
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-heritage);
  margin-bottom: 0.15rem;
}

.story-callout-desc {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Vitals Grid */
.vitals-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  background: var(--bg-card);
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-archival);
}

.vitals-grid-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  gap: 0.75rem;
}

.vital-term {
  color: var(--text-muted);
  font-weight: 500;
}

.vital-desc {
  color: var(--text-main);
  font-weight: 600;
  text-align: right;
}

.privacy-protection-notice {
  font-size: 0.75rem;
  color: var(--status-pending-text);
  background: var(--status-pending-bg);
  border: 1px dashed var(--status-pending-border);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  line-height: 1.45;
}

/* Relations List */
.relation-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.relation-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-archival);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
}

.relation-item-btn {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  flex: 1;
}

.relation-item-btn:hover {
  color: var(--accent-heritage);
  text-decoration: underline;
}

.relation-role-tag {
  font-size: 0.675rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

/* Research Notes */
.research-notes-box {
  background: #fdfbf7;
  border-left: 3px solid var(--divider-gold);
  border-top: 1px solid var(--border-archival);
  border-right: 1px solid var(--border-archival);
  border-bottom: 1px solid var(--border-archival);
  padding: 0.8rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   Family Collaboration V1 (Overrides, Confirmations, Edits & History)
   ========================================================================== */

.collaboration-attribution-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.725rem;
  color: var(--accent-heritage-dark);
  background: #fdfaf4;
  border: 1px solid #dfd3bd;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  margin-top: 0.35rem;
  font-style: italic;
  line-height: 1.3;
}

.drawer-action-row {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.45rem;
  margin-bottom: 0.2rem;
}

.btn-drawer-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.775rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 42px;
  text-decoration: none;
}

.btn-edit-details {
  background: var(--accent-heritage);
  color: #ffffff;
  border: 1px solid var(--accent-heritage-dark);
  box-shadow: 0 1px 3px rgba(50, 35, 20, 0.1);
}

.btn-edit-details:hover {
  background: var(--accent-heritage-dark);
}

.btn-view-history {
  background: #ffffff;
  color: var(--text-main);
  border: 1px solid var(--border-archival);
}

.btn-view-history:hover {
  background: var(--bg-surface);
  border-color: var(--accent-heritage);
}

/* Community Confirmations Card */
.confirmations-card {
  background: var(--bg-card);
  border: 1px solid var(--border-archival);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.confirmations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.confirmations-title {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-heritage);
}

.confirmations-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.confirmation-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #fdfbf7;
  border: 1px solid #dcd0bc;
  border-radius: var(--radius-full);
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
}

.confirmation-check {
  color: #3b7b3b;
  font-weight: bold;
}

.btn-confirm-prompt {
  background: transparent;
  border: 1px dashed var(--accent-heritage);
  color: var(--accent-heritage);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.btn-confirm-prompt:hover {
  background: #faf4ea;
  border-style: solid;
}

.inline-confirm-box {
  background: #faf4ea;
  border: 1px solid #d9ccb6;
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.inline-confirm-input {
  background: #ffffff;
  border: 1px solid var(--border-archival);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  color: var(--text-main);
  box-sizing: border-box;
  width: 100%;
}

.inline-confirm-input:focus {
  outline: none;
  border-color: var(--accent-heritage);
}

.inline-confirm-actions {
  display: flex;
  gap: 0.45rem;
  justify-content: flex-end;
}

.btn-inline-cancel {
  background: transparent;
  border: 1px solid var(--border-archival);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.btn-inline-submit {
  background: var(--accent-heritage);
  border: 1px solid var(--accent-heritage-dark);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
}

/* Edit & History Sub-Views in Details Panel */
.collab-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-archival);
  margin-bottom: 0.85rem;
}

.collab-view-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
}

.btn-collab-back {
  background: transparent;
  border: none;
  color: var(--accent-heritage);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0;
}

.btn-collab-back:hover {
  text-decoration: underline;
}

.edit-form-container {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-field-label {
  font-family: var(--font-sans);
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4a3e30;
}

.form-field-input,
.form-field-textarea {
  background: #ffffff;
  border: 1px solid var(--border-archival);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-main);
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field-textarea {
  min-height: 68px;
  resize: vertical;
  line-height: 1.4;
}

.form-field-input:focus,
.form-field-textarea:focus {
  outline: none;
  border-color: var(--accent-heritage);
  box-shadow: 0 0 0 2px rgba(135, 87, 43, 0.2);
}

.form-field-help {
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.contributor-attribution-box {
  background: linear-gradient(150deg, #fffcf7 0%, #fbf4e8 100%);
  border: 1px solid #cbb997;
  border-left: 3px solid var(--accent-heritage);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.contributor-box-title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-heritage-dark);
}

.contributor-box-help {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.contributor-box-subhelp {
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--text-muted);
}

.form-actions-row {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-archival);
  position: sticky;
  bottom: 0;
  background: var(--bg-parchment);
  padding-bottom: 0.5rem;
  z-index: 5;
}

.btn-form-cancel {
  flex: 1;
  background: #ffffff;
  border: 1px solid var(--border-archival);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  min-height: 44px;
}

.btn-form-cancel:hover {
  background: var(--bg-surface);
  color: var(--text-main);
}

.btn-form-save {
  flex: 1.5;
  background: var(--accent-heritage);
  border: 1px solid var(--accent-heritage-dark);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  min-height: 44px;
  box-shadow: 0 1px 3px rgba(50, 35, 20, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.btn-form-save:hover:not(:disabled) {
  background: var(--accent-heritage-dark);
}

.btn-form-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-status-alert {
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.form-status-alert.alert-success {
  background: #eef7ee;
  border: 1px solid #b7dfb7;
  color: #276727;
}

.form-status-alert.alert-error {
  background: #fdf0ee;
  border: 1px solid #f3c2bc;
  color: #9c271b;
}

.history-item-card {
  background: #ffffff;
  border: 1px solid var(--border-archival);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-field-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-heritage);
}

.history-date {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.history-diff-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.825rem;
  background: var(--bg-surface);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid #ebe2d3;
}

.history-old-val {
  color: #8a7a66;
  text-decoration: line-through;
  word-break: break-word;
}

.history-arrow {
  color: var(--accent-heritage);
  font-weight: bold;
  font-size: 0.75rem;
}

.history-new-val {
  color: var(--text-main);
  font-weight: 600;
  word-break: break-word;
}

.history-author {
  font-size: 0.725rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* ==========================================================================
   Site Footer
   ========================================================================== */
.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-archival);
  padding: 1.25rem 1.25rem;
  margin-top: auto;
  text-align: center;
}

.footer-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.footer-text {
  font-size: 0.775rem;
  color: var(--text-secondary);
}

.footer-subtext {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ==========================================================================
   Mobile Adaptations (375px+)
   ========================================================================== */
@media (max-width: 768px) {
  /* Compact mobile header */
  .header-container {
    padding: 0.45rem 0.85rem;
    gap: 0.4rem;
  }

  .site-title {
    font-size: 1.15rem;
  }

  .site-subtitle {
    font-size: 0.65rem;
  }

  .privacy-badge {
    display: none; /* Hide badge on mobile to save vertical space */
  }

  /* Controls Container */
  .controls-container {
    padding: 0.35rem 0.65rem;
    gap: 0.35rem;
  }

  /* Row 1: Mode toggles across single row */
  .mode-toggles {
    width: 100%;
    justify-content: space-between;
    gap: 0.2rem;
    padding: 0.15rem;
  }

  .btn-mode {
    flex: 1;
    justify-content: center;
    padding: 0.35rem 0.2rem;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .btn-mode .btn-icon {
    font-size: 0.75rem;
  }

  /* Middle utility row: hidden on mobile when not in focus mode */
  .zoom-button-group {
    display: none !important;
  }

  #btn-center-root {
    display: none !important; /* Reyes–Palma branch button already provides centering */
  }

  .viewport-controls {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    justify-content: center;
  }

  body.mode-focus .viewport-controls {
    display: flex;
  }

  .btn-reset-focus {
    width: 100%;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    font-size: 0.775rem;
    border-radius: var(--radius-sm);
  }

  /* Row 2: Mobile Branch Navigator */
  .mobile-branch-nav {
    display: flex;
    padding: 0.25rem 0.65rem;
    gap: 0.25rem;
  }

  .mobile-branch-btn {
    padding: 0.35rem 0.2rem;
    font-size: 0.72rem;
    min-height: 40px;
    line-height: 1.2;
  }

  /* Mobile Embedded Heritage Atmosphere */
  .embedded-ancestral-backdrop {
    display: none !important; /* Hide Philippine landscape on mobile to avoid clutter & overflow */
  }

  .backdrop-toronto {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: -20px !important;
    width: 270px !important;
    opacity: 0.12 !important;
  }

  .backdrop-roots {
    width: 230px !important;
    opacity: 0.14 !important;
    top: -10px !important;
  }

  .botanical-junction-accent {
    width: 200px !important;
    height: 65px !important;
    opacity: 0.14 !important;
  }

  .artwork-botanical-junction {
    width: 190px !important;
  }

  .branch-banner-botanical {
    display: none !important;
  }

  .foundation-creed-wrap {
    margin-top: 0.5rem;
  }

  .tree-viewport {
    padding: 0.75rem 0.25rem 3.5rem;
  }

  /* Details Panel Mobile Bottom-Sheet */
  .details-panel {
    justify-content: center;
    align-items: flex-end;
  }

  .details-card {
    max-width: 100%;
    height: 85vh;
    border-left: none;
    border-top: 1px solid var(--border-archival);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
    -webkit-overflow-scrolling: touch;
  }

  .details-panel.is-open .details-card {
    transform: translateY(0);
  }

  /* Mobile Collaboration UI */
  .drawer-action-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .btn-drawer-action {
    min-height: 44px;
    width: 100%;
  }

  .form-actions-row {
    background: #fdfbf7;
    padding: 0.65rem 0.25rem 0.75rem;
  }

  .btn-form-cancel,
  .btn-form-save {
    min-height: 46px;
    font-size: 0.85rem;
  }
}

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