@layer components {
  /* The task timeline

     what was said and what happened are one stream, not two tabs. Only
     comments are on it in 1.0; events join them in M5, which is why the spacing
     belongs to the stream rather than to the comment.

     A comment is a block with a tint; an event is a line without one. That
     difference is the whole layout. This file used to argue the other way —
     that a card per comment turns a conversation into a stack of receipts —
     and separated the two with rules and space alone. It read as one
     undifferentiated column: the rules said "another entry" without ever
     saying "and this one is somebody talking". The tint is quieter than a rule
     was and says more, and the rules between comments are gone with it.

     Nothing here is raised. --surface-sunk is the same paper the notes editor
     and the composer are on, so a posted comment looks like what it is: the
     thing that was typed into the box at the bottom. */

  .timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
  }

  /* Tight, and the same gap between every kind of entry. The stream is
     something you refer to rather than read through, so it should take as
     little of the page as it can while still separating one turn from the
     next. */
  .timeline__list { display: flex; flex-direction: column; gap: var(--space); }

  .timeline__list:has(*) + .timeline__empty { display: none; }

  .timeline__empty {
    color: var(--ink-faint);
    font-size: var(--text-sm);
    max-width: var(--measure);
  }

  .comment {
    display: flex;
    flex-direction: column;
    /* Enough air under the name for what was said to read as a paragraph
       rather than as the second line of the header. */
    gap: var(--space-2);
    padding: var(--space-2);
    /* The panel corner rather than the field one. What is tinted here is a
       block the size of a menu or a card, and --radius reads as a tighter
       corner the larger the box it is drawn on: at this size it was the only
       surface in the product not agreeing with the rest of them. */
    border-radius: var(--radius-lg);
    background: var(--surface-sunk);
  }

  /* Who said it on the left; what can be done about it and then when, on the
     right. One row and one baseline.

     The timestamp is last on purpose, even though the controls come before it
     in the markup. It is the only thing in the head that is always there, and
     putting it at the end lands it in the same column the events' timestamps
     are in — so the whole stream has one right edge whether an entry is
     somebody talking or the record moving. The controls tuck into the gap in
     front of it, which is empty until they are wanted. */
  .comment__head {
    display: flex;
    align-items: center;
    gap: var(--space);
    flex-wrap: wrap;
  }

  .comment__head > .person { order: 0; }
  .comment__actions { order: 1; margin-left: auto; }
  .comment__meta { order: 2; }

  .comment__author { font-weight: var(--weight-medium); }

  /* Who and when: the name is a person, the timestamp is data, so it is set in
     the mono face like every other thing the system assigned. */
  .comment__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    white-space: nowrap;
  }

  /* The head is one line of 44px controls, so the name and the timestamp beside
     them get the same height to sit in and are centred against it rather than
     against each other. */
  .comment__head > .person,
  .comment__meta { min-height: var(--control-h-sm); align-items: center; }

  .comment__edited { font-style: italic; }

  /* What was said fills the block it is in.

     It used to stop at --measure inside a block that did not, which left a
     comment as a full-width panel with its text ending two thirds of the way
     across and a third of the tint empty beside it. The measure is the right
     rule for a column of prose set on the page itself — a standfirst, the
     legal pages — and the wrong one here for the same reason it is wrong in
     the notes editor: this is not a column on the page, it is the contents of
     a box, and it should fill the box. The box you typed it into spans the
     width; the comment it becomes should not be narrower than it was.

     `p` carries --measure from base.css, so it is turned off rather than left
     unset. */
  .comment__body {
    font-size: var(--text-base);
    line-height: var(--leading-body);
    /* A pasted reference or a long URL must not push the page sideways. */
    overflow-wrap: anywhere;
  }

  .comment__body p { margin: 0 0 var(--space); max-width: none; }
  .comment__body p:last-child { margin-bottom: 0; }

  /* Present but recessive, and never a row of buttons: deleting what a
     colleague said should take a deliberate reach, not a stray click on the way
     past. They come forward when the comment is hovered or anything inside it
     has focus, so the keyboard route is never the hidden one.

     On the head, at the end of it, after the timestamp. They were a row of two
     words under the last line, which put "Delete" in the reading flow of what
     somebody had written and moved every comment's controls to a different
     place down the page depending on how long it was; then they were absolute
     in the corner, which overhung the block and pushed the timestamp 88px in
     from the edge everything else here is ranged against. In the flow they
     hold their space whether they are showing or not, so the timestamp does
     not move when they arrive.

     A 44px tap target around an 18px icon carries 13px of its own air, so the
     gap to the timestamp beside them is already wider than the head's own —
     which is why that gap is --space here and not --space-2. */
  .comment__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--transition);
  }

  .comment:hover .comment__actions,
  .comment:focus-within .comment__actions { opacity: 1; }

  @media (hover: none) {
    .comment__actions { opacity: 1; }
  }

  /* The quiet text button: a label and nothing else. The shortcuts sheet's Close
     is the same treatment, and it used to reach for the comment class to get it —
     which left the comment component owning the look of a button in a dialog it
     knows nothing about. Two names, one rule, neither depending on the other.

     "A label and nothing else" is now literally true: the type comes from the
     .label definition in base.css, which both names join, and what is left here
     is only the undoing of the button. */
  .comment__action,
  .shortcuts__close {
    background: none;
    border: 0;
    padding: 0;
    min-height: auto;
    cursor: pointer;
    text-decoration: none;
  }

  .comment__action,
  .shortcuts__close { transition: color var(--transition), var(--responds); }

  .shortcuts__close:hover { color: var(--ink); text-decoration: underline; }

  /* On a comment it is an icon in a square, not a word: a tap target the size
     of every other one in the product, sitting on the tint rather than in the
     text. Cancel on an open editor is the one that is still a word, because it
     is in a row with Post and a lone × beside a button reads as dismissing the
     button. */
  .comment__action {
    display: inline-grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    border-radius: var(--radius-sm);
    color: var(--ink-faint);
  }

  .comment__action:hover { background: var(--surface-hover); color: var(--ink); }
  .comment__action--danger:hover { color: var(--danger); }
  .comment__action .menu__icon { opacity: 1; width: 1.125rem; height: 1.125rem; }

  .comment__action--text {
    width: auto;
    height: auto;
    padding-inline: var(--space);
    color: var(--ink-faint);
  }
  .comment__action--text:hover { background: none; text-decoration: underline; }

  /* button_to wraps its button in a form, which would otherwise break the row. */
  .comment__actions form { display: contents; }

  /* An event is the record moving rather than somebody talking, so it is set at
     the weight of a caption: one line, no tint, and the actor's face holding
     the column the comments above and below it share. A run of them reads as a
     margin note down the side of the conversation, which is what it is. */
  .event {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    /* Level with a comment's own text, so the actors line up down the stream
       whichever kind of entry they belong to; and the same height as one line
       of it, so a run of events is a margin note rather than a second list. */
    padding: 0 var(--space-2);
    min-height: var(--control-h-sm);
    font-size: var(--text-sm);
    color: var(--ink-muted);
  }

  /* No rules between entries any more. They were there to separate one turn
     from the next when everything on the stream was set on the same paper;
     the comment's tint does that now, and a rule as well is the page saying
     the same thing twice. */

  .event__line { margin: 0; }
  .event__actor { color: var(--ink); font-weight: var(--weight-medium); }

  .event__when {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    white-space: nowrap;
  }
}