/* V31 responsive widths matched to the supplied scratch preview.
 * The previous 80% clamp made every sidebar and the Find your people card too
 * narrow; restore the preview's full three-column proportions on desktop.
 * This file intentionally remains the last common desktop geometry override. */
@media (min-width: 861px) {
  #root .app,
  #root .app.app--ref {
    width: 100%;
    max-width: 1500px;
    grid-template-columns: 228px minmax(0, 1fr);
    column-gap: 18px;
    padding-left: 16px;
    padding-right: 16px;
  }
  #root .app .app-topbar {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    isolation: isolate;
  }
  #root .app .app-topbar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #fff;
    border-bottom: 1px solid var(--hair);
    z-index: -1;
    pointer-events: none;
  }
  #root .app .top-logo {width: 220px}
  #root .app .app-search {max-width: 560px; flex-basis: 560px}
}
@media (min-width: 1180px) {
  #root .app,
  #root .app.app--ref {
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 24px;
  }
  #root .app .top-logo {width: 240px}
}
@media (min-width: 1191px) {
  #root .app .app-content:has(.right-rail:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 326px);
    gap: 24px;
  }
}
@media (min-width: 861px) and (max-width: 1190px) {
  #root .app .app-content:has(.right-rail:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* V31 auth mockups use an evenly split 1440px shell on large screens. */
@media (min-width: 921px) {
  body > .shell {max-width: 1440px}
}
/* The 390px/mobile preview remains full width and unchanged. */