/* ============================================================================
   course-widgets/checklist.css -- widget #29

   a titled checklist with a header bar and numbered (monitoring) or warning
   (redflag) rows. theme-token colors only. the marker color encodes the variant
   meaning: accent for a neutral step-list, muted for the cautionary red-flag
   list (we avoid a literal red so the widget stays on-palette).
   ============================================================================ */

.cw-ckl { display: block; }

.cw-ckl-card {
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    overflow: hidden;
}

.cw-ckl-header {
    padding: 12px 16px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: none;
    color: var(--cw-text);
    background: var(--cw-accent-soft);
    border-bottom: 1px solid var(--cw-border);
}

.cw-ckl-intro {
    margin: 0;
    padding: 12px 16px 0;
    font-size: 0.84rem;
    color: var(--cw-muted);
    line-height: 1.5;
}

.cw-ckl-rows { padding: 6px 0; }

.cw-ckl-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--cw-border);
}
.cw-ckl-row:first-child { border-top: 0; }

.cw-ckl-marker {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cw-accent);
    background: var(--cw-accent-soft);
    border: 1px solid var(--cw-border);
}

.cw-ckl-body { flex: 1 1 auto; min-width: 0; }
.cw-ckl-text { font-size: 0.88rem; line-height: 1.5; color: var(--cw-text); }
.cw-ckl-note { margin-top: 3px; font-size: 0.76rem; line-height: 1.4; color: var(--cw-muted); }

/* redflag variant: warning marker reads as caution via a bordered accent ring */
.cw-ckl--redflag .cw-ckl-marker {
    color: var(--cw-text);
    background: transparent;
    border: 1.5px solid var(--cw-accent);
    font-weight: 800;
}

/* --- do-dont variant: two columns side by side --- */
.cw-ckl--do-dont .cw-ckl-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 12px;
}
.cw-ckl-col { border: 1px solid var(--cw-border); border-radius: var(--cw-radius); overflow: hidden; }
.cw-ckl-colhead {
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 700;
}
.cw-ckl-col--do .cw-ckl-colhead   { background: rgba(16,185,129,.12); color: #10b981; }
.cw-ckl-col--dont .cw-ckl-colhead { background: rgba(239,68,68,.12); color: #ef4444; }
.cw-ckl-col .cw-ckl-rows { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cw-ckl-col--do .cw-ckl-marker   { color: #10b981; }
.cw-ckl-col--dont .cw-ckl-marker { color: #ef4444; }
@media (max-width: 520px) { .cw-ckl--do-dont .cw-ckl-cols { grid-template-columns: 1fr; } }