/* ============================================================
   Checklist — one named list of items to tick off.
   Gallery cards reuse .folder from ideas.css.
   ============================================================ */

.cl{
  flex:1; overflow-y:auto;
  padding:26px 22px 100px;
}
.cl__inner{ width:100%; max-width:680px; margin:0 auto; }
.cl__empty{ padding:48px 20px 30px; }

/* done/total pill in the editor toolbar */
.cl-count{
  display:inline-flex; align-items:center;
  height:24px; padding:0 10px;
  border-radius:var(--pill);
  background:var(--accent-tint); color:var(--accent-ink);
  font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums;
}

.cl-card{
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
}

.cl-progress{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px 8px;
}
.cl-progress__bar{
  flex:1; height:5px; border-radius:99px;
  background:var(--hair); overflow:hidden;
}
.cl-progress__bar i{
  display:block; height:100%; width:0;
  border-radius:99px; background:var(--accent);
  transition:width .3s var(--ease);
}
.cl-progress__text{
  flex:none; font-size:12.5px; color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.cl-card.is-complete .cl-progress__text{ color:var(--accent-ink); font-weight:600; }

.cl-list{ padding:2px 12px 8px; }

/* ── item row ────────────────────────────────────────────── */
.cl-item{
  display:flex; align-items:flex-start; gap:9px;
  padding:6px 4px 6px 0;
  border-radius:var(--r-sm);
  transition:background .12s var(--ease);
}
.cl-item:hover{ background:var(--surface-2); }

.cl-item__grip{
  flex:none; width:18px; align-self:center;
  margin-left:-4px;
  display:grid; place-items:center;
  color:var(--faint); opacity:0;
  transition:opacity .14s var(--ease);
}
.cl-item__grip svg{ width:14px; height:14px; }
.cl-item:hover .cl-item__grip{ opacity:.75; }

/* A rounded square, not Ideas' circle — the two list sections should be
   told apart at a glance. */
.cl-item__box{
  position:relative;
  flex:none; width:20px; height:20px; margin-top:2px;
  display:grid; place-items:center;
  border:1.75px solid #C9CDD4; border-radius:6px;
  background:var(--surface);
  color:transparent;
  transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
/* a larger invisible hit area, so the box is easy to tap */
.cl-item__box::after{ content:""; position:absolute; inset:-8px; }
.cl-item__box svg{ width:12px; height:12px; stroke-width:3; }
.cl-item__box:hover{ border-color:var(--accent); }
.cl-item.is-done .cl-item__box{
  background:var(--accent); border-color:var(--accent); color:#fff;
}

.cl-item__text{
  flex:1; min-width:0;
  padding:1px 2px;
  border:0; background:transparent;
  font-family:inherit; font-size:14.5px; line-height:1.5; color:var(--ink);
  resize:none; overflow:hidden;
}
.cl-item__text:focus{ outline:none; }
.cl-item__text::placeholder{ color:var(--faint); }
.cl-item.is-done .cl-item__text{ color:var(--faint); text-decoration:line-through; }

.cl-item__del{
  flex:none; margin-top:1px;
  opacity:0; transition:opacity .14s var(--ease);
}
.cl-item:hover .cl-item__del,
.cl-item__del:focus-visible{ opacity:1; }

.cl-add{
  display:flex; align-items:center; gap:9px;
  width:100%; padding:7px 4px 7px 27px;
  border-radius:var(--r-sm);
  color:var(--faint); font-size:14px;
  text-align:left;
}
.cl-add:hover{ background:var(--surface-2); color:var(--accent-ink); }
.cl-add svg{ width:15px; height:15px; }

@media (max-width:640px){
  .cl{ padding:18px 12px 90px; }
  .cl-item__grip{ display:none; }
  .cl-item__box{ width:22px; height:22px; }
  .cl-add{ padding-left:8px; }
  .cl-item__del{ opacity:1; }
}

/* touch devices never hover, so the delete button must stay visible */
@media (hover:none){
  .cl-item__del{ opacity:1; }
}