/* --- The web-address field and its drawer (shared/_address_field) ---
   Variant H of the url-entry-feedback prototype (url-entry-tolerance ticket
   06, prototype_url_entry.css at 0c8eb6b1): how the server read the address
   hangs off the field as a drawer, indented a side and sharing the field's
   bottom edge. The drawer's edge is the field's own border; only its fill
   carries the tone (--ok pass, --ask degraded, --stop fail). The field
   itself is never toned, and there is no chevron: a pill names the act.

   The indent is 0.7rem, the field's own text inset, where the prototype had
   0.75rem off the spacing scale, so the drawer's text starts under the
   field's.

   The whole drawer is one <button> when it offers something (--acts). The
   field sits over the drawer's top edge (z-index 1), so a focused drawer
   draws its ring inside its own box and rises over the field: a whole ring
   on all four sides, with no extra markup.

   The phone field changing a User Number draws the same drawer
   (shared/_user_number, user_number.css), so the drawer's rules are keyed to
   both fields' roots. They stay in this file, which the stylesheets' order
   has always loaded them from. */

.address-field {
  input[type="text"] {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
  }
}

:is(.address-field, .user-number) {
  .field-drawer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-sizing: border-box;
    width: calc(100% - 1.4rem);
    margin: -1px 0.7rem 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-top: none;
    background: var(--tone-bg);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.35;
    text-align: left;
    color: var(--color-text);

    & + .field-drawer {
      margin-top: 0;
    }

    /* A mark sits in the drawer's own tone: a light tint and an underline,
       not a solid block. An empty change (a space or dot removed) is a thin
       bar where it was. */
    mark {
      padding: 0 1px;
      border-radius: 2px;
      background: color-mix(in srgb, var(--color-degraded) 16%, transparent);
      color: inherit;
      text-decoration: underline;
      text-decoration-color: var(--color-degraded);
      text-decoration-thickness: 2px;
      text-underline-offset: 0.2em;
    }

    mark.field-drawer__gap {
      display: inline-block;
      width: 2px;
      height: 1em;
      padding: 0;
      background: var(--color-degraded);
      vertical-align: -0.15em;
    }
  }

  /* --ok, --ask and --stop set --tone and --tone-bg in application.css's
     status tone tokens, beside .status-tone--pass/degraded/fail. */
  .field-drawer--stop { color: var(--color-fail-dark); }

  .field-drawer--acts {
    cursor: pointer;

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

    &:focus-visible {
      position: relative;
      z-index: 2;
      outline-offset: -2px;
    }
  }

  .field-drawer__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .field-drawer__lead {
    font-size: 0.75rem;
    color: var(--color-text-muted);
  }

  .field-drawer__address {
    font-size: 1rem;
    font-weight: 600;
  }

  /* A .status-pill (application.css) filled with the drawer's tone, so it
     reads as the thing to press. */
  .field-drawer__pill {
    flex: none;
    background: var(--tone);
    color: #fff;
  }

  /* Keep, under a .com guess: a real submit drawn as a link. */
  .field-drawer__aside {
    margin: 0.3rem 0.7rem 0;
    font-size: 0.8rem;

    button {
      padding: 0;
      border: none;
      background: none;
      font: inherit;
      color: var(--color-accent-dark);
      text-decoration: underline;
      cursor: pointer;
    }
  }
}