/* HUMANIDAD — Mobile Invite Ready V1
 * Final phone hardening for family invitations.
 * Presentation only: no auth, Supabase, RLS, family-state or privacy rules.
 */

@media (max-width: 680px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body.internal-product-v1-ready .account-modal.open:not(.auth-only),
  body.internal-product-v1-ready .account-modal.open:not(.auth-only) .social-app,
  body.internal-product-v1-ready .account-modal.open:not(.auth-only) .social-main,
  body.internal-product-v1-ready .hrc-account-content,
  body.internal-product-v1-ready .account-view.active {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.internal-product-v1-ready .account-modal.open:not(.auth-only) .social-main {
    width: 100vw !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

  /* Mobile dock: always fully inside the live viewport, including iPhone safe area. */
  html body.internal-product-v1-ready .account-modal.open:not(.auth-only):has(.account-view.active) .social-sidebar {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 6px !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 52px rgba(0,0,0,.56) !important;
  }

  body.internal-product-v1-ready .account-modal:not(.auth-only) .social-nav button,
  body.internal-product-v1-ready #hrcMobileNavMore {
    min-height: 58px !important;
    border-radius: 17px !important;
  }

  /* Explore sheet: one compact, deliberate layer instead of a huge panel. */
  body.internal-product-v1-ready .hrc-mas-sheet-backdrop {
    background: rgba(1,4,10,.70) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: min(60dvh, 460px) !important;
    padding: 14px 14px 15px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(217,192,138,.06), transparent 38%),
      linear-gradient(180deg,#0b1420,#050a12 72%) !important;
    box-shadow: 0 -18px 62px rgba(0,3,10,.62), inset 0 1px rgba(255,255,255,.03) !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-head {
    position: sticky;
    top: -14px;
    z-index: 2;
    margin: -14px -14px 10px !important;
    padding: 14px 14px 9px !important;
    background: linear-gradient(180deg,#0b1420 76%,rgba(11,20,32,0));
  }

  body.internal-product-v1-ready .hrc-mas-sheet-head h2 {
    font-size: 16px !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid button {
    min-height: 68px !important;
    padding: 8px 5px !important;
    gap: 5px !important;
    border-radius: 15px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid button:last-child {
    grid-column: 2;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid button span {
    display: grid !important;
    place-items: center !important;
    width: 25px !important;
    height: 25px !important;
    font-size: 0 !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid button span svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  body:has(.hrc-mas-sheet.is-open) .social-main {
    overflow: hidden !important;
  }

  /* Tree header: keep the family title and selector inside one clean mobile row. */
  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-social-head {
    display: grid !important;
    grid-template-columns: minmax(0,.9fr) minmax(132px,1.1fr) !important;
    align-items: center !important;
    min-height: 46px !important;
    max-height: none !important;
    padding: 6px 10px !important;
    gap: 8px !important;
  }

  body.internal-product-v1-ready #familyView .account-view[data-view="tree"].active .tree-social-head h2#familyTreeName {
    max-width: none !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-head-actions,
  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-selector-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-selector-wrap select {
    width: 100% !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding-inline: 9px 26px !important;
    border-radius: 11px !important;
    font-size: 9px !important;
    text-overflow: ellipsis !important;
  }

  /* One mobile tree. Never flash the old technical pedigree while the modern renderer boots. */
  body.internal-product-v1-ready .account-view[data-view="tree"].active .pedigree-canvas.genealogy-canvas {
    display: none !important;
  }

  .humanidad-tree-boot-state {
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: min(360px,calc(100% - 28px)) !important;
    margin: 32px auto !important;
    padding: 18px !important;
    border: 1px solid rgba(217,192,138,.15) !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg,rgba(16,24,34,.92),rgba(7,12,19,.94)) !important;
    color: #f2ead6 !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.28) !important;
  }

  .humanidad-tree-boot-state.is-error {
    grid-template-columns: 38px minmax(0,1fr) auto !important;
  }

  .humanidad-tree-boot-mark {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(217,192,138,.24) !important;
    border-radius: 50% !important;
    color: #e4ca8d !important;
    background: rgba(217,192,138,.055) !important;
    font-size: 16px !important;
  }

  .humanidad-tree-boot-state strong {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .humanidad-tree-boot-state p {
    margin: 5px 0 0 !important;
    color: #8995a2 !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }

  .humanidad-tree-boot-retry {
    min-height: 36px !important;
    padding: 0 11px !important;
    border: 1px solid rgba(217,192,138,.28) !important;
    border-radius: 999px !important;
    background: rgba(217,192,138,.08) !important;
    color: #ead7a8 !important;
    font-size: 10px !important;
    font-weight: 750 !important;
  }

  /* Compact family navigator: it helps orientation without stealing half the phone. */
  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-navigator {
    margin: 0 !important;
    padding: 10px 12px 9px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.045) !important;
    background: linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)) !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-focus {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin: 0 0 7px !important;
    min-width: 0 !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-kicker {
    flex: none;
    font-size: 8px !important;
    letter-spacing: .16em !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-name {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-rail {
    gap: 12px !important;
    padding: 1px 0 2px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-group {
    gap: 5px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-label {
    font-size: 8px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-chips {
    gap: 6px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-navigator .hpx-chip {
    gap: 7px !important;
    max-width: 160px !important;
    padding: 4px 10px 4px 4px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-navigator .hpx-portrait {
    --hpx-size: 34px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-navigator .hpx-chip-name {
    font-size: 12px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-navigator .hpx-chip-sub {
    font-size: 10px !important;
  }

  /* Tree toolbar: only navigation decisions on phone, technical controls disappear. */
  body.internal-product-v1-ready .account-view[data-view="tree"].active .humanidad-f3-toolbar,
  body.internal-product-v1-ready .account-view[data-view="tree"].active .f3-toolbar-v1 {
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 4px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .f3-nav-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: max-content !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .humanidad-f3-toolbar .f3-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 9px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .f3-right-controls,
  body.internal-product-v1-ready .account-view[data-view="tree"].active .f3-zoom-group {
    display: none !important;
  }

  body.internal-product-v1-ready #familyView .account-view[data-view="tree"].active .humanidad-f3-shell {
    height: calc(100dvh - 158px - env(safe-area-inset-bottom)) !important;
    min-height: 500px !important;
    max-height: none !important;
    margin: 6px 0 calc(84px + env(safe-area-inset-bottom)) !important;
    border-radius: 16px 16px 0 0 !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .humanidad-f3-stage {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active #HumanidadFamilyChart .humanidad-f3-card.hpx-card {
    width: 132px !important;
    height: 112px !important;
    border-radius: 21px !important;
  }

  /* Trust & Safety / Configuración: no horizontal clipping and no desktop badge geometry. */
  body.internal-product-v1-ready .account-view[data-view="settings"].active,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .humanidad-safety-settings,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .settings-card,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .humanity-policy-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active {
    padding-inline: 0 !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .settings-card,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .humanity-policy-card {
    margin-inline: 0 !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-card-head {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 9px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-doc-badge,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-state-pill {
    justify-self: start !important;
    max-width: 100% !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-card-head h3 {
    max-width: 100% !important;
    font-size: clamp(22px,7vw,28px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .account-copy,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-policy-grid p,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-tools-grid p,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-content-note p {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-policy-grid,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-tools-grid {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-content-note {
    grid-template-columns: 48px minmax(0,1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-content-note > span {
    width: 44px !important;
    height: 44px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-accept {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    white-space: normal !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-enforcement-flow {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-enforcement-flow span {
    min-width: 0 !important;
    padding: 10px 8px !important;
    text-align: center !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-enforcement-flow i {
    display: none !important;
  }
}

@media (max-width: 390px) {
  body.internal-product-v1-ready .hrc-mas-sheet {
    left: 8px !important;
    right: 8px !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid button {
    min-height: 64px !important;
    font-size: 9.5px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-social-head {
    grid-template-columns: minmax(0,.78fr) minmax(130px,1.22fr) !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .humanidad-f3-toolbar .f3-btn {
    padding-inline: 8px !important;
  }

  .humanidad-tree-boot-state.is-error {
    grid-template-columns: 34px minmax(0,1fr) !important;
  }

  .humanidad-tree-boot-state.is-error .humanidad-tree-boot-retry {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.internal-product-v1-ready .hrc-mas-sheet,
  body.internal-product-v1-ready .hrc-mas-sheet-backdrop,
  .humanidad-tree-boot-state {
    transition: none !important;
    animation: none !important;
  }
}