/* style — the sign-in gate and the account panel.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---- Sign-in gate ------------------------------------------------------
   Covers the workspace while signed out. Deliberately does NOT cover the
   header: the profile chip up there is the only way to reach the sign-in
   form, so hiding it would leave someone stuck behind a wall with no door.
   The gate's own button opens the same drawer, for the people who look at
   the middle of the screen rather than the corner. */
#authgate {
  position: absolute; inset: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 13, 14, .92);
  backdrop-filter: blur(3px);
}
.authgate-card {
  width: 330px; max-width: calc(100% - 32px); text-align: center; padding: 26px 28px;
  background: var(--card); border: 1px solid var(--border); border-radius: 3px;
  box-shadow: 0 24px 60px var(--scrim);
}
/* The form. Labels left-aligned over full-width fields — the ordinary shape
   of a sign-in box, because this is an ordinary sign-in box and anything
   cleverer would only be something new to work out. */
.gate-lab {
  display: block; text-align: left; font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint);
  margin: 12px 0 5px;
}
.authgate-card input[type=email],
.authgate-card input[type=password] {
  width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  color: var(--text); font-family: inherit; font-size: 12px; padding: 8px 10px;
  outline: none;
}
.authgate-card input:focus { border-color: var(--accent); }
.authgate-card .btn.primary { width: 100%; justify-content: center; margin-top: 16px; }
.gate-msg {
  min-height: 14px; margin: 10px 0 0; font-size: 10.5px; line-height: 1.45;
  color: var(--text-dim);
}
.gate-msg.err { color: #ffb3c1; }
.gate-msg.ok { color: #7ee6a8; }
/* The access code is the rarer way in, folded away rather than sitting there
   as a second thing to read past every launch. */
.gate-alt {
  margin-top: 12px; background: none; border: none; padding: 0;
  color: var(--text-faint); font-family: inherit; font-size: 10.5px;
  text-decoration: underline; cursor: pointer;
}
.gate-alt:hover { color: var(--text); }
.gate-code { display: flex; gap: 6px; margin-top: 10px; }
.gate-code.hidden { display: none; }
.gate-code input { flex: 1; }
.authgate-mark {
  width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; color: #fff;
  background: conic-gradient(from 180deg, var(--accent), #7c5cff, var(--accent));
}
.authgate-card h2 { font-size: 16px; margin: 0 0 7px; }
.authgate-card p { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin: 0 0 14px; }
.authgate-card .btn { width: 100%; justify-content: center; }
.authgate-card .authgate-hint { font-size: 10px; color: var(--text-faint); margin: 11px 0 0; }

/* ---- Your account, inside Settings ---- */
#account-box {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.acct-row { display: flex; align-items: baseline; gap: 6px; flex: 1; }
.acct-lab {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--text-faint);
}
.acct-val { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }