/* --- The User Number's control (shared/_user_number) ---
   Variant F of the confirmed-field prototype (.scratch/confirmed-field).

   A saved number is Confirmed, so it is drawn locked: the phone field's own
   shell, greyed, keeping its flag and calling code, with the pencil and then
   the tick inside. The tick sits last, in line with the email field's, so it
   never moves when the pencil comes and goes. The locked box holds the live
   field's caret space, so the digits start where the live field's do and
   nothing shifts when the box opens.

   Opened, the field is live and everything else hangs off it in the address
   field's drawer (.field-drawer, address_field.css): Send code, then the
   code itself, each drawer the same height on a wide screen so nothing below
   moves between steps. Each drawer's × takes its own tone. A wrong code puts
   the field-error ring on the number's field, not on the code box; success
   pulses a green ring round the locked box instead of marking the digits.

   The pencil never fills behind itself (a fill reads poorly on the greyed
   box): hover and focus turn it the full accent, larger and heavier. Keyboard
   focus rings the whole box, as focus on any input does, whether it is on
   the pencil or, with the Switch off and no pencil, on the box itself. */

/* Steps: only the parts drawn for the current step show. */
.user-number[data-user-number-step-value="confirmed"] [data-step-shows]:not([data-step-shows~="confirmed"]),
.user-number[data-user-number-step-value="editing"] [data-step-shows]:not([data-step-shows~="editing"]),
.user-number[data-user-number-step-value="removing"] [data-step-shows]:not([data-step-shows~="removing"]),
.user-number[data-user-number-step-value="code"] [data-step-shows]:not([data-step-shows~="code"]) {
  display: none;
}

.user-number {
  /* Its narrow shape below answers to the control's own width, not the
     screen's: the preferences page draws it in a half-width panel even on a
     wide screen. */
  container-type: inline-size;

  /* The locked box. */
  .user-number-box {
    align-items: center;
    background: var(--color-bg);

    &[data-action] {
      cursor: pointer;

      &:hover {
        border-color: var(--color-warm-border-strong);
      }
    }

    &:focus-visible,
    &:has(.user-number-pencil:focus-visible) {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
      border-color: var(--color-accent);
    }

    .phone-field-divider {
      align-self: stretch;
    }

    .phone-field-code {
      color: var(--color-text-muted);
    }
  }

  .user-number-country {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.95rem;
  }

  .user-number-caret {
    visibility: hidden;
  }

  .user-number-digits {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 auto 0 0.7rem;
    padding: 0.1rem 0;
    overflow: hidden;
    border-radius: 4px;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .user-number-pencil {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;

    svg {
      transition: transform 0.12s var(--ease-out);
    }

    &:focus-visible {
      outline: none;
    }
  }

  .user-number-pencil:is(:hover, :focus-visible),
  .user-number-box[data-action]:hover .user-number-pencil {
    color: var(--color-accent);

    svg {
      transform: scale(1.2);
      stroke-width: 2.5;
    }
  }

  .user-number-tick {
    margin: 0 0.7rem 0 0.3rem;
  }

  /* The live field, and the drawers under it. */
  .user-number-live > .form-field {
    margin-bottom: 0;
  }

  .user-number-live .phone-field-shell {
    position: relative;
    z-index: 1;
  }

  /* Every drawer tucks under the field, a second one included (the address
     field's `+ .field-drawer` drops it). */
  .user-number-live .field-drawer,
  .user-number-done {
    margin-top: -1px;
  }

  .user-number-pill {
    border: 0;
    font-family: inherit;
    cursor: pointer;

    &:hover {
      filter: brightness(0.92);
    }
  }

  .user-number-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: -0.4rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: color-mix(in srgb, var(--tone) 70%, var(--color-text-muted));
    cursor: pointer;

    &:hover {
      background: color-mix(in srgb, var(--tone) 16%, transparent);
      color: var(--tone);
    }
  }

  .user-number-code {
    gap: 0.8rem;

    /* The code's label is the drawer's own words, so it reads as they do
       rather than as a .form-field label above a control. */
    label.field-drawer__lead {
      display: inline;
      margin: 0;
      font-weight: inherit;
    }
  }

  /* input. and the drawer's class: the control is a .form-field, whose
     input[type="text"] rule would otherwise stretch the box across the
     drawer. */
  .user-number-code input.user-number-codebox {
    flex: none;
    box-sizing: border-box;
    width: 7rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font: inherit;
    font-size: 1rem;
    letter-spacing: 0.25em;
    font-variant-numeric: tabular-nums;

    &::placeholder {
      letter-spacing: normal;
    }
  }

  .user-number-resend {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.8rem;
    color: var(--color-accent-dark);
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;

    &:disabled {
      color: var(--color-text-muted);
      text-decoration: none;
      cursor: default;
    }
  }

  /* A refused number or a wrong code is an error on the number's own field:
     the field-error ring (.form-field--error), and none on the code box. */
  &[data-user-number-step-value="editing"]:has(.field-drawer--stop[data-step-shows~="editing"]),
  &[data-user-number-step-value="code"]:has(.field-drawer--stop[data-step-shows~="code"]) {
    .user-number-live .phone-field-shell {
      outline: var(--focus-ring);
      outline-color: var(--color-fail);
      outline-offset: var(--focus-ring-offset);
      border-color: var(--color-fail);
    }

    .user-number-codebox:is(:focus, :focus-visible) {
      outline: none;
    }
  }

  /* Just confirmed: the box pulses green and says so for a moment, in place
     of the hint. The drawer holds the others' height on a wide screen. */
  .user-number-done {
    display: none;
    min-height: calc(1.75rem + 1rem + 1px);
  }

  &.is-just-confirmed {
    .user-number-done {
      display: flex;
    }

    > .form-hint {
      display: none;
    }

    .user-number-box {
      animation: user-number-confirmed 2.4s var(--ease-out);
    }
  }

  /* A narrow control: a phone, or the preferences page's panel. Both drawers
     take one shape, the words and the × on top and one full-width control
     under them, so moving between them changes only that control; the
     code's Send again link drops below its box, which a phone's thumb
     needs the full width of. The success drawer keeps its own height. A
     24px tick leaves a number like (908) 240-9766 short, so the room comes
     off the right of the box, and the caret goes from the locked box and
     the live field alike, keeping their digits in line. The flag still
     opens the picker. */
  @container (max-width: 28rem) {
    .user-number-live .field-drawer {
      flex-wrap: wrap;
      gap: 0.4rem 0.6rem;

      .field-drawer__text {
        order: -2;
        flex: 1 1 calc(100% - 2.5rem);
      }

      .user-number-close {
        order: -1;
      }
    }

    .user-number-pill {
      flex: 1 1 auto;
      height: 1.75rem;
    }

    .user-number-code input.user-number-codebox {
      flex: 1 1 100%;
      width: auto;
      min-width: 0;
    }

    .user-number-done {
      min-height: 0;
    }

    /* A fixed right margin replaces the auto one that pushes the pencil and
       tick to the end, so the digits grow into that room instead. */
    .user-number-digits {
      flex-grow: 1;
      margin-right: 0.2rem;
    }

    .user-number-pencil {
      width: 1.3rem;
    }

    .user-number-tick {
      margin: 0 0.3rem 0 0.1rem;
    }

    .user-number-caret,
    .phone-field-chip .phone-field-caret {
      display: none;
    }
  }
}

@keyframes user-number-confirmed {
  0%, 100% {
    outline: 2px solid transparent;
    outline-offset: var(--focus-ring-offset);
  }

  15%, 45% {
    outline: 2px solid var(--color-pass);
    outline-offset: var(--focus-ring-offset);
  }

  30% {
    outline: 2px solid color-mix(in srgb, var(--color-pass) 35%, transparent);
    outline-offset: var(--focus-ring-offset);
  }
}