/* The sign-in pages' own stylesheet.
 *
 * **Split out of the app's stylesheet because that one describes the product.**
 * These pages are the only thing an unauthenticated visitor can load, so
 * whatever they link is readable by anyone -- and a stylesheet's class names
 * are a description of every surface the product has (owner, 2026-09-14).
 * This file names nothing that exists anywhere else -- INCLUDING IN ITS
 * COMMENTS, which ship too; a test checks it.
 *
 * **The UI does the talking** (owner, 2026-10-08): a mark, one field, one
 * button. The field's placeholder is its label, the address a code went to
 * is a chip rather than a sentence, and an error is one line under the field
 * it is about. The colours are the app's own, so signing in and being in look
 * like one place.
 *
 * Sizes are in rem so one rule scales the whole column for a television.
 */

:root {
  color-scheme: dark;
  --void: #101120;
  --surface: #1d1f2e;
  --raised: #262839;
  --line: #34374a;
  --text: #e9e9ed;
  --dim: #9397ab;
  --faint: #595d6c;
  --acc: #9184d9;
  --acc-l: #b5abfc;
  --acc-d: #7466c4;
  --ring: rgba(145, 132, 217, .32);
  --bad: #f0868b;
  --bad-line: #c8262c;
  --ease: cubic-bezier(.2, .9, .25, 1);
}
@media (min-width: 1600px) and (min-height: 900px) { html { font-size: 22px; } }

* { box-sizing: border-box; }
html { background: var(--void); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--text);
  font: 1rem/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(60rem 36rem at 50% -14rem, rgba(145, 132, 217, .16), transparent 70%),
    var(--void);
}
.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The column: everything centred, one width. */
.signin {
  width: 100%;
  max-width: 23rem;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  margin-bottom: .75rem;
}
.brandmark {
  width: 4.5rem;
  height: 4.5rem;
  filter: drop-shadow(0 .6rem 1.2rem rgba(0, 0, 0, .45));
}
.brandmark svg { width: 100%; height: 100%; display: block; }
.wordmark {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}

/* A step: the field, its one-line problem if it has one, the button. */
.step {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.field {
  width: 100%;
  height: 3.5rem;
  margin: 0;
  padding: 0 1.1rem;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .875rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.field::placeholder { color: var(--dim); opacity: 1; }
.field:hover { border-color: #43465b; }
.field:focus { border-color: var(--acc); background: var(--raised); box-shadow: 0 0 0 .25rem var(--ring); }
.field[aria-invalid="true"] { border-color: var(--bad-line); }
.field[aria-invalid="true"]:focus { box-shadow: 0 0 0 .25rem rgba(200, 38, 44, .28); }
/* The code: six big digits, spaced like the boxes they stand for. The left
 * padding matches the tracking the last digit carries, so the run is centred. */
.field.code {
  height: 4.5rem;
  padding: 0 0 0 .5em;
  text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: .5em;
  font-variant-numeric: tabular-nums;
}
.field.code::placeholder { color: var(--faint); }
/* The code a TV shows, eight letters in two fours: tracked less than six
 * digits, so all of it fits a phone. */
.field.pair {
  height: 4.5rem;
  padding: 0 0 0 .2em;
  text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.field.pair::placeholder { color: var(--faint); }

.bad {
  margin: -.25rem 0 0;
  padding: 0 .25rem;
  color: var(--bad);
  font-size: .875rem;
  text-align: left;
}
.field.code ~ .bad, .field.pair ~ .bad { text-align: center; }

/* The one thing to press. A link when it is the way out of a dead end. */
.go {
  display: block;
  width: 100%;
  height: 3.5rem;
  margin: 0;
  padding: 0 1rem;
  border: 0;
  border-radius: .875rem;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 3.5rem;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, var(--acc), var(--acc-d));
  box-shadow: 0 .5rem 1.5rem -.75rem rgba(145, 132, 217, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: filter .15s var(--ease), transform .08s var(--ease), box-shadow .15s var(--ease);
}
.go:hover { filter: brightness(1.08); }
.go:active { transform: translateY(1px); filter: brightness(.96); }
.go:focus-visible { outline: none; box-shadow: 0 0 0 .25rem var(--ring), 0 0 0 .4rem var(--acc-l); }

/* Where the code went, and the way back to change it. */
.who {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  max-width: 100%;
  margin-top: -.25rem;
  padding: .4rem .4rem .4rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .9375rem;
  text-decoration: none;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.who svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--acc-l); }
.who .addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .change {
  flex: none;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: rgba(145, 132, 217, .16);
  color: var(--acc-l);
  font-size: .8125rem;
  font-weight: 500;
}
.who:hover { border-color: #43465b; background: var(--raised); }
.who:hover .change { background: rgba(145, 132, 217, .26); }
.who:focus-visible { outline: none; box-shadow: 0 0 0 .25rem var(--ring); border-color: var(--acc); }

/* A second, quieter way on: another code. */
.again { margin: -.5rem 0 0; }
.quiet {
  margin: 0;
  padding: .5rem .75rem;
  border: 0;
  border-radius: .5rem;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: .9375rem;
  cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease);
}
a.quiet { display: inline-block; text-decoration: none; }
.quiet:hover { color: var(--text); background: rgba(233, 233, 237, .06); }
.quiet:focus-visible { outline: none; color: var(--text); box-shadow: 0 0 0 .25rem var(--ring); }

/* The one caution a page carries, small. */
.aside {
  margin: -.5rem 0 0;
  color: var(--dim);
  font-size: .875rem;
}

/* A page with nothing to type: one line, and the way on if there is one. */
.lead {
  margin: 0;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}