/* Login pages. Tokens copied from site/assets/style.css: Ink on Stone, one weight, hairlines, no shadows, Emerald as a bar only on light. */
@font-face { font-family: "Overused Grotesk"; src: url("/assets/fonts/OverusedGrotesk-Medium.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --bg: #F5F5F4; --card: #FFFFFF; --text: #0F0F0F; --muted: #6B6B6B; --line: #E3E2DE; --emerald: #3DDC84; --negative: #DC2626; color-scheme: light; }
:root[data-theme="dark"] { --bg: #0F0F0F; --card: #141414; --text: #F5F5F4; --muted: #A3A3A0; --line: #2A2A28; --negative: #F87171; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 15px/1.5 "Overused Grotesk", "Helvetica Neue", Arial, sans-serif; }
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.gate-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--emerald); border-radius: 8px; padding: 32px 28px; }
:root[data-theme="dark"] .logo-light, :root:not([data-theme="dark"]) .logo-dark { display: none; }
h1 { font-size: 24px; line-height: 1.2; margin: 24px 0 8px; font-weight: 500; }
.lead { color: var(--muted); margin: 0 0 24px; }
.field { margin-bottom: 16px; }
label { display: block; font-size: 13px; margin-bottom: 6px; }
.input-wrap { position: relative; }
input[type=email], input[type=password], input[type=text] { width: 100%; height: 44px; padding: 0 64px 0 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
input[type=email] { padding-right: 12px; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.reveal { position: absolute; right: 4px; top: 4px; height: 36px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.check { display: flex; align-items: center; gap: 8px; margin: 4px 0 20px; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--text); }
.btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-radius: 8px; font: inherit; border: 1px solid var(--line); color: var(--text); background: var(--bg); cursor: pointer; }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.primary:hover { opacity: .88; }
.error { margin: 0 0 16px; padding: 10px 12px; font-size: 14px; color: var(--negative); border: 1px solid var(--negative); border-radius: 8px; }
.help { margin: 20px 0 0; font-size: 13px; color: var(--muted); }
.help a { color: var(--text); }