/* vaOS auth identity pass. Loads after app.css on the signed-out
   pages: sign in, sign up, forgotten password, reset, verify. */

@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/bricolage-var.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

/* --- Display type ---------------------------------------------------- */

.auth-card h1, h1 {
  font-family: "Bricolage", "Instrument Sans", sans-serif;
  font-weight: 560;
  font-stretch: 92%;
  letter-spacing: -.015em;
}

.wordmark {
  font-family: "Bricolage", "Instrument Sans", sans-serif;
  font-weight: 620;
}

/* --- Aside: deep brand green, not anonymous near-black --------------- */

.auth-aside {
  background: #17352d;
}
.auth-aside .wordmark { color: #fff; }
.auth-aside .va { color: #7fd3ba; }
.auth-aside p { color: #9dbcb1; font-size: 16px; line-height: 1.6; }

/* Four-status mark beside the wordmark. */
.auth-aside .wordmark::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 7px;
  margin-left: 9px;
  vertical-align: 2px;
  background:
    radial-gradient(circle 3px at 3px  50%, #6fa8dc 98%, transparent),
    radial-gradient(circle 3px at 10px 50%, #e0b34c 98%, transparent),
    radial-gradient(circle 3px at 17px 50%, #a68ae8 98%, transparent),
    radial-gradient(circle 3px at 24px 50%, #6fd0b4 98%, transparent);
}

/* --- Show password --------------------------------------------------- */

.pwwrap { position: relative; display: block; }
.pwwrap input { width: 100%; padding-right: 58px; }
.pwtoggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 3px 8px;
  font: 550 12.5px/1 "Inter", sans-serif;
  color: var(--muted);
  background: var(--field);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.pwtoggle:hover { color: var(--ink); }
/* Uploaded platform logo on the auth aside, dark-background version,
   same suppression of the four-status dots as everywhere else. */
.auth-aside .wordmark img { display: block; height: 26px; width: auto; max-width: 190px; object-fit: contain; }
.auth-aside .wordmark.has-logo { display: inline-block; }
.auth-aside .wordmark.has-logo::after { content: none; }

@media (max-width: 560px) {
  .auth-aside .wordmark img { height: 22px; max-width: 150px; }
}

/* --- The four statuses, written out, mid-aside ----------------------- */
/* Hidden until the split layout exists: on a phone the aside is a slim
   strip above the form and this would just push the form down. */

.auth-flow { display: none; }

@media (min-width: 860px) {
  .auth-flow { display: block; margin: 44px 0; max-width: 34ch; }

  .auth-flow ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 22px;
  }

  /* The line that tells you what the four dots below are: the life of
     a request. An eyebrow rather than a headline, so the statuses stay
     the loudest thing in the column. */
  .auth-flow .af-lead {
    margin: 0 0 18px;
    color: #9dbcb1;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .auth-flow li { position: relative; padding-left: 24px; }

  .auth-flow li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
  }

  /* The same four colours the wordmark dots carry, in the same order. */
  .af-open::before      { background: #6fa8dc; }
  .af-pending::before   { background: #e0b34c; }
  .af-scheduled::before { background: #a68ae8; }
  .af-complete::before  { background: #6fd0b4; }

  .auth-flow b {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -.005em;
  }

  .auth-flow span {
    display: block;
    margin-top: 3px;
    color: #9dbcb1;
    font-size: 14.5px;
    line-height: 1.55;
  }
}