/* Izimpande release 8.2.0Y1.6.13 */
/* Izimpande release 8.2.0Y1.6.12 */
:root{--bg:#f7f4ed;--surface:#fff;--ink:#1f2937;--muted:#64748b;--line:#e2e8f0;--brand:#065f46;--danger:#b91c1c;--shadow:0 12px 36px rgba(15,23,42,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}.container{width:min(1280px,calc(100% - 24px));margin:auto}.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}.header-inner{min-height:68px;display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit}.brand-mark{width:40px;height:40px;border-radius:11px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:900}.brand strong,.brand small{display:block}.brand small{color:var(--muted);font-size:.75rem}.header-actions{display:flex;gap:6px;flex-wrap:wrap}.button{border:1px solid transparent;border-radius:11px;min-height:40px;padding:9px 13px;font-weight:800;cursor:pointer}.button:disabled{opacity:.55;cursor:not-allowed}.button-primary{background:var(--brand);color:#fff}.button-secondary{background:#fff;border-color:var(--line)}.button-ghost{background:transparent;color:var(--brand)}.button-danger{background:#fff;color:var(--danger);border-color:#fecaca}.button-small{min-height:34px;padding:7px 10px;font-size:.78rem}.wide{width:100%;margin-top:8px}.app-shell{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;padding:20px 0 60px}.sidebar{display:grid;gap:14px;align-content:start}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}.panel-header{display:flex;justify-content:space-between;gap:12px}.panel h2,.panel h3{margin:0}.eyebrow{margin:0 0 7px;color:#a16207;font-size:.7rem;font-weight:900;letter-spacing:.14em}.muted{color:var(--muted)}.tree-chip{background:var(--brand);color:#fff;border-radius:12px;padding:8px 11px;text-align:right}.tree-chip span{display:block;font-size:.65rem;opacity:.75}.tree-chip strong{font-size:1.2rem}.toolbar{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.search-wrap{display:grid;grid-template-columns:1fr auto;gap:7px;margin:10px 0}.search-wrap input{border:1px solid #cbd5e1;border-radius:10px;padding:9px 10px}.people-list{display:grid;gap:8px;max-height:380px;overflow:auto}.person-row{border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px;text-align:left;cursor:pointer}.person-row.active{background:#ecfdf5;border-color:#86b6a4}.person-row strong,.person-row small{display:block}.person-row small{font-size:.75rem;color:var(--muted);margin-top:2px}.lineage-code{display:inline-block;margin-top:4px;border-radius:999px;background:#f1f5f9;color:#475569;font-weight:900;font-size:.7rem;padding:4px 8px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.relative-nav{display:grid;gap:9px}.relative-group{display:grid;gap:6px}.relative-group strong{font-size:.78rem}.relative-buttons{display:flex;gap:6px;flex-wrap:wrap}.relative-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 9px;font-size:.75rem;cursor:pointer}.relative-chip:hover{border-color:#86b6a4;background:#ecfdf5}.main-stage{min-width:0}.stage-top{display:flex;justify-content:space-between;align-items:start;gap:12px}.stage-top h1{margin:0;font-size:1.65rem}.breadcrumb{margin-top:6px;color:var(--muted);font-size:.82rem}.breadcrumb button{border:0;background:transparent;color:var(--brand);font:inherit;font-weight:800;padding:0;cursor:pointer}.status{margin:12px 0;padding:10px 12px;border-radius:10px;background:#eff6ff}.canvas-wrap{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:20px;min-height:620px;overflow:auto;box-shadow:var(--shadow);background-image:radial-gradient(#dde3ea 1px,transparent 1px);background-size:24px 24px}.tree-render{padding:24px;min-width:760px;display:grid;gap:24px}.generation{display:grid;gap:10px}.gen-label{font-size:.7rem;font-weight:900;color:var(--muted);letter-spacing:.13em;text-transform:uppercase}.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}.cluster{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.94)}.couple{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.children{display:flex;gap:10px;flex-wrap:wrap;padding-left:18px;border-left:2px solid #dbe5df}.node{min-width:185px;max-width:235px;padding:11px;border:1px solid var(--line);border-radius:13px;background:#fff;cursor:pointer}.node.active{border-color:#4f8f76;box-shadow:0 8px 20px rgba(6,95,70,.1)}.node .name{font-weight:900}.node .aka{font-size:.77rem;color:#7c3aed;font-weight:800;margin-top:2px}.node .meta{font-size:.75rem;color:var(--muted);margin-top:3px}.connector{font-size:.7rem;color:var(--muted);font-weight:800}.modal{border:0;background:transparent;padding:0;width:min(700px,calc(100% - 20px))}.modal-wide{width:min(850px,calc(100% - 20px))}.modal::backdrop{background:rgba(15,23,42,.55)}.modal-card{background:#fff;border-radius:20px;padding:22px;max-height:calc(100vh - 20px);overflow:auto}.modal-header{display:flex;justify-content:space-between;align-items:start}.icon-button{border:0;background:transparent;font-size:1.6rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.field{display:grid;gap:6px}.field-full{grid-column:1/-1}.field input,.field select{border:1px solid #cbd5e1;border-radius:10px;padding:10px 11px;width:100%}.check-field{display:flex;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px;background:#fafafa}.check-field strong,.check-field small{display:block}.check-field small{color:var(--muted)}.child-parent-box{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}.duplicate-warning,.warning-box{padding:10px 12px;border-radius:10px;background:#fff7ed;color:#9a3412;margin:12px 0}.connections-list{display:grid;gap:10px;margin-top:16px}.connection-card{border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff}.connection-card-top{display:flex;justify-content:space-between;gap:14px;align-items:start}.connection-card h3{margin:0;font-size:1rem}.connection-meta{color:var(--muted);font-size:.8rem;margin-top:4px}.connection-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.relation-pill{display:inline-block;border-radius:999px;background:#ecfdf5;color:#047857;font-size:.68rem;font-weight:900;padding:4px 8px}.relation-pill.former{background:#f1f5f9;color:#475569}.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#1f2937;color:#fff;padding:11px 14px;border-radius:10px;z-index:100}.toast.error{background:#991b1b}[hidden]{display:none!important}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.action-grid{grid-template-columns:1fr}.tree-render{min-width:680px}.connection-card-top{flex-direction:column}}
.profile-card{min-height:520px}.profile-layout{display:grid;grid-template-columns:220px 1fr;gap:24px;margin-top:14px}.profile-photo-column{display:grid;align-content:start;gap:10px}.profile-photo-frame{aspect-ratio:4/5;width:100%;border-radius:18px;overflow:hidden;background:#f1f5f9;border:1px solid var(--line);display:grid;place-items:center}.profile-photo-frame img{width:100%;height:100%;object-fit:cover}.profile-photo-frame div{color:var(--muted);font-weight:800}.profile-aka{color:#7c3aed;font-size:1.05rem;font-weight:900}.profile-facts{display:grid;grid-template-columns:max-content 1fr;gap:7px 14px;margin:14px 0}.profile-facts dt{font-weight:900;color:#475569}.profile-facts dd{margin:0}.profile-section{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.profile-section h3{margin:0 0 8px;font-size:.95rem}.profile-links{display:flex;gap:7px;flex-wrap:wrap}.profile-link{border:0;background:transparent;color:var(--brand);padding:0;font:inherit;font-weight:900;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.profile-contact-access-link{display:inline-flex;align-items:center;padding:7px 2px;color:var(--brand);font-weight:900;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.contact-access-list{display:grid;gap:8px;margin-top:8px}.contact-access-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--line)}.contact-access-row:last-child{border-bottom:0}.contact-access-revoke{color:var(--brand);font-weight:900;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}.contribution-notification.is-read-fade{opacity:0;transform:translateY(-3px);transition:opacity .3s ease,transform .3s ease}.profile-contacts{display:grid;gap:7px}.profile-contact-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.living-fields{margin-top:6px;padding:12px;background:#f8fafc;border:1px solid var(--line);border-radius:12px}.living-fields h3{margin:0}.nested-grid{margin-top:10px}.crop-layout{display:grid;grid-template-columns:minmax(280px,400px) 1fr;gap:20px;margin-top:16px;align-items:start}.crop-canvas-wrap{width:min(100%,400px);aspect-ratio:4/5;background:#0f172a;border-radius:14px;overflow:hidden;border:1px solid var(--line)}#crop-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.crop-controls{display:grid;gap:12px}.crop-controls label{display:grid;gap:7px;font-weight:900}.node .name-button{border:0;background:transparent;padding:0;font:inherit;font-weight:900;color:inherit;text-align:left;cursor:pointer}.node .name-button:hover,.person-name-link:hover{color:var(--brand);text-decoration:underline}.person-name-link{border:0;background:transparent;padding:0;font:inherit;font-weight:900;color:inherit;text-align:left;cursor:pointer}
@media(max-width:700px){.profile-layout{grid-template-columns:1fr}.profile-photo-column{max-width:220px}.crop-layout{grid-template-columns:1fr}}

.connection-mode-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.option-card{display:flex;gap:9px;border:1px solid var(--line);border-radius:12px;padding:11px;background:#fff}.option-card strong,.option-card small{display:block}.option-card small{font-size:.75rem;color:var(--muted);margin-top:2px}.life-status{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0;display:flex;gap:16px;flex-wrap:wrap}.life-status legend{font-weight:900;padding:0 5px}.life-status small{flex-basis:100%}.field textarea{border:1px solid #cbd5e1;border-radius:10px;padding:10px 11px;width:100%;resize:vertical}.gender-male{border-left:5px solid #86efac!important;background:linear-gradient(90deg,rgba(220,252,231,.75),#fff 22%)!important}.gender-female{border-left:5px solid #f9a8d4!important;background:linear-gradient(90deg,rgba(252,231,243,.8),#fff 22%)!important}.gender-other{border-left:5px solid #cbd5e1!important}.gender-unknown{border-left:5px solid #e2e8f0!important}.spouse-rank-badge{display:inline-block;margin-left:6px;border-radius:999px;padding:3px 7px;background:#fef3c7;color:#92400e;font-size:.66rem;font-weight:900}.rank-editor{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:9px}.rank-editor input{width:90px;border:1px solid #cbd5e1;border-radius:9px;padding:7px}.candidate-generation{font-size:.72rem;color:var(--muted)}#existing-person-id{width:100%;min-height:150px;border:1px solid #cbd5e1;border-radius:10px;padding:6px}
@media(max-width:650px){.connection-mode-wrap{grid-template-columns:1fr}}

.external-parent-fields{margin-top:10px;padding:12px;border:1px dashed #cbd5e1;border-radius:12px;background:#fafafa}
.external-badge{display:inline-block;border-radius:999px;padding:3px 8px;background:#f1f5f9;color:#475569;font-size:.68rem;font-weight:900}

.connection-context{margin:4px 0 0;color:var(--muted);font-weight:800}.biological-parent-note{padding:10px 12px;border:1px solid #dbeafe;background:#eff6ff;border-radius:11px;color:#1e3a8a}

.relationship-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fafafa}
.relationship-meta>.field-full{grid-column:1/-1}
@media(max-width:650px){.relationship-meta{grid-template-columns:1fr}}

.unconnected-summary{display:inline-block;margin-top:8px;border-radius:999px;padding:5px 9px;background:#fff7ed;color:#9a3412;font-size:.75rem;font-weight:900;border:1px solid #fed7aa}
.unconnected-section{margin:8px 24px 24px;padding:18px;border-top:2px dashed #fdba74;background:rgba(255,247,237,.65);border-radius:14px}
.unconnected-header h2{margin:0 0 4px}.unconnected-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}
.unconnected-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.unconnected-card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.unconnected-badge{display:inline-block;border-radius:999px;padding:4px 8px;background:#fff7ed;color:#9a3412;font-size:.68rem;font-weight:900;white-space:nowrap}

.lineage-parent-cue{
  font-size:.62rem;
  line-height:1.2;
  color:#94a3b8;
  font-weight:700;
  margin-bottom:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.profile-relation-detail{
  color:#64748b;
  font-size:.78rem;
  font-weight:700;
}

.lineage-parent-cue-maternal{
  color:#c98fa8;
  font-weight:700;
}

/* Part 7.6 — compact tree details */
.compact-praises{margin-bottom:2px;max-width:205px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-compact-meta{margin:3px 0 0;color:#64748b;font-size:.68rem;font-weight:800;white-space:nowrap}
.compact-tree-toolbar{margin-top:8px}
.tree-auto-summary{display:flex;gap:6px;flex-direction:column;padding:10px 12px;background:#f8fafc;border:1px solid var(--line);border-radius:11px;color:#475569;font-size:.8rem}
.tree-view-toggle{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* Horizontal genealogy */
.canvas-wrap{position:relative}
.tree-render.horizontal-tree{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:74px;
  padding:24px 36px 36px;
  min-width:max-content;
  min-height:600px;
}
.generation-column{position:relative;z-index:2;width:245px;flex:0 0 245px}
.generation-column-body{display:flex;flex-direction:column;gap:18px;margin-top:12px}
.family-unit{position:relative;z-index:2}
.horizontal-tree .couple{display:flex;flex-direction:column;align-items:stretch;gap:5px}
.horizontal-tree .couple>.node{width:100%;max-width:none}
.connector-label{text-align:center;font-size:.66rem;color:#64748b;font-weight:900;padding:1px 0}
.tree-links{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:1}
.tree-link{fill:none;stroke:#cbd5e1;stroke-width:1.5}
.tree-link-secondary{stroke-dasharray:4 5;stroke:#cbd5e1}
.horizontal-tree .node{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* Simple outline view */
.tree-render.outline-tree{display:block;min-width:0;padding:24px 30px}
.outline-root,.outline-children{list-style:none;margin:0;padding-left:0}
.outline-children{margin:5px 0 5px 18px;padding-left:18px;border-left:1px dotted #cbd5e1}
.outline-item{position:relative;margin:4px 0}
.outline-children>.outline-item:before{content:"";position:absolute;left:-18px;top:17px;width:14px;border-top:1px dotted #cbd5e1}
.outline-person{display:flex;align-items:center;gap:8px;max-width:620px;padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;touch-action:manipulation}
.outline-name{border:0;background:transparent;padding:0;font:inherit;font-weight:900;text-align:left;cursor:pointer;color:inherit}
.outline-meta{margin-left:auto;color:#94a3b8;font-size:.7rem;white-space:nowrap}
.outline-partners{margin:3px 0 4px 14px;display:grid;gap:2px;color:#64748b;font-size:.72rem}
.outline-relation-line{display:flex;gap:3px;align-items:center}

/* Mobile */
@media(max-width:900px){
  .stage-top{align-items:flex-start}
  .tree-view-toggle{justify-content:flex-start}
  .tree-render.horizontal-tree{gap:52px;padding:18px 24px 30px;min-height:520px}
  .generation-column{width:215px;flex-basis:215px}
}
@media(max-width:600px){
  .tree-compact-meta{font-size:.64rem}
  .tree-render.horizontal-tree{gap:38px;padding:16px 18px 28px}
  .generation-column{width:205px;flex-basis:205px}
  .tree-render.outline-tree{padding:16px}
  .outline-children{margin-left:10px;padding-left:14px}
  .outline-meta{font-size:.63rem}
}

/* Part 7.6.1 — Generations flow downward; each generation may grow horizontally */
.tree-render.vertical-generation-tree{
  position:relative;
  display:block;
  min-width:max-content;
  padding:18px 24px 34px;
}
.vertical-generation-tree .generation-row{
  position:relative;
  z-index:2;
  display:block;
  min-width:max-content;
  padding:10px 0 26px;
}
.vertical-generation-tree .generation-row+.generation-row{margin-top:14px}
.generation-family-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:18px;
  min-width:max-content;
  padding:10px 6px;
}
.vertical-generation-tree .family-unit{position:relative;z-index:2;flex:0 0 auto}
.vertical-generation-tree .couple{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
}
.vertical-generation-tree .couple>.node{width:190px;flex:0 0 190px}
.vertical-generation-tree .connector{
  font-size:.66rem;
  font-weight:900;
  color:#64748b;
  white-space:nowrap;
}
.vertical-generation-tree .tree-links{
  position:absolute;
  inset:0 auto auto 0;
  pointer-events:none;
  overflow:visible;
  z-index:1;
}
.vertical-generation-tree .tree-link{fill:none;stroke:#cbd5e1;stroke-width:1.4}
.vertical-generation-tree .tree-link-secondary{stroke-dasharray:4 5;stroke:#cbd5e1}

/* Outline View follows the same generation-down / family-across logic */
.tree-render.generation-outline{display:block;min-width:max-content;padding:18px 24px 30px}
.outline-generation-section{display:block;min-width:max-content;padding:8px 0 18px}
.outline-generation-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:12px;
  min-width:max-content;
  padding:8px 4px;
}
.outline-generation-group{
  width:300px;
  flex:0 0 300px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}
.outline-generation-group>summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  user-select:none;
}
.outline-generation-group>summary::-webkit-details-marker{display:none}
.outline-generation-group>summary:before{
  content:"▾";
  color:#94a3b8;
  font-size:.72rem;
  margin-right:3px;
}
.outline-generation-group:not([open])>summary:before{content:"▸"}
.outline-summary-title{font-weight:900;cursor:pointer}
.outline-summary-meta{margin-left:auto;color:#94a3b8;font-size:.67rem;white-space:nowrap}
.outline-group-body{padding:4px 12px 12px;border-top:1px solid #eef2f7}
.outline-spouse-block,.outline-child-block{display:grid;gap:4px;margin-top:7px}
.outline-block-title{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;font-weight:900}
.outline-relation-line,.outline-child-line{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:.75rem}
.outline-relation-label{font-weight:800;color:#64748b}
.outline-child-line .lineage-parent-cue{width:100%;margin:0;font-size:.59rem}
.outline-child-meta{margin-left:auto;color:#94a3b8;font-size:.66rem}
.outline-generation-group[open]{box-shadow:0 4px 12px rgba(15,23,42,.04)}

@media(max-width:900px){
  .tree-render.vertical-generation-tree{padding:14px 18px 28px}
  .vertical-generation-tree .couple>.node{width:178px;flex-basis:178px}
  .generation-family-row{gap:14px}
  .outline-generation-group{width:270px;flex-basis:270px}
}
@media(max-width:600px){
  .tree-render.vertical-generation-tree{padding:12px 14px 24px}
  .vertical-generation-tree .couple>.node{width:168px;flex-basis:168px}
  .generation-family-row{gap:12px}
  .outline-generation-group{width:250px;flex-basis:250px}
}

.lineage-parent-cue-couple{color:#64748b;font-weight:700}
.marriage-link{fill:none;stroke:#94a3b8;stroke-width:1.5;stroke-linecap:round}
.wife-hierarchy-link{fill:none;stroke:#b8bec7;stroke-width:1.35;stroke-dasharray:3 5;stroke-linecap:round}
.tree-link{stroke-linecap:round;stroke-linejoin:round}

/* Part 7.6.2.1 — wide-tree grab/pan navigation */
.canvas-wrap{
  overflow:auto;
  cursor:grab;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.canvas-wrap.is-grabbing{
  cursor:grabbing;
  user-select:none;
}
.canvas-wrap .node,
.canvas-wrap button,
.canvas-wrap a,
.canvas-wrap summary{
  cursor:pointer;
}
@media(pointer:coarse){
  .canvas-wrap{
    cursor:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
  }
}

/* Part 7.6.2.2 — natural omnidirectional grab/pan */
.canvas-wrap{
  overflow:auto;
  cursor:grab;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
}
.canvas-wrap.is-grabbing{
  cursor:grabbing;
  user-select:none;
  -webkit-user-select:none;
}
.canvas-wrap.is-grabbing *{
  user-select:none;
  -webkit-user-select:none;
}
@media(pointer:coarse){
  .canvas-wrap{
    cursor:auto;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
  }
}

/* Part 7.6.2.3 — internal 2D viewport + tree-only zoom */
.canvas-wrap{
  position:relative;
  overflow:auto !important;
  height:clamp(500px,68vh,760px);
  max-height:76vh;
  min-height:500px;
  cursor:grab;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
}
.canvas-wrap.is-grabbing{cursor:grabbing}
.tree-canvas-controls{
  position:sticky;
  top:10px;
  left:100%;
  z-index:30;
  width:max-content;
  display:flex;
  align-items:center;
  gap:4px;
  margin:10px 10px -42px auto;
  padding:5px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(5px);
}
.tree-canvas-control{
  border:1px solid var(--line);
  background:#fff;
  color:inherit;
  border-radius:7px;
  min-width:32px;
  height:30px;
  padding:0 8px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.tree-canvas-control:hover{background:#f8fafc}
.tree-canvas-reset{font-size:.7rem;min-width:48px}
.tree-zoom-level{
  min-width:44px;
  text-align:center;
  color:#64748b;
  font-size:.69rem;
  font-weight:900;
}
#tree-render{
  transform-origin:top left;
}
@media(max-width:600px){
  .canvas-wrap{
    height:62vh;
    min-height:420px;
    max-height:70vh;
  }
  .tree-canvas-controls{
    top:6px;
    margin-right:6px;
  }
  .tree-canvas-reset{display:none}
}

/* Part 7.6.2.5 — fixed viewport controls + flexible page-length preview */
.tree-viewport-shell{
  position:relative;
  min-width:0;
  min-height:calc(100vh - 180px);
  align-self:stretch;
}
.tree-viewport-shell > .canvas-wrap{
  position:relative;
  overflow:auto !important;
  height:auto !important;
  min-height:calc(100vh - 180px) !important;
  max-height:none !important;
  cursor:grab;
  overscroll-behavior:contain;
}
.tree-viewport-shell > .tree-canvas-controls{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  left:auto !important;
  z-index:100;
  width:max-content;
  margin:0 !important;
  pointer-events:auto;
}
@media(max-width:600px){
  .tree-viewport-shell{min-height:62vh}
  .tree-viewport-shell > .canvas-wrap{min-height:62vh !important}
  .tree-viewport-shell > .tree-canvas-controls{
    top:6px !important;right:6px !important;left:auto !important;
  }
}

/* Part 7.6.2.6 — aligned preview height + footer */
.tree-viewport-shell{
  position:relative;
  min-width:0;
  min-height:420px !important;
  height:auto;
}
.tree-viewport-shell > .canvas-wrap{
  position:relative;
  overflow:auto !important;
  height:100% !important;
  min-height:100% !important;
  max-height:none !important;
  cursor:grab;
  overscroll-behavior:contain;
}
.tree-viewport-shell > .tree-canvas-controls{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  left:auto !important;
  z-index:100;
  margin:0 !important;
}
.canvas-wrap.is-grabbing{
  cursor:grabbing !important;
  user-select:none;
  -webkit-user-select:none;
}
.app-footer{
  margin-top:22px;
}
.app-footer-inner{
  padding-bottom:20px;
}
.app-footer-rule{
  width:100%;
  height:2px;
  background:linear-gradient(90deg,rgba(15,23,42,.10),rgba(15,23,42,.34),rgba(15,23,42,.10));
  border-radius:999px;
}
.app-footer-meta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:10px 0 0;
  color:#64748b;
  font-size:.72rem;
}
.app-footer-brand{
  font-weight:900;
  color:#475569;
}
.app-footer-meta strong{
  color:#475569;
  font-weight:800;
}
.app-footer-sep{
  color:#cbd5e1;
}
@media(max-width:900px){
  .tree-viewport-shell{
    height:auto !important;
    min-height:60vh !important;
  }
  .tree-viewport-shell > .canvas-wrap{
    min-height:60vh !important;
  }
}

/* Part 7.6.2.7 — visual separation between parental households */
.generation-family-row .family-unit.family-branch-break{
  margin-left:28px;
}
@media(max-width:600px){
  .generation-family-row .family-unit.family-branch-break{
    margin-left:18px;
  }
}

/* Part 8.1A — secure account UI */
.auth-card{width:min(680px,calc(100vw - 24px))}
.auth-mode-toggle{display:flex;gap:6px;margin:14px 0 4px}
.auth-user-summary{display:grid;gap:5px;padding:16px;margin-top:14px;border:1px solid var(--line);border-radius:14px;background:#f8fafc}
.auth-user-summary strong{font-size:1.05rem}
#auth-claim-form[hidden],#auth-login-form[hidden]{display:none!important}

.auth-role-line{font-size:.78rem;font-weight:900;color:var(--brand)}.auth-membership-section{margin-top:16px}.auth-my-trees{display:grid;gap:8px}.auth-tree-card{display:grid;gap:3px;width:100%;text-align:left;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}.auth-tree-card:hover,.auth-tree-card.active{border-color:#86b6a4;background:#ecfdf5}.auth-tree-card strong{font-size:.9rem}.auth-tree-card span{font-size:.72rem;color:var(--muted);font-weight:700}

/* Part 8.1D — invitation governance */
.invite-detail-card{display:grid;gap:5px;margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8fafc}
.invite-detail-card strong{font-size:1.05rem}
.invite-detail-card span{font-size:.8rem}
.invite-result{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.invite-result label{display:block;font-weight:900;margin-bottom:7px}
.invite-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.invite-link-row input{border:1px solid #cbd5e1;border-radius:10px;padding:10px 11px;width:100%}
@media(max-width:620px){.invite-link-row{grid-template-columns:1fr}}

/* Part 8.1D.2 / 8.1D.3 — identity linking + branch context */
.identity-match-card{display:grid;gap:5px;margin:14px 0;padding:14px;border:1px solid #a7d8c5;border-radius:14px;background:#f0fdf7}
.identity-match-card strong{font-size:1.05rem}
.left-actions{justify-content:flex-start}
.branch-scope-note{margin-top:10px;padding:8px 10px;border-radius:10px;background:#fff7ed;border:1px solid #fed7aa;color:#9a5a18;font-size:.72rem;font-weight:800;line-height:1.35}

/* Part 8.1D.4 / 8.1D.5 — account + master admin */
.account-identity-list{display:grid;gap:8px;margin:10px 0 14px}
.account-identity-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:#fff}
.account-identity-row>div:first-child{display:grid;gap:2px}
.account-identity-row span{font-size:.8rem;color:var(--muted)}
.account-identity-row small{font-size:.68rem;font-weight:900;color:var(--brand)}
.account-inline-actions{display:flex;gap:6px;flex-wrap:wrap}
.compact-form{margin-top:8px}
.admin-users-card{width:min(1000px,calc(100vw - 24px))}
.admin-users-list{display:grid;gap:10px;margin-top:14px;max-height:70vh;overflow:auto}
.admin-user-card{border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff}
.admin-user-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.admin-user-head>div{display:grid;gap:3px}
.admin-user-head span{font-size:.74rem;color:var(--muted)}
.admin-user-meta{display:flex;gap:10px;flex-wrap:wrap;margin:9px 0;color:var(--muted);font-size:.72rem;font-weight:700}
.admin-user-controls{display:grid;grid-template-columns:1fr 1fr auto auto auto auto;gap:7px;align-items:end}
.admin-user-controls label{display:grid;gap:4px;font-size:.7rem;font-weight:900}
.admin-user-controls select,.admin-user-controls input{border:1px solid #cbd5e1;border-radius:9px;padding:8px;width:100%}
@media(max-width:850px){.admin-user-controls{grid-template-columns:1fr 1fr}.admin-user-controls .button{width:100%}}

/* Part 8.1D.4.2 — consolidated branch-editor identity onboarding */
.account-tree-identity-status{display:grid;gap:3px;margin:8px 0 10px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:#f8fafc}
.account-tree-identity-status strong{font-size:.9rem}

/* Part 8.1D.4.2.2 — show/hide password controls */
.password-field-wrap{position:relative}
.password-field-wrap input{padding-right:44px!important}
.password-toggle{
 position:absolute;right:8px;top:50%;transform:translateY(-50%);
 width:32px;height:32px;border:0;border-radius:8px;background:transparent;
 display:grid;place-items:center;cursor:pointer;font-size:1rem;line-height:1
}
.password-toggle:hover{background:#f1f5f9}
.password-toggle:focus-visible{outline:2px solid #86b6a4;outline-offset:2px}

/* Part 8.1D.4.2.3 — change password feedback */
#account-password-status{margin-top:2px}
#account-password-status.error{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
#account-change-password-button:disabled{opacity:.65;cursor:wait}

/* Part 8.1D.6 / 8.1D.7 — My Family + personal identity + access requests */
.current-user-person{position:relative!important;box-shadow:0 0 0 2px #111827 inset!important}
.you-badge{position:absolute;top:5px;right:5px;background:#111827;color:#fff;border-radius:999px;padding:2px 6px;font-size:.56rem;font-weight:900;letter-spacing:.05em;z-index:5}
.button-dark{background:#111827;color:#fff;border:1px solid #111827}
.button-dark:hover{background:#1f2937}
.access-review-controls{grid-template-columns:1.1fr 1.4fr auto auto auto}
@media(max-width:850px){.access-review-controls{grid-template-columns:1fr 1fr}.access-review-controls .button{width:100%}}

/* Part 8.1D.6/7.1 — top-priority alerts */
.toast{
 position:fixed!important;
 top:82px!important;
 bottom:auto!important;
 left:50%!important;
 transform:translateX(-50%)!important;
 width:min(560px,calc(100vw - 28px));
 padding:12px 16px!important;
 border-radius:12px!important;
 z-index:2147483647!important;
 box-shadow:0 14px 38px rgba(15,23,42,.28);
 font-weight:800;
 line-height:1.35;
 text-align:center;
}
.toast.error{background:#991b1b!important;color:#fff!important;border:1px solid #fecaca}
dialog[open]>.toast{position:fixed!important}
@media(max-width:700px){.toast{top:74px!important;width:calc(100vw - 20px)}}

/* Part 8.1D.7.2 — possible duplicate external-parent warning */
.external-parent-match-list{display:grid;gap:9px;margin:14px 0}
.external-parent-match-card{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff7ed}
.external-parent-match-card>div{display:grid;gap:3px}
.external-parent-match-card strong{font-size:.9rem}
.external-parent-match-card span{font-size:.72rem;color:var(--muted);font-weight:700}
@media(max-width:620px){.external-parent-match-card{align-items:stretch;flex-direction:column}.external-parent-match-card .button{width:100%}}

/* Part 8.1D.7.3 — family-tree discovery / viewer onboarding */
.discovery-card{width:min(820px,calc(100vw - 24px))}
.discovery-search{margin:12px 0 14px}
.tree-discovery-results{display:grid;gap:10px;max-height:58vh;overflow:auto}
.tree-discovery-card{border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff}
.tree-discovery-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.tree-discovery-head>div{display:grid;gap:2px}
.tree-discovery-head strong{font-size:1rem}
.tree-discovery-head span{font-size:.76rem;color:var(--muted)}
.tree-discovery-reason{margin:7px 0;color:#0f766e;font-size:.72rem;font-weight:900}
.tree-discovery-ancestors{padding:9px 10px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0}
.tree-discovery-ancestors small{font-weight:900;color:var(--muted)}
.tree-discovery-ancestors ul{margin:5px 0 0;padding-left:18px}
.tree-discovery-ancestors li{margin:2px 0;font-size:.78rem}
.legacy-tree-open{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.legacy-tree-open summary{cursor:pointer;font-size:.76rem;font-weight:900;color:var(--muted)}
#request-family-access-top{white-space:nowrap}
@media(max-width:900px){
 #request-family-access-top{order:5;width:100%}
 .tree-discovery-head{flex-direction:column}
}

/* Part 8.1D.7.4 — external person reuse + contextual connection help */
.connection-guide{
 margin:8px 0 12px;
 padding:9px 11px;
 border-radius:10px;
 background:#f8fafc;
 border:1px solid #e2e8f0;
 color:#64748b;
 font-size:.72rem;
 line-height:1.45;
}
.edit-connection-help{
 margin:10px 0 2px;
 color:#64748b;
 font-size:.72rem;
 line-height:1.4;
}
.edit-connection-help a{color:#0f766e;font-weight:900;text-decoration:underline}

/* Part 8.1D.7.5 — public/view-only share */
.public-view-strip{
 display:flex;justify-content:space-between;align-items:center;gap:14px;
 padding:9px max(18px,calc((100vw - 1600px)/2));
 background:#f8fafc;border-bottom:1px solid #e2e8f0;color:#475569;
}
.public-view-strip>div{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.public-view-strip strong{font-size:.78rem;color:#111827}
.public-view-strip span{font-size:.72rem}
@media(max-width:720px){
 .public-view-strip{align-items:stretch;flex-direction:column}
 .public-view-strip .button{width:100%}
}

/* Part 8.1F.1 — contribution governance */
.contribution-form-card{width:min(820px,calc(100vw - 24px))}
.contribution-dashboard-card{width:min(1100px,calc(100vw - 24px))}
.contribution-dashboard-list{display:grid;gap:12px;max-height:72vh;overflow:auto}
.contribution-request-card{border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff}
.contribution-request-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.contribution-request-head>div{display:grid;gap:3px}.contribution-request-head span{font-size:.74rem;color:var(--muted)}
.contribution-note{margin:8px 0;padding:8px 10px;border-radius:9px;background:#f8fafc;color:#64748b;font-size:.74rem}
.contribution-items{display:grid;gap:8px;margin-top:10px}
.contribution-item{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;padding:10px;border:1px solid #e2e8f0;border-radius:11px;background:#fafafa}
.contribution-field{display:grid;gap:3px}.contribution-field span{font-size:.75rem}.contribution-current{color:#64748b}.contribution-proposed{color:#0f766e;font-weight:800}.contribution-reviewer-value{color:#1d4ed8;font-weight:800}
.contribution-item-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr auto auto auto;gap:7px}
.contribution-item-actions input{border:1px solid #cbd5e1;border-radius:9px;padding:8px}
.contribution-approved{border-color:#a7f3d0;background:#f0fdf4}.contribution-rejected{border-color:#fecaca;background:#fff7f7}.contribution-needs_amendment{border-color:#fed7aa;background:#fffaf0}
@media(max-width:850px){.contribution-item-actions{grid-template-columns:1fr 1fr}.contribution-item-actions .button{width:100%}}

/* Part 8.1F.3 — governance / conflicts / amendments */
.contribution-dashboard-toolbar{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:8px;margin-bottom:10px}
.contribution-dashboard-toolbar input,.contribution-dashboard-toolbar select{border:1px solid #cbd5e1;border-radius:9px;padding:8px}
.contribution-conflicts{display:grid;gap:7px;margin-bottom:12px;padding:10px;border:1px solid #fed7aa;border-radius:12px;background:#fff7ed}
.contribution-conflict-title{display:grid;gap:2px}.contribution-conflict-title span{font-size:.72rem;color:#9a5a18}
.contribution-conflict-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px;border-radius:9px;background:#fff}
.contribution-conflict-row>div:first-child{display:grid;gap:2px}.contribution-conflict-row span{font-size:.72rem;color:#64748b}
.contribution-resubmit{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.3fr auto;gap:7px;padding-top:6px;border-top:1px dashed #f59e0b}
.contribution-resubmit input{border:1px solid #cbd5e1;border-radius:9px;padding:8px}
.contribution-notification-list{display:grid;gap:8px;max-height:60vh;overflow:auto}
.contribution-notification{display:grid;gap:3px;padding:9px 10px;border:1px solid #e2e8f0;border-radius:10px;background:#fff}
.contribution-notification.unread{border-color:#86efac;background:#f0fdf4}
.contribution-notification strong{font-size:.78rem;text-transform:capitalize}.contribution-notification span,.contribution-notification small{font-size:.72rem;color:#64748b}
@media(max-width:820px){.contribution-dashboard-toolbar{grid-template-columns:1fr 1fr}.contribution-resubmit{grid-template-columns:1fr}.contribution-conflict-row{align-items:stretch;flex-direction:column}}

/* Part 8.1F.4 — consolidated governance suite */
.contribution-bulk-bar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.contribution-bulk-bar>span{margin-right:auto;font-size:.72rem;font-weight:900;color:#64748b}
.contribution-select-box{display:flex;align-items:flex-start;padding-top:2px}
.contribution-select-box input{width:16px;height:16px}
.request-governance-actions{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0}
.request-governance-actions select{border:1px solid #cbd5e1;border-radius:9px;padding:7px}
.contribution-history-wrap{margin-top:12px;border-top:1px solid #e2e8f0;padding-top:10px}
.contribution-history-wrap summary{cursor:pointer;font-weight:900;font-size:.78rem;color:#475569}
.contribution-history-list{display:grid;gap:7px;margin-top:8px;max-height:260px;overflow:auto}
.contribution-history-row{display:grid;gap:2px;padding:8px 9px;border:1px solid #e2e8f0;border-radius:9px;background:#fff}
.contribution-history-row strong{font-size:.74rem;text-transform:capitalize}
.contribution-history-row span,.contribution-history-row small{font-size:.7rem;color:#64748b}
.conflict-compare-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.conflict-proposal-card{display:grid;gap:6px;border:1px solid #fed7aa;border-radius:12px;padding:11px;background:#fff7ed}
.conflict-proposal-card span{font-size:.72rem;color:#64748b}
.conflict-proposal-card pre{white-space:pre-wrap;word-break:break-word;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:8px;font-size:.68rem}
@media(max-width:760px){
 .request-governance-actions{display:grid;grid-template-columns:1fr}
 .request-governance-actions .button,.request-governance-actions select{width:100%}
}


/* ========================================================================
   Part 8.1G.1 — Global UI typography, hierarchy & person-state polish
   Purpose: improve elegant information density without redesigning Izimpande.
   ======================================================================== */

:root{
  --type-nav:.86rem;
  --type-action:.82rem;
  --type-utility:.76rem;
  --type-card-name:.96rem;
  --type-card-meta:.74rem;
  --type-label:.66rem;
}

/* Brand and top-level navigation */
.brand strong{
  font-size:1.02rem;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.015em;
}
.brand small{
  margin-top:2px;
  font-size:.72rem;
  line-height:1.2;
}
.brand-mark{
  font-size:.92rem;
  letter-spacing:-.02em;
}
.header-actions{
  align-items:center;
  gap:7px;
}
.header-actions .button{
  min-height:38px;
  padding:8px 12px;
  font-size:var(--type-nav);
  line-height:1.1;
  font-weight:720;
}
.header-actions .button-small{
  min-height:38px;
  padding:8px 12px;
  font-size:var(--type-nav);
}

/* Standard button hierarchy */
.button{
  font-size:var(--type-action);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.005em;
}
.button-small{
  min-height:32px;
  padding:6px 10px;
  font-size:var(--type-utility);
  font-weight:700;
}
.action-grid .button{
  min-height:38px;
  padding:8px 10px;
  font-size:.79rem;
  font-weight:700;
}
.tree-canvas-control{
  font-size:.79rem;
  font-weight:750;
}
.tree-canvas-reset{
  font-size:.72rem;
}

/* Page / section hierarchy */
.stage-top h1{
  font-size:1.78rem;
  line-height:1.12;
  letter-spacing:-.028em;
  font-weight:760;
}
.eyebrow,
.gen-label{
  font-size:var(--type-label);
  font-weight:850;
  letter-spacing:.13em;
}
.panel h2{
  font-size:1.42rem;
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:760;
}
.panel h3,
#selected-name{
  font-size:1rem;
  line-height:1.2;
  font-weight:760;
}
.compact-praises{
  margin-top:9px;
  font-size:.92rem;
  line-height:1.25;
}
.tree-compact-meta{
  font-size:.69rem;
  font-weight:720;
}
.tree-chip span{
  font-size:.62rem;
  font-weight:650;
}
.tree-chip strong{
  font-size:1.13rem;
  font-weight:800;
}

/* Search / people list — supporting navigation, not the hero */
.people-list{
  gap:7px;
}
.person-row{
  padding:9px 10px;
  border-radius:10px;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.person-row strong{
  font-size:.88rem;
  line-height:1.18;
  font-weight:720;
  letter-spacing:-.01em;
}
.person-row small{
  margin-top:3px;
  font-size:.71rem;
  line-height:1.25;
  font-weight:520;
}
.person-row.active{
  border-color:#5a9a80;
  background:#effbf5;
  box-shadow:0 0 0 1px rgba(6,95,70,.06);
}
.lineage-code{
  font-size:.66rem;
  font-weight:780;
}

/* Genealogy cards — primary visual content */
.node{
  padding:12px 13px;
  border-radius:12px;
  line-height:1.2;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease,transform .15s ease;
}
.node .name-button,
.node .name{
  font-size:var(--type-card-name);
  line-height:1.16;
  font-weight:760;
  letter-spacing:-.014em;
}
.node .aka{
  margin-top:3px;
  font-size:.72rem;
  font-weight:700;
}
.node .meta{
  margin-top:5px;
  font-size:var(--type-card-meta);
  line-height:1.28;
  font-weight:520;
}
.lineage-parent-cue{
  font-size:.64rem;
  line-height:1.2;
  font-weight:700;
}
.connector,
.connector-label{
  font-size:.64rem;
  font-weight:700;
}
.node.active{
  border-color:#287258;
  background:#fbfffd;
  box-shadow:
    0 0 0 2px rgba(6,95,70,.08),
    0 8px 18px rgba(15,23,42,.07);
}

/* Logged-in person's own node is deliberately distinct from ordinary selection. */
.current-user-person{
  position:relative!important;
  border-color:#111827!important;
  box-shadow:0 0 0 2px #111827 inset,0 7px 18px rgba(15,23,42,.08)!important;
}
.current-user-person.active{
  background:#fff!important;
  border-color:#111827!important;
  box-shadow:0 0 0 2px #111827 inset,0 8px 20px rgba(15,23,42,.11)!important;
}
.you-badge{
  top:6px;
  right:6px;
  padding:2px 7px;
  font-size:.54rem;
  font-weight:850;
  letter-spacing:.07em;
}

/* Tree-view controls should read as secondary controls. */
.tree-view-toggle .button{
  min-height:35px;
  padding:7px 11px;
  font-size:.79rem;
  font-weight:720;
}
.breadcrumb{
  font-size:.76rem;
}
.relative-group strong{
  font-size:.74rem;
  font-weight:760;
}
.relative-chip{
  font-size:.72rem;
  font-weight:600;
}

/* Modal hierarchy */
.modal-header h2{
  margin:.1rem 0 0;
  font-size:1.46rem;
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:760;
}
.modal-card{
  line-height:1.42;
}
.field label{
  font-size:.81rem;
  font-weight:680;
}
.field input,
.field select,
.field textarea{
  font-size:.86rem;
}
.muted,
.connection-meta{
  line-height:1.42;
}
.connection-card h3{
  font-size:.94rem;
  font-weight:740;
}

/* Profile & outline refinement */
.profile-aka{
  font-size:.94rem;
  font-weight:750;
}
.profile-section h3{
  font-size:.9rem;
  font-weight:760;
}
.outline-name{
  font-size:.85rem;
  font-weight:720;
}
.outline-meta,
.outline-partners{
  font-size:.68rem;
}

/* More balanced responsive scaling. */
@media(max-width:900px){
  .header-actions .button,
  .header-actions .button-small{
    min-height:36px;
    padding:7px 10px;
    font-size:.8rem;
  }
  .stage-top h1{
    font-size:1.55rem;
  }
  .node .name-button,
  .node .name{
    font-size:.92rem;
  }
}

@media(max-width:600px){
  .brand strong{font-size:.96rem}
  .brand small{font-size:.68rem}
  .stage-top h1{font-size:1.38rem}
  .panel h2{font-size:1.28rem}
  .header-actions .button,
  .header-actions .button-small{
    font-size:.77rem;
  }
  .tree-view-toggle .button{
    font-size:.75rem;
  }
  .person-row strong{font-size:.85rem}
  .node .name-button,
  .node .name{font-size:.89rem}
  .node .meta{font-size:.7rem}
}


/* Part 8.1G.1a — Navigate Relatives: restore lighter name styling */
.relative-chip{
  font-weight:400;
  letter-spacing:0;
}


/* ========================================================================
   Part 8.1G.2 — Family Totem thumbnail
   Compact fixed-ratio tree identity image; does not alter the card height.
   ======================================================================== */
.family-summary-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) 82px 70px;
  align-items:start;
  gap:10px;
}
.family-summary-copy{
  min-width:0;
}
.family-totem-box{
  width:82px;
  aspect-ratio:1 / 1;
  align-self:start;
  position:relative;
  overflow:hidden;
  border:1px dashed #cbd5e1;
  border-radius:13px;
  padding:0;
  background:#f8fafc;
  color:#64748b;
  cursor:default;
  display:grid;
  place-items:center;
  box-shadow:none;
}
.family-totem-box.can-upload{
  cursor:pointer;
}
.family-totem-box.can-upload:hover{
  border-color:#7ca891;
  background:#f2faf6;
}
.family-totem-box.has-image{
  border-style:solid;
  border-color:#d7e0dc;
  background:#fff;
}
.family-totem-box img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.family-totem-placeholder{
  width:100%;
  height:100%;
  padding:7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  text-align:center;
  font-size:.58rem;
  line-height:1.12;
  font-weight:700;
  color:#64748b;
}
.family-totem-icon{
  width:22px;
  height:22px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:.82rem;
  line-height:1;
  color:#64748b;
}
.family-totem-box.can-upload .family-totem-placeholder::after{
  content:"Upload";
  font-size:.52rem;
  font-weight:600;
  color:#0f766e;
}
.family-totem-box.uploading{
  opacity:.62;
  pointer-events:none;
}
.family-totem-box.uploading .family-totem-placeholder span:last-child::after{
  content:"…";
}

@media(max-width:1180px){
  .family-summary-header{
    grid-template-columns:minmax(0,1fr) 72px 64px;
    gap:8px;
  }
  .family-totem-box{width:72px}
}
@media(max-width:900px){
  .family-summary-header{
    grid-template-columns:minmax(0,1fr) 72px 64px;
  }
}
@media(max-width:420px){
  .family-summary-header{
    grid-template-columns:minmax(0,1fr) 62px 58px;
    gap:7px;
  }
  .family-totem-box{
    width:62px;
    border-radius:11px;
  }
  .family-totem-placeholder{
    font-size:.52rem;
    padding:5px;
  }
}


/* ========================================================================
   Part 8.1G.2a — Family summary alignment refinement
   Totem and Tree ID are fixed matching squares; metadata gets breathing room.
   ======================================================================== */
.family-summary-header{
  grid-template-columns:minmax(0,1fr) 82px 82px;
  column-gap:10px;
  row-gap:10px;
}
.family-totem-box,
.family-summary-header .tree-chip{
  width:82px;
  height:82px;
  min-width:82px;
  min-height:82px;
  aspect-ratio:1 / 1;
  box-sizing:border-box;
  align-self:start;
}
.family-summary-header .tree-chip{
  padding:8px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
/* One clear line of breathing room below the image/ID row before metadata/actions. */
.family-summary-copy .tree-compact-meta{
  margin-top:12px;
}

@media(max-width:1180px){
  .family-summary-header{
    grid-template-columns:minmax(0,1fr) 72px 72px;
  }
  .family-totem-box,
  .family-summary-header .tree-chip{
    width:72px;
    height:72px;
    min-width:72px;
    min-height:72px;
  }
}
@media(max-width:420px){
  .family-summary-header{
    grid-template-columns:minmax(0,1fr) 62px 62px;
  }
  .family-totem-box,
  .family-summary-header .tree-chip{
    width:62px;
    height:62px;
    min-width:62px;
    min-height:62px;
  }
  .family-summary-copy .tree-compact-meta{
    margin-top:10px;
  }
}

/* Part 8.1G.3 — Izithakazelo rich-text viewer/editor */
.izithakazelo-card{width:min(900px,calc(100vw - 24px))}
.izithakazelo-editor-wrap{display:grid;gap:8px}
.rich-toolbar{display:flex;flex-wrap:wrap;gap:5px;padding:7px;border:1px solid #dbe3e8;border-radius:10px;background:#f8fafc}
.rich-toolbar button{min-height:30px;padding:5px 9px;border:1px solid #d7dee5;border-radius:7px;background:#fff;color:#1f2937;font-size:.74rem;font-weight:650;cursor:pointer}
.rich-toolbar button:hover{border-color:#7ca891;background:#f2faf6}
.rich-toolbar-divider{width:1px;align-self:stretch;background:#dbe3e8;margin:0 2px}
.izithakazelo-content{min-height:280px;max-height:58vh;overflow:auto;padding:18px 20px;border:1px solid #e1e7eb;border-radius:12px;background:#fff;color:#172033;font-size:.94rem;line-height:1.65;white-space:normal}
.izithakazelo-content.empty::before{content:attr(data-placeholder);color:#94a3b8}
.izithakazelo-content.editing{border-color:#6f9f88;box-shadow:0 0 0 3px rgba(6,95,70,.07);outline:none}
.izithakazelo-content p{margin:.35em 0 .75em}
.izithakazelo-content h2,.izithakazelo-content h3{margin:1em 0 .45em;line-height:1.25}
.izithakazelo-content ul,.izithakazelo-content ol{padding-left:1.4em}
.izithakazelo-content blockquote{margin:.8em 0;padding:.2em 0 .2em 1em;border-left:3px solid #d2a85b;color:#475569}
.izithakazelo-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;padding-top:12px;border-top:1px solid #e2e8f0}
.izithakazelo-actions #izithakazelo-edit{margin-left:auto}
@media(max-width:650px){
 .izithakazelo-content{min-height:240px;padding:14px;font-size:.88rem}
 .izithakazelo-actions{display:grid;grid-template-columns:1fr 1fr}
 .izithakazelo-actions .button{width:100%}
 .izithakazelo-actions #izithakazelo-edit{margin-left:0}
}


/* ========================================================================
   Part 8.1G.4 — Global Izimpande application logo
   This is a hard-embedded APP identity, never a per-tree setting.
   Original 40px mark increased by 10% to a fixed 44px square.
   ======================================================================== */
.brand-mark{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  flex:0 0 44px;
  padding:0;
  overflow:hidden;
  border-radius:12px;
  background:var(--brand);
  display:grid;
  place-items:center;
}
.brand-mark img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}


/* ========================================================================
   Part 8.1G.5 — Signed-in account identity
   Keeps the existing header button footprint while making session state obvious.
   ======================================================================== */
#account-button.account-button-signed{
  height:38px;
  min-height:38px;
  padding:3px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  line-height:1;
}
.account-button-name{
  display:block;
  color:#0b6b50;
  font-size:.84rem;
  line-height:1.05;
  font-weight:800;
}
.account-button-status{
  display:block;
  margin-top:2px;
  color:#7b8794;
  font-size:.53rem;
  line-height:1;
  font-style:italic;
  font-weight:500;
  letter-spacing:.015em;
  text-transform:none;
}
#account-button.account-button-signed:hover .account-button-name{
  color:#084d3b;
}

@media(max-width:900px){
  #account-button.account-button-signed{
    height:36px;
    min-height:36px;
    padding:2px 10px;
  }
  .account-button-name{
    font-size:.79rem;
  }
  .account-button-status{
    font-size:.5rem;
  }
}


/* Part 8.1H — Branch Authority, navigation & intelligent onboarding */
.field-disabled{
  opacity:.55;
}
.field-disabled input{
  background:#f1f5f9!important;
  cursor:not-allowed;
}
.profile-connection-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.my-family-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.my-family-choice-option{
  appearance:none;
  border:1px solid #d7e0dc;
  border-radius:13px;
  padding:14px;
  background:#fff;
  color:#172033;
  text-align:left;
  cursor:pointer;
  display:grid;
  gap:4px;
}
.my-family-choice-option:hover{
  border-color:#6f9f88;
  background:#f3faf6;
}
.my-family-choice-option strong{
  color:#0b6b50;
  font-size:.9rem;
}
.my-family-choice-option span{
  color:#64748b;
  font-size:.72rem;
  line-height:1.35;
}
#generation-link-wrap{
  padding:10px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#f8fafc;
}
@media(max-width:620px){
  .profile-connection-choice-grid,
  .my-family-choice-grid{
    grid-template-columns:1fr;
  }
}


/* ========================================================================
   Part 8.1H.1 — Clean responsive pop-ups
   - removes unnecessary horizontal scroll
   - lets content wrap to screen width
   - keeps [×] close control visible
   - reduces the "modal inside a scroll box" feel
   ======================================================================== */

dialog.modal{
  max-width:none;
  max-height:none;
  overflow:visible;
  padding:12px;
}

/* Default modal card: responsive to viewport, never wider than screen. */
.modal-card{
  width:min(900px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 24px);
  overflow-x:hidden;
  overflow-y:auto;
  box-sizing:border-box;
  position:relative;
}

/* Secure Access / compact pop-ups should be narrower and cleaner. */
.modal-card.auth-card,
.my-family-choice-card{
  width:min(620px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
}

/* Natural text wrapping throughout modals. */
.modal-card,
.modal-card *{
  min-width:0;
}

.modal-card p,
.modal-card span,
.modal-card strong,
.modal-card small,
.modal-card label,
.modal-card .muted,
.modal-card .connection-guide,
.modal-card .edit-connection-help{
  overflow-wrap:anywhere;
  word-break:normal;
  white-space:normal;
}

/* Header stays visible while a genuinely long dialog is scrolled. */
.modal-header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  padding-top:2px;
  padding-bottom:10px;
  margin-bottom:8px;
}

/* Close button always stays visible in the top-right corner. */
.modal-header .icon-button{
  position:sticky;
  top:0;
  right:0;
  z-index:60;
  flex:0 0 auto;
  align-self:flex-start;
}

/* Inputs can never force the dialog wider than the viewport. */
.modal-card input,
.modal-card select,
.modal-card textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* Button groups wrap instead of creating a horizontal scrollbar. */
.modal-actions,
.profile-actions,
.inline-actions,
.account-inline-actions,
.izithakazelo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.modal-actions .button,
.profile-actions .button,
.inline-actions .button,
.account-inline-actions .button{
  max-width:100%;
  white-space:normal;
}

/* Secure Access profile summary: compact horizontal information rows. */
#auth-signed-in .account-profile-card,
#auth-signed-in .account-section{
  max-width:100%;
}

/* Long email addresses / phone numbers wrap instead of stretching the card. */
#auth-user-identities{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Choice grids remain responsive and do not overflow. */
.my-family-choice-grid,
.profile-connection-choice-grid{
  width:100%;
  max-width:100%;
}

.my-family-choice-option{
  width:100%;
  max-width:100%;
}

/* On phones, use almost all available width while retaining a floating card. */
@media(max-width:680px){
  dialog.modal{
    padding:8px;
  }

  .modal-card,
  .modal-card.auth-card,
  .my-family-choice-card,
  .contribution-dashboard-card,
  .contribution-form-card,
  .izithakazelo-card{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    padding:14px;
    border-radius:14px;
  }

  .modal-header{
    padding-right:0;
  }

  .modal-header h2{
    font-size:1.22rem;
    line-height:1.18;
  }

  .modal-actions,
  .profile-actions,
  .account-inline-actions,
  .izithakazelo-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .modal-actions .button,
  .profile-actions .button,
  .account-inline-actions .button,
  .izithakazelo-actions .button{
    width:100%;
  }

  .my-family-choice-grid,
  .profile-connection-choice-grid{
    grid-template-columns:1fr;
  }
}

/* Secure Access action hierarchy — keep the key request queue visible without a tall single-column stack. */
@media(max-width:680px){
  #auth-signed-in .auth-account-actions{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
  #auth-signed-in .auth-account-actions #access-dashboard-open{grid-column:1/-1;order:-1;}
  #auth-signed-in .auth-account-actions .button{width:100%;}
  #auth-signed-in .auth-user-summary{padding:10px 12px;margin-top:8px;}
  #auth-signed-in .auth-membership-section{margin-top:10px;}
  .auth-card .modal-header{padding-bottom:5px;margin-bottom:4px;}
  .auth-card .modal-header .muted{font-size:.75rem;line-height:1.3;margin:.25rem 0;}
}

/* Part 8.1H.2 Smart Invite */
.invite-relative-field{position:relative}.invite-member-suggestions{position:absolute;left:0;right:0;top:calc(100% - 2px);z-index:80;max-height:240px;overflow-y:auto;background:#fff;border:1px solid #d7e0dc;border-radius:10px;box-shadow:0 12px 28px rgba(15,23,42,.14);padding:5px}
.invite-member-suggestion{width:100%;border:0;background:#fff;padding:9px 10px;border-radius:8px;text-align:left;cursor:pointer;display:grid;gap:2px}.invite-member-suggestion:hover{background:#f1f8f4}.invite-member-suggestion strong{font-size:.78rem}.invite-member-suggestion span,.invite-no-match span{font-size:.67rem;color:#64748b}.invite-no-match{padding:10px;display:grid;gap:3px}.invite-member-match{margin-top:7px}
.invite-member-match-card{border:1px solid #8fc7aa;background:#eef9f3;border-radius:10px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}.invite-member-match-card>div{display:grid;gap:1px;min-width:0}.invite-member-match-card small{font-size:.61rem;color:#0b6b50;text-transform:uppercase;font-weight:800}.invite-member-match-card strong{font-size:.78rem}.invite-member-match-card span{font-size:.66rem;color:#64748b}.invite-change-match{padding:5px 9px!important;font-size:.68rem!important}

/* Part 8.1H.3 Direct share + confirmed identity */
.smart-invite-result{display:grid;gap:9px}.smart-invite-result[hidden]{display:none}.invite-result-summary{display:grid;gap:2px;padding:9px 10px;border:1px solid #d7e0dc;border-radius:10px;background:#f3faf6}.invite-result-summary strong{font-size:.82rem}.invite-result-summary span{font-size:.69rem;color:#64748b}.invite-share-actions{display:flex;flex-wrap:wrap;gap:7px}.invite-intended-person{display:grid;gap:3px;margin:10px 0;padding:11px 12px;border:1px solid #8fc7aa;border-radius:11px;background:#eef9f3}.invite-intended-person[hidden]{display:none}.invite-intended-person>small{color:#0b6b50;font-size:.61rem;font-weight:850;letter-spacing:.07em}.invite-intended-person>strong{font-size:.9rem}.invite-intended-person>p{margin:4px 0 0;font-size:.7rem}@media(max-width:620px){.invite-share-actions{display:grid;grid-template-columns:1fr}.invite-share-actions .button{width:100%}}

/* Part 8.1H.4 — Live Preview spouse control */
.preview-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.preview-spouse-toggle{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;color:#475569;cursor:pointer;user-select:none}
.preview-spouse-toggle input{position:absolute;opacity:0;pointer-events:none}
.preview-switch{width:30px;height:17px;border-radius:999px;background:#cbd5e1;position:relative;transition:.18s}
.preview-switch:after{content:"";position:absolute;width:13px;height:13px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.18s}
.preview-spouse-toggle input:checked+.preview-switch{background:#177a5a}
.preview-spouse-toggle input:checked+.preview-switch:after{transform:translateX(13px)}
.preview-spouse-toggle small{min-width:22px;font-size:.59rem;font-weight:800;color:#64748b}
@media(max-width:680px){.preview-toolbar{justify-content:flex-start}.preview-spouse-toggle{width:100%;justify-content:flex-end;padding-top:2px}}

/* Part 8.1I — Family Record Import + subtle oral-history anecdotes */
.profile-anecdotes-section{margin-top:.15rem;padding-top:.25rem;border-top:0}
.profile-anecdotes{display:grid;gap:.35rem}
.profile-anecdote{margin:0;font-size:.92rem;font-style:italic;font-weight:400;line-height:1.45;color:var(--muted,#66706b)}
.profile-anecdote-meaning{display:block;margin-top:.12rem;font-size:.82rem;font-style:normal;opacity:.8}
.import-record-card{max-width:min(1040px,96vw)}
.import-summary{margin:.75rem 0;padding:.75rem 1rem;border:1px solid rgba(0,0,0,.09);border-radius:14px;background:rgba(255,255,255,.55)}
.import-items{display:grid;gap:.65rem;max-height:56vh;overflow:auto;padding-right:.2rem}
.import-item{border:1px solid rgba(0,0,0,.09);border-radius:14px;padding:.8rem;background:rgba(255,255,255,.7)}
.import-item-head{display:flex;gap:.6rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.import-source{font-size:.9rem;line-height:1.45;flex:1;min-width:240px}
.import-match{font-size:.82rem;color:var(--muted,#66706b)}
.import-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.55rem}
.import-controls select,.import-controls input:not([type="radio"]):not([type="checkbox"]){width:100%}
.import-badge{display:inline-flex;padding:.16rem .45rem;border-radius:999px;background:rgba(15,90,67,.09);font-size:.75rem;font-weight:700}
@media(max-width:760px){.import-controls{grid-template-columns:1fr}.import-items{max-height:none;overflow:visible}}


/* Part 8.1I.1 — keep option-card radios compact and immune to generic input sizing */
.option-card > input[type="radio"]{
  width:16px!important;
  height:16px!important;
  min-width:16px;
  flex:0 0 16px;
  margin:2px 0 0;
  padding:0;
  accent-color:var(--brand);
}
.import-controls input:not([type="radio"]):not([type="checkbox"]),
.import-controls select{width:100%}

/* Part 8.1I.4 — mobile containment and safe page gutters */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.site-header,.app-footer,.container,.app-shell,.sidebar,.main-stage,.tree-viewport-shell,.canvas-wrap{max-width:100%}
.app-shell,.main-stage,.tree-viewport-shell{min-width:0}
.canvas-wrap{width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
@media(max-width:1100px){
  .container{width:calc(100% - 20px);margin-left:auto;margin-right:auto}
  .app-shell{grid-template-columns:minmax(0,1fr)!important;gap:14px}
  .sidebar,.main-stage{width:100%;min-width:0}
  .header-inner{flex-wrap:wrap;align-items:center}
  .header-actions{min-width:0;max-width:100%}
  .stage-top{flex-wrap:wrap}
  .tree-view-toggle{max-width:100%}
}
@media(max-width:600px){
  .container{width:calc(100% - 16px)}
  .app-shell{padding-top:10px}
  .panel{padding:13px}
  .header-inner{gap:8px;padding-top:6px;padding-bottom:6px}
  .header-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .header-actions .button,.header-actions .button-small{width:100%;min-width:0;white-space:normal}
  .tree-viewport-shell > .tree-canvas-controls{right:6px!important}
  .unconnected-section{margin:8px 8px 16px;padding:12px}
  .unconnected-list{grid-template-columns:minmax(0,1fr)}
}


/* ========================================================================
   Part 8.1I.5 — established control sizing + geography sections
   ======================================================================== */
input[type="checkbox"],
input[type="radio"]{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  flex:0 0 18px!important;
  padding:0!important;
  margin:0;
  align-self:flex-start;
  accent-color:var(--brand);
}
.check-field{align-items:center}
.check-field input[type="checkbox"]{margin-top:1px}
.life-status label{display:inline-flex;align-items:center;gap:7px;min-height:34px}
.life-status input[type="radio"]{align-self:center}

.geography-fields{
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fafc;
}
.subsection-heading{display:grid;gap:3px}
.subsection-heading strong{font-size:.95rem}
.geography-fields .nested-grid{margin-top:10px}
.import-controls [data-import-target]{min-width:0;width:100%}


/* ========================================================================
   Part 8.1J — compact wives + floating family panel
   ======================================================================== */
.node{position:relative}
.wife-count-tag{
  position:absolute;
  top:7px;
  right:7px;
  min-height:24px;
  max-width:82px;
  padding:3px 7px;
  border:1px solid #e8d7b5;
  border-radius:7px;
  background:#fff8e8;
  color:#8a5a13;
  font-size:.62rem;
  line-height:1.1;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.wife-count-tag:hover,
.wife-count-tag[aria-expanded="true"]{
  border-color:#c7923d;
  background:#ffefc8;
}
.node:has(.wife-count-tag) .name-button{padding-right:58px}

.wife-family-popover{
  position:fixed;
  z-index:120;
  max-height:min(520px,calc(100vh - 24px));
  overflow:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 20px 55px rgba(15,23,42,.2);
  padding:12px;
}
.wife-popover-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 10px;
  border-bottom:1px solid var(--line);
}
.wife-popover-head>div{display:grid;gap:2px;min-width:0}
.wife-popover-head small{font-size:.62rem;font-weight:900;letter-spacing:.1em;color:#a16207}
.wife-popover-head strong{font-size:.95rem}
.wife-popover-head span{font-size:.72rem;color:var(--muted)}
.wife-popover-close{
  border:0;background:transparent;font-size:1.4rem;line-height:1;cursor:pointer;
  min-width:32px;min-height:32px;border-radius:8px
}
.wife-popover-close:hover{background:#f1f5f9}
.wife-popover-list{display:grid;gap:7px;margin-top:10px}
.wife-popover-row{
  border:1px solid var(--line);
  border-left:4px solid #f9a8d4;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.wife-popover-wife{
  width:100%;
  min-height:46px;
  border:0;
  background:#fff;
  color:inherit;
  padding:8px 9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  cursor:pointer;
}
.wife-popover-wife>span:first-child{display:grid;gap:2px;min-width:0}
.wife-popover-wife strong{font-size:.78rem}
.wife-popover-wife small{font-size:.67rem;color:var(--muted)}
.wife-child-count{
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 7px;
  font-size:.62rem;
  font-weight:900;
  color:#475569;
  background:#f8fafc;
}
.wife-popover-children{
  display:grid;
  gap:4px;
  padding:0 9px 9px 18px;
}
.wife-child-ref{
  width:100%;
  border:0;
  border-left:2px solid #dbe5df;
  border-radius:0 7px 7px 0;
  background:#f8fafc;
  padding:7px 8px;
  color:inherit;
  text-align:left;
  font-size:.7rem;
  font-weight:800;
  cursor:pointer;
}
.wife-child-ref:hover{background:#ecfdf5;border-left-color:#4f8f76}
.family-reference-highlight{
  animation:familyReferencePulse .65s ease-in-out 2;
}
@keyframes familyReferencePulse{
  50%{box-shadow:0 0 0 5px rgba(161,98,7,.22);border-color:#a16207}
}

@media(max-width:700px){
  .wife-family-popover{
    left:8px!important;
    right:8px!important;
    bottom:10px!important;
    top:auto!important;
    width:auto!important;
    max-height:min(70%,560px);
    border-radius:18px;
  }
}
@media(prefers-reduced-motion:reduce){
  .family-reference-highlight{animation:none;outline:3px solid #a16207}
}

.import-governance{margin-top:6px;padding:7px 9px;border-radius:8px;font-size:.72rem;font-weight:800;background:#f8fafc;border:1px solid var(--line);color:#475569}
.import-governance-awaiting_endorsement{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.import-governance-manual_action_required{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.import-governance-endorsed,.import-governance-admin_hard_approved{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
.import-governance-rejected{background:#fef2f2;border-color:#fecaca;color:#991b1b}


/* ========================================================================
   Part 8.1L — approved compact-wife card layout
   ======================================================================== */

/* Concept 1: keep the wife tag top-right, but reserve its lane so it cannot
   collide with the Parents cue or the person's name. */
.node:has(.wife-count-tag){padding-top:12px}
.node:has(.wife-count-tag) .lineage-parent-cue{
  padding-right:74px;
  min-height:24px;
}
.node:has(.wife-count-tag) .name-button{padding-right:0}

.wife-count-tag{
  top:8px;
  right:9px;
  min-height:23px;
  max-width:none;
  padding:3px 8px;
  border-radius:8px;
  font-size:.60rem;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

/* Approved name hierarchy: given names remain the visual anchor; Nsele/surname
   hangs immediately below in smaller, lighter type. */
.node .name-button{
  display:grid;
  gap:0;
  width:100%;
}
.node-given-name{
  display:block;
  font-size:inherit;
  line-height:1.08;
  font-weight:900;
}
.node-surname{
  display:block;
  margin-top:2px;
  font-size:.78em;
  line-height:1.05;
  font-weight:500;
  color:var(--muted);
}

/* Wife panel follows the approved numbered, expandable family-panel concept. */
.wife-family-popover{width:min(390px,calc(100vw - 24px))}
.wife-popover-row{
  border-left:1px solid var(--line);
  border-radius:12px;
  padding:2px;
}
.wife-popover-wife{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  gap:9px;
}
.wife-order-badge{
  width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;
  background:#f3e8ff;color:#7c3aed;
  font-size:.68rem;font-weight:900;
}
.wife-child-count{
  max-width:128px;
  white-space:normal;
  text-align:right;
  line-height:1.2;
}
.wife-popover-children{
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:4px 9px 10px 42px;
}
.wife-child-ref{border-left:0;border:1px solid var(--line);border-radius:8px}

/* Make the second-parent intelligence visible even before the native select
   menu is opened. The ★ remains on the suggested option itself as well. */
.second-parent-smart-cue{
  display:grid;
  gap:2px;
  margin-top:7px;
  padding:8px 10px;
  border:1px solid #ddd6fe;
  border-radius:9px;
  background:#faf5ff;
  color:#5b21b6;
  font-size:.68rem;
  line-height:1.3;
}
.second-parent-smart-cue strong{font-size:.7rem}
.second-parent-smart-cue span{color:#64748b}

@media(max-width:700px){
  .node:has(.wife-count-tag) .lineage-parent-cue{padding-right:68px}
  .wife-popover-children{grid-template-columns:1fr;padding-left:42px}
}


/* ========================================================================
   Part 8.1M — Guided Family Record Import
   ======================================================================== */
.import-match-card{
  display:grid;
  gap:7px;
  padding:9px 10px;
  border:1px solid #dbe5df;
  border-radius:10px;
  background:#f8fbf9;
}
.import-match-card>strong{font-size:.75rem;color:#173b30}
.import-match-reasons{display:flex;flex-wrap:wrap;gap:5px}
.import-match-reasons span{
  padding:3px 7px;border-radius:999px;background:#ecfdf5;color:#047857;
  border:1px solid #bbf7d0;font-size:.62rem;font-weight:800
}
.import-order-warning{
  padding:7px 8px;border-radius:8px;background:#fff7ed;border:1px solid #fed7aa;
  color:#9a3412;font-size:.65rem;line-height:1.35;font-weight:700
}
.import-item-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.import-bridge-panel{
  display:grid;gap:6px;margin-top:8px;padding:10px;border:1px solid #bfdbfe;
  border-radius:10px;background:#eff6ff
}
.import-bridge-panel>strong{font-size:.76rem;color:#1e3a8a}
.import-bridge-panel>span{font-size:.66rem;color:#64748b;line-height:1.35}
.import-bridge-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:7px}
.import-bridge-grid select{min-width:0;width:100%}
.import-probe{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
  gap:7px;align-items:center;margin-top:8px;padding:10px;border:1px dashed #c4b5fd;
  border-radius:10px;background:#faf5ff
}
.import-probe strong{font-size:.7rem;color:#5b21b6}
.import-probe select{min-width:0;width:100%}
.import-probe small{grid-column:1/-1;color:#64748b;font-size:.62rem}

.import-prefill-note{
  display:grid;gap:3px;margin-bottom:10px;padding:9px 10px;border-radius:10px;
  border:1px solid #bfdbfe;background:#eff6ff
}
.import-prefill-note strong{font-size:.72rem;color:#1d4ed8}
.import-prefill-note span{font-size:.67rem;color:#334155;font-style:italic}
.import-prefill-note small{font-size:.61rem;color:#64748b}

.profile-anecdote-heading{
  display:grid;gap:1px;margin-bottom:5px
}
.profile-anecdote-heading strong{font-size:.76rem;color:#334155}
.profile-anecdote-heading span{font-size:.62rem;color:#94a3b8}
.profile-anecdote{
  margin:0;padding:7px 0 7px 10px;border-left:2px solid #d6c7a2;
  font-style:italic;font-weight:400;line-height:1.45;color:var(--muted,#66706b)
}
.profile-anecdote-source{display:block;font-size:.88rem}
.profile-anecdote-meaning{
  display:grid;margin-top:4px;font-size:.76rem;font-style:normal;color:#64748b
}
.profile-anecdote-meaning small{
  display:block;margin-bottom:1px;text-transform:uppercase;letter-spacing:.05em;
  font-size:.55rem;font-weight:900;color:#94a3b8
}

@media(max-width:760px){
  .import-bridge-grid,.import-probe{grid-template-columns:1fr}
  .import-probe small{grid-column:1}
}


/* ========================================================================
   Part 8.1N — Mobile Tree Workspace + localisation foundation
   Desktop layout remains unchanged.
   ======================================================================== */

.language-control{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  padding:4px 7px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:#64748b;
  font-size:.65rem;
  font-weight:800;
}
.language-control select{
  border:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-weight:850;
  padding:2px;
}

.mobile-workspace-tabs{display:none}

@media(max-width:700px){
  /* App identity remains visible but compact. */
  .site-header{position:sticky;top:0}
  .header-inner{
    min-height:54px;
    flex-wrap:nowrap;
    padding-top:5px;
    padding-bottom:5px;
  }
  .brand{min-width:0;gap:7px}
  .brand-mark{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;flex-basis:38px!important}
  .brand strong{font-size:.82rem}
  .brand small{font-size:.58rem;white-space:nowrap}
  .header-actions{
    width:auto!important;
    display:flex!important;
    flex-wrap:nowrap;
    margin-left:auto;
    gap:5px;
  }
  .header-actions #view-full,
  .header-actions #view-desc,
  .header-actions #view-anc,
  .header-actions #open-tree-button,
  .header-actions #request-family-access-top{
    display:none!important;
  }
  .language-control{
    min-height:34px;
    padding:3px 5px;
  }
  .language-control>span{display:none}
  .language-control select{max-width:74px}
  #account-button{width:auto!important;min-width:74px!important;min-height:34px!important;padding:4px 8px!important}

  /* One-column app, but the sidebar becomes a compact identity + shared workspace. */
  .app-shell{
    display:flex!important;
    flex-direction:column;
    gap:9px!important;
    padding-top:8px;
    padding-bottom:32px;
  }
  .sidebar{
    display:block;
    width:100%;
  }

  /* Family identity: keep family totem + tree ID while trimming vertical waste. */
  .sidebar>section.panel:first-child{
    padding:10px 11px;
    border-radius:14px;
    margin-bottom:8px;
  }
  .family-summary-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) 46px auto;
    align-items:center;
    gap:8px;
  }
  .family-summary-copy .eyebrow{margin-bottom:2px;font-size:.57rem}
  .family-summary-copy h2{font-size:1.12rem;line-height:1.05}
  .compact-praises{margin:2px 0;font-size:.68rem}
  .tree-compact-meta{font-size:.61rem}
  .family-totem-box{
    width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;
    border-radius:10px!important;
  }
  .family-totem-placeholder span:last-child{font-size:.48rem}
  .tree-chip{padding:6px 8px;border-radius:9px}
  .tree-chip span{font-size:.52rem}
  .tree-chip strong{font-size:1rem}
  .compact-tree-toolbar{
    margin-top:7px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }
  .compact-tree-toolbar .button{
    min-width:0;
    min-height:31px;
    padding:5px 5px;
    font-size:.62rem;
    white-space:normal;
  }

  /* Approved People / Selected / Relatives three-way workspace. */
  .mobile-workspace-tabs{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    padding:4px;
    margin-bottom:6px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
  }
  .mobile-workspace-tab{
    position:relative;
    min-width:0;
    min-height:42px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#475569;
    font-size:.69rem;
    font-weight:850;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
  }
  .mobile-workspace-tab.active{
    background:var(--brand);
    color:#fff;
  }
  .mobile-tab-icon{font-size:.8rem}
  .mobile-selected-indicator{
    position:absolute;
    top:7px;
    right:8px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#fbbf24;
    box-shadow:0 0 0 2px rgba(255,255,255,.9);
  }

  .mobile-workspace-panel{
    margin:0 0 8px;
    padding:10px 11px!important;
    border-radius:13px!important;
    max-height:150px;
    overflow:auto;
    box-shadow:none!important;
  }
  .mobile-workspace-panel[hidden]{display:none!important}
  .mobile-workspace-panel>.eyebrow{
    margin:0 0 5px;
    font-size:.56rem;
  }

  /* People panel stays searchable without becoming a long page. */
  #mobile-panel-people .search-wrap{margin:4px 0 6px}
  #mobile-panel-people .search-wrap input{
    min-height:38px;
    font-size:16px;
    padding:7px 9px;
  }
  #mobile-panel-people #clear-search{min-height:38px;padding:6px 8px}
  #mobile-panel-people .people-list{
    max-height:82px;
    gap:4px;
  }
  #mobile-panel-people .person-row{
    padding:6px 8px;
    border-radius:8px;
  }
  #mobile-panel-people .person-row strong{font-size:.72rem}
  #mobile-panel-people .person-row small{font-size:.6rem}

  /* Selected Person becomes a compact action dashboard in the shared area. */
  #mobile-panel-selected h3{font-size:.9rem}
  #mobile-panel-selected #selected-meta{margin:3px 0;font-size:.64rem}
  #mobile-panel-selected .lineage-code{margin-top:1px;font-size:.58rem;padding:3px 6px}
  #mobile-panel-selected .action-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px;
    margin-top:7px;
  }
  #mobile-panel-selected .action-grid .button{
    min-width:0;
    min-height:32px;
    padding:5px 4px;
    font-size:.58rem;
    line-height:1.12;
    white-space:normal;
  }
  #mobile-panel-selected #focus-branch{
    min-height:30px;
    margin-top:5px;
    font-size:.61rem;
    padding:4px 7px;
  }

  /* Relatives stay in the same real estate. */
  #mobile-panel-relatives .relative-nav{gap:5px}
  #mobile-panel-relatives .relative-group{gap:3px}
  #mobile-panel-relatives .relative-group strong{font-size:.64rem}
  #mobile-panel-relatives .relative-buttons{gap:4px}
  #mobile-panel-relatives .relative-chip{
    padding:4px 7px;
    font-size:.61rem;
  }

  /* The tree is now the dominant mobile surface. */
  .main-stage{width:100%;min-width:0}
  .stage-top{
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    gap:6px;
    padding:0 2px;
  }
  .stage-top .eyebrow{margin-bottom:2px;font-size:.57rem}
  .stage-top h1{font-size:1rem;line-height:1.1}
  .breadcrumb{font-size:.63rem;margin-top:3px}
  .preview-toolbar{
    width:100%;
    justify-content:flex-start;
    gap:5px;
  }
  .tree-view-toggle{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
  }
  .tree-view-toggle .button{
    min-width:0;
    min-height:31px;
    padding:5px 4px;
    font-size:.59rem;
    white-space:normal;
  }
  .preview-spouse-toggle{display:inline-flex!important;width:100%;justify-content:flex-end;padding-top:2px}

  .tree-viewport-shell{
    height:58dvh!important;
    min-height:430px!important;
    max-height:680px;
    margin-top:5px;
    border-radius:15px;
  }
  .tree-viewport-shell>.canvas-wrap{
    height:100%!important;
    min-height:0!important;
    margin-top:0!important;
    border-radius:15px;
    overflow:auto!important;
    overscroll-behavior:contain;
    touch-action:pan-x pan-y;
  }
  .tree-viewport-shell>.tree-canvas-controls{
    top:7px!important;
    right:7px!important;
    z-index:8;
  }
  .tree-canvas-control{width:34px;height:34px;min-height:34px}
  .tree-canvas-reset{padding:0 7px;width:auto}
  .tree-render{
    min-width:680px;
    padding:18px;
    gap:18px;
  }

  /* Avoid the old sidebar-height synchronisation influencing mobile preview. */
  .main-stage,.tree-viewport-shell,.canvas-wrap{min-width:0}
}

/* Wider phones still use the mobile workspace but gain a little more tree height. */
@media(min-width:401px) and (max-width:700px){
  .tree-viewport-shell{height:60dvh!important;min-height:450px!important}
}

.media-storage-dialog{max-width:760px}
.media-storage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:14px 0}
.media-stat{display:grid;gap:3px;padding:11px;border:1px solid var(--line);border-radius:11px;background:#f8fafc}
.media-stat span{font-size:.68rem;color:var(--muted)}.media-stat strong{font-size:.92rem}
.media-migration-card{display:grid;gap:9px;padding:12px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff}.media-migration-card>strong{color:#1e3a8a}
@media(max-width:700px){.media-storage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-storage-dialog{width:min(96vw,760px)}}

.media-legacy-detail{font-size:.72rem;color:var(--muted)}
.media-migration-progress{width:100%;height:10px;accent-color:var(--brand)}


/* Part 8.2.0D — System Health & Reliability */
.system-health-dialog{max-width:980px}
.system-health-title-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.system-health-overall-wrap{display:grid;gap:3px;min-width:110px;text-align:right}
.system-health-overall-wrap span{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
#system-health-overall{font-size:1rem}
#system-health-overall[data-status="healthy"]{color:#047857}
#system-health-overall[data-status="attention"]{color:#b45309}
#system-health-overall[data-status="critical"]{color:#b91c1c}
.system-health-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.system-health-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}
.health-check-card{border:1px solid var(--line);border-left-width:4px;border-radius:11px;padding:10px;background:#fff}
.health-check-card[data-status="healthy"]{border-left-color:#10b981}
.health-check-card[data-status="attention"]{border-left-color:#f59e0b}
.health-check-card[data-status="critical"]{border-left-color:#ef4444}
.health-check-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.health-check-top strong{font-size:.78rem}
.health-badge{font-size:.58rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding:3px 6px;border-radius:999px;background:#f1f5f9}
.health-check-card p{font-size:.66rem;color:var(--muted);line-height:1.35;margin:6px 0 0}
.system-health-events-wrap{margin-top:16px}
.system-health-section-head{display:flex;justify-content:space-between;gap:10px;align-items:end;margin-bottom:7px}
.system-health-section-head small{color:var(--muted)}
.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:10px}
.system-health-events-table{width:100%;border-collapse:collapse;min-width:760px}
.system-health-events-table th,.system-health-events-table td{padding:8px;border-bottom:1px solid var(--line);text-align:left;font-size:.66rem;vertical-align:top}
.event-severity{font-weight:900;text-transform:uppercase;font-size:.57rem}
.event-severity.critical{color:#b91c1c}.event-severity.error{color:#c2410c}.event-severity.warning{color:#a16207}.event-severity.info{color:#0369a1}
.event-resolved{color:#047857;font-weight:800}
@media(max-width:700px){
  .system-health-checks{grid-template-columns:1fr}
  .system-health-title-row{display:grid}
  .system-health-overall-wrap{text-align:left}
  .system-health-dialog{width:min(96vw,980px)}
}


/* Part 8.2.0D.1 — Admin Console consolidation */
.admin-console-dialog{max-width:820px}
.admin-console-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.admin-console-health-chip{
  padding:7px 10px;border-radius:999px;font-size:.7rem;font-weight:900;
  background:#fef3c7;color:#92400e;white-space:nowrap
}
.admin-console-health-chip[data-status="healthy"]{background:#d1fae5;color:#065f46}
.admin-console-health-chip[data-status="attention"]{background:#fef3c7;color:#92400e}
.admin-console-health-chip[data-status="critical"]{background:#fee2e2;color:#991b1b}
.admin-console-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px
}
.admin-console-card{
  display:grid;gap:5px;text-align:left;padding:13px;border:1px solid var(--line);
  border-radius:12px;background:#fff;color:var(--ink);cursor:pointer
}
.admin-console-card:hover{border-color:#94a3b8;background:#f8fafc}
.admin-console-card-title{font-weight:900;font-size:.84rem}
.admin-console-card-copy{font-size:.67rem;color:var(--muted);line-height:1.4}
.admin-console-card.disabled{opacity:.55;cursor:default;background:#f8fafc}
#tree-chip{cursor:pointer}
@media(max-width:700px){
  .admin-console-grid{grid-template-columns:1fr}
  .admin-console-header{display:grid}
  .admin-console-dialog{width:min(96vw,820px)}
}


/* Part 8.2.0D.2 — Admin modal surface + stale control safety */
#copy-tree-id,#open-media-storage,#open-system-health{display:none!important}

#admin-console-modal>.admin-console-dialog,
#system-health-modal>.system-health-dialog,
#media-storage-modal>.media-storage-dialog{
  position:relative;
  background:#fff!important;
  color:var(--ink)!important;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(15,23,42,.22);
  padding:22px;
  opacity:1!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

#admin-console-modal>.admin-console-dialog>.close,
#system-health-modal>.system-health-dialog>.close,
#media-storage-modal>.media-storage-dialog>.close{
  position:absolute;
  top:12px;
  right:14px;
  left:auto;
  z-index:3;
}

#admin-console-modal,
#system-health-modal,
#media-storage-modal{
  background:transparent;
  border:0;
  padding:0;
  max-width:none;
  max-height:none;
}

#admin-console-modal::backdrop,
#system-health-modal::backdrop,
#media-storage-modal::backdrop{
  background:rgba(15,23,42,.54);
}

@media(max-width:700px){
  #admin-console-modal>.admin-console-dialog,
  #system-health-modal>.system-health-dialog,
  #media-storage-modal>.media-storage-dialog{
    padding:18px 14px;
    border-radius:16px;
  }
}


/* Part 8.2.0D.3 — reliable viewport scrolling + cache-fallback cleanup */
#copy-tree-id{display:none!important}

#admin-console-modal,
#system-health-modal,
#media-storage-modal{
  width:min(96vw,1040px)!important;
  max-width:1040px!important;
  max-height:94dvh!important;
  overflow:visible!important;
}

#admin-console-modal>.admin-console-dialog,
#system-health-modal>.system-health-dialog,
#media-storage-modal>.media-storage-dialog{
  box-sizing:border-box;
  width:100%!important;
  max-height:92dvh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

#system-health-modal>.system-health-dialog{
  padding-bottom:24px;
}

#system-health-modal .system-health-title-row{
  position:sticky;
  top:-22px;
  z-index:2;
  background:#fff;
  padding-top:22px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

#system-health-modal .system-health-actions{
  position:sticky;
  top:72px;
  z-index:2;
  background:#fff;
  padding:8px 0;
}

#system-health-modal .table-scroll{
  max-height:46dvh;
  overflow:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

#system-health-modal .system-health-events-table{
  min-width:760px;
}

@media(max-width:700px){
  #admin-console-modal,
  #system-health-modal,
  #media-storage-modal{
    width:96vw!important;
    max-height:96dvh!important;
  }
  #admin-console-modal>.admin-console-dialog,
  #system-health-modal>.system-health-dialog,
  #media-storage-modal>.media-storage-dialog{
    max-height:94dvh!important;
  }
  #system-health-modal .system-health-title-row{
    top:-18px;
    padding-top:18px;
  }
  #system-health-modal .system-health-actions{
    top:96px;
  }
  #system-health-modal .table-scroll{
    max-height:42dvh;
  }
}


/* Part 8.2.0D.4 — health drill-down */
.health-check-card{
  width:100%;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.health-check-card:hover{background:#f8fafc}
.health-check-card.selected{
  outline:2px solid #334155;
  outline-offset:1px;
}
.system-health-section-head>div:first-child{display:grid;gap:2px}
.health-event-view-tabs{
  display:flex;gap:4px;padding:3px;border:1px solid var(--line);
  border-radius:10px;background:#f8fafc
}
.health-event-view-tabs button{
  border:0;background:transparent;border-radius:7px;padding:6px 10px;
  font-size:.65rem;font-weight:800;cursor:pointer
}
.health-event-view-tabs button.active{background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.12)}
.system-health-filter-bar{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin:8px 0;padding:8px 10px;border-radius:9px;background:#eff6ff;
  color:#1e3a8a;font-size:.68rem
}
.system-health-filter-bar button{
  border:0;background:transparent;color:#1d4ed8;font-weight:900;cursor:pointer
}
.health-event-message{
  border:0;background:transparent;padding:0;text-align:left;color:inherit;
  font:inherit;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px
}
.health-event-details td{background:#f8fafc!important}
.health-event-detail-card{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px
}
.health-event-detail-card>div{display:grid;gap:2px}
.health-event-detail-card strong{font-size:.57rem;text-transform:uppercase;color:var(--muted)}
.health-event-detail-card span{font-size:.65rem;word-break:break-word}
.health-empty{text-align:center!important;color:var(--muted);padding:22px!important}
@media(max-width:700px){
 .system-health-section-head{align-items:stretch}
 .health-event-view-tabs{align-self:start}
 .health-event-detail-card{grid-template-columns:1fr 1fr}
}


/* Part 8.2.0E — identity/lineage integrity */
.field>small.muted{
  line-height:1.25;
}


/* Part 8.2.0F — Guided Help & First-Visit Tour */
.tour-welcome-card{max-width:520px}
.tour-welcome-copy{line-height:1.55;margin:14px 0 18px}
.guided-tour-card{max-width:560px}
.tour-progress{display:flex;justify-content:space-between;position:relative;margin:0 34px 22px 0;font-size:.62rem;font-weight:900;color:var(--muted)}
.tour-progress:after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:4px;background:#e5e7eb;border-radius:99px}
#tour-progress-bar{position:absolute;left:0;bottom:-9px;height:4px;background:#334155;border-radius:99px;z-index:1;transition:width .2s ease}
.guided-tour-card #tour-copy{font-size:.82rem;line-height:1.6}
.tour-principle{margin:14px 0;padding:11px 12px;border-left:3px solid #64748b;border-radius:7px;background:#f8fafc;font-size:.72rem;line-height:1.5}
.tour-actions{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.help-dialog-card{max-width:720px;max-height:90dvh;overflow-y:auto}
.help-quick-start{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;margin:14px 0;border:1px solid var(--line);border-radius:12px;background:#f8fafc}
.help-quick-start>span{font-size:.72rem;color:var(--muted);margin-right:auto}
.help-sections{display:grid;gap:6px}
.help-sections details{border-bottom:1px solid var(--line);padding:5px 0 9px}
.help-sections summary{cursor:pointer;font-size:.76rem;font-weight:900;padding:7px 0}
.help-sections details p{margin:4px 0 5px;font-size:.7rem;line-height:1.55;color:var(--muted)}
.help-footer{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:.68rem}
.help-footer small{color:var(--muted)}
@media(max-width:700px){#help-button{padding-left:8px;padding-right:8px}.tour-welcome-card,.guided-tour-card,.help-dialog-card{width:94vw}.help-quick-start,.help-footer{display:grid}}


/* 8.2.0H2.4.1 — Tree Overview uses the established opaque modal surface.
   Design principle: transparency belongs to the ::backdrop only, never the dialog content. */
#tree-overview-modal{
  width:min(96vw,1040px)!important;
  max-width:1040px!important;
  max-height:94dvh!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
}
#tree-overview-modal>.admin-console-dialog{
  position:relative;
  box-sizing:border-box;
  width:100%!important;
  max-height:92dvh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  background:#fff!important;
  color:var(--ink)!important;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(15,23,42,.22);
  padding:22px;
  opacity:1!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#tree-overview-modal>.admin-console-dialog>.close{
  position:absolute;top:12px;right:14px;left:auto;z-index:3;
}
#tree-overview-modal::backdrop{background:rgba(15,23,42,.54)}
@media(max-width:700px){
  #tree-overview-modal{width:96vw!important;max-height:96dvh!important}
  #tree-overview-modal>.admin-console-dialog{max-height:94dvh!important;padding:18px 14px;border-radius:16px}
}

/* ========================================================================
   Part 8.2.0I.1.2.2 — UI Design Reconciliation
   Restores the approved 8.2.0H2 landing / branding / sharing visual layer
   that was accidentally dropped during H2.4.1 Admin UX Hardening.
   Later functional/admin/modal rules are intentionally preserved above.
   ======================================================================== */
.entry-brand{display:flex;align-items:center;gap:11px;padding:7px 9px;margin:0 0 13px;border-radius:12px;background:#f7f3e9;border:1px solid var(--line)}
.entry-brand.compact{margin:0;background:transparent;border:0;padding:0}
.entry-brand-logo{display:block;width:40px;height:40px;max-width:40px;max-height:40px;object-fit:contain;flex:0 0 40px}
.entry-brand>div{min-width:0}.entry-brand strong{display:block;font-size:16px;line-height:1.15}.entry-brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.no-tree-empty-state{text-align:center;max-width:560px;margin:56px auto 20px;padding:26px 28px;border:1px dashed var(--line);border-radius:18px;background:rgba(255,255,255,.72)}
.empty-state-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;text-align:left}
.empty-state-brand strong,.empty-state-brand small{display:block}.empty-state-brand small{color:var(--muted);font-size:12px}
.empty-state-logo{display:block;width:44px;height:44px;max-width:44px;max-height:44px;object-fit:contain;flex:0 0 44px}
.share-subtle-link{margin-top:14px;border:0;background:none;color:var(--muted);text-decoration:underline;font-weight:700;cursor:pointer;font-size:13px}
.share-subtle-link:hover{color:var(--brand)}
.share-family-control{font-size:13px;padding-inline:12px}
.share-modal-card{max-width:560px}
.share-panel{display:grid;gap:14px}
.share-link-display{word-break:break-all;border:1px solid var(--line);border-radius:12px;padding:11px;background:#f8fafc;font-size:13px}
.share-actions{display:flex;gap:9px;flex-wrap:wrap}
.share-qr-wrap{display:grid;justify-items:center;gap:7px;padding-top:4px}
.share-qr{width:180px;height:180px;background:#fff;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;overflow:hidden}
.share-qr canvas,.share-qr img{display:block;max-width:100%;max-height:100%}
@media(max-width:640px){
 .entry-brand-logo{width:36px;height:36px;max-width:36px;max-height:36px;flex-basis:36px}
 .no-tree-empty-state{margin:28px 10px 16px;padding:22px 14px}
 .empty-state-actions .button,.share-actions .button{width:100%}
 .share-family-control{width:auto}
}

/* Part 8.2.0I.2 — consent-aware public discovery */
.public-discovery-consent{border:1px solid #d7e0dc;border-radius:14px;padding:14px;background:#f8fbf9}
.public-discovery-consent small{display:block;margin-top:4px;line-height:1.45;color:#64748b}
.discovery-access-card{border-left:4px solid #0b6b50}

/* 8.2.0I2.2 — discovery/auth handoff. Content surfaces remain fully opaque. */
.discovery-auth-context{margin-top:.8rem;padding:.75rem .85rem;border:1px solid var(--line);border-radius:12px;background:#f7f3e9;display:grid;gap:.2rem}
.discovery-auth-context[hidden]{display:none}
.discovery-request-card{max-width:560px;background:var(--surface, #fff)}
.discovery-request-summary{display:grid;gap:.3rem;padding:.85rem 1rem;margin:.2rem 0 1rem;border:1px solid var(--line);border-radius:12px;background:#f7f3e9}
.discovery-request-summary span{font-size:.92rem;line-height:1.45;color:var(--muted)}
@media(max-width:640px){.discovery-request-card{width:min(94vw,560px)}.discovery-request-card .modal-actions{display:grid;grid-template-columns:1fr}.discovery-request-card .modal-actions .button{width:100%}}


/* I.2.3 Access request visibility */
.access-dashboard-button{display:inline-flex;align-items:center;gap:.5rem}
.access-request-badge{display:inline-grid;place-items:center;min-width:1.45rem;height:1.45rem;padding:0 .35rem;border-radius:999px;background:var(--ink,#17362d);color:#fff;font-size:.75rem;font-weight:800;line-height:1}
.access-request-alert{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1rem;padding:.85rem 1rem;border:1px solid var(--line);border-left:4px solid var(--green,#126b51);border-radius:12px;background:#f7f3e9}
.access-request-alert>div{display:grid;gap:.2rem}.access-request-alert span{font-size:.9rem;color:var(--muted)}
#account-button.has-access-alert{position:relative}
#account-button.has-access-alert::after{content:attr(data-access-count);position:absolute;top:-.5rem;right:-.5rem;display:grid;place-items:center;min-width:1.4rem;height:1.4rem;padding:0 .3rem;border-radius:999px;background:#7c2d61;color:#fff;border:2px solid #fff;font-size:.72rem;font-weight:800;line-height:1}
@media (max-width:700px){.access-request-alert{align-items:flex-start;flex-direction:column}.access-request-alert .button{width:100%}}

/* 8.2.0I2.4 — requester decision notification */
.requester-decision-alert{margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--green,#0b6b4f);border-radius:12px;background:#f7f3e9;display:grid;gap:12px}
.requester-decision-alert.is-rejected{border-left-color:#a45a2a}
.requester-decision-copy{display:grid;gap:4px}.requester-decision-copy>span{color:var(--muted,#667085)}
.requester-decision-actions{display:flex;gap:8px;flex-wrap:wrap}.requester-decision-actions .button{flex:1 1 auto}
@media(max-width:640px){.requester-decision-actions{display:grid}.requester-decision-actions .button{width:100%}}


/* 8.2.0I2.5 — shared user notification surface */
.platform-updates-alert{margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--green,#0b6b4f);border-radius:12px;background:#f7f3e9;display:flex;align-items:center;justify-content:space-between;gap:14px}
.platform-updates-alert>div{display:grid;gap:3px}.platform-updates-alert span{color:var(--muted,#667085);font-size:.92rem}
@media(max-width:640px){.platform-updates-alert{align-items:stretch;flex-direction:column}.platform-updates-alert .button{width:100%}}

/* Y1.4 Commercial status — restrained tree-level plan identity */
.family-name-plan-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tree-plan-badge{border-radius:999px;padding:4px 8px;font-size:.62rem;line-height:1;font-weight:900;letter-spacing:.08em;cursor:pointer}
.tree-plan-badge.free{background:#f8fafc;color:#64748b;border:1px solid #cbd5e1}
.tree-plan-badge.family{background:#fff7df;color:#8a5a08;border:1px solid #e6c875;box-shadow:0 2px 8px rgba(138,90,8,.08)}
.tree-overview-plan{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fffaf0;border:1px solid #ead7a4;border-radius:14px;padding:14px;margin:12px 0 16px}
.tree-overview-plan>div{display:grid;gap:3px}.tree-overview-plan .eyebrow{margin:0}.tree-overview-plan strong{font-size:1rem}.tree-overview-plan small{color:var(--muted)}
.commercial-plan-card{background:#fff}
.commercial-plan-state{display:grid;gap:4px;margin:16px 0;padding:14px;border:1px solid #ead7a4;border-radius:14px;background:#fffaf0}
.commercial-plan-state strong{font-size:1.05rem}.commercial-plan-state span{color:var(--muted);font-size:.84rem}
.commercial-benefits{display:grid;gap:8px;border:1px solid var(--line);border-radius:14px;padding:14px;margin:14px 0;background:#fff}
.commercial-benefits span{font-size:.84rem;color:var(--muted)}
@media(max-width:640px){.tree-overview-plan{align-items:flex-start;flex-direction:column}.tree-overview-plan .button{width:100%}}

/* Y1.5.1 Managed Branch inspection surface */
.commercial-managed-branches{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.commercial-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.commercial-section-heading>div{display:grid;gap:3px}.commercial-section-heading small{color:var(--muted)}
.commercial-price-pill{font-size:.72rem;font-weight:800;padding:5px 8px;border:1px solid #d7c394;border-radius:999px;background:#fffaf0;color:#79520b;white-space:nowrap}
.commercial-managed-list{display:grid;gap:8px}
.commercial-branch-row{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(220px,1.2fr);gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.commercial-branch-row:first-child{border-top:0}.commercial-branch-row>div:first-child{display:grid;gap:2px}.commercial-branch-row small{color:var(--muted);font-size:.75rem}
.commercial-branch-status{display:grid;justify-items:end;gap:3px;text-align:right}
.commercial-branch-status>span{font-size:.7rem;font-weight:900;border-radius:999px;padding:4px 8px}
.commercial-branch-status .included{background:#eaf6ef;color:#17633c;border:1px solid #bcdcc9}
.commercial-branch-status .activated{background:#edf4ff;color:#275e9f;border:1px solid #c3d8f1}
.commercial-branch-status .requires_activation{background:#fff6df;color:#875a08;border:1px solid #ead095}
.commercial-managed-note{font-size:.76rem;margin:10px 0 0}.commercial-empty-branch{font-size:.82rem;color:var(--muted);padding:8px 0}
@media(max-width:640px){.commercial-section-heading,.commercial-branch-row{grid-template-columns:1fr;display:grid}.commercial-branch-status{justify-items:start;text-align:left}.commercial-price-pill{white-space:normal}}

/* Y1.6 Managed Branch activation UX */
.commercial-branch-status .grandfathered{background:#f3f1fb;color:#5d4a86;border:1px solid #d8d0eb}
.invite-commercial-action,.invite-result-commercial{margin:14px 0;padding:14px;border:1px solid #ead095;border-radius:14px;background:#fffaf0}
.invite-commercial-action>strong,.invite-result-commercial>strong{display:block;margin-bottom:5px}
.invite-result-commercial{display:grid;gap:8px}.invite-result-commercial .button{justify-self:start}

/* Y1.6.1 Active secure invitation management */
.share-access-invites{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.share-access-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.share-access-heading>div{display:grid;gap:3px}.share-access-heading small{color:var(--muted)}
.share-access-list{display:grid;gap:9px;margin-top:8px}
.share-invite-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.share-invite-main{display:grid;gap:3px;min-width:0}.share-invite-main>span,.share-invite-main>small{color:var(--muted);font-size:.78rem}
.share-invite-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.share-invite-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.share-invite-commercial{font-size:.66rem;font-weight:900;border-radius:999px;padding:4px 7px}
.share-invite-commercial.included{background:#eaf6ef;color:#17633c;border:1px solid #bcdcc9}
.share-invite-commercial.activated{background:#edf4ff;color:#275e9f;border:1px solid #c3d8f1}
.share-invite-commercial.grandfathered{background:#f3f1fb;color:#5d4a86;border:1px solid #d8d0eb}
.share-invite-commercial.requires_activation{background:#fff6df;color:#875a08;border:1px solid #ead095}
@media(max-width:700px){.share-invite-row{align-items:flex-start;flex-direction:column}.share-invite-actions{justify-content:flex-start;width:100%}.share-access-heading{align-items:stretch;flex-direction:column}}

/* Y1.6.2 Managed Branches & Access console */
.managed-access-console{margin:14px 0 18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.managed-access-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.managed-access-heading>div{display:grid;gap:3px}.managed-access-heading small{color:var(--muted)}
.managed-access-list{display:grid;gap:10px}.managed-access-row{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fcfcfb}
.managed-access-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.managed-access-title>div{display:grid;gap:2px}.managed-access-title small{color:var(--muted)}
.managed-access-badge{font-size:.68rem;font-weight:900;border-radius:999px;padding:4px 8px}
.managed-access-badge.included{background:#eaf6ef;color:#17633c;border:1px solid #bcdcc9}
.managed-access-badge.activated{background:#edf4ff;color:#275e9f;border:1px solid #c3d8f1}
.managed-access-badge.grandfathered{background:#f3f1fb;color:#5d4a86;border:1px solid #d8d0eb}
.managed-access-badge.requires_activation{background:#fff6df;color:#875a08;border:1px solid #ead095}
.managed-access-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.managed-access-grid>div{display:grid;gap:4px;padding:9px;border-radius:9px;background:#fff;border:1px solid #edf0f2}
.managed-access-grid span{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}
.managed-access-grid strong{font-size:.8rem;line-height:1.3}.managed-access-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.managed-access-empty{color:var(--muted);font-size:.84rem;padding:6px}
@media(max-width:800px){.managed-access-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.managed-access-heading,.managed-access-title{flex-direction:column}.managed-access-grid{grid-template-columns:1fr}}

.contact-source-note{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f0fdf4;color:#166534}.secure-managed-field{background:#f1f5f9!important;color:#475569!important;cursor:not-allowed}