@layer components {
  /* The join link

     A URL is a long, unbreakable, monospaced thing and the page it sits on is
     not wide. So it gets a field of its own rather than a line of prose: it
     scrolls inside itself, it can be selected in one gesture, and it cannot
     push the panel around it wider than the column. */

  .joinlink {
    display: flex;
    align-items: center;
    gap: var(--space);
  }

  /* The URL and the button that copies it are one control on a phone, and one
     control 340px wide is a URL cut after the host. So they stack, and Copy
     runs the width of the field it belongs to rather than sitting in a corner
     of it. */
  @media (max-width: 40rem) {
    .joinlink { flex-direction: column; align-items: stretch; }
  }

  /* A step below the secondary size, which is one of the few places in this
     product that earns it: this is a value to be copied rather than prose to
     be read, and the smaller type is what fits the whole URL in the field on a
     normal host name instead of cutting it mid-code. It still scrolls if the
     host is long — hence a real input, and hence selecting on click.

     Two classes for the same reason capture.css needs them: this field is an
     .input as well, and on equal specificity the later file wins. joinlink.css
     is read before forms.css, so the smaller type was being taken back by
     .input. The paper and the line are the shared field's — this is a text box
     like any other and the only thing unusual about it is what is written in
     it. */
  .input.joinlink__url {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    cursor: text;
  }

  .joinlink__state {
    flex-wrap: wrap;
    gap: var(--space) var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-faint);
  }

  /* Spent is a fact, not a failure — it is what the limit was for. Said in the
     warning colour rather than the danger one: nothing is broken, the link has
     simply finished. */
  .joinlink__count--spent { color: var(--warn); }

  .joinlink__limit { flex: none; }

  /* Wide enough for the cap and no wider. A number field sized like a text
     field makes the row read as a form somebody has to fill in. */
  .joinlink__number { width: 5rem; }
}