.kfa-shell {
  --kfa-ink: #17211b;
  --kfa-muted: #647068;
  --kfa-paper: #fbfaf6;
  --kfa-line: #d8d7cd;
  --kfa-accent: #7d2d37;
  --kfa-gold: #a77b35;
  color: var(--kfa-ink);
  background: var(--kfa-paper);
  border: 1px solid var(--kfa-line);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(43, 48, 43, 0.12);
  margin: 2rem auto;
  max-width: 1440px;
  overflow: hidden;
}

.kfa-shell * { box-sizing: border-box; }

.kfa-header {
  background: radial-gradient(circle at top right, rgba(167, 123, 53, 0.24), transparent 42%), linear-gradient(135deg, #18261e, #304839);
  color: #fff;
  padding: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

.kfa-header h1 { color: inherit; font-size: clamp(2rem, 5vw, 4rem); margin: 0.15em 0; }
.kfa-header p { margin: 0 auto; max-width: 720px; }
.kfa-eyebrow { color: #e8d5ac; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.kfa-access-badge { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .04em; margin-top: 1rem; padding: .4rem .75rem; text-transform: uppercase; }
.kfa-member-notice { background: #fff8df; border-bottom: 1px solid #e5d8a9; color: #4a4230; margin: 0; padding: .85rem clamp(1rem, 4vw, 2rem); text-align: center; }
.kfa-member-notice strong { color: #7a2e3a; }

.kfa-toolbar {
  align-items: end;
  background: #f4f1e9;
  border-bottom: 1px solid var(--kfa-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(260px, 1fr) auto;
  padding: 1rem clamp(1rem, 4vw, 2rem);
}

.kfa-search,
.kfa-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.kfa-search { align-items: stretch; flex-direction: column; }
.kfa-search > label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.kfa-search > div { display: flex; gap: .5rem; }
.kfa-controls { justify-content: flex-end; }

.kfa-search input {
  background: #fff;
  border: 1px solid var(--kfa-line);
  border-radius: 999px;
  font-size: 1rem;
  max-width: 620px;
  padding: 0.8rem 1.1rem;
  width: min(100%, 520px);
}

.kfa-search input:focus,
.kfa-shell button:focus-visible,
.kfa-tree-stage:focus-visible { outline: 3px solid rgba(125, 45, 55, .28); outline-offset: 2px; }

.kfa-shell button,
.kfa-button {
  background: #fff;
  border: 1px solid var(--kfa-line);
  border-radius: 999px;
  color: var(--kfa-ink);
  cursor: pointer;
  font-weight: 700;
  min-height: 42px;
  padding: 0.65rem 1rem;
}

.kfa-search button,
.kfa-button { background: var(--kfa-accent); border-color: var(--kfa-accent); color: #fff; }
.kfa-shell button:hover { border-color: var(--kfa-gold); transform: translateY(-1px); }
.kfa-shell button:active { transform: translateY(0); }

.kfa-guide {
  align-items: center;
  border-bottom: 1px solid var(--kfa-line);
  color: var(--kfa-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .82rem;
  gap: .55rem 1.1rem;
  padding: .7rem clamp(1rem, 4vw, 2rem);
}
.kfa-legend-item {
  align-items: center;
  background: #fff;
  border: 1px solid var(--kfa-line);
  border-radius: 999px;
  display: inline-flex;
  gap: .35rem;
  padding: .35rem .65rem;
}
.kfa-legend-item strong { color: var(--kfa-ink); }
.kfa-legend-item small { color: var(--kfa-muted); font-size: .75rem; }
.kfa-guide-help { margin-left: auto; }
.kfa-swatch { border: 1px solid #88918b; border-radius: 3px; display: inline-block; height: 12px; width: 18px; }
.kfa-female { background: #fbd3e0; }
.kfa-male { background: #d0e4f7; }
.kfa-deceased { background: #fff; border: 3px dashed #1e6249; }

.kfa-status { color: var(--kfa-muted); font-size: .88rem; min-height: 2.5rem; padding: .65rem clamp(1rem, 4vw, 2rem); }
.kfa-status[data-kind="error"] { color: #8b2635; font-weight: 700; }
.kfa-status[data-kind="success"] { color: #2d664d; }
.kfa-workspace { display: grid; grid-template-columns: minmax(0, 1fr) auto; position: relative; }

.kfa-tree-stage {
  height: min(70vh, 780px);
  min-height: 520px;
  overflow: auto;
  padding: 1rem;
  width: 100%;
}
.kfa-tree-stage svg { display: block; height: 100%; min-width: 100%; touch-action: none; width: 100%; }

.kfa-details {
  background: #fffdf8;
  border-left: 1px solid var(--kfa-line);
  box-shadow: -14px 0 40px rgba(43, 48, 43, .08);
  padding: 1.5rem;
  position: relative;
  width: min(360px, 30vw);
}
.kfa-details[hidden] { display: none; }
.kfa-details h2 { color: var(--kfa-ink); font-size: 1.45rem; line-height: 1.2; margin: .3rem 2rem 1.25rem 0; }
.kfa-details dl { display: grid; gap: .8rem; margin: 0; }
.kfa-details dl div { border-top: 1px solid var(--kfa-line); padding-top: .6rem; }
.kfa-details dt { color: var(--kfa-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.kfa-details dd { margin: .18rem 0 0; overflow-wrap: anywhere; }
.kfa-details-close { font-size: 1.4rem; min-height: 36px !important; padding: .2rem .65rem !important; position: absolute; right: .8rem; top: .8rem; }

.kfa-loading { color: var(--kfa-muted); padding: 4rem 1rem; text-align: center; }
.kfa-notice { align-items: center; display: flex; flex-direction: column; gap: 0.5rem; padding: 4rem 1rem; text-align: center; }
.kfa-error { color: #8b2635; }
.kfa-access-card { background: #f7f3e8; border: 1px solid #ded4bd; border-radius: 18px; margin: 2rem auto; max-width: 720px; padding: 2.5rem; text-align: center; }

.kfa-shell .trunk,
.kfa-shell .branch { fill: none; stroke: #8b918c; stroke-linecap: round; stroke-width: 1.5px; }
.kfa-shell .stub.clone { stroke-dasharray: 4 2; }
.kfa-shell .node-rect { filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15)); rx: 4; ry: 4; stroke: #888; stroke-width: 2px; }
.kfa-shell .deceased {
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
  stroke: #1e6249 !important;
  stroke-dasharray: 7 3;
  stroke-width: 3px !important;
}
.kfa-shell .married-text .node-text.label { fill: #6c3f08; }
.kfa-marriage-legend strong { color: #6c3f08; font-size: 1rem; }
.kfa-shell .node-text { dominant-baseline: central; font-size: 15px; pointer-events: none; text-anchor: start; }
.kfa-shell .index-dID { fill: #111; }
.kfa-shell .index-KID { fill: #c73545; font-weight: 700; }
.kfa-shell .index-KSID { fill: #2b5d9b; font-weight: 700; }
.kfa-shell .toggle-dID { color: #222; }
.kfa-shell .toggle-KID { border-color: #c73545; color: #c73545; }
.kfa-shell .toggle-KSID { border-color: #2b5d9b; color: #2b5d9b; }
.kfa-shell .node { cursor: pointer; }
.kfa-shell .node:focus { outline: none; }
.kfa-shell .node:focus .node-rect,
.kfa-shell .node.selected .node-rect { stroke: var(--kfa-accent); stroke-width: 3px; }
.kfa-shell .node .expand-mark { fill: #fff; pointer-events: none; stroke: #69736c; stroke-width: 1.5px; }
.kfa-shell .node .expand-symbol { fill: #3f4942; font-size: 11px; font-weight: 800; pointer-events: none; text-anchor: middle; }

@keyframes kfa-pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 2px #d2a84f); }
  50% { filter: drop-shadow(0 0 5px #d9822b); }
}

.kfa-shell .node.married-text.hover-linked text.label { animation: kfa-pulse-glow 1s infinite; }

.kfa-tree-tooltip {
  background: #24352e;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  color: #fff;
  font: 600 13px/1.45 system-ui, sans-serif;
  max-width: min(340px, calc(100vw - 28px));
  padding: .65rem .8rem;
  pointer-events: none;
  position: fixed;
  white-space: pre-line;
  z-index: 100000;
}
.kfa-tree-tooltip[hidden] { display: none; }

.kfa-member-stage { min-height: 620px; }
.kfa-member-link { fill: none; stroke: #8b918c; stroke-linecap: round; stroke-width: 1.7px; }
.kfa-member-link.spouse { stroke: #9b6a22; stroke-dasharray: 5 4; stroke-width: 2px; }
.kfa-member-node .expand-symbol { cursor: pointer; }
.kfa-member-requests { padding: 1.3rem 2rem; border-top: 1px solid var(--kfa-line); }
.kfa-request-editor { margin-top: 1.2rem; border-top: 1px solid var(--kfa-line); padding-top: 1rem; }
.kfa-request-form label { display: block; margin: .8rem 0; font-weight: 700; }
.kfa-request-form select, .kfa-request-form textarea { display: block; width: 100%; margin-top: .3rem; padding: .6rem; font: inherit; box-sizing: border-box; background: #fff; color: var(--kfa-ink); }
.kfa-request-form textarea { resize: vertical; }
.kfa-request-history-card { border-top: 1px solid var(--kfa-line); margin-top: 1rem; padding-top: .7rem; }
.kfa-request-history-card p, .kfa-request-result { white-space: pre-wrap; overflow-wrap: anywhere; }
.kfa-request-form[hidden], #kfaRequestHistory[hidden] { display: none; }
.kfa-member-node.is-self .node-rect { filter: drop-shadow(0 0 8px rgba(125, 45, 55, .35)); stroke: var(--kfa-accent); stroke-width: 4px; }
.kfa-member-node .node-text { font-size: 13px; font-weight: 750; }
.kfa-member-node .kfa-member-id { fill: #465149; font-size: 9px; pointer-events: none; }
.kfa-shell .kfa-member-node .expand-mark { cursor: pointer; pointer-events: all; }
.kfa-shell .kfa-member-node .expand-symbol { cursor: pointer; dominant-baseline: central; pointer-events: all; }

@media (max-width: 700px) {
  .kfa-shell { border-radius: 0; margin-inline: -1rem; }
  .kfa-toolbar { grid-template-columns: 1fr; }
  .kfa-controls { display: grid; grid-template-columns: repeat(2, 1fr); }
  .kfa-controls button { width: 100%; }
  .kfa-guide-help { flex-basis: 100%; margin-left: 0; }
  .kfa-workspace { display: block; }
  .kfa-tree-stage { min-height: 480px; }
  .kfa-details { border-left: 0; border-top: 1px solid var(--kfa-line); box-shadow: 0 -12px 30px rgba(43, 48, 43, .08); width: 100%; }
  .kfa-shell .node-text { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .kfa-shell *, .kfa-shell *::before, .kfa-shell *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}