:root { -webkit-tap-highlight-color: transparent; }
body { padding-bottom: env(safe-area-inset-bottom); }
.tab-active { color: #1f5e3f; }
.tab-active i { transform: translateY(-2px); }
.fade-in { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.btn-primary { background: #1f5e3f; color: #fff; }
.btn-primary:active { background: #164430; }
textarea, input, select { font-size: 16px; } /* prevents iOS zoom */
.tree-line { border-left: 2px solid #c8a25a; }

/* ============================================================
   ORG-CHART FAMILY TREE
   Top-down hierarchy of large rounded "button" cards connected
   by lines. Built from nested <ul class="orgchart">.
   ============================================================ */
/* ------------------------------------------------------------------
   CONNECTOR MODEL (anchor-dot based)
   Every card has a small round "anchor" dot at its bottom-center
   (.org-node::after). All connector lines run between these dots:
     · a vertical line drops from a PARENT's bottom dot down to the
       children row's horizontal bus,
     · a horizontal bus spans the sibling group,
     · a vertical line rises from the bus up to each CHILD card's top.
   Generous vertical gaps (GAP below) keep cards clear of the lines.
   ------------------------------------------------------------------ */
.orgchart, .orgchart ul { list-style: none; margin: 0; padding: 0; }
.orgchart { display: flex; justify-content: center; padding-top: 4px; }
.orgchart ul {
  display: flex; justify-content: center;
  /* a row of siblings sits below their parent */
}
.orgchart li {
  position: relative;
  /* The 38px top padding is the vertical "lane" for the connector: the bus
     sits at the very top (y=0) and a riser runs the full 38px down to the
     child card, leaving the card clearly separated from the horizontal line. */
  padding: 38px 16px 0 16px;
  display: flex; flex-direction: column; align-items: center;
}
/* Horizontal "bus" linking siblings: a full-width bar across the cell,
   trimmed to a half on the first/last child so it stops at the group edge. */
.orgchart li::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 0;
  border-top: 2px solid #cbb890;
  z-index: 0;
}
/* Vertical riser running the full lane: from the bus (y=0) down to the
   top-center of this child's card (y=38). Width-independent: it lines up with
   the card because the card is centered in the cell. */
.orgchart li::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 0; height: 38px;
  border-left: 2px solid #cbb890;
  z-index: 0;
}
.orgchart li:first-child::before { left: 50%; width: 50%; }
.orgchart li:last-child::before  { left: 0;   width: 50%; }
/* the very top row (direct children of .orgchart) has nothing above it */
.orgchart > li::before, .orgchart > li::after { display: none; }
/* an only child just needs the vertical riser, no horizontal bus */
.orgchart li:only-child::before { display: none; }

/* a node's own children container */
.orgchart li > ul { position: relative; }
/* Vertical line dropping DOWN from the parent's bottom anchor dot to the
   children row's bus (top of the .org-children list, which is the cell top of
   its first row). The dot sits ~7px below the card, so this short line bridges
   that gap into the lane. */
.org-children::before {
  content: '';
  position: absolute;
  top: -9px; left: 50%;
  width: 0; height: 9px;
  border-left: 2px solid #cbb890;
  z-index: 0;
}

/* ---- the big tappable person card (the "button") ---- */
.org-node {
  display: flex; align-items: center; gap: 10px;
  width: 200px; max-width: 70vw;
  padding: 12px 14px; border-radius: 16px;
  background: #fff; border: 1.5px solid #e2dcce;
  box-shadow: 0 2px 6px rgba(60,45,20,.10);
  cursor: pointer; position: relative; text-align: left;
  transition: box-shadow .15s, transform .1s;
  z-index: 1;            /* always paint above the connector lines */
}
.org-node:active { transform: scale(.98); }
.org-node:hover { box-shadow: 0 4px 12px rgba(60,45,20,.16); }
.org-node.is-you { border-color: #1f5e3f; box-shadow: 0 0 0 2px rgba(31,94,63,.3); }

.org-avatars { display: flex; align-items: center; flex-shrink: 0; }
.org-av {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff; background: #2d7a52;
  border: 2px solid #fff; margin-left: -14px; object-fit: cover;
}
.org-av:first-child { margin-left: 0; }
.org-av.f { background: #c084a8; }
.org-av.m { background: #4a86c5; }

.org-info { min-width: 0; flex: 1; }
.org-name { font-size: 15px; font-weight: 700; line-height: 1.2; color: #2a2a2a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-spouse { font-size: 12px; color: #8a8a8a; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-rel { display: inline-block; font-size: 10.5px; color: #1f5e3f;
  background: #eaf3ee; border-radius: 8px; padding: 1px 7px; margin-top: 3px; }

/* ---- couple card: two independently-tappable halves ---- */
.org-node.org-couple { width: 280px; max-width: 88vw; gap: 0; padding: 6px; }
.org-half {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 7px 8px; border-radius: 11px; font: inherit; color: inherit;
  transition: background .12s;
}
.org-half:active { background: rgba(31,94,63,.08); transform: scale(.97); }
.org-half:hover { background: rgba(31,94,63,.06); }
.org-couple .org-name { font-size: 13.5px; }
.org-amp {
  flex-shrink: 0; align-self: center; color: #c084a8; font-size: 12px;
  padding: 0 2px;
}

/* collapse toggle button hanging off the bottom-center of a node */
.org-toggle {
  position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  background: #1f5e3f; color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); z-index: 3;
}
.org-toggle:active { transform: translateX(-50%) scale(.92); }
.org-count { font-size: 11px; font-weight: 600; }
.collapsed > ul { display: none; }
.collapsed > .org-node .org-toggle { background: #c8a25a; }

/* ---- connector anchor dot (bottom-center of a card with children) ----
   The vertical line down to the children attaches here, giving a concrete,
   width-independent connection point instead of an inferred midpoint. */
.org-node.has-kids { margin-bottom: 9px; }   /* room for the dot + clean gap */
.org-dot {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: #cbb890; border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(60,45,20,.25);
  z-index: 2;            /* above the lines, below the toggle */
}
/* When a branch is collapsed the dot turns gold to echo the toggle state. */
.collapsed > .org-node .org-dot { background: #c8a25a; }

/* ---- date inputs in side-by-side columns ----
   Native <input type="date"> on iOS/Safari has an intrinsic minimum width
   wider than a half-width grid column, so the formatted value ("Jun 26, 2026")
   spills past the rounded border and looks like it overlaps. Forcing the
   field to shrink to its container and removing the platform appearance keeps
   the date neatly inside its box. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
/* iOS renders the value via this inner element; let it shrink + ellipsize
   instead of forcing the field wider. */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
  margin: 0;
}
/* Keep the calendar picker icon from being pushed off / overlapping text. */
input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: 2px;
  flex-shrink: 0;
}
/* Let a grid/flex cell wrapping a date input shrink below its content width
   (grid/flex children default to min-width:auto, which otherwise forces the
   column wider than its share and causes the overlap). */
.grid > div:has(> input[type="date"]),
.grid > label:has(input[type="date"]) {
  min-width: 0;
}
/* In a 2-column grid the half-width column is tight for a long formatted date,
   so trim the date font slightly there to guarantee it fits the box. */
.grid-cols-2 input[type="date"] {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 6px;
}