/* Repeated gate ID intentionally outranks historical inline login skins from first paint. */
/* HTNS v302 r111 — one continuous clean blue sky with transparent foregrounds.
   Matches the approved full-screen reference: safe-area sky above the artwork,
   balanced 32/29/39 hero-card-scene proportions, complete church scene, and no bottom gap. */
@media (max-width: 899px) {
  html.htns-theme-v234.login-screen-active[data-theme="light"],
  html.htns-theme-v234.login-screen-active[data-theme="light"] body,
  html.htns-theme-v234.login-screen-active[data-theme="light"] body #app {
    width:100% !important;
    height:max(100vh, calc(100dvh + env(safe-area-inset-bottom, 0px))) !important;
    min-height:max(100vh, calc(100dvh + env(safe-area-inset-bottom, 0px))) !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#61b7f1 !important;
  }

  html.htns-theme-v234.login-screen-active[data-theme="light"] body {
    position:fixed !important;
    inset:0 !important;
  }

  html.htns-theme-v234[data-theme="light"] body #app #gate#gate.gate[data-login-skin="r71"] {
    position:fixed !important;
    inset:0 !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:max(100vh, calc(100dvh + env(safe-area-inset-bottom, 0px))) !important;
    min-height:max(100vh, calc(100dvh + env(safe-area-inset-bottom, 0px))) !important;
    max-height:none !important;
    overflow:hidden !important;
    background:#61b7f1 !important;
  }

  /* The r101 hero has a built-in sky-only safe-area band so the real iPhone status
     icons sit over sky and never collide with the devotional lettering. */
  html.htns-theme-v234[data-theme="light"] body #app #gate#gate.gate[data-login-skin="r71"] .htns-login-hero-r71 {
    flex:0 0 32.1dvh !important;
    width:100% !important;
    height:32.1dvh !important;
    min-height:32.1dvh !important;
    max-height:32.1dvh !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  html.htns-theme-v234[data-theme="light"] body #app #gate#gate.gate[data-login-skin="r71"] .htns-login-panel-stage-r71 {
    flex:0 0 auto !important;
    width:100% !important;
    margin:-1px 0 0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  html.htns-theme-v234[data-theme="light"] body #app #gate#gate.gate[data-login-skin="r71"] .panel {
    width:90.7% !important;
    margin:0 4.65% !important;
  }

  /* Fill the exact remaining viewport with the complete lower artwork. This intentionally
     scales the scene to its box rather than cover-cropping it, matching the approved mockup. */
  html.htns-theme-v234[data-theme="light"] body #app #gate#gate.gate[data-login-skin="r71"] .htns-login-scene-r71 {
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 0 env(safe-area-inset-bottom, 0px) !important;
    box-sizing:border-box !important;
    background-color:transparent !important;
    background-image:url('/htns-login-scene-foreground-r109.png') !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
    background-position:center top !important;
  }
}

@media (display-mode: standalone) and (max-width: 899px) {
  html.htns-theme-v234[data-theme="light"] body #app #gate#gate.gate[data-login-skin="r71"] {
    height:max(100vh, calc(100dvh + env(safe-area-inset-bottom, 0px))) !important;
    min-height:max(100vh, calc(100dvh + env(safe-area-inset-bottom, 0px))) !important;
  }
}

/* One sky layer, shared by the header, live login panel, and church foreground.
   No separate sky gradients or opaque sky artwork can create horizontal bands. */
html.htns-theme-v234.login-screen-active[data-theme="light"],
html.htns-theme-v234.login-screen-active[data-theme="light"] body,
html.htns-theme-v234.login-screen-active[data-theme="light"] body #app,
html.htns-theme-v234[data-theme="light"] body #app #gate#gate.gate[data-login-skin="r71"] {
  background:#61b7f1 !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate#gate.gate[data-login-skin="r71"] .htns-login-hero-r71 {
  background:transparent !important;
  isolation:isolate;
}
html.htns-theme-v234[data-theme="light"] body #app #gate#gate.gate[data-login-skin="r71"] .htns-login-hero-r71::before {
  content:"";
  position:absolute;
  inset:0;
  display:block;
  background:url('/htns-login-header-foreground-r109.png') center / 100% 100% no-repeat;
  /* Exclude the generated tile and shadow. The original logo is rendered below. */
  clip-path:polygon(0 0, 35% 0, 35% 69%, 65% 69%, 65% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events:none;
}
html.htns-theme-v234[data-theme="light"] body #app #gate#gate.gate[data-login-skin="r71"] .htns-login-hero-r71::after {
  content:"";
  position:absolute;
  display:block;
  left:38.15090329%;
  top:26.49006623%;
  width:24.12327311%;
  height:38.41059603%;
  /* Exact original tile crop: x=359, y=160, width=227, height=232 in 941x604. */
  background:#fff url('/htns-login-hero-r107.jpg') 50.28011204% 43.01075269% / 414.53744493% 260.34482759% no-repeat;
  border-radius:18.5% / 18.1%;
  box-shadow:0 7px 16px rgba(22,69,104,.16);
  pointer-events:none;
}
html.htns-theme-v234[data-theme="light"] body #app #gate#gate.gate[data-login-skin="r71"] .htns-login-panel-stage-r71 {
  background:transparent !important;
}
html.htns-theme-v234[data-theme="light"] body #app #gate#gate.gate[data-login-skin="r71"] .htns-login-scene-r71 {
  background-color:transparent !important;
  background-image:url('/htns-login-scene-foreground-r109.png') !important;
}