/* Responsive hardening 2026-08-01
   Scope: current live web + tg copy only. No logic changes.
   Goals: better desktop adaptation, fluid resize, safer onboarding layout,
   cleaner long-text wrapping, wider nav on desktop, no horizontal squeeze. */

html,body,.app,.screen,
.card,.soft-card,.status-card,.hero-card,
.profile-onboarding,.profile-fields,.profile-field,.profile-field-group,
.single-legal-check,.welcome-paywall-hero,.welcome-paywall-action,
.welcome-paywall-points,.welcome-paywall-points span,
.auth-email-row,.promo-code-field>div{
  min-width:0 !important;
}

.welcome-paywall-action .ghost{
  width:100% !important;
  max-width:100% !important;
  min-height:56px !important;
  padding:12px 16px !important;
  white-space:normal !important;
  line-height:1.24 !important;
  text-wrap:balance;
}

.welcome-paywall-points span,
.single-legal-check span,
.profile-field-group > p,
.personal-birth-meta,
.account-link-email,
.account-link-notice{
  overflow-wrap:anywhere;
}

.single-legal-check{
  display:grid !important;
  grid-template-columns:22px minmax(0,1fr) !important;
  gap:12px !important;
  align-items:flex-start !important;
}

.single-legal-check input{
  margin:2px 0 0 !important;
}

.birth-place-suggestions,
.hierarchical-location-field,
.birth-place-field,
.profile-field .input,
.profile-field select.input,
input[type=date].input,
input[type=time].input{
  max-width:100% !important;
}

#lunarPlaceInput::placeholder,
#birthPlaceInput::placeholder{
  font-size:.94em;
  letter-spacing:-.01em;
}

@media (min-width: 768px){
  .app{
    width:min(100%, 940px) !important;
    padding-left:max(22px,var(--tg-safe-left)) !important;
    padding-right:max(22px,var(--tg-safe-right)) !important;
    padding-bottom:calc(128px + max(env(safe-area-inset-bottom),var(--tg-safe-bottom))) !important;
  }

  body[data-step="home"] .app,
  body[data-step="calendar"] .app,
  body[data-step="profile"] .app,
  body[data-step="profileNatal"] .app,
  body[data-step="practice"] .app,
  body[data-step="deeper"] .app{
    width:min(calc(100% - 28px), 940px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .screen > .soft-card,
  .screen > .status-card,
  .screen > .hero-card,
  .screen > .profile-onboarding-shell,
  .screen > .profile-overview,
  .screen > .premium-paywall-page{
    max-width:920px;
    margin-left:auto;
    margin-right:auto;
  }

  .bottom-nav{
    width:min(calc(100% - 32px), 760px) !important;
  }

  .nav-item{
    min-width:0 !important;
  }

  body[data-step="welcome"] .app{
    width:min(100%, 1120px) !important;
    padding-left:max(24px,var(--tg-safe-left)) !important;
    padding-right:max(24px,var(--tg-safe-right)) !important;
  }

  body[data-step="welcome"] .screen{
    align-items:center !important;
  }

  .welcome-paywall-hero{
    max-width:760px !important;
    margin-inline:auto !important;
  }

  .welcome-paywall-points{
    width:min(100%, 520px) !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }

  .welcome-paywall-points span{
    min-height:56px !important;
    padding:10px 14px !important;
  }

  .profile-onboarding-shell{
    width:100%;
    display:flex;
    justify-content:center;
  }

  .profile-onboarding{
    width:min(100%, 860px) !important;
    padding:26px 24px 24px !important;
  }
}

@media (min-width: 980px){
  body[data-step="welcome"] .app{
    width:min(100%, 1260px) !important;
  }

  .welcome-paywall-hero{
    display:grid !important;
    grid-template-columns:minmax(0, 1.15fr) minmax(320px, .9fr) !important;
    grid-template-areas:
      "brand brand"
      "mark points"
      "copy points"
      "action points"
      "slogan slogan" !important;
    align-items:center !important;
    justify-items:stretch !important;
    column-gap:28px !important;
    row-gap:16px !important;
    max-width:980px !important;
    min-height:min(840px, calc(100dvh - 44px - max(env(safe-area-inset-bottom),var(--tg-safe-bottom)))) !important;
    padding:34px 34px 28px !important;
    text-align:left !important;
  }

  .welcome-paywall-brand{
    grid-area:brand;
    text-align:center !important;
    min-height:auto !important;
  }

  .welcome-paywall-mark{
    grid-area:mark;
    justify-self:center !important;
    margin:6px auto 0 !important;
    width:112px !important;
    height:112px !important;
  }

  .welcome-paywall-mark .premium-compass-logo{
    width:66px !important;
    height:66px !important;
  }

  .welcome-paywall-copy{
    grid-area:copy;
    justify-items:start !important;
    text-align:left !important;
    align-self:start !important;
  }

  .welcome-paywall-copy .paywall-kicker,
  .welcome-paywall-copy h2,
  .welcome-paywall-copy p:not(.paywall-kicker),
  .welcome-paywall-slogan{
    text-align:left !important;
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:none !important;
  }

  .welcome-paywall-copy h2{
    max-width:480px !important;
    font-size:clamp(36px, 3.6vw, 52px) !important;
  }

  .welcome-paywall-action{
    grid-area:action;
    width:min(100%, 430px) !important;
    margin:0 !important;
    justify-items:start !important;
  }

  .welcome-paywall-action .welcome-start,
  .welcome-paywall-action .ghost{
    width:100% !important;
  }

  .welcome-paywall-points{
    grid-area:points;
    width:100% !important;
    margin:0 !important;
    align-self:stretch !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .welcome-paywall-points span{
    min-height:78px !important;
    padding:14px 16px !important;
    justify-content:flex-start !important;
    text-align:left !important;
    line-height:1.3 !important;
  }

  .welcome-paywall-slogan{
    grid-area:slogan;
    width:min(100%, 680px) !important;
    margin:2px 0 0 !important;
  }

  .profile-onboarding{
    width:min(100%, 940px) !important;
    padding:30px 28px 26px !important;
  }

  .profile-fields-grouped,
  .planner-fields.profile-fields.profile-fields-grouped{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:16px !important;
    align-items:start !important;
  }

  .profile-field-group{
    height:100%;
    align-content:start;
    padding:18px !important;
  }

  .profile-onboarding > .primary,
  .profile-onboarding > button.primary,
  .profile-save-btn,
  .single-legal-check{
    max-width:100% !important;
  }
}

@media (min-width: 1280px){
  .app{
    width:min(100%, 1040px) !important;
  }

  body[data-step="home"] .app,
  body[data-step="calendar"] .app,
  body[data-step="profile"] .app,
  body[data-step="profileNatal"] .app,
  body[data-step="practice"] .app,
  body[data-step="deeper"] .app{
    width:min(calc(100% - 40px), 1040px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .bottom-nav{
    width:min(calc(100% - 40px), 840px) !important;
  }
}

@media (max-width: 360px){
  .single-legal-check{
    padding:12px !important;
    gap:10px !important;
  }

  .welcome-paywall-action .ghost{
    min-height:54px !important;
    font-size:15px !important;
  }
}

/* Package A+B responsive composition pass — 2026-08-01 */
@media (max-width: 767px){
  .app{
    padding-bottom:calc(116px + max(env(safe-area-inset-bottom),var(--tg-safe-bottom))) !important;
  }

  .screen{
    gap:14px !important;
  }

  .bottom-nav{
    width:min(calc(100% - 20px), 560px) !important;
    bottom:10px !important;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    border-radius:28px !important;
    background:rgba(24,17,31,.82) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 18px 42px rgba(10,5,16,.34) !important;
    backdrop-filter:blur(18px) saturate(1.05);
    -webkit-backdrop-filter:blur(18px) saturate(1.05);
  }

  .nav-item{
    min-height:54px !important;
    border-radius:20px !important;
    padding:8px 6px !important;
  }

  body[data-step="home"] .screen,
  body[data-step="calendar"] .screen,
  body[data-step="profile"] .screen{
    display:grid !important;
    align-content:start !important;
    gap:14px !important;
  }

  body[data-step="home"] .personal-result,
  body[data-step="home"] .status-card,
  body[data-step="home"] .account-auth-inline,
  body[data-step="calendar"] .card,
  body[data-step="calendar"] .soft-card,
  body[data-step="profile"] .card,
  body[data-step="profile"] .soft-card{
    margin:0 !important;
  }

  body[data-step="home"] .status-card{
    padding:20px 18px 18px !important;
  }

  body[data-step="home"] .status-card .status-copy,
  body[data-step="home"] .personal-result .reflection{
    max-width:100% !important;
  }

  body[data-step="home"] .account-auth-inline{
    gap:10px !important;
    padding:14px 14px 13px !important;
    border-radius:22px !important;
  }

  body[data-step="home"] .account-auth-inline p,
  body[data-step="calendar"] .card .lead,
  body[data-step="calendar"] .soft-card .lead{
    font-size:14px !important;
    line-height:1.46 !important;
  }

  body[data-step="calendar"] .lunar-calendar-card,
  body[data-step="calendar"] .event-planner-details[open],
  body[data-step="calendar"] .lunar-date-inline{
    padding:16px !important;
    border-radius:24px !important;
  }

  body[data-step="calendar"] .month-switcher{
    row-gap:10px !important;
  }

  body[data-step="calendar"] .calendar-filter-btn{
    min-height:40px !important;
    padding:8px 15px !important;
  }

  body[data-step="calendar"] .event-planner-details:not([open]) summary{
    min-height:54px !important;
    padding:14px 15px !important;
    border-radius:20px !important;
  }

  body[data-step="calendar"] .event-planner-actions{
    gap:8px !important;
    margin-top:12px !important;
  }
}

@media (min-width: 1024px){
  .app{
    padding-bottom:calc(126px + max(env(safe-area-inset-bottom),var(--tg-safe-bottom))) !important;
  }

  .bottom-nav{
    width:min(calc(100% - 40px), 860px) !important;
    bottom:16px !important;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
    border-radius:30px !important;
    background:rgba(24,17,31,.74) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 22px 54px rgba(10,5,16,.28) !important;
    backdrop-filter:blur(20px) saturate(1.06);
    -webkit-backdrop-filter:blur(20px) saturate(1.06);
  }

  .nav-item{
    min-height:58px !important;
  }
}

@media (min-width: 1180px){
  body[data-step="home"] .screen{
    display:grid !important;
    grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr) !important;
    align-items:start !important;
    gap:18px !important;
  }

  body[data-step="home"] .personal-result{
    grid-column:1 !important;
  }

  body[data-step="home"] .status-card{
    grid-column:2 !important;
  }

  body[data-step="home"] .account-auth-inline,
  body[data-step="home"] .subscription-manage,
  body[data-step="home"] .plus-lock-card{
    grid-column:1 / -1 !important;
    align-self:start !important;
  }

  body[data-step="home"] .status-card,
  body[data-step="home"] .personal-result{
    min-height:100% !important;
  }

  body[data-step="profile"] .screen{
    display:grid !important;
    grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr) !important;
    align-items:start !important;
    gap:18px !important;
  }

  body[data-step="profile"] .profile-overview,
  body[data-step="profile"] .profile-collapsible{
    grid-column:1 !important;
  }

  body[data-step="profile"] .natal-deep-section,
  body[data-step="profile"] .subscription-manage,
  body[data-step="profile"] .plus-lock-card{
    grid-column:2 !important;
    align-self:start !important;
  }

  body[data-step="profileNatal"] .natal-chart-screen{
    max-width:1080px !important;
    margin-inline:auto !important;
    padding:26px 24px 24px !important;
  }

  body[data-step="profileNatal"] .natal-fold-list{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    align-items:start !important;
  }
}