/* 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; }

/* ---------------------------------------------------------------- admin bar
 * Only ever rendered for role: admin (see admin.js). Visually separated from
 * the filter bar above it so that publishing controls are never mistaken for
 * something that changes what is on screen.
 */
#admin-panel {
  border-bottom: 1px solid var(--grid);
  background: color-mix(in srgb, var(--s1) 5%, var(--panel));
  padding: 8px 18px;
}
.admin-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-spacer { flex: 1; }
.admin-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--s1); color: var(--panel); font-weight: 600;
}
#admin-howto { padding: 4px 0 6px; max-width: 760px; }
#admin-howto p { margin: 8px 0; line-height: 1.5; }
.admin-cmd {
  margin: 8px 0; padding: 11px 13px; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--grid);
  border-radius: 7px; font-size: 12px; line-height: 1.65;
  white-space: pre; user-select: all;
}

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