/* The shared sign-in screen (signin.js); colours and type from tokens.css. */
.si-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(1200px 500px at 50% -10%, var(--crimson-subtle), transparent 70%), var(--bg-app);
  color: var(--text-main); font-family: var(--font-sans); }
.si-card { width: min(420px, 100%); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 28px 24px; display: grid; gap: 12px; text-align: left; }
.si-brand { border-radius: 12px; box-shadow: var(--shadow-sm); justify-self: center; }
.si-title { margin: 4px 0 0; text-align: center; font: 600 1.5rem/1.25 var(--font-serif); color: var(--crimson); }
.si-sub { margin: 0; text-align: center; color: var(--text-muted); font-size: .95rem; line-height: 1.5; }
.si-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--bg-surface-sunken); border-radius: var(--radius-md); margin-top: 6px; }
.si-tabs button { all: unset; box-sizing: border-box; text-align: center; min-height: 40px; display: grid; place-items: center; border-radius: 8px;
  font-size: .9rem; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 0 6px; }
.si-tabs button[aria-selected="true"] { background: var(--bg-surface); color: var(--crimson); box-shadow: var(--shadow-sm); }
.si-tabs button:focus-visible, .si-submit:focus-visible, .si-link:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 2px; }
.si-form { display: grid; gap: 12px; }
.si-field { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; }
.si-field input { font: inherit; font-weight: 400; font-size: 1rem; min-height: 44px; padding: 0 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-main); }
.si-field input:focus { outline: 3px solid var(--gold-border); border-color: var(--gold); }
.si-help { margin: 0; font-size: .82rem; color: var(--text-muted); }
.si-error { margin: 0; min-height: 1.2em; color: var(--danger); font-size: .9rem; }
.si-error:empty { display: none; }
.si-turnstile:empty { display: none; }
.si-submit { font: inherit; font-weight: 700; min-height: 46px; border: 0; border-radius: var(--radius-md); background: var(--crimson); color: #fff; cursor: pointer; }
.si-submit:hover { background: var(--crimson-hover); }
:root[data-theme="dark"] .si-submit { color: #1a0d0c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .si-submit { color: #1a0d0c; } }
.si-link { all: unset; cursor: pointer; justify-self: center; color: var(--text-muted); text-decoration: underline; font-size: .9rem; padding: 6px; }