/* ── The front door ───────────────────────────────────────────────────
   Sign in and registration, on the same identity as the landing page and
   the application. Self-contained apart from the tokens in brand.css: the
   legacy `/account` screen still uses styles.css and should not be dragged
   along by a change made for these two pages.

   ## Why it is a split and not a card on an empty page

   A centred box on a blank field is the shape of a form that belongs to
   nothing. These two pages are the seam between the public page and the
   product, and both sides of that seam have a look — so the left half
   carries it, in the same near-black the landing page's chain band uses,
   and the right half is the form and nothing else.

   No `style="…"` attributes anywhere in the markup this styles: the CSP
   has no `unsafe-inline` on style-src, and `style-src-attr` falls back to
   it, so an inline style attribute is dropped by the browser as silently
   as an inline script.
   ──────────────────────────────────────────────────────────────────── */

/* One step is visible at a time. `hidden` alone is not enough — several
   rules below set `display` on these elements, and any `display` beats the
   `display:none` the attribute implies. This restores it. */
[hidden] {
  display: none !important;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--su-paper);
  color: var(--su-ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1 { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
h2 { margin: 0; font-weight: 600; letter-spacing: -0.032em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--su-yellow-deep); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Layout ────────────────────────────────────────────────────────── */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
}

/* The half that carries the identity. Hidden on a narrow screen rather than
   stacked above the form: somebody signing in on a phone wants the field, not
   the pitch they have already read. */
.auth-story {
  background: var(--su-night);
  color: var(--su-night-ink);
  padding: 56px 48px;
  display: flex; flex-direction: column; gap: 28px;
}
.auth-story h2 { font-size: 30px; color: var(--su-night-ink); max-width: 16ch; margin-top: auto; }
.auth-story p { font-size: 14.5px; color: var(--su-night-ink-2); max-width: 44ch; line-height: 1.6; }

.auth-facts { display: flex; flex-direction: column; border-top: 1px solid var(--su-night-3); }
.auth-fact {
  padding: 13px 0; border-bottom: 1px solid var(--su-night-3);
  display: flex; gap: 16px; align-items: baseline;
}
.auth-fact dt {
  width: 92px; flex: none; margin: 0;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: #7d7466;
}
.auth-fact dd { margin: 0; font-size: 13.5px; color: var(--su-night-ink); }

.auth-form-wrap { display: grid; place-items: center; padding: 40px 28px; }
.card {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 20px;
}

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-story { display: none; }
}

/* ── Brand ─────────────────────────────────────────────────────────── */

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-mark {
  width: 24px; height: 24px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--su-yellow); color: #14110b;
  display: grid; place-items: center;
}
.brand-mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.brand-word { font-size: 15.5px; font-weight: 600; letter-spacing: -0.022em; color: var(--su-night-ink); }

/* The mark above the form, in the mono voice the rest of the product uses for
   labels. Yellow is a surface here, never the text. */
.signin-mark {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--su-ink-3);
}

.signin-lede { color: var(--su-ink-2); font-size: 14px; max-width: 42ch; }

/* ── Form ──────────────────────────────────────────────────────────── */

form { display: flex; flex-direction: column; gap: 15px; }

label {
  display: flex; flex-direction: column; gap: 6px;
}
label > span:first-child {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--su-ink-3);
}
label small { font-size: 12px; color: var(--su-ink-3); line-height: 1.45; }

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; height: 40px; padding: 0 11px;
  border: 1px solid var(--su-line-2);
  border-radius: var(--radius);
  background: var(--su-surface);
  color: var(--su-ink);
  font: inherit; font-size: 15px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover { border-color: var(--su-line-3); }
input:focus {
  outline: none; border-color: var(--su-yellow-deep);
  box-shadow: 0 0 0 3px var(--su-yellow-wash);
}
input::placeholder { color: var(--su-ink-4); }

button[type="submit"] {
  height: 42px; width: 100%;
  border: 1px solid var(--su-yellow-lo); border-radius: var(--radius);
  background: var(--su-yellow); color: #14110b;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background .12s ease;
}
button[type="submit"]:hover { background: var(--su-yellow-hi); }
button[type="submit"][disabled] { opacity: .5; cursor: default; }

/* The address the link went to. Shown back because the commonest failure
   here is a typo nobody notices until they are staring at an empty inbox.
   Yellow is a surface, never a text colour — ink on the wash. */
.signin-sent {
  background: var(--su-yellow-wash);
  border: 1px solid var(--su-yellow-lo);
  border-radius: var(--radius);
  padding: 15px 17px;
  color: var(--su-ink);
  font-size: 14px;
}
.signin-address {
  display: block;
  font-family: var(--font-mono); font-weight: 600; font-size: 13.5px;
  word-break: break-all;
  margin: 4px 0 0;
}

/* A quiet way back, and a quiet way to the password. Neither should compete
   with Continue — the whole point of this screen is that one button is the
   obvious thing to press. */
.aside { font-size: 13.5px; color: var(--su-ink-2); }
.signin-alt {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; width: auto;
}
.signin-alt:hover { color: var(--su-ink); text-decoration-thickness: 2px; }

.signin-legal {
  font-size: 12px; color: var(--su-ink-3); max-width: 42ch; line-height: 1.5;
  border-top: 1px solid var(--su-line); padding-top: 16px;
}

/* An error stays put and says what the server said. */
.msg.error, .error {
  border: 1px solid var(--su-bad);
  background: var(--su-bad-wash);
  color: var(--su-bad);
  border-radius: var(--radius);
  padding: 10px 13px;
  font-size: 13.5px;
}

/* ── The product that sent you here ──────────────────────────────────
   Rendered by login.js only when `next` names a product on the public
   list, so most of the time this block draws nothing at all.

   Shaped like `.prodline` in the app rather than like a banner: it is a
   statement of fact about who is asking, and a banner would read as a
   notification about something having gone wrong.
   ──────────────────────────────────────────────────────────────────── */

.auth-product {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--su-line-2);
  border-radius: var(--radius-lg);
  background: var(--su-surface);
}
.auth-product[hidden] { display: none; }

.auth-product-mark {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--su-sunk);
  border: 1px solid var(--su-line-2);
  color: var(--su-ink-2);
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
}

.auth-product-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.auth-product-body b { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.auth-product-body span {
  font-size: 11.5px; color: var(--su-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}