/* gate.css — the sign-in overlay.
 *
 * Deliberately covers the whole viewport rather than hiding the page behind a
 * modal: until Firebase confirms a session there is nothing behind it anyway,
 * and a half-rendered dashboard flashing past before the login form appears
 * would look like a leak even though it is not one.
 */

html.gated body > header,
html.gated body > nav,
html.gated body > .filterbar,
html.gated body > main { display: none; }

#gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--surface);
}

#gate-form {
  width: 100%; max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  padding: 28px 26px 22px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .10);
}

#gate-form h1 { font-size: 17px; margin: 0 0 6px; letter-spacing: -.01em; }
.gate-sub { margin: 0 0 20px; font-size: 12.5px; color: var(--ink2); line-height: 1.5; }

#gate-form label {
  display: block; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 13px;
}
#gate-form input {
  display: block; width: 100%; margin-top: 5px;
  font: inherit; font-size: 14px; padding: 9px 11px;
  border: 1px solid var(--grid); border-radius: 7px;
  background: var(--surface); color: var(--ink);
  text-transform: none; letter-spacing: normal;
}
#gate-form input:focus {
  outline: none; border-color: var(--s1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--s1) 18%, transparent);
}
#gate-go { width: 100%; padding: 10px; margin-top: 4px; font-size: 13.5px; }

.gate-err {
  margin: 12px 0 0; font-size: 12.5px; color: var(--critical);
  min-height: 1em; line-height: 1.45;
}
.gate-foot { margin: 16px 0 0; font-size: 11.5px; color: var(--muted); }

.whoami { margin-right: 4px; }

@media (max-width: 420px) {
  #gate-form { padding: 22px 18px 18px; }
}