/* #region zone:disaster.gate.style — ปรับเปลือก login ร่วมให้เข้ากับหน้า Hazard */
.link-opening {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--u-text);
  background: var(--u-page);
  font-family: Anuphan, sans-serif;
}
.link-opening[hidden] {
  display: none;
}
.link-opening img {
  border-radius: 14px;
  box-shadow: 0 8px 28px rgb(16 46 55 / 18%);
}
.viewer-banner {
  position: fixed;
  z-index: 45;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: var(--u-radius-pill);
  background: #0b615d;
  color: #fff;
  font-size: var(--u-text-xs);
  box-shadow: 0 8px 24px rgb(9 48 54 / 22%);
  white-space: nowrap;
}
.viewer-banner[hidden] {
  display: none;
}
.gate.login-shell {
  padding: 0;
  align-items: stretch;
  overflow-y: auto;
  z-index: 30;
}
.gate .login-shell-card {
  max-width: none;
  padding: 0;
  border-radius: 0;
  text-align: left;
}
.gate .login-shell-form > * {
  margin-left: auto;
  margin-right: auto;
}
.gate .login-shell-form > p {
  margin-bottom: var(--u-space-4);
}
.gate .login-shell-form h1 {
  margin-bottom: var(--u-space-2);
  font-size: var(--fs-2xl);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.gate .login-shell-name {
  margin: 0;
  color: var(--u-text);
  --weather-gate-title-type: clamp(22px, 2.6vw, 30px);
  font-size: var(--weather-gate-title-type);
  line-height: 1.3;
}
.gate .login-shell-tagline {
  margin: 0;
  color: var(--u-text-muted);
  font-size: 14px;
  line-height: 1.65;
}
@media (min-width: 1440px) {
  .gate .login-shell-name {
    --weather-gate-title-type: clamp(30px, 2.4vw, 40px);
    font-size: var(--weather-gate-title-type);
  }
  .gate .login-shell-tagline {
    font-size: 16px;
  }
}
.gate-form {
  display: grid;
  gap: var(--u-space-3);
  text-align: left;
  margin-top: var(--u-space-1);
}
.gate-field {
  display: grid;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}
.gate-field input {
  width: 100%;
  border: 1px solid var(--card-line);
  background: var(--glass-strong);
  color: var(--text);
  font: inherit;
}
.gate-field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.gate .gate-error {
  color: var(--danger);
  background: var(--danger-soft);
  padding: var(--u-space-2) var(--u-space-3);
  border-radius: var(--r-control);
}
.gate .gate-error[hidden],
.gate #gate-form[hidden] {
  display: none;
}
.gate-form .button[aria-busy='true'] {
  opacity: 0.7;
}
.login-shell-form .button.primary {
  border-radius: var(--u-radius-pill);
}
.gate-help {
  margin-top: 20px;
}
.gate .gate-line-title {
  margin: 0 0 var(--u-space-1);
  font-size: var(--fs-sm);
  font-weight: 650;
}
.gate .gate-help p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}
/* #region zone:disaster.gate.style.cookie-tap — ลิงก์คุกกี้คงข้อความเดิมแต่มีพื้นที่แตะบนมือถือ */
@media (max-width: 820px) {
  .gate .cookie-note a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding-inline: var(--sheet-space);
  }
}
/* #endregion */
/* #endregion */

/* #region zone:disaster.style.map-error — แผนที่พื้นฐานโหลดไม่สำเร็จ */
.map-error {
  position: fixed;
  z-index: 44;
  top: calc(max(10px, env(safe-area-inset-top)) + 56px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--u-space-3);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--glass-strong);
  color: var(--text);
  box-shadow: var(--glass-shadow);
  font-size: var(--fs-sm);
}
.map-error p {
  margin: 0;
}
.map-error-retry {
  min-height: var(--tap-min);
  padding: 0 var(--u-space-4);
  border: 0;
  border-radius: var(--u-radius-pill);
  background: var(--accent-strong);
  color: var(--on-accent);
  font: inherit;
  cursor: pointer;
}
.map-error[hidden] {
  display: none;
}
/* #endregion */