@layer components {
  /* What needs somebody, as one panel of ruled rows.
   *
   * The shape this replaced was a `.callout` per item, and the reason it had to
   * go is arithmetic rather than taste: a callout is a full-width tinted block
   * with a title, a paragraph and a button in it, so three of them is a screenful
   * and twenty-nine is a scroll. A channel with twenty-nine listings short of a
   * photo is the ordinary case, not the edge one.
   *
   * So it is a list. One heading saying how many there are, one row each saying
   * what and offering the way in, and a rule between them — which is
   * `.conversation-about`'s decision in a different place: the panel is already a
   * surface, so a tinted block inside it is a box inside a box.
   *
   * It is the surface itself rather than something standing on one: `.panel` is
   * composed at the call site the way the table's is, so this owns the ruling and
   * the rhythm and nothing about elevation.
   */
  .attention {
    --attention-padding-block: var(--space);
    --attention-padding-inline: var(--space-and-half);
    --attention-mark-size: 0.5rem;
  }

  /* The heading, and at the far end when we last looked.
   *
   * Those two belong on one line because they qualify each other: "2 things need
   * your attention" is a claim about a moment, and half of what it is counting
   * is read off a stored copy of what the channel told us. A count with no
   * timestamp beside it reads as live.
   */
  .attention__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space);
    padding: var(--attention-padding-block) var(--attention-padding-inline);
    border-block-end: var(--border-faint);
  }

  .attention__title {
    display: flex;
    align-items: center;
    gap: var(--space-three-quarters);
    margin: 0;
    font-size: var(--text-medium);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
  }

  /* A dot rather than a badge or an icon. The heading already says what and how
     many; this only says how loudly, and it takes its colour from the worst thing
     in the list — amber for something nobody has started, red for something that
     has stopped. */
  .attention__mark {
    flex: none;
    inline-size: var(--attention-mark-size);
    block-size: var(--attention-mark-size);
    border-radius: var(--radius-circle);
    background: var(--color-warning);
  }

  .attention__mark--negative {
    background: var(--color-negative);
  }

  .attention__meta {
    color: var(--color-ink-soft);
    font-size: var(--text-small);
    white-space: nowrap;
  }

  /* One row: what it is, why, and the way in. The action is pushed to the end so
     a column of them lines up and can be reached without reading a word. */
  .attention__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    padding: var(--attention-padding-block) var(--attention-padding-inline);
  }

  .attention__item + .attention__item {
    border-block-start: var(--border-faint);
  }

  .attention__what {
    display: grid;
    gap: var(--space-eighth);
    min-inline-size: 0;
  }

  .attention__name {
    font-weight: var(--weight-semibold);
    text-wrap: pretty;
  }

  /* Why, in the operator's words. Quiet, because the name above it is what the
     eye is scanning and this is the sentence it stops for. */
  .attention__detail {
    color: var(--color-ink-soft);
    font-size: var(--text-normal);
    text-wrap: pretty;
  }

  .attention__action {
    flex: none;
  }

  /* The way to the rest of them, where the list is longer than it shows. Ruled
     off like a row rather than sitting inside one, because it is about the list
     and not about any item in it.

     A div rather than a paragraph, and that is the whole of why this row was
     twice the height of the ones above it: a <p> brings the browser's own block
     margins, which stacked on top of this padding. Tighter than a row as well —
     it holds one small button rather than two lines of text. */
  .attention__more {
    display: flex;
    justify-content: center;
    padding: var(--space-half) var(--attention-padding-inline);
    border-block-start: var(--border-faint);
  }

  @media (width < 40rem) {
    .attention {
      --attention-padding-inline: var(--space);
    }

    /* The action drops under what it is about rather than squeezing the name it
       is beside into two words a line. */
    .attention__item {
      flex-direction: column;
      align-items: stretch;
    }
  }
}