/* The sign-in monitor (templates/_monitor.html, framed like the other account pages by base.css's .monitor): the form is on the screen. On a
   good sign-in the form dims, "Access granted" comes up, the screen switches off and the page fades (steps s1 to s4, set by js/login.js).
   Without script, or with reduced motion, the form is simply there and a sign-in is an ordinary page load. */
.gate { display: flex; justify-content: center; padding: 24px 12px 56px; transition: opacity .9s ease .55s; }
.gate.s4, .gate.s5 { opacity: 0; }
.stage { width: min(760px, 100%); }
.gate .monitor-screen { display: flex; align-items: center; min-height: 380px; transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.6, 0, .9, .4); }
.gate.s4 .monitor-screen, .gate.s5 .monitor-screen { transform: scaleY(.015); }
.letter { width: 100%; box-sizing: border-box; padding: 26px 30px 28px; background: var(--panel); border: 1px solid rgba(54, 209, 255, .35); border-radius: 6px; color: var(--text);
  transition: opacity .4s ease; }
.gate.s2 .letter, .gate.s3 .letter, .gate.s4 .letter, .gate.s5 .letter { opacity: .2; }
.monitor-granted { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 6px;
  background: rgba(2, 6, 17, .8); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.gate.s3 .monitor-granted, .gate.s4 .monitor-granted, .gate.s5 .monitor-granted { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.monitor-granted b { padding: 10px 22px; border: 2px solid var(--accent); color: var(--accent); font: 400 30px/1 var(--screen); letter-spacing: .12em; text-transform: uppercase; }
.monitor-granted span { font: 600 13px/1 var(--cond); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.letter .eyebrow { margin: 0 0 4px; font: 600 13px/1.2 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.letter .eyebrow::before { content: "> "; }
.letter .h { margin: 0 0 16px; font: 400 38px/1 var(--screen); letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.letter .field { display: block; margin-bottom: 12px; }
.letter .field span { display: block; margin-bottom: 4px; font: 600 14px/1.2 var(--body); color: var(--text-2); }
.letter .field input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--ink); color: var(--text); font: 500 16px var(--body); }
.letter .field input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.letter .btn { width: 100%; height: 48px; border: 0; border-radius: 4px; background: linear-gradient(180deg, #5BDCFF, #19AEE0); color: #021018; font: 600 18px var(--cond); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.letter .btn:hover { background: var(--accent-hover); }
.letter .btn:disabled { opacity: .6; cursor: progress; }
.letter .small { margin: 12px 0 0; font: 400 14px/1.3 var(--body); color: var(--muted); }
.letter .small a { color: var(--accent); }
.letter .small + form { margin-top: 12px; }
.letter .alert { margin: 0 0 12px; padding: 8px 10px; border-radius: 4px; font: 500 14px/1.3 var(--body); }
.letter .alert-error { background: rgba(255, 90, 70, .12); border: 1px solid rgba(255, 90, 70, .5); color: #FFB3A6; }
.letter .alert-ok { background: rgba(80, 210, 140, .12); border: 1px solid rgba(80, 210, 140, .5); color: #A8F0C8; }
.letter [hidden] { display: none; }
.letter form + form { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.letter .btn-plain { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
@media (max-width: 640px) {
  .gate { padding: 16px 12px 40px; }
  .gate .monitor-screen { min-height: 0; }
  .letter { padding: 20px 18px 22px; }
  .letter .h { font-size: 32px; }
  .monitor-granted b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .gate, .gate .monitor-screen, .letter, .monitor-granted { transition: none; }
}