/* tree.css: the TREE tab (states/tree.js) and one person's page (states/person.js), SPEC-TREE §5.1–§5.2.
   Loaded by index.html after family.css (it reuses .fx-in / .fx-yr / .fx-sel / .fx-chip from there and the
   global .primary / .btn / .textbtn / .mono / .sr-only from index.html).
   Tokens come from :root (--bg --fg --dim --faint --accent --sans --mono --gutter --ease); literal fallbacks
   keep the page legible if one is missing. Person colors reach only marks, names and lifelines, set per
   element by the scripts. Nothing here draws in the 3D field. Prefixes: tr- (tree), tf- (add form), pp- (person). */

/* ================================================================== TREE (tr-*) */

.tr { display: flex; flex-direction: column; padding-bottom: 8px; }

/* empty state: "Your tree starts with you." */
.tr-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 10px 0 12px; }
.tr-e1 { font: 300 17px/1.45 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }
.tr-e2 { max-width: 34em; font: 300 13px/1.6 var(--sans, system-ui, sans-serif); color: var(--dim, #5D618C); }
#trstart { margin-top: 2px; color: var(--fg, #1F2878); }

/* the chart scrolls sideways inside the drawer; it runs edge to edge (its own 24 px pad is the gutter) */
.tr-scroll {
  position: relative;
  margin: 0 calc(-1 * var(--gutter, 24px));
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--faint, #1F2878) transparent;
}
.tr-scroll::-webkit-scrollbar { height: 6px; }
.tr-scroll::-webkit-scrollbar-thumb { background: var(--faint, #1F2878); }
.tr-chart { position: relative; margin: 0 auto; flex: none; }

/* lines: one SVG under the nodes, flowing left → right. A couple's ticks join in a confluence on their
   right; a stem runs from it to the family's bar, which turns into a drop per child. The .55 is on the
   whole SVG, so where a parent's own stem and their couple tick share a few px, nothing doubles up.
   Straight runs sit on half pixels (crisp at 1 px); the 4 px corners are antialiased. */
.tr-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.tr-lines line, .tr-lines path {
  fill: none;
  stroke: var(--dim, #5D618C); stroke-width: 1;
  stroke-linecap: butt; stroke-linejoin: round;
}
/* two parents with no marriage recorded yet: a faint dotted confluence (only a recorded union is solid) */
.tr-lines .is-open { stroke-opacity: 1; }

/* a person: their portrait thumb (or mark) and 한글 name; 漢字 · English; years (SPEC-TREE §12.5).
   128 × 68 (tree.js NODE_W × NODE_H); the lines sit centered, so a node with fewer of them stays calm. */
.tr-node {
  position: absolute;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 128px; height: 68px;
  padding: 7px 10px;
  background: var(--bg, #F1E6D3);
  border: 1px solid var(--faint, #1F2878);
  border-radius: 2px;
  text-align: left;
  color: var(--fg, #1F2878);
  cursor: pointer;
  transition: border-color .15s;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
.tr-node:hover { border-color: var(--dim, #5D618C); }
.tr-node:focus-visible { outline: 1px solid var(--fg, #1F2878); outline-offset: 2px; }
.tr-node.is-ph { border-style: dashed; border-color: var(--dim, #5D618C); }
.tr-node.is-sel, .tr-node.is-sel:hover { border: 1px solid var(--fg, #1F2878); }
.tr-l1 { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 16px; }
.tr-node.has-pt .tr-l1 { gap: 6px; margin-left: -1px; }
.tr-name {
  min-width: 0; flex: 1 1 auto;
  font: 300 13px/1.2 var(--sans, system-ui, sans-serif);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 漢字 (serif, .nm-hanja) · English: small, one line, an ellipsis when it runs long */
.tr-nm {
  min-width: 0;
  font: 300 10.5px/1.25 var(--sans, system-ui, sans-serif);
  color: var(--dim, #5D618C);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-nm .nm-hanja { font-size: 10.5px; }
.tr-nm .nm-sep { color: var(--dim, #5D618C); }
.tr-l2 {
  min-height: 11px;
  font: 300 9px/1.2 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim, #5D618C);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* a new person flows in from the left */
.tr-node.is-new { animation: tr-in .28s var(--ease, cubic-bezier(.2, .7, .2, 1)) both; }
@keyframes tr-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* the couple's year: just right of their confluence, its bottom 3 px over where their stem leaves
   (tree.js sets left and top to that bottom-left corner) */
.tr-year {
  position: absolute; z-index: 1;
  transform: translateY(-100%);
  padding: 0 1px;
  font: 300 9px/1.15 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: 0;
  color: var(--dim, #5D618C);
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: pre;     /* an ended union reads "1986" over "–1990" */
  pointer-events: none;
}

/* the one filled button: + on the selected person (28 px circle, 44 px hit area), centered on the
   node's bottom edge 16 px in from its right corner, where no line runs (tree.js plusRect) */
#trplus.tr-plus {
  position: absolute; z-index: 2;
  width: 28px; height: 28px; min-height: 28px;
  padding: 0;
  border-radius: 50%;
  font: 400 17px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: 0;
}
#trplus.tr-plus::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
#trplus.tr-plus[aria-expanded="true"] { background: var(--bg, #F1E6D3); color: var(--fg, #1F2878); border-color: var(--fg, #1F2878); }
#trplus.tr-plus.is-loose { left: auto; right: -14px; top: 50%; margin-top: -14px; }

/* ---------- the family photo (#trphoto, SPEC-TREE §12.5) ----------
   Full content width in a hairline frame, at most 200 px tall (160 on a phone): a wide strip of the
   picture, cropped a little above the middle, where faces usually are. Tap to see it whole. */
.tr-photo { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; }
.tr-photo.has-photo { margin: 6px 0 14px; }
.tr-phimg {
  position: relative; display: block;
  width: 100%; max-height: 200px; aspect-ratio: 3 / 2;
  padding: 0; overflow: hidden;
  border: 1px solid var(--faint, #1F2878); border-radius: 2px;
  background: transparent;
  cursor: zoom-in;
}
.tr-phimg:hover { border-color: var(--dim, #5D618C); }
.tr-phimg:focus-visible { outline: 1px solid var(--fg, #1F2878); outline-offset: 2px; }
.tr-phpic {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 35%;
  opacity: 0; transition: opacity .25s ease-out;
}
.tr-phpic.is-loaded { opacity: 1; }
.tr-phline { display: flex; align-items: center; gap: 12px; min-height: 28px; min-width: 0; }
.tr-phcap {
  flex: 1 1 auto; min-width: 0;
  font: 300 10px/1.5 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim, #5D618C);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.textbtn.tr-phedit { flex: none; margin-left: auto; min-height: 28px; font-size: 12px; }
.tr-phline.is-add { min-height: 32px; }
.textbtn.tr-phadd { min-height: 32px; font-size: 13px; }
.tr-phmsg {
  font: 300 10px/1.5 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .14em; color: var(--dim, #5D618C);
}
/* errors are ink with a 1 px ink rule on the left, never red (§21.4) */
.tr-phmsg.is-err { font: 300 13px/1.5 var(--sans, system-ui, sans-serif); letter-spacing: 0; color: var(--fg, #1F2878); padding: 2px 0 2px 10px; border-left: 1px solid var(--fg, #1F2878); }
.tr-phed, .tr-phconfirm { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px; }
.tr-phrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.tr-phcapin { flex: 1 1 220px; min-width: 0; width: auto; min-height: 36px; padding: 6px 0; }
.tr-phrow .fx-yr { min-height: 36px; padding: 6px 0; }
.tr-phacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.btn.tr-phsave { min-height: 40px; padding: 0 16px; font-size: 10px; }
.tr-phmore { display: inline-flex; align-items: center; gap: 16px; margin-left: auto; }
.textbtn.tr-phq { min-height: 28px; font-size: 12px; }
.tr-phq-text { font: 300 14px/1.55 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }

/* NOT CONNECTED YET */
.tr-loose { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--faint, #1F2878); }
.tr-lh {
  font: 300 10px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim, #5D618C);
}
.tr-lt { margin: 4px 0 14px; font: 300 13px/1.5 var(--sans, system-ui, sans-serif); color: var(--dim, #5D618C); }
.tr-lwrap { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-right: 16px; }
.tr-lslot { position: relative; display: inline-block; }
.tr-node.is-loose { position: relative; }

/* ---------- footer: selection line · menu · ONE MORE? ---------- */

.tr-line { display: flex; align-items: center; gap: 6px 14px; min-height: 44px; min-width: 0; }
.tr-swho { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.tr-sname {
  min-width: 0;
  font: 300 15px/1.3 var(--sans, system-ui, sans-serif);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-skin {
  flex: 0 1 auto; min-width: 0;
  font: 300 10px/1.3 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim, #5D618C);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.textbtn.tr-open {
  flex: none; margin-left: auto; min-height: 44px;
  font: 300 10px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .14em; color: var(--fg, #1F2878);
  white-space: nowrap;
}

.tr-ft {
  font: 300 10px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim, #5D618C);
}
.tr-fhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.tr-menu { display: flex; flex-direction: column; gap: 10px; }
.tr-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.tr-role { min-height: 40px; padding: 0 14px; font-size: 10px; }
.tr-why { font: 300 12px/1.5 var(--sans, system-ui, sans-serif); color: var(--dim, #5D618C); }
.tr-more { display: flex; flex-direction: column; gap: 10px; }
.tr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.btn.tr-moreb { min-height: 40px; padding: 0 16px; font-size: 10px; white-space: normal; text-align: center; }

/* ---------- the add form (tf-*) ---------- */

.tf {
  display: flex; flex-direction: column; gap: 10px;
  max-height: min(62vh, 560px); max-height: min(62dvh, 560px);
  overflow-y: auto; overscroll-behavior: contain;
  margin: -4px calc(-1 * var(--gutter, 24px)) 0; padding: 4px var(--gutter, 24px) 2px;
}
.tf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-new, .tf-extras { display: flex; flex-direction: column; gap: 10px; }
.tf-extras:empty { display: none; }
.tf-name { font-size: 16px; }
.tf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.tf-pair { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tf-grow { flex: 1 1 200px; }
.tf-k { flex: none; font: 300 13px/1.3 var(--sans, system-ui, sans-serif); color: var(--dim, #5D618C); white-space: nowrap; }
.tf-yr { min-height: 36px; padding: 6px 0; }
.tf-place { flex: 1 1 120px; min-width: 100px; width: auto; min-height: 36px; padding: 6px 0; }
.tf-sel { flex: 1 1 160px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.tf-approx {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px;
  font: 300 14px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  color: var(--fg, #1F2878); cursor: pointer;
}
.tf-check {
  display: inline-flex; align-items: center; gap: 10px; min-height: 32px; align-self: flex-start;
  font: 300 14px/1.3 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); cursor: pointer;
}
.tf-approx input, .tf-check input { width: 16px; height: 16px; margin: 0; flex: none; }
.tf-exlink { align-self: flex-start; }
.tf-hint { align-self: flex-start; color: var(--fg, #1F2878); }
.tf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 2px; }
.primary.tf-add { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tf-err { font: 300 13px/1.5 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); padding: 2px 0 2px 10px; border-left: 1px solid var(--fg, #1F2878); }

/* ================================================================== PERSON (pp-*) */

.pp { display: flex; flex-direction: column; padding: 6px 0 16px; }
.pp-top { display: flex; flex-direction: column; gap: 6px; }
.pp-htext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* the portrait beside the heading (SPEC-TREE §12): 72 px, a hairline frame, radius 2, cropped to fill.
   Tap for the photo viewer. Without one, the heading keeps its mark. */
.pp-top.has-pt { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.pp-portrait {
  position: relative; display: block;
  width: 72px; height: 72px; margin-top: 3px;
  padding: 0; overflow: hidden;
  border: 1px solid var(--faint, #1F2878); border-radius: 2px;
  background: transparent;
  cursor: zoom-in;
}
.pp-portrait:hover { border-color: var(--dim, #5D618C); }
.pp-portrait:focus-visible { outline: 1px solid var(--fg, #1F2878); outline-offset: 2px; }
.pp-ptimg {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  opacity: 0; transition: opacity .2s ease-out;
}
.pp-ptimg.is-loaded { opacity: 1; }
/* + add a photo · change photo · remove (for those who may edit them), quiet like "edit names" */
.pp-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; min-width: 0; }
.textbtn.pp-phbtn { min-height: 28px; font-size: 12px; }
.pp-phbusy {
  min-height: 28px; display: inline-flex; align-items: center;
  font: 300 10px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .14em; color: var(--dim, #5D618C);
}
.pp-pherr { flex-basis: 100%; }
.pp-photo.pp-phconfirm { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
.pp-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pp-name {
  min-width: 0;
  font: 300 24px/1.25 var(--sans, system-ui, sans-serif);
  letter-spacing: .005em;
  overflow-wrap: anywhere;
}
.pp-sub {
  font: 300 10px/1.5 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim, #5D618C);
  font-variant-numeric: tabular-nums;
}
.pp-via { font: 300 13px/1.5 var(--sans, system-ui, sans-serif); color: var(--dim, #5D618C); }

.pp-sec { margin-top: 26px; }
.pp-h {
  margin: 0 0 10px;
  font: 300 10px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim, #5D618C);
}
.pp-none, .pp-prompt { font: 300 13px/1.6 var(--sans, system-ui, sans-serif); color: var(--dim, #5D618C); }
.pp-prompt { margin-bottom: 12px; max-width: 34em; }
.pp-gone { margin: 28px 0; }
.pp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.btn.pp-sm { min-height: 40px; padding: 0 16px; font-size: 10px; }
.textbtn.pp-quiet { color: var(--dim, #5D618C); }

/* WHO THEY WERE */
.pp-about {
  font: 300 15px/1.6 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878);
  white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden;
}
.pp-about.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.pp-about + .pp-acts { margin-top: 4px; }
.pp-edit { display: flex; flex-direction: column; gap: 8px; }
.pp-ta {
  display: block; width: 100%; min-height: 9.6em;
  padding: 10px 12px;
  border: 1px solid var(--faint, #1F2878); border-radius: 2px;
  background: transparent; color: var(--fg, #1F2878);
  font: 300 15px/1.6 var(--sans, system-ui, sans-serif);
  resize: vertical;
}
.pp-ta:focus { border-color: var(--dim, #5D618C); outline: none; }
.pp-edrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pp-hint { font: 300 12px/1.5 var(--sans, system-ui, sans-serif); color: var(--dim, #5D618C); }
.pp-count {
  flex: none;
  font: 300 9px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .1em; color: var(--dim, #5D618C); font-variant-numeric: tabular-nums;
}
.pp-err { font: 300 13px/1.5 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); padding: 2px 0 2px 10px; border-left: 1px solid var(--fg, #1F2878); }

/* MARRIED TO */
.pp-urow { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.pp-urow + .pp-urow { margin-top: 6px; }
.pp-pbtn, .pp-chip {
  display: inline-flex; align-items: center; align-self: flex-start;
  min-height: 32px; padding: 0;
  font: 300 14px/1.3 var(--sans, system-ui, sans-serif);
  color: var(--fg, #1F2878);
  cursor: pointer;
}
.pp-pbtn:hover .ptag-name, .pp-pbtn:focus-visible .ptag-name,
.pp-chip:hover .ptag-name, .pp-chip:focus-visible .ptag-name {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.pp-pbtn .ptag-years { font: 300 10px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace); letter-spacing: .08em; }
.pp-umeta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; padding-left: 16px; }
.pp-utext {
  font: 300 10px/1.6 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim, #5D618C);
  overflow-wrap: anywhere;
}
.textbtn.pp-uedit { min-height: 28px; font-size: 12px; }
.textbtn.pp-add { min-height: 32px; font-size: 13px; }
#ppunions > .pp-add { margin-top: 2px; }
.pp-uform {
  display: flex; flex-direction: column; gap: 10px;
  margin: 8px 0 4px 16px; padding: 12px 0 4px 14px;
  border-left: 1px solid var(--faint, #1F2878);
}
.pp-chips2 { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pp-fk { font: 300 13px/1.3 var(--sans, system-ui, sans-serif); color: var(--dim, #5D618C); }
.pp-yr { min-height: 36px; padding: 6px 0; }
.pp-how { min-height: 36px; padding: 6px 0; }
.pp-confirm { display: flex; flex-direction: column; gap: 10px; }
.pp-confirm p, p.pp-confirm { font: 300 14px/1.55 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }

/* PARENTS · CHILDREN · SIBLINGS */
.pp-kins { display: flex; flex-direction: column; gap: 4px; }
.pp-kin { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.pp-k {
  padding-top: 9px;
  font: 300 10px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim, #5D618C);
}
.pp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; min-width: 0; }
.pp-half {
  margin-left: 4px;
  font: 300 9px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim, #5D618C);
  white-space: nowrap;
}

/* PLACES */
.pp-life { display: flex; align-items: center; gap: 6px; }
.pp-before {
  flex: none;
  font: 300 9px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .08em; color: var(--dim, #5D618C);
}
.pp-lsvg { flex: 1 1 auto; min-width: 0; height: 16px; overflow: visible; }
.pp-lbase { stroke: var(--faint, #1F2878); stroke-width: 1; }
.pp-lseg, .pp-ltick { stroke-width: 1; shape-rendering: crispEdges; }
.pp-moves {
  margin-top: 8px;
  font: 300 10px/1.7 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim, #5D618C);
  overflow-wrap: anywhere;
}
.pp-moves + .textbtn { margin-top: 2px; }
.pp-go {
  display: inline-flex; align-items: center; min-height: 36px; margin-top: 2px;
  font: 300 10px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg, #1F2878);
  text-decoration: underline; text-decoration-color: var(--faint, #1F2878); text-underline-offset: 4px;
}
.pp-go:hover, .pp-go:focus-visible { text-decoration-color: var(--fg, #1F2878); }

/* THEIR MEMORIES */
.pp-mlist { display: flex; flex-direction: column; border-top: 1px solid var(--faint, #1F2878); }
.pp-mem {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 12px;
  width: calc(100% + 16px); margin: 0 -8px;
  min-height: 44px; padding: 10px 8px;
  border-bottom: 1px solid var(--faint, #1F2878);
  text-align: left; color: var(--fg, #1F2878);
  transition: background-color .12s;
}
.pp-mem:hover, .pp-mem:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pp-mem:focus-visible { outline-offset: -1px; }
.pp-my {
  font: 300 10px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .1em; color: var(--dim, #5D618C); font-variant-numeric: tabular-nums;
}
.pp-mt { min-width: 0; font: 300 14px/1.4 var(--sans, system-ui, sans-serif); overflow-wrap: anywhere; }
.pp-ml {
  font: 300 9px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim, #5D618C); white-space: nowrap;
}

/* remove from the family */
.pp-rm { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }

/* footer: SHOW IN FIELD · SEE IN TREE · INVITE (all outlined) */
.pp-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.pp-fbtn { min-height: 40px; padding: 0 14px; font-size: 10px; }
.btn.pp-fbtn[aria-pressed="true"] { border-color: var(--fg, #1F2878); }

/* ================================================================== phones */

@media (max-width: 699px) {
  .tr-phimg { max-height: 160px; }
  .tr-lwrap { gap: 10px 20px; }
  .tf { max-height: min(58vh, 520px); max-height: min(58dvh, 520px); }
  .tf-row { gap: 6px 14px; }
  .pp-kin { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .pp-name { font-size: 22px; }
  .btn.pp-fbtn { flex: 1 1 auto; padding: 0 10px; }
}
@media (max-width: 380px) {
  .tf-k { font-size: 12px; }
  .btn.tr-role { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-node.is-new { animation: none; }
  .tr-phpic, .pp-ptimg { transition: none; }
  .tr-node, .pp-mem { transition: none; }
}

/* §25: 여 · Female | 남 · Male | 모름 · Not known (states/tree.js add form, states/person.js) */
.sex-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.sex-chips .sex-chip [lang="ko"] { font-family: var(--kr, "Noto Sans KR", sans-serif); }
.sex-chips .sex-chip.is-guess { border-style: dashed; }
.sex-chips .sex-guess { font: 400 10px/1.2 var(--mono, "IBM Plex Mono", monospace); letter-spacing: .04em; color: var(--dim, #5D618C); }
.sex-chips .sex-guess[hidden] { display: none; }
.pp-sex { margin-top: 2px; font: 400 10.5px/1.3 var(--mono, "IBM Plex Mono", monospace); color: var(--dim, #5D618C); }