/* Minimal styles for S8 Checklist Run screen (scoped, small) */
.cl-checklist-banner { padding:12px 16px; border-radius:12px; margin:12px; display:flex; align-items:center; gap:12px; }
.cl-checklist-banner--completed { background: color-mix(in srgb, var(--cl-positive) 12%, var(--cl-bg-elevated)); color: var(--cl-text); }
.cl-checklist-banner--cancelled { background: color-mix(in srgb, var(--cl-negative) 12%, var(--cl-bg-elevated)); color: var(--cl-text); }

.cl-checklist-progress { height:10px; background:var(--cl-bg-tinted); border-radius:8px; overflow:hidden; margin:12px 16px; }
.cl-checklist-progress > .bar { height:100%; background:var(--cl-link); transition:width 240ms cubic-bezier(.34,1.56,.64,1); }

.cl-checklist-items { padding: 12px 16px; display:flex; flex-direction:column; gap:8px; }
.cl-checklist-item { display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px; background:var(--cl-bg-elevated); }
.cl-checklist-item[aria-disabled='true'] { opacity:0.6; pointer-events:none; }
.cl-checklist-item--error { outline:2px solid var(--cl-negative); outline-offset:1px; }
.cl-checklist-item .chk { width:22px; height:22px; border-radius:6px; border:1px solid var(--cl-separator); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.cl-checklist-item .chk.is-done { background:var(--cl-positive); color:white; border-color:transparent; }
.cl-checklist-item .chk:disabled { opacity:0.5; }
.cl-checklist-item .label { flex:1; }

.cl-cancel-reason { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:120; }
.cl-cancel-reason .panel { background:var(--cl-bg-elevated); padding:16px; border-radius:12px; width:92%; max-width:520px; box-shadow:0 8px 32px rgba(11,15,25,0.12); }
.cl-cancel-reason textarea { width:100%; min-height:88px; margin-bottom:12px; }