/* ---------------------------------------------------------------------------
   The entrance (client sign-in and admin sign-in).

   Deliberately dark where the portal itself is light: arriving feels like a
   front door, and signing in is a clear change of state. The full brand yellow
   is usable here — #f4a622 on #14202e is 8.09:1, where on white it is 1.93:1
   and unusable as type.
   ------------------------------------------------------------------------- */

body.on-dark{background:var(--dark-bg);color:var(--dark-text);}

.login-wrap{max-width:540px;margin:0 auto;
  padding:clamp(56px,12vh,128px) 24px var(--space-8);}

.login-eyebrow{color:var(--amber);font-size:12px;font-weight:800;
  letter-spacing:2.5px;display:block;padding-bottom:var(--space-4);
  border-bottom:2px solid var(--amber);}

.login-wrap h1{font-size:46px;font-weight:800;letter-spacing:-1.5px;
  line-height:1.05;margin:var(--space-6) 0 0;color:var(--dark-text);}
.login-wrap h1 .accent{color:var(--amber);}
.login-wrap .sub{color:var(--dark-muted);font-size:16px;
  margin-top:var(--space-4);line-height:1.6;}

.card{margin-top:var(--space-7);background:var(--dark-surface);
  border:1px solid var(--dark-line);border-radius:var(--radius);
  padding:var(--space-6) var(--space-5);}

.field-label{display:block;font-size:10.5px;font-weight:800;letter-spacing:1.5px;
  color:var(--dark-faint);margin-bottom:var(--space-3);}

/* Wide tracking makes six digits read as discrete characters without six
   separate inputs, which paste and password managers both handle badly. */
#passcode{width:100%;font-family:inherit;font-size:30px;font-weight:800;
  letter-spacing:14px;text-align:center;text-indent:14px;
  color:var(--dark-text);background:var(--dark-well);
  border:1px solid var(--dark-line);border-radius:var(--radius-s);
  padding:var(--space-4) var(--space-3);
  transition:border-color .15s,background .15s;}
#passcode::placeholder{color:var(--dark-placeholder);font-weight:700;}
#passcode:focus{outline:none;border-color:var(--amber);background:#0b141f;}
#passcode.invalid{border-color:var(--amber);background:#241a10;}

/* Admin passcode is a real password, not six digits — no wide tracking. */
#passcode.passcode-text{letter-spacing:2px;font-size:18px;text-indent:0;
  text-align:left;padding:var(--space-4);}

/* White on navy is the highest-contrast pairing available here (16.46:1);
   amber is kept for the hover so the accent still has a job. */
.submit{margin-top:var(--space-5);width:100%;display:inline-flex;
  align-items:center;justify-content:center;gap:var(--space-2);
  font-family:inherit;font-size:14px;font-weight:800;letter-spacing:2.5px;
  color:var(--dark-bg);background:var(--dark-text);
  border:1px solid var(--dark-text);border-radius:var(--radius-s);
  padding:var(--space-4) var(--space-5);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,opacity .15s;}
.submit:hover:not(:disabled){background:var(--amber);border-color:var(--amber);}
.submit:disabled{opacity:.45;cursor:default;}

.msg{margin-top:var(--space-4);font-size:13.5px;line-height:1.5;min-height:20px;}
.msg.error{color:var(--amber);font-weight:700;}
.msg.ok{color:var(--dark-green);font-weight:700;}

.login-foot{margin-top:var(--space-6);color:var(--dark-faint);font-size:12px;
  text-align:center;line-height:1.9;}
.login-foot a{color:var(--dark-muted);}
.login-foot a:hover{color:var(--amber);}

/* The focus ring from tokens.css is tuned for light backgrounds. */
body.on-dark :focus-visible{outline:2px solid var(--amber);outline-offset:2px;}