/* A runner's profile (/runners/:handle), on the sheet edge to edge: the
   handle over the recent runs (a parts list) on the left, the stats (title-
   block cells) and the runs-by-CAD bar on the right. Below 48rem it is one
   column: handle, stats, runs. */
@layer components {
  .profile {
    display: grid;
    grid-template-areas: "head" "stats" "runs";
    grid-template-columns: minmax(0, 1fr);
    font-variant-numeric: tabular-nums;
  }

  .profile__head {
    grid-area: head;
    padding: calc(var(--block-space) * 1.125) calc(var(--inline-space) * 2.5);
    border-block-end: var(--rule-width) solid var(--color-rule);
  }

  /* A name, in its own case (as in the header), not a label. A step
     smaller on a phone, so 20 characters fit on one line. */
  .profile__handle {
    margin-block-start: calc(var(--block-space) * 0.25);
    font-size: var(--text-xl);
    text-transform: none;
    overflow-wrap: anywhere;
  }

  .profile__account {
    margin-block-start: calc(var(--block-space) * 0.5);
    font-size: var(--text-sm);
  }

  .profile__stats {
    grid-area: stats;
    border-block-end: var(--rule-width) solid var(--color-rule);
  }

  /* Four cells, two by two, split by hairlines. */
  .profile__cells {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    .title-block__cell {
      border-block-end: var(--rule-width) solid var(--color-hairline);

      &:nth-child(odd) {
        border-inline-end: var(--rule-width) solid var(--color-hairline);
      }
    }
  }

  .profile__stat {
    margin-block-start: calc(var(--block-space) * 0.375);
    font-size: var(--text-2xl);
    font-stretch: var(--stretch-condensed);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
  }

  .profile__stat--rank {
    color: var(--color-accent);
  }

  /* The bar is drawn from the shares the legend states in words; the
     segments step down in weight, split by a gap of trough. */
  .profile__cads {
    display: grid;
    gap: calc(var(--block-space) * 0.625);
  }

  .profile__cads h2 {
    font-stretch: var(--stretch-normal);
  }

  .profile__bar {
    display: flex;
    gap: var(--rule-width);
    block-size: 0.75rem;
    background-color: var(--color-inset);
  }

  .profile__share {
    inline-size: var(--share);
    background-color: var(--color-hairline);

    &:nth-child(1) {
      background-color: var(--color-ink-dim);
    }

    &:nth-child(2) {
      background-color: var(--color-rule);
    }
  }

  .profile__legend {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--block-space) * 0.25) calc(var(--inline-space) * 1.75);
    color: var(--color-ink-dim);
    padding: 0;
    font-size: var(--text-sm);
    list-style: none;
  }

  .profile__runs {
    grid-area: runs;
    container-type: inline-size;
    min-inline-size: 0;
  }

  /* Padded outside the label, so its ch is the head's and the edges line
     up. */
  .profile__runs-head {
    padding: calc(var(--block-space) * 0.625) calc(var(--inline-space) * 2.5) 0;

    h2 {
      font-stretch: var(--stretch-normal);
    }
  }

  .profile__list {
    th {
      color: var(--color-ink-dim);
    }

    /* The list's text is smaller, so its ch is too: 2.75 of them meet the
       head's 2.5. */
    th:first-child,
    td:first-child {
      inline-size: 4ch;
      padding-inline: calc(var(--inline-space) * 2.75) 0;
    }

    th:last-child,
    td:last-child {
      padding-inline-end: calc(var(--inline-space) * 2.75);
      text-align: end;
    }

    td[colspan] {
      text-align: start;
    }
  }

  .profile__date {
    white-space: nowrap;
  }

  .profile__practice,
  .profile__voided {
    font-size: var(--label-size);
  }

  .profile__voided {
    color: var(--color-behind);
  }

  /* A row's note (why it was voided, or its video link form) reads as part
     of the row above, so no hairline between them. */
  .profile__list tr:has(+ .profile__note) td {
    border-block-end: 0;
  }

  .profile__note td {
    padding-block-start: 0;
  }

  .profile__void-reason {
    overflow-wrap: anywhere;

    .label {
      margin-inline-end: calc(var(--inline-space) * 0.5);
      color: var(--color-ink-dim);
    }
  }

  .profile__empty {
    padding: calc(var(--block-space) * 0.625) calc(var(--inline-space) * 2.5);
    color: var(--color-ink-dim);
    font-size: var(--text-sm);
  }

  .profile__cads .profile__empty {
    padding: 0;
  }

  /* On a phone the cells between the edges pad less, as a board's do, so a
     long title, the rank and the time fit. (The edge cells' rules above are
     more specific, so the edges stay lined up.) */
  @container (width < 30rem) {
    .profile__list {
      th,
      td {
        padding-inline: calc(var(--inline-space) * 0.75);
      }
    }
  }

  /* From 48rem the profile fills the sheet, so the stats' rule runs to its
     foot. */
  @media (width >= 48rem) {
    .sheet__main:has(> .profile) {
      display: flex;
      flex-direction: column;
    }

    .profile {
      flex-grow: 1;
      grid-template-areas: "head stats" "runs stats";
      grid-template-columns: minmax(0, 1fr) 24rem;
      grid-template-rows: auto 1fr;
    }

    .profile__handle {
      font-size: var(--text-2xl);
    }

    .profile__stats {
      border-block-end: 0;
      border-inline-start: var(--rule-width) solid var(--color-rule);
    }
  }
}