/**
 * Suffah — Safety & moderation styles (Phase 11)
 * Uses design tokens from variables.css only; no hardcoded colors.
 */

.safety-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-4);
}

.safety-hint {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.safety-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.report-target {
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.report-reasons {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-4);
}

.report-reasons__option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    cursor: pointer;
}

.safety-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border-color);
}

.safety-row__name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    color: inherit;
    font-size: var(--text-sm);
}

.safety-row__name span { color: var(--text-tertiary); }