@layer components {

  
  .notification-days { display: flex; flex-direction: column; gap: var(--space-3); }

  .notification-day { display: flex; flex-direction: column; gap: calc(var(--space) / 2); }

  .notification-day__label { padding-inline: 0; }

  .notification-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .notification {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto var(--control-h-sm);
    grid-template-areas:
      "face line aside mark"
      "face task aside mark";
    align-items: center;
    column-gap: var(--space-2);
    row-gap: 0;
    padding: var(--space) 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); }

  .notification__face { grid-area: face; position: relative; display: inline-flex; }

  .notification__reason {
    position: absolute;
    
    right: -0.4375rem;
    bottom: -0.4375rem;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-muted);
    box-shadow: 0 0 0 2px var(--canvas);
    transition: box-shadow var(--transition);
  }

  .notification__reason .menu__icon { width: 0.75rem; height: 0.75rem; }

  .notification:hover .notification__reason,
  .notification:has(.notification__open:focus-visible) .notification__reason {
    box-shadow: 0 0 0 2px var(--surface-hover);
  }

  .notification__line {
    grid-area: line;
    align-self: end;
    margin: 0;
    font-size: var(--text-base);
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  
  .notification--unread .notification__line { color: var(--ink); font-weight: var(--weight-medium); }

  .notification__task {
    grid-area: task;
    align-self: start;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space);
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
  }

  .notification:not(.notification--unread) .notification__task { color: var(--ink-faint); }

  .notification__task .task__ref { flex: none; }

  .notification__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .notification__aside {
    grid-area: aside;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space);
  }

  
  .notification__when {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
    white-space: nowrap;
  }

  .notification--unread .notification__when { color: var(--ink-muted); }

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

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

  
  .notification--unread::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--space-2) + (var(--control-h-sm) / 2) - 0.25rem);
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.25rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
    transition: opacity var(--transition);
  }

  .notification--unread:hover::after,
  .notification--unread:focus-within::after { opacity: 0; }

  .notification__mark {
    grid-area: mark;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    border: var(--line-w-control) solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition), background var(--transition),
                border-color var(--transition), color var(--transition), var(--responds);
  }

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

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

  
  @media (hover: none) {
    .notification__mark { opacity: 1; }
    .notification--unread::after { display: none; }
  }

  
  @media (width <= 48rem) {
    .notification {
      grid-template-columns: 2.25rem minmax(0, 1fr) auto var(--control-h-sm);
      grid-template-areas:
        "face line line mark"
        "face task aside mark";
      column-gap: var(--space);
    }

    .notification__line { white-space: normal; overflow: visible; }
  }

  .notification__head { align-items: flex-start; gap: var(--space-3); }

  .notification__filter { display: flex; gap: var(--space); }

  .notification__actions { flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

  
  @media (width <= 48rem) {
    .notification__actions { justify-content: flex-start; }
  }

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

  .masthead__you { position: relative; }

  .masthead__dot {
    position: absolute;
    top: 0.4375rem;
    right: 0.4375rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--canvas);
  }

  .masthead__you:hover .masthead__dot { box-shadow: 0 0 0 2px var(--surface-hover); }
}