/* The sign-in page. A file of its own (not an inline <style>) so the Content-Security-Policy can say style-src 'self'.
   Served without a session (see authAssets in server_adminserver.go). Loaded after tokens.css, which owns every colour, radius and
   text size: this file writes none of them as a literal (web/test/css-literals.test.mjs). The page is dark in both themes
   (login.html says data-theme="dark"), see the --auth-* tokens. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--auth-bg);
  font-family: var(--font-sans);
  color: var(--text);
}

/* Subtle animated gradient background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    var(--auth-glow-bg);
  pointer-events: none;
}

.card {
  position: relative;
  width: var(--w-auth-card);
  background: var(--auth-card);
  border: var(--bw-thin) solid var(--auth-line);
  border-radius: var(--radius-lg);
  padding: var(--space-11) var(--space-10) var(--space-10);
  box-shadow: var(--auth-shadow);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.logo-icon {
  width: var(--size-logo-lg);
  height: var(--size-logo-lg);
  background: linear-gradient(var(--angle-gradient-diag), var(--auth-accent) 0%, var(--auth-teal) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--on-accent);
}

.logo-icon svg { width: var(--size-icon-2xl); height: var(--size-icon-2xl); }

.logo-text h1 {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--auth-heading);
  letter-spacing: var(--tracking-tight);
}

.logo-text p {
  font-size: var(--text-xs);
  color: var(--auth-muted);
  margin-top: var(--space-1);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--auth-heading);
  margin-bottom: var(--space-2);
}

.subtitle {
  font-size: var(--text-sm);
  color: var(--auth-muted);
  margin-bottom: var(--space-7);
}

.field {
  margin-bottom: var(--space-4);
}

label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-sm);
  margin-bottom: var(--space-2);
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--auth-bg);
  border: var(--bw-thin) solid var(--auth-line-field);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text);
  outline: none;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}

input[type="text"]:focus,
input[type="password"]:focus {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 var(--bw-thick) var(--auth-accent-halo);
}

input::placeholder { color: var(--auth-placeholder); }

button[type="submit"] {
  width: 100%;
  padding: var(--space-3);
  margin-top: var(--space-2);
  background: linear-gradient(var(--angle-gradient-diag), var(--auth-accent) 0%, var(--auth-accent-strong) 100%);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: opacity var(--dur-base), transform var(--dur-instant);
  letter-spacing: var(--tracking-hair);
}

button[type="submit"]:hover  { opacity: var(--opacity-hover); }
button[type="submit"]:active { transform: scale(var(--press-scale)); }

.error-msg {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--auth-error-bg);
  border: var(--bw-thin) solid var(--auth-error-border);
  color: var(--danger);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.error-msg svg { width: var(--size-icon-sm); height: var(--size-icon-sm); flex-shrink: 0; }

.footer {
  margin-top: var(--space-7);
  font-size: var(--text-2xs);
  color: var(--auth-faint);
  text-align: center;
}

/* the error line is hidden with the hidden attribute until ?error=1; .error-msg's display:flex would override it */
.error-msg[hidden] { display: none; }

/* the build, bottom right (it was an inline style) */
.login-version {
  position: fixed;
  bottom: var(--space-2);
  right: var(--space-3);
  font-size: var(--text-2xs);
  color: var(--auth-version);
  font-family: var(--font-mono-menlo);
}