/* Registration (S045). Component styling for the `/register` card; `app.css` deliberately
 * leaves page components to the step that adds the page (see its own module comment). */

.auth-card {
  max-width: 400px;
  margin-inline: auto;
  /* 32px/28px, not `var(--space-8) var(--space-6)` (32px/24px): every auth panel in the
   * mockup is `padding:32px 28px` (`Auth States.dc.html:44,58,71,85`) — 28px is on the
   * 4px spacing scale but has no token of its own, the same off-token-on-grid case
   * `post.css`/`search.css` already carry (S077f review round 2, nit). */
  padding: var(--space-8) 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}

.auth-sub {
  color: var(--text-2);
}

.auth-form {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.field label {
  display: block;
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text-2);
  margin-bottom: var(--space-2);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg);
  font-size: var(--size-ui-dense);
  color: var(--text);
}

.field input[aria-invalid="true"] {
  border-color: var(--false);
}

/* Username prefix box (S077f, D-90/D-95): `mockups/Auth States.dc.html:49` wraps the
 * input in one bordered box with the host printed ahead of it, so the border/background
 * moves from the input itself onto this wrapper; the input becomes a borderless flex
 * item so the two halves read as one field. */
.field-prefixed {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg);
}

.field-prefixed.is-invalid {
  border-color: var(--false);
}

.field-prefix {
  padding-left: var(--space-3);
  font-family: var(--mono);
  font-size: var(--size-helper);
  color: var(--text-2);
  white-space: nowrap;
}

.field-prefixed input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  /* The mockup styles both halves of the box as one unit (`Auth States.dc.html:49`:
   * `font-family:var(--mono);font-size:13px` on the prefix *and* the input). Without
   * this the input falls through to `.field input[type="text"]`'s 14px sans and the two
   * halves of one bordered field disagree on face and size (S077f review round 1,
   * minor). */
  font-family: var(--mono);
  font-size: var(--size-helper);
}

/* The three inline field hints. Each is a `<p>` inside `<main class="wrap wrap-main">`,
 * so `app.css`'s `.wrap-main p { margin: 0 0 20px; color: var(--text-2) }` (0,1,1) beats a
 * bare `.field-ok`/`.field-error`/`.field-help` class selector (0,1,0) and every value
 * below is discarded — the hints rendered grey with no top margin, the accent and error
 * tokens declared but never painted (S077f review round 2, major + two minors). Scoping
 * each to its `.field` wrapper (0,2,0) is what makes the transcription apply; the shared
 * `app.css` rule is left alone because every other system-page paragraph wants it.
 *
 * The mockup's accent success hint (`#r-user-ok`, D-90's "use the accent color, not
 * green" — the handoff's README states this explicitly for username availability). The
 * margin and size are `.field-help`/`.field-error`'s tokens (8px/13px), not the mockup's
 * 6px/12px: all three hints sit in the same form under the same field labels, and a hint
 * that changes metrics with its state reads as a layout shift (S077f review round 1,
 * nit). */
.field .field-ok {
  margin: var(--space-2) 0 0;
  font-size: var(--size-helper);
  color: var(--accent);
}

.field .field-help {
  margin: var(--space-2) 0 0;
  font-size: var(--size-helper);
  color: var(--text-2);
}

.field .field-error {
  margin: var(--space-2) 0 0;
  font-size: var(--size-helper);
  color: var(--false);
}

/* The consent row is a `<label>` inside `.field`, so `.field label` (0,1,1) above beats a
 * bare `.tos-check` (0,1,0) and rendered it mono/12px — not the mockup's 13px UI sans
 * (`Auth States.dc.html:53`), which is what D-96 records this element as shipping. Scoped
 * to (0,2,1) so the decision and the page agree (S077f review round 2, minor). */
.field label.tos-check {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-family: var(--sans);
  font-size: var(--size-helper);
  color: var(--text-2);
}

.tos-check input {
  accent-color: var(--accent);
  margin: 0;
}

.auth-form button[type="submit"] {
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-s);
  font-weight: 500;
  cursor: pointer;
}

.auth-alt {
  margin: 0;
  font-size: var(--size-helper);
  color: var(--text-2);
}

/* Verified page's success icon and "Next" eyebrow (S077f review round 1, major:
 * `.state-eyebrow` lives only in `states.css`, which this page never loads, so the label
 * fell through to `app.css`'s base `<p>` styling; `mockups/Auth States.dc.html:87,90`
 * transcribed here instead of pulling in a second stylesheet for one label).
 *
 * `.auth-check` is `display: block` (S077f review round 2, nit): the SVG is inline by
 * default, and a vertical margin on an inline box does not affect layout — the declared
 * `margin-bottom` was inert, and the 36px gap to the heading was line-box leading instead
 * of the intended 12px. `.auth-eyebrow` is scoped to `.auth-card` (S077f review round 2,
 * minor, the same cascade loss as `.field-ok`/`.field-error`/`.field-help` above): the
 * `<p>` sits in `.wrap-main`, and `app.css`'s `.wrap-main p { margin: 0 0 20px }` (0,1,1)
 * beat the bare `.auth-eyebrow` (0,1,0) declared here. */
.auth-check {
  display: block;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.auth-card .auth-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text-2);
}

/* Verified page's "Next" list and primary CTA (S077f, D-90: `mockups/Auth
 * States.dc.html:90-96`). Both link `/login`, not the mockup's `/dashboard` — the route
 * is unmounted until S081 (S077f review round 1, major). `.auth-cta`'s padding is
 * `var(--space-3) var(--space-4)` (12px/16px), not the mockup's `10px 14px`: the mockup's
 * value is off the 4px grid every other token in this file sits on, and
 * `.auth-form button[type="submit"]` (S045) already renders the mockup's identically-sized
 * submit button at 12px/16px, so this CTA matches the button beside it rather than
 * transcribing a value nothing else on the page uses (S077f review, nit). */
.auth-next-list {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-5);
  font-size: var(--size-ui-dense);
  line-height: 1.8;
}

.auth-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-s);
  font-weight: 500;
  font-size: var(--size-ui-dense);
}

/* Login (S047). */

.auth-alert {
  border: 1px solid var(--false);
  border-radius: var(--radius-s);
  padding: var(--space-3) var(--space-4);
  font-size: var(--size-helper);
  color: var(--false);
  line-height: 1.5;
}

.field-label-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.field-label-row label {
  margin-bottom: 0;
}

.stay-logged-in {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--size-helper);
  color: var(--text-2);
}

.stay-logged-in input {
  accent-color: var(--accent);
  margin: 0;
}