/*
 * Desktop density correction.
 *
 * The project is designed on a 1920px canvas. On Windows displays using
 * 125% system scaling, Chrome's 100% page zoom exposes a narrower CSS
 * viewport, making the interface appear oversized. Header and footer always
 * use the landing-page density so their geometry stays identical on every
 * route. Account and questionnaire content receives only a small, separate
 * lift over that shared density. Phones and tablets remain at native scale.
 */
:root {
  --site-desktop-scale: .67;
  /* Admin screens are intentionally 25% larger than the shared customer
     chrome. This reproduces the current 125% browser-zoom appearance while
     the browser itself remains at 100%. */
  --site-admin-desktop-scale: .8375;
  --site-internal-content-scale: 1.15;
  /* The internal content is enlarged by 1.15.  Its logical rail therefore
     has to be divided by the same value so the rendered edges still land on
     the shared 1604px header/footer rail. */
  --site-internal-rail-max: 1394.782609px;
  --site-internal-rail-gutter: 69.565217px;
}

@media screen and (min-width: 1200px) {
  html.site-density-compact {
    zoom: var(--site-desktop-scale);
  }

  html.site-density-compact.admin-density {
    zoom: var(--site-admin-desktop-scale);
  }

  :is(
    .home-page,
    .portal-page,
    .order-page,
    .questionnaire-page,
    .payment-result-page
  ) > .page-shell {
    zoom: var(--site-internal-content-scale);
  }

  :is(
    .portal-page,
    .order-page,
    .questionnaire-page,
    .payment-result-page
  ) > .page-shell {
    width: min(
      var(--site-internal-rail-max),
      calc(100% - var(--site-internal-rail-gutter))
    );
  }

  /* The account entry page keeps its full-bleed shell.  Only the content
     rails inside that shell receive the inverse-width correction. */
  .home-page :is(
    .home-hero__content,
    .home-create,
    .home-intro
  ) {
    width: min(
      var(--site-internal-rail-max),
      calc(100% - var(--site-internal-rail-gutter))
    );
  }
}