/* Login page only. Everything else in the app lives in style.css — this file
   is loaded after it and reuses its :root variables, so the login screen and
   the app cannot drift apart on colour or typography.

   The app shell (#app grid, sidebar, topbar) never renders here: login.html
   has no #app, so none of those rules apply. */

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 100%;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 28px 24px;
}

.login-brand { text-align: center; margin-bottom: 26px; }
.login-logo { width: 46px; height: 46px; margin: 0 auto 10px; }
.login-logo svg { width: 100%; height: 100%; display: block; }
.login-title { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.login-sub { font-size: 11px; color: var(--muted); font-weight: 500; }

.login-form { display: flex; flex-direction: column; }

/* 🔴 `display: flex` above beats the browser's built-in `[hidden] { display: none }`
   — a class selector outranks the UA stylesheet, so `<form hidden>` stays on
   screen. Symptom: the set-password panel is visible to everyone the moment
   the login page loads, before anyone has typed anything.

   Nothing errors, no test that talks to the API can see it, and the page still
   "works" — you only catch it by looking at it. Which is the whole argument for
   looking at it. */
[hidden] { display: none !important; }

.login-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  margin-bottom: 6px;
}

.login-form input {
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 16px;
  width: 100%;
}
.login-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-l);
}

.login-btn {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: var(--radius);
  padding: 11px 16px;
  cursor: pointer;
  margin-top: 4px;
}
.login-btn:hover { background: var(--primary-d); }
.login-btn[disabled] { opacity: .6; cursor: default; }

.login-link-btn {
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: none;
  padding: 10px 0 0;
  cursor: pointer;
}
.login-link-btn:hover { color: var(--ink); text-decoration: underline; }

.login-note {
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--primary-soft);
  border: 1px solid var(--primary-l);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 18px;
}

.login-rules {
  font-size: 12px;
  color: var(--muted);
  margin: -6px 0 16px;
  line-height: 1.45;
}

/* One message box, three states. 🔴 A failed password must never look like a
   decoration — it is the only feedback the person gets, so it carries the
   danger colour and stays until the next attempt. */
.login-message {
  font-size: 13px;
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-top: 16px;
  line-height: 1.45;
}
.login-message.error   { color: #c4344a; background: var(--danger-l);  border: 1px solid #f7c3ca; }
.login-message.success { color: #157a63; background: var(--success-l); border: 1px solid #b4e6d6; }
.login-message.info    { color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); }

/* Several rule problems at once are listed, not run together into one
   paragraph — "at least 8 characters" and "add an uppercase letter" are two
   separate things to fix and read as such. */
.login-message ul { margin: 6px 0 0; padding-left: 18px; }
.login-message li { margin: 2px 0; }

.login-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}