/* Belwethr demo sign-in. Tokens and type follow the brand kit (01-brand/belwethr-tokens.css). */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/login/fonts/InstrumentSans-Variable.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/login/fonts/Newsreader-Variable.woff2') format('woff2'); }

:root {
  --paper: #f6f3ec; --paper-raised: #ffffff; --line: #d9d1c3; --line-strong: #8c8476;
  --ink: #17202a; --ink-muted: #545c66;
  --vesper: #1d3b57; --vesper-deep: #15304a; --on-vesper: #ffffff;
  --bell: #a46f1e; --bell-ink: #7d5312; --bell-tint: #f3e6cd; --bell-bright: #d4a24c;
  --night: #0f1820; --night-ink: #efe9dd; --night-muted: #b9b2a5;
  --success: #2d6a4f; --success-tint: #e2efe7; --danger: #a3372c; --danger-tint: #f5e1de;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 15px/24px var(--font-sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--bell); outline-offset: 2px; }

.split { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; min-height: 100vh; }

/* Night panel: cream wordmark, Bell, one bronze rule under the line. */
.night { background: var(--night); color: var(--night-ink); padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.wordmark { display: block; width: 160px; height: auto; }
.night-art { flex: 1; display: grid; place-items: center; min-height: 176px; }
.night-sheep { display: block; width: min(100%, 300px); height: auto; }
.overline { margin: 0 0 16px; font: 600 11px/16px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bell-bright); }
.tagline { margin: 0; font: 400 clamp(36px, 4vw, 52px)/1.1 var(--font-display); letter-spacing: -0.01em; max-width: 12ch; }
.rule { display: block; width: 56px; height: 2px; background: var(--bell-bright); margin: 24px 0; }
.night-note { margin: 0; color: var(--night-muted); max-width: 32ch; }

/* Paper panel: the form. */
.paper { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.panel { width: 100%; max-width: 400px; }
h1 { margin: 0 0 12px; font: 500 36px/42px var(--font-display); letter-spacing: -0.01em; }
h1:focus { outline: none; }
.lead { margin: 0 0 24px; color: var(--ink-muted); }
.lead strong { color: var(--ink); font-weight: 600; word-break: break-all; }

label { display: block; margin-bottom: 8px; font: 600 13px/16px var(--font-sans); }
input[type=email] {
  display: block; width: 100%; height: 44px; padding: 0 12px;
  font: 400 16px/24px var(--font-sans); color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 6px;
}
input[type=email][aria-invalid=true] { border-color: var(--danger); }
input[type=email]:focus-visible { outline-offset: 1px; }
.field-error { margin: 8px 0 0; font: 400 13px/20px var(--font-sans); color: var(--danger); }
.security-check { margin-top: 20px; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
#security-status { margin: 8px 0 0; }
#security-status.bad { color: var(--danger); }
#retry-security { margin-top: 4px; }

button[type=submit] {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 16px;
  font: 600 15px/1 var(--font-sans); color: var(--on-vesper); background: var(--vesper);
  border: 0; border-radius: 6px; cursor: pointer; transition: background 150ms ease-out;
}
button[type=submit]:hover { background: var(--vesper-deep); }
button[type=submit][disabled] { opacity: 0.7; cursor: progress; }
.link { padding: 0; font: inherit; color: var(--vesper); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; cursor: pointer; }

.notice { margin: 0 0 20px; padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 20px; }
.notice.ok { background: var(--success-tint); color: var(--success); }
.notice.bad { background: var(--danger-tint); color: var(--danger); }
.fine { margin: 24px 0 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.bell { display: block; width: 180px; height: auto; margin: 0 0 24px; }

/* The one-step confirm page served by /api/auth/confirm. */
.solo { max-width: 400px; margin: 0 auto; padding: 72px 24px; }
.solo-mark { display: block; width: 140px; height: auto; margin-bottom: 40px; }

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .night { display: grid; grid-template-columns: minmax(0, 1fr) clamp(88px, 28vw, 150px); padding: 24px 16px 28px; gap: 24px 16px; }
  .wordmark { width: 128px; grid-column: 1 / -1; }
  .night-copy { grid-column: 1; grid-row: 2; }
  .night-art { grid-column: 2; grid-row: 2; min-height: 0; align-self: center; }
  .tagline { font-size: 32px; }
  .rule { margin: 16px 0; }
  .night-note { display: none; }
  .paper { padding: 32px 16px 48px; align-items: flex-start; }
  h1 { font-size: 28px; line-height: 34px; }
  .solo { padding: 48px 16px; }
}

@media (prefers-reduced-motion: reduce) { button[type=submit] { transition: none; } }