/* The gate is the first thing anyone sees, so it carries the same voice as the app:
   the serif headline, the paper ground, the warm card. Centred and narrow, because
   there is exactly one thing to do here. */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  margin:0;padding:24px;background:var(--paper)}

.login-card{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:44px 44px 38px;max-width:440px;width:100%;
  box-shadow:0 1px 2px rgba(24,34,29,.04),0 24px 60px -20px rgba(24,34,29,.22)}

.login-mark{display:flex;align-items:baseline;gap:10px;margin-bottom:26px}
.login-mark .dot{width:9px;height:9px;border-radius:50%;background:var(--atp);flex:0 0 auto;
  transform:translateY(-2px)}
.login-mark .dot+.dot{background:var(--wta);margin-left:-4px}
.login-mark span{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--muted)}

.login-card h1{font-family:Georgia,serif;font-weight:500;font-size:40px;line-height:1.05;
  margin:0 0 14px;letter-spacing:-.01em}
.login-card h1 em{color:var(--atp);font-style:italic;font-weight:400}
.login-note{color:var(--muted);font-size:13.5px;line-height:1.65;margin:0 0 28px}

.login-card form{display:flex;flex-direction:column;gap:12px}
.pin-field{position:relative}
.login-card input{width:100%;font-family:Georgia,serif;font-size:30px;letter-spacing:.5em;
  text-indent:.5em;text-align:center;padding:16px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--paper);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.login-card input::placeholder{color:var(--line);letter-spacing:.5em}
.login-card input:focus{outline:none;border-color:var(--atp);
  box-shadow:0 0 0 3px rgba(215,93,54,.14)}
.login-card input:disabled{opacity:.5}

.login-card button{font-family:inherit;font-size:15px;font-weight:600;padding:14px 22px;
  border:1px solid var(--ink);border-radius:12px;background:var(--ink);color:var(--card);
  cursor:pointer;transition:opacity .15s}
.login-card button:hover:not(:disabled){opacity:.86}
.login-card button:disabled{opacity:.4;cursor:not-allowed}

.login-error{color:#9c3517;font-size:13px;margin:18px 0 0;min-height:20px;line-height:1.5}
.login-error:empty{margin:0}
.login-foot{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);line-height:1.6}

/* Off-screen rather than display:none — a form-filler that skips hidden inputs will
   still see this one, while nobody using the page ever will. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}