/* login.css — the one unauthenticated surface (2026-08-02).
   Consumes tokens.css and declares no design values of its own. Everything here
   is layout: composition on the 32px module, nothing that could drift from the
   system.

   The intent is a control-room airlock, not a marketing page: a single centred
   plate lifted off the measured canvas, the wordmark set in the display face,
   and no claim about the system's state — you are not yet anyone. */

.cr-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}

/* The plate. Elevation, not a heavy border — the same rule as every panel. */
.cr-login__box {
  position: relative;
  width: 100%;
  max-width: 384px;              /* 12 modules */
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: var(--bg-raised);
  border: var(--stroke-w) solid var(--stroke);
  border-radius: var(--r-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
  text-align: center;
}

/* A single ranging mark: the plate is aligned to the grid, and says so. */
.cr-login__mark {
  width: var(--sp-6); height: 2px;
  margin: 0 auto var(--sp-5);
  background: var(--core);
  box-shadow: 0 0 12px var(--core-glow);
}

.cr-login__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: .18em;
  color: var(--text);
  margin: 0;
}
.cr-login__sub {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .34em;
  color: var(--text-faint);
  margin: var(--sp-2) 0 var(--sp-7);
}

.cr-login__form { display: grid; gap: var(--sp-4); text-align: start; }

.cr-login__label {
  display: grid; gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking);
  color: var(--text-dim);
}

/* dir=ltr on the input itself: a username and a password are not Hebrew text,
   and letting the RTL paragraph direction reorder them is a real usability bug,
   not a cosmetic one. */
.cr-login__input {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--bg);
  border: var(--stroke-w) solid var(--stroke);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cr-login__input:focus {
  outline: none;
  border-color: var(--core);
  box-shadow: 0 0 0 3px var(--core-glow);
}

.cr-login__go {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  color: var(--bg);
  background: var(--core);
  border: none;
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin-top: var(--sp-2);
  cursor: pointer;
  transition: filter var(--t-fast) var(--ease);
}
.cr-login__go:hover  { filter: brightness(1.12); }
.cr-login__go:active { filter: brightness(.94); }
.cr-login__go:focus-visible {
  outline: 2px solid var(--core);
  outline-offset: 3px;
}

/* A failed login is red BY MEANING — the same red as a CRIT, because it is the
   same class of fact: something did not work. It never says which half was
   wrong; that is an enumeration aid. */
.cr-login__err {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--crit);
  background: var(--crit-dim);
  border: var(--stroke-w) solid var(--crit);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.cr-login__foot {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking);
  color: var(--text-faint);
  margin: var(--sp-6) 0 0;
}

@media (max-width: 420px) {
  .cr-login__box { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
}