/* Bring the content windows up to the Online orb under the hero. */
body:not([data-route="account"]) .wrap > .hero + .main {
  padding-top: 0;
}

/* Give every content route the same full-width window as Home. */
body:not([data-route="home"]):not([data-route="account"]) .wrap > .hero + .main {
  padding-right: 0;
  padding-bottom: 40px;
  padding-left: 0;
}

body:not([data-route="home"]) .wrap #main-content {
  --ice-frame-height: 36px;
  --ice-frame-width: 40px;
  --ice-frame-outset: 18px;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 26px 30px 36px;
  position: relative;
  isolation: isolate;
  background: none;
  border: 1px solid #c1e8fa;
  border-image-source: url('../assets/silver-ice-window-frame-v1.svg');
  border-image-slice: 180 200;
  border-image-width: var(--ice-frame-height) var(--ice-frame-width);
  border-image-outset: var(--ice-frame-outset);
  border-image-repeat: stretch;
}

body:not([data-route="home"]) .wrap #main-content::before {
  content: '';
  position: absolute;
  inset: calc(var(--ice-frame-height) * .55) calc(var(--ice-frame-width) * .5);
  z-index: -1;
  border-radius: calc(var(--ice-frame-width) * .4) / calc(var(--ice-frame-height) * .4);
  background: linear-gradient(180deg, rgba(239,248,255,.5), rgba(247,252,255,.45) 55%, rgba(255,255,255,.35));
  pointer-events: none;
}

/* The old feature pages painted a separate opaque rounded sheet. */
body:is([data-route="register"],[data-route="downloads"],[data-route="rankings"]) .wrap #main-content > .feature-page {
  padding: 0;
  border: 0;
  border-image: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Home's inner cards make headings readable over the shared sky artwork. */
body:not([data-route="home"]):not([data-route="account"]) .wrap #main-content :is(.page-design-heading,.page-heading) {
  --ice-frame-height: 24px;
  --ice-frame-width: 27px;
  --ice-frame-outset: 12px;
  margin: 0 0 32px;
  padding: 18px 24px 20px;
  border: 1px solid #c1e8fa;
  border-image-source: url('../assets/silver-ice-window-frame-v1.svg');
  border-image-slice: 180 200;
  border-image-width: var(--ice-frame-height) var(--ice-frame-width);
  border-image-outset: var(--ice-frame-outset);
  border-image-repeat: stretch;
  border-radius: 10px;
  background: rgba(245,251,255,.9);
  box-shadow: none;
  text-align: center;
}

body:not([data-route="home"]):not([data-route="account"]) .wrap #main-content .page-heading h2 {
  margin: 0;
  color: #4e687c;
  font: 400 clamp(25px,3vw,36px)/1.25 Georgia,'Times New Roman',serif;
  letter-spacing: .065em;
  text-transform: uppercase;
}

/* Use Home's framed inner cards where the earlier page layout removed them. */
body:is([data-route="register"],[data-route="downloads"],[data-route="rankings"]) .wrap #main-content [data-page-design] :is(.home-card,.register-shell,.route-card,.article-body) {
  --ice-frame-height: 24px;
  --ice-frame-width: 27px;
  --ice-frame-outset: 12px;
  border: 1px solid #c1e8fa;
  border-image-source: url('../assets/silver-ice-window-frame-v1.svg');
  border-image-slice: 180 200;
  border-image-width: var(--ice-frame-height) var(--ice-frame-width);
  border-image-outset: var(--ice-frame-outset);
  border-image-repeat: stretch;
  border-radius: 10px;
  background: rgba(245,251,255,.94);
  box-shadow: none;
  padding: 24px;
}

body[data-route="register"] .wrap #main-content [data-page-design] .register-shell {
  padding: 0;
}

body[data-route="register"] .wrap #main-content [data-page-design] .register-layout {
  padding: 26px;
}

/* Keep the embedded account form intact while matching the outer page window. */
body[data-route="account"] .wrap > .hero + .main {
  padding: 0 0 40px;
  background-color: #e3f1fa;
  background-image: url('../assets/grand-mu-menu-continuation-aligned-v5.jpg');
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

body[data-route="account"] .user-panel-inline::after {
  content: none;
}

@media (max-width: 720px) {
  body:not([data-route="account"]) .wrap > .hero + .main,
  body[data-route="account"] .wrap > .hero + .main {
    /* On a single-column layout, the first panel must clear the orb itself. */
    padding-top: calc(32.4vw + 4px);
  }

  body[data-route="account"] .wrap > .hero + .main {
    background-size: 113.5% auto;
  }

  body:not([data-route="home"]) .wrap #main-content {
    --ice-frame-height: 24px;
    --ice-frame-width: 27px;
    --ice-frame-outset: 12px;
    padding: 20px 18px 26px;
  }

  body:not([data-route="home"]):not([data-route="account"]) .wrap #main-content :is(.page-design-heading,.page-heading) {
    margin-bottom: 26px;
    padding: 18px;
  }

  body:is([data-route="register"],[data-route="downloads"],[data-route="rankings"]) .wrap #main-content [data-page-design] :is(.home-card,.register-shell,.route-card,.article-body) {
    padding: 18px;
  }

  body[data-route="register"] .wrap #main-content [data-page-design] .register-shell {
    padding: 0;
  }

  body[data-route="register"] .wrap #main-content [data-page-design] .register-layout {
    padding: 18px;
  }
}