/* Audit-trail timeline presentation (M-022, coding-standards §3/§4/§12). Backs the one
   <x-platform::audit-timeline> component every ACL-managed record's detail page hosts, so there is no
   per-module timeline styling to drift. All values are design tokens (tokens.css), so light↔dark is a
   token-scope switch, not per-component CSS. Mobile-first: an entry's head wraps on narrow screens and
   lays out in a row once there is width. No inline styles. */

.platform-audit-timeline__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-md);
}

/* Each entry is a card-muted block with an accent rail on the leading edge, marking the trail's spine. */
.platform-audit-timeline__entry {
    padding: var(--platform-space-sm) var(--platform-space-md);
    border: 1px solid var(--platform-color-border);
    border-inline-start: 3px solid var(--platform-color-accent-strong);
    border-radius: var(--platform-radius-md);
    background: var(--platform-color-surface-muted);
}

.platform-audit-timeline__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--platform-space-sm);
}

.platform-audit-timeline__action {
    font-weight: 600;
    color: var(--platform-color-text);
}

.platform-audit-timeline__actor {
    /* Take the free space so the timestamp sits at the head's trailing end. */
    flex: 1 1 auto;
    min-width: 0;
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-sm);
    word-break: break-word;
}

.platform-audit-timeline__time {
    flex: 0 0 auto;
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-xs);
    white-space: nowrap;
}

.platform-audit-timeline__changes {
    list-style: none;
    margin: var(--platform-space-sm) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-xs);
}

.platform-audit-timeline__change {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--platform-space-xs) var(--platform-space-sm);
    font-size: var(--platform-font-size-sm);
}

.platform-audit-timeline__field {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--platform-color-text-muted);
}

.platform-audit-timeline__field::after {
    content: ":";
}

.platform-audit-timeline__values {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--platform-space-xs);
    min-width: 0;
}

.platform-audit-timeline__old {
    color: var(--platform-color-text-muted);
    text-decoration: line-through;
    word-break: break-word;
}

.platform-audit-timeline__arrow {
    flex: 0 0 auto;
    color: var(--platform-color-text-muted);
}

.platform-audit-timeline__new {
    color: var(--platform-color-text);
    word-break: break-word;
}

.platform-audit-timeline__more {
    margin-top: var(--platform-space-md);
    display: flex;
    justify-content: center;
}

.platform-audit-timeline__empty {
    margin: 0;
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-sm);
}