/* Vemos v4.1.4 — readability + true mobile width
   Loaded last. This layer intentionally wins over legacy compact rules. */

:root{
  --mobile-gutter:14px;
  --mobile-gutter-wide:18px;
}

html{
  width:100%;
  min-width:0;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  max-width:100%;
  min-width:0;
  font-size:16px;
}

/* Avoid min()/intrinsic sizing surprises on mobile browsers. */
.topbar-inner,
.page-shell,
.footer{
  width:100%;
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}

.page-shell,
.page-shell > *,
.topbar-inner,
.footer,
.auth-layout,
.auth-card,
.form-page,
.profile-page,
.about-page,
.random-stage,
.review-page,
.title-detail,
.group-grid,
.media-grid,
.plan-list,
.ledger-layout,
.members-layout,
.dashboard-stats,
.group-overview-strip,
.library-filters,
.v4-library-filters{
  min-width:0;
}

/* Comfortable reading defaults. */
p,
li{
  line-height:1.6;
}

input,
select,
textarea{
  font-size:16px; /* prevents iOS/Safari focus zoom and is easier to read */
}

small,
.helptext,
.fieldset-help{
  line-height:1.45;
}

/* Reusable compact UI should still be readable. */
.section-kicker,
.context-label,
.soft-badge,
.status-chip,
.role-chip,
.content-type,
.group-meta,
.catalog-status,
.media-meta-line,
.creator-chip,
.transfer-people,
.invite-result>span,
.auth-meta-row,
.auth-back,
.auth-token-note{
  letter-spacing:.02em;
}

/* Mobile: the app must actually occupy the viewport. */
@media(max-width:859px){
  :root{--mobile-gutter:max(14px, env(safe-area-inset-left));}

  body{
    overflow-x:clip;
  }

  .topbar-inner,
  .page-shell,
  .footer{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }

  .topbar-inner{
    padding-left:max(var(--mobile-gutter-wide), env(safe-area-inset-left));
    padding-right:max(var(--mobile-gutter-wide), env(safe-area-inset-right));
  }

  .page-shell{
    padding-left:max(var(--mobile-gutter), env(safe-area-inset-left));
    padding-right:max(var(--mobile-gutter), env(safe-area-inset-right));
    padding-bottom:calc(104px + env(safe-area-inset-bottom));
  }

  .footer{
    padding-left:max(var(--mobile-gutter), env(safe-area-inset-left));
    padding-right:max(var(--mobile-gutter), env(safe-area-inset-right));
    padding-bottom:calc(30px + env(safe-area-inset-bottom));
  }

  .page-shell > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .form-page,
  .narrow-page,
  .profile-page,
  .about-page,
  .review-form-card,
  .auth-layout,
  .auth-card,
  .auth-result.auth-elevated,
  .expense-builder{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }

  .section-heading,
  .dashboard-hero,
  .group-hub-hero,
  .taste-hero,
  .random-stage,
  .history-heading,
  .plans-heading,
  .expenses-heading{
    width:100%;
  }

  .group-grid,
  .media-grid,
  .search-results,
  .plan-list,
  .reviews-grid,
  .balance-grid,
  .dashboard-stats,
  .taste-summary-grid,
  .detail-columns,
  .ledger-layout,
  .members-layout{
    width:100%;
    min-width:0;
  }

  .group-grid > *,
  .media-grid > *,
  .search-results > *,
  .plan-list > *,
  .reviews-grid > *,
  .balance-grid > *,
  .dashboard-stats > *,
  .ledger-layout > *,
  .members-layout > *{
    min-width:0;
    max-width:100%;
  }

  .group-mobile-nav{
    width:calc(100% - 16px);
    max-width:430px;
    left:50%;
    right:auto;
  }

  /* General mobile typography floor. */
  .page-shell p,
  .page-shell li,
  .page-shell label,
  .page-shell .muted{
    font-size:max(14px, .875rem);
  }

  .section-heading p,
  .dashboard-hero p,
  .group-hub-hero p,
  .taste-hero p,
  .form-intro p,
  .profile-hero p,
  .about-hero p,
  .landing-copy>p,
  .random-overview,
  .plan-note,
  .memory-note,
  .memory-readonly p{
    font-size:15px;
    line-height:1.65;
  }

  .stack-form label,
  .auth-card .stack-form label,
  .field-block label,
  .date-fieldset legend,
  .security-row strong,
  .panel-title p,
  .member-row strong,
  .ledger-main strong,
  .share-person strong,
  .expense-people-grid label,
  .nickname-card p,
  .group-danger-zone p{
    font-size:13px!important;
  }

  .helptext,
  .fieldset-help,
  .stack-form ul:not(.errorlist),
  .stack-form ul.errorlist,
  .auth-card .helptext,
  .auth-card .errorlist,
  .security-row span,
  .member-row small,
  .ledger-main span,
  .ledger-main small,
  .share-person small,
  .compact-plan-list span,
  .title-history-list span,
  .private-review-note span,
  .auth-password-rules span,
  .auth-security-note small{
    font-size:12px!important;
    line-height:1.5;
  }

  .btn,
  .nav-link,
  .account-popover>a,
  .account-popover button,
  .subtle-link,
  .danger-link,
  .back-link{
    font-size:14px;
  }

  .btn-sm,
  .btn-compact{
    font-size:13px;
  }

  .group-mobile-nav a{
    font-size:12px!important;
    line-height:1.05;
  }

  /* A little more air around tap targets. */
  .btn,
  .icon-button,
  input,
  select,
  textarea,
  .filter-segments label,
  .vote-buttons button,
  .interest-picker button{
    min-height:44px;
  }

  .stack-form input:not([type=checkbox]):not([type=radio]),
  .stack-form select,
  .stack-form textarea{
    width:100%;
    max-width:100%;
  }

  /* Long text/URLs should never make the viewport wider than the phone. */
  .page-shell a,
  .page-shell p,
  .page-shell small,
  .page-shell code,
  .invite-result,
  .auth-token-note{
    overflow-wrap:anywhere;
  }
}

@media(max-width:520px){
  .page-shell{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }

  .topbar-inner{
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(14px, env(safe-area-inset-right));
  }

  .auth-card,
  .form-card,
  .panel,
  .feature-card,
  .invite-panel,
  .nickname-card,
  .security-card,
  .group-danger-zone{
    max-width:100%;
  }

  .auth-card,
  .form-card{
    padding-left:18px;
    padding-right:18px;
  }

  .account-popover{
    width:min(300px, calc(100vw - 24px));
    max-width:calc(100vw - 24px);
  }
}