/* ===================================
   PREFERENCE CHECKBOX GRID
   Container-responsive grid of toggleable
   items (highlighted when checked). Columns
   reflow to the available width.
   =================================== */

.pref-grid-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pref-grid {
    display: grid;
    gap: var(--space-2);
    /* Container-responsive: fit as many >=150px tracks as the grid's own
       width allows, collapsing to fewer columns (down to 1) inside narrow
       modals. min(150px, 100%) keeps a single column from overflowing when
       the container itself is narrower than 150px. Replaces the old
       viewport-based 5->1 media query, which ignored the modal width and let
       the fixed column count overflow narrow panels on desktop. */
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.pref-grid-item {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-layer-3);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    transition: all var(--duration-150) var(--easing-out);
}

.pref-grid--compact {
    gap: var(--space-1);
}

.pref-grid--compact .pref-grid-item {
    padding: var(--space-1) var(--space-2);
}

.pref-grid--compact .checkbox-label {
    font-size: var(--text-xs);
}

.pref-grid-item:hover {
    border-color: var(--border-default);
}

.pref-grid-item-checked {
    background: var(--success-light);
    border-color: var(--color-success);
}

.pref-grid-item-checked:hover {
    border-color: var(--color-success);
}

.pref-grid-empty {
    padding: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
}