@layer components {
  /* The inbox (D-12)

     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;
    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;
  }

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

  /* 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 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; }

  /* Arriving in the inbox, like a task row arrives in a list — these are rows
     in a list of things that happened, and a notification turning up while you
     are reading the page is the one moment this page exists for. */
  @media (prefers-reduced-motion: no-preference) {
    .notification.arriving { animation: task-in var(--transition-enter); }
  }

  @media (prefers-reduced-motion: reduce) {
    .notification.arriving { animation: fade-in var(--transition-enter); }
  }

  .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);
  }

  /* One scale, and then it holds. It appears in the corner of the screen while
     you are reading something else, so it has to catch the eye once — and only
     once. A badge that keeps pulsing is a badge people learn to cover with a
     thumb. The arrivals controller on the button is what tells this apart from
     the dot simply being there when the page loaded. */
  @media (prefers-reduced-motion: no-preference) {
    .masthead__dot.arriving { animation: dot-in var(--transition-enter); }
  }

  @media (prefers-reduced-motion: reduce) {
    .masthead__dot.arriving { animation: fade-in var(--transition-enter); }
  }

  @keyframes dot-in {
    from { scale: 0; }
    60%  { scale: 1.25; }
    to   { scale: 1; }
  }
}