/* One shared density knob for app pages. The body is expanded before being
   scaled down, so fixed-size controls shrink while full-height layouts still
   reach the bottom of the browser window. */
:root {
  --spark-app-zoom: 0.9;
  --spark-app-expanded-vw: 111.111111vw;
  --spark-app-expanded-vh: 111.111111vh;
  --spark-app-expanded-dvh: 111.111111dvh;
}

html {
  width: 100%;
  min-height: 100vh;
}

body {
  width: var(--spark-app-expanded-vw);
  min-height: var(--spark-app-expanded-vh) !important;
  transform: scale(var(--spark-app-zoom));
  transform-origin: top left;
}

.app-shell,
.app-container {
  height: var(--spark-app-expanded-vh) !important;
  min-height: var(--spark-app-expanded-vh) !important;
}

.stepper-shell {
  height: calc(var(--spark-app-expanded-vh) - var(--spark-header-offset, 0px)) !important;
}

#view-projects,
#view-materials {
  height: calc(var(--spark-app-expanded-vh) - 88px) !important;
  min-height: calc(var(--spark-app-expanded-vh) - 88px) !important;
}

@supports (height: 100dvh) {
  body {
    min-height: var(--spark-app-expanded-dvh) !important;
  }

  .app-shell,
  .app-container {
    height: var(--spark-app-expanded-dvh) !important;
    min-height: var(--spark-app-expanded-dvh) !important;
  }

  .stepper-shell {
    height: calc(var(--spark-app-expanded-dvh) - var(--spark-header-offset, 0px)) !important;
  }

  #view-projects,
  #view-materials {
    height: calc(var(--spark-app-expanded-dvh) - 88px) !important;
    min-height: calc(var(--spark-app-expanded-dvh) - 88px) !important;
  }
}

/* The review step already scales the parent page. Do not scale the embedded
   canvas iframe a second time. */
html.is-step-review {
  width: 100%;
  min-height: 100vh;
}

html.is-step-review body {
  width: 100%;
  min-height: 100vh !important;
  transform: none;
}

html.is-step-review .app-shell {
  height: 100vh !important;
  min-height: 100vh !important;
}