@layer components {
    /* Per-document activity log ("Activity" section on the document details page). */
    .app-activity {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .app-activity__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
        flex-wrap: wrap;
    }

    .app-activity__title {
        margin: 0;
    }

    .app-activity__subtitle {
        color: var(--color-ink-mute);
        font-size: var(--fs-ui-sm);
    }

    .app-activity__alert {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--color-ink-soft);
        font-size: var(--fs-ui-sm);
        cursor: pointer;
    }

    .app-activity__counts {
        display: grid;
        /* Uniform cards sized to the widest label — the product name (AppName) shown on
           the two platform cards. 136px fits "Africa Documents"; if a tenant's AppName is
           much longer/shorter, revisit this width. Packs left; wraps when space is tight. */
        grid-template-columns: repeat(auto-fit, 136px);
        justify-content: start;
        gap: var(--space-2);
    }

    /* Compact count card — label ABOVE the number, ~70px tall, tinted per category. */
    .app-activity-count {
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        background: var(--color-surface-alt);
    }

    .app-activity-count__label {
        display: flex;
        align-items: flex-start;
        gap: var(--space-1);
        margin: 0;
        min-height: 32px;
        font-size: var(--fs-ui-sm);
        line-height: 1.3;
        color: var(--color-ink-soft);
    }

    /* Leading actor glyph — sized to the label (not the count), inherits the label colour so
       the tinted You/Staff cards tint the icon too. Glyph comes from the view's ActorIcon() map. */
    .app-activity-count__label i {
        flex-shrink: 0;
        line-height: inherit;
        color: inherit;
    }

    .app-activity-count__num {
        margin: var(--space-1) 0 0;
        font-size: var(--fs-h5, 1.25rem);
        font-weight: 500;
        line-height: 1.1;
        color: var(--color-ink);
    }

    /* Zero reads muted so a screen of zeros doesn't look like a render failure. */
    .app-activity-count--zero .app-activity-count__num {
        color: var(--color-ink-mute);
        font-weight: 400;
    }

    /* You — green tint. */
    .app-activity-count--you {
        background: var(--color-success-soft);
    }
    .app-activity-count--you .app-activity-count__label {
        color: var(--color-success-deep);
    }
    .app-activity-count--you .app-activity-count__num {
        color: var(--color-success-deep);
    }

    /* Africa Documents staff — amber tint; a zero stays legible amber, not grey. */
    .app-activity-count--staff {
        background: var(--color-warn-soft);
    }
    .app-activity-count--staff .app-activity-count__label {
        color: var(--color-warn-deep);
    }
    .app-activity-count--staff .app-activity-count__num {
        color: var(--color-warn-deep);
    }
    .app-activity-count--staff.app-activity-count--zero .app-activity-count__num {
        color: var(--color-warn);
    }

    .app-activity__note {
        margin: 0;
        color: var(--color-ink-mute);
        font-size: var(--fs-ui-sm);
    }

    .app-activity__filters {
        margin-top: var(--space-2);
    }

    /* Filter status bar — always present so there's no layout jump. */
    .app-activity__status {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        background: var(--color-surface-alt);
        color: var(--color-ink-soft);
        font-size: var(--fs-ui-sm);
    }

    .app-activity__status--filtered {
        background: var(--color-accent-soft);
        color: var(--color-accent-deep);
    }

    .app-activity__clear {
        margin-left: auto;
    }

    .app-activity__month {
        margin-top: var(--space-3);
        color: var(--color-ink-mute);
        font-size: var(--fs-ui-sm);
    }

    .app-activity-row {
        display: flex;
        gap: var(--space-3);
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-line);
    }

    /* Bare glyph — no circle/background (dropped as visual noise). Fixed box keeps the six
       icons aligned down the column; line-height:1 stops the person glyph drifting. */
    .app-activity-row__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 2rem;
        height: 2rem;
        line-height: 1;
        color: var(--color-ink-soft);
    }

    .app-activity-row__body {
        flex: 1;
        min-width: 0;
    }

    .app-activity-row__head {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex-wrap: wrap;
    }

    .app-activity-row__name {
        font-weight: 500;
    }

    .app-activity-row__tag {
        padding: 0.1rem var(--space-2);
        border-radius: var(--radius-pill);
        background: var(--color-surface-alt);
        color: var(--color-ink-soft);
        font-size: var(--fs-ui-sm);
    }

    .app-activity-row__activity {
        color: var(--color-ink);
        font-size: var(--fs-ui-sm);
    }

    .app-activity-row__purpose {
        color: var(--color-ink-soft);
        font-size: var(--fs-ui-sm);
    }

    .app-activity-row__meta {
        color: var(--color-ink-mute);
        font-size: var(--fs-ui-sm);
    }

    /* Actor-type tints keyed off the frozen DocumentActorType key
       (1=Owner, 2=EngagedProfessional, 3=ShareRecipient, 4=RelyingParty, 5=PlatformSystem, 6=PlatformStaff).
       Types 3/4/5 are neutral; only Owner (green), Professional (blue) and Staff (amber) tint.
       Tags carry the tinted background; the row glyph takes just the tone colour (no circle). */
    .app-activity-row__tag--type-1 {
        background: var(--color-success-soft);
        color: var(--color-success-deep);
    }
    .app-activity-row--type-1 .app-activity-row__icon {
        color: var(--color-success-deep);
    }

    .app-activity-row__tag--type-2 {
        background: var(--color-info-soft);
        color: var(--color-info-deep);
    }
    .app-activity-row--type-2 .app-activity-row__icon {
        color: var(--color-info-deep);
    }

    .app-activity-row__tag--type-6 {
        background: var(--color-warn-soft);
        color: var(--color-warn-deep);
    }
    .app-activity-row--type-6 .app-activity-row__icon {
        color: var(--color-warn-deep);
    }

    /* Platform-staff rows get an amber, full-bleed background (no rounding). */
    .app-activity-row--type-6 {
        background: var(--color-warn-soft);
        border-radius: 0;
    }

    .app-activity__loadmore {
        align-self: flex-start;
        padding: var(--space-2) var(--space-4);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-pill);
        background: transparent;
        color: var(--color-ink);
        font-size: var(--fs-ui);
        cursor: pointer;
    }

    .app-activity__loadmore:hover {
        border-color: var(--color-accent);
    }

    .app-activity__empty {
        padding: var(--space-5);
        color: var(--color-ink-mute);
        text-align: center;
    }

    .app-activity__footer {
        margin: 0;
        color: var(--color-ink-faint);
        font-size: var(--fs-ui-sm);
    }
}