.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-mono { font-family: var(--font-mono); font-size: 13px; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-right { text-align: right; }
.text-danger { color: var(--error); }


.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.w-full { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }


.hidden-input { display: none; }
.inline { display: inline; }


a.link-accent {
    color: var(--accent);
    text-decoration: none;
}

a.link-accent:hover {
    text-decoration: underline;
}


.table-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.table-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 550;
}

.table-link:hover {
    color: var(--accent);
}


.htmx-indicator {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}


.live-event {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--accent-subtle);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-bottom: 8px;
    animation: flashIn 0.3s ease;
    transition: opacity 0.5s ease;
}

.live-event svg {
    flex-shrink: 0;
    color: var(--accent);
}

.live-event.fade-out {
    opacity: 0;
}

@keyframes flashIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}