/* ==========================================================================
   Sign-in page.

   COPIED from charter-desk public/css/login.css, including the rule that gives
   it its shape: this is the only stylesheet served WITHOUT a session, so it
   must not name the company, the product, or reveal anything about what sits
   behind the login. No logo, no class names that give the game away.

   ITS COLOURS ARE DEFINED HERE, not in private/app/css/tokens.css, and that is
   the one real difference. The app's token file is session-gated - an
   anonymous visitor cannot load it - so a login page referencing those tokens
   would render unstyled to exactly the people who see this page. They are
   still tokens rather than hexes scattered through the rules, so the pre-commit
   colour check has one place to exempt and a reader has one place to look.

   Deliberately a fixed dark palette with no light variant. Every other surface
   in this app follows the viewer's theme; this one is a single card on a
   gradient, seen for a few seconds, and a second palette for it would be two
   things to keep in step for no reading anybody wants.
   ========================================================================== */

:root {
  --login-bg: #101922;
  --login-glow: #1d3550;
  --login-card: #182631;
  --login-border: #2f4459;
  --login-text: #ffffff;
  --login-muted: #9fb2c4;
  --login-error-bg: rgb(226 96 60 / 16%);
  --login-error-text: #ffb4a0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, var(--login-glow) 0, var(--login-bg) 60%)
    var(--login-bg);
  color: var(--login-text);
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.login-shell {
  width: min(380px, calc(100% - 32px));
  padding: 24px 0;
}

.login-card {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: 40px 28px;
  border: 1px solid var(--login-border);
  border-radius: 16px;
  background: var(--login-card);
  text-align: center;
}

.login-card h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.login-note {
  margin: 0;
  color: var(--login-muted);
  font-size: 13px;
}

.login-button {
  min-height: 44px;
}

.login-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--login-error-bg);
  color: var(--login-error-text);
  font-size: 12px;
}

.login-error[hidden] {
  display: none;
}