/* AOM V50.3 Guide layout hotfix.
 *
 * V49.5 makes #main a two-column grid on viewports >= 1201px. The current
 * Guide markup already owns its own two-column grid, so nesting that complete
 * stage inside the first legacy column collapses the access and step columns
 * to zero pixels. Keep the compact JavaScript features, but give the Guide
 * stage the full page width again.
 */

html body.page-app.aom-app-compact main#main {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

/* Keep Back on the same horizontal boundary as the Guide canvas. */
html body.page-app.aom-app-compact main#main > .aom-page-back-wrap {
  box-sizing: border-box !important;
  width: min(
    var(--aom-v50-page-width, 1440px),
    calc(100% - (var(--aom-v50-gutter, clamp(24px, 3.2vw, 64px)) * 2))
  ) !important;
  max-width: var(--aom-v50-page-width, 1440px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Defensive guards: no Guide track or card may resolve to a zero width. */
html body.page-app.aom-app-compact main#main .aom-guide-final-stage,
html body.page-app.aom-app-compact main#main .aom-guide-final-grid,
html body.page-app.aom-app-compact main#main .aom-guide-final-access,
html body.page-app.aom-app-compact main#main .aom-guide-final-steps {
  min-width: 0 !important;
}

html body.page-app.aom-app-compact main#main .aom-guide-final-access,
html body.page-app.aom-app-compact main#main .aom-guide-final-steps {
  width: 100% !important;
}

html body.page-app.aom-app-compact main#main .aom-guide-final-steps > div {
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
}

@media (max-width: 680px) {
  html body.page-app.aom-app-compact main#main > .aom-page-back-wrap {
    width: calc(100% - 30px) !important;
  }
}