/* ================================================================
   Checklist page — grouped, detail-rich items (Maya's handbook)
   Overrides the shared two-column .checklist grid when grouped.
   ================================================================ */

.cq .checklist.cl-grouped{
  display:block;
  grid-template-columns:none;
  gap:0;
}

/* One block per migration phase --------------------------------- */
.cq .cl-grouped .cl-group{
  display:block;
  padding:0;
  margin:0 0 26px;
}
.cq .cl-grouped .cl-group:last-child{ margin-bottom:0; }

.cq .cl-phase{
  font-family:var(--font-label, inherit);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  color:var(--amber);
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}

/* Items within a phase — two columns on wide screens ------------ */
.cq .cl-items{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 24px;
}
@media (max-width:640px){
  .cq .cl-items{ grid-template-columns:1fr; }
}

.cq .cl-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:color-mix(in srgb, var(--surface, var(--bg-2)) 60%, transparent);
  transition:border-color .15s ease, background .15s ease;
}
.cq .cl-item:hover{
  border-color:var(--line-2);
  background:color-mix(in srgb, var(--surface, var(--bg-2)) 90%, transparent);
}

.cq .cl-item input{
  appearance:none;
  width:20px; height:20px;
  flex:0 0 auto;
  border:2px solid var(--line-2);
  border-radius:5px;
  cursor:pointer;
  margin-top:2px;
  position:relative;
}
.cq .cl-item input:checked{ background:var(--amber); border-color:var(--amber); }
.cq .cl-item input:checked::after{
  content:"\2713";
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:#2a1c06; font-size:.8rem; font-weight:700;
}

.cq .cl-text{ min-width:0; }

.cq .cl-item label{
  display:block;
  font-size:.95rem;
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
  cursor:pointer;
}
.cq .cl-detail{
  margin:3px 0 0;
  font-size:.82rem;
  line-height:1.4;
  color:var(--ink-soft);
}

/* Ticked-off state ---------------------------------------------- */
.cq .cl-item input:checked + .cl-text label{
  color:var(--ink-faint);
  text-decoration:line-through;
  text-decoration-color:var(--amber);
}
.cq .cl-item input:checked + .cl-text .cl-detail{
  color:var(--ink-faint);
}