.task-activity[hidden] { display: none; }
.task-activity {
    position: fixed;
    inset: auto 1rem 1rem auto;
    z-index: 30;
    width: min(25rem, calc(100vw - 2rem));
    max-height: min(45vh, 24rem);
    overflow: auto;
    padding: .9rem 1rem;
    border: 1px solid var(--border-low-contrast, #d7d7d7);
    border-radius: .75rem;
    background: var(--secondary-bg, #fff);
    color: var(--primary-color, #272727);
    box-shadow: 0 .4rem 1.6rem rgb(0 0 0 / .1);
    pointer-events: none;
}
.task-activity-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.task-activity-list { list-style: none; padding: 0; margin: 0; }
.task-activity-item { display: grid; grid-template-columns: 1.1rem 1fr auto; gap: .65rem; align-items: center; padding: .35rem 0; font-size: .85rem; }
.task-activity-label { overflow-wrap: anywhere; }
.task-activity-elapsed { color: var(--muted-text, #666); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .75rem; }
.task-activity-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border: 2px solid var(--border-low-contrast, #d7d7d7);
    border-top-color: var(--primary-color, #555);
    border-radius: 50%;
    animation: task-activity-spin .85s linear infinite;
}
form[data-task-running] [aria-disabled="true"] { cursor: wait; opacity: .7; }
@keyframes task-activity-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .task-activity-spinner { animation: none; border-style: dotted; } }
@media (max-width: 480px) {
    .task-activity { inset: auto .6rem .6rem .6rem; width: auto; padding: .75rem; }
    .task-activity-item { grid-template-columns: 1rem 1fr; }
    .task-activity-elapsed { grid-column: 2; }
}