/* ============================================================
   SIGN IN, SIGN UP, RECOVERY AND CONFIRMATION. Loaded only by
   templates/auth/_shell.html, in place of app.css, so nothing here reaches any
   other page and nothing in app.css reaches these. Every rule is scoped under
   `.rw-auth`.

   SOURCE. Figma page "Rankedwire / 01 Authentication" (2061:171), AUTH-01 to
   AUTH-15, desktop and mobile, with the tokens of the "Rankedwire / SaaS"
   collection (Light mode).

   LIGHT ONLY, WHATEVER THE SAVED THEME. base.html still writes the saved
   preference to <html data-theme>, but this sheet defines no dark values at
   all, so a person who uses the dark workspace still meets the light doors the
   frames draw. `color-scheme: light` keeps native controls light as well.
   ============================================================ */

@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens (Figma "Rankedwire / SaaS", Light) ---------- */
.rw-auth {
  --au-page:   #F6F8FA;
  --au-panel:  #FFFFFF;
  --au-ink:    #1C2B34;
  --au-text:   #3D5766;
  --au-muted:  #5F7583;
  --au-border: #E8EDF0;
  --au-danger: #F44C50;
  --au-gradient: linear-gradient(90deg, #AE00FF 0%, #B103F5 4%, #DA3090 52%, #F44C50 85%, #FF5738 100%);
  --au-pw-weak: #F44C50; --au-pw-fair: #FF5738; --au-pw-good: #B5679B; --au-pw-strong: #AE00FF;
  --au-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --au-brand: "Jost", Arial, sans-serif;
  --au-ease: cubic-bezier(0, 0, 0.2, 1);

  color-scheme: light;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--au-page);
  color: var(--au-text);
  font-family: var(--au-font);
  font-size: 14px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.rw-auth,
.rw-auth *,
.rw-auth *::before,
.rw-auth *::after { box-sizing: border-box; }
.rw-auth p { margin: 0; }
.rw-auth a { color: inherit; }
.rw-auth [hidden] { display: none !important; }
.rw-auth .au-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.rw-auth a:focus-visible,
.rw-auth button:focus-visible,
.rw-auth input:focus-visible,
.rw-auth select:focus-visible {
  outline: 2px solid var(--au-ink);
  outline-offset: 2px;
}
.rw-auth .au-skip {
  position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 16px;
  background: var(--au-panel); color: var(--au-ink); border: 1px solid var(--au-border);
  border-radius: 8px; font-weight: 500; text-decoration: none;
}
.rw-auth .au-skip:focus { top: 12px; }

/* ---------- Header (2063:200): the lockup and the three doors ---------- */
.rw-auth .au-header {
  display: flex; align-items: center; gap: 16px;
  padding: 32px; background: var(--au-panel);
}
.rw-auth .au-logo { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 250px; text-decoration: none; }
.rw-auth .au-logo-mark { display: block; width: 48px; height: 19px; }
.rw-auth .au-logo-word {
  font-family: var(--au-brand); font-weight: 500; font-size: 18px; line-height: 24px;
  text-transform: uppercase; color: var(--au-ink); white-space: nowrap;
}
.rw-auth .au-doors { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 12px; line-height: 18px; color: var(--au-muted); }
.rw-auth .au-doors a { color: var(--au-muted); text-decoration: none; }
.rw-auth .au-doors a:hover { color: var(--au-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- The card (2063:206) ---------- */
/* The main area does not grow, so the brand line sits 24px under the card as
   the frames draw it, not at the foot of a tall window. */
.rw-auth .au-main {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: 48px 24px 24px;
}
.rw-auth .au-card {
  display: flex; flex-direction: column; gap: 24px;
  width: 100%; max-width: 504px; padding: 32px;
  background: var(--au-panel); border: 1px solid var(--au-border); border-radius: 12px;
}
.rw-auth .au-heading { display: flex; flex-direction: column; gap: 8px; }
.rw-auth .au-eyebrow { font-size: 12px; line-height: 18px; color: var(--au-muted); }
.rw-auth .au-title { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; color: var(--au-text); }
/* Sentences stack one to a line, as the frames set them; inline words inside a
   sentence (a bold account name) stay inline. */
.rw-auth .au-lede,
.rw-auth .au-body,
.rw-auth .au-success { display: block; font-size: 14px; line-height: 22px; color: var(--au-muted); }
.rw-auth .au-lede > span,
.rw-auth .au-body > span,
.rw-auth .au-success > span { display: block; }
.rw-auth .au-gap { height: 22px; }
.rw-auth .au-caption { font-size: 12px; line-height: 18px; color: var(--au-muted); }
.rw-auth .au-strong { color: var(--au-text); font-weight: 600; }
.rw-auth .au-divider { height: 1px; margin: 0; border: 0; background: var(--au-border); }

/* ---------- Forms: the Field component (2062:192) ---------- */
.rw-auth .au-form { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.rw-auth .au-fields { display: flex; flex-direction: column; gap: 20px; }
.rw-auth .au-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rw-auth .au-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--au-text); }
.rw-auth .au-help { font-size: 12px; line-height: 18px; color: var(--au-muted); }
.rw-auth .au-input,
.rw-auth .au-select {
  display: block; width: 100%; height: 44px; margin: 0; padding: 0 12px;
  border: 1px solid var(--au-border); border-radius: 8px;
  background: var(--au-panel); color: var(--au-text);
  font-family: var(--au-font); font-size: 16px; line-height: 24px;
  transition: border-color 200ms var(--au-ease);
}
.rw-auth .au-input::placeholder { color: var(--au-muted); opacity: 1; }
.rw-auth .au-input:focus-visible,
.rw-auth .au-select:focus-visible { outline: none; border-color: var(--au-text); box-shadow: inset 0 0 0 1px var(--au-text); }
.rw-auth .au-input[aria-invalid="true"] { border-color: var(--au-danger); }
.rw-auth .au-select-wrap { position: relative; width: 100%; min-width: 0; }
.rw-auth .au-select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; text-overflow: ellipsis; }
.rw-auth .au-select-wrap::after {
  content: ""; position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; pointer-events: none;
  background: var(--au-muted);
  -webkit-mask: url("../cust-saas/icon-chevron.svg") center / 20px 20px no-repeat;
          mask: url("../cust-saas/icon-chevron.svg") center / 20px 20px no-repeat;
}
/* THE PHONE, AS ONE CONTROL (2063:178): the country code and the number sit
   inside one bordered box, divided by a hairline, as the frame draws a single
   field. They stay two real fields, `phone_dial` and `phone_number`, each with
   its own accessible name, and the box takes the focus ring of whichever one is
   focused. */
.rw-auth .au-phone {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 14fr); align-items: stretch;
  height: 44px; border: 1px solid var(--au-border); border-radius: 8px; background: var(--au-panel);
  transition: border-color 200ms var(--au-ease);
}
.rw-auth .au-phone .au-select-wrap { border-right: 1px solid var(--au-border); }
.rw-auth .au-phone .au-select,
.rw-auth .au-phone .au-input { height: 42px; border: 0; border-radius: 0; background: transparent; }
.rw-auth .au-phone .au-select { border-radius: 8px 0 0 8px; }
.rw-auth .au-phone .au-input { border-radius: 0 8px 8px 0; }
.rw-auth .au-phone .au-select-wrap::after { top: 11px; }
.rw-auth .au-phone:focus-within { border-color: var(--au-text); box-shadow: inset 0 0 0 1px var(--au-text); }
.rw-auth .au-phone .au-select:focus-visible,
.rw-auth .au-phone .au-input:focus-visible { box-shadow: none; outline: none; background: var(--au-page); }

/* The consent box: 16px, never pre-ticked, its own label. */
.rw-auth .au-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; line-height: 22px; color: var(--au-text); }
.rw-auth .au-check input { flex-shrink: 0; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--au-text); cursor: pointer; }
.rw-auth .au-check a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Buttons and links ---------- */
.rw-auth .au-button {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
  padding: 10px 16px; border: 1px solid var(--au-border); border-radius: 8px;
  background: var(--au-panel); color: var(--au-text);
  font-family: var(--au-font); font-size: 14px; line-height: 20px; font-weight: 500;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: transform 120ms var(--au-ease), filter 120ms var(--au-ease), background-color 200ms var(--au-ease);
}
.rw-auth .au-button:hover { background: var(--au-page); }
.rw-auth .au-button:active { transform: scale(0.985); }
.rw-auth .au-button-primary { border: 0; background: var(--au-gradient); color: var(--au-panel); }
.rw-auth .au-button-primary:hover { background: var(--au-gradient); filter: brightness(1.05); }
.rw-auth .au-choices { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rw-auth .au-recover { text-align: right; font-size: 14px; line-height: 20px; font-weight: 500; }
.rw-auth .au-recover a,
.rw-auth .au-links a { color: var(--au-text); text-decoration: none; }
.rw-auth .au-recover a:hover,
.rw-auth .au-links a:hover { color: var(--au-ink); text-decoration: underline; text-underline-offset: 3px; }
.rw-auth .au-links { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--au-text); }

/* ---------- Notices: errors, expired links, unavailable service ---------- */
.rw-auth .au-notice {
  padding: 12px 16px; border: 1px solid var(--au-border); border-radius: 8px;
  background: var(--au-panel); font-size: 14px; line-height: 22px; color: var(--au-muted);
}
.rw-auth .au-notice.is-error { border-color: var(--au-danger); }
.rw-auth .au-notice a { color: var(--au-text); font-weight: 500; }
.rw-auth .au-notice.is-dev { word-break: break-all; border-style: dashed; }


/* ---------- Shared partials, drawn in this language ---------- */
/* partials/door_signpost.html */
/* One sentence to a line, as AUTH-01 to AUTH-03 set them (2063:228). */
.rw-auth .door-signpost { display: flex; flex-direction: column; gap: 0; font-size: 12px; line-height: 18px; color: var(--au-muted); }
.rw-auth .door-signpost p { margin: 0; }
.rw-auth .door-signpost .door-line { display: block; }
.rw-auth .door-signpost small { font-size: inherit; }
.rw-auth .door-signpost a { color: var(--au-text); text-decoration: underline; text-underline-offset: 2px; }
/* partials/signed_in_elsewhere.html */
.rw-auth .switch-warning {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 16px;
  border: 1px solid var(--au-border); border-radius: 8px; background: var(--au-page);
  font-size: 14px; line-height: 22px; color: var(--au-text);
}
.rw-auth .switch-warning .path-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-auth .switch-warning .button-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--au-border); border-radius: 8px; background: var(--au-panel);
  color: var(--au-text); font-weight: 500; text-decoration: none;
}
/* partials/password_meter.html, upgraded by password-meter.js */
/* The strength meter is kept (it is useful) and set in the field's own rhythm:
   the bar runs flush under the control, the strength word and the help and
   rules follow as captions, so the field reads as the frame's Field with its
   help text, plus a thin live bar. */
.rw-auth .pw-meter { display: flex; flex-direction: column; gap: 6px; margin-top: -2px; }
.rw-auth .pw-meter small { font-size: 12px; line-height: 18px; color: var(--au-muted); }
.rw-auth .pw-meter .pw-bar { display: block; width: 100%; height: 3px; overflow: hidden; background: var(--au-border); border-radius: 999px; }
.rw-auth .pw-meter .pw-bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--au-pw-weak); transition: width 140ms ease, background-color 140ms ease; }
.rw-auth .pw-bar.is-weak   .pw-bar-fill { background: var(--au-pw-weak); }
.rw-auth .pw-bar.is-fair   .pw-bar-fill { background: var(--au-pw-fair); }
.rw-auth .pw-bar.is-good   .pw-bar-fill { background: var(--au-pw-good); }
.rw-auth .pw-bar.is-strong .pw-bar-fill { background: var(--au-pw-strong); }
.rw-auth .pw-meter .pw-strength-label { display: block; min-height: 18px; font-size: 12px; line-height: 18px; color: var(--au-muted); }
.rw-auth .password-rules { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 18px; color: var(--au-muted); }
.rw-auth .password-rules li::before { content: "\25CB"; display: inline-block; width: 16px; }
.rw-auth .pw-meter.is-live .password-rules li.is-met { color: var(--au-text); }
.rw-auth .pw-meter.is-live .password-rules li.is-met::before { content: "\2713"; color: var(--au-pw-good); }
/* The parent brand line, under the card (2063:229). */
.rw-auth .app-footer { padding: 0 24px 48px; margin-top: 0; text-align: center; font-size: 12px; line-height: 18px; color: var(--au-muted); }
.rw-auth .app-footer p { margin: 0; }
.rw-auth .app-footer a { color: var(--au-muted); }

/* ---------- Phone (2063:171): one white page, no card frame ---------- */
@media (max-width: 599px) {
  .rw-auth { background: var(--au-panel); }
  .rw-auth .au-header { padding: 24px; }
  .rw-auth .au-logo { flex: 0 0 auto; }
  .rw-auth .au-doors { display: none; }
  .rw-auth .au-main { padding: 24px 24px 24px; }
  .rw-auth .au-card { max-width: none; padding: 24px 0 0; border: 0; border-radius: 0; }
  .rw-auth .au-phone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rw-auth .app-footer { padding-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .rw-auth *, .rw-auth *::before, .rw-auth *::after { transition: none !important; animation: none !important; }
  .rw-auth .au-button:active { transform: none; }
}
.rw-auth .au-lede strong,
.rw-auth .au-body strong { color: var(--au-text); font-weight: 600; }