/* jmp — the sign-in page, and nothing else.

   Its own sheet because the login page shares almost nothing with the dash: no
   nav, no table, no dock, no scope bar. It used to load `dash.css`, the
   pre-port stylesheet, which meant sign-in rendered on the old `#050617` navy
   ground while every authenticated page rendered `#08060D` -- a visible
   discontinuity at the one screen every operator sees first.

   Porting the three classes it needed rather than deleting dash.css outright:
   `.notice`, `.panel` and `.url-input` were defined in that file and nowhere
   else, so removing it would have stripped this page bare. A class-usage scan
   would have reported dash.css as an orphan and been wrong.

   Tokens come from app.css, which this page now loads first, so the palette
   here cannot drift from the product's again. No opaque colour is written as a
   literal: every one is a token, including the submit button's label, which
   takes var(--text) on var(--primary) exactly as app.css's .btn does.

   The one rgba() below is --warn (#E8833A) at alpha. CSS cannot apply alpha to
   a hex token without color-mix, so spelling the channels is the house
   convention -- page-keys.css and page-domains.css do the same in nine places.
   It tracks --warn by hand, which is the cost of that convention and is
   accepted rather than overlooked. */

body{
  background:var(--ground);
  color:var(--text);
  font-family:Archivo,system-ui,sans-serif;
  margin:0}

main{max-width:22rem;margin:6rem auto;padding:0 1rem}

/* The wordmark. font-size and margin only -- .logo in app.css owns the weight,
   the stretch and the two accent colours, so the sign-in mark and the chrome's
   cannot drift apart. This used to restate weight and stretch, which is how
   two copies of one identity start disagreeing.

   Larger than the chrome's 17px: this is the only thing on the page above the
   form, where the chrome's sits in a bar beside six other controls. */
h1.logo{font-size:1.5rem;margin:0 0 1.25rem}

.panel{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:18px}

.field{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.75rem}
.field label{font-size:12px;font-weight:600;color:var(--text)}
.field .hint{font-size:12px;color:var(--muted)}
.field input{width:100%}

/* Mono, because the value is a literal string you paste -- the same rule the
   rest of the product applies to slugs, keys and URLs. */
.url-input{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  background:var(--raised);
  color:var(--text);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:8px 10px}
.url-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

button[type=submit]{
  font:inherit;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  background:var(--primary);
  border:1px solid var(--primary);
  border-radius:6px;
  padding:8px 14px;
  cursor:pointer}
button[type=submit]:hover{background:var(--primary-hi);border-color:var(--primary-hi)}
button[type=submit]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The refusal notice. Its ::before label is what names the state -- the border
   colour alone would carry the whole message, and colour alone is not a
   message. */
.notice{
  padding:.6rem .75rem;
  background:var(--surface);
  border:1px solid var(--rule-hi);
  border-radius:var(--r);
  margin-bottom:14px;
  font-size:13px}
.notice::before{
  content:"Note";
  display:block;
  font-size:.625rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:600;
  color:var(--accent);
  margin-bottom:.2rem}
.notice.error{border-color:rgba(232,131,58,.45)}
.notice.error::before{content:"Refused";color:var(--warn)}

/* Sign-in footer. Muted and small: these are links somebody looks for
   deliberately, not ones the page should compete with the key field to
   offer. */
.legal{
  margin-top:22px;
  text-align:center;
  font-size:12px;
  color:var(--muted)}
.legal a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid var(--rule-hi)}
.legal a:hover{color:var(--text)}
.legal span{margin:0 .4rem;color:var(--rule-hi)}