/* The way in: /login, /signup and the code screens.
   Recreated from design_handoff_login_dark — every colour, size, weight, radius
   and spacing below is that package's measured value, not an approximation.

   Standalone: it does not load the app's stylesheet. The portal behind this is
   1,600 lines of chrome the sign-in page has no use for, and a person who is
   not signed in should not be made to download it.

   Dark only. The light variant is deliberately out of scope.

   SCALE: the handoff's measurements were taken off a ~460px-tall artboard, and
   reproduced literally they read as a postage stamp on a real display — a 348px
   card and 12.5px inputs marooned in the middle of a 27" screen.

   So everything here is larger than the package's numbers, and the pitch is
   larger again than the card: roughly 1.7 to 1 rather than the handoff's 1.2.
   The card is a form, and a form stops being easier to use once it is bigger
   than the hand-sized thing it is; the sentence beside it is what the page is
   actually saying, and that does get better with size. */

:root {
  --bg: #000000;          /* true black — the dark theme's rule, no navy beneath */
  --ink-1: #EAF0F6;       /* headline, wordmark, input text, card title */
  --ink-2: #8FB0D2;       /* blurb, checkbox label */
  --ink-3: #6D8299;       /* field labels, proof figures, placeholders */
  --ink-4: #5C7089;       /* the OR divider */
  /* Brightened from #2F5C8F, which goes muddy on true black and must not be
     used in this theme. */
  --accent: #3D77B5;
  --accent-link: #5E93C9; /* links, the headline's full stop, the focus ring */
  --line: rgba(255,255,255,0.15);
  --fill: rgba(255,255,255,0.05);
  --solid-bg: #F5F5F7; --solid-ink: #14202E;
  --good: #6FA985; --bad: #E08B78;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* .btn and .or set display: flex, which beats [hidden]'s display: none — so an
   element hidden from script would sit there in full view. One rule for the
   whole file, rather than remembering to pair every new display with its own
   [hidden] variant and finding out later which one was missed. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--sans); background: var(--bg); color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-link); text-decoration: none; }
a:hover { color: var(--ink-1); }

.page {
  position: relative; min-height: 100%;
  display: flex; align-items: center; justify-content: center; align-content: center;
  gap: 68px; padding: 56px 48px; flex-wrap: wrap;
}
/* Two slate glows over true black — the only decoration on the page. */
.page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 16% 20%, rgba(61,119,181,0.45) 0%, rgba(61,119,181,0) 52%),
    radial-gradient(circle at 90% 86%, rgba(61,119,181,0.28) 0%, rgba(61,119,181,0) 50%);
}
.page > * { position: relative; }

/* ── left: the pitch ─────────────────────────────────────────────────────── */
/* Wide enough that "Every card accounted for." holds one line at the headline's
   55px: it needs 618px, measured, and this gives it 700. Break it and "for." is
   left stranded on a line of its own, which reads as a mistake rather than as a
   line break. The two numbers move together — shrink this basis or grow the
   font and check the headline again. */
.pitch { flex: 0 1 700px; display: flex; flex-direction: column; gap: 24px; }
/* Only the pitch's mark grows. The lockups inside the card sit above a 21px
   title and would crowd it. */
.pitch .lockup svg { width: 42px; height: 42px; }
.lockup { display: flex; align-items: center; gap: 12px; }
.wordmark { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink-1); }
.pitch .wordmark { font-size: 25px; }
.headline {
  font-size: 55px; font-weight: 700; letter-spacing: -0.04em;
  line-height: 1.08; color: var(--ink-1); margin: 0;
  /* It holds one line in the 700px above, but the column shrinks before the
     layout stacks. balance splits it into two even lines there instead of
     leaving "for." alone on the second, which reads as a mistake. */
  text-wrap: balance;
}
/* The one piece of brand decoration on the page. It does not get dropped. */
.headline .stop { color: var(--accent-link); }
.blurb {
  font-size: 16.5px; line-height: 1.6; color: var(--ink-2);
  max-width: 520px; text-wrap: pretty; margin: 0;
}
.proof {
  margin-top: 14px; display: flex; flex-direction: column; gap: 9px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}

/* ── right: the card ─────────────────────────────────────────────────────── */
/* It lifts by translucency and one shadow — no blur, no second surface colour. */
.card {
  width: 420px; flex: none;
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--fill);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
.card h1 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--ink-1); }
.lede { font-size: 14px; line-height: 1.5; color: var(--ink-3); margin: -6px 0 0; }

.label {
  display: block; margin-bottom: 7px;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3);
}
.input {
  width: 100%; height: 46px; padding: 0 15px;
  border-radius: 11px; border: 1px solid var(--line); background: var(--fill);
  font-family: inherit; font-size: 16px; color: var(--ink-1);
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: rgba(255,255,255,0.24); }
/* The border clears so the ring reads clean. Never removed. */
.input:focus { outline: 2px solid var(--accent-link); outline-offset: 2px; border-color: transparent; }
.input[aria-invalid="true"] { border-color: var(--bad); }

/* ── show / hide a password ───────────────────────────────────────────────
   The button sits inside the field rather than beside it, so the row keeps one
   control's worth of height and the label still points at the input. The input
   gets right padding to match, or a long password runs underneath the eye.
   Built by auth.js around every password input, so there is no markup to
   repeat and a field added later is covered without anyone remembering. */
.pwfield { position: relative; display: block; }
.pwfield .input { padding-right: 44px; }
.eye {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center;
  transition: color 180ms var(--ease), background 180ms var(--ease);
}
.eye:hover { color: var(--ink-1); background: rgba(255,255,255,0.06); }
.eye:focus-visible { outline: 2px solid var(--accent-link); outline-offset: 2px; }
.eye svg { width: 18px; height: 18px; display: block; }
/* Which of the two icons shows is the button's own pressed state — no class
   juggling in JS, and the control still reads correctly to a screen reader. */
.eye .hide, .eye[aria-pressed="true"] .show { display: none; }
.eye[aria-pressed="true"] .hide { display: block; }

/* Six digits and a beta code are read back character by character. */
.input.code {
  height: 58px; font: 600 23px/1 var(--mono); letter-spacing: 0.3em; text-align: center;
  padding: 0 16px 0 24px;   /* the tracking adds a trailing gap; nudge it back to centre */
}
.input.betacode { font: 600 16px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }

/* ── the password meter ───────────────────────────────────────────────────
   Four bars, the three requirements, and a word. Colour is never the only
   signal: a met requirement changes its mark from a dot to a tick, so it still
   reads without colour vision. */
.pw { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.pw[hidden] { display: none; }

.pw-top { display: flex; align-items: center; gap: 12px; }
.pw-bar { display: flex; gap: 5px; flex: 1; min-width: 0; }
.pw-bar i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12);
            transition: background 220ms var(--ease); }
.pw-bar i.s1 { background: #E08B78; }
.pw-bar i.s2 { background: #D9A03A; }
.pw-bar i.s3 { background: #6FA985; }
.pw-bar i.s4 { background: #4FBE87; }

.pw-rules { display: flex; flex-direction: column; gap: 5px; }
.pw-rules span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3);
                 transition: color 180ms var(--ease); }
.pw-rules svg { width: 12px; height: 12px; flex: none; }
.pw-rules .met { color: var(--good); }

.pw-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; flex: none;
            width: 46px; text-align: right; color: var(--ink-3); }
.pw-label.s1 { color: #E08B78; }
.pw-label.s2 { color: #D9A03A; }
.pw-label.s3, .pw-label.s4 { color: var(--good); }

.row { display: flex; align-items: center; gap: 8px; }
.row .link { margin-left: auto; font-size: 14px; }
.inline { display: flex; gap: 8px; align-items: stretch; }
.inline .input { flex: 1; min-width: 0; }

/* The real control is visually hidden and a sibling span is drawn, so the box
   is styleable without giving up the keyboard or the label association. */
.remember { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.box {
  width: 17px; height: 17px; border-radius: 5px; flex: none;
  border: 1px solid var(--line); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #FFFFFF;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.remember input { position: absolute; opacity: 0; pointer-events: none; }
.remember input:checked + .box { background: var(--accent); border-color: var(--accent); }
.remember input:checked + .box::after { content: "✓"; }
.remember input:focus-visible + .box { outline: 2px solid var(--accent-link); outline-offset: 2px; }

.btn {
  width: 100%; height: 48px; border-radius: 12px; border: 1px solid transparent;
  font-family: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
/* The inversion: on dark, the primary action is near-white, not blue. */
.btn-primary { background: var(--solid-bg); color: var(--solid-ink); }
.btn-primary:hover:not(:disabled) { background: #FFFFFF; }
.btn-secondary { background: transparent; border-color: var(--line); color: var(--ink-1); font-size: 15px; }
.btn-secondary:hover:not(:disabled) { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.04); }
.btn:focus-visible { outline: 2px solid var(--accent-link); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-small { width: auto; flex: none; padding: 0 20px; font-size: 15px; }

.or { display: flex; align-items: center; gap: 9px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.or span { font-size: 11px; letter-spacing: 0.16em; color: var(--ink-4); }

.note { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin: 0; }
.foot { font-size: 14px; margin: 0; color: var(--ink-3); }
.link {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  color: var(--accent-link); font-size: 14px; text-decoration: none;
}
.link:hover { color: var(--ink-1); }

/* One message for the pair, never a per-field callout saying which half was
   wrong — that tells an attacker which addresses exist. */
.msg { font-size: 14px; line-height: 1.5; margin: 0; }
.msg.bad { color: var(--bad); }
.msg.good { color: var(--good); }
.msg[hidden] { display: none; }

.chip {
  margin-left: auto; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-3);
}

/* The beta code gates everything under it, so it is boxed off from the form. */
.gate { padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.gate .status { margin: 10px 0 0; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.gate .status .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.gate .status.ok   { color: var(--good); }  .gate .status.ok .dot   { background: var(--good); }
.gate .status.no   { color: var(--bad); }   .gate .status.no .dot   { background: var(--bad); }
.gate .status.idle { color: var(--ink-3); } .gate .status.idle .dot { background: var(--ink-3); }

.view { display: flex; flex-direction: column; gap: 12px; }
.view[hidden] { display: none; }

/* 700 + 68 + 420 plus the page padding is ~1284, so that is where the two
   columns stop fitting side by side. The breakpoint has to sit ABOVE that, not
   at some tidier round number: below it the flex row wraps on its own, and a
   left-aligned pitch stacked over a centred card looks like a bug rather than a
   layout. */
@media (max-width: 1300px) {
  .page { flex-direction: column; align-items: stretch; gap: 40px; padding: 48px 24px; }
  .pitch, .card { width: 100%; max-width: 420px; margin: 0 auto; flex: none; }
  .headline { font-size: 36px; }
}
@media (max-width: 480px) {
  .page { gap: 32px; padding: 32px 18px; }
  .headline { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Arriving from an emailed invitation: who invited you, above the form. */
.invite-note {
  margin: 0 0 4px; padding: 11px 13px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.invite-note b { color: var(--ink-1); }
.invite-note.bad { border-color: var(--bad); background: transparent; color: var(--bad); }