:root{
  --app-shell-max-width:var(--guitto-shell-sp-max-width);
  --guitto-shell-width:var(--guitto-shell-sp-max-width);
  --guitto-fixed-ui-max-width:var(--guitto-shell-width);
}

/* Mobile-first compatibility layer. It centralizes the existing 430px shell
   and fixed-control geometry without widening any page in this block. */
.recommend-shell,
.app-shell.search-shell,
.likes-shell,
.app-shell.my-page-shell,
.app-shell.matches-shell,
.app-shell:has(.match-v1),
.app-shell:has(.profile-detail-v1),
.profile-setup-shell,
.preferences-setup-v1,
.settings-shell,
.my-page-shell:has(.settings-v18),
.visitors-shell,
.likes-shell:has(.visitors-v18),
.notification-shell{
  width:min(100%,var(--guitto-shell-width));
  max-width:var(--guitto-shell-width);
}

.recommend-bottom-nav,
.likes-bottom-nav,
.my-page-bottom-nav,
.matches-bottom-nav,
.profile-like-bar,
.interest-selection-page footer,
.profile-setup-v18:after,
.preferences-setup-v1:after{
  width:min(100%,var(--guitto-fixed-ui-max-width));
}

.profile-setup-v18 #profile-form>.primary-button,
.preferences-setup-v1 form>.primary-button{
  width:min(calc(100% - 48px),var(--guitto-fixed-cta-content-max-width));
}

/* Billing owns the current Wide reference layout and is intentionally isolated. */
.app-shell:has(.billing-server){
  --guitto-shell-width:var(--guitto-shell-wide-max-width);
  --billing-page-width:var(--guitto-shell-wide-max-width);
}

.diagnosis-page{
  width:min(100%,var(--guitto-shell-reading-max-width));
}

@media(max-width:760px){
  .app-shell:has(.billing-server){
    --guitto-shell-width:var(--guitto-shell-sp-max-width);
  }
}

@media(min-width:761px){
  /* Discovery: the existing multi-card pages use the Wide shell. */
  .app-shell.search-shell,
  .app-shell:has(.search-page){
    --guitto-shell-width:var(--guitto-shell-wide-max-width);
    width:min(100%,var(--guitto-shell-width));
    max-width:var(--guitto-shell-width);
  }

  .search-page{
    max-width:1064px;
    margin-inline:auto;
    padding:28px var(--guitto-layout-gutter-desktop) 40px;
  }

  .discovery-hub{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
  }

  .discovery-hub .hub-card{
    min-height:278px;
  }

  .discovery-interest-page .interest-category-grid,
  .discovery-category-grid{
    grid-template-columns:repeat(auto-fit,minmax(164px,1fr));
    gap:14px;
  }

  .search-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px 14px;
  }

  /* The single daily recommendation remains a focused, non-stretched card. */
  .recommend-recovery-shell,
  .recommend-shell,
  .app-shell:has(.recommend-page){
    --guitto-shell-width:var(--guitto-shell-medium-max-width);
    width:min(100%,var(--guitto-shell-width));
    max-width:var(--guitto-shell-width);
  }

  .recommend-page.recommend-v1{
    max-width:680px;
    margin-inline:auto;
    padding:18px 20px 28px;
  }

  .recommend-v1 .recommend-photo{
    height:min(64vh,520px);
  }

  /* Dense lists gain room and two columns without changing their cards' contents. */
  .app-shell.likes-shell,
  .app-shell:has(.received-likes-v1),
  .app-shell:has(.visitors-v18),
  .app-shell.matches-shell,
  .app-shell:has(.matches-v18){
    --guitto-shell-width:var(--guitto-shell-list-max-width);
    width:min(100%,var(--guitto-shell-width));
    max-width:var(--guitto-shell-width);
  }

  .received-likes-v1,
  .visitors-v18,
  .matches-page.matches-v18{
    max-width:904px;
    margin-inline:auto;
    padding:24px var(--guitto-layout-gutter-desktop) 36px;
  }

  .received-likes-v1 .like-list,
  .visitors-list,
  .matches-v18 .match-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  /* Profile and settings use the Medium shell to keep reading and form rows calm. */
  .app-shell.my-page-shell,
  .app-shell.settings-shell,
  .app-shell:has(.server-my-menu),
  .app-shell:has(.settings-v18){
    --guitto-shell-width:var(--guitto-shell-medium-max-width);
    width:min(100%,var(--guitto-shell-width));
    max-width:var(--guitto-shell-width);
  }

  .my-page-v18,
  .settings-v18,
  .server-page:has(.server-my-menu){
    max-width:680px;
    margin-inline:auto;
    padding-inline:var(--guitto-layout-gutter-desktop);
  }

  .my-profile-card{
    grid-template-columns:128px minmax(0,1fr);
  }

  .my-profile-card>img{
    width:128px;
    height:128px;
  }
}