/* ===========================================================================
   Account/Join, SignIn, Sent, Invalid.

   The form itself is .bh-field from BH.Design: label, hint, native :user-invalid
   error, live status. What is left here is the column these four screens share and
   the two pieces of chrome that only exist on Join.
   =========================================================================== */

@layer components {

  /* Narrow, and centred, because a two-field form spread across One's reading
     column reads as a page rather than as a task. */
  .one-auth {
    inline-size: min(26rem, 100%);
    margin-inline: auto;
  }

  .one-auth__form {
    display: grid;
    gap: var(--sp-5);
    margin-block-start: var(--sp-6);
  }

  /* -------------------------------------------------------------------------
     The @ on the handle field.

     Rendered as part of the control rather than expected as a keystroke: a handle
     is written with one everywhere else in the product, and a field that silently
     refuses the character somebody has been taught to type is a trap.

     The sigil sits inside the field's box, so the box has to be the thing that
     draws the border. The input's own border is dropped and the wrapper takes it
     over, including the focus and invalid states, which are read off the input
     with :has() so there is one source of truth for each.
     ------------------------------------------------------------------------- */
  .one-auth__at {
    display: flex;
    align-items: center;
    padding-inline-start: var(--sp-4);
    border: 1px solid var(--bh-hairline);
    border-radius: var(--r-md);
    background: var(--bh-surface-1);
    transition: border-color var(--dur-instant) var(--ease-human);
  }

  .one-auth__at:has(.bh-field__control:focus-visible) {
    border-color: var(--bh-ember);
    background: var(--bh-surface-2);
  }

  .one-auth__at:has(.bh-field__control:user-invalid) {
    border-color: var(--bh-crimson);
  }

  .one-auth__sigil {
    color: var(--bh-titanium);
    font-family: var(--ff-evidence);
    user-select: none;
  }

  .one-auth__at .bh-field__control {
    padding-inline-start: var(--sp-1);
    border: 0;
    background: transparent;
  }

  /* The wrapper draws the focus state, so a second ring on the input inside it
     would be two rings on one control. */
  .one-auth__at .bh-field__control:focus-visible {
    background: transparent;
    outline: none;
  }

  @supports (corner-shape: squircle) {
    .one-auth__at { corner-shape: squircle; }
  }

  /* -------------------------------------------------------------------------
     Sent: the address, and asking again.
     ------------------------------------------------------------------------- */
  .one-auth__echo {
    display: block;
    margin-block-start: var(--sp-1);
    color: var(--bh-chrome);
    font-family: var(--ff-evidence);
    /* An address is data and it can be long, so it wraps rather than widening the
       column it sits in. */
    overflow-wrap: anywhere;
  }

  .one-auth__resend {
    display: flex;
    justify-content: center;
    margin-block: var(--sp-5);
  }

  /* The way to the other form. Present on all four screens, because whichever one
     a visitor landed on, it is even odds it was the wrong one. */
  .one-auth__alt {
    margin-block-start: var(--sp-6);
    color: var(--bh-titanium);
    font-size: var(--fs-body-s);
    text-align: center;
  }
}