/* The login page is the only page that is not the app, so its handful of
   rules live here rather than adding a section to app.css that nothing
   else ever uses. A file rather than a <style> block so the page can be
   served under a policy that allows no inline anything. */
/* The login page is the only page that is not the app, so its handful of
   rules live here rather than adding a section to app.css that nothing else
   ever uses. */
body.signin {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  padding: 24px;
  box-sizing: border-box;
}
.signin-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  padding: 36px 34px 30px;
  width: min(100%, 400px);
  text-align: center;
}
.signin-brand { font-size: 26px; font-weight: 700; letter-spacing: -.4px; }
.signin-brand span { color: var(--accent); }
.signin-sub {
  color: var(--ink-2); font-size: 12px; letter-spacing: .10em;
  text-transform: uppercase; margin-top: 4px;
}
.signin-lede { color: var(--ink-2); font-size: 14px; margin: 22px 0 20px; }
.signin-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%; box-sizing: border-box;
  padding: 11px 16px; font: inherit; font-weight: 600; font-size: 14px;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-control);
  cursor: pointer; text-decoration: none;
}
.signin-button:hover { background: var(--panel-2); border-color: var(--accent-line); }
.signin-foot { margin-top: 20px; font-size: 12px; color: var(--ink-3); }
.signin-error {
  margin: 0 0 20px; padding: 11px 13px; text-align: left;
  border-radius: var(--r-control); font-size: 13px; line-height: 1.45;
  color: var(--problem);
  /* Was a hardcoded light-mode red; on dark mode it stayed the light-mode
     value, ignoring --problem's own dark variant. Derive from the token so
     this follows the theme like everything else. */
  background: color-mix(in srgb, var(--problem) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--problem) 30%, transparent);
}