/* Shared "sign in" card styling — used by both login.html (reception,
   password) and employee_login.html (magic link) since the two pages are
   otherwise identical in layout. Page-specific extras (e.g. the employee
   sent-notice/mock-link boxes) live in their own small stylesheet loaded
   right after this one. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #1a1a2e; --ink-muted: #6b7280; --ink-faint: #9ca3af;
  --surface: #ffffff; --surface-2: #f8f9fb; --border: #e2e6ed;
  --accent: #2563eb; --accent-dim: #dbeafe; --accent-dk: #1d4ed8;
  --danger: #dc2626;
  --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--surface-2); color: var(--ink); min-height: 100vh; font-size: 15px; line-height: 1.5; }

header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 2rem; height: 56px; display: flex; align-items: center; gap: 10px; }
header h1 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
header span { font-size: 13px; color: var(--ink-muted); margin-left: 4px; }

main { max-width: 400px; margin: 3rem auto; padding: 0 1.5rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.5rem 1.5rem; }
.card h2 { font-size: 18px; font-weight: 700; margin-bottom: .35rem; }
.card p { font-size: 13px; color: var(--ink-muted); margin-bottom: 1.2rem; }

.field { margin-bottom: 1rem; }
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
input {
  width: 100%; border: 1px solid var(--border); border-radius: 7px;
  padding: 9px 12px; font-size: 14px; font-family: inherit; color: var(--ink);
  background: var(--surface); outline: none;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.error { font-size: 13px; color: var(--danger); margin-bottom: 1rem; min-height: 1.2em; }
.btn {
  width: 100%; border: none; border-radius: 7px; padding: 10px 16px;
  font-size: 14px; font-weight: 600; color: #fff; background: var(--accent); cursor: pointer;
}
.btn:hover { background: var(--accent-dk); }
.btn:disabled { opacity: .55; cursor: not-allowed; }