/* NITRATE - sign-in gate.
 * The one screen a stranger ever sees, so it carries the identity on its own:
 * the vault door rather than a form. Colours from tokens.css only.
 */

.lg-root{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:var(--ground); padding:24px;
}

.lg-card{
  width:min(520px,100%);
  background:var(--panel); border:1px solid var(--rule); border-radius:3px;
  padding:34px 32px 26px; text-align:left;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.5);
  position:relative; overflow:hidden;
}
/* the film-strip edge, the same motif the masthead uses */
.lg-card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:12px;
  background:repeating-linear-gradient(90deg,var(--panel-2) 0 8px,transparent 8px 20px);
}

.lg-mark{margin:6px 0 2px; font-size:38px; font-weight:800; letter-spacing:-.03em; line-height:1}
.lg-mark-a{color:var(--ink)}
.lg-mark-b{color:var(--accent)}

.lg-sub{
  margin:0 0 20px; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

.lg-lede{margin:0 0 22px; font-size:13.5px; line-height:1.6; color:var(--ink-2); max-width:46ch}

.lg-btn{
  font:inherit; font-size:14px; font-weight:650; letter-spacing:.01em;
  background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent); border-radius:2px;
  padding:11px 22px; cursor:pointer; width:100%;
}
.lg-btn:hover:not(:disabled){filter:brightness(1.08)}
.lg-btn:disabled{opacity:.62; cursor:default}

.lg-msg{margin:12px 0 0; font-size:13px; color:var(--ink-2); min-height:1.2em}
.lg-msg.is-bad{color:var(--crit)}
.lg-msg.is-ok{color:var(--ok)}
.lg-hint{margin:6px 0 0; font-size:12px; color:var(--muted)}
.lg-link{color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor}

.lg-foot{
  margin:22px 0 0; padding-top:14px; border-top:1px solid var(--rule);
  font-size:11.5px; line-height:1.55; color:var(--muted); max-width:48ch;
}

/* the signed-in chip that sits in the masthead */
.lg-who{display:flex; align-items:center; gap:8px}
.lg-who-name{
  font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--ink-2);
}
.lg-who-role{
  font-family:ui-monospace,Menlo,monospace; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; padding:2px 6px; border-radius:2px;
  border:1px solid var(--rule); color:var(--muted);
}
.lg-who-role.is-admin{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.lg-out{
  font:inherit; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  background:none; border:1px solid var(--rule); border-radius:2px;
  color:var(--muted); padding:3px 8px; cursor:pointer;
}
.lg-out:hover{color:var(--ink)}

:where(.lg-root) :focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lg-card{box-shadow:none}}
@media (max-width:560px){.lg-card{padding:26px 20px 20px}.lg-mark{font-size:30px}}

/* while the gate is up nothing behind it should be reachable or readable */
body.is-gated > *:not(#gate){ filter:blur(3px); pointer-events:none; user-select:none }
body.is-gated{ overflow:hidden }