/* Pretty checkbox pills */
.chkPill{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid rgba(17,24,39,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  color: var(--text);
  cursor:pointer;
  user-select:none;
  box-shadow: var(--shadow2);
}
.chkPill:hover{ box-shadow: var(--shadow); transform: translateY(-1px); }
.chkPill input{ position:absolute; opacity:0; pointer-events:none; }
.chkDot{
  width:18px; height:18px;
  border-radius: 999px;
  border:1px solid rgba(17,24,39,.25);
  background: rgba(255,255,255,.95);
  display:grid; place-items:center;
  flex: 0 0 18px;
}
.chkDot::after{
  content:'';
  width:10px; height:10px;
  border-radius: 999px;
  background: rgba(37,99,235,.95);
  transform: scale(0);
  transition: transform .12s ease;
}
.chkPill.checked{
  border-color: rgba(37,99,235,.30);
}
.chkPill.checked .chkDot{ border-color: rgba(37,99,235,.40); }
.chkPill.checked .chkDot::after{ transform: scale(1); }
.chkText{ color: var(--text); font-size: 13px; }
.chkText a{ color: var(--accent2); text-decoration:none; }
.chkText a:hover{ text-decoration:underline; }