/* Presentation-only wrapper. The scientific engine in engine.html is frozen. */
html, body {
  background: transparent !important;
  background-image: none !important;
  min-height: 0 !important;
  overflow-y: hidden !important;
}
/* The original standalone engine fills its entire viewport. In an iframe this
   makes its own height depend on the parent frame, leaving a large blank tail.
   Let the embedded calculator take only its real content height instead. */
main.container {
  min-height: 0 !important;
  height: auto !important;
}
/* The frozen standalone engine's old copyright/audit.html footer must not
   appear inside the application. That audit link can recursively open the
   hosting fallback inside the iframe, producing nested sites and scrollbars. */
main.container > footer {
  display: none !important;
}
body::before,
#stable-photo-background {
  display: none !important;
  content: none !important;
  background: none !important;
}
/* Pale gray Arabic guidance replaces the sample density/temperature values. */
#density::placeholder,
#temp::placeholder {
  color: #97a4b2 !important;
  opacity: .78 !important;
  font-weight: 500 !important;
}
#density:placeholder-shown,
#temp:placeholder-shown { direction: rtl; text-align: center; }
#density.field-needs-input,
#temp.field-needs-input,
#ptb.field-needs-input,
#waterContent.field-needs-input {
  outline: 3px solid #ffc44c !important;
  outline-offset: 2px;
  border-color: #a85300 !important;
}
#zb2-report-from-engine {
  display: block;
  width: 100%;
  margin-top: 14px;
  min-height: 58px;
  border: 2px solid #f5bf4c;
  border-radius: 13px;
  padding: 12px 16px;
  color: #ffe6a3;
  background: rgba(5,37,75,.94);
  box-shadow: 0 4px 14px rgba(0,16,37,.35);
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}
#zb2-report-from-engine:hover { background: #154673; }
#zb2-report-from-engine:focus-visible { outline: 3px solid #ffe27e; outline-offset: 3px; }
#zb2-report-from-engine:disabled { opacity: .6; cursor: wait; }