/*
    The recent-activity widget (arch §8).

    One line per thing that happened, reading as a sentence: who, what they did,
    what to, and when. Wrapping rather than truncating — a long lore title is
    the most useful word in the row and cutting it off would defeat the point.
*/

.ac-activity {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac-activity-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--gray-600);
}

.dark .ac-activity-row {
    color: var(--gray-400);
}

.ac-activity-who {
    font-weight: 600;
    color: var(--gray-950);
}

.dark .ac-activity-who {
    color: var(--gray-100);
}

.ac-activity-what {
    font-weight: 500;
    color: var(--primary-600);
    text-decoration: none;
}

.ac-activity-what:hover {
    text-decoration: underline;
}

.dark .ac-activity-what {
    color: var(--primary-400);
}

/* What kind of thing it was — quiet, because the title already said it. */
.ac-activity-kind {
    font-size: 0.75rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    background: var(--gray-100);
    color: var(--gray-500);
}

.dark .ac-activity-kind {
    background: var(--gray-800);
    color: var(--gray-400);
}

.ac-activity-changes {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

/* Pushed to the end of the line, which is where a timestamp is looked for. */
.ac-activity-when {
    margin-inline-start: auto;
    font-size: 0.75rem;
    color: var(--gray-400);
    white-space: nowrap;
}

.ac-activity-empty {
    font-size: 0.875rem;
    color: var(--gray-500);
}