/*
 * The notifications page.
 *
 * ### Read and unread
 *
 * Unread rows are marked with a tinted surface and a bar on the leading edge; read rows are plain. The
 * difference is deliberately not colour alone — the bar carries it too — because "which of these have I
 * already seen" is exactly the distinction a reader who cannot tell the two tints apart still needs.
 *
 * A row that has just been marked read loses the class rather than being removed from the list. Removing it
 * would make the thing the reader pressed vanish, and the list would then be missing the row they were about
 * to open (§64).
 *
 * ### The rows are `notification-item`, not `notification`
 *
 * `components/notifications.css` already owns `.notification`: the flash message at the top of a page and the
 * toast the script raises. Those announce what just happened to the reader's own action; these are stored
 * records of what other people did. Reusing the name would give every row a flash message's padding, tint and
 * coloured edge.
 */

.notifications {
    max-width: 42rem;
    margin-inline: auto;
    padding-top: var(--space-2);
}

.notifications__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.notifications__title {
    margin: 0;
}

/* "3 unread" or "nothing unread": the same element in both cases, so the script has one place to write the
   count into and the sentence never has to be built out of fragments. */
.notifications__unread {
    margin: 0;
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

.notifications__read-all {
    margin: 0;
}

.notification-list {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.notification-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: var(--border-width) solid var(--colour-border);
    border-inline-start: var(--space-1) solid transparent;
    border-radius: var(--radius-md);
    background-color: var(--colour-surface);
}

.notification-item--unread {
    background-color: var(--colour-primary-surface);
    border-inline-start-color: var(--colour-primary);
}

.notification-item__link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* A notification whose subject has gone — a deleted post, a closed account — keeps its text and loses its
   link. It is not styled as broken: the event still happened, and there is simply nowhere to go. */
.notification-item__link--dead {
    cursor: default;
}

.notification-item__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.notification-item__message {
    line-height: var(--leading-tight);
    overflow-wrap: break-word;
}

.notification-item__read {
    margin: 0;
    margin-inline-start: auto;
}

.notification-item__link:hover .notification-item__message,
.notification-item__link:focus-visible .notification-item__message {
    text-decoration: underline;
}