/*
 * Settings panel. Prefixed `settings-`.
 * Appearance theme apply is already on primitives — this file
 * is for Insights / Security / session density only.
 * Do not redefine .section-title / .empty-state / .danger-btn.
 */

.settings-insights {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.settings-insights-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.settings-salient-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.settings-salient-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.settings-salient-context {
    flex: 0 0 45%;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-salient-bar-track {
    flex: 1 1 auto;
    height: var(--spacing-xs);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text-secondary) 18%, transparent);
    overflow: hidden;
}

.settings-salient-bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-gold) 70%, var(--primary-blue));
}

.settings-passkeys-list-item-selectable {
    cursor: pointer;
}

.settings-passkeys-list-item-selected {
    border-color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 12%, var(--card-bg));
}