/* Web-only host chrome. The MAUI iOS/Android project does not load this file. */

:root {
  --eqn-web-device-width: 430px;
  --eqn-web-device-height: 932px;
  --eqn-web-screen-width: 402px;
  --eqn-web-screen-height: 874px;
  --eqn-web-device-scale: 1;
  --eqn-web-device-slot-width: var(--eqn-web-device-width);
  --eqn-web-device-slot-height: var(--eqn-web-device-height);
  --eqn-web-stage-height: var(--eqn-viewport-height, 100dvh);
  --eqn-web-radius: 42px;
  --eqn-web-screen-radius: 30px;
  /* Old gradient background, preserved in case we want to bring it back.
  --eqn-web-stage-bg:
    radial-gradient(circle at 18% 14%, rgba(255, 191, 0, 0.18), transparent 26rem),
    radial-gradient(circle at 84% 82%, rgba(42, 128, 219, 0.20), transparent 28rem),
    linear-gradient(135deg, #eef5ff 0%, #f9fbff 45%, #edf7f1 100%);
  */
  --eqn-web-stage-bg: #f9fbff;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html.eqn-web-fullscreen {
  height: auto;
  min-height: 100%;
  overflow: auto;
}

body.eqn-web-host {
  width: 100%;
  max-width: none;
  height: var(--eqn-web-stage-height);
  min-height: var(--eqn-web-stage-height);
  margin: 0;
  display: block;
  overflow: hidden;
  background: var(--eqn-web-stage-bg);
}

body.eqn-web-embedded {
  width: 100%;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

body.eqn-web-fullscreen {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  overflow: auto;
  background: #fff;
}

.eqn-web-stage {
  width: 100%;
  height: var(--eqn-web-stage-height);
  min-height: var(--eqn-web-stage-height);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.eqn-web-device-slot {
  width: var(--eqn-web-device-slot-width);
  height: var(--eqn-web-device-slot-height);
  position: relative;
}

.eqn-web-device {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--eqn-web-device-width);
  height: var(--eqn-web-device-height);
  border-radius: var(--eqn-web-radius);
  background:
    linear-gradient(135deg, #f8fafc 0%, #8f98a6 18%, #121821 40%, #0b0f17 100%);
  box-shadow:
    0 24px 70px rgba(24, 34, 58, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.64),
    inset 0 0 0 2px rgba(255, 255, 255, 0.18),
    inset 0 0 0 9px #111827;
  transform: scale(var(--eqn-web-device-scale));
  transform-origin: top left;
}

.eqn-web-device::before {
  display: none;
}

.eqn-web-device-screen {
  position: absolute;
  left: 14px;
  top: 28px;
  width: var(--eqn-web-screen-width);
  height: var(--eqn-web-screen-height);
  border-radius: var(--eqn-web-screen-radius);
  overflow: hidden;
  background: #fff;
}

.eqn-web-device-screen > iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

body.eqn-web-host #app {
  display: none;
}

body.eqn-web-host #swal-root {
  display: none;
}

body.eqn-web-host #blazor-error-ui {
  display: none !important;
}

body.eqn-web-embedded .eqn-web-stage {
  display: none;
}

body.eqn-web-fullscreen .eqn-web-stage {
  display: none;
}

body.eqn-web-embedded #app,
body.eqn-web-fullscreen #app {
  --eqn-viewport-height: 100vh;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding-bottom: 0;
  background: #fff;
}

body.eqn-web-embedded #app {
  height: 100vh;
  overflow: hidden;
}

body.eqn-web-host #swal-root {
  position: absolute;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
}

body.eqn-web-host #swal-root .swal2-container {
  pointer-events: auto;
}

@media (min-width: 760px) {
  .eqn-web-stage {
    padding-inline: 24px;
  }
}

@media (max-width: 759.98px) {
  :root {
    --eqn-web-radius: 0;
    --eqn-web-screen-radius: 0;
    --eqn-web-screen-width: 100vw;
    --eqn-web-screen-height: var(--eqn-web-stage-height);
  }

  body.eqn-web-host {
    background: #fff;
  }

  .eqn-web-device-slot,
  .eqn-web-device,
  .eqn-web-device-screen {
    position: relative;
    inset: auto;
    width: 100vw;
    height: var(--eqn-web-stage-height);
    transform: none;
    box-shadow: none;
    background: #fff;
  }

  .eqn-web-device::before {
    display: none;
  }
}