/* Login and password pages (task 011). Values only from tokens.css (docs/design.md); phone width first. */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-main);
  font-family: var(--font-text);
  font-weight: var(--weight-text);
  font-size: var(--size-s);
  line-height: var(--leading-text);
}
header { background: var(--surface-header); color: var(--text-on-dark); padding: var(--space-4) var(--space-3); }
.logo { padding: var(--logo-clear-space); line-height: 0; }
.logo img { height: var(--logo-height); width: auto; display: block; }
main { max-width: var(--width-card-min); margin: 0 auto; padding: var(--space-5) var(--space-3) var(--space-6); }
.card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}
h1 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--size-l);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-teal);
}
label { display: block; margin: 0 0 var(--space-1); font-size: var(--size-xs); color: var(--text-muted); }
input[type="text"], input[type="password"] {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  font-family: var(--font-text);
  font-size: var(--size-s);
  color: var(--text-main);
  background: var(--color-white);
}
button {
  width: 100%;
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-teal);
  color: var(--text-on-dark);
  font-family: var(--font-text);
  font-weight: var(--weight-accent);
  font-size: var(--size-s);
  cursor: pointer;
}
button.quiet { background: var(--color-white); color: var(--color-teal); border: 1px solid var(--line); }
.error { margin: 0 0 var(--space-3); color: var(--status-bad); font-weight: var(--weight-accent); }
.note { margin: 0 0 var(--space-3); font-size: var(--size-xs); color: var(--text-muted); }
.links { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.links li { margin: 0 0 var(--space-2); }
a { color: var(--color-teal); }