/* High-fidelity splash/login gate for the Scilly PWA. */
html.auth-pending main,
html.auth-required main {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  min-height: 100svh;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  background:
    radial-gradient(circle at 20% 10%, rgba(251,113,133,.28), transparent 22rem),
    radial-gradient(circle at 88% 8%, rgba(14,116,144,.26), transparent 20rem),
    linear-gradient(180deg,#bae6fd 0%,#e0f2fe 42%,#fffaf0 100%);
  color: #102033;
}
html.auth-pending .auth-screen,
html.auth-required .auth-screen { display: grid; place-items: center; }
html.auth-ready .auth-screen { display: none; }
.auth-shell {
  width: min(100%, 440px);
  display: grid;
  align-items: center;
}
.auth-card {
  position: relative;
  border: 1px solid rgba(255,255,255,.74);
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,250,240,.84));
  box-shadow: 0 24px 70px rgba(8,47,73,.20);
  border-radius: 34px;
  overflow: hidden;
  backdrop-filter: blur(18px);
  padding: 22px;
}
.auth-card::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -44px;
  height: 82px;
  background: linear-gradient(135deg,#075985,#0e7490 58%,#38bdf8);
  mask: radial-gradient(26px 22px at 50% 0,#0000 98%,#000) 0 0/52px 100%;
  opacity: .86;
  pointer-events: none;
}
.auth-kicker { position: relative; z-index: 1; display:inline-flex; width:max-content; max-width:100%; gap:8px; align-items:center; padding:8px 12px; border:1px solid rgba(7,89,133,.18); border-radius:999px; background:rgba(255,255,255,.72); color:#075985; font-weight:900; font-size:.78rem; letter-spacing:.03em; }
.auth-card h1 { position: relative; z-index: 1; margin: 18px 0 4px; font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif; color:#0c4a6e; font-size: clamp(2.7rem, 13vw, 4.5rem); line-height:.88; letter-spacing:-.06em; }
.auth-card h2 { position: relative; z-index: 1; margin: 0 0 7px; color:#0c4a6e; font-size:1.28rem; }
.auth-card p { position: relative; z-index: 1; margin:0 0 18px; color:#5f7185; line-height:1.45; }
.auth-form { position: relative; z-index: 1; display:grid; gap: 12px; }
.auth-field { display:grid; gap:6px; }
.auth-field span { color:#075985; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; font-weight:950; }
.auth-field input {
  width:100%; min-height:52px; border:1px solid rgba(16,32,51,.14); border-radius:18px; padding:13px 14px;
  background:#fff; color:#102033; font: inherit; font-size:16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.auth-field input:focus { outline:3px solid rgba(14,116,144,.24); border-color:#0e7490; }
.auth-submit { min-height:52px; border:0; border-radius:999px; background:#075985; color:white; font-weight:950; font-size:1rem; box-shadow:0 14px 30px rgba(7,89,133,.26); cursor:pointer; }
.auth-submit:active { transform: translateY(1px); }
.auth-error { min-height:1.2em; margin:2px 0 0; color:#be123c; font-weight:850; font-size:.92rem; }
.auth-note { position: relative; z-index: 1; margin-top:14px; margin-bottom: 36px; padding:12px; border-radius:18px; background:#f8fafc; border:1px solid rgba(16,32,51,.10); color:#475569; font-size:.9rem; line-height:1.38; }
.auth-logout {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 45;
  display:none;
  min-height:44px;
  border:0;
  border-radius:999px;
  padding:10px 14px;
  background:#082f49;
  color:#e0f2fe;
  font-weight:950;
  box-shadow:0 12px 30px rgba(8,47,73,.22);
}
html.auth-ready .auth-logout { display:block; }
@media (min-width: 800px) {
  .auth-shell { width: min(100%, 460px); }
  .auth-card { padding: 28px; border-radius: 36px; }
}
@media (prefers-reduced-motion:no-preference) {
  .auth-card { animation: auth-rise .45s ease both; }
  @keyframes auth-rise { from { opacity:0; transform:translateY(14px) scale(.99); } to { opacity:1; transform:none; } }
}