/* Login page — zero dependencies beyond the Inter webfont link. The gate
   protects `/_astro/*`, so this page cannot use the built island CSS and the
   reference's own stylesheet never loads here: the tokens below are a hand-kept
   copy of Scalar's default theme (the theme the reference itself renders in), so
   signing in and landing on the docs reads as one surface. Keep them in sync
   with Scalar's default theme, not with any Tailwind palette.
   Theme here follows `prefers-color-scheme`: there is no theme toggle before
   sign-in. */
:root {
  --background: #ffffff;
  --foreground: #1b1b1b;
  --card: #ffffff;
  --muted-foreground: #6e6e6e;
  --border: rgba(0, 0, 0, 0.1);
  --input: rgba(0, 0, 0, 0.1);
  --primary: #166e3f;
  --primary-foreground: #ffffff;
  --primary-hover: #0f4d2c;
  --destructive: #dc2626;
  --ring: rgba(22, 110, 63, 0.35);
  --radius: 8px;
  /* Same ground as the docs themselves. The card reads as a card through its 1px
     --border hairline, not a tinted page. */
  --page: var(--background);
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0f0f0f;
    --foreground: #e7e7e7;
    --card: #1a1a1a;
    --muted-foreground: #a0a0a0;
    --border: rgba(255, 255, 255, 0.1);
    --input: rgba(255, 255, 255, 0.1);
    --destructive: #f87171;
    /* Lighter green on the dark ground, matching the top bar's dark `--tp-accent`
       (src/styles/scalar.css); the light-mode hover green is too dark to read as a hover here. */
    --primary-hover: #3ea36b;
    --page: var(--background);
  }
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--page);
  color: var(--foreground);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.card {
  width: 100%;
  max-width: 384px;
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.logo {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

h1 {
  margin: 16px 0 4px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sub {
  margin: 0 0 24px;
  color: var(--muted-foreground);
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}
input {
  width: 100%;
  height: 36px;
  margin-bottom: 16px;
  padding: 0 12px;
  color: inherit;
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: 8px;
  font: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.err {
  margin: -4px 0 12px;
  color: var(--destructive);
  font-size: 13px;
}

button {
  width: 100%;
  height: 36px;
  color: var(--primary-foreground);
  background: var(--primary);
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
button:hover {
  background: var(--primary-hover);
}
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}