/* ═══════════════════════════════════════════════════════════════════════════
   Scrum Boards phase 2 — Wave 2 "checklists" (2026-08-09).
   Card checklist section (BoardCardChecklist.razor): the Todo subtask idiom
   with a done-of-total progress bar. ocsb-cl- prefix. The buttons are house
   OcButton / OcIconButton components and bring their own styling (Wave 3
   "designsystem"), so nothing here styles a control. Tokens only — every color
   flips with [data-oc-theme] via oc-theme.css, so no dark overrides needed.
   ═══════════════════════════════════════════════════════════════════════════ */

.ocsb-cl {
    margin: var(--oc-space-3) 0;
}

.ocsb-cl-head {
    display: flex;
    align-items: baseline;
    gap: var(--oc-space-2);
}

.ocsb-cl-title {
    margin: 0;
}

.ocsb-cl-count {
    color: var(--oc-text-muted);
    font-size: var(--oc-fs-sm);
}

.ocsb-cl-bar {
    height: 6px;
    margin: var(--oc-space-2) 0;
    border-radius: var(--oc-radius-pill);
    background: var(--oc-surface-muted);
    overflow: hidden;
}

.ocsb-cl-bar-fill {
    height: 100%;
    border-radius: var(--oc-radius-pill);
    background: var(--oc-emerald-600);
    transition: width var(--oc-dur-fast) var(--oc-ease);
}

.ocsb-cl-row {
    display: flex;
    align-items: center;
    gap: var(--oc-space-2);
    padding: var(--oc-space-1) 0;
    border-bottom: 1px solid var(--oc-border-subtle);
}

.ocsb-cl-row:last-of-type {
    border-bottom: none;
}

.ocsb-cl-check {
    flex-shrink: 0;
    accent-color: var(--oc-emerald-600);
}

.ocsb-cl-text {
    flex: 1;
    color: var(--oc-text);
}

.ocsb-cl-text-input {
    flex: 1;
    min-width: 0;
    padding: var(--oc-space-1) var(--oc-space-2);
    border: 1px solid transparent;
    border-radius: var(--oc-radius-sm);
    background: transparent;
    color: var(--oc-text);
    font-size: var(--oc-fs-sm);
}

.ocsb-cl-text-input:hover {
    border-color: var(--oc-border-subtle);
}

.ocsb-cl-text-input:focus {
    outline: none;
    border-color: var(--oc-border);
    background: var(--oc-surface);
    box-shadow: var(--oc-shadow-focus);
}

.ocsb-cl-row.is-done .ocsb-cl-text,
.ocsb-cl-row.is-done .ocsb-cl-text-input {
    text-decoration: line-through;
    color: var(--oc-text-muted);
}

.ocsb-cl-add {
    display: flex;
    align-items: center;
    gap: var(--oc-space-2);
    margin-top: var(--oc-space-2);
}

.ocsb-cl-add .ocsb-cl-text-input {
    border-color: var(--oc-border-subtle);
}

.ocsb-cl-empty {
    color: var(--oc-text-muted);
    font-size: var(--oc-fs-sm);
    margin: var(--oc-space-2) 0 0;
}