/* ============================================================
 * checklist.css — Checklist progress, groups, items, add form
 * My Travel History v2.0 — Modular CSS
 * ============================================================ */

/* ========== Checklist ========== */
.cl-progress{margin-bottom:var(--sp-3);padding:12px 14px;background:var(--g50);border-radius:var(--r-lg);border:1px solid var(--g200)}
.cl-bar{height:12px;background:var(--g200);border-radius:6px;overflow:hidden;margin-top:8px}
.cl-fill{height:100%;background:var(--success);border-radius:6px;transition:width .4s var(--ease)}
.cl-group{margin-bottom:10px;border-radius:var(--r-lg);overflow:hidden}
.cl-group-title{font-size:16px;font-weight:600;color:var(--g700);padding:8px 10px;display:flex;align-items:center;gap:8px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;background:var(--g50);border-radius:var(--r-lg)}
.cl-group-title:active{background:var(--g100)}
.cl-group-count{font-size:11px;font-weight:500;color:var(--g400)}
.cl-group-arrow{margin-left:auto;font-size:16px;color:var(--g400);transition:transform .2s;transform:rotate(90deg)}
.cl-group.collapsed .cl-group-arrow{transform:rotate(0deg)}
.cl-group-body{transition:all .2s}
.cl-group.collapsed .cl-group-body{display:none}
.cl-item{display:flex;align-items:center;gap:8px;padding:4px 10px;min-height:32px;border-radius:var(--r);
  transition:.2s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cl-item:hover{background:var(--g50)}.cl-item:active{background:var(--g100)}
.cl-check{width:24px;height:24px;border:2px solid var(--g300);border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;transition:.2s;color:transparent}
.cl-item.done .cl-check{background:var(--success);border-color:var(--success);color:#fff}
.cl-item.done .cl-text{text-decoration:line-through;color:var(--g400)}
.cl-text{flex:1;font-size:16px;color:var(--g800)}
.cl-del{width:28px;height:28px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  font-size:11px;opacity:0;transition:.2s;color:var(--g400)}
.cl-item:hover .cl-del{opacity:1}.cl-del:hover{background:var(--error-bg);color:var(--error)}
.cl-add{display:flex;gap:8px;margin-top:6px}
.cl-add .fi{flex:1;min-height:44px}