.hft{--ink:#203b35;--accent:#27594d;--muted:#64736d;--line:#dbe2db;--paper:#fafbf7;--cream:#f1f0e6;color:var(--ink);font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;max-width:1360px;margin:auto;padding:28px 12px;box-sizing:border-box}.hft *{box-sizing:border-box}.hft h2,.hft h3,.hft h4,.hft p{margin:0 0 14px}.hft h2{font:normal clamp(30px,4vw,44px)/1.14 Georgia,serif;color:var(--ink)}.hft h3{font:normal 23px/1.25 Georgia,serif;color:var(--ink)}.hft button,.hft input,.hft select{font:inherit;line-height:1.3}.hft button{cursor:pointer;min-height:44px;white-space:normal;transition:background .16s,border-color .16s}.hft button:focus-visible,.hft select:focus-visible,.hft input:focus-visible,.hft summary:focus-visible,.hft-viewport:focus-visible{outline:3px solid #be8f38;outline-offset:3px}.hft button:hover{filter:brightness(.97)}.hft-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:22px}.hft-eyebrow{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--accent)}.hft-sub,.hft-muted,.hft-help,.hft-footer{color:var(--muted)}.hft-lang{width:auto;border:1px solid var(--line);border-radius:8px;padding:10px;background:white;min-height:44px;color:var(--ink)}.hft-notice{border-left:3px solid #b89c59;background:#f6f2e6;padding:12px 16px;font-size:13px;border-radius:0 6px 6px 0}.hft-tools{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:24px 0 8px}.hft-search-wrap{flex:1;min-width:200px;position:relative}.hft-search-wrap label{display:block;font-weight:600;font-size:13px}.hft-search{display:block;width:100%;margin-top:6px;border:1px solid #9fc6da!important;border-radius:8px!important;min-height:48px;padding:12px 15px!important;background:#eef7fb!important;color:var(--ink)!important}.hft-outline,.hft-primary{padding:12px 18px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--accent);font-weight:600!important}.hft-primary{background:var(--accent);color:white;border-color:var(--accent)}.hft-text{border:0;background:transparent;color:var(--accent);padding:6px 3px;text-decoration:underline;text-underline-offset:4px}.hft-crumb{display:flex;align-items:center;gap:8px;font-size:13px;margin:8px 0 18px;flex-wrap:wrap}.hft-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px}.hft-chart-panel,.hft-side{border:1px solid var(--line);border-radius:14px;background:#fff;min-width:0;overflow:hidden}.hft-chart-heading{padding:20px 20px 8px;display:flex;justify-content:space-between;gap:10px;align-items:start;flex-wrap:wrap}.hft-chart-heading h3{margin:0}.hft-badge{font-size:11px;padding:4px 8px;border-radius:4px;background:var(--cream);color:#6e5b32}.hft-parents{font-size:13px;padding:0 20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.hft-chart-controls{display:flex;justify-content:flex-end;align-items:center;padding:6px 18px;gap:10px;font-size:13px}.hft-icon{background:#fff;border:1px solid var(--line);color:var(--accent);width:44px;border-radius:7px;font-size:22px!important}.hft-viewport{overflow:auto;max-width:100%;background-color:var(--paper);background-image:radial-gradient(#dce3da 1px,transparent 1px);background-size:20px 20px;border-block:1px solid var(--line);touch-action:pan-x pan-y;overscroll-behavior-x:contain;max-height:540px}.hft-spacer{position:relative;min-width:100%}.hft-scene{position:relative;transform-origin:top left}.hft-scene svg{position:absolute;left:0;top:0;pointer-events:none}.hft-scene path{fill:none;stroke:#9cae9c;stroke-width:2}.hft-node{position:absolute;width:125px;height:184px;background:#fff;border:1px solid #c6d3c7;border-radius:11px;box-shadow:0 3px 10px #203b3509;padding:10px 8px!important;display:flex;align-items:center;flex-direction:column;justify-content:center;color:var(--ink);gap:4px;overflow:hidden}.hft-node.is-selected{border:2px solid var(--accent);background:#edf4ed}.hft-node .hft-photo,.hft-node .hft-placeholder{width:50px;height:50px;min-width:50px;font-size:14px}.hft-name{display:block;font-size:13px;line-height:1.25;font-weight:650;overflow-wrap:anywhere}.hft-node .hft-name{max-height:65px;overflow:auto}.hft-dates{font-size:11px;color:var(--muted);display:block}.hft-photo{object-fit:cover;object-position:50% 25%;border-radius:50%;width:48px;height:48px;flex-shrink:0}.hft-placeholder{display:flex;align-items:center;justify-content:center;border-radius:50%;width:48px;height:48px;flex-shrink:0;background:#e4ebe1;color:#486253;font:normal 19px Georgia,serif}.hft-family-label{position:absolute;top:10px;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}.hft-chart-empty{position:absolute;font-size:12px;text-align:center;padding:0 12px;color:var(--muted)}.hft-help{font-size:12px;padding:14px 18px;margin:0!important}.hft-side{padding:24px;align-self:start}.hft-large{width:90px;height:90px;margin-bottom:18px;font-size:32px}.hft-side .hft-primary{width:100%;margin:8px 0 20px}.hft-excerpt{font-size:14px}.hft-life{color:var(--muted);font-size:14px}.hft-warning{font-size:12px;background:#f6f0df;border-radius:6px;padding:10px}.hft-sources{border-top:1px solid var(--line);padding-top:14px;font-size:12px}.hft summary{cursor:pointer;padding:8px 0;min-height:40px;font-weight:600}.hft dl{margin:8px 0}.hft dt{font-weight:650;margin-top:8px}.hft dd{margin:0;overflow-wrap:anywhere}.hft-footer{font-size:12px;margin-top:22px!important}.hft-results{position:absolute;top:100%;left:0;right:0;z-index:5;max-height:360px;overflow:auto;background:white;box-shadow:0 12px 30px #203b3529;border:1px solid var(--line);border-radius:8px;padding:10px}.hft-results[hidden]{display:none}.hft-result-count{font-size:12px;color:var(--muted);padding:4px}.hft-result{display:grid;grid-template-columns:42px 1fr;gap:3px 12px;text-align:left;border:0;background:white;width:100%;padding:10px;color:var(--ink);border-radius:6px}.hft-result:hover{background:#f1f5ee}.hft-result .hft-photo,.hft-result .hft-placeholder{grid-row:1/3;width:38px;height:38px}.hft-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.hft-profile-header{display:flex;gap:28px;align-items:center;padding:24px 0 32px;border-bottom:1px solid var(--line)}.hft-portrait{width:128px;height:156px;border-radius:10px;font-size:38px}.hft-profile-columns{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:40px;margin-top:30px}.hft-article>h3{margin-top:28px}.hft-article>h3:first-child{margin-top:0}.hft-prose{white-space:pre-wrap;font-size:15px;line-height:1.8;overflow-wrap:anywhere}.hft-biography{border:1px solid var(--line);border-radius:10px;padding:8px 20px;margin-bottom:24px;background:#fff}.hft-biography .hft-prose{max-height:600px;overflow:auto;padding-right:10px}.hft-family{background:#f4f6ef;border-radius:12px;padding:22px;align-self:start}.hft-family h3{margin-top:24px;font-size:20px}.hft-family h3:first-child{margin-top:0}.hft-relative{background:white;border:1px solid var(--line);border-radius:8px;display:grid;grid-template-columns:44px 1fr;text-align:left;padding:10px;margin:8px 0;width:100%;gap:3px 8px;color:var(--ink)}.hft-relative .hft-photo,.hft-relative .hft-placeholder{grid-row:1/3;width:40px;height:40px}.hft-conflicts{padding:18px;border:1px solid #dbc896;border-radius:10px;background:#fffbef;margin:24px 0}.hft-conflicts h4{font-size:13px;margin-top:10px}.hft-empty{padding:20px;background:#f5f6f2;border-radius:8px}.hft-error{padding:24px;border:1px solid #b94936;border-radius:8px}
@media(max-width:1000px){.hft-layout{grid-template-columns:minmax(0,1fr)}.hft-side{display:none}.hft-profile-columns{grid-template-columns:minmax(0,1fr) 230px;gap:24px}}
@media(max-width:600px){.hft{padding:20px 0}.hft-heading{gap:12px}.hft h2{font-size:30px}.hft-lang{font-size:13px;max-width:100px}.hft-sub{font-size:14px}.hft-tools{gap:8px}.hft-search-wrap{flex-basis:100%}.hft-outline{font-size:13px!important;padding:9px 12px}.hft-chart-heading{padding:16px}.hft-chart-heading h3{font-size:20px}.hft-profile-columns{display:flex;flex-direction:column}.hft-family{width:100%;order:-1}.hft-profile-header{gap:16px;align-items:start}.hft-portrait{width:80px;height:106px}.hft-profile-header h2{font-size:27px}.hft-biography{padding:8px 14px}.hft-notice{font-size:12px}.hft-node{touch-action:pan-x pan-y}.hft-heading .hft-eyebrow{font-size:10px}.hft-profile-header .hft-primary{font-size:13px}}
@media(prefers-reduced-motion:reduce){.hft *{transition:none!important;scroll-behavior:auto!important}}
.hft-scope{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink)}.hft-scope select{min-height:44px;max-width:230px;padding:8px;border:1px solid var(--line);border-radius:7px;background:white;color:var(--ink)}.hft-event{position:absolute;display:block;width:176px;text-align:center;padding:4px 7px;border:1px solid #ddcfa8;border-radius:7px;background:#fffaf0;color:#604d28;font-size:11px;line-height:1.3;z-index:1}.hft-generation{position:absolute;left:12px;color:var(--muted);font-size:12px;font-weight:700}.hft-family-entry{margin-bottom:20px}.hft-event-detail{font-size:13px;margin:5px 0!important;color:var(--ink)}.hft-family-entry .hft-muted{font-size:11px}.hft-gallery{margin:28px 0}.hft-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.hft-photo-thumb{padding:0!important;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;text-align:left;color:var(--ink)}.hft-photo-thumb img{display:block;width:100%;height:125px;object-fit:cover}.hft-photo-thumb span{display:block;padding:6px 8px;font-size:11px;overflow-wrap:anywhere}.hft-lightbox{border:0;border-radius:12px;max-width:min(94vw,900px);max-height:90vh;padding:12px 12px 4px;background:#fff;color:var(--ink);box-shadow:0 20px 70px #0005}.hft-lightbox::backdrop{background:#10221ccc}.hft-lightbox img{display:block;max-width:100%;max-height:75vh;object-fit:contain}.hft-lightbox p{font-size:13px;margin:8px 0!important}.hft-lightbox-close{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:27px!important;box-shadow:0 2px 12px #0003}
.hft-proposal-dialog{border:0;border-radius:12px;width:min(92vw,620px);max-height:90vh;padding:24px;background:#fff;color:var(--ink);box-shadow:0 20px 70px #0005}
.hft-person-proposal-dialog{width:min(94vw,820px)}
.hft-proposal-form textarea[name="biography"]{min-height:220px}.hft-proposal-dialog::backdrop{background:#10221ccc}.hft-proposal-form{display:grid;gap:12px}.hft-proposal-form label{display:grid;gap:4px;font-weight:600;font-size:13px}.hft-proposal-form input,.hft-proposal-form textarea,.hft-proposal-form select{width:100%;border:1px solid var(--line);border-radius:7px;min-height:44px;padding:8px;background:#fff;color:var(--ink)}.hft-proposal-form textarea{min-height:110px}.hft-proposal-actions{display:flex;justify-content:flex-end;gap:10px}.hft-proposal-status{font-size:13px;color:#963a2a}.hft-profile-header .hft-outline{margin:0 0 0 10px}
.hft-proposal-form [hidden]{display:none!important}.hft-date-input{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:8px}.hft-date-input input{min-width:0}.hft-calendar-picker{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:6px;align-items:stretch;min-width:0}.hft-calendar-picker input[type=date]{width:100%;min-width:0}.hft-calendar-picker input[type=date]::-webkit-calendar-picker-indicator{opacity:0;width:0;margin:0;padding:0}.hft-calendar-button{display:flex;align-items:center;justify-content:center;width:42px;min-width:42px;min-height:44px!important;padding:0!important;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--accent)}.hft-calendar-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hft-calendar-button svg path:nth-child(n+3){fill:currentColor;stroke:none}.hft-gallery-item{display:grid;align-content:start;gap:6px}.hft-photo-thumb{width:100%}.hft-photo-choice{min-height:36px!important;padding:5px 8px;border:1px solid var(--line);background:white;color:var(--accent);border-radius:6px;font-size:12px!important}.hft-photo-current{font-size:11px;font-weight:700;color:var(--accent)}@media(max-width:600px){.hft-date-input{grid-template-columns:1fr}.hft-calendar-picker{width:162px;grid-template-columns:minmax(0,1fr) 40px}.hft-calendar-button{width:40px;min-width:40px}.hft-new-person-dialog .hft-date-text::placeholder{font-size:11.5px}}
.hft-photo-remove{color:#8a4138;border-color:#dfc2bc}
.hft{--ink:#243449;--accent:var(--ast-global-color-0,#246c9e);--muted:#617184;--line:#d6e0e9;--paper:#f8fafc;--cream:#eaf2f9}
.hft button:focus-visible,.hft select:focus-visible,.hft input:focus-visible,.hft summary:focus-visible,.hft-viewport:focus-visible{outline-color:var(--accent)}
.hft-search{border-color:#9fc6da!important}
.hft-viewport{background-image:radial-gradient(#d9e3ec 1px,transparent 1px)}
.hft-scene path{stroke:#89a9c3;stroke-linecap:round;stroke-linejoin:round}
.hft-node{border-color:#c9d9e6;box-shadow:0 3px 10px #2434490a}
.hft-node.is-selected{background:#edf5fb}
.hft-placeholder{background:#e5eef7;color:#365b78}
.hft-results{box-shadow:0 12px 30px #24344929}
.hft-result:hover{background:#eef5fa}
.hft-family{background:#f0f5fa}
.hft-empty{background:#f5f8fb}
.hft-gallery-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.hft-gallery-header h3{margin:0}
.hft-photo-upload{display:grid;gap:14px;max-width:560px;padding:22px;border:1px solid var(--line);border-radius:12px;background:#fff}
.hft-photo-upload label{display:grid;gap:6px;font-size:13px;font-weight:600}
.hft-photo-upload input,.hft-photo-upload select{width:100%;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
.hft-photo-upload .hft-primary{justify-self:start}
.hft-viewport{cursor:grab}
.hft-viewport.is-dragging{cursor:grabbing;user-select:none}
.hft-viewport.is-dragging *{user-select:none}
.hft-viewport button{cursor:pointer}
.hft:fullscreen,.hft.is-expanded{display:flex;flex-direction:column;width:100vw;max-width:none;height:100vh;margin:0;padding:0;background:#fff;overflow:hidden}
.hft.is-expanded{position:fixed;inset:0;z-index:2147483647}
.hft:fullscreen> :not(.hft-layout),.hft.is-expanded> :not(.hft-layout){display:none}
.hft:fullscreen .hft-layout,.hft.is-expanded .hft-layout{display:block;flex:1 1 auto;min-height:0;margin:0}
.hft:fullscreen .hft-side,.hft.is-expanded .hft-side{display:none}
.hft:fullscreen .hft-chart-panel,.hft.is-expanded .hft-chart-panel{display:flex;flex-direction:column;height:100%;background:#fff;border:0;border-radius:0;overflow:hidden}
.hft:fullscreen .hft-viewport,.hft.is-expanded .hft-viewport{flex:1 1 auto;min-height:0;max-height:none}
.hft-contact{border-top:1px solid var(--line);padding-top:20px;margin:28px 0}
.hft-contact a{color:var(--accent);overflow-wrap:anywhere}
.hft-component-label{position:absolute;left:20px;font-size:15px;font-weight:700;color:var(--accent);white-space:nowrap}
.hft .hft-viewport,.hft .hft-viewport .hft-node{touch-action:none}
.hft .hft-viewport{-webkit-user-select:none;user-select:none}
.hft-chart-controls{flex-wrap:wrap}
.hft-form-group{border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin:16px 0}
.hft-form-group legend{font-weight:700;padding:0 6px}
.hft-form-group label{display:block;margin:10px 0}
.hft-form-group textarea{min-height:70px}
.hft-register-fields{display:grid;grid-template-columns:minmax(110px,190px) minmax(0,1fr);gap:8px 14px;margin:0 0 18px;align-items:start}
.hft .hft-register-fields dt{font-weight:700;margin:0;line-height:1.8}
.hft .hft-register-fields dd{margin:0;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.hft-register-legacy{margin:14px 0;color:var(--muted)}
.hft .hft-register-unstructured{display:block;color:#6b4b00;background:#fff3c4;border-left:4px solid #d49b11;border-radius:4px;padding:10px 12px;margin:12px 0;font-weight:700}
@media(max-width:600px){.hft-register-fields{grid-template-columns:1fr;gap:2px}.hft-register-fields dd{margin-bottom:12px}}

.hft button.hft-register-edit-link{width:100%;text-align:left;border-top:0;border-right:0;border-bottom:0;cursor:pointer}
.hft button.hft-register-edit-link:hover{text-decoration:underline;text-underline-offset:3px}
.hft-proposal-form input[readonly]{background:#fdecec;color:var(--muted);cursor:default}.hft-proposal-form input[type=date]:disabled{background:#fdecec;color:var(--muted);opacity:1;cursor:default;-webkit-text-fill-color:var(--muted)}.hft-calendar-button.is-disabled{background:#fdecec;color:var(--muted);border-color:var(--line);opacity:1;cursor:default}

.hft-linked-register-help{margin:6px 0 16px!important;padding:11px 13px;border-left:4px solid #d58b8b;border-radius:5px;background:#fdecec;color:var(--ink);font-weight:700;line-height:1.5}

/* 0.4.39: tighten the unused space above the family-tree UI. */
.hft{padding-top:10px}
.hft>.hft-tools:first-child{margin-top:6px}

/* Keep the profile update stamp directly below the global tree footer. */
.hft>.hft-footer{margin-bottom:2px!important}
.hft>.hft-last-update{font-size:12px;margin:0!important;color:var(--muted)}
@media(max-width:600px){.hft{padding-top:8px}.hft>.hft-tools:first-child{margin-top:4px}}


/* 0.4.43: consistent bottom actions on the photo editor. */
.hft-photo-editor-actions{margin-top:18px;max-width:560px}

/* 0.4.44: make the custom calendar icon behave as a label for the native date field on touch devices. */
.hft-calendar-button{cursor:pointer;user-select:none;-webkit-user-select:none}
.hft-calendar-button.is-disabled{pointer-events:none}

/* 0.4.45: keep the custom calendar control aligned with its date input on desktop/tablet.
   The fieldset label rule otherwise adds margin and overrides flex centering. */
.hft-form-group label.hft-calendar-button{display:flex;margin:0!important;align-items:center;justify-content:center;align-self:stretch;height:44px}


/* 0.4.46 tree view simplification and direct-lineage highlighting */
.hft-chart-heading.is-controls-only{justify-content:flex-end}
.hft-node.is-direct-lineage{background:#eaf5fb;border-color:#9fc6da}
.hft-node.is-direct-lineage.is-selected{background:#dceefa;border-color:var(--accent)}

/* 0.4.47: keep person search available in fullscreen tree view. */
.hft-fullscreen-search{display:none}
.hft:fullscreen .hft-chart-heading.is-controls-only,.hft.is-expanded .hft-chart-heading.is-controls-only{justify-content:space-between;align-items:end;gap:14px;padding:12px 18px 6px}
.hft:fullscreen .hft-fullscreen-search,.hft.is-expanded .hft-fullscreen-search{display:block;flex:1 1 360px;max-width:520px;margin:0}
.hft:fullscreen .hft-fullscreen-search .hft-search,.hft.is-expanded .hft-fullscreen-search .hft-search{min-height:44px}
@media(max-width:600px){
  .hft:fullscreen .hft-chart-heading.is-controls-only,.hft.is-expanded .hft-chart-heading.is-controls-only{padding:8px;gap:8px}
  .hft:fullscreen .hft-fullscreen-search,.hft.is-expanded .hft-fullscreen-search{flex-basis:100%;max-width:none}
}

/* 0.4.53: clearer ancestry path, stable family colours and interactive family-line highlighting. */
.hft-scene .hft-family-line{
  stroke:var(--hft-family-color,#89a9c3);
  stroke-width:1.8;
  opacity:.78;
  vector-effect:non-scaling-stroke;
  transition:stroke-width .14s ease,opacity .14s ease,stroke .14s ease;
  pointer-events:stroke;
}
.hft-scene .hft-family-line.is-focus-family{stroke-width:2.5;opacity:.96}
.hft-scene .hft-family-line.is-ancestor-path{stroke:#2f6590;stroke-width:3.25;opacity:1}
.hft-scene .hft-family-line.is-family-highlighted{stroke-width:3.6;opacity:1}
.hft-scene .hft-family-line.is-ancestor-path.is-family-highlighted{stroke:#24567e;stroke-width:4}
.hft-scene.has-family-highlight .hft-family-line:not(.is-family-highlighted):not(.is-ancestor-path){opacity:.18}
.hft-scene.has-family-highlight .hft-family-line.is-ancestor-path:not(.is-family-highlighted){opacity:.72}
.hft-event.hft-family-marker{
  border-color:var(--hft-family-color,#ddcfa8);
  cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease,opacity .14s ease,background .14s ease;
}
.hft-event.hft-family-marker.is-focus-family{border-width:2px}
.hft-event.hft-family-marker.is-ancestor-path{border-color:#2f6590;border-width:2px}
.hft-event.hft-family-marker.is-family-highlighted{border-width:2px;box-shadow:0 0 0 2px rgba(47,101,144,.18);background:#fffdf8}
.hft-scene.has-family-highlight .hft-event.hft-family-marker:not(.is-family-highlighted):not(.is-ancestor-path){opacity:.42}
.hft-event.hft-family-marker:focus-visible{outline:3px solid var(--accent);outline-offset:3px}


/* 0.4.54: keep direct-lineage names readable on hover and make family connectors easy to click. */
.hft button.hft-node:hover,
.hft button.hft-node:focus-visible{
  color:var(--ink)!important;
}
.hft button.hft-node:hover .hft-name,
.hft button.hft-node:focus-visible .hft-name,
.hft button.hft-node.is-direct-lineage:hover .hft-name,
.hft button.hft-node.is-direct-lineage:focus-visible .hft-name{
  color:var(--ink)!important;
}
.hft button.hft-node.is-direct-lineage:hover{
  background:#e4f2fa;
}
.hft-scene .hft-family-line{
  pointer-events:none;
}
.hft-scene .hft-family-line-hit{
  fill:none;
  stroke:transparent;
  stroke-width:14;
  opacity:0;
  pointer-events:stroke;
  cursor:pointer;
  vector-effect:non-scaling-stroke;
}
@media (pointer:coarse){
  .hft-scene .hft-family-line-hit{stroke-width:18}
}


/* 0.4.55: keep ordinary (non-direct-lineage) person cards readable when focused/selected.
   Astra/theme button focus/active rules can otherwise paint the white card dark blue while
   leaving its text dark. The tree owns both background and foreground states explicitly. */
.hft button.hft-node:not(.is-direct-lineage):hover,
.hft button.hft-node:not(.is-direct-lineage):focus,
.hft button.hft-node:not(.is-direct-lineage):focus-visible,
.hft button.hft-node:not(.is-direct-lineage):active{
  background:#f5f9fc!important;
  color:var(--ink)!important;
}
.hft button.hft-node:not(.is-direct-lineage).is-selected,
.hft button.hft-node:not(.is-direct-lineage).is-selected:hover,
.hft button.hft-node:not(.is-direct-lineage).is-selected:focus,
.hft button.hft-node:not(.is-direct-lineage).is-selected:focus-visible,
.hft button.hft-node:not(.is-direct-lineage).is-selected:active{
  background:#edf5fb!important;
  color:var(--ink)!important;
  border-color:var(--accent)!important;
}
.hft button.hft-node:not(.is-direct-lineage):hover .hft-name,
.hft button.hft-node:not(.is-direct-lineage):focus .hft-name,
.hft button.hft-node:not(.is-direct-lineage):focus-visible .hft-name,
.hft button.hft-node:not(.is-direct-lineage):active .hft-name,
.hft button.hft-node:not(.is-direct-lineage).is-selected .hft-name{
  color:var(--ink)!important;
}
.hft button.hft-node:not(.is-direct-lineage):hover .hft-dates,
.hft button.hft-node:not(.is-direct-lineage):focus .hft-dates,
.hft button.hft-node:not(.is-direct-lineage):focus-visible .hft-dates,
.hft button.hft-node:not(.is-direct-lineage):active .hft-dates,
.hft button.hft-node:not(.is-direct-lineage).is-selected .hft-dates{
  color:var(--muted)!important;
}

/* 0.4.58: temporary partner-family branch exploration. */
.hft-branch-switch{
  position:absolute;
  z-index:6;
  width:36px;
  height:36px;
  min-height:36px!important;
  padding:6px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #8fb9d2;
  border-radius:50%;
  background:#fff!important;
  color:#2f6590!important;
  box-shadow:0 2px 7px rgba(32,59,53,.14);
}
.hft-branch-switch:hover,.hft-branch-switch:focus-visible{background:#eaf5fb!important;color:#24567e!important;filter:none}
.hft-branch-switch svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hft-branch-switch svg circle{fill:#fff;stroke:currentColor}
.hft-branch-mode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-right:auto}
.hft-branch-mode-label{font-size:12px;font-weight:700;color:#2f6590;background:#eaf5fb;border:1px solid #b8d7e7;border-radius:999px;padding:7px 10px}
.hft-branch-return{min-height:38px!important;padding:8px 11px!important;font-size:12px!important}
.hft-chart-heading.is-controls-only.has-branch-mode{justify-content:space-between}
@media(pointer:coarse){.hft-branch-switch{width:44px;height:44px;min-height:44px!important;padding:9px!important}}
@media(max-width:600px){.hft-branch-mode{flex-basis:100%;gap:7px}.hft-branch-mode-label{font-size:11px}.hft-branch-return{min-height:36px!important}}

/* 0.4.60: slightly narrower portrait cards and larger portraits use card space more efficiently. */
.hft-node{padding:10px 7px!important}
.hft-node .hft-name{font-size:12.5px;line-height:1.28}


/* 0.4.61: larger portraits and centered compact trees. */
.hft-viewport{min-height:min(500px,62vh)}
.hft-node .hft-photo,.hft-node .hft-placeholder{width:50px;height:50px;min-width:50px}
.hft:fullscreen .hft-viewport,.hft.is-expanded .hft-viewport{min-height:0}


/* 0.4.62: delayed, unobtrusive tree tooltips. Hover highlighting remains independent. */
.hft-tree-tooltip{
  position:fixed;
  z-index:2147483000;
  max-width:min(300px,calc(100vw - 20px));
  padding:7px 10px;
  border:1px solid #b7c9d7;
  border-radius:7px;
  background:#17344a;
  color:#fff;
  box-shadow:0 5px 16px rgba(20,42,57,.2);
  font-size:12px;
  line-height:1.35;
  font-weight:500;
  text-align:left;
  pointer-events:none;
}
.hft-tree-tooltip[hidden]{display:none!important}
@media (hover:none),(pointer:coarse){.hft-tree-tooltip{display:none!important}}


/* 0.4.64: larger tree portraits and long-press tooltips on touch devices. */
.hft-node .hft-photo,.hft-node .hft-placeholder{width:60px;height:60px;min-width:60px}
@media (hover:none),(pointer:coarse){
  .hft-tree-tooltip:not([hidden]){display:block!important}
  .hft-node,.hft-branch-switch,.hft-main-family-return,.hft-event,.hft-family-line-hit{-webkit-touch-callout:none}
}


/* 0.4.65: narrower tree cards and larger portraits. */
.hft-node .hft-photo,.hft-node .hft-placeholder{width:70px;height:70px;min-width:70px}


/* 0.4.66: taller person cards and more robust Android long-press tooltips. */
.hft-node{height:184px}
@media (hover:none),(pointer:coarse){
  .hft-node,.hft-branch-switch,.hft-main-family-return,.hft-event,.hft-family-line-hit{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
  }
  .hft-node img{
    -webkit-user-drag:none;
    user-select:none;
  }
}


/* 0.4.67: keep touch tooltips visible in native/fallback fullscreen and move lineage help to a small legend. */
.hft-lineage-legend{
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 18px 7px;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.3;
}
.hft-lineage-swatch{
  display:inline-block;
  width:16px;
  height:11px;
  flex:0 0 auto;
  border:1px solid #9fc6da;
  border-radius:3px;
  background:#dceefa;
}
.hft:fullscreen > .hft-tree-tooltip:not([hidden]),
.hft.is-expanded > .hft-tree-tooltip:not([hidden]){
  display:block!important;
  position:fixed!important;
  z-index:2147483647!important;
}
@media(max-width:600px){
  .hft-lineage-legend{padding:0 10px 6px;font-size:11px}
}


/* 0.4.68: slightly wider person cards and stronger Android callout suppression for non-person tree tooltips. */
@media (hover:none),(pointer:coarse){
  .hft-branch-switch,.hft-main-family-return,.hft-event,.hft-family-line-hit,.hft-chart-controls button{
    -webkit-touch-callout:none!important;
    -webkit-user-select:none!important;
    user-select:none!important;
  }
}

/* 0.4.69: safer one-step administrator removal from the person profile. */
.hft-admin-disconnected{
  max-width:620px;
  margin:10px 0 2px!important;
  padding:9px 11px;
  border:1px solid #d9c58f;
  border-radius:7px;
  background:#fff8e7;
  color:#6d5722;
  font-size:12.5px;
  line-height:1.4;
  font-weight:650;
}
.hft-admin-remove-button{
  margin-left:10px!important;
  border-color:#c98f88!important;
  color:#8c3026!important;
  background:#fff8f7!important;
}
.hft-admin-remove-button:hover,.hft-admin-remove-button:focus-visible{
  background:#fcebea!important;
  border-color:#b55e55!important;
  filter:none!important;
}
.hft-admin-remove-dialog{max-width:min(640px,calc(100vw - 28px))}
.hft-admin-removal-warning{
  padding:10px 12px;
  border-left:3px solid #b55e55;
  border-radius:0 6px 6px 0;
  background:#fff5f3;
  color:#63312d;
  font-size:13px;
}
.hft-admin-removal-summary{
  display:grid;
  grid-template-columns:minmax(125px,auto) minmax(0,1fr);
  gap:7px 14px;
  margin:2px 0 6px!important;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fafbf8;
  font-size:13px;
}
.hft-admin-removal-summary dt{margin:0!important;font-weight:700}
.hft-admin-removal-summary dd{margin:0!important;overflow-wrap:anywhere}
.hft-admin-removal-blocker{margin:0!important}
.hft-danger{
  min-height:44px;
  padding:10px 16px;
  border:1px solid #a94236;
  border-radius:8px;
  background:#a94236;
  color:#fff;
  font:inherit;
  font-weight:700;
}
.hft-danger:hover,.hft-danger:focus-visible{background:#8e342a;border-color:#8e342a;filter:none}
.hft-danger:disabled{opacity:.5;cursor:not-allowed}
.hft-admin-removed-notice{margin-bottom:12px!important;border-left-color:#5f8e6e;background:#eef7ef}
@media(max-width:600px){
  .hft-admin-remove-button{margin:8px 0 0!important}
  .hft-admin-removal-summary{grid-template-columns:1fr;gap:2px;padding:10px}
  .hft-admin-removal-summary dd{margin-bottom:7px!important}
}


/* 0.4.70: compact fullscreen toolbar and overlay legend.
   Desktop uses one compact row; tablets use two compact rows. The toolbar floats over
   the chart so the tree can use the full screen height instead of reserving a large header. */
.hft-tree-toolbar{display:contents}
.hft:fullscreen .hft-chart-panel,.hft.is-expanded .hft-chart-panel{position:relative}
.hft:fullscreen .hft-tree-toolbar,.hft.is-expanded .hft-tree-toolbar{
  display:flex;
  position:absolute;
  z-index:40;
  top:8px;
  left:10px;
  right:10px;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border:1px solid rgba(173,193,209,.78);
  border-radius:10px;
  background:rgba(255,255,255,.94);
  box-shadow:0 5px 18px rgba(36,52,73,.12);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.hft:fullscreen .hft-chart-heading.is-controls-only,.hft.is-expanded .hft-chart-heading.is-controls-only{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:10px;
  padding:0;
}
.hft:fullscreen .hft-fullscreen-search,.hft.is-expanded .hft-fullscreen-search{
  display:block;
  flex:1 1 330px;
  min-width:220px;
  max-width:500px;
  margin:0;
}
.hft:fullscreen .hft-fullscreen-search label,.hft.is-expanded .hft-fullscreen-search label{
  font-size:0;
  line-height:0;
}
.hft:fullscreen .hft-fullscreen-search .hft-search,.hft.is-expanded .hft-fullscreen-search .hft-search{
  min-height:40px;
  margin-top:0;
  padding:9px 12px!important;
  font-size:13px;
  line-height:1.3;
}
.hft:fullscreen .hft-scope,.hft.is-expanded .hft-scope{flex:0 0 auto;gap:6px;font-size:12px;white-space:nowrap}
.hft:fullscreen .hft-scope select,.hft.is-expanded .hft-scope select{min-height:40px;padding:6px 9px;max-width:225px;font-size:12px}
.hft:fullscreen .hft-chart-controls,.hft.is-expanded .hft-chart-controls{
  flex:0 0 auto;
  padding:0;
  gap:8px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.hft:fullscreen .hft-chart-controls button,.hft.is-expanded .hft-chart-controls button{min-height:40px;padding:5px 4px;font-size:12px}
.hft:fullscreen .hft-chart-controls output,.hft.is-expanded .hft-chart-controls output{font-size:12px;min-width:38px;text-align:right}
.hft:fullscreen .hft-lineage-legend,.hft.is-expanded .hft-lineage-legend{
  position:absolute;
  z-index:32;
  left:12px;
  bottom:12px;
  margin:0;
  padding:7px 10px;
  border:1px solid rgba(173,193,209,.8);
  border-radius:8px;
  background:rgba(255,255,255,.92);
  box-shadow:0 3px 12px rgba(36,52,73,.1);
  pointer-events:none;
}
.hft:fullscreen .hft-results,.hft.is-expanded .hft-results{z-index:70}
@media (max-width:1100px) and (min-width:601px){
  .hft:fullscreen .hft-tree-toolbar,.hft.is-expanded .hft-tree-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"head head" "blank controls";
    gap:5px 10px;
    padding:7px 9px;
  }
  .hft:fullscreen .hft-chart-heading.is-controls-only,.hft.is-expanded .hft-chart-heading.is-controls-only{grid-area:head}
  .hft:fullscreen .hft-chart-controls,.hft.is-expanded .hft-chart-controls{grid-area:controls;justify-content:flex-end}
  .hft:fullscreen .hft-fullscreen-search,.hft.is-expanded .hft-fullscreen-search{max-width:none}
}
@media(max-width:600px){
  .hft:fullscreen .hft-tree-toolbar,.hft.is-expanded .hft-tree-toolbar{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    z-index:40;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    margin:0;
    padding:7px 8px;
    border-width:0 0 1px;
    border-radius:0;
    box-shadow:none;
    background:#fff;
  }
  .hft:fullscreen .hft-chart-heading.is-controls-only,.hft.is-expanded .hft-chart-heading.is-controls-only{width:100%;gap:7px;flex-wrap:wrap}
  .hft:fullscreen .hft-fullscreen-search,.hft.is-expanded .hft-fullscreen-search{flex:1 1 100%;min-width:0;max-width:none}
  .hft:fullscreen .hft-scope,.hft.is-expanded .hft-scope{margin-left:auto}
  .hft:fullscreen .hft-chart-controls,.hft.is-expanded .hft-chart-controls{width:100%;justify-content:flex-end;gap:6px;overflow-x:auto}
  .hft:fullscreen .hft-lineage-legend,.hft.is-expanded .hft-lineage-legend{left:8px;bottom:8px;max-width:calc(100% - 16px);font-size:10.5px}
}

/* 0.4.71: move persistent tree instructions behind a compact help tooltip icon. */
.hft .hft-tree-help-button{
  width:44px;
  min-width:44px;
  height:36px;
  min-height:36px;
  padding:0!important;
  border:1px solid #9ebdd0;
  border-radius:8px;
  background:#eef6fb;
  color:#244e6b;
  font-size:18px!important;
  line-height:1;
  font-weight:800!important;
  text-decoration:none;
  flex:0 0 44px;
  box-shadow:0 1px 4px rgba(36,78,107,.08);
}
.hft .hft-tree-help-button:hover,.hft .hft-tree-help-button:focus-visible{
  background:#deedf6;
  border-color:#78a7c4;
  filter:none;
}

/* 0.4.72: make the help control easy to find in fullscreen.
   It sits at the far left of the floating toolbar while the search/view controls keep their layout. */
@media (min-width:601px){
  .hft:fullscreen .hft-tree-toolbar,.hft.is-expanded .hft-tree-toolbar{
    padding-left:64px;
  }
  .hft:fullscreen .hft-tree-help-button,.hft.is-expanded .hft-tree-help-button{
    position:absolute;
    left:9px;
    top:7px;
    z-index:3;
    width:46px;
    min-width:46px;
    height:40px;
    min-height:40px;
    padding:0!important;
    border-radius:9px;
    font-size:19px!important;
  }
}
@media (max-width:600px){
  .hft:fullscreen .hft-chart-controls .hft-tree-help-button,.hft.is-expanded .hft-chart-controls .hft-tree-help-button{
    order:-10;
    margin-right:auto;
    width:46px;
    min-width:46px;
    height:38px;
    min-height:38px;
    padding:0!important;
    border-radius:9px;
  }
}


/* 0.4.73: compact the normal (non-fullscreen) tree layout.
   Keep the primary page actions above the chart, but move tree-specific controls into
   one slim toolbar, float the lineage legend over the chart, and give more width to the tree. */
.hft:not(:fullscreen):not(.is-expanded) .hft-tools{
  margin:16px 0 7px;
  gap:10px;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-layout{
  grid-template-columns:minmax(0,1fr) 240px;
  gap:16px;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-chart-panel{
  position:relative;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-tree-toolbar{
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:52px;
  padding:7px 10px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.97);
}
.hft:not(:fullscreen):not(.is-expanded) .hft-chart-heading.is-controls-only{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 1 auto;
  min-width:0;
  gap:8px;
  padding:0;
  flex-wrap:wrap;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-fullscreen-search{
  display:none!important;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-scope{
  gap:6px;
  font-size:12px;
  white-space:nowrap;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-scope select{
  min-height:38px;
  max-width:215px;
  padding:6px 8px;
  font-size:12px;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-chart-heading>.hft-text{
  min-height:38px;
  padding:5px 4px;
  font-size:12px;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-chart-controls{
  flex:0 1 auto;
  justify-content:flex-start;
  padding:0;
  gap:7px;
  white-space:nowrap;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-chart-controls .hft-text{
  min-height:36px;
  padding:4px 3px;
  font-size:12px;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-chart-controls output{
  min-width:36px;
  font-size:12px;
  text-align:center;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-tree-help-button{
  width:40px;
  min-width:40px;
  height:36px;
  min-height:36px;
  flex-basis:40px;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-lineage-legend{
  position:absolute;
  z-index:24;
  left:10px;
  bottom:10px;
  margin:0;
  padding:6px 9px;
  max-width:calc(100% - 20px);
  border:1px solid rgba(173,193,209,.8);
  border-radius:8px;
  background:rgba(255,255,255,.92);
  box-shadow:0 3px 12px rgba(36,52,73,.09);
  pointer-events:none;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-side{
  padding:20px;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-side .hft-primary{
  min-height:38px;
  margin:6px 0 16px;
  padding:9px 12px;
  font-size:13px;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-side h3{
  font-size:21px;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-side .hft-excerpt{
  font-size:13px;
}
@media(max-width:1120px) and (min-width:1001px){
  .hft:not(:fullscreen):not(.is-expanded) .hft-layout{grid-template-columns:minmax(0,1fr) 225px;gap:14px}
  .hft:not(:fullscreen):not(.is-expanded) .hft-tree-toolbar{gap:7px;padding-inline:8px}
  .hft:not(:fullscreen):not(.is-expanded) .hft-chart-controls{gap:5px}
  .hft:not(:fullscreen):not(.is-expanded) .hft-chart-controls .hft-text{font-size:11.5px}
  .hft:not(:fullscreen):not(.is-expanded) .hft-scope select{max-width:190px}
}
@media(max-width:1000px){
  .hft:not(:fullscreen):not(.is-expanded) .hft-layout{grid-template-columns:minmax(0,1fr);gap:0}
}
@media(max-width:760px){
  .hft:not(:fullscreen):not(.is-expanded) .hft-tree-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:5px;
    padding:7px 8px;
  }
  .hft:not(:fullscreen):not(.is-expanded) .hft-chart-heading.is-controls-only{justify-content:space-between;width:100%}
  .hft:not(:fullscreen):not(.is-expanded) .hft-chart-controls{width:100%;overflow-x:auto;justify-content:flex-start}
  .hft:not(:fullscreen):not(.is-expanded) .hft-lineage-legend{left:8px;bottom:8px;font-size:10.5px}
}


/* 0.4.74: make the Full screen action visually prominent in both normal and fullscreen toolbars. */
.hft .hft-fullscreen-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:7px 13px!important;
  border:1px solid var(--accent)!important;
  border-radius:8px;
  background:var(--accent)!important;
  color:#fff!important;
  font-weight:700!important;
  text-decoration:none!important;
  box-shadow:0 2px 7px rgba(39,89,77,.22);
}
.hft .hft-fullscreen-button::before{
  content:"⛶";
  display:inline-block;
  font-size:17px;
  line-height:1;
  font-weight:400;
}
.hft .hft-fullscreen-button:hover,.hft .hft-fullscreen-button:focus-visible{
  background:#1f4b40!important;
  border-color:#1f4b40!important;
  color:#fff!important;
  filter:none!important;
}
.hft .hft-fullscreen-button.is-active{
  background:#fff!important;
  color:var(--accent)!important;
  border-color:#7fa79b!important;
  box-shadow:0 1px 5px rgba(39,89,77,.12);
}
.hft .hft-fullscreen-button.is-active:hover,.hft .hft-fullscreen-button.is-active:focus-visible{
  background:#edf5f2!important;
  color:#173f35!important;
  border-color:#5f8f81!important;
}
.hft:not(:fullscreen):not(.is-expanded) .hft-chart-heading>.hft-fullscreen-button{
  min-height:40px;
  padding:7px 14px!important;
  font-size:12.5px;
}
.hft:fullscreen .hft-fullscreen-button,.hft.is-expanded .hft-fullscreen-button{
  min-height:40px;
  padding:6px 12px!important;
  font-size:12px;
}


/* 0.4.75: phone-only fullscreen compaction and steadier touch ergonomics.
   Desktop/tablet fullscreen layouts stay unchanged. On phones the search remains a
   full-width first row, while view + the compact icon controls share one second row. */
@media(max-width:600px){
  .hft:fullscreen .hft-tree-toolbar,.hft.is-expanded .hft-tree-toolbar{
    display:grid;
    grid-template-columns:minmax(86px,1fr) auto auto;
    grid-auto-flow:row dense;
    align-items:center;
    gap:5px 6px;
    padding:6px 7px;
  }
  .hft:fullscreen .hft-chart-heading.is-controls-only,.hft.is-expanded .hft-chart-heading.is-controls-only{
    display:contents;
  }
  .hft:fullscreen .hft-branch-mode,.hft.is-expanded .hft-branch-mode,
  .hft:fullscreen .hft-fullscreen-search,.hft.is-expanded .hft-fullscreen-search{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    max-width:none;
    margin:0;
  }
  .hft:fullscreen .hft-fullscreen-search .hft-search,.hft.is-expanded .hft-fullscreen-search .hft-search{
    min-height:39px;
    padding:8px 10px!important;
    font-size:12.5px;
  }
  .hft:fullscreen .hft-scope,.hft.is-expanded .hft-scope{
    grid-column:1;
    min-width:0;
    width:100%;
    margin:0;
    gap:0;
    font-size:0;
  }
  .hft:fullscreen .hft-scope select,.hft.is-expanded .hft-scope select{
    width:100%;
    max-width:none;
    min-width:0;
    min-height:38px;
    padding:5px 7px;
    font-size:11.5px;
  }
  .hft:fullscreen .hft-chart-controls,.hft.is-expanded .hft-chart-controls{
    grid-column:2;
    width:auto;
    min-width:0;
    justify-content:flex-end;
    gap:3px;
    overflow:visible;
  }
  .hft:fullscreen .hft-chart-controls output,.hft.is-expanded .hft-chart-controls output{
    min-width:30px;
    font-size:11px;
    text-align:center;
  }
  .hft:fullscreen .hft-tree-help-button,.hft.is-expanded .hft-tree-help-button{
    order:0!important;
    margin:0!important;
    width:34px!important;
    min-width:34px!important;
    height:36px!important;
    min-height:36px!important;
    flex:0 0 34px!important;
    font-size:17px!important;
  }
  .hft:fullscreen .hft-zoom-person-button,.hft.is-expanded .hft-zoom-person-button,
  .hft:fullscreen .hft-fit-button,.hft.is-expanded .hft-fit-button{
    width:34px;
    min-width:34px;
    height:36px;
    min-height:36px;
    padding:0!important;
    border:1px solid #c5d5df;
    border-radius:7px;
    background:#fff;
    color:#285b7e;
    text-decoration:none;
    font-size:0!important;
    flex:0 0 34px;
  }
  .hft:fullscreen .hft-zoom-person-button::before,.hft.is-expanded .hft-zoom-person-button::before{
    content:"◎";
    font-size:18px;
    line-height:1;
  }
  .hft:fullscreen .hft-fit-button::before,.hft.is-expanded .hft-fit-button::before{
    content:"⤢";
    font-size:18px;
    line-height:1;
  }
  .hft:fullscreen .hft-fullscreen-button,.hft.is-expanded .hft-fullscreen-button{
    grid-column:3;
    width:40px;
    min-width:40px;
    height:38px;
    min-height:38px;
    padding:0!important;
    gap:0;
    font-size:0!important;
  }
  .hft:fullscreen .hft-fullscreen-button::before,.hft.is-expanded .hft-fullscreen-button::before{
    font-size:18px;
  }
}


/* 0.4.76: on phones Fit overview is not useful at the available scale.
   Keep tablet and desktop unchanged. */
@media(max-width:600px){
  .hft .hft-fit-button{display:none!important}
}

/* 0.4.77: structured help tooltip and consistent touch reading time. */
.hft-tree-tooltip{white-space:pre-line}


/* 0.4.78: slightly taller person cards. */
.hft-node{height:184px}

/* 0.4.79: phone-only layout refinement for profile and normal tree views.
   Tablet and desktop keep the existing layout. */
.hft-profile-actions{display:contents}
@media(max-width:600px){
  /* Profile: remove dead space and keep the identity block compact. */
  .hft[data-view="person"]>.hft-tools{
    margin:10px 0 0;
    gap:7px;
  }
  .hft[data-view="person"]>.hft-tools .hft-search-wrap{margin-bottom:1px}
  .hft[data-view="person"]>.hft-tools .hft-outline{
    min-height:40px;
    padding:8px 11px;
  }
  .hft[data-view="person"] .hft-profile-header{
    gap:13px;
    padding:10px 0 18px;
    align-items:flex-start;
  }
  .hft[data-view="person"] .hft-profile-header>div{
    flex:1 1 auto;
    min-width:0;
  }
  .hft[data-view="person"] .hft-portrait{
    width:78px;
    height:102px;
    flex:0 0 78px;
  }
  .hft[data-view="person"] .hft-profile-header .hft-eyebrow{
    margin-bottom:6px;
  }
  .hft[data-view="person"] .hft-profile-header h2{
    font-size:24px;
    line-height:1.08;
    margin-bottom:9px;
    overflow-wrap:anywhere;
  }
  .hft[data-view="person"] .hft-profile-header .hft-life{
    margin-bottom:5px;
    font-size:13.5px;
  }
  .hft[data-view="person"] .hft-profile-header .hft-age{
    margin-top:1px;
    margin-bottom:9px;
  }
  .hft[data-view="person"] .hft-profile-actions{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:7px;
  }
  .hft[data-view="person"] .hft-profile-actions .hft-primary,
  .hft[data-view="person"] .hft-profile-actions .hft-outline{
    flex:1 1 118px;
    min-height:40px;
    margin:0!important;
    padding:8px 10px;
    font-size:12.5px!important;
  }
  .hft[data-view="person"] .hft-profile-columns{
    margin-top:18px;
    gap:18px;
  }
  .hft[data-view="person"] .hft-family{
    padding:15px;
    border-radius:10px;
  }
  .hft[data-view="person"] .hft-family h3{
    margin-top:17px;
    margin-bottom:8px;
    font-size:18px;
  }
  .hft[data-view="person"] .hft-family h3:first-child{margin-top:0}
  .hft[data-view="person"] .hft-relative{
    margin:6px 0;
    padding:8px;
    gap:2px 8px;
  }
  .hft[data-view="person"] .hft-family-entry{margin-bottom:14px}

  /* Normal tree: two compact control rows. View + Full screen share the first row. */
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded)>.hft-tools{
    margin:10px 0 7px;
    gap:7px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-tree-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:5px 7px;
    padding:6px 7px;
    min-height:0;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-chart-heading.is-controls-only{
    display:contents;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-scope{
    grid-column:1;
    width:100%;
    min-width:0;
    gap:5px;
    font-size:11.5px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-scope select{
    flex:1 1 auto;
    width:100%;
    min-width:0;
    max-width:none;
    min-height:40px;
    padding:6px 7px;
    font-size:12px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-fullscreen-button{
    grid-column:2;
    min-height:40px;
    padding:7px 11px!important;
    font-size:12px!important;
    white-space:nowrap;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-chart-controls{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    overflow:visible;
    justify-content:flex-start;
    gap:7px;
    padding:0;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-tree-help-button{
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    flex:0 0 36px;
    font-size:18px!important;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-chart-controls output{
    min-width:38px;
    flex:0 0 38px;
    font-size:12px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-zoom-person-button{
    flex:1 1 auto;
    min-width:0;
    min-height:36px;
    padding:4px 2px;
    text-align:left;
    font-size:12px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-lineage-legend{
    left:7px;
    bottom:7px;
    max-width:calc(100% - 14px);
    padding:5px 7px;
    font-size:10px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-viewport{
    height:clamp(410px,58svh,560px);
    max-height:none;
  }
}
@media(max-width:600px){
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-branch-mode{
    grid-column:1 / -1;
    width:100%;
    margin:0;
  }
}

/* 0.4.83: sticky generation scale and overflow-safe person cards. */
.hft-chart-panel{position:relative}
.hft-node .hft-name{overflow:hidden!important;scrollbar-width:none}
.hft-node .hft-name::-webkit-scrollbar{display:none}
.hft-node.is-text-compact .hft-name{font-size:11.25px;line-height:1.16;max-height:66px}
.hft-node.is-text-compact .hft-dates{font-size:9.5px;line-height:1.1;white-space:nowrap;letter-spacing:-.01em}
.hft-node.is-text-extra-compact{gap:3px;padding-inline:6px!important}
.hft-node.is-text-extra-compact .hft-name{font-size:10px;line-height:1.12;max-height:67px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6}
.hft-node.is-text-extra-compact .hft-dates{font-size:8.75px;line-height:1.05;white-space:nowrap;letter-spacing:-.025em}
.hft-generation-scale{position:absolute;left:0;width:62px;overflow:hidden;pointer-events:none;z-index:9}
.hft-generation-sticky{position:absolute;left:6px;transform:translateY(-50%);display:block;padding:3px 7px;border:1px solid #b9cddd;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 1px 5px #203b3518;color:#35536a;font-size:10.5px;line-height:1.2;font-weight:750;white-space:nowrap;backdrop-filter:blur(3px)}
@media(max-width:600px){
  .hft-generation-scale{width:42px}
  .hft-generation-sticky{left:5px;padding:3px 6px;font-size:0}
  .hft-generation-sticky::after{content:attr(data-short);font-size:10px}
}

/* 0.4.85: language-aware calendar used instead of the browser/OS date picker. */
.hft-calendar-picker{position:relative}
.hft-date-picker[readonly]:not(:disabled){background:#fff!important;color:var(--ink)!important;cursor:pointer;-webkit-text-fill-color:var(--ink)}
.hft-date-picker:disabled{background:#fdecec!important;color:var(--muted)!important;opacity:1;cursor:default;-webkit-text-fill-color:var(--muted)}
.hft-calendar-dialog{border:0;border-radius:12px;width:min(92vw,330px);padding:14px;background:#fff;color:var(--ink);box-shadow:0 20px 70px #0005}
.hft-calendar-dialog::backdrop{background:#10221c55}
.hft-calendar-header{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;margin-bottom:8px}
.hft-calendar-title{text-align:center;text-transform:capitalize;font-size:15px}
.hft-calendar-nav{min-height:40px!important;width:40px;padding:0!important;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--accent);font-size:24px!important;line-height:1}
.hft-calendar-weekdays,.hft-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.hft-calendar-weekdays{margin-bottom:3px;color:var(--muted);font-size:11px;font-weight:700;text-align:center}
.hft-calendar-weekdays span{padding:4px 0}
.hft-calendar-empty{min-height:38px}
.hft-calendar-day{min-height:38px!important;padding:0!important;border:0;border-radius:7px;background:#fff;color:var(--ink);font-size:13px!important}
.hft-calendar-day:hover,.hft-calendar-day:focus-visible{background:#eef7fb}
.hft-calendar-day.is-today{box-shadow:inset 0 0 0 1px #9fc6da}
.hft-calendar-day.is-selected{background:var(--accent)!important;color:#fff!important;font-weight:700}
.hft-calendar-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.hft-calendar-actions .hft-outline,.hft-calendar-actions .hft-text{min-height:38px!important;padding:7px 10px;font-size:12px!important}
@media(max-width:600px){.hft-calendar-dialog{width:min(94vw,330px);padding:12px}.hft-calendar-day{min-height:40px!important}}

/* 0.4.86: direct month/year selection for historical dates. */
.hft-calendar-caption{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(82px,.65fr);gap:6px;min-width:0}
.hft-calendar-month,.hft-calendar-year{width:100%;min-width:0;height:40px;padding:6px 28px 6px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:13px}
.hft-calendar-month{text-transform:capitalize}
.hft-calendar-month:focus,.hft-calendar-year:focus{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:1px}
@media(max-width:600px){.hft-calendar-caption{grid-template-columns:minmax(0,1fr) 104px}.hft-calendar-month,.hft-calendar-year{font-size:12px;padding-left:7px}}

/* 0.4.87: give the year selector enough room to display all four digits on narrow screens. */
.hft-calendar-caption{grid-template-columns:minmax(0,1fr) 104px}
@media(max-width:600px){.hft-calendar-caption{grid-template-columns:minmax(0,1fr) 104px}}


/* 0.4.93: visually distinguish temporary partner-family branches from the main tree.
   Every person card in an alternative branch is light pink, including cards that would
   normally be light blue because they are direct descendants of that temporary root. */
.hft button.hft-node.is-alternate-branch,
.hft button.hft-node.is-alternate-branch.is-direct-lineage,
.hft button.hft-node.is-alternate-branch:hover,
.hft button.hft-node.is-alternate-branch:focus,
.hft button.hft-node.is-alternate-branch:focus-visible,
.hft button.hft-node.is-alternate-branch:active{
  background:#fbecef!important;
  border-color:#d9a9b3!important;
  color:var(--ink)!important;
}
.hft button.hft-node.is-alternate-branch.is-selected,
.hft button.hft-node.is-alternate-branch.is-selected:hover,
.hft button.hft-node.is-alternate-branch.is-selected:focus,
.hft button.hft-node.is-alternate-branch.is-selected:focus-visible,
.hft button.hft-node.is-alternate-branch.is-selected:active{
  background:#f7dfe5!important;
  border-color:#b87382!important;
  color:var(--ink)!important;
}
.hft button.hft-node.is-alternate-branch .hft-name,
.hft button.hft-node.is-alternate-branch .hft-dates{
  color:inherit!important;
}
.hft button.hft-node.is-alternate-branch .hft-dates{color:var(--muted)!important}
.hft-lineage-legend.is-alternate-branch .hft-lineage-swatch{
  background:#fbecef;
  border-color:#d9a9b3;
}
.hft-branch-mode-label{
  color:#8a4657;
  background:#fbecef;
  border-color:#e1b8c1;
}

/* 0.4.96: a persistent in-tree return control for alternative family branches.
   It always returns to the main-family entry point remembered when the branch was opened. */
.hft .hft-main-family-return{
  position:absolute;
  z-index:9;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  min-width:36px!important;
  min-height:36px!important;
  padding:6px!important;
  border:1px solid #7fa6bf;
  border-radius:999px;
  background:#fff!important;
  color:#24567e!important;
  box-shadow:0 2px 7px rgba(28,58,75,.16);
}
.hft .hft-main-family-return:hover,.hft .hft-main-family-return:focus-visible{
  background:#eaf5fb!important;
  color:#173f60!important;
  border-color:#5f91ae;
  filter:none;
  transform:translateY(-1px);
}
.hft .hft-main-family-return svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(pointer:coarse){
  .hft .hft-main-family-return{width:44px;height:44px;min-width:44px!important;min-height:44px!important;padding:9px!important}
}

/* 0.4.95: in-tree generation navigation for the compact Parents and children view.
   The whole nuclear-family window moves up/down; these are navigation controls, not expansion controls. */
.hft .hft-generation-nav{
  position:absolute;
  z-index:8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  min-width:36px!important;
  min-height:36px!important;
  padding:0!important;
  border:1px solid #9fc6da;
  border-radius:999px;
  background:#fff!important;
  color:#24567e!important;
  box-shadow:0 2px 7px rgba(28,58,75,.16);
  font-size:19px!important;
  font-weight:800;
  line-height:1;
}
.hft .hft-generation-nav:hover,.hft .hft-generation-nav:focus-visible{
  background:#eaf5fb!important;
  color:#173f60!important;
  border-color:#77abc6;
  filter:none;
  transform:translateY(-1px);
}
.hft .hft-generation-nav.is-down{font-size:18px!important}
@media(pointer:coarse){
  .hft .hft-generation-nav{
    width:44px;
    height:44px;
    min-width:44px!important;
    min-height:44px!important;
    font-size:21px!important;
  }
}
.hft .hft-parent-choice{
  position:absolute;
  z-index:12;
  width:min(250px,calc(100vw - 38px));
  transform:translateX(-50%);
  display:grid;
  gap:6px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(28,58,75,.2);
  color:var(--ink);
}
.hft .hft-parent-choice-title{font-size:11px;line-height:1.25;color:var(--muted)}
.hft .hft-parent-choice-button{
  min-height:34px!important;
  padding:6px 8px!important;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff!important;
  color:var(--ink)!important;
  text-align:left;
  font-size:12px!important;
  line-height:1.25;
}
.hft .hft-parent-choice-button:hover,.hft .hft-parent-choice-button:focus-visible{background:#eef7fb!important;border-color:#9fc6da}

/* 0.5.1: make Family view easier to discover without changing the default All connected view. */
.hft .hft-family-view-tip{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 10px 0;
  padding:9px 10px 9px 12px;
  border:1px solid #b9d7e6;
  border-radius:9px;
  background:#eef8fc;
  color:var(--ink);
  box-shadow:0 2px 8px rgba(28,58,75,.07);
  font-size:12.5px;
  line-height:1.35;
}
.hft .hft-family-view-tip-text{flex:1 1 auto;min-width:0}
.hft .hft-family-view-tip-action{
  flex:0 0 auto;
  min-height:34px!important;
  padding:6px 10px!important;
  border:1px solid #7faec7!important;
  border-radius:7px;
  background:#fff!important;
  color:#214f6e!important;
  font-size:12px!important;
  font-weight:700!important;
  white-space:nowrap;
}
.hft .hft-family-view-tip-action:hover,.hft .hft-family-view-tip-action:focus-visible{background:#e2f2f9!important;border-color:#5f91ae!important;color:#173f60!important}
.hft .hft-family-view-tip-close{
  flex:0 0 30px;
  width:30px;
  height:30px;
  min-width:30px!important;
  min-height:30px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:20px!important;
  line-height:1!important;
}
.hft .hft-family-view-tip-close:hover,.hft .hft-family-view-tip-close:focus-visible{background:#fff!important;color:var(--ink)!important}
.hft:fullscreen .hft-family-view-tip,.hft.is-expanded .hft-family-view-tip{display:none}
.hft .hft-family-view-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:38px;
  margin:5px 0 2px;
  padding:8px 10px!important;
  border:1px solid #8ab6cd!important;
  border-radius:8px;
  background:#eaf6fb!important;
  color:#204f6c!important;
  font-size:13px!important;
  font-weight:700!important;
}
.hft .hft-family-view-cta svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hft .hft-family-view-cta:hover,.hft .hft-family-view-cta:focus-visible{background:#dceff8!important;border-color:#659bb7!important;color:#153f5a!important;filter:none!important}
@media(max-width:600px){
  .hft .hft-family-view-tip{align-items:flex-start;flex-wrap:wrap;margin:6px 7px 0;padding:8px 9px;font-size:11.5px}
  .hft .hft-family-view-tip-text{flex:1 1 calc(100% - 40px)}
  .hft .hft-family-view-tip-action{order:3;flex:1 1 100%;width:100%}
  .hft .hft-family-view-tip-close{margin-left:auto}
}

/* 0.5.6: make the configured main ancestor immediately recognisable and make
   the Family-view parent-branch chooser read as a deliberate side navigation step. */
.hft button.hft-node.is-tree-ancestor,
.hft button.hft-node.is-tree-ancestor.is-selected,
.hft button.hft-node.is-tree-ancestor:hover,
.hft button.hft-node.is-tree-ancestor:focus-visible{
  border:2px solid #2f6590!important;
  box-shadow:0 0 0 3px rgba(47,101,144,.16),0 5px 16px rgba(28,58,75,.18)!important;
}
.hft .hft-node .hft-ancestor-badge{
  position:absolute;
  z-index:3;
  left:7px;
  top:6px;
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:2px 6px;
  border-radius:999px;
  background:#24567e;
  color:#fff!important;
  font-size:9.5px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 1px 4px rgba(28,58,75,.18);
  pointer-events:none;
}
.hft .hft-generation-nav.is-up{
  border-width:2px;
  background:#eef7fb!important;
  box-shadow:0 0 0 3px rgba(119,171,198,.14),0 3px 9px rgba(28,58,75,.18);
}
.hft .hft-parent-choice{
  transform:none;
  gap:8px;
  padding:11px;
  border:2px solid #77abc6;
  border-radius:12px;
  background:#f4fbff;
  box-shadow:0 12px 30px rgba(28,58,75,.24);
}
.hft .hft-parent-choice-heading{display:flex;align-items:flex-start;gap:9px;padding:1px 1px 3px}
.hft .hft-parent-choice-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  min-width:30px;
  border-radius:999px;
  background:#24567e;
  color:#fff;
  font-size:18px;
  line-height:1;
  font-weight:800;
  box-shadow:0 2px 6px rgba(28,58,75,.18);
}
.hft .hft-parent-choice-copy{display:grid;gap:2px;min-width:0}
.hft .hft-parent-choice-title{font-size:13px;line-height:1.25;color:#173f60;font-weight:800}
.hft .hft-parent-choice-help{font-size:10.5px;line-height:1.3;color:#587083}
.hft .hft-parent-choice-button{
  min-height:38px!important;
  padding:8px 10px!important;
  border-color:#b8d7e7;
  background:#fff!important;
  box-shadow:0 1px 3px rgba(28,58,75,.06);
  font-weight:650!important;
}
.hft .hft-parent-choice-button:hover,.hft .hft-parent-choice-button:focus-visible{background:#eaf5fb!important;border-color:#77abc6;color:#173f60!important}
.hft .hft-parent-choice::after{
  content:"";
  position:absolute;
  top:31px;
  width:12px;
  height:12px;
  background:#f4fbff;
  transform:rotate(45deg);
}
.hft .hft-parent-choice.is-left::after{right:-7px;border-top:2px solid #77abc6;border-right:2px solid #77abc6}
.hft .hft-parent-choice.is-right::after{left:-7px;border-left:2px solid #77abc6;border-bottom:2px solid #77abc6}
@media(max-width:600px){
  .hft .hft-node .hft-ancestor-badge{font-size:9px;padding:2px 5px}
  .hft .hft-parent-choice{max-width:230px}
  .hft .hft-parent-choice-help{font-size:10px}
}


/* 0.5.7: linked-member review assignment and confirmation flow. */
.hft-member-review-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;margin:22px 0;padding:18px 20px;border:1px solid #9fc6da;border-left:5px solid var(--accent);border-radius:12px;background:#eef7fb}
.hft-member-review-card h3{margin:0 0 5px;font-size:20px}.hft-member-review-card p{margin:0}.hft-member-review-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #9fc6da;color:var(--accent);font-size:22px;font-weight:800}.hft-member-review-button{white-space:nowrap}.hft-member-review-dialog{width:min(94vw,700px)}.hft-member-review-form{display:grid;gap:14px}.hft-member-review-lead{font-weight:600}.hft-member-review-instructions{display:grid;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}.hft-member-review-instructions p{margin:0}.hft-member-review-warning{margin:0!important;padding:11px 13px;border-left:4px solid #d49b11;border-radius:5px;background:#fff3c4;font-weight:700}.hft-member-review-comment-label{display:grid;gap:6px;font-weight:700}.hft-member-review-comment-label textarea{width:100%;min-height:110px;border:1px solid var(--line);border-radius:7px;padding:10px;background:#fff;color:var(--ink);font:inherit}.hft-member-review-comment-label .hft-help{font-weight:400;padding:0;margin:0!important}.hft-member-review-confirm-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:9px;align-items:start;padding:12px;border:1px solid #9fc6da;border-radius:8px;background:#f5fbff;font-weight:700}.hft-member-review-confirm-check input{width:18px;height:18px;margin:2px 0 0}.hft-member-review-confirmed{border-left-color:var(--accent);background:#eef7fb}
@media(max-width:600px){.hft-member-review-card{grid-template-columns:40px minmax(0,1fr);padding:15px}.hft-member-review-card .hft-member-review-button{grid-column:1/-1;width:100%}.hft-member-review-dialog{padding:18px}}


/* 0.5.12: off-screen tree portraits keep their card geometry but defer the
   protected thumbnail request until the card approaches the visible viewport. */
.hft-node .hft-photo.is-deferred{background:#e5eef7}

/* 0.5.13 – administrator-only browser rendering diagnostics panel. */
.hft-browser-performance{max-width:1100px;margin:18px auto;padding:18px;border:1px solid #c3c4c7;border-radius:8px;background:#fff;color:#1d2327;box-sizing:border-box}
.hft-browser-performance h2{margin-top:0}
.hft-browser-performance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.hft-browser-performance-metric{padding:10px 12px;border:1px solid #dcdcde;border-radius:6px;background:#f6f7f7}
.hft-browser-performance-metric strong,.hft-browser-performance-metric span{display:block}
.hft-browser-performance-metric span{margin-top:4px;font-size:1.05em}
.hft-browser-performance-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.hft-browser-performance-status{min-height:1.4em}
.hft-browser-performance-results{overflow-x:auto}
.hft-browser-performance-table{width:100%;border-collapse:collapse;margin-top:10px}
.hft-browser-performance-table th,.hft-browser-performance-table td{padding:8px 10px;border:1px solid #dcdcde;text-align:left;white-space:nowrap}
.hft-browser-performance-table th{background:#f0f0f1}

/* 0.5.15: member welcome / quick guide. */
.hft[data-view="welcome"]{max-width:1180px;margin:0 auto;padding:18px 18px 34px}
.hft-welcome{display:grid;gap:22px;color:var(--ink)}
.hft-welcome-hero{padding:28px 30px;border:1px solid #b9d4e5;border-radius:16px;background:linear-gradient(135deg,#f5faff 0%,#eaf4fb 100%)}
.hft-welcome-kicker{margin:0 0 5px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hft-welcome-hero h2{margin:0 0 8px;font-size:clamp(25px,3vw,38px);line-height:1.12;color:var(--ink)}
.hft-welcome-lead{max-width:780px;margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.hft-welcome-main-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hft-welcome-card{position:relative;min-height:190px;padding:24px 22px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 5px 18px #2434490d;overflow:hidden}
.hft-welcome-card::after{content:"";position:absolute;right:-28px;bottom:-35px;width:120px;height:120px;border-radius:50%;background:#eaf4fb;opacity:.8}
.hft-welcome-card.hft-welcome-profile::after{background:#f4efe8}
.hft-welcome-card.hft-welcome-fullscreen::after{background:#edf2f7}
.hft-welcome-number{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:18px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;position:relative;z-index:1}
.hft-welcome-card h3{position:relative;z-index:1;margin:0 0 8px;font-size:20px}
.hft-welcome-card p{position:relative;z-index:1;margin:0;color:var(--muted);line-height:1.58}
.hft-welcome-views,.hft-welcome-tips{padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.hft-welcome-views>h3,.hft-welcome-tips>h3{margin:0 0 14px;font-size:20px}
.hft-welcome-view-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hft-welcome-view{padding:16px 17px;border-radius:10px;background:#fff;border-left:4px solid #8bb8d3}
.hft-welcome-view.is-family{border-left-color:#4d88ad}
.hft-welcome-view.is-complete{border-left-color:#8294a6}
.hft-welcome-view h4{margin:0 0 6px;font-size:15px}
.hft-welcome-view p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.hft-welcome-tips ul{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--muted)}
.hft-welcome-status{min-height:1.4em;margin:0;color:#2d6b4f;font-size:13px;font-weight:600}
.hft-welcome-status.is-error{color:#963a2a}
.hft-welcome-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.hft-welcome-actions button{min-height:44px}
.hft-guide-button{white-space:nowrap}
@media(max-width:860px){.hft-welcome-main-grid,.hft-welcome-view-grid{grid-template-columns:1fr}.hft-welcome-card{min-height:auto}.hft-welcome-hero{padding:22px}.hft-welcome-actions{justify-content:stretch}.hft-welcome-actions button{flex:1 1 220px}}
@media(max-width:520px){.hft[data-view="welcome"]{padding:10px 10px 24px}.hft-welcome{gap:14px}.hft-welcome-hero,.hft-welcome-card,.hft-welcome-views,.hft-welcome-tips{border-radius:11px}.hft-welcome-hero{padding:18px}.hft-welcome-card{padding:18px}.hft-welcome-views,.hft-welcome-tips{padding:17px}.hft-welcome-actions{display:grid}.hft-welcome-actions button{width:100%}}

/* 0.6.2: responsive UI refinement. Preserve the full 0.5.15 help/onboarding UI,
   widen the desktop plugin safely, compact the phone action grid and make the
   member proposal dialogs substantially denser on phones. */
@media (min-width:1280px){
  .hft:not(:fullscreen):not(.is-expanded){
    width:min(1440px,calc(100vw - 48px));
    max-width:none;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    margin:0;
    padding-inline:16px;
  }
  .hft:not(:fullscreen):not(.is-expanded) .hft-layout{
    grid-template-columns:minmax(0,1fr) 250px;
    gap:18px;
  }
}

@media(max-width:600px){
  /* Search followed by a compact 2 x 2 grid of the four primary actions,
     including Help / How the tree works. */
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded)>.hft-tools,
  .hft[data-view="person"]:not(:fullscreen):not(.is-expanded)>.hft-tools{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:6px;
    margin:7px 0 5px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded)>.hft-tools .hft-search-wrap,
  .hft[data-view="person"]:not(:fullscreen):not(.is-expanded)>.hft-tools .hft-search-wrap{
    grid-column:1 / -1;
    min-width:0;
    margin-bottom:0;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded)>.hft-tools>.hft-outline,
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded)>.hft-tools>.hft-primary,
  .hft[data-view="person"]:not(:fullscreen):not(.is-expanded)>.hft-tools>.hft-outline,
  .hft[data-view="person"]:not(:fullscreen):not(.is-expanded)>.hft-tools>.hft-primary{
    width:100%;
    min-width:0;
    min-height:36px;
    padding:7px 8px!important;
    font-size:11.5px!important;
    line-height:1.2;
    text-align:center;
  }

  /* Proposal forms: smaller typography, controls and whitespace while retaining
     comfortable touch targets and the existing field structure. */
  .hft-proposal-dialog{
    width:min(95vw,520px);
    max-height:94vh;
    padding:11px 11px 10px;
    border-radius:9px;
  }
  .hft-proposal-form{
    gap:6px;
    font-size:11.5px;
    line-height:1.35;
  }
  .hft-proposal-form h3{
    margin:0 0 3px;
    font-size:17px!important;
    line-height:1.18;
  }
  .hft-proposal-form>p,
  .hft-proposal-form .hft-muted,
  .hft-proposal-form .hft-help,
  .hft-proposal-status,
  .hft-linked-register-help,
  .hft-register-unstructured,
  .hft-proposal-form .hft-warning{
    margin-bottom:5px!important;
    font-size:10.5px!important;
    line-height:1.35;
  }
  .hft-form-group{
    margin:6px 0;
    padding:7px 9px 8px;
    border-radius:8px;
  }
  .hft-form-group legend{
    padding:0 4px;
    font-size:11.5px;
    line-height:1.2;
  }
  .hft-form-group label,
  .hft-proposal-form label{
    margin:5px 0;
    gap:3px;
    font-size:11px!important;
    line-height:1.25;
  }
  .hft-proposal-form input,
  .hft-proposal-form textarea,
  .hft-proposal-form select{
    min-height:36px;
    padding:5px 7px;
    border-radius:6px;
    font-size:12.5px!important;
    line-height:1.25;
  }
  .hft-proposal-form textarea{
    min-height:70px;
  }
  .hft-proposal-form textarea[name="biography"]{
    min-height:105px;
  }
  .hft-date-input{
    gap:5px;
  }
  .hft-calendar-picker{
    width:100%;
    grid-template-columns:minmax(0,1fr) 34px;
    gap:5px;
  }
  .hft-calendar-button,
  .hft-form-group label.hft-calendar-button{
    width:34px;
    min-width:34px;
    height:36px;
    min-height:36px!important;
    padding:0!important;
  }
  .hft-calendar-button svg{
    width:17px;
    height:17px;
  }
  .hft-new-person-dialog .hft-date-text::placeholder{
    font-size:10.5px!important;
  }
  .hft-proposal-actions{
    gap:6px;
    margin-top:3px;
    flex-wrap:wrap;
    justify-content:stretch;
  }
  .hft-proposal-actions .hft-outline,
  .hft-proposal-actions .hft-primary{
    flex:1 1 120px;
    min-height:36px;
    padding:7px 9px!important;
    font-size:11.5px!important;
  }
}


/* 0.6.3: prevent iOS Safari from auto-zooming the compact proposal dialogs.
   Safari zooms editable controls whose computed font size is below 16px.
   Keep labels, headings and spacing compact, but render editable values at 16px. */
@media(max-width:600px){
  .hft-proposal-form input,
  .hft-proposal-form textarea,
  .hft-proposal-form select{
    font-size:16px!important;
  }
  .hft-new-person-dialog .hft-date-text::placeholder{
    font-size:14px!important;
  }
}


/* 0.6.4: the compact phone action grid must only apply in normal page mode.
   In fullscreen/fallback fullscreen the normal page tools stay hidden so the
   dedicated fullscreen search and toolbar are the only controls shown. */
@media(max-width:600px){
  .hft[data-view="tree"]:fullscreen>.hft-tools,
  .hft[data-view="tree"].is-expanded>.hft-tools,
  .hft[data-view="person"]:fullscreen>.hft-tools,
  .hft[data-view="person"].is-expanded>.hft-tools{
    display:none!important;
  }
}

/* 0.6.5: call-name emphasis. The semantic value is stored as person.callName;
   only presentation is bolded here. */
.hft .hft-call-name{font-weight:850}
.hft .hft-name .hft-call-name{font-weight:900}

/* 0.6.6: make call-name emphasis clearly visible in compact UI contexts.
   Those rows/cards previously made the whole name semi-bold, so the 0.6.5
   strong element had too little visual contrast. Keep ordinary name parts at
   regular weight here and reserve the heavy weight for the call name. */
.hft .hft-node .hft-name,
.hft .hft-relative .hft-name,
.hft .hft-result .hft-name{
  font-weight:400;
}
.hft .hft-node .hft-name .hft-call-name,
.hft .hft-relative .hft-name .hft-call-name,
.hft .hft-result .hft-name .hft-call-name{
  font-weight:900;
}

/* 0.6.7: separate editable personal biography from preserved B-reference source passages. */
.hft-historical-biography{margin:18px 0 24px}.hft-historical-biography>h4{margin:0 0 10px;font-size:15px;color:var(--muted)}
.hft-biography-passage{border:1px solid var(--line);border-radius:9px;background:#fff;padding:12px 14px;margin:10px 0}
.hft-biography-passage-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 10px;margin-bottom:6px}
.hft-biography-ref{font-size:12px;letter-spacing:.04em;color:var(--accent)}
.hft-biography-source{font-size:11px;color:var(--muted)}
.hft-biography-passage .hft-prose{font-size:14px;line-height:1.7}
.hft-biography-unlink{display:inline-block;margin-top:8px;min-height:34px!important;font-size:12px!important;text-align:left}
.hft-personal-biography{margin-bottom:14px}
@media(max-width:600px){
  .hft-biography-passage{padding:10px 11px;margin:8px 0}
  .hft-biography-passage .hft-prose{font-size:13px;line-height:1.58}
  .hft-biography-unlink{font-size:11.5px!important}
}

/* 0.6.8: keep the normal biography profile clean and reading-focused.
   Source metadata, review cards and unlink actions are shown only in edit mode. */
.hft-biography-read{margin:0 0 24px}
.hft-biography-read-passage{margin:0 0 18px}
.hft-biography-read-passage:last-child{margin-bottom:0}
.hft-historical-biography-edit{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.hft-historical-biography-edit>h4{margin-bottom:8px}
@media(max-width:600px){
  .hft-biography-read-passage{margin-bottom:14px;font-size:14px;line-height:1.65}
  .hft-historical-biography-edit{margin-top:12px;padding-top:10px}
}


/* 0.6.12: phone-only input and gallery refinements.
   iOS Safari auto-zooms focused form controls below 16px. Search inputs inherit
   the 13px search-label size, so force only the three Family Tree search fields
   to 16px on phones. Also keep mobile gallery image areas square while forcing
   captions into normal flow below the image instead of overlaying it. */
@media(max-width:600px){
  .hft .hft-search{
    font-size:16px!important;
    min-width:0;
    max-width:100%;
  }
  .hft:fullscreen .hft-fullscreen-search .hft-search,
  .hft.is-expanded .hft-fullscreen-search .hft-search{
    font-size:16px!important;
  }
  .hft .hft-gallery-grid .hft-photo-thumb{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }
  .hft .hft-gallery-grid .hft-photo-thumb img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:1 / 1;
    object-fit:cover;
    flex:0 0 auto;
  }
  .hft .hft-gallery-grid .hft-photo-thumb span{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:6px 8px!important;
    background:#fff;
    line-height:1.35;
    flex:0 0 auto;
  }
}

/* 0.6.29: compact name-change opt-in and clearer structured surname editing. */
.hft-name-change-optin-box{background:#f6f0df;border-radius:6px;padding:8px 10px;margin:2px 0 4px}.hft-proposal-form .hft-name-change-optin{display:flex;align-items:center;gap:8px;margin:0;font-weight:650}.hft-proposal-form .hft-name-change-optin input[type=checkbox]{width:20px;height:20px;min-height:20px;padding:0;margin:0;flex:0 0 20px}.hft-name-change-optin-box>.hft-help{display:block;padding:3px 0 0 28px;margin:0!important;line-height:1.35}

/* 0.6.33: structured-name typography. Keep one font family, but make the displayed
   surname slightly stronger than the surrounding given names. Call-name emphasis
   remains the strongest signal. Unstructured legacy names are left unchanged. */
.hft .hft-surname{font-weight:620}
.hft .hft-birth-surname{font-weight:500}
.hft .hft-current-surname{font-weight:650}
.hft .hft-name-suffix{font-weight:500}
.hft h2 .hft-current-surname,.hft h3 .hft-current-surname{font-weight:650}
.hft .hft-call-name{font-weight:850}
.hft .hft-given-names{font-weight:400}

/* 0.6.39: let the Family Tree plugin own the visible page title and keep the controls close to it. */
.hft-tree-page .entry-header{display:none!important}
.hft-tree-page .entry-content{margin-top:0!important}
.hft-page-title{margin:0 0 8px!important;color:var(--ink,#243449);font:600 clamp(28px,3vw,34px)/1.15 Georgia,serif}
.hft>.hft-page-title{padding:0}
.hft>.hft-page-title+.hft-tools{margin-top:6px}
.hft-access .hft-page-title{margin-bottom:12px!important}
@media(max-width:600px){.hft-page-title{margin-bottom:6px!important;font-size:28px}.hft>.hft-page-title+.hft-tools{margin-top:4px}}


.hft-biography-passage-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.hft-biography-passage-actions .hft-biography-unlink{margin-top:0}
.hft-biography-read-source{margin:0 0 10px}
.hft-biography-read-source>.hft-biography-correct{display:inline-block;margin-top:6px;min-height:32px!important;font-size:12px!important}
.hft-biography-correction-dialog textarea{min-height:260px}

/* 0.6.54: ensure an in-name call-name span is visibly bold in serif profile headings. */
.hft h2 .hft-call-name,.hft h3 .hft-call-name{font-weight:700!important}


/* 0.6.58: Personal biography/profile text is intended for longer narrative text.
   Keep it substantially taller than ordinary proposal textareas on phone, tablet
   and desktop so members can review and edit several paragraphs comfortably. */
.hft-proposal-form textarea[name="personalBiography"]{
  min-height:220px;
  resize:vertical;
}
@media(max-width:600px){
  .hft-proposal-form textarea[name="personalBiography"]{
    min-height:220px;
  }
}
.hft-proposal-feedback{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;background:#f6f9fc}.hft-proposal-feedback h3{font:700 16px/1.3 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:0 0 8px;color:var(--ink)}.hft-proposal-feedback-status{margin:0 0 8px!important}.hft-proposal-feedback-adjustments{margin:8px 0 10px;padding-left:20px}.hft-proposal-feedback-adjustments li{margin:4px 0;overflow-wrap:anywhere}.hft-proposal-feedback-comment{margin:8px 0!important}.hft-proposal-feedback-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.hft-proposal-feedback-actions .hft-text{min-height:36px}

/* 0.7.06: friendly access gate on restricted person deep-links (both languages). */
.hft-login-gate{max-width:700px;margin:36px auto;padding:28px 32px;border:1px solid #dbe4ed;border-radius:12px;background:#f8fafc;box-sizing:border-box;color:#243449}
.hft-login-gate p{margin:14px 0 0;line-height:1.6}
.hft-login-gate .hft-login-link{display:inline-block;padding:10px 22px;border-radius:8px;background:#1764cc;color:#fff!important;text-decoration:none;font-weight:650}
.hft-login-gate .hft-login-link:hover,.hft-login-gate .hft-login-link:focus{background:#0c4797;color:#fff!important}
.hft-login-gate .hft-login-link:focus-visible{outline:3px solid #112e57;outline-offset:3px}
@media(max-width:600px){.hft-login-gate{margin:18px 12px;padding:20px 18px}}

/* 0.7.07: bring a real review assignment to the foreground on person profiles. */
.hft .hft-member-review-card{grid-template-columns:44px minmax(0,1fr) auto;align-items:start;padding:22px 24px;gap:18px;border:1px solid #91bbdd;border-left:6px solid #1764cc;background:#eef6ff;box-shadow:0 4px 18px rgba(17,62,103,.09);scroll-margin-top:90px}
.hft .hft-member-review-icon{background:#1764cc;color:#fff;border-color:#1764cc;font-weight:800}
.hft .hft-member-review-kicker{margin:0 0 6px;color:#124e86;letter-spacing:.07em;font-size:11px;font-weight:800}
.hft .hft-member-review-card h3{margin:0 0 9px;font-size:clamp(20px,2vw,25px);color:#173a5c}
.hft .hft-member-review-copy .hft-member-review-lead{margin:0 0 12px;font-weight:500;line-height:1.5}
.hft .hft-member-review-steps{margin:8px 0 12px;padding-left:23px;display:grid;gap:7px;line-height:1.5}
.hft .hft-member-review-steps li{padding-left:4px}
.hft .hft-member-review-steps li::marker{font-weight:800;color:#1764cc}
.hft .hft-member-review-card-note{margin-top:8px!important;font-size:13px;color:#334f6c}
.hft .hft-member-review-button{max-width:240px;white-space:normal;text-align:center;line-height:1.35;align-self:center}
@media(max-width:900px){.hft .hft-member-review-card{grid-template-columns:40px minmax(0,1fr)}.hft .hft-member-review-button{grid-column:2;width:100%;max-width:none}}
@media(max-width:600px){.hft .hft-member-review-card{padding:18px 15px;gap:12px}.hft .hft-member-review-button{grid-column:1/-1}}

/* 0.7.27: clearer, consistent member form section headings; compact name intro.
   Applies only to Add person / Suggest correction, not WordPress admin tooling. */
.hft-person-proposal-dialog .hft-proposal-form .hft-form-group legend{
  font-size:14.5px;
  line-height:1.35;
  font-weight:750;
  padding:0 6px;
}
.hft-person-proposal-dialog .hft-name-and-dates-section{
  padding-top:5px;
}
.hft-person-proposal-dialog .hft-structured-name-intro{
  display:block;
  margin:0 0 5px;
  padding:0;
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
}
.hft-person-proposal-dialog .hft-biography-section label{
  margin-top:3px;
}

/* 0.7.29: STAGING-ONLY heading presentation for B-ID metadata.
   Body passages stay unchanged; headings inherit the genealogy profile styling. */
.hft .hft-biography-read-heading{color:var(--ink);font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.hft .hft-biography-heading-chapter{font-size:1.13em;text-transform:uppercase;letter-spacing:.012em;margin:22px 0 10px}
.hft .hft-biography-heading-sub{font-size:1em;text-transform:none;margin:18px 0 8px}
.hft .hft-biography-read-source.is-heading{margin:0}
@media(max-width:600px){.hft .hft-biography-heading-chapter{margin-top:18px}.hft .hft-biography-heading-sub{margin-top:15px}}

/* 0.7.32: staging-gated presentation of historical gravestone inscriptions.
   Each visible B-passage remains its own text node, inside one contiguous quote block. */
.hft .hft-biography-inscription{
  display:block;
  margin:12px 0 20px;
  padding:6px 10px;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:center;
  font:normal 15px/1.62 Georgia,serif;
  break-inside:avoid;
  page-break-inside:avoid;
}
.hft .hft-biography-inscription-line{
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:break-word;
}
.hft .hft-biography-inscription-line.is-stanza{margin-top:.9em}
@media(max-width:600px){
  .hft .hft-biography-inscription{padding:4px 0;font-size:14px;line-height:1.55}
}

/* 0.7.42 staging private PENDING formatting – never exposed in the public model. */
.hft-pending-biography-preview{border-inline-start:3px solid #9c9da3;padding:6px 12px;margin:7px 0 14px;background:rgba(127,127,127,.055)}
/* Approved schema-12 biographies are normal published content, not private/pending previews. */
.hft-approved-biography-preview{border:0;background:transparent;padding:0;margin:0 0 18px}
.hft-approved-biography-preview .hft-biography-pending-line{margin:0!important}
/* 0.7.70: match the compact B-passage proposal card's read-only preview. */
.hft-historical-biography-edit .hft-biography-passage-preview>.hft-approved-biography-preview{margin-bottom:0}
.hft-pending-biography-label{font-size:.8em;color:#65676b;margin:0 0 8px!important;font-style:italic}
.hft-biography-pending-line{white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.5em;margin:0!important;line-height:1.55}
.hft-biography-pending-line strong{font-weight:700}
.hft-biography-pending-heading1{font-weight:700;text-transform:uppercase;font-size:1.15em;line-height:1.35}
.hft-biography-pending-heading2{font-weight:700;font-size:1.05em;line-height:1.35}
.hft-biography-pending-verse{text-align:center;border:0;padding:0;background:none}

/* Opt-in, staging-admin-only formatting inspection. Never changes profile presentation. */
.hft .hft-biography-format-diagnostic{font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; border:1px solid #b6c5d2;border-radius:5px;padding:6px 10px;margin:12px 0;color:#334155;background:#f8fafc}
.hft .hft-biography-format-diagnostic summary{cursor:pointer}
.hft .hft-biography-format-diagnostic pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:340px;overflow-y:auto;font:inherit;margin:8px 0 0}

/* Historical verse/inscription: render approved schema-12 formatting without
   adding a paragraph gap after every individual B-passage. Retain original
   group centering, stanza breaks, and responsive Georgia typography. */
.hft .hft-biography-inscription-line .hft-approved-biography-preview,
.hft .hft-biography-inscription-line .hft-pending-biography-preview{
  margin:0;
}
.hft .hft-biography-inscription-line .hft-biography-pending-line{
  line-height:inherit;
  font-family:inherit;
  font-size:inherit;
}

/* Fix package v1.1: a historical inscription explicitly changed to normal
   text must be laid out as prose, rather than inheriting verse centering. */
.hft .hft-biography-read-source{ text-align:left; }
.hft .hft-biography-read-source .hft-biography-pending-verse{ text-align:center; }

/* 0.7.108 – shared biography typography in the member profile and its
   read-only Suggest-a-change previews. Source and approved spans are kept;
   a verse block does NOT imply italics. Inline <em> remains italic.
   In particular, mobile 600px rules must not give approved-normal and
   unformatted-normal paragraphs two different font sizes. */
.hft .hft-biography-read .hft-prose,
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-prose {
  font-size:15px !important;
  line-height:1.7;
  font-style:normal;
}
.hft .hft-biography-read .hft-biography-pending-normal,
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-biography-pending-normal {
  text-align:left !important;
  font-style:normal;
}
.hft .hft-biography-inscription,
.hft .hft-biography-inscription-line,
.hft .hft-biography-pending-verse,
.hft .hft-biography-legacy-verse {
  font-style:normal !important;
}
.hft .hft-biography-pending-verse,
.hft .hft-biography-legacy-verse { text-align:center !important; }
.hft .hft-biography-legacy-verse {
  font-family:Georgia,serif;
  white-space:pre-wrap;
  padding:0;
  margin:0;
}
.hft .hft-biography-read .hft-biography-pending-heading1,
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-biography-pending-heading1 {
  font-weight:700;
  font-size:1.15em !important;
  line-height:1.35;
  text-transform:uppercase;
  text-align:left;
  font-style:normal;
}
.hft .hft-biography-read .hft-biography-pending-heading2,
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-biography-pending-heading2 {
  font-weight:700;
  font-size:1.05em !important;
  line-height:1.35;
  text-align:left;
  font-style:normal;
}
/* The explicit em is the ONLY source of italic styling in a verse. */
.hft .hft-biography-read em,
.hft .hft-historical-biography-edit .hft-biography-passage-preview em {
  font-style:italic;
}


/* ==============================================================
   Heilborn Family Tree 0.7.109 — unified on-screen B-passage type
   This is a READ-ONLY presentation correction. Imported and newly
   approved verse blocks must use the same font on person profiles
   and in the Suggest-a-change read-only card.  It does NOT change
   a B-passage's stored type or remove approved verse boundaries.
   The A5 book prototype has independent print typography.
   ============================================================== */

/* The legacy inscription block previously hard-coded Georgia while
   schema-12 verse uses the site's sans-serif. That made adjacent B-IDs
   (e.g. B0203 and B0205) look like two different fonts. */
.hft .hft-biography-read .hft-biography-inscription,
.hft .hft-biography-read .hft-biography-read-source,
.hft .hft-historical-biography-edit .hft-biography-passage-preview {
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:15px !important;
  font-style:normal;
  line-height:1.7 !important;
}

/* All block types and both provenance paths inherit that same base.
   Separate heading sizes are retained in the earlier heading rules. */
.hft .hft-biography-read .hft-biography-inscription-line,
.hft .hft-biography-read .hft-biography-inscription-line .hft-biography-pending-line,
.hft .hft-biography-read .hft-biography-legacy-verse,
.hft .hft-biography-read .hft-biography-pending-normal,
.hft .hft-biography-read .hft-biography-pending-verse,
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-biography-legacy-verse,
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-biography-pending-normal,
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-biography-pending-verse {
  font-family:inherit !important;
  font-size:inherit !important;
  line-height:inherit !important;
  letter-spacing:normal;
}

/* Group containers and normal text had 20px versus 10/18px outer
   margins. Give contiguous B-passage groups predictable spacing.
   Keep the source-verified stanza breaks from the 2018 original. */
.hft .hft-biography-read .hft-biography-inscription,
.hft .hft-biography-read .hft-biography-read-source:not(.is-heading) {
  margin:0 0 12px !important;
}
.hft .hft-biography-read .hft-biography-inscription {
  padding:0 !important;
}
.hft .hft-biography-read .hft-biography-read-source:not(.is-heading) > .hft-approved-biography-preview,
.hft .hft-biography-read .hft-biography-read-source:not(.is-heading) > .hft-biography-read-passage,
.hft .hft-biography-read .hft-biography-read-source:not(.is-heading) > .hft-pending-biography-preview {
  margin:0 !important;
}

/* B0205, B0210, B0214 and B0216 still start historical stanzas.
   These vertical gaps come from explicit source metadata, not extra
   empty paragraphs inserted by the approval workflow. */
.hft .hft-biography-read .hft-biography-inscription-line.is-stanza {
  margin-top:.9em;
}

/* Bold and italic must only come from explicit inline tags; never
   infer italics from poem/verse block type. */
.hft .hft-biography-read .hft-biography-pending-verse,
.hft .hft-biography-read .hft-biography-legacy-verse,
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-biography-pending-verse,
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-biography-legacy-verse {
  font-style:normal !important;
  text-align:center !important;
}
.hft .hft-biography-read em,
.hft .hft-historical-biography-edit .hft-biography-passage-preview em {
  font-style:italic !important;
}

/* ==============================================================
   Heilborn Family Tree 0.7.110 — matched biography reading typography
   Published personal biography, approved historical B-passages and
   read-only proposal cards use ONE body text scale, including on phones.
   This does not alter the stored formatting, stanza breaks, or the
   distinct font sizes for chapter/subheadings.
   ============================================================== */
.hft .hft-biography-read,
.hft .hft-historical-biography-edit .hft-biography-passage-preview {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:15px !important;
  line-height:1.7 !important;
}
/* A personal biography rendered from a schema-12 format and an ordinary
   imported B-passage must not inherit different font sizes on mobile. */
.hft .hft-biography-read .hft-prose:not(.hft-biography-pending-heading1):not(.hft-biography-pending-heading2),
.hft .hft-biography-read .hft-biography-read-passage,
.hft .hft-biography-read .hft-biography-inscription-line,
.hft .hft-biography-read .hft-biography-pending-line:not(.hft-biography-pending-heading1):not(.hft-biography-pending-heading2),
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-prose:not(.hft-biography-pending-heading1):not(.hft-biography-pending-heading2),
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-biography-pending-line:not(.hft-biography-pending-heading1):not(.hft-biography-pending-heading2) {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:15px !important;
  line-height:1.7 !important;
}
/* Normal text is left aligned; verse is centered, never italic solely
   because of its paragraph type. Actual <em> spans remain italic. */
.hft .hft-biography-read .hft-biography-pending-normal,
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-biography-pending-normal {
  text-align:left !important;
}
.hft .hft-biography-read .hft-biography-pending-verse,
.hft .hft-historical-biography-edit .hft-biography-passage-preview .hft-biography-pending-verse {
  text-align:center !important;
  font-style:normal !important;
}
.hft .hft-biography-read em,
.hft .hft-historical-biography-edit .hft-biography-passage-preview em {font-style:italic !important;}

/* 0.7.111 – optional writing help for personal biographies only. */
.hft .hft-biography-writing-guide{margin:8px 0 14px;padding:12px 14px;border:1px solid #cbd9df;border-radius:8px;background:#f5f9f9;color:var(--ink)}
.hft .hft-biography-writing-title{display:block;font-weight:700;font-size:14px;line-height:1.45}
.hft .hft-biography-writing-intro{font-size:13px;line-height:1.55;margin:7px 0 4px}
.hft .hft-biography-writing-tips{font-size:13px;line-height:1.55}
.hft .hft-biography-writing-tips summary{font-size:13px;color:var(--accent);cursor:pointer;min-height:34px;padding:6px 0}
.hft .hft-biography-writing-tips p{margin:6px 0 8px}
.hft .hft-biography-writing-example{font-style:italic}


/* =====================================================================
   Heilborn Family Tree 0.7.114 — safe and scrollable mobile dialogs.
   Applies to all member-facing dialogs (edit, new person, shared B-passage,
   relationship dates, member review, photo caption and photo/calendar popups).
   The visualViewport values are set by tree.js only while a dialog is open.
   100svh is a conservative CSS-only fallback for older browsers.
   ===================================================================== */
@media (max-width:1024px){
  dialog.hft-proposal-dialog,
  dialog.hft-member-review-dialog,
  dialog.hft-calendar-dialog,
  dialog.hft-lightbox{
    box-sizing:border-box;
    position:fixed;
    inset-inline:0;
    bottom:auto;
    top:calc(var(--hft-visible-dialog-top,0px) + 10px + env(safe-area-inset-top,0px));
    margin:0 auto;
    width:min(96vw,820px);
    max-width:calc(100vw - 16px);
    max-height:calc(100svh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scroll-padding-top:12px;
    scroll-padding-bottom:64px;
    padding:14px 12px max(24px,env(safe-area-inset-bottom,0px));
  }
  /* Progressive enhancement: 100dvh tracks the changing browser chrome. */
  @supports (height:100dvh){
    dialog.hft-proposal-dialog,
    dialog.hft-member-review-dialog,
    dialog.hft-calendar-dialog,
    dialog.hft-lightbox{
      max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    }
  }
  /* The JS variable also reacts when the software keyboard opens. */
  dialog.hft-proposal-dialog[style*="--hft-visible-dialog-height"],
  dialog.hft-member-review-dialog[style*="--hft-visible-dialog-height"],
  dialog.hft-calendar-dialog[style*="--hft-visible-dialog-height"],
  dialog.hft-lightbox[style*="--hft-visible-dialog-height"]{
    max-height:calc(var(--hft-visible-dialog-height) - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  }
  /* Keep the heading visible while the long form is scrolled. */
  dialog.hft-proposal-dialog .hft-proposal-form > h3:first-child,
  dialog.hft-member-review-dialog .hft-member-review-form > h3:first-child{
    position:sticky;
    top:0;
    z-index:4;
    background:#fff;
    padding:6px 0 9px;
    margin:0 0 5px!important;
    border-bottom:1px solid #e6ebf0;
  }
  /* Submit/Cancel remain usable without scrolling underneath browser bars. */
  dialog.hft-proposal-dialog .hft-proposal-actions,
  dialog.hft-member-review-dialog .hft-proposal-actions{
    position:sticky;
    bottom:0;
    z-index:5;
    background:#fff;
    border-top:1px solid #e6ebf0;
    padding:10px 0 max(12px,env(safe-area-inset-bottom,0px));
    margin-top:10px;
  }
  dialog.hft-proposal-dialog .hft-proposal-form,
  dialog.hft-member-review-dialog .hft-member-review-form{
    min-width:0;
  }
  dialog.hft-proposal-dialog .hft-proposal-actions button,
  dialog.hft-member-review-dialog .hft-proposal-actions button{
    min-height:44px;
  }
}
/* Larger writing surface for a PERSONAL biography, not every small note. */
.hft-person-proposal-dialog .hft-proposal-form textarea[name="personalBiography"]{
  min-height:310px;
  resize:vertical;
}
.hft-person-proposal-dialog .hft-bio-pilot .hft-bio-live-field{
  min-height:310px;
  max-height:620px;
  resize:vertical;
}
@media(max-width:1024px){
  .hft-person-proposal-dialog .hft-proposal-form textarea[name="personalBiography"],
  .hft-person-proposal-dialog .hft-bio-pilot .hft-bio-live-field{
    min-height:300px;
  }
}

/* 0.7.120: readable generated display name and consistent helper text.
   Applies only to the two member-facing person proposal forms. */
.hft-person-proposal-dialog .hft-proposal-form .hft-name-preview{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:12px 0 13px!important;
  padding:10px 13px;
  border:1px solid #b7d2e7;
  border-left:4px solid #1764cc;
  border-radius:7px;
  background:#eef6ff;
  color:#183d61;
  min-width:0;
}
.hft-person-proposal-dialog .hft-proposal-form .hft-name-preview-label{
  display:block;
  font-size:12px;
  font-weight:650;
  line-height:1.3;
}
.hft-person-proposal-dialog .hft-proposal-form .hft-name-preview-value{
  display:block;
  font-size:16px;
  font-weight:750;
  line-height:1.35;
  overflow-wrap:anywhere;
}
@media(max-width:600px){
  .hft-person-proposal-dialog .hft-proposal-form .hft-structured-name-intro{
    font-size:10.5px!important;
  }
  .hft-person-proposal-dialog .hft-proposal-form .hft-name-preview{
    margin:9px 0 11px!important;
    padding:9px 10px;
  }
  .hft-person-proposal-dialog .hft-proposal-form .hft-name-preview-label{
    font-size:11px;
  }
  .hft-person-proposal-dialog .hft-proposal-form .hft-name-preview-value{
    font-size:14px;
  }
}


/* 0.7.121 STAGING: readability & denser phone chrome. No genealogy or forms logic changes. */
/* Name intro is outside a <label>: match the 600-weight hints nested in labels. */
.hft-person-proposal-dialog .hft-proposal-form .hft-structured-name-intro{
  font-weight:600;
}

/* Dynamic viewport accounting: adapt fallback fullscreen to mobile browser controls.
   Older browsers retain the existing 100vh height fallback above. */
@supports (height: 100dvh){
  .hft:fullscreen,.hft.is-expanded{
    height:100dvh;
    max-height:100dvh;
  }
}

@media (max-width:600px){
  /* 0.7.123: extra-compact mobile quick actions, visually 32 CSS px.
     Allow wrapping where needed (narrow phones / enlarged text).
     Only normal page quick-action buttons; fullscreen controls remain unchanged. */
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded)>.hft-tools,
  .hft[data-view="person"]:not(:fullscreen):not(.is-expanded)>.hft-tools{
    gap:6px 7px;
    margin:5px 0 4px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded)>.hft-tools>.hft-outline,
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded)>.hft-tools>.hft-primary,
  .hft[data-view="person"]:not(:fullscreen):not(.is-expanded)>.hft-tools>.hft-outline,
  .hft[data-view="person"]:not(:fullscreen):not(.is-expanded)>.hft-tools>.hft-primary{
    min-height:32px!important;
    padding:2px 5px!important;
    font-size:11.5px!important;
    line-height:1.08;
  }
  /* Fullscreen stays usable: two compact rows, not tiny tap targets. */
  .hft:fullscreen .hft-tree-toolbar,.hft.is-expanded .hft-tree-toolbar{
    padding:4px 6px;
    gap:4px 5px;
  }
  .hft:fullscreen .hft-fullscreen-search .hft-search,
  .hft.is-expanded .hft-fullscreen-search .hft-search{
    min-height:38px;
    padding:6px 9px!important;
  }
  .hft:fullscreen .hft-scope select,.hft.is-expanded .hft-scope select{
    min-height:38px;
    padding:4px 6px;
  }
}


/* 0.7.234: discoverable view switcher.  The tree-only '?' stays next to the
   select in normal, compact and fullscreen layouts.  Other tooltips unchanged. */
.hft[data-view="tree"] .hft-view-switcher{
  display:flex;align-items:center;gap:8px;min-width:0;
  padding:6px 8px;border:1px solid #8ebbd7;border-radius:9px;
  background:#edf7fc;box-shadow:0 1px 5px rgba(36,78,107,.09);
}
.hft[data-view="tree"] .hft-view-switcher .hft-scope{
  min-width:0;display:flex;align-items:center;gap:7px;margin:0;
  color:#244e6b;font-weight:750;
}
.hft[data-view="tree"] .hft-view-switcher .hft-scope-title{
  font-size:12px;line-height:1.2;white-space:nowrap;
}
.hft[data-view="tree"] .hft-view-switcher .hft-scope select{
  min-width:0;max-width:240px;min-height:38px;
  border:1px solid #92bbd4;border-radius:7px;background:#fff;
  color:#173b56;font-weight:650;
}
.hft[data-view="tree"] .hft-view-switcher .hft-tree-help-button{
  position:static!important;inset:auto!important;order:initial!important;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px!important;min-width:40px!important;height:40px!important;
  min-height:40px!important;flex:0 0 40px!important;margin:0!important;
  border-radius:8px;font-size:19px!important;
}
@media(min-width:601px){
  /* Old fullscreen CSS left a reserved 64 px strip for the ? button. */
  .hft[data-view="tree"]:fullscreen .hft-tree-toolbar,
  .hft[data-view="tree"].is-expanded .hft-tree-toolbar{padding-left:10px}
}
@media(max-width:1100px){
  .hft[data-view="tree"] .hft-view-switcher .hft-scope-title{font-size:11px}
  .hft[data-view="tree"] .hft-view-switcher .hft-scope select{max-width:200px}
}
/* Regular tree, also on tablets: keep the selector + ? as a single grid item. */
@media(max-width:600px){
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-view-switcher{
    grid-column:1;grid-row:1;width:100%;min-width:0;
    gap:5px;padding:5px 6px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-view-switcher .hft-scope{
    flex:1 1 auto;width:auto;min-width:0;display:flex;
    flex-direction:column;align-items:stretch;gap:3px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-view-switcher .hft-scope select{
    width:100%;max-width:none;min-width:0;min-height:38px;font-size:11px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-view-switcher .hft-tree-help-button{
    align-self:flex-end;width:38px!important;min-width:38px!important;
    height:38px!important;min-height:38px!important;flex-basis:38px!important;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-fullscreen-button{grid-column:2;grid-row:1}
  .hft[data-view="tree"]:fullscreen .hft-view-switcher,
  .hft[data-view="tree"].is-expanded .hft-view-switcher{
    grid-column:1;grid-row:2;min-width:0;gap:5px;padding:3px 5px;
  }
  .hft[data-view="tree"]:fullscreen .hft-view-switcher .hft-scope,
  .hft[data-view="tree"].is-expanded .hft-view-switcher .hft-scope{flex:1 1 auto;min-width:0;display:block;font-size:0}
  .hft[data-view="tree"]:fullscreen .hft-view-switcher .hft-scope-title,
  .hft[data-view="tree"].is-expanded .hft-view-switcher .hft-scope-title{
    position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;
  }
  .hft[data-view="tree"]:fullscreen .hft-view-switcher .hft-scope select,
  .hft[data-view="tree"].is-expanded .hft-view-switcher .hft-scope select{
    width:100%;max-width:none;min-width:0;min-height:38px;font-size:11px;
  }
  .hft[data-view="tree"]:fullscreen .hft-view-switcher .hft-tree-help-button,
  .hft[data-view="tree"].is-expanded .hft-view-switcher .hft-tree-help-button{
    width:36px!important;min-width:36px!important;height:36px!important;
    min-height:36px!important;flex-basis:36px!important;
  }
  .hft[data-view="tree"]:fullscreen .hft-chart-controls,
  .hft[data-view="tree"].is-expanded .hft-chart-controls{grid-column:2;grid-row:2}
}
@media(max-width:600px){
  .hft[data-view="tree"]:fullscreen .hft-fullscreen-button,
  .hft[data-view="tree"].is-expanded .hft-fullscreen-button{grid-column:3;grid-row:2}
}
/* Very narrow fullscreen phones: preserve a readable select and its adjacent ?.
   Put zoom controls on a separate row rather than clipping the view names. */
@media(max-width:420px){
  .hft[data-view="tree"]:fullscreen .hft-tree-toolbar,
  .hft[data-view="tree"].is-expanded .hft-tree-toolbar{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .hft[data-view="tree"]:fullscreen .hft-fullscreen-button,
  .hft[data-view="tree"].is-expanded .hft-fullscreen-button{
    grid-column:2;grid-row:2;
  }
  .hft[data-view="tree"]:fullscreen .hft-chart-controls,
  .hft[data-view="tree"].is-expanded .hft-chart-controls{
    grid-column:1/-1;grid-row:3;justify-content:flex-start;
  }
}


/* 0.7.236 – Compact, balanced phone layout for NORMAL tree only.
   Fullscreen, tablet/desktop, other pages and all tree gestures are unchanged. */
@media (max-width:600px){
  /* Align the search and all direct action buttons in one predictable grid. */
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) > .hft-tools.hft-tree-quick-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
    gap:6px;
    margin:5px 0 6px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) > .hft-tools.hft-tree-quick-actions-4,
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) > .hft-tools.hft-tree-quick-actions-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) > .hft-tools.hft-tree-quick-actions > .hft-search-wrap{
    grid-column:1 / -1;
    min-width:0;
    width:100%;
    margin:0;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) > .hft-tools.hft-tree-quick-actions > button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    min-height:45px!important;
    padding:5px 4px!important;
    font-size:11px!important;
    line-height:1.17;
    text-align:center;
    overflow-wrap:break-word;
    white-space:normal;
  }
  /* Keep view, help, zoom readout, target icon, fullscreen on ONE row. */
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-tree-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-auto-flow:row dense;
    align-items:center;
    column-gap:5px;
    row-gap:4px;
    min-height:0;
    padding:5px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-chart-heading.is-controls-only{
    display:contents;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-view-switcher{
    grid-column:1;
    grid-row:auto;
    width:100%;
    min-width:0;
    gap:3px;
    padding:3px 4px;
    border-radius:8px;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-view-switcher .hft-scope{
    display:flex;
    flex-direction:row;
    align-items:center;
    flex:1 1 auto;
    gap:3px;
    width:auto;
    min-width:0;
  }
  /* The full accessible label stays in the markup, but the phone shows 'Vy'. */
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-view-switcher .hft-scope-title{
    display:block;
    width:auto;
    flex:0 0 auto;
    font-size:0;
    line-height:1;
  }
  .hft[lang="sv"][data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-scope-title::before{content:"Vy";font-size:10px}
  .hft[lang="en"][data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-scope-title::before{content:"View";font-size:10px}
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-view-switcher .hft-scope select{
    box-sizing:border-box;
    flex:1 1 auto;
    width:100%;
    min-width:0;
    max-width:none;
    min-height:36px;
    height:36px;
    padding:3px 1px 3px 4px;
    font-size:11px;
    text-overflow:ellipsis;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-view-switcher .hft-tree-help-button{
    align-self:center;
    box-sizing:border-box;
    width:34px!important;
    min-width:34px!important;
    height:36px!important;
    min-height:36px!important;
    flex:0 0 34px!important;
    font-size:18px!important;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-chart-controls{
    grid-column:2;
    grid-row:auto;
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:flex-end;
    width:auto;
    min-width:0;
    overflow:visible;
    gap:3px;
    padding:0;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-chart-controls output{
    flex:0 0 auto;
    min-width:31px;
    font-size:11px;
    text-align:right;
    white-space:nowrap;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-chart-controls .hft-zoom-person-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    flex:0 0 36px;
    width:36px;
    min-width:36px;
    height:38px;
    min-height:38px;
    padding:0!important;
    border:1px solid #c5d5df;
    border-radius:8px;
    background:#fff;
    color:#285b7e;
    text-decoration:none;
    font-size:0!important;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-chart-controls .hft-zoom-person-button::before{
    content:"◎";
    font-size:23px;
    line-height:1;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-fullscreen-button{
    grid-column:3;
    grid-row:auto;
    box-sizing:border-box;
    display:inline-flex;
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
    padding:0!important;
    gap:0;
    white-space:nowrap;
    font-size:0!important;
  }
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-fullscreen-button::before{font-size:19px}
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-branch-mode{
    grid-column:1 / -1;
    grid-row:auto;
    width:100%;
    margin:0;
  }
  /* The tree starts immediately beneath the single compact control strip. */
  .hft[data-view="tree"]:not(:fullscreen):not(.is-expanded) .hft-viewport{
    height:clamp(410px,58svh,560px);
  }
}

/* 0.7.237 – Phone FULLSCREEN only.  The existing <=420px rule used to push the
   zoom percentage and target control onto a third row.  Use a dense grid so the
   search stays above one balanced view / help / zoom / exit strip.  This also
   covers iOS's .is-expanded fullscreen fallback; normal tree and desktop stay
   unchanged.  A branch notice, when present, takes its own complete first row. */
@media (max-width:600px){
  .hft[data-view="tree"]:fullscreen .hft-tree-toolbar,
  .hft[data-view="tree"].is-expanded .hft-tree-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-auto-flow:row dense;
    align-items:center;
    column-gap:5px;
    row-gap:4px;
    min-height:0;
    padding:5px 6px;
    margin:0;
  }
  .hft[data-view="tree"]:fullscreen .hft-chart-heading.is-controls-only,
  .hft[data-view="tree"].is-expanded .hft-chart-heading.is-controls-only{
    display:contents;
  }
  .hft[data-view="tree"]:fullscreen .hft-branch-mode,
  .hft[data-view="tree"].is-expanded .hft-branch-mode{
    grid-column:1 / -1;
    grid-row:auto;
    min-width:0;
    margin:0;
  }
  .hft[data-view="tree"]:fullscreen .hft-fullscreen-search,
  .hft[data-view="tree"].is-expanded .hft-fullscreen-search{
    grid-column:1 / -1;
    grid-row:auto;
    display:block;
    width:100%;
    min-width:0;
    max-width:none;
    margin:0;
  }
  .hft[data-view="tree"]:fullscreen .hft-fullscreen-search .hft-search,
  .hft[data-view="tree"].is-expanded .hft-fullscreen-search .hft-search{
    box-sizing:border-box;
    width:100%;
    min-width:0;
    min-height:38px;
    height:38px;
    margin:0;
    padding:6px 9px!important;
  }
  .hft[data-view="tree"]:fullscreen .hft-view-switcher,
  .hft[data-view="tree"].is-expanded .hft-view-switcher{
    grid-column:1;
    grid-row:auto;
    display:flex;
    align-items:center;
    gap:4px;
    width:100%;
    min-width:0;
    max-width:none;
    padding:3px 4px;
    border-radius:8px;
  }
  .hft[data-view="tree"]:fullscreen .hft-view-switcher .hft-scope,
  .hft[data-view="tree"].is-expanded .hft-view-switcher .hft-scope{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    width:auto;
    margin:0;
    gap:0;
  }
  .hft[data-view="tree"]:fullscreen .hft-view-switcher .hft-scope select,
  .hft[data-view="tree"].is-expanded .hft-view-switcher .hft-scope select{
    box-sizing:border-box;
    flex:1 1 auto;
    width:100%;
    min-width:0;
    max-width:none;
    min-height:38px;
    height:38px;
    padding:4px 2px 4px 5px;
    font-size:11.5px;
    text-overflow:ellipsis;
  }
  .hft[data-view="tree"]:fullscreen .hft-view-switcher .hft-tree-help-button,
  .hft[data-view="tree"].is-expanded .hft-view-switcher .hft-tree-help-button{
    box-sizing:border-box;
    align-self:center;
    flex:0 0 36px!important;
    width:36px!important;
    min-width:36px!important;
    height:38px!important;
    min-height:38px!important;
    font-size:18px!important;
  }
  .hft[data-view="tree"]:fullscreen .hft-chart-controls,
  .hft[data-view="tree"].is-expanded .hft-chart-controls{
    grid-column:2;
    grid-row:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:nowrap;
    width:auto;
    min-width:0;
    gap:3px;
    padding:0;
    margin:0;
    overflow:visible;
  }
  .hft[data-view="tree"]:fullscreen .hft-chart-controls output,
  .hft[data-view="tree"].is-expanded .hft-chart-controls output{
    flex:0 0 auto;
    min-width:31px;
    width:auto;
    font-size:11px;
    white-space:nowrap;
    text-align:right;
  }
  .hft[data-view="tree"]:fullscreen .hft-chart-controls .hft-zoom-person-button,
  .hft[data-view="tree"].is-expanded .hft-chart-controls .hft-zoom-person-button{
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
    padding:0!important;
    border-radius:8px;
  }
  .hft[data-view="tree"]:fullscreen .hft-fullscreen-button,
  .hft[data-view="tree"].is-expanded .hft-fullscreen-button{
    grid-column:3;
    grid-row:auto;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
    padding:0!important;
    font-size:0!important;
    gap:0;
  }
  /* Keep the tree viewport as tall as possible; do not change node/zoom logic. */
  .hft[data-view="tree"]:fullscreen .hft-chart-panel,
  .hft[data-view="tree"].is-expanded .hft-chart-panel{
    min-height:0;
  }
}

/* 0.7.238: improve mobile fullscreen zoom label contrast and hide person tooltips immediately when the tree is panned/zoomed. */
@media(max-width:600px){.hft[data-view="tree"]:fullscreen .hft-chart-controls output,.hft[data-view="tree"].is-expanded .hft-chart-controls output{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:38px;padding:0 8px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.96);box-shadow:0 1px 4px rgba(36,52,73,.08);text-align:center}}


/* 0.7.240 – mobile fullscreen zoom readout contrast.
   Add a small rounded background box behind the 100% label so it remains readable
   even when a person card or tree line is directly behind it. Normal tree, desktop
   and control behavior stay unchanged. */
@media (max-width:600px){
  .hft[data-view="tree"]:fullscreen .hft-chart-controls output,
  .hft[data-view="tree"].is-expanded .hft-chart-controls output{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 8px;
    border:1px solid #c5d5df;
    border-radius:8px;
    background:#fff;
    color:#244e6b;
    box-shadow:0 1px 4px rgba(36,78,107,.08);
  }
}

/* 0.7.238: Profile relation cards must never appear preselected on touch.
   Mobile Safari can keep :hover/:active after a tapped card rerenders as a new
   profile. Override the WP-theme button state only for relation cards; leave
   tree-node selection, other buttons and keyboard focus outlines untouched. */
@media (hover: none), (pointer: coarse){
  .hft[data-view="person"] button.hft-relative,
  .hft[data-view="person"] button.hft-relative:hover,
  .hft[data-view="person"] button.hft-relative:focus,
  .hft[data-view="person"] button.hft-relative:active{
    background:#fff!important;
    border-color:var(--line)!important;
    color:var(--ink)!important;
    -webkit-tap-highlight-color:transparent;
    transition:none!important;
  }
  .hft[data-view="person"] button.hft-relative .hft-name{
    color:var(--ink)!important;
  }
  .hft[data-view="person"] button.hft-relative .hft-dates{
    color:var(--muted)!important;
  }
  .hft[data-view="person"] button.hft-relative:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:3px;
  }
}