@layer components {
  /* The inbox

     Not a list of tasks, and it must not look like one: these are things that
     happened, and the task is the thing they happened to. So the sentence leads
     and the task sits under it in the reference rail's own type, which is the
     one visual cue that says "this row points somewhere else". */

  .notification {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    margin-inline: calc(var(--space-2) * -1);
    border-radius: var(--radius);
    transition: background var(--transition);
  }

  .notification:hover { background: var(--surface-hover); }
  .notification:has(.notification__open:focus-visible) { background: var(--surface-hover); }

  /* Unread is a mark in the margin rather than a background wash: a list where
     most rows are tinted has told you nothing about any of them. */
  .notification--unread::before {
    content: "";
    position: absolute;
    left: calc(var(--space) * -1);
    top: 50%;
    width: 0.4375rem;
    height: 0.4375rem;
    margin-top: -0.21875rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
  }

  .notification__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }

  .notification__line { margin: 0; font-size: var(--text-base); }
  .notification--unread .notification__line { font-weight: var(--weight-medium); }

  .notification__task {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The count and the time, on one line in the column they share. Stacked, the
     pill floated above a long relative time and read as a badge on nothing;
     beside it, it is plainly a number belonging to the row. */
  .notification__aside {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space);
  }

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

  /* How many changes are folded into the one line. It only exists above
     one, so it never says "1" and never has to be explained; and it is in the
     row rather than on the face in the masthead, because what it counts is
     this task's changes and not the size of the inbox. */
  .notification__count {
    min-width: 1.5rem;
    padding: 0 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--accent-sunk);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* The whole row is the button, and the button is what marks it read — an
     inbox should empty by being read, not by being tidied. The label is there
     for anyone not looking at the screen. */
  .notification__open {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    border-radius: inherit;
    cursor: pointer;
    font-size: 0;
    color: transparent;
  }

  .notification form { display: contents; }

  /* The one press on the row that is not "take me there", so it has to sit
     above the row link rather than under it — and it is a real 44px target,
     which is the floor everything clickable in this product keeps.

     Quiet until the row is hovered or something in it has focus: an inbox
     where every line carries a visible button is a toolbar, and the row's own
     job is to be read. */
  .notification__mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition), background var(--transition),
                color var(--transition), var(--responds);
  }

  .notification:hover .notification__mark,
  .notification:focus-within .notification__mark { opacity: 1; }

  .notification__mark:hover { background: var(--surface-hover); color: var(--ink); }
  .notification__mark:focus-visible { opacity: 1; }

  /* Touch has no hover to reveal it, and a control that only appears for a
     pointer is a control half the people using this cannot reach. */
  @media (hover: none) {
    .notification__mark { opacity: 1; }
  }

  /* The heading and the one action that belongs to the whole list. Aligned to
     the top rather than centred: the header is two lines and Mark all read
     belongs beside the title, not halfway down the standfirst. */
  .notification__head { align-items: flex-start; gap: var(--space-3); }

  /* Newer and Older, when there are any. */
  .notification__pager:empty { display: none; }
  .notification__pager { justify-content: flex-end; gap: var(--space); }
  .notification__pager:has(.button:nth-child(2)) { justify-content: space-between; }

  /* The dot on your own face in the masthead. It says "there is something" and
     nothing more; the count is on the menu item underneath. */
  .masthead__you { position: relative; }

  .masthead__dot {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
    border: 2px solid var(--canvas);
  }
}