/* col_picker — one vertical, category-grouped column list. See CLAUDE_notes.md. */

.cp { display: flex; flex-direction: column; min-height: 0; height: 100%; }

.cp-toolbar {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-body);
}
.cp-tool {
    border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--primary-color); border-radius: 6px; cursor: pointer;
    font-size: var(--fs-2xs); font-weight: 600; padding: 0.25rem 0.6rem;
    transition: background 0.12s, color 0.12s;
}
.cp-tool:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

.cp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0.4rem 0.6rem 0.8rem; }

.cp-cat { margin-bottom: 0.55rem; }
/* The header carries its own checkbox, which checks or unchecks everything in
   the section and shows "partly checked" when only some of it is on. */
.cp-cat-head {
    display: flex; align-items: center; gap: 0.55rem; cursor: pointer;
    padding: 0.35rem 0.15rem; margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--border-color);
    position: sticky; top: 0; background: var(--bg-card); z-index: 2;
}
.cp-cat-name {
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-muted);
}
.cp-cat-check { accent-color: var(--primary-color); cursor: pointer; flex-shrink: 0; opacity: 0.55; }
.cp-cat-head:hover .cp-cat-check { opacity: 0.9; }
.cp-cat-check:checked,
.cp-cat-check:indeterminate { opacity: 1; }
.cp-cat-check:checked ~ .cp-cat-name,
.cp-cat-check:indeterminate ~ .cp-cat-name { color: var(--primary-color); }
.cp-cat-check:disabled { opacity: 0.3; cursor: default; }
.cp-cat-empty {
    padding: 0.25rem 0 0.25rem 1.9rem;
    font-size: var(--fs-2xs); color: var(--text-muted); font-style: italic;
}

/* The wide indent is the whole point of the grouped list: a choice must read as
   sitting UNDER its section, not beside it. */
.cp-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.28rem 0.4rem 0.28rem 1.9rem;
    border-radius: 6px; border: 1px solid transparent;
}
.cp-item:hover { background: var(--primary-row-hover); }

.cp-hit {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 0.55rem;
    cursor: pointer; margin: 0;
}
.cp-check { accent-color: var(--primary-color); cursor: pointer; flex-shrink: 0; }
.cp-label {
    font-size: var(--fs-md); color: var(--text-color);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Checked = in the table. Accent colour carries that; an unchecked row keeps the
   normal text colour and only its checkbox fades back. */
.cp-item:not(.is-on) .cp-check { opacity: 0.4; }
.cp-item:not(.is-on):hover .cp-check { opacity: 0.75; }
.cp-item.is-on .cp-label { color: var(--primary-color); font-weight: 600; }

/* A row moved out of its config section keeps a tag naming where it belongs. */
.cp-tag {
    flex-shrink: 0; font-size: var(--fs-4xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); background: var(--bg-body);
    border: 1px solid var(--border-color); border-radius: 4px;
    padding: 0.05rem 0.3rem;
}
.cp-note { flex-shrink: 0; font-size: var(--fs-3xs); color: var(--text-muted); font-style: italic; }

.cp-help {
    flex-shrink: 0; cursor: help; color: var(--text-muted);
    width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; font-style: italic; line-height: 1;
}
.cp-help::before { content: 'i'; }
.cp-help:hover { color: var(--primary-color); }

/* Drag handle. It sits BEFORE the checkbox so the row reads
   grip · check · label, and it is the only thing that starts a drag (col_picker.js
   flips the row's draggable flag while it is held). It is a real <button> so Tab
   reaches it and the arrow keys can reorder without a pointer at all. */
.cp-grip {
    flex-shrink: 0; width: 14px; height: 20px; padding: 0;
    border: 0; background: none; cursor: grab;
    color: var(--text-muted); opacity: 0.35;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity 0.12s, color 0.12s;
}
/* Six dots drawn in CSS: ToolIcons has no grip entry, and a text glyph would not
   sit square in a fixed box. Two columns of three, via a dotted background. */
.cp-grip::before {
    content: ''; display: block;
    width: 7px; height: 11px;
    background-image: radial-gradient(circle at 1px 1px, currentColor 1.1px, transparent 1.3px);
    background-size: 4px 4px;
}
.cp-item:hover .cp-grip { opacity: 0.8; }
.cp-grip:hover, .cp-item.is-on .cp-grip { opacity: 1; color: var(--primary-color); }
.cp-grip:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; border-radius: 3px; opacity: 1; }
.cp-grip:active { cursor: grabbing; }

.cp-item.is-dragging { opacity: 0.4; }

/* Where the row would land. A line above the row it would sit before, or along
   the bottom of the section when it would go last — including an empty one. */
.cp-item.cp-drop-before { box-shadow: inset 0 2px 0 0 var(--primary-color); }
.cp-cat.cp-drop-end { box-shadow: inset 0 -2px 0 0 var(--primary-color); }

@media (max-width: 768px) {
    .cp-item { padding-left: 1.2rem; }
    .cp-note { display: none; }
}