/* ==========================================================================
   login-form.css — hero login form (right-hand column)
   Loads AFTER base.css. Only what base.css does not already provide:
   the form shell, the h3, the outlined email field + floating label,
   the legal copy and the "Sign up for OnlyFans" link row.
   The whole .g-btn system (sizes, disabled, social chips, hovers) is in base.css.
   ========================================================================== */

/* ---------- form shell ---------- */
.b-loginreg__form {
  width: 100%;
  max-width: 100%;
  text-align: center;
}

/* No colour here on purpose: live declares none and lets the heading inherit
   from whatever surface it sits on. Pinning it to --of-text (a fixed #242529)
   is what made it near-black inside the dark subscribe modal. On the landing
   page body colour is --of-text anyway, so inheriting is identical there. */
.b-loginreg__form h3 {
  font: 500 14px/20px var(--of-font);
  text-align: left;
  margin: 0 0 9px;
}

/* ---------- email field ----------
   Vuetify draws its outline with a <fieldset>; this rebuilds the same look
   with a bordered control box + an absolutely positioned floating label.
   76px = 48px control box + 28px reserved validation-message space.         */
.b-loginreg__form .g-input__wrapper {
  position: relative;
  min-height: 76px;
  text-align: left;
}

.b-loginreg__form .g-input__control {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--of-border);
  border-radius: 6px;
  /* Live measures rgba(0,0,0,0) here -- the field box is transparent and the
     modal shows through. We had --of-bg, a hard #ffffff, which is why the
     email field was a white slab in dark mode. */
  background-color: transparent;
  transition: border-color var(--of-t-input);
}

.b-loginreg__form .g-input__control input {
  width: 100%;
  padding: 14px 0;
  font: 400 16px/20px var(--of-font);
  /* inherit, so the typed text follows the surface like live does */
  color: inherit;
  /* Live runs a blue caret (#0091ea) rather than a text-coloured one. That was
     wrong in light mode too, just far less visible. */
  caret-color: var(--of-blue-hover);
  border: none;
  background: none;
  outline: none;
}
/* the placeholder is a single space, used only as a :placeholder-shown hook */
.b-loginreg__form .g-input__control input::placeholder { color: transparent; opacity: 0; }

.b-loginreg__form .g-input__label {
  position: absolute;
  top: 14px;
  left: 16px;
  font: 400 16px/20px var(--of-font);
  color: var(--of-muted);
  /* Live has no background here because it uses a real fieldset/legend, which
     cuts a notch in the border. We rebuilt the control with an absolutely
     positioned label instead, so the label has to mask the border itself when
     it floats -- meaning it needs a solid colour matching the surface behind.
     Themed, with the landing page value as fallback: --bg-color only exists
     where theme.css is loaded (the profile pages), so index.html keeps #fff. */
  background-color: var(--bg-color, var(--of-bg));
  padding: 0 4px;
  margin-left: -4px;   /* keeps the text optically aligned with the input */
  pointer-events: none;
  transform-origin: top left;
  transition: transform var(--of-t-input);
}

/* Focused: the border goes blue at 75% alpha — NOT solid. Measured on the live
   site (Vuetify's .primary--text state): rgba(0,175,240,.75). */
.b-loginreg__form .g-input__wrapper:focus-within .g-input__control {
  border-color: rgba(0, 175, 240, .75);
}

/* Floated label — focused, JS-flagged as filled, or (fallback) actually filled.
   translateY is -21px, matching the live site's computed matrix. */
.b-loginreg__form .g-input__wrapper:focus-within .g-input__label,
.b-loginreg__form .g-input__wrapper.m-filled .g-input__label {
  transform: translateY(-21px) scale(.75);
}
/* CSS-only safety net: covers browser autofill / restored values that land in the
   input before app.js gets a chance to set .m-filled. The label sits BEFORE the
   input in source order, so this needs :has() rather than a sibling combinator. */
.b-loginreg__form .g-input__wrapper:has(input:not(:placeholder-shown)) .g-input__label {
  transform: translateY(-21px) scale(.75);
}

/* The label is blue ONLY while the field is focused — Vuetify adds .primary--text
   on focus and drops it on blur. So a floated-but-blurred label (i.e. the field
   has a value and you clicked away) goes back to grey. Keep this rule AFTER the
   float rules and scoped to :focus-within only; applying it to .m-filled too
   would leave the label stuck blue after blur, which the real site never does. */
.b-loginreg__form .g-input__wrapper:focus-within .g-input__label {
  color: var(--of-blue);
}

/* ---------- submit ----------
   base.css supplies every visual value for .g-btn.m-rounded.m-block.m-md[disabled]. */
.b-loginreg__form button[type="submit"] {
  margin-bottom: 0;
}

/* ---------- legal copy ---------- */
.b-loginreg__form__issues {
  font: 400 12px/16px var(--of-font);
  color: var(--of-muted);
  padding: 8px 11px 0;
  text-align: left;
}
.b-loginreg__form__issues a { color: var(--of-blue); }
.b-loginreg__form__issues a:hover { color: var(--of-blue-hover); }

/* ---------- "Sign up for OnlyFans" row ---------- */
.b-loginreg__links {
  padding: 30px 0;
  text-align: center;
  font: 400 14px/20px var(--of-font);
}
.b-loginreg__links .g-btn {
  display: inline-block;
  font: 400 14px/20px var(--of-font);
}

/* ==========================================================================
   Error state, password field, and the multi-step login additions.
   Values measured on the live site by submitting "asd" and by inspecting the
   password wrapper that ships hidden in the page's initial DOM.
   ========================================================================== */

/* ---------- validation message ----------
   The wrapper's 76px min-height already reserves this space, so showing a
   message does NOT change the field's height or shift the form. Confirmed on
   the live site: wrapper stays 76px and the form stays 377px with an error up. */
.b-loginreg__form .g-input__details {
  display: flex;
  padding: 0 16px;
  min-height: 20px;
}

.b-loginreg__form .g-input__message {
  font: 400 12px/16px var(--of-font);
  color: var(--of-danger);
  padding: 0 0 4px;
  text-align: left;
}

/* live's "Did you mean @gmail.com?" line (2026-09-21): 12/16 grey in the details slot,
   the domain a flat blue button with no padding; gone while the field shows an error */
.b-loginreg__form .g-input__help { margin: 1px 0 0; font: 400 12px/16px var(--of-font); color: var(--of-muted); text-align: left; }   /* live: the text starts where the typed text does (16px in), 1px under the box */
.b-loginreg__form .g-input__help[hidden], .b-loginreg__form .g-input__wrapper.m-error .g-input__help { display: none; }
.b-loginreg__form .g-input__help .g-btn { display: inline; height: 16px; min-height: 0; padding: 0; border: 0; background: none; font: 400 12px/16px var(--of-font); color: var(--of-blue); text-transform: none; cursor: pointer; }
.b-loginreg__form .g-input__help .g-btn:hover { color: var(--of-blue-hover, #0091ea); }
/* .m-error is set by app.js on the wrapper */
.b-loginreg__form .g-input__wrapper.m-error .g-input__control { border-color: var(--of-danger); }
.b-loginreg__form .g-input__wrapper.m-error .g-input__label   { color: var(--of-danger); }
/* red beats the blue focus colour while the error is showing */
.b-loginreg__form .g-input__wrapper.m-error:focus-within .g-input__control { border-color: var(--of-danger); }
.b-loginreg__form .g-input__wrapper.m-error:focus-within .g-input__label   { color: var(--of-danger); }

/* ---------- password field ----------
   The live site pads the slot 0 48px 0 16px to clear a 48x48 reveal button. */
.b-loginreg__form .g-input__wrapper.m-with-field-control .g-input__control { padding: 0 48px 0 16px; }

.b-loginreg__form .g-input__field-control {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  min-width: auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  color: var(--of-muted);
  transition: color var(--of-t-btn);
}
.b-loginreg__form .g-input__field-control:hover { background: none; color: var(--of-blue-hover); }
.b-loginreg__form .g-input__field-control .g-icon { width: 24px; height: 24px; flex: 0 0 24px; }
/* pressed = password visible */
.b-loginreg__form .g-input__field-control[aria-pressed="true"] { color: var(--of-blue); }

/* the site hides the not-yet-needed field without removing it from the DOM */
.g-hidden--from-user {
  position: absolute !important;
  top: -9999px;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- links row ----------
   A following <span> gains a 2x2px grey dot separator (verified as a drawn dot
   in the site's own stylesheet, not a bullet character — the profile page's
   footer uses a real "•" glyph, but this row does not).

   `:not([hidden]) ~ :not([hidden])` rather than the site's plain `span + span`:
   the spans here are toggled with the `hidden` attribute as the form steps
   through email -> password, and a hidden span still counts for `+`. With the
   plain rule the dot renders in front of "Sign up for OnlyFans" on step one,
   floating with nothing before it. The general sibling combinator also keeps it
   correct when more than two spans are visible. */
.b-loginreg__links > span:not([hidden]) ~ span:not([hidden]) {
  padding-left: 18px;
  position: relative;
}
.b-loginreg__links > span:not([hidden]) ~ span:not([hidden])::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  margin-top: -1px;
  width: 2px;
  height: 2px;
  border-radius: 1000px;
  background: var(--of-muted);
}

/* ---------- reset-password hint line (inferred, see docs) ---------- */
.b-loginreg__form__hint {
  font: 400 14px/20px var(--of-font);
  color: var(--of-muted);
  text-align: left;
  margin: 0 0 16px;
}

/* ---------- signup form ---------- */
.b-loginreg__links.m-signup-links { padding-top: 22px; padding-bottom: 30px; }
.b-loginreg__links.m-signup-links .g-btn.m-flat { margin-left: 4px; }