/* Gate
   Sign-in screen, loading and can't-connect states, and the Lock button. */

.is-locked .tabs,
.is-locked .masthead-actions,
.is-locked .footer { display: none; }

.gate { min-height: 62vh; display: grid; place-items: center; padding-block: 48px; }
.gate-card {
  width: min(430px, 100%);
  display: grid; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 28px;
}
.gate-title { font: 600 30px/1.1 var(--display); }
.gate-card .eyebrow { margin-bottom: 0; }
#gate-form { display: grid; gap: 8px; margin-top: 4px; }
#gate-form label { font-weight: 600; font-size: 13px; }
#gate-form .btn-primary, #retry { justify-content: center; padding-block: 11px; margin-top: 4px; }

.loading-state { display: flex; gap: 10px; align-items: center; justify-content: center; padding-block: 96px; color: var(--muted); }

.btn-lock { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn-lock:hover { background: transparent; color: #fff; border-color: #fff; }

/* The outreach (admin) control in the masthead: an unlock for the team, a
   quiet badge once it has been used. */
.btn-admin { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn-admin:hover { background: transparent; color: #fff; border-color: #fff; }
.btn-admin[data-state="on"] { border-color: transparent; background: rgba(255, 255, 255, 0.14); opacity: 1; cursor: default; }
.btn-admin[data-state="on"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: 7px; vertical-align: 1px; }