/* family.css: FAMILY tab (states/family.js), invite state (states/invite.js) and gate content (gates.js).
   SPEC §9.3, §9.6, §10. Loaded by index.html after the inline <style>.
   Tokens come from :root (--bg --fg --dim --faint --accent --inherit --sans --mono); literal fallbacks
   keep the page legible if a token is missing. Person colors only reach marks, names, lifelines, ticks
   and color swatches, through the --c custom property set per element by the scripts. */

/* ------------------------------------------------------------------ shared controls (fx-*) */

.fx-k {
  font: 300 10px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg, #1F2878);   /* §21.7.4: labels are never mute (.fx-soft and .g-small notes stay mute) */
}
@media (max-width: 699px) {
  .fx-k { font-size: 12px; }
  .fx-k [lang="ko"] { font-size: 13px; }
}
.fx-soft { color: var(--dim, #5D618C); text-transform: none; letter-spacing: .02em; }
.fx-mono { font-family: var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace); }
.fx-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fx-err {
  margin: 0;
  padding: 2px 0 2px 10px;
  border-left: 1px solid var(--fg, #1F2878);
  font: 300 13px/1.5 var(--sans, system-ui, sans-serif);
  color: var(--fg, #1F2878);
}

.fx-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--dim, #5D618C);
  border-radius: 999px;
  background: transparent;
  color: var(--fg, #1F2878);
  font: 300 11px/1.2 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;      /* long labels wrap on phones instead of overflowing the drawer */
  cursor: pointer;
  touch-action: manipulation;
}
.fx-btn:hover, .fx-btn:focus-visible { border-color: var(--fg, #1F2878); outline: none; }
.fx-btn:focus-visible { box-shadow: 0 0 0 2px var(--bg, #F1E6D3), 0 0 0 3px var(--fg, #1F2878); }
.fx-btn:disabled { color: var(--dim, #5D618C); cursor: default; border-color: var(--dim, #5D618C); }
.fx-btn.primary {
  background: var(--fg, #1F2878);
  border-color: var(--fg, #1F2878);
  color: var(--bg, #F1E6D3);
  font-weight: 400;
}
.fx-btn.primary:hover, .fx-btn:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fx-btn.primary:disabled { background: var(--dim, #5D618C); border-color: var(--dim, #5D618C); color: var(--bg, #F1E6D3); text-decoration: none; }
.fx-sm { min-height: 32px; padding: 0 12px; font-size: 10px; }
.fx-wide { display: flex; width: 100%; min-height: 52px; font-size: 12px; letter-spacing: .18em; }

.fx-link {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg, #1F2878);
  font: 300 13px/1.3 var(--sans, system-ui, sans-serif);
  text-align: left;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;   /* a control is underlined words in ink (§21.4) */
  cursor: pointer;
}
a.fx-link { color: var(--fg, #1F2878); }
.fx-link:hover, .fx-link:focus-visible { text-decoration-thickness: 2px; outline: none; }
.fx-link:disabled { color: var(--dim, #5D618C); cursor: default; text-decoration: none; }

.fx-in {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--faint, #1F2878);
  border-radius: 0;
  background: transparent;
  color: var(--fg, #1F2878);
  font: 300 16px/1.4 var(--sans, system-ui, sans-serif);   /* 16 px: no zoom-on-focus on iOS */
  caret-color: var(--fg, #1F2878);
}
.fx-in::placeholder { color: var(--dim, #5D618C); opacity: 1; }
.fx-in:focus { outline: none; border-bottom-color: var(--fg, #1F2878); }
.fx-in[readonly] { color: var(--fg, #1F2878); }
.fx-yr {
  width: 6ch; min-width: 6ch; flex: none;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.fx-sel {
  width: auto; min-width: 9em; flex: 1 1 9em;
  padding-right: 18px;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim, #5D618C) 50%),
                    linear-gradient(135deg, var(--dim, #5D618C) 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 5px) 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.fx-sel option { background: var(--bg, #F1E6D3); color: var(--fg, #1F2878); }

.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chip {
  -webkit-appearance: none; appearance: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--faint, #1F2878);
  border-radius: 999px;
  background: transparent;
  color: var(--dim, #5D618C);
  font: 300 12px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .06em;
  cursor: pointer;
}
.fx-chip:hover, .fx-chip:focus-visible { color: var(--fg, #1F2878); border-color: var(--dim, #5D618C); outline: none; }
/* the chosen chip is filled, with a check, so the choice is plain at a glance (parent, child, partner, …) */
.fx-chip[aria-pressed="true"], .fx-chip[aria-pressed="true"]:hover { color: var(--bg, #F1E6D3); background: var(--fg, #1F2878); border-color: var(--fg, #1F2878); font-weight: 400; }
.fx-chip[aria-pressed="true"]::before { content: '✓ '; }
.fx-chip[aria-pressed="true"]:focus-visible { box-shadow: 0 0 0 2px var(--bg, #F1E6D3), 0 0 0 3.5px var(--fg, #1F2878); }

/* color picker: YOU'LL APPEAR IN ■ OCHRE · change */
.fx-cpick { display: flex; flex-direction: column; gap: 10px; }
.fx-cp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fx-cp-line .fx-link { min-height: 28px; font-size: 13px; }
.fx-cp-mk, .g-cp-mk {
  display: inline-block; flex: none;
  box-sizing: border-box;
  width: 8px; height: 8px;
  border: 1px solid var(--c, var(--fg, #1F2878));
  background: var(--c, var(--fg, #1F2878));
}
.fx-cp-name, .g-cp-name {
  font: 300 10px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .16em;
}
.fx-swatches { display: grid; grid-template-columns: repeat(8, 32px); gap: 8px; }
.fx-swatch {
  -webkit-appearance: none; appearance: none;
  position: relative;
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--c, #888);
  cursor: pointer;
}
.fx-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg, #F1E6D3), 0 0 0 3px var(--fg, #1F2878); }
.fx-swatch:focus-visible { outline: 1px solid var(--fg, #1F2878); outline-offset: 4px; }
.fx-swatch:disabled { background: transparent; box-shadow: inset 0 0 0 1px var(--c, #5D618C); cursor: not-allowed; }
.fx-swatch:disabled::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px;
  background: var(--c, #5D618C); transform: rotate(-45deg);
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--fg, #1F2878); }

/* ------------------------------------------------------------------ lifeline editor (led-*) */

.led { display: flex; flex-direction: column; gap: 14px; }
.led-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.led-line > .fx-k { min-width: 4.5em; }
.led-line > .fx-soft { font: 300 12px/1.3 var(--sans, system-ui, sans-serif); }
.led-approx, .led-check {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px;
  color: var(--fg, #1F2878);
  font: 300 14px/1.3 var(--sans, system-ui, sans-serif);
  cursor: pointer;
}
.led-approx { font-family: var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace); gap: 4px; }
.led-approx input, .led-check input { width: 16px; height: 16px; margin: 0; flex: none; }
.led-died { display: inline-flex; align-items: center; gap: 8px; }
.led-moves { display: flex; flex-direction: column; gap: 8px; }
.led-moves > .fx-link { align-self: flex-start; }
.led-rows { display: flex; flex-direction: column; gap: 6px; }
.led-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.led-row .fx-sel { max-width: 100%; }
.led-newplace { flex: 1 1 140px; min-width: 120px; width: auto; }
.led-x {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; flex: none;
  padding: 0; border: 0; background: none;
  color: var(--dim, #5D618C);
  font: 300 18px/1 var(--sans, system-ui, sans-serif);
  cursor: pointer;
}
.led-x:hover, .led-x:focus-visible { color: var(--fg, #1F2878); outline: none; }
.led-x:focus-visible { box-shadow: 0 0 0 1px var(--fg, #1F2878); }

/* ------------------------------------------------------------------ FAMILY tab (fam-*) */

.fam { display: flex; flex-direction: column; gap: 20px; padding-bottom: 24px; }

/* #lastcallout */
.fam-callout {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--fg, #1F2878);
}
.fam-callhead {
  font: 300 10px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg, #1F2878);
}
/* the seal square before the words (§21.5), the only red */
.fam-callhead::before { content: ''; display: inline-block; flex: none; box-sizing: border-box; width: 8px; height: 8px; border: 1.5px solid var(--accent, #E0533A); vertical-align: 0; margin-right: 8px; }
.fam-calltext { margin: 0; font: 300 16px/1.4 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }
.fam-callname { opacity: 1; }
.fam-callgo {
  align-self: flex-start;
  color: var(--fg, #1F2878);
  font: 300 11px/1.2 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .16em; text-transform: uppercase;
}

/* #lifelines */
.fam-lines { display: flex; flex-direction: column; }
.fam-axis { position: relative; height: 16px; margin-bottom: 2px; }
.fam-ax {
  position: absolute; top: 0;
  font: 300 9px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .12em;
  color: var(--dim, #5D618C);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fam-ax0 { left: 0; }
.fam-axnow { transform: translateX(-50%); color: var(--fg, #1F2878); }
.fam-axend { right: 0; }

.fam-row {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--faint, #1F2878);
  cursor: pointer;
}
/* the soloed row's 1 px --fg left rule, drawn in the gutter so the row content never shifts */
.fam-row.is-solo::before {
  content: '';
  position: absolute;
  left: -12px; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--fg, #1F2878);
}
.fam-row.is-open { cursor: default; }
.fam-row.is-open .fam-head, .fam-row.is-open > .fam-life { cursor: pointer; }

/* line 1: the head (mark, name, caption; toggles solo) and › (opens the person, SPEC-TREE §5.3) */
.fam-line1 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fam-line1 > .fam-head { flex: 1 1 auto; width: auto; min-width: 0; }
.fam-open {
  -webkit-appearance: none; appearance: none;
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin: -6px -14px -6px 0;   /* a 44 px target without making the row taller or pushing it in */
  padding: 0;
  border: 0;
  background: none;
  font: 300 14px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  color: var(--dim, #5D618C);
  cursor: pointer;
  transition: color .15s;
}
.fam-open:hover, .fam-open:focus-visible { color: var(--fg, #1F2878); }
.fam-open:focus-visible { outline: 1px solid var(--fg, #1F2878); outline-offset: -8px; }

.fam-head {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px;
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.fam-head:focus-visible { outline: 1px solid var(--fg, #1F2878); outline-offset: 3px; }
.fam-tag { font: 300 15px/1.3 var(--sans, system-ui, sans-serif); }
.fam-tag .ptag-name { font-size: 15px; }
.fam-cap {
  display: inline-flex; flex-wrap: wrap; gap: 0 10px;
  font: 300 10px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .08em;
  color: var(--dim, #5D618C);
}
.fam-span { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the lifeline: 1950 … NOW … LAST */
.fam-life { position: relative; height: 20px; }
.fam-base, .fam-fut, .fam-seg { position: absolute; top: 10px; height: 1px; display: block; }
.fam-base { left: 0; background: var(--faint, #1F2878); }
.fam-fut {
  right: 0;
  background: repeating-linear-gradient(90deg, var(--faint, #1F2878) 0 2px, transparent 2px 6px);
}
.fam-seg { background: var(--c, var(--fg, #1F2878)); }
.fam-seg.is-dash {
  background: repeating-linear-gradient(90deg, var(--c, var(--fg, #1F2878)) 0 3px, transparent 3px 7px);
}
.fam-before {
  position: absolute; left: 0; top: -5px;
  font: 300 9px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .08em;
  color: var(--dim, #5D618C);
  pointer-events: none;
}
.fam-tick {
  -webkit-appearance: none; appearance: none;
  position: absolute; top: 0;
  width: 12px; height: 20px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.fam-tickmark {
  position: absolute; left: 50%;
  width: 1px; margin-left: -.5px;
  display: block;
}
.fam-tick.is-t .fam-tickmark { top: 9px; height: 3px; background: var(--dim, #5D618C); }
.fam-tick.is-c .fam-tickmark { top: 7px; height: 7px; background: var(--c, var(--fg, #1F2878)); }
/* a memory with one witness left: the seal square on the lifeline (§21.5), never a red line */
.fam-tick.is-r .fam-tickmark { top: 6px; width: 8px; height: 8px; margin-left: -4px; box-sizing: border-box; border: 1.5px solid var(--accent, #E0533A); background: transparent; }
.fam-tick:hover .fam-tickmark, .fam-tick:focus-visible .fam-tickmark { width: 3px; margin-left: -1.5px; }
.fam-tick:focus-visible { outline: 1px solid var(--fg, #1F2878); outline-offset: 0; }

.fam-meta {
  display: block;
  font: 300 10px/1.9 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim, #5D618C);
}
.fx-link.fam-inline {
  display: inline;
  min-height: 0;
  padding: 4px 0;           /* a taller hit area without moving the line */
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  vertical-align: baseline;
  color: var(--fg, #1F2878);
}
.fam-new { color: var(--fg, #1F2878); }

/* expanded row */
.fam-x { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; cursor: default; }
.fam-showing {
  display: block;
  font: 300 10px/1.9 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim, #5D618C);
}
.fam-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fam-editor, .fam-panel {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 0 4px;
  border-top: 1px dashed var(--faint, #1F2878);
}
.fam-field { display: flex; flex-direction: column; gap: 6px; }
.fam-dim { margin: 0; font: 300 13px/1.55 var(--sans, system-ui, sans-serif); color: var(--dim, #5D618C); }
.fam-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.fam-devlink { font: 300 12px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace); letter-spacing: .02em; }
.fam-devs { display: flex; flex-direction: column; }
.fam-dev {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--faint, #1F2878);
  font: 300 14px/1.4 var(--sans, system-ui, sans-serif);
}
.fam-devname { color: var(--fg, #1F2878); }
.fam-devwhen { font-size: 13px; }
.fx-link.fam-devrm {
  margin-left: auto;
  font: 300 10px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .14em;
}
.fam-confirm { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.fam-confirm p, .fam-confirmtext { margin: 0; font: 300 14px/1.5 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }

/* footer */
.fam-foot {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--faint, #1F2878);
}
.fam-blurb {
  margin: 0;
  font: 300 10px/1.7 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .06em;
  color: var(--dim, #5D618C);
}
.fam-links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

/* ------------------------------------------------------------------ invite state (inv-*) */

.inv { display: flex; flex-direction: column; gap: 22px; padding-bottom: 24px; }
.inv-sec { display: flex; flex-direction: column; gap: 8px; }
.inv-head { margin-top: 2px; }
.inv-row {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--faint, #1F2878);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.inv-row:last-child { border-bottom: 1px solid var(--faint, #1F2878); }
.inv-row:focus-visible { outline: 1px solid var(--fg, #1F2878); outline-offset: 2px; }
.inv-tag { font: 300 15px/1.3 var(--sans, system-ui, sans-serif); }
.inv-cap {
  font: 300 10px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .08em;
  color: var(--dim, #5D618C);
}
.inv-go {
  margin-left: auto;
  font: 300 10px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .16em;
  color: var(--fg, #1F2878);
}
.inv-row:hover .inv-go { text-decoration: underline; text-underline-offset: 3px; }
.inv-row.is-ask { cursor: default; }   /* not-invitable placeholder: says who to ask, opens nothing */
.inv-new { gap: 18px; }
.inv-field { display: flex; flex-direction: column; gap: 8px; }
.inv-other { max-width: 22em; }
.inv-where { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.inv-conseq { margin: 0; font: 300 15px/1.5 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }
.inv-dim { margin: 0; font: 300 13px/1.55 var(--sans, system-ui, sans-serif); color: var(--dim, #5D618C); }
.inv-act { gap: 12px; }
.inv-act > .fx-link { align-self: center; }
.inv-lede { margin: 0; font: 300 18px/1.45 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }
.inv-lede code { font-size: 14px; color: var(--fg, #1F2878); white-space: nowrap; }
.inv-who { display: flex; flex-direction: column; gap: 6px; }
.inv-big { font: 300 22px/1.3 var(--sans, system-ui, sans-serif); }
.inv-big .ptag-name { font-size: 22px; }
.inv-cap-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.inv-cap-line .fx-link { min-height: 24px; font-size: 10px; letter-spacing: .16em; color: var(--fg, #1F2878); }
.inv-count { margin: 0; font: 300 17px/1.4 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }
.inv-meta {
  margin: 0;
  font: 300 10px/1.5 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim, #5D618C);
}
.inv-land { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.inv-land-t { font: 300 15px/1.4 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }
.inv-notein {
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid var(--faint, #1F2878);
  resize: vertical;
}
.inv-notein:focus { border-color: var(--fg, #1F2878); }
.inv-noten {
  align-self: flex-end;
  font: 300 9px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .12em;
}
.inv-link {
  padding: 10px 12px;
  border: 1px solid var(--faint, #1F2878);
  font: 300 13px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .01em;
  text-overflow: ellipsis;
}
.inv-link:focus { border-color: var(--fg, #1F2878); }
.inv-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.inv-row2 > .fx-btn.primary { flex: 1 1 auto; }
.inv-send { font-size: 13px; }
.inv-send a.fx-link { min-height: 32px; }
.inv-warn {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--faint, #1F2878);
  font: 300 13px/1.5 var(--sans, system-ui, sans-serif);
  color: var(--fg, #1F2878);
}
.inv-bang { font: 400 13px/1.5 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace); }
.inv-end { margin-top: -6px; }

.copy-ta { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------------------ gates (#gate, g-*) */

/* The gate frame (#gate overlay, the panel's width, padding and border) is index.html's: `#gate > *`.
   Here: what goes inside the panel. */

/* The one filled button on screen is the gate's (SPEC §8.2): anything filled underneath is hidden. */
body[data-gate] #add,
body[data-gate] #peekbar,
body[data-gate] #drawer .primary { visibility: hidden !important; }

.g-panel {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  color: var(--fg, #1F2878);
  font-family: var(--sans, system-ui, sans-serif);
  font-weight: 300;
}
.g-panel:focus { outline: none; }
.g-panel > p, .g-panel h1, .g-panel blockquote { margin: 0; }

.g-kick {
  font: 300 10px/1.5 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim, #5D618C);
}
.g-inviter { font-weight: 400; }
.g-brand {
  font: 300 13px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fg, #1F2878);
  padding-bottom: 6px;
}
.g-title { font: 300 24px/1.25 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }
.g-brand.g-title { font: 300 13px/1.4 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace); }
/* §21.4: the kicker is the mark 강산 · 江山; welcome's brand is the title slip (E31) */
.g-mark .g-hj, .g-slip-hj { font-family: var(--serif, 'Noto Serif KR', serif); }
/* the family crest: above the mark, and at the top of the welcome slip */
.g-crest { display: block; width: 56px; height: auto; margin: 0 0 12px; user-select: none; }
.g-slip .g-crest { width: 64px; margin: 0 0 4px; }
.g-mark [lang="ko"] { font-size: 11px; letter-spacing: .06em; }
.g-slip { display: inline-flex; flex-direction: column; align-items: center; align-self: center; gap: 7px; padding: 14px 20px 12px; border: 1px solid var(--fg, #1F2878); text-transform: none; letter-spacing: 0; }
.g-slip-hj { font: 400 28px/1 var(--serif, 'Noto Serif KR', serif); letter-spacing: .1em; color: var(--fg, #1F2878); }
.g-slip-ko { font: 400 16px/1 var(--kr, 'Noto Sans KR', sans-serif); letter-spacing: .14em; color: var(--fg, #1F2878); }
.g-slip-en { font: 400 9px/1 var(--mono, 'IBM Plex Mono', monospace); letter-spacing: .18em; text-transform: uppercase; color: var(--dim, #5D618C); }
.g-panel .g-ko { font-family: var(--kr, 'Noto Sans KR', sans-serif); }
.g-joinkick { display: flex; flex-direction: column; gap: 4px; }
.g-joinkick p { margin: 0; }
.g-joinkick .g-ko-line { font: 400 14px/1.4 var(--kr, 'Noto Sans KR', sans-serif); letter-spacing: 0; text-transform: none; color: var(--fg, #1F2878); }
.g-lede { font: 300 17px/1.5 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }
.g-body { font: 300 15px/1.55 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }
.g-wait { color: var(--dim, #5D618C); }
.g-small { font: 300 12px/1.55 var(--sans, system-ui, sans-serif); color: var(--dim, #5D618C); }
.g-note {
  padding: 2px 0 2px 12px;
  border-left: 1px solid var(--faint, #1F2878);
  font: 300 16px/1.5 var(--sans, system-ui, sans-serif);
  color: var(--fg, #1F2878);
  overflow-wrap: anywhere;
}
.g-err { margin: 0; }
.g-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 8px; }
.g-actions > .g-link { align-self: center; }

.g-form { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.g-field { display: flex; flex-direction: column; gap: 8px; }
.g-field > .fx-link { align-self: flex-start; }
.g-q { font: 300 15px/1.4 var(--sans, system-ui, sans-serif); color: var(--fg, #1F2878); }
.g-check { font-size: 15px; }
.g-checkname { color: var(--fg, #1F2878); }
/* setup: HOW DO YOU WANT TO START? (•) Just me ( ) The example family (SPEC-TREE §5.4) */
.g-start { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.g-start > legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; }
.g-opt { display: flex; flex-direction: column; gap: 0; }
.g-opt .led-check input { border-radius: 50%; }
.g-opttext { padding-left: 24px; }
.g-import { align-items: flex-start; line-height: 1.45; }
.g-import input { margin-top: 2px; }
.g-me { display: flex; flex-direction: column; gap: 18px; }
.g-rows { display: flex; flex-direction: column; gap: 6px; }
.g-row { flex-wrap: nowrap; }
.g-place { flex: 1 1 auto; min-width: 0; width: auto; }
.g-row .fx-k { flex: none; }

/* live lifeline preview: 1950 … NOW … LAST in the chosen color */
.g-life { position: relative; height: 30px; margin-top: 2px; }
.g-lbase, .g-lfut, .g-lseg { position: absolute; top: 8px; height: 1px; display: block; }
.g-lbase { left: 0; background: var(--faint, #1F2878); }
.g-lfut { right: 0; background: repeating-linear-gradient(90deg, var(--faint, #1F2878) 0 2px, transparent 2px 6px); }
.g-lnow { position: absolute; top: 2px; width: 1px; height: 13px; display: block; background: var(--dim, #5D618C); }
.g-lseg { background: var(--c, var(--fg, #1F2878)); }
.g-ltick { position: absolute; top: 5px; width: 1px; height: 7px; margin-left: -.5px; display: block; }
/* scoped to the lifeline: a button's label is .g-btnlab and must never pick these up */
.g-life .g-lab, .g-life .g-lbefore {
  position: absolute; top: 18px;
  font: 300 9px/1 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .12em;
  color: var(--dim, #5D618C);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.g-life .g-labnow { transform: translateX(-50%); }
.g-life .g-labend { right: 0; }
.g-life .g-lbefore { top: -2px; left: 0; }
/* a button's label: one inline run, so the 한글 and " · en" stay on one line with their space */
.g-btnlab { display: inline; position: static; white-space: normal; text-align: center; line-height: 1.6; }

/* ------------------------------------------------------------------ phones */

@media (max-width: 699px) {
  .g-title { font-size: 22px; }
  .fam-row.is-solo::before { left: -8px; }
  .fx-swatches { grid-template-columns: repeat(8, minmax(28px, 1fr)); gap: 6px; max-width: 320px; }
  .fx-swatch { width: 100%; height: auto; aspect-ratio: 1 / 1; min-width: 28px; }
  .inv-row2 > .fx-btn.primary { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-btn, .fx-link, .fx-chip, .fx-in { transition: none; }
}

/* ------------------------------------------------------------------ names in 한글 · 漢字 · English (SPEC-TREE §11) */
/* 한글 comes from Noto Sans KR through --sans (Zen Kaku Gothic New has no Hangul). 漢字 is set in a
   Korean serif wherever it is shown, so it reads as a name and takes Korean glyph forms. */
:root { --serif-kr: 'Noto Serif KR', 'AppleMyungjo', 'Nanum Myeongjo', Batang, serif; }
.nm-hanja { font-family: var(--serif-kr); font-weight: 400; }

/* FAMILY rows: after the name, small and dim, on one line, clipped with an ellipsis. They take the
   room the caption leaves (flex-basis 0), but never less than 5em: where name, names and caption
   can't share one line, the caption moves under them. It stays in the right-hand column there, so
   every row reads the same way (who on the left, relation and years on the right) and the caption
   never sits on top of a lifeline's "← 1930". */
.fam-names {
  flex: 1 1 0; min-width: 5em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 300 12px/1.3 var(--sans, system-ui, sans-serif);
  color: var(--dim, #5D618C);
}
.fam-head > .fam-cap { margin-left: auto; justify-content: flex-end; }

/* PERSON header: the names the heading does not show ("edit names" sits in the header's edit row) */
.pp-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; min-width: 0; margin-top: -2px; }
.pp-nmline {
  margin: 0; min-width: 0;
  font: 300 15px/1.45 var(--sans, system-ui, sans-serif);
  color: var(--fg, #1F2878);
  overflow-wrap: anywhere;
}
.pp-nmline .nm-sep { color: var(--dim, #5D618C); }
/* "called Halmoni": what the family calls them, when it is none of the names above (SPEC-TREE §12.5) */
.pp-nmline.has-called { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5em; }
.nm-called { white-space: nowrap; }
.nm-calledk { color: var(--dim, #5D618C); }
.textbtn.pp-nmedit { min-height: 28px; font-size: 12px; }   /* in the header's edit row (#ppphoto) */
.textbtn.pp-nmadd { min-height: 28px; font-size: 12px; }

/* the names editor: 한글 / 漢字 / English, SAVE, cancel */
.pp-names.pp-nmform {
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px;
  margin: 4px 0 6px; padding: 6px 0 4px 14px;
  border-left: 1px solid var(--faint, #1F2878);
}
.pp-nmrow { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.pp-nmlab { font: 300 13px/1.3 var(--sans, system-ui, sans-serif); color: var(--dim, #5D618C); }
.pp-nmlab.nm-hanja { font-family: var(--serif-kr); }
.pp-nmin { min-height: 36px; padding: 6px 0; }
.pp-nmin[aria-invalid="true"] { border-bottom: 2px solid var(--fg, #1F2878); }
.pp-nmform .pp-acts { margin-top: 8px; }

/* MEMORY "were there": the 漢字 after the name (palette.personTag {hanja:true}) */
.ptag-hanja { font: 400 .82em/1 var(--serif-kr); }