:root {
  --bg: #f5f5f3;
  --surface: #fbfbfa;
  --surface-strong: #ffffff;
  --surface-soft: #eff1ed;
  --ink: #454b4f;
  --muted: #777d82;
  --line: #e1e3de;
  --line-strong: #d2d6cf;
  --accent: #777d82;
  --accent-deep: #50565a;
  --accent-soft: #f0f1ef;
  --success: #6b7f72;
  --success-deep: #52675a;
  --success-soft: #e8eee9;
  --warn: #8a7350;
  --warn-soft: #f2ece1;
  --danger: #8a5e5b;
  --danger-soft: #f5e9e8;
  --shadow: 0 14px 40px rgba(54, 61, 57, .07);
  --radius: 14px;
  --ui-zoom: 1;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

html { overflow-anchor: none; }

* { box-sizing: border-box; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
html, body { overscroll-behavior-y: none; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); }
.app-shell, .login-page {
  width: calc(100% / var(--ui-zoom));
  min-height: calc(100vh / var(--ui-zoom));
  zoom: var(--ui-zoom);
}
.modal-form-backdrop, #app > .dialog-backdrop, #app > .training-overlay-backdrop {
  inset: 0 auto auto 0;
  width: calc(100vw / var(--ui-zoom));
  height: calc(100vh / var(--ui-zoom));
  zoom: var(--ui-zoom);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 100; left: 12px; top: -80px; padding: 10px 14px; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid rgba(80,86,90,.42); outline-offset: 2px; }

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 15%, rgba(92,98,102,.06), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(138,115,80,.06), transparent 32%),
    var(--bg);
}

.login-card { width: min(460px, 100%); padding: 34px; background: rgba(251,251,250,.92); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.brand-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface-soft); color: var(--accent-deep); font: 600 24px/1 Georgia, serif; }
.login-card h1 { margin: 22px 0 8px; font: 500 34px/1.15 Georgia, serif; color: #343a3d; }
.login-card p { margin: 0 0 24px; color: var(--muted); line-height: 1.55; }
.test-note { margin: 20px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-soft); font-size: 13px; color: var(--muted); }

.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field label { font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line-strong); background: var(--surface-strong); color: var(--ink);
  border-radius: 10px; padding: 11px 12px; outline: none;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(80,86,90,.12); }

.button { max-width: 100%; min-width: 0; border: 1px solid var(--line-strong); background: var(--surface-strong); color: var(--ink); border-radius: 10px; padding: 10px 14px; overflow-wrap: anywhere; white-space: normal; }
.button:hover { border-color: #bdc4bd; background: #f8f9f7; }
.button.primary { border-color: var(--accent); background: var(--accent); color: white; }
.button.primary:hover { background: var(--accent-deep); }
.button.quiet { border-color: transparent; background: transparent; color: var(--muted); }
.button.danger { border-color: #d7b9b6; background: var(--danger-soft); color: var(--danger); }
.button.small { padding: 7px 10px; font-size: 13px; }
.button:disabled { cursor: not-allowed; opacity: .5; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 235px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 26px 22px; border-right: 1px solid var(--line); background: rgba(248,248,246,.92); }
.app-brand { display: flex; gap: 12px; align-items: center; padding-bottom: 24px; }
.app-brand .brand-mark { width: 39px; height: 39px; border-radius: 12px; font-size: 18px; }
.app-brand strong { display: block; color: #3d4346; font: 500 18px/1.2 Georgia, serif; }
.app-brand span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.nav { display: grid; max-height: calc(100vh - 190px); gap: 3px; overflow-y: auto; padding-right: 3px; }
.nav button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 9px; padding: 9px 10px; background: transparent; color: #62686b; text-align: left; }
.nav button:hover { background: #eff0ed; color: #3f4447; }
.nav button.active { background: #e9ece7; color: #343a3d; font-weight: 600; }
.nav-icon { width: 17px; color: #7e8581; text-align: center; }
.sidebar-footer { position: absolute; left: 22px; right: 22px; bottom: 22px; padding-top: 15px; border-top: 1px solid var(--line); }
.sidebar-footer p { margin: 0 0 10px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; }

.main { min-width: 0; }
.topbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px clamp(22px,4vw,56px); border-bottom: 1px solid var(--line); background: rgba(245,245,243,.9); backdrop-filter: blur(12px); }
.topbar h1 { margin: 0; color: #393f42; font: 500 25px/1.2 Georgia, serif; }
.topbar p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; }
.test-badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d9dbd8; border-radius: 999px; padding: 6px 10px; background: #f1f2f0; color: #666d72; font-size: 11px; white-space: nowrap; }
.content { width: min(1280px, 100%); margin: 0 auto; padding: 30px clamp(22px,4vw,56px) 70px; overflow-wrap: anywhere; }
.page-head { display: flex; min-width: 0; justify-content: space-between; gap: 20px; align-items: flex-end; margin-bottom: 24px; }
.page-head > * { min-width: 0; }
.page-head h2 { margin: 0 0 5px; color: #3c4245; font: 500 26px/1.2 Georgia, serif; }
.page-head p { margin: 0; color: var(--muted); line-height: 1.5; }

.metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 22px; }
.metric { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.metric span { display: block; color: var(--muted); font-size: 12px; }
.metric strong { display: block; margin-top: 5px; color: #3c4245; font: 500 25px/1 Georgia, serif; }
.metric.compact strong { font-size: 16px; }

.panel { min-width: 0; margin-bottom: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 26px rgba(60,65,62,.035); }
.panel-head { display: flex; min-width: 0; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 15px; }
.panel-head > * { min-width: 0; }
.panel h3 { margin: 0; color: #444a4d; font-size: 15px; font-weight: 600; }
.panel-subtitle { color: var(--muted); font-size: 12px; }
.split { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(290px,.65fr); gap: 16px; align-items: start; }
.two-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
.diagram-canvas { max-width: 100%; margin-top: 16px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.diagram-canvas:focus { outline: 3px solid rgba(80,86,90,.25); outline-offset: 2px; }
.diagram-canvas svg { display: block; min-width: 640px; height: auto; }
.research-item { align-items: flex-start; }

.tree-board { overflow-x: auto; padding: 14px 4px 20px; }
.tree-controls { position: static; }
.tree-controls-layout { display: grid; width: 100%; gap: 8px; }
.tree-search-field { width: min(760px,100%); margin-bottom: 0; }
.tree-search-field .name-search-input { width: 100%; }
.tree-settings-row { position: relative; z-index: 20; display: flex; width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; align-items: center; gap: 3px 6px; overflow: visible; white-space: normal; }
.tree-primary-controls { display: flex; min-width: 0; max-width: 100%; flex: 0 1 auto; flex-wrap: wrap; gap: 3px 6px; align-items: center; }
.tree-primary-control { display: inline-flex; width: auto; flex: 0 0 auto; align-items: center; gap: 3px; margin: 0; color: #8a8f92; font-size: 11px; line-height: 20px; white-space: nowrap; }
.tree-primary-control .native-select-source { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.tree-primary-control .compact-select-trigger { gap: 3px; }
.tree-primary-control .compact-select-arrow { margin-right: 0; margin-left: 0; }
.tree-primary-separator { color: #a0a5a7; }
.tree-filter-controls { display: flex; min-width: 0; max-width: 100%; flex: 0 1 auto; flex-wrap: wrap; gap: 3px 6px; align-items: center; margin-top: 0; }
.tree-filter-controls .field { display: inline-flex; width: auto; flex: 0 0 auto; gap: 4px; align-items: center; margin-bottom: 0; }
.tree-filter-controls .compact-select-trigger { gap: 3px; }
.tree-filter-controls .compact-select-arrow { margin-right: 0; margin-left: 0; }
.tree-settings-row .tree-primary-control,
.tree-settings-row .compact-select-trigger,
.tree-settings-row .people-controls-reset-button { color: var(--ink); font-size: 11px; font-weight: 400; line-height: 20px; }
.tree-settings-row .tree-settings-title { color: #555d59; font-size: 12px; font-weight: 600; }
.tree-settings-row .tree-primary-separator,
.tree-settings-row .people-sort-separator { color: #a0a5a7; }
.search-row { display: grid; grid-template-columns: minmax(220px,1fr) auto; gap: 10px; align-items: end; }
.search-row .field { margin-bottom: 0; }
.people-search-row { display: flex; width: 100%; max-width: 100%; gap: 14px; align-items: center; }
.search-row .field:has(.name-search-input) { display: inline-flex; width: auto; max-width: 100%; }
.search-row .name-search-input {
  width: 190px; max-width: 100%; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  padding: 1px 2px; background: transparent; box-shadow: none; color: var(--ink); font-size: 12px; line-height: 20px;
}
.search-row.people-search-row .field:has(.name-search-input) { width: auto; min-width: 0; flex: 1 1 auto; }
.search-row.people-search-row .name-search-input { width: 100%; }
.people-search-count { flex: 0 0 auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.search-row .name-search-input:hover,.search-row .name-search-input:focus { border-bottom-color: var(--line-strong); box-shadow: none; }
.search-row .name-search-input:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.name-search-input:focus::placeholder { color: transparent; opacity: 0; }
.people-list-controls { margin: 8px 0 6px; }
.people-list-primary { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; padding: 2px 0 3px; border-bottom: 0; }
.people-sort-controls,.people-filter-controls { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; }
.people-sort-separator { color: #a0a5a7; }
.people-list-controls .field { display: inline-flex; width: auto; flex: 0 0 auto; gap: 4px; align-items: center; margin-bottom: 0; }
.compact-select-label { margin: 0; color: #8a8f92; font-size: 11px; white-space: nowrap; }
.people-filter-controls .compact-select-trigger { gap: 3px; }
.people-filter-controls .compact-select-arrow { margin-right: 0; margin-left: 0; }
.compact-select { position: relative; }
.compact-select-trigger { display: inline-flex; min-width: 0; align-items: center; gap: 9px; border: 0; padding: 1px 2px; background: transparent; color: #62696d; font: inherit; font-size: 12px; line-height: 20px; white-space: nowrap; cursor: pointer; }
.compact-select-trigger:hover,.compact-select-trigger[aria-expanded="true"] { color: #454c50; }
.compact-select-trigger:focus-visible { outline: 0; box-shadow: 0 1px 0 #b8bebb; }
.compact-select-arrow { width: 6px; height: 6px; margin: -3px 1px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .14s ease,margin .14s ease; }
.compact-select-trigger[aria-expanded="true"] .compact-select-arrow { margin-top: 3px; transform: rotate(225deg); }
.compact-select-menu { position: absolute; z-index: 80; top: calc(100% + 3px); left: 0; min-width: max(100%,180px); padding: 2px 0; overflow: hidden; border: 1px solid #e0e2de; border-radius: 2px; background: #fff; box-shadow: 0 7px 18px rgba(55,62,58,.08); }
.compact-select-menu[hidden] { display: none; }
.compact-select-option { display: block; width: 100%; border: 0; padding: 3px 10px; background: transparent; color: #555d61; font: inherit; font-size: 12px; line-height: 17px; text-align: left; white-space: nowrap; cursor: pointer; }
.compact-select-option:hover,.compact-select-option:focus-visible { outline: 0; background: #f0f1ee; color: #3f474a; }
.compact-select-option.selected { background: #f3f4f1; color: #454c50; }
.people-filter-controls { margin: 0; padding: 0; border-bottom: 0; }
.people-controls-reset { align-self: center; padding-bottom: 0; }
.people-tree-sync { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: #62696d; font-size: 12px; line-height: 20px; white-space: nowrap; }
.people-tree-sync input { width: 14px; height: 14px; margin: 0; }
.people-controls-reset-button { border: 0; padding: 1px 2px; background: transparent; color: #62696d; font-size: 12px; line-height: 20px; text-decoration: underline; text-decoration-color: #cfd4d1; text-underline-offset: 3px; }
.people-controls-reset-button:hover { color: #454c50; text-decoration-color: #9eaaa3; }
.people-controls-reset-button:focus-visible { outline: 0; box-shadow: 0 1px 0 #b8bebb; }
@media (max-width: 560px) { .people-search-row { gap: 8px; } }
.generations { display: flex; gap: 24px; min-width: 760px; align-items: center; }
.generation { display: grid; flex: 1 0 210px; gap: 11px; }
.generation-label { margin-bottom: 3px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.person-card { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; background: var(--surface-strong); text-align: left; }
.person-card:hover { border-color: #bdc6bd; box-shadow: 0 8px 22px rgba(60,68,63,.07); }
.person-card.centered { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.person-card-main { display: block; width: 100%; border: 0; padding: 0; background: transparent; color: inherit; text-align: left; }
.person-card-actions { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px -6px -6px; padding-top: 7px; border-top: 1px solid var(--line); }
.person-card strong { display: block; margin-bottom: 4px; color: #42484b; font-size: 14px; }
.person-card span { color: var(--muted); font-size: 12px; }
.person-card.restricted { border-style: dashed; background: #f7f7f4; }

.list { display: grid; gap: 8px; }
.list-item { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid #ecece9; }
.list-item:last-child { border-bottom: 0; }
.list-item-main { min-width: 0; }
.list-item strong { display: block; color: #454b4f; font-size: 14px; }
.list-item p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.list-item .secondary-text { margin-top: 7px; padding-left: 10px; border-left: 2px solid var(--line-strong); }
.people-list { gap: 0; }
.list-item.person-list-item { min-height: 28px; padding: 3px 0; border-bottom-color: transparent; }
.person-list-summary { display: flex; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.person-list-summary:focus-visible { outline: 2px solid rgba(80,86,90,.4); outline-offset: 2px; }
.person-list-name { color: #454b4f; font-size: 14px; line-height: 21px; font-weight: 400; }
.person-life-status { color: var(--muted); font-size: 11px; line-height: 16px; white-space: nowrap; }
.person-list-item .button-row { gap: 6px; }
.list-item.person-list-item .button.small { border-bottom: 0; text-decoration: none; }
.person-list-item:has(.person-list-summary:hover),.person-list-item:has(.button-row:hover) { border-bottom-color: var(--line); }
.people-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 20px; }
.people-page-numbers { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.people-page-link,.people-pagination-link,.people-pagination-close { border: 0; padding: 1px 4px; background: transparent; color: inherit; font: inherit; line-height: 20px; text-decoration: none; cursor: pointer; }
.people-page-link:hover,.people-page-link:focus-visible,.people-pagination-link:hover,.people-pagination-link:focus-visible { outline: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.people-page-link.active { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.people-pagination-link { padding-right: 0; padding-left: 0; }
.people-pagination-close { position: relative; display: inline-block; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 0; line-height: 0; }
.people-pagination-close:hover,.people-pagination-close:focus-visible { outline: 0; border-color: #9da4a0; color: var(--ink); }
.people-pagination-close span::before,.people-pagination-close span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 1px; border-radius: 1px; background: currentColor; transform-origin: center; }
.people-pagination-close span::before { transform: translate(-50%,-50%) rotate(45deg); }
.people-pagination-close span::after { transform: translate(-50%,-50%) rotate(-45deg); }
.page-head h2.family-section-title { font-weight: 700; }
.family-collapsible-head { min-height: 21px; }
.family-collapsible-head h2 { margin-bottom: 0; }
.family-section-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-align: left; cursor: pointer; }
.family-section-toggle:hover,.family-section-toggle:focus-visible { color: var(--accent-deep); outline: 0; }
.family-section-toggle:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.family-workspace-toggle { font-weight: 700; }
.family-diagram-head { min-height: 21px; flex-wrap: wrap; align-items: flex-start; row-gap: 8px; margin-bottom: 0; }
.family-diagram-head .heading-with-note { flex: 1 1 260px; }
.family-diagram-head [data-tree-diagram-action] { width: auto; max-width: 100%; flex: 0 1 auto; flex-wrap: wrap; }
.tree-diagram-subtitle { margin: 2px 0 10px; }
.heading-with-note { position: relative; display: flex; min-width: 0; align-items: center; gap: 6px; }
.heading-note-anchor { position: relative; display: inline-flex; flex: 0 0 auto; }
.heading-note-button { display: inline-grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--muted); font: 700 11px/1 "Segoe UI",Arial,sans-serif; cursor: pointer; }
.heading-note-button:hover,.heading-note-button:focus-visible { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); outline: 0; }
.heading-note-button,.person-section-help { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 0; line-height: 0; text-align: center; vertical-align: middle; }
.heading-note-button::before,.person-section-help::before { content: "!"; display: block; font: 700 11px/1 Arial,sans-serif; transform: translateY(-.35px); }
.heading-note-text { position: absolute; top: 50%; left: calc(100% + 8px); z-index: 24; visibility: hidden; width: max-content; max-width: min(380px,80vw); padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); color: var(--muted); font-size: 12px; line-height: 17px; font-weight: 400; white-space: normal; opacity: 0; pointer-events: none; transform: translate(-3px,-50%); transition: opacity .12s ease,transform .12s ease,visibility .12s; }
.heading-note-button:hover + .heading-note-text,.heading-note-button:focus-visible + .heading-note-text { visibility: visible; opacity: 1; transform: translate(0,-50%); }
.duplicate-status { flex: 0 0 auto; white-space: nowrap; }
.panel h3.duplicate-heading,.panel h3.trash-heading { font-weight: 400; }
.family-section#family-people { border-bottom: 1px solid var(--line); }
.family-section#family-people:has(#family-people-content[hidden]) { padding-bottom: 14px; }
.kinship-page-head > div { width: 100%; }
.page-head .heading-note-text { width: max-content; max-width: min(380px,80vw); white-space: normal; }
.panel.kinship-controls-panel,.panel.kinship-results-panel { border-top: 0; }
.family-section#family-kinship { border-bottom: 1px solid var(--line); }
.family-section#family-kinship:has(#family-kinship-content[hidden]) { padding-bottom: 14px; }
.tree-workspace-panel .tree-controls { width: 100%; margin-bottom: 0; padding-top: 0; padding-bottom: 8px; border-top: 0; }
.proposal-item { align-items: flex-start; }
.proposal-item .button-row { justify-content: flex-end; }
.appeal-box { margin-top: 9px; padding: 10px 12px; border: 1px solid #ddcfb6; border-radius: 9px; background: var(--warn-soft); }
.appeal-box p { margin-top: 0; color: var(--ink); }
.status { display: inline-flex; border-radius: 999px; padding: 4px 8px; background: var(--surface-soft); color: var(--muted); font-size: 11px; white-space: nowrap; }
.status.good { background: var(--success-soft); color: var(--success-deep); }
.status.warn { background: var(--warn-soft); color: var(--warn); }
.status.danger { background: var(--danger-soft); color: var(--danger); }

.empty { min-width: 0; padding: 28px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); overflow-wrap: anywhere; text-align: center; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; }
.form-grid .wide { grid-column: 1 / -1; }
.person-relationship-fields, .person-supplemental-fields { margin: 14px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); }
.person-editor-section-heading, .person-supplemental-fields summary { padding: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.person-editor-section-heading span, .person-supplemental-fields summary span { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.person-supplemental-fields summary { width: max-content; cursor: pointer; list-style: none; }
.person-supplemental-fields summary::-webkit-details-marker { display: none; }
.person-supplemental-fields summary:hover strong, .person-supplemental-fields summary:focus-visible strong { text-decoration: underline; text-decoration-color: #aeb4b1; text-underline-offset: 3px; }
.person-relationship-fields .form-grid, .person-supplemental-fields .form-grid { margin-top: 10px; }
.person-relationship-entry + .person-relationship-entry { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.person-add-relationship, .person-remove-relationship { padding-left: 0; }
.person-editor-dialog { width: min(720px,100%); }
.dialog-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(47,53,50,.28); backdrop-filter: blur(3px); }
.dialog { width: min(560px,100%); max-height: 88vh; overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.dialog h2 { margin: 0 0 18px; font: 500 24px/1.2 Georgia, serif; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.modal-description { margin: -8px 0 20px; color: var(--muted); line-height: 1.5; white-space: pre-line; }
.checkbox-field { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 14px; color: var(--ink); }
.checkbox-field input { width: 18px; height: 18px; margin-top: 1px; }
.field-help { display: block; margin: -4px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.field .field-help { margin: 0; }
.secret-value { user-select: all; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 40; max-width: 380px; padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 11px; background: #fff; box-shadow: var(--shadow); color: #42484b; }
.toast.error { border-color: #d7b9b6; background: #fff8f7; color: var(--danger); }
.toast.anchored { right: auto; bottom: auto; max-width: min(380px,calc(100vw - 24px)); }
.code-box { padding: 13px; border-radius: 10px; background: var(--surface-soft); color: var(--accent-deep); font: 600 20px/1 monospace; text-align: center; letter-spacing: .16em; }
.code-box.uri { margin-bottom: 16px; overflow-wrap: anywhere; font-size: 12px; font-weight: 500; letter-spacing: 0; text-align: left; }
.code-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.code-list code { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); text-align: center; }
.login-actions { margin-top: 16px; }
.timeline { position: relative; display: grid; gap: 14px; padding-left: 24px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; border-left: 1px solid var(--line-strong); }
.timeline-item { position: relative; }
.timeline-item::before { content: ""; position: absolute; left: -21px; top: 5px; width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--line-strong); }
.timeline-item strong { font-size: 13px; }
.timeline-item p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.readiness-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.readiness-item { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-strong); }
.readiness-item strong { display: block; font-size: 13px; }
.readiness-item p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.dossier-list { margin-top: 16px; }
.help-steps { display: grid; gap: 14px; margin: 0; padding-inline-start: 24px; }
.help-steps li { padding-inline-start: 4px; }
.help-steps strong, .help-steps span { display: block; }
.help-steps span { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.mobile-nav { display: none; }

html.high-contrast {
  --bg: #fff;
  --surface: #fff;
  --surface-strong: #fff;
  --surface-soft: #f0f0f0;
  --ink: #000;
  --muted: #222;
  --line: #555;
  --line-strong: #000;
  --accent: #33383b;
  --accent-deep: #101214;
  --success: #174c2b;
  --success-deep: #002b12;
}
html.high-contrast .button, html.high-contrast .status, html.high-contrast .test-badge { border: 2px solid currentColor; }
html[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--line); }
html[dir="rtl"] .nav button, html[dir="rtl"] .person-card-main, html[dir="rtl"] .code-box.uri { text-align: right; }
html[dir="rtl"] .timeline { padding-left: 0; padding-right: 24px; }
html[dir="rtl"] .timeline::before { left: auto; right: 7px; }
html[dir="rtl"] .timeline-item::before { left: auto; right: -21px; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { padding: 16px 18px; }
  .content { padding: 22px 18px 88px; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .split, .two-columns { grid-template-columns: 1fr; }
  .mobile-nav { position: fixed; z-index: 15; left: 10px; right: auto; bottom: 10px; display: flex; width: calc((100vw - 20px) / var(--ui-zoom)); max-width: calc((100vw - 20px) / var(--ui-zoom)); overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; padding: 6px; background: rgba(251,251,250,.96); box-shadow: var(--shadow); backdrop-filter: blur(12px); scrollbar-width: none; }
  .mobile-nav button { flex: 1 0 78px; border: 0; border-radius: 9px; padding: 8px 4px; background: transparent; color: var(--muted); font-size: 10px; }
  .mobile-nav button.active { background: var(--surface-soft); color: var(--ink); }
}

@media (max-width: 560px) {
  .login-page { padding: 14px; }
  .login-card { padding: 25px 20px; }
  .topbar h1 { font-size: 21px; }
  .test-badge { display: none; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .metrics { grid-template-columns: 1fr; }
  .metric { padding: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .tree-primary-controls { gap: 3px 5px; }
  .list-item { align-items: flex-start; flex-direction: column; }
  .code-list { grid-template-columns: 1fr; }
  .readiness-grid { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar-actions { width: 100%; justify-content: flex-start; }
  .search-row { grid-template-columns: 1fr; }
}

/* Карточка человека: один выбранный раздел без дублирующих аккордеонов. */
.person-editor-toc > button.active { color: var(--ink); font-weight: 600; }
.person-editor-toc > button.active::before { content: "— "; color: #a5aaad; }
.person-open-questions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.person-open-questions > strong { display: block; margin-bottom: 4px; color: #666d71; font-size: 11px; }
.person-open-questions > button,.person-open-questions > span { display: block; width: 100%; padding: 2px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; text-align: left; }
.person-open-questions > button { cursor: pointer; }
.person-open-questions > button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.person-editor-section[hidden] { display: none!important; }
.person-editor-dialog [hidden] { display: none!important; }
.person-editor-section { border-bottom: 0; }
.person-editor-section-header { display: flex; align-items: center; justify-content: space-between; min-height: 42px; margin-bottom: 8px; border-bottom: 1px solid var(--line); color: #50565a; }
.person-editor-section-header > span:last-child { color: var(--muted); font-size: 11px; }
.person-editor-section-header strong { font-size: 13px; }
.person-editor-sections { width: min(100%,1120px); }
.person-editor-dialog:not([data-person-editor-autosave]) .person-editor-sections { width: min(100%,920px); }
.person-editor-dialog:not([data-person-editor-autosave]) .person-editor-body { grid-template-columns: 146px minmax(0,920px); }
.person-editor-dialog:not([data-person-editor-autosave]) .person-core-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.person-editor-dialog:not([data-person-editor-autosave]) .person-core-grid .field:first-child,
.person-editor-dialog:not([data-person-editor-autosave]) .person-core-grid .field:last-child { grid-column: span 2; }
@media (min-width: 1700px) {
  .person-editor-body { grid-template-columns: 156px minmax(0,1120px); }
}

@media (max-width: 760px) {
  .person-editor-dialog:not([data-person-editor-autosave]) .person-editor-body { display: block; }
  .person-editor-dialog:not([data-person-editor-autosave]) .person-core-grid { grid-template-columns: 1fr; }
  .person-editor-dialog:not([data-person-editor-autosave]) .person-core-grid .field:first-child,
  .person-editor-dialog:not([data-person-editor-autosave]) .person-core-grid .field:last-child { grid-column: auto; }
}

/* Единый редактор карточки человека: спокойный, компактный и без горизонтальной прокрутки. */
.person-editor-backdrop { background: rgba(238,240,239,.62); overflow: hidden; }
.person-editor-dialog { box-sizing: border-box; height: calc(100vh - 24px); overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.45; }
.person-editor-header { min-height: 58px; padding: 8px clamp(16px,2vw,32px); }
.person-editor-origin { color: var(--muted); font-size: 11px; }
.person-editor-identity h2 { color: var(--ink); font-size: 16px; line-height: 22px; }
.person-editor-header-actions .button { color: #5a6064; font-weight: 500; }
.person-editor-header-actions .button:hover,.person-editor-header-actions .button:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.person-editor-body { display: grid; grid-template-columns: 156px minmax(0,1520px); justify-content: center; gap: 16px; height: calc(100% - 59px); overflow-y: auto; overflow-x: hidden; padding: 0 clamp(14px,2vw,32px) 18px; }
.person-editor-toc { position: sticky; top: 0; align-self: start; display: grid; gap: 1px; padding: 14px 0; }
.person-editor-toc > strong { margin-bottom: 5px; font-size: 12px; }
.person-editor-toc > button { padding: 3px 0; border: 0; background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
.person-editor-toc > button:hover,.person-editor-toc > button:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; outline: 0; }
.person-open-questions { display: grid; gap: 3px; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.person-open-questions strong { color: var(--ink); font-weight: 600; }
.person-editor-sections { min-width: 0; padding: 0; }
.person-editor-section { scroll-margin-top: 12px; }
.person-editor-section > summary { position: relative; min-height: 42px; color: #4a5054; }
.person-editor-section > summary strong { font-size: 13px; font-weight: 600; }
.person-editor-section[open] > summary { border-bottom: 1px solid #eceeef; }
.person-section-title { display: inline-flex; align-items: center; gap: 6px; }
.person-section-help { display: inline-grid; place-items: center; width: 17px; height: 17px; padding: 0; border: 1px solid #cfd3d4; border-radius: 50%; background: transparent; color: var(--muted); font: 11px/1 inherit; cursor: help; }
.person-section-help-popover { position: absolute; z-index: 20; top: 32px; left: 0; width: min(420px,calc(100vw - 48px)); padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; box-shadow: 0 8px 22px rgba(50,55,57,.10); color: var(--ink)!important; font-size: 12px!important; line-height: 1.45; }
.person-editor-dialog .person-editor-section .form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px 18px; }
.person-editor-dialog .field { min-width: 0; margin-bottom: 6px; }
.person-editor-dialog .field label { font-size: 11px; }
.person-editor-dialog .field small { color: var(--muted); font-size: 10px; }
.person-editor-dialog input,.person-editor-dialog textarea,.person-editor-dialog select { max-width: 100%; }
.person-editor-dialog textarea { resize: vertical; }
.person-name-preview,.person-relationship-summary,.person-relationship-preview { color: var(--muted); font-size: 11px; }
.person-name-preview { display: grid; align-content: end; padding-bottom: 7px; }
.person-name-preview strong { color: var(--ink); font-size: 13px; font-weight: 500; }
.person-relationship-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.person-relationship-summary > div { display: flex; align-items: baseline; gap: 8px; }
.person-relationship-summary strong { color: var(--ink); font-weight: 500; }
.person-row-actions { display: flex; justify-content: flex-end; }
.person-section-empty { padding: 2px 0 10px; color: var(--muted); }
.person-subsection { padding: 4px 0 8px; }
.person-subsection h4 { margin: 0 0 5px; font-size: 12px; }
.person-history-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.person-inline-search { display: grid; flex: 1; gap: 2px; color: var(--muted); font-size: 11px; }
.person-inline-search input { width: 100%; }
.person-editor-dialog[data-editor-mode="brief"] .person-detailed-only { display: none!important; }
.person-autosave-status[data-state="offline"] { color: #806f55; }
.person-create-actions { position: absolute!important; right: 0; bottom: 0!important; left: 0; z-index: 14; margin: 0!important; }
.person-editor-dialog:not([data-person-editor-autosave]) .person-editor-body { height: calc(100% - 108px); }
.person-draft-note { margin-right: auto; color: var(--muted); font-size: 11px; }
.person-editor-conflict { display: flex; align-items: center; gap: 10px; padding: 7px 20px; border-bottom: 1px solid #dfc8c3; background: #fbf5f3; color: #765c57; }
.person-editor-conflict span { flex: 1; }
body.printing-person-card > :not(#app) { display: none!important; }
@media print {
  body.printing-person-card #app > :not(.dialog-backdrop),body.printing-person-card .person-editor-toc,body.printing-person-card .person-editor-header-actions,body.printing-person-card .person-section-help { display: none!important; }
  body.printing-person-card .person-editor-backdrop { position: static; display: block; padding: 0; background: #fff; }
  body.printing-person-card .person-editor-dialog { height: auto; max-height: none; overflow: visible; border: 0; }
  body.printing-person-card .person-editor-header { position: static; }
  body.printing-person-card .person-editor-body { display: block; height: auto; overflow: visible; }
  body.printing-person-card .person-editor-section { break-inside: avoid; }
}
@media (max-width: 900px) {
  .person-editor-body { grid-template-columns: 132px minmax(0,1fr); gap: 14px; padding-inline: 12px; }
  .person-editor-header-actions { flex-wrap: wrap; gap: 5px 9px; }
  .person-editor-dialog .person-editor-section .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .person-editor-dialog { height: 100vh; }
  .person-editor-body { display: block; height: calc(100% - 72px); padding-inline: 10px; }
  .person-editor-toc { position: static; display: flex; overflow-x: auto; gap: 10px; padding: 7px 0; white-space: nowrap; }
  .person-editor-toc > strong,.person-open-questions { display: none; }
  .person-editor-dialog .person-editor-section .form-grid { grid-template-columns: 1fr; }
  .person-editor-header { min-height: 72px; padding-inline: 10px; }
  .person-editor-header .panel-subtitle,.person-editor-origin { display: none; }
  .person-autosave-status { position: static; }
}

/* Выбранный раздел карточки — финальный слой после прежних адаптивных правил. */
.person-editor-toc > button.active { color: var(--ink); font-weight: 600; }
.person-editor-toc > button.active::before { content: "— "; color: #a5aaad; }
.person-open-questions > button { display: block; width: 100%; padding: 2px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.person-open-questions > button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.person-editor-section[hidden] { display: none!important; }
.person-editor-section { border-bottom: 0; }
.person-editor-section-header { display: flex; align-items: center; justify-content: space-between; min-height: 42px; margin-bottom: 8px; border-bottom: 1px solid var(--line); color: #50565a; }
.person-editor-section-header > span:last-child { color: var(--muted); font-size: 11px; }
.person-editor-section-header strong { font-size: 13px; }
.person-editor-sections { width: min(100%,1120px); }
.person-editor-dialog:not([data-person-editor-autosave]) .person-editor-sections { width: min(100%,920px); }
.person-editor-dialog:not([data-person-editor-autosave]) .person-editor-body { grid-template-columns: 146px minmax(0,920px); }
@media (min-width: 1700px) {
  .person-editor-body { grid-template-columns: 156px minmax(0,1120px); }
}

/* Единая нотация родословной */
.tree-notation-legend { display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 28px; row-gap: 7px; margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.tree-notation-legend > span { display: inline-flex; min-width: 0; min-height: 26px; align-items: center; gap: 7px; }
.tree-notation-legend [data-tree-legend] { cursor: default; border-radius: 3px; transition: color .14s ease,background .14s ease,opacity .14s ease; }
.tree-notation-legend [data-tree-legend]:hover,.tree-notation-legend [data-tree-legend]:focus,.tree-notation-legend [data-tree-legend].is-tree-legend-active { color: #565d60; background: #f2f3f1; outline: none; }
.tree-legend-sample { display: inline-flex; min-width: 86px; align-items: center; justify-content: flex-start; gap: 5px; }
.symbol-discriminator { display: inline-grid; min-width: 20px; height: 16px; padding: 0 4px; place-items: center; border: 1px solid #c7ccc8; border-radius: 3px; color: #68706c; background: #fbfbfa; font: 600 9px/14px "Segoe UI",Arial,sans-serif; letter-spacing: .02em; white-space: nowrap; }
.tree-notation-title { grid-column: 1 / -1; color: #555d59; font-size: 12px; font-weight: 600; }
.notation-marker { display: inline-grid; width: 18px; height: 18px; place-items: center; color: #7a8580; font: 600 11px/1 "Segoe UI Symbol",sans-serif; }
.notation-marker.medical { border: 1px solid #7a8580; border-radius: 50%; background: var(--surface-strong); }
.notation-person.restricted { border-style: dashed; }
.notation-center-arrow { color: #c73737; font-size: 20px; font-weight: 700; line-height: 1; }
.tree-today-legend i { display: inline-block; width: 2px; height: 22px; background: #d7e8db; }
.tree-workspace-panel { width: 100%; min-width: 0; min-height: 0; container: tree-workspace / inline-size; }
.tree-workspace-panel > .panel-head { width: min(760px,100%); }
.family-diagram-head [data-tree-diagram-action][hidden] { display: none; }
.tree-diagram-frame { position: relative; display: grid; width: 100%; overflow: hidden; overscroll-behavior: none; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-strong); }
.tree-field-actions { position: absolute; top: 8px; right: 9px; z-index: 8; display: inline-flex; align-items: center; gap: 3px; padding: 2px; border-radius: 7px; background: rgba(251,251,250,.9); backdrop-filter: blur(3px); }
.tree-field-action { display: inline-grid; place-items: center; width: 31px; height: 28px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.tree-field-action:hover,.tree-field-action:focus-visible { background: var(--surface-soft); color: var(--text); outline: 0; }
.tree-field-action:hover { text-decoration: underline; text-underline-offset: 3px; }
.tree-field-action svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.tree-pdf-action span { font-size: 8px; font-weight: 700; letter-spacing: -.15px; }
.tree-diagram {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: max(360px,var(--tree-canvas-height,calc(100vh - 96px)));
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--surface-strong);
}
.tree-diagram:focus { outline: 3px solid rgba(80,86,90,.25); outline-offset: -3px; }
.tree-diagram-scroll { width: 100%; height: 100%; overflow: auto; overscroll-behavior: none; scrollbar-width: none; cursor: all-scroll; touch-action: none; }
.tree-diagram-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tree-diagram-scroll.is-panning { cursor: grabbing; user-select: none; }
.tree-diagram-scroll > svg { display: block; min-width: 0; max-width: none; height: auto; transform-origin: 0 0; }
.tree-resize-handle { display: grid; width: 100%; height: 16px; place-items: center; border: 0; border-top: 1px solid var(--line); background: #fafbf9; cursor: ns-resize; touch-action: none; }
.tree-resize-handle span { width: 44px; height: 4px; border-top: 1px solid #aeb5b0; border-bottom: 1px solid #c5cac6; }
.tree-resize-handle:hover,.tree-resize-handle.is-resizing { background: var(--accent-soft); }
.tree-resize-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.tree-time-ruler {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 28px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  pointer-events: none;
}
.tree-time-ruler svg { display: block; min-width: 960px; max-width: none; transform: translateX(calc(-1 * var(--tree-scroll-x,0px))); }
.tree-cursor-date-marker { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tree-cursor-date-marker[hidden] { display: none; }
.tree-cursor-date-marker i { position: absolute; top: 3px; left: var(--tree-cursor-x); width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #666d70; box-shadow: 0 0 0 1px #666d70; transform: translateX(-50%); }
.tree-cursor-date-marker span { position: absolute; top: 10px; left: var(--tree-cursor-label-x); padding: 0 4px; border-radius: 3px; background: rgba(255,255,255,.97); color: #50565a; font-size: 10px; line-height: 14px; white-space: nowrap; transform: translateX(-50%); }
.tree-time-grid line { stroke: #eceeea; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tree-today-marker line { stroke: #d7e8db; stroke-width: 2; vector-effect: non-scaling-stroke; }
.tree-today-marker text { fill: #8aa292; font: 600 10px/1 "Segoe UI",Arial,sans-serif; }
.tree-lifespan { fill: none; stroke: #cbd3ce; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .82; vector-effect: non-scaling-stroke; }
.tree-layer-controls { display: flex; width: 100%; min-width: 0; align-items: flex-start; flex-wrap: wrap; gap: 7px 16px; margin: 0; padding: 0 0 8px; overflow: visible; border: 0; white-space: normal; }
.tree-layer-title { flex: 0 0 auto; color: #555d59; font-size: 12px; font-weight: 600; }
.tree-layer-options { display: flex; flex: 1 1 620px; min-width: 0; flex-wrap: wrap; gap: 7px 16px; margin: 0; }
.tree-layer-option { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; cursor: pointer; }
.tree-layer-option input { width: 15px; height: 15px; margin: 0; }
.tree-layer-option:has(input:checked) { color: var(--text); }
.tree-layer-option:focus-within { outline: 0; }
.tree-time-baseline { stroke: #aeb6b0; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tree-time-axis line { stroke: #aeb6b0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tree-time-axis line.minor { stroke: #cdd2ce; }
.tree-time-axis text { fill: var(--muted); font: 10px/1 "Segoe UI",Arial,sans-serif; text-anchor: middle; }
.tree-time-axis .tree-time-caption { fill: #616a65; font-size: 11px; font-weight: 600; text-anchor: start; }
.tree-edge { fill: none; stroke: #858c88; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.tree-edge-group,.tree-person-node,.tree-lifespan,.tree-family-junction,.tree-parent-trunk { transition: opacity .14s ease; }
.tree-diagram-frame.has-tree-legend-focus [data-tree-legend-keys].is-tree-legend-dimmed { opacity: .1; }
.tree-diagram-frame.has-tree-legend-focus [data-tree-legend-keys].is-tree-legend-match { opacity: 1; }
.tree-diagram-frame.has-tree-legend-focus .tree-parent-trunk,.tree-diagram-frame.has-tree-legend-focus .tree-family-junction { opacity: .1; }
.tree-diagram-frame.has-tree-legend-focus .tree-person-node.is-tree-legend-match > rect,.tree-diagram-frame.has-tree-legend-focus .tree-person-node.is-tree-legend-match > circle,.tree-diagram-frame.has-tree-legend-focus .tree-person-node.is-tree-legend-match > path:first-of-type { stroke-width: 3; }
.tree-diagram-frame.has-tree-legend-focus .tree-edge-group.is-tree-legend-match .tree-edge { stroke-width: 3; }
.tree-edge-group { pointer-events: stroke; }
.tree-edge:focus { outline: none; stroke-width: 3; }
#tree-parent-arrow path { fill: context-stroke; stroke: none; }
.tree-edge-label { visibility: hidden; fill: #50565a; stroke: #fbfbfa; stroke-width: 4px; paint-order: stroke; font: 600 10px/1 "Segoe UI",Arial,sans-serif; text-anchor: middle; pointer-events: none; }
.tree-edge-group:hover .tree-edge-label,.tree-edge-group:focus-within .tree-edge-label,.tree-edge-group.is-tree-edge-focus .tree-edge-label { visibility: visible; }
.tree-edge-group:hover .tree-edge,.tree-edge-group.is-tree-edge-focus .tree-edge { stroke: #50565a; stroke-width: 3; }
.tree-family-junction { fill: #f8f8f6; stroke: #858c88; stroke-width: 1.4; vector-effect: non-scaling-stroke; pointer-events: none; }
.tree-edge.adoptive { stroke-dasharray: 7 5; }
.tree-edge.guardian { stroke-dasharray: 2 5; }
.tree-edge.union { stroke-width: 1.8; }
.tree-edge.former { stroke-dasharray: 12 4 2 4; }
.tree-edge.other { stroke-dasharray: 3 4; }
.tree-edge.neutral { stroke: #9ba19d; stroke-width: 1.4; stroke-dasharray: none; }
.tree-edge.quality-close { stroke-width: 2.5; }
.tree-edge.quality-friendly,.tree-edge.quality-respectful,.tree-edge.quality-reconciled { stroke: #748a7d; }
.tree-edge.quality-tense { stroke-dasharray: 7 4; }
.tree-edge.quality-conflicted,.tree-edge.quality-hostile { stroke: #8b7474; stroke-dasharray: 3 3; }
.tree-edge.quality-absent { opacity: .48; stroke-dasharray: 2 6; }
.tree-parent-trunk { fill: none; stroke: #aeb4b0; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.tree-child-color-0 { --tree-child-color: #2f8173; --tree-child-fill: #e4f3ef; }
.tree-child-color-1 { --tree-child-color: #7058a6; --tree-child-fill: #eee9f8; }
.tree-child-color-2 { --tree-child-color: #ad6046; --tree-child-fill: #f8e9e3; }
.tree-child-color-3 { --tree-child-color: #3d72ae; --tree-child-fill: #e7eff9; }
.tree-child-color-4 { --tree-child-color: #768b2f; --tree-child-fill: #eef3df; }
.tree-child-color-5 { --tree-child-color: #a34f79; --tree-child-fill: #f7e7ef; }
.tree-child-color-6 { --tree-child-color: #247f92; --tree-child-fill: #e2f2f5; }
.tree-child-color-7 { --tree-child-color: #9b7025; --tree-child-fill: #f7eedc; }
.tree-edge.has-child-color { stroke: var(--tree-child-color); stroke-width: 2; }
.tree-person-node { color: #59605d; cursor: pointer; }
.tree-person-photo { pointer-events: none; }
.tree-person-photo-frame { fill: none !important; stroke: currentColor !important; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.notation-profile-photo { width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(145deg,#eceeec 0 48%,#c9cecb 49% 100%); }
.tree-person-node > rect,.tree-person-node > circle,.tree-person-node > path:not(.tree-death-mark):not(.tree-center-arrow) { fill: #fbfbfa; stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.tree-person-node.has-child-color { color: var(--tree-child-color); }
.tree-person-node.has-child-color > rect,.tree-person-node.has-child-color > circle,.tree-person-node.has-child-color > path:not(.tree-death-mark):not(.tree-center-arrow) { fill: var(--tree-child-fill); }
.tree-person-node:hover,.tree-person-node:focus { color: var(--accent-deep); outline: none; }
.tree-person-node.is-tree-focus { color: #454c49; }
.tree-person-node.is-tree-focus > rect,.tree-person-node.is-tree-focus > circle,.tree-person-node.is-tree-focus > path:first-of-type { fill: #eef0ed; stroke-width: 3; }
.tree-person-node.is-tree-related > rect,.tree-person-node.is-tree-related > circle,.tree-person-node.is-tree-related > path:first-of-type { stroke-width: 2.4; }
.tree-diagram-frame.has-tree-family-focus .tree-person-node.is-tree-dimmed,.tree-diagram-frame.has-tree-edge-focus .tree-person-node.is-tree-dimmed,.tree-diagram-frame.has-tree-kinship-focus .tree-person-node.is-tree-dimmed { opacity: .18; }
.tree-diagram-frame.has-tree-family-focus .tree-edge-group.is-tree-dimmed,.tree-diagram-frame.has-tree-edge-focus .tree-edge-group.is-tree-dimmed,.tree-diagram-frame.has-tree-kinship-focus .tree-edge-group.is-tree-dimmed { opacity: .12; }
.tree-diagram-frame.has-tree-family-focus .tree-lifespan.is-tree-dimmed,.tree-diagram-frame.has-tree-edge-focus .tree-lifespan.is-tree-dimmed,.tree-diagram-frame.has-tree-family-focus .tree-family-junction.is-tree-dimmed,.tree-diagram-frame.has-tree-kinship-focus .tree-lifespan.is-tree-dimmed,.tree-diagram-frame.has-tree-kinship-focus .tree-family-junction.is-tree-dimmed,.tree-diagram-frame.has-tree-kinship-focus .tree-parent-trunk.is-tree-dimmed { opacity: .12; }
.tree-diagram-frame .tree-edge.is-tree-related,.tree-diagram-frame .tree-edge.is-tree-edge-focus { stroke: #555d59; stroke-width: 2.8; }
.tree-diagram-frame .tree-lifespan.is-tree-related { stroke: #aab5ae; opacity: 1; }
.tree-diagram-frame .tree-family-junction.is-tree-related { fill: #666d69; stroke: #666d69; }
.tree-child-color-legend { display: inline-flex; align-items: center; gap: 3px; }
.tree-child-color-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tree-child-color); }
.tree-child-color-legend i:last-of-type { margin-right: 3px; }
.tree-person-node:focus > rect,.tree-person-node:focus > circle,.tree-person-node:focus > path:first-of-type { stroke-width: 3; }
.tree-person-node.is-restricted > rect,.tree-person-node.is-restricted > circle,.tree-person-node.is-restricted > path:first-of-type { stroke-dasharray: 3 3; }
.tree-person-node.is-centered > rect,.tree-person-node.is-centered > circle,.tree-person-node.is-centered > path:first-of-type { fill: var(--accent-soft); stroke: var(--accent-deep); }
.tree-death-mark,.tree-center-arrow { fill: none !important; stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.tree-center-arrow { stroke: #c73737 !important; stroke-width: 3.2; filter: drop-shadow(0 0 1px rgba(199,55,55,.45)); }
.tree-private-mark { fill: var(--warn); font-size: 7px; }
.tree-person-node.is-neutral-status { color: #747b77; }
.tree-layer-marker { pointer-events: none; }
.tree-layer-marker.medical circle { fill: #fbfbfa; stroke: #7a8580; stroke-width: 1; }
.tree-layer-marker.medical path { fill: none; stroke: #7a8580; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tree-layer-marker.event,.tree-layer-marker.source { fill: #7a8580; font-size: 7px; text-anchor: middle; }
.tree-person-name,.tree-person-years { stroke: #fbfbfa; stroke-width: 4px; paint-order: stroke; text-anchor: middle; font-family: "Segoe UI",Arial,sans-serif; }
.tree-person-name { fill: #4c5356; font-size: 12px; font-weight: 600; }
.tree-person-name[data-action="toggle-tree-family-focus"] { cursor: pointer; }
.tree-person-name[data-action="toggle-tree-family-focus"]:hover { text-decoration: underline; }
.tree-person-years { fill: var(--muted); font-size: 10px; }
.tree-birth-order { fill: #7d8588; font: 600 9px/1 "Segoe UI",Arial,sans-serif; text-anchor: middle; stroke: #fbfbfa; stroke-width: 3px; paint-order: stroke; }
.tree-assigned-symbols { fill: #737c7f; font: 600 8px/1 "Segoe UI",Arial,sans-serif; text-anchor: start; stroke: #fbfbfa; stroke-width: 3px; paint-order: stroke; }
.tree-edge.symbol-line-double { stroke-width: 3px; }
.tree-edge.symbol-line-dashed,.tree-edge.symbol-line-adoptive { stroke-dasharray: 7 5; }
.tree-edge.symbol-line-dotted,.tree-edge.symbol-line-guardian { stroke-dasharray: 2 4; }
.tree-edge.symbol-line-conflict,.tree-edge.symbol-line-directed-conflict { stroke-dasharray: 8 3 2 3; }
.family-diagram-head .heading-note-text { white-space: pre-line; }

@media (max-width: 900px) {
  .tree-workspace-panel { min-height: 0; padding: 14px; }
  .tree-settings-row,.tree-primary-controls,.tree-filter-controls { flex-wrap: wrap; white-space: normal; }
}

@container tree-workspace (max-width: 680px) {
  .family-diagram-head [data-tree-diagram-action] { width: 100%; justify-content: flex-start; }
  .tree-search-field { width: 100%; }
  .tree-settings-row { align-items: flex-start; }
  .tree-primary-controls,
  .tree-filter-controls { width: 100%; flex-basis: 100%; }
}

.symbols-directory { width: min(980px,100%); margin-inline: auto; }
.panel.symbols-controls { padding: 0; border-top: 0; }
.symbol-controls-row { display: flex; min-width: 0; align-items: center; gap: 16px; }
.symbols-controls .symbol-search-field { flex: 1 1 250px; min-width: 190px; margin: 0; }
.symbols-controls .symbol-search-field input { min-height: 27px; padding-top: 3px; padding-bottom: 3px; }
.symbol-presets { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 2px 7px; }
.symbol-preset,.symbols-reset { border: 0; padding: 1px 2px; background: transparent; color: #777d82; font: inherit; font-size: 12px; line-height: 20px; white-space: nowrap; cursor: pointer; }
.symbol-preset:hover,.symbol-preset:focus-visible,.symbols-reset:hover,.symbols-reset:focus-visible { color: #454c50; outline: 0; box-shadow: 0 1px 0 #b8bebb; }
.symbol-preset.active { color: #50565a; font-weight: 600; box-shadow: 0 1px 0 #b8bebb; }
.symbol-preset-separator { color: #a0a5a7; font-size: 12px; }
.symbols-reset { text-decoration: underline; text-decoration-color: #cfd4d1; text-underline-offset: 3px; }
.symbols-controls + .symbol-section { padding-top: 4px; border-top: 0; }
.symbol-section { padding-bottom: 4px; }
.symbol-section-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; padding: 0 0 12px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.symbol-section-toggle > span:first-child { display: grid; gap: 3px; }
.symbol-section-toggle strong { font-size: 14px; }
.symbol-section-toggle small { color: var(--muted); font-size: 11px; font-weight: 400; }
.symbol-section-toggle:hover strong,.symbol-section-toggle:focus-visible strong { color: var(--accent-deep); }
.symbol-section-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.symbol-toggle-mark { display: inline-grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: 18px; font-weight: 400; }
.symbol-sensitive-note { margin: 0 0 9px; padding: 8px 10px; border-left: 2px solid var(--warn); background: #fbf8ef; color: var(--muted); font-size: 11px; }
.symbol-table { min-width: 0; }
.symbol-row { display: grid; width: min(900px,100%); grid-template-columns: 72px minmax(210px,32%) minmax(0,1fr); column-gap: 0; align-items: center; min-height: 48px; margin-inline: auto; padding: 7px 0; border-bottom: 1px solid #ecece9; color: var(--muted); font-size: 12px; line-height: 1.4; }
.symbol-row:last-child { border-bottom: 0; }
.symbol-row > * { min-width: 0; padding-inline: 10px; }
.symbol-row strong { color: #4d5357; font-size: 12px; }
.symbol-header { position: sticky; top: 0; z-index: 3; min-height: 32px; background: var(--surface); color: #8a8f92; font-size: 10px; font-weight: 600; }
.symbol-header > span:first-child { text-align: center; }
.symbol-header > span:not(:first-child) { text-align: left; }
.symbol-entry { border-width: 0 0 1px; border-radius: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.symbol-entry:hover,.symbol-entry:focus-visible { background: var(--accent-soft); outline: none; }
.symbol-entry:focus-visible { box-shadow: inset 3px 0 var(--accent); }
.symbol-sample { display: inline-flex; min-width: 62px; min-height: 28px; align-items: center; justify-content: center; gap: 4px; color: #59605d; }
.symbol-token { font: 600 12px/1.2 ui-monospace,"Cascadia Mono",Consolas,monospace; letter-spacing: .01em; }
.notation-person { position: relative; display: inline-block; width: 21px; height: 21px; border: 1.7px solid currentColor; background: var(--surface-strong); }
.notation-person.female { border-radius: 50%; }
.notation-person.unknown { width: 17px; height: 17px; transform: rotate(45deg); }
.notation-person.affected { background: currentColor; }
.notation-person.multiple { background: conic-gradient(currentColor 0 25%,transparent 25% 50%,currentColor 50% 75%,transparent 75%); }
.notation-person.carrier { background: linear-gradient(90deg,currentColor 50%,transparent 50%); }
.notation-person.presymptomatic::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transform: translate(-50%,-50%); }
.notation-person.deceased::after { content: ""; position: absolute; left: -5px; top: 9px; width: 29px; border-top: 1.7px solid currentColor; transform: rotate(-55deg); }
.notation-person.consultand::before { content: "↗"; position: absolute; right: 19px; top: 10px; font: 18px/1 "Segoe UI Symbol",sans-serif; }
.notation-person.adopted::before,.notation-person.adopted::after { position: absolute; top: -7px; font: 27px/1 "Segoe UI",sans-serif; }
.notation-person.adopted::before { content: "["; right: 21px; }
.notation-person.adopted::after { content: "]"; left: 21px; }
.notation-pregnancy { display: inline-flex; width: 0; height: 0; align-items: flex-start; justify-content: center; border-right: 12px solid transparent; border-left: 12px solid transparent; border-top: 22px solid currentColor; color: #59605d; font: 600 9px/1 ui-monospace,monospace; text-indent: -1px; }
.notation-line { position: relative; display: inline-block; width: 58px; height: 22px; }
.notation-line::before { content: ""; position: absolute; left: 1px; right: 1px; top: 10px; border-top: 1.7px solid currentColor; }
.notation-line.dashed::before { border-top-style: dashed; }
.notation-line.dotted::before { border-top-style: dotted; border-top-width: 2px; }
.notation-line.life::before { border-color: #cbd3ce; border-top-width: 2px; }
.notation-line.union::before { border-top-width: 2px; }
.notation-line.former::before { border: 0; height: 2px; background: repeating-linear-gradient(90deg,currentColor 0 12px,transparent 12px 16px,currentColor 16px 18px,transparent 18px 22px); }
.notation-line.double::after,.notation-line.triple::after { content: ""; position: absolute; left: 1px; right: 1px; top: 14px; border-top: 1.5px solid currentColor; }
.notation-line.triple { border-top: 1.5px solid currentColor; }
.notation-line.ended::after { content: ""; position: absolute; left: 27px; top: 4px; width: 8px; height: 14px; border-left: 1.7px solid currentColor; background: var(--surface); transform: rotate(25deg); }
.notation-line.separated::after,.notation-line.divorced::after { position: absolute; left: 26px; top: -2px; content: "/"; font: 20px/22px ui-monospace,monospace; }
.notation-line.divorced::after { left: 22px; content: "//"; }
.notation-line.cancelled::after { position: absolute; left: 24px; top: -2px; content: "×"; font-size: 20px; }
.notation-line.wave::before { height: 8px; border: 0; background: radial-gradient(8px 5px at 6px 8px,transparent 62%,currentColor 64% 70%,transparent 72%) 0 0/12px 8px repeat-x; }
.notation-line.conflict::before { height: 8px; border: 0; background: linear-gradient(135deg,transparent 0 43%,currentColor 44% 51%,transparent 52%) 0 0/12px 8px repeat-x; }
.notation-line.directed::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-top: 1.7px solid currentColor;
  border-right: 1.7px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
}
.notation-twins { position: relative; display: inline-block; width: 52px; height: 27px; border-top: 1.5px solid currentColor; }
.notation-twins::before,.notation-twins::after { content: ""; position: absolute; top: 0; width: 31px; border-top: 1.5px solid currentColor; }
.notation-twins::before { left: 0; transform: rotate(42deg); transform-origin: left; }
.notation-twins::after { right: 0; transform: rotate(-42deg); transform-origin: right; }
.notation-twins.identical { border-bottom: 1.5px solid currentColor; }
.symbol-detail-dialog { width: min(620px,calc(100vw - 32px)); }
.symbol-detail-stage { display: grid; min-height: 118px; margin: 12px 0 18px; place-items: center; border-block: 1px solid var(--line); background: var(--surface-strong); color: #59605d; }
.symbol-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 22px; }
.symbol-detail-grid strong { color: var(--text); font-size: 12px; }
.symbol-detail-grid p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

@media (max-width: 899px) {
  .symbol-controls-row { align-items: stretch; flex-direction: column; gap: 8px; }
  .symbols-controls .symbol-search-field { flex-basis: auto; width: 100%; }
  .symbol-row { grid-template-columns: 64px minmax(170px,34%) minmax(0,1fr); }
}

@media (max-width: 560px) {
  .symbols-directory { width: 100%; }
  .symbol-presets { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .symbol-preset { flex: 0 0 auto; }
  .symbol-header { display: none; }
  .symbol-row.symbol-entry { grid-template-columns: 56px minmax(0,1fr); min-height: 62px; padding-block: 9px; }
  .symbol-entry .symbol-sample { grid-row: 1 / span 2; padding-inline: 4px; }
  .symbol-entry .symbol-value { grid-column: 2; align-self: end; }
  .symbol-entry .symbol-meaning { grid-column: 2; align-self: start; padding-top: 3px; }
  .symbol-section-toggle small { line-height: 1.35; }
  .symbol-detail-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .panel, .metric, .person-card { transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
}

html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

@media (prefers-contrast: more) {
  :root { --line: #777; --line-strong: #444; --muted: #4f5558; }
  .status, .test-badge { border: 1px solid currentColor; }
}

/* Визуальный язык Паланы: спокойная типографика, плоская рабочая область и тонкие разделители. */
:root {
  --bg: #f6f6f4;
  --surface: #fbfbfa;
  --surface-strong: #ffffff;
  --surface-soft: #f1f2f0;
  --ink: #50545a;
  --muted: #858a91;
  --line: #e3e4e1;
  --line-strong: #d5d7d3;
  --shadow: none;
  --radius: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
}

body, button, input, select, textarea { font-family: "Segoe UI", Arial, sans-serif; }
.app-shell { display: block; }
.sidebar {
  position: sticky;
  z-index: 12;
  top: 0;
  display: grid;
  width: min(980px, calc(100% - 48px));
  height: auto;
  margin: 0 auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 13px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(246,246,244,.96);
  backdrop-filter: blur(12px);
}
.app-brand { gap: 9px; padding: 0; white-space: nowrap; }
.app-brand .brand-mark { width: 30px; height: 30px; border-radius: 6px; font: 600 14px/1 "Segoe UI", Arial, sans-serif; }
.app-brand strong { font: 600 14px/21px "Segoe UI", Arial, sans-serif; }
.app-brand span { margin: 0; font-size: 11px; line-height: 16px; }
.nav {
  display: flex;
  max-height: none;
  gap: 14px;
  overflow: visible;
  padding: 0;
}
.nav-primary { display: flex; min-width: 0; gap: 12px; align-items: center; }
.nav button {
  display: inline-flex;
  width: auto;
  flex: 0 0 auto;
  gap: 0;
  border: 0;
  border-radius: 0;
  padding: 2px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 21px;
}
.nav button:hover { background: transparent; color: var(--ink); }
.nav button.active { background: transparent; color: var(--ink); font-weight: 700; }
.nav-icon { display: none; }
.nav-more { position: relative; flex: 0 0 auto; color: var(--muted); }
.nav-more summary { padding: 2px 0; color: rgba(95,100,104,.55); font-size: 11px; line-height: 16px; cursor: pointer; list-style: none; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more[open] summary { color: var(--ink); }
.nav-secondary {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  min-width: 190px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(60,65,62,.08);
}
.nav-secondary button { padding: 3px 0; }
.sidebar-footer { position: static; display: flex; gap: 8px; align-items: center; padding: 0; border: 0; white-space: nowrap; }
.sidebar-footer p { display: none; }
.main { width: min(980px, calc(100% - 48px)); margin: 0 auto; }
.topbar { padding: 26px 0 14px; border: 0; background: transparent; backdrop-filter: none; }
.topbar h1, .page-head h2, .login-card h1, .dialog h2 { color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; }
.topbar h1 { font-size: 14px; line-height: 21px; font-weight: 700; }
.topbar p { margin-top: 1px; font-size: 11px; line-height: 16px; }
.topbar-actions { gap: 8px 14px; }
.content { width: 100%; padding: 0 0 44px; }
.page-head { align-items: start; margin-bottom: 14px; }
.page-head h2 { margin-bottom: 2px; font-size: 14px; line-height: 21px; font-weight: 700; }
.page-head p { font-size: 14px; line-height: 21px; }

.button, .button.small {
  min-height: auto;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
}
.button:hover { border-color: #9da19c; background: transparent; color: #30343a; }
.button.primary, .button.primary:hover { border-color: var(--accent); background: transparent; color: var(--accent-deep); font-weight: 600; }
.button.quiet { border-color: transparent; color: var(--muted); }
.button.danger { border-color: #cbaaa7; background: transparent; color: var(--danger); }
.button:disabled { border-color: transparent; }

.text-scale-control,.locale-control { display: inline-flex; gap: 5px; align-items: baseline; color: var(--muted); font-size: 14px; white-space: nowrap; }
.text-scale-control select,.locale-control select {
  width: auto;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0 16px 0 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 21px;
}
.text-scale-control select:focus-visible,.locale-control select:focus-visible { outline: 2px solid rgba(80,86,90,.4); outline-offset: 3px; }

.panel { margin: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.panel:first-of-type { border-top-color: var(--line); }
.panel-head { margin-bottom: 10px; }
.panel h3 { font-size: 14px; line-height: 21px; font-weight: 700; }
.panel-subtitle, .field-help, .list-item p, .timeline-item p, .help-steps span { font-size: 11px; line-height: 16px; }
.metrics { gap: 0; margin-bottom: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric { padding: 10px 14px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; }
.metric span { font-size: 11px; line-height: 16px; }
.metric strong, .metric.compact strong { margin-top: 0; color: var(--ink); font: 600 14px/21px "Segoe UI", Arial, sans-serif; }
.list { gap: 0; }
.list-item { padding: 10px 0; border-bottom-color: var(--line); }
.list-item strong { font-size: 14px; line-height: 21px; }
.status, .test-badge { border-radius: 4px; padding: 1px 6px; font-size: 11px; line-height: 16px; }
.empty { padding: 20px 0; border: 0; border-radius: 0; text-align: left; }
.person-card, .readiness-item, .dialog, .login-card { border-radius: 6px; box-shadow: none; }
.person-card { padding: 10px 11px; }
.dialog, .login-card { border-color: var(--line); background: var(--surface); }
.field input, .field select, .field textarea { border-radius: 4px; padding: 8px 9px; }
.test-note { border-radius: 4px; }
.mobile-nav { display: none !important; }

@media (max-width: 900px) {
  .sidebar { display: grid; width: calc(100% - 28px); grid-template-columns: auto minmax(0,1fr); gap: 12px; }
  .sidebar-footer { grid-column: 1 / -1; justify-content: flex-end; }
  .main { width: calc(100% - 28px); }
  .topbar { padding-top: 18px; }
  .content { padding: 0 0 40px; }
  .nav-primary { overflow-x: auto; scrollbar-width: none; }
}

@media (max-width: 560px) {
  .sidebar { align-items: start; }
  .app-brand span { display: none; }
  .topbar { flex-direction: column; gap: 10px; }
  .topbar-actions { justify-content: flex-start; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--line); }
  .metric:nth-child(odd) { padding-left: 0; }
}

/* Исправленная оболочка Геноса на основе действующей компоновки Паланы. */
body { background: #fff; }

.app-shell {
  display: grid;
  width: calc(100% - 48px);
  max-width: none;
  min-height: calc(100vh / var(--ui-zoom));
  margin: 0 auto;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 38px;
  padding: 24px 0 44px;
}

/* Вход и подтверждение доступа используют тот же спокойный плоский язык, что и рабочая область. */
.login-page {
  display: grid;
  min-height: calc(100vh / var(--ui-zoom));
  place-items: center;
  padding: 40px 24px;
  background: #fff;
}
.login-card {
  display: grid;
  width: min(360px, 100%);
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.login-brand { display: flex; gap: 9px; align-items: center; margin-bottom: 42px; }
.login-brand .brand-mark {
  width: 28px;
  height: 28px;
  border: 1px solid #dfe1dd;
  border-radius: 6px;
  background: #f8f8f6;
  color: #747b78;
  font: 600 13px/1 "Segoe UI", Arial, sans-serif;
}
.login-brand strong { display: block; color: #5b6165; font: 600 14px/18px "Segoe UI", Arial, sans-serif; }
.login-brand span { display: block; color: #92979a; font: 400 11px/16px "Segoe UI", Arial, sans-serif; }
.login-stage { margin-bottom: 22px; }
.login-step { display: block; margin-bottom: 3px; color: #979c9f; font-size: 11px; line-height: 16px; }
.login-card .login-stage h1 {
  margin: 0 0 4px;
  color: #555b5f;
  font: 500 14px/21px "Segoe UI", Arial, sans-serif;
}
.login-card .login-stage p { margin: 0; color: #777d82; font-size: 12px; line-height: 18px; }
.login-card .field { gap: 6px; margin-bottom: 12px; }
.login-card .field label { color: #777d82; font-size: 12px; line-height: 18px; }
.login-card .field input {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid #dedfda;
  border-radius: 6px;
  background: #fff;
  color: #4f5558;
  font-size: 13px;
}
.login-card .button.primary {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid #dedfda;
  border-radius: 6px;
  background: #f7f8f5;
  color: #4f5558;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  text-align: center;
}
.login-card .button.primary:hover { border-color: #cfd2cc; background: #f2f4f0; color: #3f4649; }
.login-card .button:not(.primary) { color: #858a8e; font-size: 11px; line-height: 16px; }
.login-actions { align-items: center; margin-top: 2px; }
.login-actions .button.primary { flex: 1 1 100%; }
.login-card .test-note {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #969b9e;
  font-size: 11px;
  line-height: 16px;
}
.login-test-code {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin: 2px 0 0;
  padding: 8px 0;
  border-top: 1px solid #eeeeec;
  border-bottom: 1px solid #eeeeec;
  color: #8a8f92;
  font-size: 11px;
  line-height: 16px;
}
.login-test-code strong { color: #596065; font: 600 13px/18px ui-monospace, "Cascadia Mono", monospace; letter-spacing: .12em; }
.login-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 42px;
  padding-top: 10px;
  border-top: 1px solid #eeeeec;
  color: #a0a4a6;
  font-size: 10px;
  line-height: 15px;
}

/* Контекстное обучение перенесено из действующей системы Паланы. */
.context-training-launcher {
  position: fixed;
  z-index: 30;
  right: 18px;
  bottom: 18px;
  line-height: 0;
}
.context-training-launcher > button {
  display: grid;
  width: 32px;
  height: 32px;
  min-width: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid #c7ccc7;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: none;
  color: #4b5350;
}
.context-training-launcher > button:hover { border-color: #aeb5af; background: #f0f2ee; }
.context-training-launcher svg {
  display: block;
  width: 14px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.context-training-launcher circle { fill: currentColor; stroke: none; }
.context-training-launcher button:focus-visible { outline: 3px solid rgba(108,116,110,.55); outline-offset: 3px; }

.training-overlay-backdrop {
  position: fixed;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.training-overlay {
  position: relative;
  width: min(760px,100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px;
  border: 1px solid #dedfda;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(42,45,48,.12);
}
.training-overlay-header { padding: 0 38px 20px 0; border-bottom: 1px solid var(--line); }
.training-overlay-header h2 { margin: 0; color: var(--ink); font: 500 24px/1.2 Georgia,serif; }
.training-overlay-header p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.training-overlay-close { position: absolute; top: 15px; right: 16px; display: grid; width: 32px; height: 32px; place-items: center; padding: 0 0 2px; border: 0; border-radius: 50%; background: transparent; color: #777d82; font-size: 24px; font-weight: 300; line-height: 1; }
.training-overlay-close:hover { background: var(--surface-soft); color: var(--ink); }
.training-lesson { padding: 20px 0; border-bottom: 1px solid var(--line); }
.training-eyebrow { display: block; margin-bottom: 2px; color: #969b9e; font-size: 11px; line-height: 16px; }
.training-lesson .help-steps { max-width: 780px; }
.training-check {
  display: grid;
  gap: 2px;
  margin: 16px 0 14px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.training-check span { color: var(--muted); font-size: 11px; line-height: 16px; }
.training-check strong { color: var(--ink); font-size: 13px; line-height: 19px; font-weight: 500; }
.training-feedback { max-width: 780px; padding-top: 20px; }
.training-feedback > p { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 18px; }
.training-feedback .field { max-width: 620px; }
.feedback-transfer-preview { margin: 14px 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feedback-transfer-preview span, .feedback-transfer-preview small { display: block; color: var(--muted); font-size: 11px; line-height: 16px; }
.feedback-transfer-preview p { margin: 5px 0; color: var(--ink); line-height: 20px; white-space: pre-wrap; }
.support-inbox { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.support-inbox h4 { margin: 0; font-size: 14px; font-weight: 600; }
.support-report-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.support-report-row:hover { background: var(--surface-soft); }
.support-report-row > span:first-child { min-width: 0; }
.support-report-row strong,.support-report-row small { display: block; }
.support-report-row strong { overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.support-report-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.support-conversation { width: min(680px,100%); }
.support-conversation-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -8px 0 18px; color: var(--muted); font-size: 11px; }
.support-message-list { display: grid; max-height: 320px; gap: 9px; margin: 0 0 18px; overflow: auto; }
.support-message { max-width: 86%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.support-message.from-owner { justify-self: end; background: var(--accent-soft); }
.support-message.internal { border-style: dashed; background: var(--warn-soft); }
.support-message strong,.support-message small { display: block; color: var(--muted); font-size: 10px; }
.support-message p { margin: 4px 0; white-space: pre-wrap; }
.support-status-control { display: flex; align-items: end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.support-status-control .field { flex: 1; margin: 0; }

.sidebar {
  position: sticky;
  z-index: 12;
  top: 22px;
  display: block;
  width: auto;
  height: max-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.app-brand { align-items: center; gap: 9px; padding: 0 0 34px; }
.app-brand .brand-mark {
  width: 28px;
  height: 28px;
  border: 1px solid #dfe1dd;
  border-radius: 6px;
  background: #f8f8f6;
  color: #747b78;
  font: 600 13px/1 "Segoe UI", Arial, sans-serif;
}
.app-brand strong { color: #5b6165; font: 600 14px/18px "Segoe UI", Arial, sans-serif; }
.app-brand span { display: block; color: #92979a; font: 400 11px/16px "Segoe UI", Arial, sans-serif; }

.nav { display: grid; gap: 0; overflow: visible; padding: 0; }
.nav-primary, .nav-secondary { display: grid; gap: 10px; align-items: start; }
.nav button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #696f73;
  font: 400 14px/21px "Segoe UI", Arial, sans-serif;
  text-align: left;
}
.nav button:hover { color: #3f4549; }
.nav button.active { color: #343a3e; font-weight: 700; }
.nav-more { position: static; margin-top: 16px; padding-top: 13px; border-top: 1px solid #eeeeec; }
.nav-more summary {
  width: max-content;
  padding: 0;
  color: rgba(95,100,104,.52);
  font: 400 11px/16px "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}
.nav-more[open] summary { margin-bottom: 12px; color: #60666a; }
.nav-secondary {
  position: static;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.nav-secondary button { padding: 0; }
.sidebar-footer { display: block; margin-top: 18px; padding-top: 13px; border-top: 1px solid #eeeeec; }
.sidebar-footer .button { color: #8a8f92; font-size: 11px; line-height: 16px; text-align: left; }

.main {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-top: 68px;
}
.workspace-profile {
  position: absolute;
  top: 0;
  right: auto;
  left: 0;
  display: flex;
  width: min(760px,100%);
  justify-content: flex-end;
  gap: 12px;
  align-items: baseline;
  color: #858a8e;
  font-size: 11px;
  line-height: 16px;
}
.workspace-profile .button { font-size: 11px; line-height: 16px; }

.topbar {
  display: flex;
  width: min(760px,100%);
  min-height: 42px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 0 0 12px;
  border: 0;
  background: transparent;
}
.topbar h1 { color: #50565a; font-size: 14px; line-height: 21px; font-weight: 700; }
.topbar p { margin-top: 0; color: #8b9094; font-size: 11px; line-height: 16px; }
.topbar-heading { min-width: 0; }
.family-title-row { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.family-title-row h1 { flex: 0 0 auto; margin: 0; }
.family-clan-selector { display: inline-flex; min-width: 0; height: 21px; align-items: center; align-self: center; }
.family-clan-selector .native-compact-select {
  display: inline-flex;
  max-width: min(190px,calc(100vw - 150px));
  height: 21px;
  align-items: center;
}
.family-clan-selector .compact-select-trigger {
  max-width: min(190px,calc(100vw - 150px));
  color: #777d82;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  height: 21px;
  padding-block: 0;
  vertical-align: middle;
}
.family-clan-selector .compact-select-option { font-size: 14px; }
.display-settings { position: relative; flex: 0 0 auto; }
.display-settings > summary {
  color: #8b9094;
  font: 400 11px/16px "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  list-style: none;
}
.display-settings > summary::-webkit-details-marker { display: none; }
.display-settings[open] > summary { color: #555b5f; }
.topbar-actions {
  position: absolute;
  z-index: 24;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: 226px;
  justify-content: stretch;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #e3e4e1;
  border-radius: 7px;
  background: #fbfbfa;
  box-shadow: 0 12px 30px rgba(54,61,57,.08);
}
.topbar-actions .button { width: max-content; text-align: left; }
.text-scale-control,.locale-control { justify-content: space-between; color: #777d82; }
.text-scale-control select { min-width: 72px; }
.locale-control select { min-width: 112px; }

.content { width: 100%; max-width: none; padding: 0 0 34px; }
.route-compact,.family-compact { width: min(760px,100%); margin-right: auto; }
.family-workspace { width: 100%; }
.family-tree-independent { width: 100%; min-width: 0; min-height: 0; margin-top: 0; }
.family-section { scroll-margin-top: 22px; }
.family-section + .family-section { margin-top: 14px; }
.page-head { align-items: start; margin-bottom: 14px; }
.page-head h2 { color: #555b5f; font-size: 14px; line-height: 21px; font-weight: 500; }
.page-head.family-collapsible-head h2 { margin-bottom: 0; }
.page-head p { max-width: 72ch; color: #777d82; }
.heading-note-text,.page-head .heading-note-text { color: #777d82; font-family: "Segoe UI",Arial,sans-serif; font-size: 14px; line-height: 21px; font-weight: 400; letter-spacing: normal; }
.panel { padding: 14px 0; border-top-color: #e6e6e2; }
.panel.tree-workspace-panel { border-top: 0; }
.people-page-head,.kinship-page-head { margin-bottom: 0; }
.people-page-head + #family-people-content > .panel:first-child,.panel.kinship-controls-panel { padding-top: 0; }
.panel.kinship-controls-panel { padding-top: 14px; padding-bottom: 0; }
.kinship-search-grid .field { min-width: 0; }
.kinship-person-search { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 6px 2px; }
.kinship-person-search:hover,.kinship-person-search:focus { border-bottom-color: var(--line-strong); box-shadow: none; }
.kinship-person-search:focus::placeholder { color: transparent; }
.people-page-head + #family-people-content > .panel:first-child { border-top: 0; }
.metrics { border-color: #e6e6e2; }
.system-strip {
  display: flex;
  width: min(760px,100%);
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #eeeeec;
  color: #92979a;
  font-size: 11px;
  line-height: 16px;
}
.system-strip .test-badge { border: 0; padding: 0; background: transparent; color: #7a8084; }

@media (max-width: 899px) {
  .app-shell {
    display: grid;
    width: min(calc(100% - 32px), 760px);
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-top: 16px;
  }
  .sidebar { position: static; display: flex; gap: 16px; align-items: center; overflow: visible; padding-bottom: 8px; border-bottom: 1px solid #eeeeec; }
  .app-brand { flex: 0 0 auto; padding: 0 8px 0 0; }
  .app-brand span { display: none; }
  .nav { display: flex; min-width: 0; flex: 1 1 auto; gap: 14px; align-items: center; }
  .nav-primary { display: flex; min-width: 0; gap: 12px; overflow-x: auto; scrollbar-width: none; }
  .nav button { width: auto; flex: 0 0 auto; }
  .nav-more { position: relative; flex: 0 0 auto; margin: 0; padding: 0; border: 0; }
  .nav-more[open] summary { margin-bottom: 0; }
  .nav-secondary { position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px; gap: 8px; padding: 11px 13px; border: 1px solid #e3e4e1; border-radius: 6px; background: #fbfbfa; box-shadow: 0 10px 28px rgba(60,65,62,.08); }
  .sidebar-footer { flex: 0 0 auto; margin: 0; padding: 0; border: 0; }
  .main { width: 100%; min-width: 0; max-width: 100%; padding-top: 46px; }
  .content, .page-head, .page-head > *, .button-row { width: 100%; max-width: 100%; min-width: 0; }
  .route-compact,.family-compact,.topbar,.system-strip { width: 100%; }
  .workspace-profile { left: 0; right: auto; width: auto; justify-content: flex-start; }
  .topbar, .page-head, .list-item { align-items: flex-start; flex-direction: column; }
  .topbar { gap: 8px; }
  .display-settings { align-self: flex-start; }
  .topbar-actions { right: auto; left: 0; }
  .metrics, .form-grid, .readiness-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .search-row { grid-template-columns: 1fr; }
  .metric, .metric:first-child { padding: 9px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }
  .heading-note-text,.page-head .heading-note-text {
    position: fixed;
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    transform: translateY(-3px);
  }
  .heading-note-button:hover + .heading-note-text,.heading-note-button:focus-visible + .heading-note-text { transform: none; }
}

@media (max-width: 560px) {
  .app-shell { width: calc(100% - 24px); }
  .sidebar { gap: 10px; }
  .app-brand strong { display: none; }
  .nav-primary { gap: 10px; }
  .sidebar-footer { display: none; }
  .topbar { min-height: 38px; }
  .display-settings { margin-top: 1px; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .system-strip { align-items: flex-start; flex-direction: column; gap: 3px; }
  .context-training-launcher { right: 10px; bottom: 10px; }
  .training-overlay-backdrop { padding: 10px; }
  .training-overlay { max-height: calc(100vh - 20px); padding: 20px; border-radius: 12px; }
  .training-overlay-header { padding-right: 34px; }
  .training-overlay-close { top: 10px; right: 10px; }
  .heading-note-text,.page-head .heading-note-text {
    position: fixed;
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    transform: translateY(-3px);
  }
  .heading-note-button:hover + .heading-note-text,.heading-note-button:focus-visible + .heading-note-text { transform: none; }
}

/* RTL changes the reading order of the shell, but not the chronology of the tree. */
html[dir="rtl"] .workspace-profile {
  right: 0;
  left: auto;
  justify-content: flex-start;
}
html[dir="rtl"] .topbar,
html[dir="rtl"] .route-compact,
html[dir="rtl"] .family-compact,
html[dir="rtl"] .tree-workspace-panel .tree-controls,
html[dir="rtl"] .tree-workspace-panel > .panel-head,
html[dir="rtl"] .system-strip {
  margin-right: 0;
  margin-left: auto;
}
html[dir="rtl"] .content {
  direction: ltr;
}
html[dir="rtl"] .topbar,
html[dir="rtl"] .workspace-profile,
html[dir="rtl"] .sidebar,
html[dir="rtl"] .system-strip {
  direction: rtl;
}
html[dir="rtl"] .nav button,
html[dir="rtl"] .sidebar-footer .button,
html[dir="rtl"] .topbar-actions .button,
html[dir="rtl"] .person-list-summary {
  text-align: right;
}
html[dir="rtl"] .nav-secondary,
html[dir="rtl"] .topbar-actions {
  right: 0;
  left: auto;
}
html[dir="rtl"] .tree-diagram-frame,
html[dir="rtl"] .tree-diagram,
html[dir="rtl"] .tree-notation-legend,
html[dir="rtl"] .tree-time-ruler,
html[dir="rtl"] .person-life-status {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Единый знак Геноса: зеркальная ветвь хорошо читается вплоть до размера фавикона. */
.brand-mark,
.app-brand .brand-mark,
.login-brand .brand-mark {
  display: block;
  width: 36px;
  height: 30px;
  flex: 0 0 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

@media (max-width: 560px) {
  .app-brand .brand-mark {
    width: 32px;
    height: 27px;
    flex-basis: 32px;
  }
}


/* Единый безрамочный язык полей во всём Геносе. */
select.native-select-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.native-compact-select { display: inline-block; max-width: 100%; }
.native-compact-select .compact-select-trigger { max-width: min(280px,calc(100vw - 32px)); }
.compact-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.native-compact-select .compact-select-menu { min-width: max(100%,180px); max-width: min(320px,calc(100vw - 32px)); }
.native-compact-select .compact-select-option { overflow: hidden; text-overflow: ellipsis; }
.text-scale-control .native-compact-select,.locale-control .native-compact-select { vertical-align: middle; }
.text-scale-control .compact-select-trigger,.locale-control .compact-select-trigger { color: #777d82; font-size: 11px; }

.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field textarea,
.login-card .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  border-width: 0 0 1px;
  border-style: solid;
  border-color: #d8dcda;
  border-radius: 0;
  padding: 5px 2px;
  background-color: transparent;
  box-shadow: none;
  color: #555d61;
}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.field textarea:hover { border-bottom-color: #bec5c1; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.field textarea:focus,
.login-card .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus {
  border-color: #9eaaa3;
  outline: 0;
  box-shadow: 0 1px 0 rgba(80,86,90,.12);
}
.field input[type="search"]:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  padding-left: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='6' cy='6' r='3.75' stroke='%23868d89' stroke-width='1'/%3E%3Cpath d='M8.8 8.8L12 12' stroke='%23868d89' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 2px center;
  background-size: 14px 14px;
}
.field textarea { min-height: 72px; line-height: 1.5; }
.field input[type="file"] { border: 0; padding: 3px 0; background: transparent; color: #777d82; }
.field input[type="file"]::file-selector-button {
  margin-right: 9px;
  border: 0;
  border-bottom: 1px solid #cfd4d1;
  padding: 4px 2px;
  background: transparent;
  color: #62696d;
  cursor: pointer;
}
.field input::placeholder,.field textarea::placeholder { color: #a0a5a7; opacity: 1; }
.field input:focus::placeholder,.field textarea:focus::placeholder { color: #b5b9ba; }
input[type="checkbox"] { accent-color: #8a8f92; }
input[type="checkbox"]:focus-visible { outline: 0; box-shadow: none; }
label:has(input[type="checkbox"]) { cursor: pointer; }
label:has(input[type="checkbox"]):hover span,
label:has(input[type="checkbox"]):focus-within span { text-decoration: underline; text-decoration-color: #aeb4b1; text-underline-offset: 3px; }
label:has(input[type="checkbox"]):focus-within { outline: 0; box-shadow: none; }
html[dir="rtl"] .compact-select-menu { right: 0; left: auto; }
html[dir="rtl"] .compact-select-option { text-align: right; }
.high-contrast .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.high-contrast .field textarea { border-bottom-color: currentColor; }
.high-contrast input[type="checkbox"] { accent-color: currentColor; }

/* Полноширинный компактный редактор карточки человека. */
.person-editor-backdrop { align-items: start; padding: 8px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.person-editor-dialog { width: 100%; max-width: none; max-height: calc(100vh - 16px); padding: 12px 18px; color: #555d61; font-family: "Segoe UI",Arial,sans-serif; font-size: 12px; line-height: 18px; }
.person-editor-dialog h2 { margin-bottom: 4px; color: #50565a; font: 700 14px/21px "Segoe UI",Arial,sans-serif; }
.person-editor-dialog > .panel-subtitle { margin: 0 0 8px; color: #858b8e; font-size: 11px; line-height: 16px; font-weight: 400; }
.person-editor-dialog .form-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2px 16px; }
.person-editor-dialog .form-grid .wide { grid-column: span 2; }
.person-editor-dialog > .form-grid > .field:nth-child(7) { grid-column: auto; }
.person-editor-dialog .person-supplemental-fields .form-grid > .field:nth-child(9) { grid-column: auto; }
.person-editor-dialog .field { gap: 2px; margin-bottom: 5px; }
.person-editor-dialog .field label { color: #858b8e; font-size: 11px; line-height: 16px; font-weight: 400; }
.person-editor-dialog .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.person-editor-dialog .field textarea { padding-top: 3px; padding-bottom: 3px; color: #555d61; font-size: 12px; line-height: 18px; font-weight: 400; }
.person-editor-dialog .field textarea { min-height: 42px; line-height: 17px; }
.person-editor-dialog .compact-select-trigger,
.person-editor-dialog .compact-select-option,
.person-editor-dialog .field input[type="file"],
.person-editor-dialog .field input[type="file"]::file-selector-button,
.person-editor-dialog .button { font-family: "Segoe UI",Arial,sans-serif; font-size: 12px; line-height: 18px; font-weight: 400; }
.person-editor-dialog .person-relationship-fields,
.person-editor-dialog .person-symbol-fields,
.person-editor-dialog .person-supplemental-fields { margin-top: 6px; padding-top: 6px; }
.person-editor-dialog .person-relationship-section > .person-relationship-fields {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.person-symbol-entry + .person-symbol-entry { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.person-existing-symbols { margin: 3px 0 5px; color: var(--muted); font-size: 11px; line-height: 16px; }
.person-editor-dialog .person-editor-section-heading,
.person-editor-dialog .person-supplemental-fields summary { color: #50565a; font-size: 12px; line-height: 18px; font-weight: 600; }
.person-editor-dialog .person-editor-section-heading span,
.person-editor-dialog .person-supplemental-fields summary span { font-size: 11px; }
.person-editor-dialog .person-relationship-fields .form-grid,
.person-editor-dialog .person-supplemental-fields .form-grid { margin-top: 4px; }
.person-editor-dialog .checkbox-field { align-self: center; align-items: center; margin: 0; color: #62696d; font-size: 11px; line-height: 16px; font-weight: 400; }
.person-editor-dialog .dialog-actions .button.primary { font-weight: 600; }
.person-editor-dialog .checkbox-field input { width: 15px; height: 15px; margin: 0; }
.person-editor-dialog .dialog-actions { position: sticky; bottom: -12px; margin: 4px -18px -12px; padding: 8px 18px; border-top: 1px solid var(--line); background: var(--surface); }

@media (max-width: 900px) {
  .person-editor-dialog .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .person-editor-dialog > .form-grid > .field:nth-child(7),
  .person-editor-dialog .person-supplemental-fields .form-grid > .field:nth-child(9) { grid-column: span 2; }
}

@media (max-width: 560px) {
  .person-editor-backdrop { padding: 4px; }
  .person-editor-dialog { max-height: calc(100vh - 8px); padding: 10px 12px; }
  .person-editor-dialog .form-grid { grid-template-columns: 1fr; }
  .person-editor-dialog .form-grid .wide,
  .person-editor-dialog > .form-grid > .field:nth-child(7),
  .person-editor-dialog .person-supplemental-fields .form-grid > .field:nth-child(9) { grid-column: auto; }
  .person-editor-dialog .dialog-actions { bottom: -10px; margin-right: -12px; margin-bottom: -10px; margin-left: -12px; padding: 7px 12px; }
}

/* Компактный редактор карточки с автосохранением и историей. */
.person-editor-backdrop { padding: 12px; }
.person-editor-dialog { width: 100%; max-width: none; margin: 0; padding: 0; overflow: auto; border-color: #d9dcde; }
.person-editor-header { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 54px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); }
.person-editor-header h2 { margin: 0; }
.person-editor-header .panel-subtitle { margin: 0; }
.person-editor-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.person-autosave-status { color: var(--muted); font-size: 11px; white-space: nowrap; }
.person-autosave-status[data-state="saving"],.person-autosave-status[data-state="pending"] { color: #747a7e; }
.person-autosave-status[data-state="error"] { color: #9b5e55; }
.person-editor-sections { padding: 0 16px 12px; }
.person-editor-section { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); }
.person-editor-section > summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0; color: #50565a; cursor: pointer; list-style: none; }
.person-editor-section > summary::-webkit-details-marker { display: none; }
.person-editor-section > summary strong { font-size: 12px; line-height: 18px; }
.person-editor-section > summary span { color: var(--muted); font-size: 11px; font-weight: 400; }
.person-editor-section > summary:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.person-editor-section[open] > summary { margin-bottom: 5px; }
.person-editor-dialog .person-editor-section .form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px 18px; padding-bottom: 8px; }
.person-editor-dialog .person-core-grid .field:first-child,.person-editor-dialog .person-core-grid .field:last-child { grid-column: span 2; }
.person-relationship-entry { padding: 2px 0 7px; }
.person-relationship-entry + .person-relationship-entry { border-top: 1px solid var(--line); padding-top: 7px; }
.person-add-relationship,.person-symbol-fields > .button { margin-bottom: 8px; }
.person-existing-symbols { padding: 2px 0 6px; }
.person-history-note { margin: 0 0 5px; color: var(--muted); font-size: 11px; }
.person-history-list { padding-bottom: 8px; }
.person-history-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 32px; border-top: 1px solid #eef0f1; }
.person-history-row > div { display: flex; align-items: baseline; gap: 10px; }
.person-history-row span { color: var(--muted); font-size: 11px; }
.person-inline-saved { display: inline-block; margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.person-symbol-entry[data-autosaved="true"] { opacity: .72; }
.person-existing-records { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 16px; padding: 2px 0 7px; }
.person-existing-records > div { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: baseline; gap: 7px; min-width: 0; padding: 3px 0; border-bottom: 1px solid #eef0f1; }
.person-existing-records span,.person-existing-records small { color: var(--muted); font-size: 10px; }
.person-existing-records strong { overflow: hidden; font-size: 11px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.person-editor-dialog[data-person-editor-autosave] .dialog-actions { display: none; }

@media (max-width: 900px) {
  .person-editor-backdrop { padding: 8px; }
  .person-editor-dialog { max-height: calc(100vh - 16px); }
  .person-editor-dialog .person-editor-section .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .person-existing-records { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .person-editor-backdrop { padding: 0; }
  .person-editor-dialog { width: 100%; max-height: 100vh; border-radius: 0; }
  .person-editor-header { align-items: flex-start; gap: 8px; padding: 8px 12px; }
  .person-editor-header-actions { gap: 7px; }
  .person-autosave-status { position: absolute; top: 35px; right: 12px; }
  .person-editor-sections { padding: 0 12px 10px; }
  .person-editor-dialog .person-editor-section .form-grid { grid-template-columns: 1fr; }
  .person-editor-dialog .person-core-grid .field:first-child,.person-editor-dialog .person-core-grid .field:last-child { grid-column: auto; }
  .person-history-row > div { display: block; }
  .person-existing-records { grid-template-columns: 1fr; }
}

/* Финальные правила карточки: этот блок намеренно последним перекрывает старые варианты. */
.person-editor-backdrop { padding: 12px; overflow: hidden; background: rgba(238,240,239,.62); backdrop-filter: none; }
.person-editor-dialog { box-sizing: border-box; display: flex; flex-direction: column; width: min(calc(100vw - 24px),1740px); height: auto; max-width: 1740px; max-height: calc(100vh - 24px); margin-inline: auto; padding: 0; overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.45; }
.person-editor-header { min-height: 58px; padding: 8px clamp(16px,2vw,32px); }
.person-editor-origin { color: var(--muted); font-size: 11px; }
.person-editor-identity h2 { color: var(--ink); font-size: 16px; line-height: 22px; }
.person-editor-body { display: grid; flex: 0 1 auto; grid-template-columns: 156px minmax(0,1520px); justify-content: center; gap: 16px; min-height: 0; max-height: calc(100vh - 83px); overflow-y: auto; overflow-x: hidden; padding: 0 clamp(14px,2vw,32px) 18px; }
.person-editor-toc { position: sticky; top: 0; align-self: start; display: grid; gap: 1px; padding: 14px 0; }
.person-editor-toc > strong { margin-bottom: 5px; font-size: 12px; }
.person-editor-toc > button { padding: 3px 0; border: 0; background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
.person-editor-toc > button:hover,.person-editor-toc > button:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; outline: 0; }
.person-open-questions { display: grid; gap: 3px; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.person-open-questions strong { color: var(--ink); font-weight: 600; }
.person-editor-sections { min-width: 0; padding: 0; }
.person-editor-section { scroll-margin-top: 12px; }
.person-editor-section > summary { position: relative; min-height: 42px; }
.person-section-title { display: inline-flex; align-items: center; gap: 6px; }
.person-section-help { display: inline-grid; place-items: center; width: 17px; height: 17px; padding: 0; border: 1px solid #cfd3d4; border-radius: 50%; background: transparent; color: var(--muted); font: 11px/1 inherit; cursor: help; }
.person-section-help-popover { position: absolute; z-index: 20; top: 32px; left: 0; width: min(420px,calc(100vw - 48px)); padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; box-shadow: 0 8px 22px rgba(50,55,57,.10); color: var(--ink)!important; font-size: 12px!important; line-height: 1.45; }
.person-editor-dialog .person-editor-section .form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px 12px; }
.person-editor-dialog .field { min-width: 0; margin-bottom: 7px; }
.person-editor-dialog .field > label { color: #666d71; font-weight: 500; }
.person-editor-dialog input,.person-editor-dialog textarea,.person-editor-dialog select { box-sizing: border-box; max-width: 100%; padding-inline: 4px; border-bottom-color: #cfd3d5; }
.person-editor-dialog input:hover,.person-editor-dialog textarea:hover,.person-editor-dialog select:hover { border-bottom-color: #9fa6aa; }
.person-editor-dialog input:focus,.person-editor-dialog textarea:focus,.person-editor-dialog select:focus { border-bottom-color: #72797d; }
.person-editor-dialog[data-editor-mode="brief"] .person-detailed-only { display: none!important; }
.person-name-preview,.person-relationship-summary,.person-relationship-preview { color: var(--muted); font-size: 11px; }
.person-name-preview { display: grid; align-content: end; padding-bottom: 7px; }
.person-name-preview strong { color: var(--ink); font-size: 13px; font-weight: 500; }
.person-relationship-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.person-relationship-summary > div { display: flex; align-items: baseline; gap: 8px; }
.person-row-actions { display: flex; justify-content: flex-end; }
.person-history-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.person-inline-search { display: grid; flex: 1; gap: 2px; color: var(--muted); font-size: 11px; }
.person-inline-search input { width: 100%; }
.person-create-actions { position: static!important; z-index: 14; flex: 0 0 auto; margin: 0!important; }
.person-editor-dialog:not([data-person-editor-autosave]) .person-editor-body { height: auto; max-height: calc(100vh - 132px); }
.person-draft-note { margin-right: auto; color: var(--muted); font-size: 11px; }
@media (max-width: 900px) {
  .person-editor-body { grid-template-columns: 132px minmax(0,1fr); gap: 12px; padding-inline: 12px; }
  .person-editor-dialog .person-editor-section .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1400px) {
  .person-editor-dialog .person-editor-section .form-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .person-editor-backdrop { padding: 0; }
  .person-editor-dialog { width: 100%; height: 100vh; border-radius: 0; }
  .person-editor-body { display: block; flex: 1 1 auto; height: auto; max-height: none; padding-inline: 10px; }
  .person-editor-toc { position: static; display: flex; overflow-x: auto; gap: 10px; padding: 7px 0; white-space: nowrap; }
  .person-editor-toc > strong,.person-open-questions { display: none; }
  .person-editor-dialog .person-editor-section .form-grid { grid-template-columns: 1fr; }
  .person-editor-header { min-height: 72px; padding-inline: 10px; }
  .person-editor-header .panel-subtitle,.person-editor-origin { display: none; }
  .person-autosave-status { position: static; }
}

/* Выбранный раздел карточки — финальный слой интерфейса. */
.person-editor-toc > button.active { color: var(--ink); font-weight: 600; }
.person-editor-toc > button.active::before { content: "— "; color: #a5aaad; }
.person-open-questions > button { display: block; width: 100%; padding: 2px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.person-open-questions > button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.person-editor-section[hidden] { display: none!important; }
.person-editor-section { border-bottom: 0; }
.person-editor-section-header { display: flex; align-items: center; justify-content: space-between; min-height: 42px; margin-bottom: 8px; border-bottom: 1px solid var(--line); color: #50565a; }
.person-editor-section-header > span:last-child { color: var(--muted); font-size: 11px; }
.person-editor-section-header strong { font-size: 13px; }
.person-editor-sections { width: min(100%,1120px); }
.person-editor-dialog:not([data-person-editor-autosave]) .person-editor-sections { width: min(100%,920px); }
.person-editor-dialog:not([data-person-editor-autosave]) .person-editor-body { grid-template-columns: 146px minmax(0,920px); }
@media (min-width: 1700px) {
  .person-editor-body { grid-template-columns: 156px minmax(0,1120px); }
}

/* Узкая карточка и последовательный список полей имеют последний приоритет. */
.person-editor-dialog {
  width: min(calc(100vw - 24px),1040px);
  max-width: 1040px;
}
.person-editor-body,
.person-editor-dialog:not([data-person-editor-autosave]) .person-editor-body {
  grid-template-columns: 150px minmax(0,760px);
  justify-content: center;
}
.person-editor-sections,
.person-editor-dialog:not([data-person-editor-autosave]) .person-editor-sections { width: 100%; }
.person-editor-dialog .person-editor-section .form-grid,
.person-editor-dialog:not([data-person-editor-autosave]) .person-core-grid {
  grid-template-columns: minmax(0,1fr)!important;
  gap: 3px;
}
.person-editor-dialog .person-core-grid .field:first-child,
.person-editor-dialog .person-core-grid .field:last-child,
.person-editor-dialog .form-grid .wide { grid-column: auto!important; }
.person-editor-dialog .field { margin-bottom: 8px; }
.person-editor-dialog .person-name-preview { padding: 2px 0 8px; }
.person-editor-dialog .field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.person-editor-dialog .field > textarea,
.person-editor-dialog .field > .native-compact-select,
.person-editor-dialog .person-name-inputs > input {
  border: 0;
  border-bottom: 1px solid #cfd3d5;
  border-radius: 0;
  background: transparent;
}
.person-editor-dialog .field > .native-compact-select {
  width: min(100%,420px);
}
.person-editor-dialog .field > .native-compact-select .compact-select-trigger {
  width: 100%;
  justify-content: space-between;
}
.person-editor-dialog .field > input[type="date"] {
  width: min(220px,100%);
  justify-self: start;
}
.person-access-panel {
  grid-column: 2;
  width: min(100%,620px);
  margin-top: 5px;
  padding: 7px 0 2px;
  border-top: 1px solid var(--line);
}
.person-access-panel > p { margin: 0 0 6px; color: var(--muted); font-size: 11px; }
.person-access-members { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 14px; }
.person-access-member { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-weight: 400; }
.person-access-member input { margin-top: 3px; }
.person-access-member span { display: grid; min-width: 0; }
.person-access-member strong { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.person-access-member small { color: var(--muted); }
@media (max-width: 760px) {
  .person-editor-body,
  .person-editor-dialog:not([data-person-editor-autosave]) .person-editor-body { display: block; }
}

/* В каждой строке карточки подпись стоит слева от своего поля. */
.person-editor-dialog .form-grid > .field:not(.checkbox-field) {
  display: grid;
  grid-template-columns: 190px minmax(0,1fr);
  column-gap: 12px;
  align-items: start;
}
.person-editor-dialog .form-grid > .field:not(.checkbox-field) > label {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding-top: 3px;
}
.person-editor-dialog .form-grid > .field:not(.checkbox-field) > input,
.person-editor-dialog .form-grid > .field:not(.checkbox-field) > textarea,
.person-editor-dialog .form-grid > .field:not(.checkbox-field) > .native-compact-select {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.person-editor-dialog .form-grid > .field:not(.checkbox-field) > small,
.person-editor-dialog .form-grid > .field:not(.checkbox-field) > .field-hint {
  grid-column: 2;
}
.person-editor-dialog .person-structured-name > .person-name-inputs {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  min-width: 0;
}
.person-editor-dialog .person-structured-name > .person-name-inputs > input {
  width: 100%;
  min-width: 0;
}
@media (max-width: 620px) {
  .person-editor-dialog .form-grid > .field:not(.checkbox-field) {
    grid-template-columns: minmax(0,1fr);
  }
  .person-editor-dialog .form-grid > .field:not(.checkbox-field) > label,
  .person-editor-dialog .form-grid > .field:not(.checkbox-field) > input,
  .person-editor-dialog .form-grid > .field:not(.checkbox-field) > textarea,
  .person-editor-dialog .form-grid > .field:not(.checkbox-field) > .native-compact-select,
  .person-editor-dialog .form-grid > .field:not(.checkbox-field) > small,
  .person-editor-dialog .form-grid > .field:not(.checkbox-field) > .field-hint {
    grid-column: 1;
    grid-row: auto;
  }
  .person-editor-dialog .person-structured-name > .person-name-inputs {
    grid-column: 1;
    grid-row: auto;
    gap: 8px;
  }
  .person-access-panel { grid-column: 1; }
  .person-access-members { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 430px) {
  .person-editor-dialog .person-structured-name > .person-name-inputs {
    grid-template-columns: minmax(0,1fr);
  }
}

/* Модальное оформление редактора совпадает с карточкой просмотра. */
.person-editor-backdrop {
  background: rgba(47,53,50,.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.person-editor-dialog {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}
.person-editor-header { background: rgba(251,251,250,.97); }
.person-editor-body,
.person-editor-dialog .dialog-actions { background: var(--surface); }

/* Карточка просмотра человека: профиль, а не длинная анкета. */
.person-profile-dialog {
  display: flex;
  flex-direction: column;
  width: min(calc(100vw - 24px),1040px);
  height: min(720px,calc(100vh - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: hidden;
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
  color: #555d61;
}
.person-profile-header {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
}
.person-profile-avatar {
  appearance: none;
  display: grid;
  width: 72px;
  height: 72px;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-soft);
  color: #7c8480;
  cursor: pointer;
  font: 400 30px/1 "Segoe UI Symbol",sans-serif;
}
.person-profile-avatar:hover,.person-profile-avatar:focus-visible {
  border-color: #9da4a1;
  background: #f1f3f1;
  color: #606865;
  outline: 0;
}
.person-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.photo-editor-backdrop {
  box-sizing: border-box;
  z-index: 92;
  padding: clamp(6px,2vh,18px);
  overflow: hidden;
}
.photo-editor-dialog {
  display: flex;
  flex-direction: column;
  width: min(860px,100%);
  max-width: 860px;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #fbfcfa;
}
.photo-editor-header,.photo-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
}
.photo-editor-header { border-bottom: 1px solid var(--line); }
.photo-editor-header h2 { margin: 2px 0 3px; }
.photo-editor-header p,.photo-editor-footer { color: var(--muted); }
.photo-editor-layout {
  display: grid;
  grid-template-columns: minmax(280px,1fr) minmax(210px,250px);
  gap: 18px;
  min-height: 0;
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
}
.photo-editor-stage {
  position: relative;
  width: min(100%,520px);
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #eef0ed;
  cursor: grab;
  touch-action: none;
}
.photo-editor-stage:active { cursor: grabbing; }
#photo-editor-canvas { display: block; width: 100%; height: 100%; }
.photo-editor-guide {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(35,39,37,.18);
  pointer-events: none;
}
.photo-editor-tools { display: flex; flex-direction: column; gap: 18px; }
.photo-editor-tool { display: grid; gap: 8px; }
.photo-editor-tool p,.photo-editor-tool small { margin: 0; color: var(--muted); }
.photo-editor-tool input[type="range"] { width: 100%; accent-color: #8d9490; }
.photo-editor-actions,.photo-face-list { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-face-list .active { color: var(--text); border-bottom-color: currentColor; }
.photo-editor-output {
  display: grid;
  gap: 5px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.photo-editor-output strong { color: var(--text); }
.photo-editor-footer { border-top: 1px solid var(--line); }
.photo-editor-footer-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
}
.person-photo-ready {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.person-photo-ready img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.person-photo-ready div { display: grid; gap: 3px; }
.person-photo-ready span { color: var(--muted); }
.person-profile-photo-field .person-photo-error { display: block; margin-top: 5px; color: var(--danger); font-weight: 500; }
.person-profile-photo-field input[type="file"] {
  min-height: 36px;
  padding: 2px 0;
  cursor: pointer;
}
.person-profile-photo-field input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid #c9cecb;
  border-radius: 5px;
  background: var(--surface-soft);
  color: #555d61;
  font-weight: 600;
  cursor: pointer;
}
.person-profile-photo-field input[type="file"]:hover::file-selector-button {
  border-color: #9fa6a2;
  background: #eef0ee;
  color: #41494c;
}
.person-profile-photo-field input[type="file"]:focus-visible {
  outline: 1px solid #8f9692;
  outline-offset: 3px;
}
.person-profile-photo-upload {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(180px,260px);
  gap: 18px;
  align-items: end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.person-profile-photo-upload .field { margin: 0; }
.photo-compression-notice { margin-top: 7px !important; color: var(--ink) !important; font-weight: 600; }

@media (max-width: 760px) {
  .photo-editor-backdrop { padding: 6px; }
  .photo-editor-dialog { width: 100%; max-width: none; }
  .photo-editor-layout { grid-template-columns: 1fr; }
  .photo-editor-stage { width: min(100%,460px); }
  .photo-editor-header,.photo-editor-footer { align-items: flex-start; }
  .photo-editor-footer { flex-direction: column; }
  .photo-editor-footer-actions { align-self: flex-end; }
  .person-profile-photo-upload { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .photo-editor-backdrop { padding: 0; }
  .photo-editor-dialog { width: 100%; max-height: 100%; border-radius: 0; }
  .photo-editor-header,.photo-editor-footer { gap: 10px; padding: 12px; }
  .photo-editor-header { flex-wrap: wrap; }
  .photo-editor-layout { gap: 14px; padding: 12px; }
  .photo-editor-stage { width: min(100%,400px); }
  .photo-editor-tools { gap: 13px; }
}
@media (max-height: 760px) {
  .photo-editor-header,.photo-editor-footer { padding-block: 10px; }
  .photo-editor-header h2 { font-size: 20px; }
  .photo-editor-header p { margin-block: 4px; }
  .photo-editor-layout { padding-block: 12px; }
  .photo-editor-stage { width: min(100%,430px); }
}
.person-profile-identity { min-width: 0; }
.person-profile-identity h2 { margin: 0 0 3px; color: #4f565a; font: 600 20px/1.25 "Segoe UI",Arial,sans-serif; }
.person-profile-identity p { margin: 0 0 5px; color: #6f767a; }
.person-profile-identity > div { color: var(--muted); font-size: 11px; }
.person-profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 9px; }
.person-profile-actions .button { padding: 4px 2px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: #62696d; font-weight: 400; }
.person-profile-actions .button:hover,.person-profile-actions .button:focus-visible { border-bottom-color: #aeb4b1; background: transparent; color: #444b4f; outline: 0; }
.person-profile-tabs {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 11px 20px 0;
  border-bottom: 1px solid var(--line);
}
.person-profile-tabs button {
  margin: 0;
  padding: 0 0 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.person-profile-tabs button:hover,.person-profile-tabs button:focus-visible { color: #4f565a; text-decoration: underline; text-underline-offset: 3px; outline: 0; }
.person-profile-tabs button[aria-selected="true"] { border-bottom-color: #747b7e; color: #4f565a; font-weight: 600; text-decoration: none; }
.person-profile-tabs button.active,
.person-profile-tabs button[aria-current="page"] { border-bottom-color: #747b7e; color: #4f565a; font-weight: 600; text-decoration: none; }

/* У действий в заголовках карточек всегда только одна линия — нижняя граница кнопки. */
.person-profile-actions .button:hover,
.person-profile-actions .button:focus-visible,
.person-editor-header-actions .button:hover,
.person-editor-header-actions .button:focus-visible {
  text-decoration: none;
}
.person-profile-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 20px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.person-profile-content::-webkit-scrollbar { display: none; width: 0; height: 0; }
.person-profile-overview { display: grid; grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr); gap: 30px; }
.person-profile-section-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 7px; }
.person-profile-section-head h3 { margin: 0; color: #50575a; font: 600 13px/18px "Segoe UI",Arial,sans-serif; }
.person-profile-section-head > span { color: var(--muted); font-size: 11px; }
.person-profile-section-head > .person-profile-heading-with-note { display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; color: inherit; font-size: inherit; }
.person-profile-heading-with-note .heading-note-anchor { margin: 0; align-self: center; }
.person-profile-section-head .button { padding: 2px 0; }
.person-profile-facts { display: grid; }
.person-profile-facts > div { display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.person-profile-facts span { color: var(--muted); }
.person-profile-facts strong { color: #555d61; font-weight: 400; overflow-wrap: anywhere; }
.person-inline-value {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  cursor: text;
}
.person-inline-value:hover,
.person-inline-value:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.person-inline-value:focus-visible { outline: none; }
.person-profile-identity h2 .person-inline-value { font: inherit; font-weight: inherit; }
.person-profile-facts [data-person-inline-input],
.person-profile-identity [data-person-inline-input] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 1px 0 3px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  box-shadow: none;
}
.person-profile-facts textarea[data-person-inline-input] { min-height: 52px; resize: vertical; }
.person-profile-biography-row { align-items: start; }
.person-inline-hint,
.person-inline-status { color: var(--muted); font-size: 11px; font-weight: 400; }
.person-inline-status { white-space: nowrap; }
.person-profile-source-note { padding-top: 8px; color: var(--muted); font-size: 11px; }
.person-profile-family-list { display: grid; gap: 9px; padding-top: 3px; }
.person-profile-family-row { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; align-items: center; }
.person-profile-relative-sign { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: #7c8480; }
.person-profile-family-row strong,.person-profile-family-row span { display: block; }
.person-profile-family-row strong { color: #555d61; font-weight: 500; }
.person-profile-family-row div span { color: var(--muted); font-size: 11px; }
.person-profile-summary-rows { margin-top: 18px; border-top: 1px solid var(--line); }
.person-profile-summary-rows > button {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  width: 100%;
  gap: 12px;
  align-items: center;
  min-height: 39px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #555d61;
  text-align: left;
  cursor: pointer;
}
.person-profile-summary-rows > button:hover strong,.person-profile-summary-rows > button:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.person-profile-summary-rows > button:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 2px; }
.person-profile-summary-rows strong { font-weight: 500; }
.person-profile-summary-rows span { color: var(--muted); font-size: 11px; }
.person-profile-tab-section { min-height: 240px; }
.person-profile-records { display: grid; }
.person-profile-records > article { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.person-profile-records > article > div { display: grid; min-width: 0; gap: 2px; }
.person-profile-records > article strong { color: #555d61; font-weight: 500; overflow-wrap: anywhere; }
.person-profile-records > article span,.person-profile-records > article p { margin: 0; color: var(--muted); font-size: 11px; }
.person-profile-records > article > .status { display: inline-flex; }

/* Просмотр и редактирование используют одну и ту же карточку, меняется только содержимое раздела. */
.person-profile-edit-dialog { display: flex; width: min(calc(100vw - 24px),1040px); max-width: 1040px; }
.person-profile-edit-dialog .person-profile-edit-header { flex: 0 0 auto; background: var(--surface); }
.person-profile-edit-dialog .person-autosave-status { max-width: 230px; color: var(--muted); font-size: 11px; text-align: right; }
.person-profile-edit-dialog .person-editor-body {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  max-height: none;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.person-profile-edit-dialog .person-editor-toc.person-profile-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 8px 22px;
  padding: 11px 20px 0;
  background: rgba(251,251,250,.98);
}
.person-profile-edit-dialog .person-editor-toc > strong,
.person-profile-edit-dialog .person-open-questions { display: none; }
.person-profile-edit-dialog .person-editor-toc > button { padding: 0 0 9px; text-align: left; }
.person-profile-edit-dialog .person-editor-toc > button.active::before { content: none; }
.person-profile-edit-dialog .person-editor-sections { box-sizing: border-box; width: 100%; padding: 18px 20px 22px; }
.person-profile-edit-dialog .person-editor-section { margin: 0; padding: 0; border: 0; }
.person-profile-edit-dialog .person-editor-section-header { margin-bottom: 12px; }
.person-profile-create-dialog .person-profile-create-header { flex: 0 0 auto; background: var(--surface); }
.person-profile-create-dialog .person-editor-body.person-profile-content {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
}
.person-profile-create-dialog .person-editor-sections { padding-bottom: 12px; }
.person-profile-create-dialog .person-create-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 20px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.person-profile-create-dialog .person-draft-note { margin-right: auto; }

@media (max-width: 720px) {
  .person-profile-backdrop { padding: 6px; }
  .person-profile-dialog { width: 100%; height: calc(100vh - 12px); max-height: calc(100vh - 12px); }
  .person-profile-header { grid-template-columns: 58px minmax(0,1fr); padding: 14px; }
  .person-profile-avatar { width: 58px; height: 58px; }
  .person-profile-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .person-profile-tabs { gap: 8px 16px; padding-inline: 14px; }
  .person-profile-content { padding: 15px 14px 18px; }
  .person-profile-overview { grid-template-columns: 1fr; gap: 22px; }
  .person-profile-records > article { align-items: flex-start; flex-direction: column; gap: 6px; }
  .person-profile-edit-dialog { width: 100%; max-width: none; }
  .person-profile-edit-dialog .person-autosave-status { flex-basis: 100%; max-width: none; text-align: left; }
  .person-profile-edit-dialog .person-editor-toc.person-profile-tabs { position: static; gap: 8px 16px; padding-inline: 14px; }
  .person-profile-edit-dialog .person-editor-sections { padding: 15px 14px 18px; }
  .person-profile-create-dialog .person-create-actions { padding: 10px 14px 12px; }
}

/* Адаптивная оболочка единой карточки человека.
   Размер берётся из доступной области подложки, поэтому масштаб интерфейса
   и системные панели не создают горизонтальную прокрутку. */
.person-profile-backdrop {
  box-sizing: border-box;
  padding: clamp(6px,2vh,20px);
  overflow: hidden;
}
.person-profile-dialog,
.person-profile-edit-dialog {
  box-sizing: border-box;
  width: min(1040px,100%);
  max-width: 1040px;
  height: min(720px,100%);
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}
.person-profile-header > *,
.person-profile-tabs > *,
.person-profile-content > *,
.person-profile-edit-dialog .person-editor-body > * { min-width: 0; }
.person-profile-tabs { overflow: hidden; }
.person-profile-tabs button { max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .person-profile-header {
    grid-template-columns: 64px minmax(0,1fr);
    gap: 13px;
    padding: 15px 16px 13px;
  }
  .person-profile-avatar { width: 64px; height: 64px; }
  .person-profile-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .person-profile-tabs {
    gap: 7px 17px;
    padding: 10px 16px 0;
  }
  .person-profile-content { padding: 16px 16px 20px; }
  .person-profile-overview {
    grid-template-columns: minmax(0,1fr);
    gap: 20px;
  }
  .person-profile-photo-upload { grid-template-columns: minmax(0,1fr); }
  .person-profile-edit-dialog .person-editor-toc.person-profile-tabs {
    position: static;
    gap: 7px 17px;
    padding-inline: 16px;
  }
  .person-profile-edit-dialog .person-editor-sections { padding: 16px 16px 20px; }
}

@media (max-width: 560px) {
  .person-profile-backdrop { padding: 0; }
  .person-profile-dialog,
  .person-profile-edit-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .person-profile-header {
    grid-template-columns: 52px minmax(0,1fr);
    gap: 11px;
    padding: 11px 12px 9px;
  }
  .person-profile-avatar { width: 52px; height: 52px; font-size: 24px; }
  .person-profile-identity h2 { font-size: 17px; }
  .person-profile-actions { gap: 3px 8px; }
  .person-profile-tabs {
    gap: 6px 13px;
    padding: 9px 12px 0;
  }
  .person-profile-tabs button { padding-bottom: 7px; }
  .person-profile-content { padding: 13px 12px 16px; }
  .person-profile-section-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px 10px;
  }
  .person-profile-facts > div {
    grid-template-columns: minmax(82px,34%) minmax(0,1fr);
    gap: 9px;
    padding: 7px 0;
  }
  .person-profile-summary-rows > button { min-height: 36px; }
  .person-profile-edit-dialog .person-editor-toc.person-profile-tabs { padding-inline: 12px; }
  .person-profile-edit-dialog .person-editor-sections { padding: 13px 12px 16px; }
  .person-profile-create-dialog .person-create-actions {
    flex-wrap: wrap;
    padding: 8px 12px 10px;
  }
}

@media (max-height: 560px) {
  .person-profile-backdrop { padding-block: 4px; }
  .person-profile-dialog,
  .person-profile-edit-dialog { height: 100%; max-height: 100%; }
  .person-profile-header {
    grid-template-columns: 48px minmax(0,1fr) auto;
    gap: 10px;
    padding-block: 7px;
  }
  .person-profile-avatar { width: 48px; height: 48px; font-size: 22px; }
  .person-profile-tabs { padding-top: 7px; }
  .person-profile-tabs button { padding-bottom: 6px; }
  .person-profile-content { padding-block: 11px 13px; }
}
/* Единое точное центрирование знака пояснения во всём Геносе.
   Финальное правило защищает вид от локальных шрифтовых настроек разделов. */
.heading-note-button,
.person-section-help {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: center;
  vertical-align: middle;
}

.heading-note-button::before,
.person-section-help::before {
  content: "!";
  display: block;
  font: 700 11px/1 Arial, sans-serif;
  transform: translateY(-0.35px);
}