/* ===========================================================================
   Profile/Index.cshtml.

   This file was fourteen lines, all of them restating layout.css with different
   numbers, which is why a profile looked like a page from a different product. What
   it holds now is the header - a spectrum disc, the handle, and the level as a chip -
   and nothing else, because the rest of the page is .bh-empty and .bh-chip.
   =========================================================================== */

@layer components {

  .one-profile {
    max-inline-size: var(--measure);
  }

  .one-profile__head {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding-block-end: var(--sp-5);
    border-block-end: 1px solid var(--bh-hairline);
  }

  /* Larger than the feed's disc: here the person is the subject of the page rather
     than the author of a row in a list. */
  .one-profile__avatar {
    --bh-avatar-size: 72px;

    font-size: var(--fs-h3);
  }

  .one-profile__id {
    display: grid;
    gap: var(--sp-3);
    min-inline-size: 0;
  }

  .one-profile__handle {
    margin: 0;
    /* Mono, because a handle is an identifier and every identifier in this product is
       set in the evidence voice. It is also the shape that makes a lookalike name
       visible: proportional type hides the difference between l and I. */
    font-family: var(--ff-evidence);
    font-size: var(--fs-h2);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  /* The limit note is page content rather than a replacement for it, so it does not
     get the empty state's full vertical drama. */
  .one-profile__limit {
    margin-block-start: var(--sp-6);
    padding-block: var(--sp-5);
  }
}