/* verify.html -- the standalone sign-in / sign-up page.
 *
 * Externalised from an inline <style> block for #349 Phase 0. Page-scoped by
 * design: verify.html loads none of the app shell's stylesheets and shares no
 * layout with it, so these rules live next to their page rather than in
 * styles.css. Follows the repo's per-surface styles-*.css convention.
 *
 * The palette is the app's dark theme spelled out literally rather than via
 * styles-tokens.css, because pulling the token sheet in would make the
 * sign-in page depend on the shell it deliberately does not load.
 */

/* THE BRAND ACCENT (#142)
 *
 * These two pages deliberately load none of the app shell's stylesheets --
 * that is what makes them standalone -- so they cannot read styles.css's
 * `--accent`. They mirror it under a page-scoped name instead, so the repo
 * still authors the design-system token exactly once and this is visibly a
 * copy rather than a second claim on it.
 *
 * The copy was previously invisible: until #349 Phase 0 these rules lived in
 * an inline <style> block, and tests/bdd/test_142_accent_unification.py globs
 * ori-web/*.css. So these pages went on serving the RETIRED purple accent
 * for every release since #142 recolored the product to blue, and nothing
 * could see it. Externalising the block is what surfaced that; the values
 * below are the correction. (The retired hex is deliberately not spelled out
 * here -- that guard greps every stylesheet, comments included.)
 *
 * Worth removing the copy entirely one day: a small styles-brand.css that
 * both the shell and these two pages load. Out of scope here.
 */
:root {
  --auth-accent:       #60a5fa;              /* mirrors styles.css --accent */
  --auth-accent-hover: #93c5fd;              /* the lighter step, for :hover */
  --auth-accent-tint:  rgba(96, 165, 250, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: #131520;
  color: #e8eaf6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.card {
  background: #1e2133;
  border: 1px solid #3a3f5c;
  border-radius: 16px;
  padding: 40px 36px;
  width: 360px;
  text-align: center;
}
.icon { font-size: 32px; margin-bottom: 14px; }
h1 { font-size: 15px; font-weight: 700; color: var(--auth-accent); margin-bottom: 6px; }
.sub { font-size: 12px; color: #9aa3c8; margin-bottom: 20px; line-height: 1.6; }
.sub strong { color: #e8eaf6; }
.input {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  background: #131520;
  border: 1px solid #3a3f5c;
  border-radius: 8px;
  color: #e8eaf6;
  outline: none;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.input:focus { border-color: var(--auth-accent); }
.input::placeholder { color: #5c6490; }
.code-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 28px;
  letter-spacing: 10px;
  text-align: center;
  font-family: monospace;
  background: #131520;
  border: 1px solid #3a3f5c;
  border-radius: 10px;
  color: #e8eaf6;
  outline: none;
  margin-bottom: 14px;
  transition: border-color 0.15s;
}
.code-input:focus { border-color: var(--auth-accent); }
.row { display: flex; gap: 8px; }
.remember-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 16px; font-size: 12px; color: #9aa3c8;
}
.remember-row input[type="checkbox"] { accent-color: var(--auth-accent); width: 14px; height: 14px; }
.tos-row {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 16px;
  font-size: 11px; color: #9aa3c8; text-align: left;
}
.tos-row input[type="checkbox"] { accent-color: var(--auth-accent); width: 14px; height: 14px; margin-top: 1px; flex-shrink: 0; }
/* Scoped to the whole signup block, not to .tos-row, because the miss that
   #441 fixed was a link one line OUTSIDE .tos-row (the Privacy Policy note)
   inheriting the UA default on a dark card. .footer a is outside this block
   and keeps its own muted colour. */
.signup-fields a { color: var(--auth-accent); }
.btn {
  width: 100%;
  padding: 11px;
  font-size: 13px;
  font-weight: 700;
  background: var(--auth-accent);
  color: #131520;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn:hover { background: var(--auth-accent-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline {
  width: 100%;
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  background: none;
  color: var(--auth-accent);
  border: 1px solid var(--auth-accent);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 12px;
}
.btn-outline:hover { background: var(--auth-accent-tint); }
.error { color: #f87171; font-size: 12px; margin-top: 10px; display: none; }
.link { color: var(--auth-accent); cursor: pointer; text-decoration: none; font-size: 12px; }
.link:hover { text-decoration: underline; }
.resend { font-size: 11px; color: #5c6490; margin-top: 12px; }
.footer { margin-top: 20px; font-size: 11px; color: #5c6490; }
.footer a { color: #7c7faa; text-decoration: none; }
.footer a:hover { color: var(--auth-accent); text-decoration: underline; }
.or-divider { color: #5c6490; font-size: 11px; margin: 16px 0; }
.signup-fields { display: none; margin-top: 16px; text-align: left; }
.signup-fields label { font-size: 10px; color: #9aa3c8; display: block; margin-bottom: 4px; margin-top: 8px; }
.signup-fields label:first-child { margin-top: 0; }