/* Somos Humanidad · P1. Visual authority after the legacy layers.
 * Palette/surface vocabulary adapted from PR #193 (4b61e17); no selector JS.
 * Ambient light adapted from mundo-preview-v1.css. No images, filters or
 * animated backgrounds. F3 geometry, camera, LOD and event contracts remain owned
 * by the existing chart. Inset strokes preserve every card's measured size. */
:root {
  --sh-night: #071327;
  --sh-abyss: #030916;
  --sh-navy: #0b2040;
  --sh-panel-glass: rgba(10, 27, 50, .94);
  --sh-raised: #112d4e;
  --sh-white: #f5f8ff;
  --sh-secondary: #ccdef5;
  --sh-muted: #a9c2df;
  --sh-blue: #73bdff;
  --sh-gold: #d9b36a;
  --sh-gold-light: #f0d7a1;
  --sh-hairline: rgba(217, 179, 106, .28);
  --sh-hairline-strong: rgba(240, 215, 161, .65);
  --sh-surface: linear-gradient(145deg, rgba(19, 48, 81, .92), var(--sh-panel-glass));
  --sh-ambient: radial-gradient(ellipse at 82% 8%, rgba(39, 117, 229, .22), transparent 48%),
    radial-gradient(ellipse at 8% 70%, rgba(55, 116, 183, .12), transparent 48%),
    radial-gradient(ellipse at 30% 0%, rgba(217, 179, 106, .07), transparent 32%),
    linear-gradient(165deg, var(--sh-night), var(--sh-abyss));
  --sh-elevated-shadow: inset 0 0 0 1px var(--sh-hairline), 0 10px 24px rgba(0, 5, 17, .24);
  --sh-focus: 0 0 0 3px rgba(115, 189, 255, .25);
  --sh-r-md: 18px;
}

/* Map the existing systems to the same vocabulary without replacing layouts. */
body #familyView {
  --h100-bg: var(--sh-abyss); --h100-bg2: var(--sh-night);
  --h100-panel: var(--sh-panel-glass); --h100-panel2: var(--sh-raised);
  --h100-text: var(--sh-white); --h100-muted: var(--sh-muted);
  --h100-gold: var(--sh-gold); --h100-gold2: var(--sh-gold-light);
  --h20-surface: var(--sh-panel-glass); --h20-elevated: var(--sh-raised);
  --h20-text: var(--sh-white); --h20-text-2: var(--sh-secondary);
  --h20-text-3: var(--sh-muted); --h20-border: var(--sh-hairline);
  --hx-text: var(--sh-white); --hx-muted: var(--sh-muted);
  --htc-muted: var(--sh-muted); --htc-glass: rgba(7, 19, 39, .94);
  color: var(--sh-white); color-scheme: dark;
}
body .account-modal:not(.auth-only) .social-shell,
body #familyView.social-app { background: var(--sh-abyss) !important; }
body #familyView .social-main { background: var(--sh-ambient) !important; }
body #familyView .social-sidebar {
  background: linear-gradient(160deg, #102642, var(--sh-night)) !important;
  border-color: var(--sh-hairline) !important;
}
body #familyView .df-appbar {
  background: rgba(7, 19, 39, .96) !important;
  border-color: var(--sh-hairline) !important;
}
body #familyView :is(.profile-mini, .hrc-mas-sheet, .hrc-mobile-nav-more) {
  background: var(--sh-surface) !important; border-color: var(--sh-hairline) !important;
}
body #familyView .social-nav button { color: var(--sh-secondary) !important; }
body #familyView .social-nav button:is(.active, [aria-current="page"]) {
  color: var(--sh-gold-light) !important;
  background: linear-gradient(110deg, rgba(115, 189, 255, .14), rgba(217, 179, 106, .1)) !important;
  border-color: var(--sh-hairline-strong) !important;
}

/* Shared surfaces: named components only. Covers, photos and 3D canvases excluded. */
body { --sh-box-padding: 24px; --sh-box-gap: 16px; --sh-box-radius: 24px; --sh-box-max: 720px; }
/* Profile cards follow the same compact spacing as the family assistant. */
body #familyView#familyView .profile-v50-grid {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--sh-box-gap) !important; align-items: start !important;
  max-width: 1120px !important; margin: 20px auto 0 !important;
}
body #familyView#familyView .profile-v50-row { display: contents !important; }
body #familyView#familyView .profile-v50-card {
  min-width: 0 !important; min-height: 0 !important; height: auto !important;
  padding: var(--sh-box-padding) !important; border: 1px solid var(--sh-hairline-strong) !important;
  border-radius: var(--sh-box-radius) !important;
}
body #familyView#familyView .profile-v50-grid > .profile-v50-card { grid-column: auto !important; }
body #familyView#familyView .profile-v50-card header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin: 0 0 16px !important; padding: 0 !important;
}
body #familyView#familyView .profile-v50-card h3 {
  margin: 6px 0 0 !important; font: 600 22px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -.025em !important;
}
body #familyView#familyView .profile-v50-info-list { margin: 0 !important; }
body #familyView#familyView .profile-v50-info-list b { min-width: 0; overflow-wrap: anywhere; }
body #familyView#familyView #profileV50PlacesMount .pp-section-head { flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
/* The card header already says «Lugares vinculados»; do not repeat it inside the section. */
body #familyView#familyView #profileV50PlacesMount .pp-section-head > strong { display: none !important; }
body #familyView#familyView #profileV50PlacesMount .pp-add-btn { min-height: 44px; }
body #familyView#familyView .profile-v50-family > button {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 12px;
  align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 12px 0 !important; margin: 0 !important;
}
body #familyView#familyView .profile-v50-family > button :is(span, b) { min-width: 0; overflow-wrap: anywhere; }
body #familyView#familyView .profile-v50-family > button b { text-align: right; }
body #familyView#familyView .profile-v50-empty {
  min-height: 0 !important; padding: 20px 16px !important; border-radius: 16px;
}
body #familyView#familyView .profile-v50-empty strong { font-size: 18px !important; }
body #familyView#familyView .profile-v50-empty p { margin: 8px 0 16px !important; font-size: 14px !important; line-height: 1.5; }
body #familyView#familyView .profile-v50-mini-action { min-height: 44px; flex-shrink: 0; font-size: 13px; }
body #familyView#familyView .profile-v50-connected { max-width: 1120px; margin: 16px auto 0 !important; }
@media (max-width: 1000px) {
  body #familyView#familyView .profile-v50-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 599px) {
  body #familyView#familyView .profile-v50-card { padding: 18px !important; border-radius: 20px !important; }
  body #familyView#familyView .profile-v50-card h3 { font-size: 20px !important; }
  body #familyView#familyView .profile-v50-card header { flex-wrap: wrap; }
}
body #familyView#familyView .account-view :is(.beta20-panel, .family-entry-card, .connection-card,
  .member-invitation-card, .member-invitation-history, .composer-card,
  .profile-v50-card, .humanity-product-stat-row, .profile-social-v2-post,
  .beta20-memory-card, .mural-card, .mural-composer, .hsw-post, .hsw-composer,
  .humanity-product-mini-surface, .conversation-list, .chat-panel,
  .hm1-card, .hm1-done, .hm1-step) {
  background: var(--sh-surface) !important;
  border-color: var(--sh-hairline) !important;
  box-shadow: inset 0 1px 0 rgba(161, 206, 255, .07), 0 10px 28px rgba(0, 5, 17, .16) !important;
  color: var(--sh-secondary) !important;
}
body #familyView :is(.beta20-panel, .family-entry-card, .connection-card,
  .member-invitation-card, .profile-v50-card, .beta20-memory-card, .hsw-post) {
  border-radius: var(--sh-r-md) !important;
}
body #familyView :is(.social-head h2, .beta20-page-head h2, .beta20-panel h3,
  .family-entry-card h3, .profile-v50-name-row h3, .hsw-top h1,
  .profile-v50-card h3, .humanity-product-title) { color: var(--sh-white) !important; }
body #familyView :is(.account-copy, .humanity-product-subtitle, .beta20-page-head p,
  .mural-intro, .tree-help, .tree-workspace-status, .humanidad-f3-life,
  .profile-v50-meta, .profile-social-v2-status, .empty-chat) { color: var(--sh-muted) !important; }
body #familyView :is(.account-kicker, .humanity-product-eyebrow, .hsw-kicker) {
  color: var(--sh-gold-light) !important;
}
body #familyView .beta20-home-hero {
  background: var(--sh-ambient) !important; border-color: var(--sh-hairline-strong) !important;
}
body #familyView#familyView .account-view[data-view="profile"] .profile-v50-hero {
  background-color: var(--sh-night) !important; border-color: var(--sh-hairline) !important;
}
body #familyView#familyView .account-view :is(.hm1-text, .account-field) {
  background: #102846 !important; color: var(--sh-white) !important;
  border-color: rgba(169, 194, 223, .38) !important;
}
body #familyView#familyView .account-view :is(.hm1-subtitle, .profile-v50-bio) {
  color: var(--sh-secondary) !important;
}
body #familyView#familyView .account-view[data-view="invitations"] .beta20-invite-summary > span {
  background: var(--sh-surface) !important; border-color: var(--sh-hairline) !important;
}
body #familyView .bubble { background: var(--sh-raised) !important; color: var(--sh-white) !important; }
body #familyView .bubble.mine {
  background: #183c62 !important; border-color: rgba(115, 189, 255, .4) !important;
}
body #familyView .hsw-frame {
  --sw-bg: var(--sh-night); --sw-card: var(--sh-panel-glass);
  --sw-card2: var(--sh-raised); --sw-muted: var(--sh-muted);
  --sw-text: var(--sh-white); --sw-line: var(--sh-hairline);
}
body #familyView :is(.hsw-author small, .hsw-more, .hsw-time, .hsw-sub) { color: var(--sh-muted) !important; }
body #familyView .hsw-post-body > p { color: var(--sh-secondary) !important; }

/* Native actions and fields retain disabled, validation and destructive states. */
body #familyView .account-field, body .account-modal.auth-only .account-field {
  background: #102846 !important; color: var(--sh-white) !important;
  border-color: rgba(169, 194, 223, .38) !important;
  font-size: max(16px, 1rem); /* iOS input focus must not zoom the viewport */
}
body #familyView .account-field::placeholder,
body .account-modal.auth-only .account-field::placeholder { color: var(--sh-muted); opacity: 1; }
body #familyView#familyView .account-view .account-field::placeholder,
body #accountModal #loginView .account-field::placeholder,
body #safeOnboarding .safe-field::placeholder,
body #registerModal .field::placeholder { color: var(--sh-muted) !important; opacity: 1 !important; }
body #familyView .account-action.secondary {
  color: var(--sh-secondary) !important; background: #102846 !important;
  border-color: var(--sh-hairline) !important;
}
body #familyView :is(button, a, input, select, textarea, [tabindex]):focus-visible,
body .account-modal.auth-only :is(button, a, input, select):focus-visible {
  outline: 2px solid var(--sh-blue) !important; outline-offset: 3px !important;
}

/* Auth and public entry: existing imagery and light editorial sections preserved. */
body .account-modal.auth-only { background: rgba(3, 9, 22, .92) !important; }
body .account-modal.auth-only :is(.social-shell, .login-card) {
  background: var(--sh-ambient) !important; color: var(--sh-white) !important;
  border-color: var(--sh-hairline-strong) !important;
}
body .account-modal.auth-only :is(h2, label) { color: var(--sh-white) !important; }
body .account-modal.auth-only .account-copy { color: var(--sh-secondary) !important; }
body #registerModal { background: var(--sh-ambient) !important; }
body #registerModal :is(.progress-card, .step-card, .completion-auth) {
  background: var(--sh-surface) !important; border-color: var(--sh-hairline) !important;
}
body #registerModal .field {
  background: #102846 !important; color: var(--sh-white) !important;
  border-color: rgba(169, 194, 223, .38) !important; font-size: max(16px, 1rem);
}
body #safeOnboarding { background: rgba(3, 9, 22, .94) !important; color: var(--sh-white); }
body #safeOnboarding .safe-onboarding-card {
  background: var(--sh-ambient) !important; border-color: var(--sh-hairline-strong) !important;
}
/* A focused onboarding sheet: keep the form and its actions together. */
body:has(#safeOnboarding.open) { overflow: hidden; }
body #safeOnboarding#safeOnboarding { padding: 44px 16px 16px !important; box-sizing: border-box; }
body #safeOnboarding#safeOnboarding .safe-onboarding-card {
  width: min(var(--sh-box-max), 100%) !important; min-height: 0 !important; height: auto !important;
  max-height: calc(100dvh - 60px) !important; padding: 28px !important;
  border: 1px solid var(--sh-hairline-strong) !important; border-radius: var(--sh-box-radius) !important;
  background: radial-gradient(ellipse at 50% 0, rgba(67, 143, 227, .22), transparent 65%),
    linear-gradient(155deg, #102541, #071322 75%) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(171, 214, 255, .34) !important;
  scrollbar-width: thin; scrollbar-gutter: stable;
}
body #safeOnboarding#safeOnboarding .safe-screen { width: 100% !important; }
body #safeOnboarding#safeOnboarding .safe-onboarding-close {
  position: absolute !important; top: 14px !important; right: 14px !important;
  float: none !important; margin: 0 !important; width: 44px; height: 44px;
  background: #102541 !important;
}
body #safeOnboarding#safeOnboarding .safe-kicker { display: block; padding-right: 42px; font-size: 11px; }
body #safeOnboarding#safeOnboarding h2 {
  max-width: 100% !important; padding-right: 28px; margin: 14px 0 10px !important;
  font: 600 clamp(26px, 3vw, 34px)/1.15 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -.025em !important;
}
body #safeOnboarding#safeOnboarding .safe-lead { max-width: 100%; margin: 0; font-size: 15px; line-height: 1.5; }
body #safeOnboarding#safeOnboarding .safe-progress { margin: 18px 0; }
body #safeOnboarding#safeOnboarding .safe-fields { gap: 10px; margin-top: 16px; }
body #safeOnboarding#safeOnboarding .safe-field { min-width: 0; min-height: 46px; padding: 12px 14px; }
body #safeOnboarding#safeOnboarding .safe-actions { gap: 10px; margin-top: 20px; }
body #safeOnboarding#safeOnboarding :is(.safe-primary, .safe-secondary) {
  min-height: 46px; padding: 12px 18px; font-size: 14px; letter-spacing: 0; border-radius: 14px;
}
body #safeOnboarding#safeOnboarding .safe-status:empty { display: none; }
body #safeOnboarding#safeOnboarding .safe-review { gap: 0; margin-top: 12px; }
body #safeOnboarding#safeOnboarding .safe-review div { padding: 10px 0; font-size: 14px; }
body #safeOnboarding#safeOnboarding .safe-review strong { overflow-wrap: anywhere; }
body #safeOnboarding#safeOnboarding .safe-choice-grid { margin-top: 20px; }
body #safeOnboarding#safeOnboarding .safe-choice { min-height: 132px; padding: 18px; }
body #safeOnboarding#safeOnboarding .safe-success { text-align: center !important; }
body #safeOnboarding#safeOnboarding .safe-success h2 { padding-right: 0; }
body #safeOnboarding#safeOnboarding .safe-success-constellation {
  width: min(360px, 90%); height: 140px; margin: 12px auto 20px;
}
@media (min-width: 600px) {
  body #safeOnboarding#safeOnboarding .safe-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  body #safeOnboarding#safeOnboarding { padding: 44px 12px 12px !important; }
  body #safeOnboarding#safeOnboarding .safe-onboarding-card { padding: 20px 16px 18px !important; max-height: calc(100dvh - 56px) !important; border-radius: 20px !important; }
  body #safeOnboarding#safeOnboarding h2 { font-size: 24px !important; }
  body #safeOnboarding#safeOnboarding .safe-lead { font-size: 14px; line-height: 1.45; }
  body #safeOnboarding#safeOnboarding .safe-progress { margin: 12px 0; }
  body #safeOnboarding#safeOnboarding .safe-actions { margin-top: 16px; }
  body #safeOnboarding#safeOnboarding .safe-fields { grid-template-columns: minmax(0, 1fr); }
  body #safeOnboarding#safeOnboarding .safe-field { min-height: 44px; padding: 10px 12px; }
  body #safeOnboarding#safeOnboarding .safe-actions :is(.safe-primary, .safe-secondary) { flex: 1 1 auto; }
  body #safeOnboarding#safeOnboarding .safe-review div { gap: 12px; font-size: 13px; padding: 8px 0; }
  body #safeOnboarding#safeOnboarding .safe-success-constellation { height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  body #safeOnboarding#safeOnboarding, body #safeOnboarding#safeOnboarding * {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}
body #safeOnboarding :is(.safe-choice, .safe-note) {
  background: var(--sh-surface) !important; border-color: var(--sh-hairline) !important;
}
body #safeOnboarding :is(.safe-lead, .safe-choice span, .safe-consent) { color: var(--sh-secondary) !important; }
body #safeOnboarding .safe-field {
  background: #102846 !important; color: var(--sh-white) !important;
  border-color: rgba(169, 194, 223, .38) !important; font-size: max(16px, 1rem);
}
body #safeOnboarding :is(button, input, a):focus-visible {
  outline: 2px solid var(--sh-blue) !important; outline-offset: 3px;
}
body #publicExperienceV3 { --v3-black: var(--sh-abyss); --v3-ivory: var(--sh-white); }
body #publicExperienceV3 .v3-dark { background: var(--sh-ambient); }
body #publicExperienceV3 .v3-opening-sticky { background-color: var(--sh-night); }
body .v3-nav:not(.is-light) {
  background: linear-gradient(180deg, rgba(7, 19, 39, .97), rgba(7, 19, 39, .72));
  border-bottom-color: var(--sh-hairline);
}

/* Tree framing: preserve all widths, heights, transforms and level-of-detail rules. */
body #familyView .tree-social-head, body #familyView .humanidad-f3-toolbar {
  background: var(--sh-surface) !important; border-color: var(--sh-hairline) !important;
}
body #familyView #familyTreeSelector {
  background: #102846 !important; color: var(--sh-white) !important;
  border-color: var(--sh-hairline-strong) !important;
}
body #familyView .humanidad-f3-shell { background-color: var(--sh-abyss) !important; }
body #familyView #familyMemberList .humanidad-f3-stage { background: var(--sh-ambient) !important; }
/* Specificity beats the legacy hpx rules; inset borders do not consume space. */
body #familyView #HumanidadFamilyChart .card .humanidad-f3-card.hpx-card {
  background: linear-gradient(155deg, #143558, #091b34 75%) !important;
  box-shadow: var(--sh-elevated-shadow) !important;
  border-radius: 18px !important;
  transition: background-color .18s ease, box-shadow .18s ease !important;
}
body #familyView #HumanidadFamilyChart .card .humanidad-f3-card strong {
  color: var(--sh-white) !important;
}
body #familyView #HumanidadFamilyChart .card .humanidad-f3-role {
  color: var(--sh-gold-light) !important;
  text-decoration: underline; text-decoration-color: rgba(217, 179, 106, .4);
  text-underline-offset: 3px;
}
body #familyView #HumanidadFamilyChart .card .humanidad-f3-life { color: var(--sh-muted) !important; }
body #familyView #HumanidadFamilyChart .card .hpx-initials { color: var(--sh-secondary) !important; }
body #familyView #HumanidadFamilyChart .card .humanidad-f3-avatar img { object-fit: cover; }
body #familyView #HumanidadFamilyChart .card .humanidad-f3-card.is-main,
body #familyView #HumanidadFamilyChart .card:is(.node-selected, .hpx-l-selected) .humanidad-f3-card {
  background: linear-gradient(155deg, #21496e, #102747) !important;
  box-shadow: inset 0 0 0 1px var(--sh-gold-light), 0 0 18px rgba(217, 179, 106, .22) !important;
}
body #familyView #HumanidadFamilyChart .card .humanidad-f3-card.is-memorial {
  background: linear-gradient(155deg, #172a45, #0c1930) !important;
  box-shadow: inset 0 0 0 1px var(--sh-hairline-strong), 0 8px 20px rgba(0, 5, 17, .22) !important;
}
@media (hover: hover) {
  body #familyView #HumanidadFamilyChart .card:hover .humanidad-f3-card.hpx-card {
    box-shadow: inset 0 0 0 1px var(--sh-blue), 0 0 16px rgba(115, 189, 255, .24) !important;
  }
}
body #familyView #HumanidadFamilyChart .card:focus-visible .humanidad-f3-card.hpx-card {
  outline: 2px solid var(--sh-blue) !important; outline-offset: 3px;
  box-shadow: var(--sh-focus) !important;
}
/* Existing + actions only; no synthetic buttons or new relationship behavior. */
body #familyView :is(.humanidad-f3-mini-add, [data-hfc-action="add-child"], #addRelative, #addRelativeF3) {
  color: var(--sh-gold-light) !important; background: #12355a !important;
  border-color: var(--sh-hairline-strong) !important;
}
body #familyView #addRelativeF3 { min-height: 44px !important; }
/* Preserve the intentionally simplified overview and moving-camera paint budget. */
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] #HumanidadFamilyChart .humanidad-f3-card.hpx-card {
  background: transparent !important; box-shadow: none !important;
}
#familyMemberList#familyMemberList .htc-canvas .htc-moving #HumanidadFamilyChart .humanidad-f3-card.hpx-card {
  transition: none !important; box-shadow: inset 0 0 0 1px var(--sh-hairline) !important;
}
#familyMemberList#familyMemberList .htc-canvas .htc-zoom-in {
  background: #163b60 !important; border-color: var(--sh-hairline-strong) !important;
}
@media (prefers-reduced-motion: reduce) {
  body #familyView #HumanidadFamilyChart .card .humanidad-f3-card.hpx-card,
  #familyMemberList#familyMemberList .htc-canvas .htc-btn,
  body #familyView #HumanidadFamilyChart .card .humanidad-f3-avatar img,
  body #familyView :is(.humanidad-f3-card, .humanidad-f3-avatar img, .card,
    .account-action, .social-nav button, .family-entry-card, .hsw-post,
    .beta20-memory-card), body .account-modal.auth-only .account-action,
    body .v3-nav, body #publicExperienceV3 .v3-cta {
    transition: none !important; animation: none !important;
  }
}
/* The legacy reduced-motion translateY(-50%) clips the mobile hero behind
 * the fixed navigation. Anchor its readable copy inside the first screen. */
@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  body #publicExperienceV3 .v3-hero-copy {
    top: max(90px, 12svh) !important; bottom: auto !important; transform: none !important;
  }
}

/* PR #206: transplant only the two Messages corrections, into P1's tokens.
 * Keep attach, input and send on one row; suppress the empty-panel ghost copy. */
body #familyView#familyView .account-view[data-view="messages"] .humanity-message-composer-frame {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: end !important;
  gap: 8px !important;
}
body #familyView#familyView .account-view[data-view="messages"] .humanity-message-composer-frame > * {
  grid-row: 1 !important; margin: 0 !important; float: none !important; position: static !important;
}
body #familyView#familyView .account-view[data-view="messages"] .humanity-message-attach {
  grid-column: 1 !important; width: 42px !important; height: 42px !important; min-height: 42px !important;
}
body #familyView#familyView .account-view[data-view="messages"] textarea.humanity-message-input {
  grid-column: 2 !important; width: 100% !important; min-width: 0 !important; max-width: none !important;
}
body #familyView#familyView .account-view[data-view="messages"] .humanity-chat-send {
  grid-column: 3 !important; width: auto !important; min-width: 46px !important;
  height: 42px !important; min-height: 42px !important; padding: 0 16px !important;
}
body #familyView#familyView .account-view[data-view="messages"] .chat-panel[data-humanity-message-empty]::before,
body #familyView#familyView .account-view[data-view="messages"] .chat-panel[data-humanity-message-empty]::after {
  content: none !important; display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body #familyView#familyView .account-view[data-view="messages"] :is(
    .chat-panel, .conversation-list.humanity-message-rail-v2,
    .humanity-message-composer-frame, .humanity-chat-send, .humanity-message-attach
  ) { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* At tablet width the sidebar leaves too little room for two directory cards. */
@media (min-width: 681px) and (max-width: 900px) {
  body #familyView#familyView .account-view[data-view="connections"] .family-entry-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
body #familyView#familyView .family-entry-card :is(.account-form, .account-field) { min-width: 0 !important; }
/* Keep the actual publish action inside the 320px composer, without hiding it. */
@media (max-width: 375px) {
  body #familyView#familyView .account-view[data-view="memories"] .hsw-publish-row {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }
  body #familyView#familyView .hsw-publish-row select {
    grid-column: 1 / -1 !important; grid-row: 1 !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box;
  }
  body #familyView#familyView .hsw-publish-row .hsw-cancel { grid-row: 2 !important; grid-column: 1 !important; justify-self: start; }
  body #familyView#familyView .hsw-publish-row #hswPublish { grid-row: 2 !important; grid-column: 2 !important; }
}
/* Content-sized access and onboarding sheets, including short keyboard viewports. */
body { --sh-lab-top: 0px; }
body:has(#humanidad-lab-preview-banner) { --sh-lab-top: var(--humanidad-preview-banner-height, 24px); }
body #safeOnboarding#safeOnboarding {
  top: var(--sh-lab-top) !important; bottom: 0 !important; height: auto !important;
  place-items: center !important; padding: 12px !important;
}
body #safeOnboarding#safeOnboarding .safe-onboarding-card {
  align-self: center !important; height: auto !important; min-height: 0 !important;
  max-height: calc(100dvh - var(--sh-lab-top) - 24px) !important;
  overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important;
}
body #safeOnboarding#safeOnboarding :is(.safe-fields, #safeStepFields, .safe-field) {
  min-inline-size: 0 !important; max-inline-size: 100% !important; box-sizing: border-box !important;
}
body #safeOnboarding#safeOnboarding .safe-field {
  font-size: 16px !important; width: 100% !important; overflow: hidden !important;
}
body #safeOnboarding#safeOnboarding input[type="date"] { appearance: none; -webkit-appearance: none; display: block; }
body #safeOnboarding#safeOnboarding input[type="date"]::-webkit-date-and-time-value { min-width: 0; text-align: left; }
body #safeOnboarding#safeOnboarding input[type="date"]::-webkit-datetime-edit { padding: 0; min-width: 0; }
body .account-modal.auth-only {
  top: var(--sh-lab-top) !important; padding: 12px !important; align-items: center !important;
}
body .account-modal.auth-only .account-shell.social-shell,
body .account-modal.auth-only .login-card {
  height: auto !important; min-height: 0 !important;
  max-height: calc(100dvh - var(--sh-lab-top) - 24px) !important;
}
body .account-modal.auth-only .account-shell.social-shell { width: min(560px, 100%) !important; border-radius: 20px !important; }
body .account-modal.auth-only .login-card { padding: 24px !important; justify-content: flex-start !important; overflow-y: auto !important; }
body:has(#humanidad-lab-preview-banner) .account-modal.open:not(.auth-only) {
  top: var(--sh-lab-top) !important; height: calc(100dvh - var(--sh-lab-top)) !important;
}
body:has(#humanidad-lab-preview-banner) .account-modal.open:not(.auth-only) :is(.account-shell.social-shell, .social-app, .social-main, .social-sidebar) {
  height: 100% !important; min-height: 0 !important;
}

/* A short symbolic welcome. The action is available throughout; never loop. */
@keyframes shWelcomeLight { from { opacity: 0; scale: .65; } to { opacity: 1; scale: 1; } }
@keyframes shWelcomeLine { from { opacity: 0; } to { opacity: 1; } }
@keyframes shWelcomeText { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
body #safeOnboarding#safeOnboarding .safe-success.active .success-star {
  animation: shWelcomeLight .45s ease-out .2s 1 both !important;
}
body #safeOnboarding#safeOnboarding .safe-success.active .success-star.star-self { animation-delay: 0s !important; }
body #safeOnboarding#safeOnboarding .safe-success.active .success-line {
  width: var(--line-width) !important; animation: shWelcomeLine .5s ease-out .55s 1 both !important;
}
body #safeOnboarding#safeOnboarding .safe-success.active :is(h2, .safe-lead) {
  animation: shWelcomeText .35s ease-out 1.1s 1 both !important;
}
@media (prefers-reduced-motion: reduce) {
  body #safeOnboarding#safeOnboarding .safe-success.active :is(.success-star, .success-line, h2, .safe-lead) {
    animation: none !important; opacity: 1 !important; scale: 1 !important;
  }
}

/* Mi árbol · personas guardadas que todavía no están unidas al árbol.
   Before: 8px summary, 15px row and pill buttons — present but unreadable and
   below touch size. Readable copy, 44px targets, wraps at 320px. */
body #familyView#familyView .account-view[data-view="tree"].active .humanidad-f3-unlinked {
  /* A legacy ≤600px rule hid this lane entirely on phones, so Todo showed 3 of 7 with no way
     to reach the other 4. Keep it visible (collapsed by default on phones, see index.html). */
  display: block !important; flex: 0 0 auto !important;
  max-height: none !important; overflow: visible !important;
  border-top: 1px solid rgba(212, 175, 55, .22) !important;
  background: rgba(7, 12, 22, .97) !important; padding: 0 0 4px !important;
}
body #familyView#familyView .account-view[data-view="tree"].active .humanidad-f3-unlinked summary {
  min-height: 44px !important; display: flex !important; align-items: center !important;
  padding: 8px 14px !important; font-size: 13px !important; line-height: 1.35 !important;
  font-weight: 600 !important; color: #e7cf8f !important; letter-spacing: 0 !important;
}
body #familyView#familyView .account-view[data-view="tree"].active .humanidad-f3-unlinked summary:focus-visible,
body #familyView#familyView .account-view[data-view="tree"].active .humanidad-f3-unlinked-list button:focus-visible {
  outline: 2px solid #d9b36a !important; outline-offset: 2px !important;
}
body #familyView#familyView .account-view[data-view="tree"].active .humanidad-f3-unlinked[open] { max-height: 38vh !important; overflow-y: auto !important; }
body #familyView#familyView .account-view[data-view="tree"].active .humanidad-f3-unlinked-list {
  display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 0 14px 10px !important;
}
body #familyView#familyView .account-view[data-view="tree"].active .humanidad-f3-unlinked-item {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 8px !important; min-width: 0 !important;
}
body #familyView#familyView .account-view[data-view="tree"].active .humanidad-f3-unlinked-list button {
  min-height: 44px !important; padding: 10px 14px !important; font-size: 13px !important; line-height: 1.25 !important;
  border-radius: 12px !important; max-width: 100% !important; white-space: normal !important; text-align: left !important;
  color: #ece4d2 !important; background: #0b1426 !important; border: 1px solid rgba(212, 175, 55, .3) !important;
}
body #familyView#familyView .account-view[data-view="tree"].active .humanidad-f3-unlinked-list .humanidad-f3-unlinked-link {
  color: #f1d48c !important; background: rgba(212, 175, 55, .1) !important; border-style: dashed !important;
}
/* Phones: the floating bottom navigation covers the last ~74px of the tree shell, where the
   lane used to sit. Move it right under the toolbar so it is visible and tappable. */
@media (max-width: 680px) {
  body #familyView#familyView .account-view[data-view="tree"].active .humanidad-tree-quality-container { order: -4 !important; }
  body #familyView#familyView .account-view[data-view="tree"].active .humanidad-f3-toolbar { order: -3 !important; }
  body #familyView#familyView .account-view[data-view="tree"].active .hpx-navigator { order: -2 !important; }
  body #familyView#familyView .account-view[data-view="tree"].active .humanidad-f3-unlinked {
    order: -1 !important; border-top: 0 !important; border-bottom: 1px solid rgba(212, 175, 55, .22) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body #familyView#familyView .account-view[data-view="tree"].active .humanidad-f3-unlinked * { transition: none !important; animation: none !important; }
}

/* Lab review: one P1 authority for visible viewport, home, chat and cover. */
body { --sh-route-bottom: 24px; }
body .account-modal.open:not(.auth-only) {
  top: calc(var(--sh-lab-top) + var(--humanity-vv-top, 0px)) !important;
  height: calc(var(--humanity-vh, 100dvh) - var(--sh-lab-top)) !important;
}
body #familyView#familyView .social-main {
  height: 100% !important; min-height: 0 !important; box-sizing: border-box !important;
  scroll-padding-bottom: var(--sh-route-bottom) !important;
}
body #familyView#familyView .account-view:is([data-view="home"], [data-view="memories"], [data-view="profile"], [data-view="mundo"]) {
  padding-bottom: var(--sh-route-bottom) !important;
}
body #familyView#familyView :is(.hm1-actions, .hsw-publish-row) {
  scroll-margin-block: 20px calc(var(--sh-route-bottom) + 16px);
}
body #familyView#familyView :is(.iv1-oh-btn, #hswPublish) { min-height: 44px !important; }
body #familyView#familyView .account-view[data-view="home"] .iv1-oh-hero {
  background: radial-gradient(ellipse at 12% 0%, rgba(52, 139, 230, .22), transparent 66%),
    linear-gradient(145deg, #12385f, #0b2342 70%, #0b1c34) !important;
}
body #familyView#familyView .iv1-oh-copy { background: transparent !important; }
body #familyView#familyView .hm1-home-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body #familyView#familyView .hm1-home-card {
  min-width: 0; padding: 22px; border: 1px solid var(--sh-hairline);
  border-radius: var(--sh-r-md); background: linear-gradient(145deg, #113353, #0b213b); color: var(--sh-white);
}
body #familyView#familyView .hm1-home-card h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.35; color: var(--sh-white); }
body #familyView#familyView .hm1-home-card p { line-height: 1.5; }
body #familyView#familyView .hm1-home-card .hm1-card-note { font-size: 13px; color: var(--sh-secondary); margin: 6px 0 14px; }
body #familyView#familyView .hm1-community-count { display: block; font-size: 24px; line-height: 1.4; overflow-wrap: anywhere; }
body #familyView#familyView .hm1-birthday-row { display: block; width: 100%; margin-top: 8px; text-align: left; white-space: normal; }

/* Each chat pane uses the available column, without an outer nested card. */
body #familyView#familyView .social-main:has(.account-view[data-view="messages"].active) {
  display: flex !important; flex-direction: column !important; overflow: hidden !important;
}
body #familyView#familyView .hrc-account-content:has(.account-view[data-view="messages"].active) {
  display: flex !important; flex: 1 1 0% !important; min-height: 0 !important; padding: 0 !important;
}
body #familyView#familyView .account-view[data-view="messages"].active {
  display: flex !important; flex-direction: column !important; flex: 1 1 0% !important; min-height: 0 !important;
  padding: 0 12px var(--sh-route-bottom) !important;
}
body #familyView#familyView .account-view[data-view="messages"] > .hrc-page-frame {
  flex: 1 1 0% !important; width: 100% !important; max-width: none !important;
  height: 100% !important; min-height: 0 !important; max-height: none !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
body #familyView#familyView .account-view[data-view="messages"] .messages-layout {
  grid-template-columns: minmax(240px, 30%) minmax(0, 1fr) !important;
  min-height: 0 !important; height: 100% !important; max-height: none !important;
  border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
}
body #familyView#familyView .account-view[data-view="messages"] :is(.chat-panel, .conversation-list.humanity-message-rail-v2) {
  border-radius: 0 !important; margin: 0 !important;
}
body #familyView#familyView .account-view[data-view="messages"] :is(.humanity-message-attach, .humanity-chat-send, .humanity-chat-back, .humanity-chat-action) {
  min-width: 44px !important; min-height: 44px !important; height: 44px !important;
}
body #familyView#familyView .account-view[data-view="messages"] textarea.humanity-message-input { font-size: 16px !important; }
body #familyView#familyView .account-view[data-view="messages"] .chat-compose { flex-shrink: 0 !important; }
body #familyView#familyView .account-view[data-view="messages"] .chat-messages {
  min-height: 0 !important; flex: 1 1 0% !important; overflow-y: auto !important;
}

/* Taller photographic cover. Background-size:cover preserves the original ratio. */
body #familyView#familyView .profile-v50-hero { --sh-cover-height: clamp(260px, 28vw, 380px); }
body #familyView#familyView .profile-v50-cover {
  height: var(--sh-cover-height) !important; bottom: auto !important;
  background-size: cover !important; background-position: center !important;
}
body #familyView#familyView .profile-v50-hero-content {
  padding-top: calc(var(--sh-cover-height) - 85px) !important;
}

/* Continuous ambient canvas; the existing globe owns all interaction. */
body #familyView#familyView .social-main:has(.account-view[data-view="mundo"].active) {
  background: radial-gradient(ellipse at 55% 38%, #163f66 0%, #0c2746 36%, #07182e 76%) !important;
}
body #familyView#familyView .account-view[data-view="mundo"] :is(.humanity-product-shell, .humanity-product-workspace, .mp-stage) {
  background: transparent !important; border-color: transparent !important;
  box-shadow: none !important; border-radius: 0 !important;
}
body #familyView#familyView .account-view[data-view="mundo"],
body #familyView#familyView .account-view[data-view="mundo"] .hrc-page-frame { background: transparent !important; }
@media (prefers-reduced-motion: reduce) {
  body #familyView#familyView .social-main { scroll-behavior: auto !important; }
}
@media (max-width: 900px) {
  body #familyView#familyView .account-view[data-view="messages"] .messages-layout { display: block !important; }
  body #familyView#familyView .social-main:has(.account-view[data-view="messages"].active) .df-appbar,
  body #familyView#familyView .account-view[data-view="messages"] .social-head { display: none !important; }
}
@media (max-width: 680px) {
  body { --sh-route-bottom: calc(var(--mobile-nav-h, 64px) + 40px + env(safe-area-inset-bottom)); }
  body #familyView#familyView .hm1-home-extras { grid-template-columns: minmax(0, 1fr); }
  body #familyView#familyView .hm1-home-card { padding: 18px; }
  body #familyView#familyView .profile-v50-hero { --sh-cover-height: clamp(220px, 62vw, 320px); }
  body #familyView#familyView .profile-v50-hero-content { padding-top: calc(var(--sh-cover-height) - 56px) !important; }
  body #familyView#familyView .account-view[data-view="messages"].active { padding-inline: 6px !important; }
  body #familyView#familyView .social-main:has(.account-view[data-view="messages"].active) .df-appbar { display: none !important; }
  html[data-humanity-keyboard-open] body { --sh-route-bottom: calc(12px + env(safe-area-inset-bottom)); }
  html[data-humanity-keyboard-open] body #familyView#familyView .social-sidebar { display: none !important; }
  html[data-humanity-keyboard-open] body #familyView#familyView .hrc-account-content:not(:has(.account-view[data-view="messages"].active)) { padding-bottom: 0 !important; }
  html[data-humanity-keyboard-open] body #familyView#familyView .account-view[data-view="messages"].active { padding-bottom: 0 !important; }
  /* Keep Messages clear of the mobile dock with or without the keyboard-state flag. */
  body.internal-product-v1-ready #familyView#familyView .hrc-account-content:has(.account-view[data-view="messages"].active) { padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important; }
}

/* Account-to-account consent uses the same P1 surfaces and touch sizes. */
body .alc-panel, body .alc-entry-card {
  box-sizing: border-box; color: var(--sh-white); background: var(--sh-surface);
  border: 1px solid var(--sh-hairline); border-radius: 20px; padding: 22px;
}
body .alc-panel { margin-bottom: 20px; min-width: 0; }
body :is(.alc-panel, .alc-entry-card) :is(h2, h3) { color: var(--sh-white); margin: 0 0 12px; line-height: 1.2; }
body :is(.alc-panel, .alc-entry-card) p { line-height: 1.55; overflow-wrap: anywhere; }
body .alc-note, body .alc-handle { color: var(--sh-secondary); font-size: 13px; }
body .alc-handle { display: block; margin-top: 6px; }
body .alc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body :is(.alc-actions, .alc-link-output) button {
  min-height: 44px !important; padding: 10px 16px !important; white-space: normal !important;
}
body .alc-link-output input { box-sizing: border-box; width: 100%; min-width: 0; margin: 12px 0; padding: 12px; font-size: 16px; color: var(--sh-white); background: var(--sh-night); border: 1px solid var(--sh-hairline); border-radius: 12px; }
body .alc-link-output [hidden] { display: none !important; }
body .alc-connection { border-top: 1px solid var(--sh-hairline); padding: 18px 0; }
body .alc-status { color: var(--sh-gold-light); min-height: 1.5em; }
body .alc-entry {
  position: fixed; inset: var(--sh-lab-top) 0 0; z-index: 20000; display: grid; place-items: center;
  padding: 12px; background: rgba(3, 9, 22, .8); box-sizing: border-box;
}
body .alc-entry-card { width: min(560px, 100%); max-height: calc(var(--humanity-vh, 100dvh) - var(--sh-lab-top) - 24px); overflow-y: auto; }
body #familyView#familyView :is(.humanity-avatar-menu-trigger, .profile-social-v2-cover-edit, .humanity-avatar-menu button) {
  min-height: 44px !important; min-width: 44px !important;
}
body .hpa-v1-overlay { top: var(--sh-lab-top) !important; padding: 12px !important; }
body .hpa-v1-card { max-height: calc(var(--humanity-vh, 100dvh) - var(--sh-lab-top) - 24px) !important; background: var(--sh-surface) !important; }
body .hpa-v1-zoom-row input[type="range"] { min-height: 44px !important; }
body .humanity-lab-photo-report { margin: 12px 0; border: 1px solid var(--sh-hairline); border-radius: 12px; padding: 0 14px; background: var(--sh-night); color: var(--sh-secondary); }
body .humanity-lab-photo-report summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
body .humanity-lab-photo-report p { font-size: 13px; line-height: 1.5; }

/* Keep nested password columns full-width and reserve room for their controls.
   The desktop grid and compact input padding above also affect nested fields. */
body #safeOnboarding#safeOnboarding .safe-fields > .safe-fields,
body #safeOnboarding#safeOnboarding .safe-fields > .safe-consent {
  grid-column: 1 / -1;
}
body #safeOnboarding#safeOnboarding .password-visibility-field > .safe-field {
  padding-inline-end: 84px;
}