/* ============================================================
   FieldRunner — auth screens (master sign-in).
   The operator-console aesthetic (tokens.css), focused single-card
   layout. Dark canvas + vignette + faint blueprint grid, like the shell.
   ============================================================ */

/* auth pages load tokens.css + auth.css only (not shell.css), so set the base
   typography/colour here — otherwise headings fall back to black serif. */
*{box-sizing:border-box;}
html,body{margin:0;}
.auth-body{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  color:var(--text);font-family:var(--f-sans);-webkit-font-smoothing:antialiased;
  background:var(--bg);
  /* blueprint grid — OPAQUE line colour so crossings don't compound into brighter dots; pure CSS, no data-URI */
  background-image:
    linear-gradient(#1d1d1f 1px,transparent 1px),
    linear-gradient(90deg,#1d1d1f 1px,transparent 1px);
  background-size:13px 13px;
}
.auth-vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,transparent 55%,rgba(0,0,0,.6) 100%);}

.auth-card{
  position:relative;z-index:1;width:min(400px,100%);
  border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:30px 30px 26px;box-shadow:0 30px 80px -24px rgba(0,0,0,.8);
}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:11px;margin-bottom:22px;}
.auth-brand img{height:21px;width:auto;opacity:.96;}
.auth-brand .tag{font-family:var(--f-mono);font-size:10px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;}

.auth-title{font-size:17px;font-weight:600;letter-spacing:.2px;margin:0 0 4px;text-align:center;color:var(--text);}
.auth-sub{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0 0 20px;text-align:center;}

.auth-field{display:block;margin-bottom:14px;}
.auth-field .lbl{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:1px;
  text-transform:uppercase;color:var(--text-2);margin-bottom:7px;}
.auth-input{
  width:100%;padding:11px 13px;font:14px var(--f-sans);color:var(--text);
  background:rgba(0,0,0,.3);border:1px solid var(--line-2);border-radius:9px;outline:none;transition:.16s;
}
.auth-input:focus{border-color:rgba(63,184,79,.55);background:rgba(0,0,0,.45);}
/* keep dark styling through browser autofill (Chrome paints inputs white) */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px #15151b inset;
  caret-color:var(--text);
  border:1px solid var(--line-2);
  transition:background-color 9999s ease-out 0s;
}
.auth-input.code{font-family:var(--f-mono);font-size:20px;letter-spacing:8px;text-align:center;}

.auth-actions{display:flex;gap:10px;margin-top:4px;}
.btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 14px;border-radius:9px;font-size:13px;font-weight:600;letter-spacing:.2px;
  border:1px solid var(--line-2);color:var(--text);background:rgba(255,255,255,.02);transition:.16s;cursor:pointer;
}
.btn:hover{border-color:var(--line-2);background:rgba(255,255,255,.05);}
.btn.primary{color:#cfe9d3;border-color:rgba(63,184,79,.4);background:var(--green-soft);}
.btn.primary:hover{border-color:rgba(63,184,79,.65);background:rgba(63,184,79,.18);}
.btn.full{flex:none;width:100%;}

/* dev-delivery panel — the magic-link/PIN shown ONLY behind basic-auth */
.dev-panel{
  margin:16px 0;padding:13px 14px;border-radius:10px;
  border:1px dashed rgba(63,142,232,.4);background:var(--blue-soft);
}
.dev-panel .dh{font-family:var(--f-mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--blue-2);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.dev-panel .dlink{font-family:var(--f-mono);font-size:12px;color:var(--text-2);word-break:break-all;}
.dev-panel .dpin{font-family:var(--f-mono);font-size:26px;letter-spacing:6px;color:var(--green-2);text-align:center;}

.auth-note{font-size:12px;line-height:1.5;color:var(--text-2);margin:14px 0 0;text-align:center;}
.auth-err{margin:0 0 16px;padding:10px 13px;border-radius:9px;font-size:12.5px;
  color:var(--alert-2);border:1px solid rgba(239,83,64,.35);background:var(--alert-soft);text-align:center;}
.auth-foot{margin-top:20px;text-align:center;font-family:var(--f-mono);font-size:10px;letter-spacing:.4px;color:var(--faint);}
.auth-foot a{color:var(--text-2);}
.auth-alt{margin-top:12px;text-align:center;font-size:12px;color:var(--muted);}
.auth-alt a{color:var(--green-2);cursor:pointer;}